Ramki

Mapy, filmy, reklamy, wtyczki społecznościowe to elementy stron internatowych, które często wykorzystują mechanizm ramek.

Mapy

Aktualne informacje o osadzaniu map, w dokumencie internetowym, z wykorzystaniem elementu HTML iframe można uzyskać za pomocą serwisów:

Publikowanie map

Moje Mapy Google

Przykład 1.

<iframe src="https://www.google.com/maps/d/embed?mid=1GfM8vkcY04YynIXz_aKczzs_ERcOIjET" width="640" height="480"></iframe>

 Atrybuty

Mapy Google

  1. Otwórz w przeglądarce stronę Mapy Google
  2. Naciśnij przycisk Menu. 
  3. Naciśnij Udostępnij i umieść mapę. 
  4. W oknie Udostępnij naciśnij Umieszczanie mapy.
  5. Wybierz rozmiar mapy i naciśnij KOPIUJ HTML
  6. Wklej kod do dokumentu.
Przykład 2.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5045441.836400534!2d14.647314372905146!3d51.868357153872026!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47009964a4640bbb%3A0x97573ca49cc55ea!2sPolska!5e0!3m2!1spl!2spl!4v1571275350333!5m2!1spl!2spl" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>



Wybrane parametry:
  • 1d - powiększenie [zoom].
  • 2d - centrum mapy poziomo [longitude].
  • 3d - centrum mapy pionowo [latitude].

OpenStreetMap

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=20.488471984863285%2C50.79725542144864%2C20.751457214355472%2C50.92078336884326&amp;layer=mapnik&amp;marker=50.85906029908938%2C20.619964599609375" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=50.8591&amp;mlon=20.6200#map=12/50.8591/20.6200">Wyświetl większą mapę</a></small>

Wyświetl większą mapę

Filmy

YouTube 


<iframe src="https://www.youtube.com/embed/YulLQOa6WIA"
 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
 allowfullscreen="" width="453" height="250" frameborder="0"> 
</iframe>

Animacje

Google Web Designer

Adobe Animate CC

Wtyczki społecznościowe

Facebook

Twitter

Instagram

Kalendarze

Google Calendar

Inne

Mini Aplikacje HTML5 (SVG, Canvas)

Przekierowanie kodu

Popularne posty z tego bloga

Walidatory

Obraz
Walidator – program sprawdzający poprawność dokumentu o określonej składni. Walidatory stały się na tyle popularną usługą, że niektóre z nich ewoluowały w multiwalidatory przeprowadzające kilka wariantów walidacji jednocześnie. Walidacja kodu CSS Walidatory W3C Walidator znaczników (przekierowanie na Nu ) Walidator CSS Ujednolicony Mamy do dyspozycji trzy możliwości sprawdzania kodu: przez adres URI  poprzez wczytanie kodu z pliku poprzez wpisanie kodu Walidacja kodu HTML (przez URI) Walidacja kodu HTML (poprzez załadowanie pliku) Walidacja kodu HTML (poprzez wpisanie kodu) Nu Html Checker (walidator Nu)
Czytaj więcej

Notepad++

Obraz
Edytor Notepad++ - darmowy edytor kodów źródłowych, ułatwiający  kodowanie w wielu językach programowania (np. C, C++, C#, HTML, XML, CSS, JavaScript, PHP, SQL). Posiada, między innymi, system formatowania kodu, numerowanie wierszy, zawijania bloków, podpowiadania słów danego języka.
Czytaj więcej

Github

Obraz
Github  – hostingowy serwis internetowy przeznaczony dla projektów programistycznych wykorzystujących system kontroli wersji Git. GitHub udostępnia darmowy hosting programów open source i prywatnych repozytoriów.
Czytaj więcej