Przejdź do treści

#1 HTML dla zielonych

Napisz własną stronę WWW nawet w 1 dzień! Opanuj podstawy tworzenia stron internetowych (znaczniki, akapity, linki, edytory np. Brackets). Zacznij tworzyć za darmo.

Zobacz więcej...

Wszystkie odcinki podcastu HTML:

Podstawy języka HTML

HTML to skrót od Hypertext Markup Language, czyli Hipertekstowy Język Oznaczania. Jest to język komputerowy służący do tworzenia stron internetowych. Dokument HTML jest po prostu plikiem tekstowym, w którym umieszczamy polecenia dotyczące formatowania i wstawiania grafiki.

Struktura dokumentu HTML

Dokument HTML składa się z sekcji nagłówkowej <head>...</head> oraz właściwego ciała dokumentu <body>...</body>. W nagłówku umieszczamy m.in. tytuł strony (<title>) i jej opis. Dla poprawnego wyświetlania polskich znaków diakrytycznych konieczne jest wstawienie deklaracji strony kodowej w sekcji nagłówkowej: <meta charset="utf-8">.

Do edycji stron w języku HTML zaleca się użycie specjalnego edytora (np. Brackets, Pajączek, Bluefish), a nie zwykłego edytora tekstu, ponieważ edytory HTML ułatwiają pracę i chronią przed błędami składniowymi dzięki funkcji kolorowania składni i automatycznemu zamykaniu znaczników.

Znaczniki i akapity

Zwykły tekst wpisuje się bezpośrednio w ciele dokumentu (wewnątrz <body>...</body>). Aby przenieść tekst do nowej linijki, należy użyć znacznika końca linii <br>, ponieważ klawisz Enter jest ignorowany przez przeglądarkę.

Akapit (paragraf) jest tworzony za pomocą znacznika <p>...</p>. Akapity są rozdzielone linijką przerwy i służą do estetycznego i logicznego podziału treści.

Wyrównanie tekstu (atrybuty)

Wyrównanie tekstu w akapicie można kontrolować za pomocą atrybutu style="text-align:...":

  • Wyśrodkowanie: <p style="text-align: center">Treść akapitu</p>
  • Justowanie (wyrównanie do obu marginesów): <p style="text-align: justify">Treść akapitu</p>
  • Wyrównanie do prawej: <p style="text-align: right">Treść akapitu</p>

Podstawowe formatowanie tekstu

Znaczniki pozwalają na zmianę wyglądu tekstu. Najczęściej używane znaczniki to:

Zmiana stylu czcionki (znacznik <span>)

Do zmiany stylu (rozmiar, kolor, rodzaj) fragmentu tekstu używa się znacznika <span> z atrybutem style. Wartości atrybutów dla tego samego znacznika można łączyć, rozdzielając je średnikami.

Przykład łączenia formatowania (pogrubienie, kursywa, podkreślenie, rozmiar i kolor):

<p style="text-align: center"><span style="font-size: large; color: red"><b><i><u> To jest jakiś tekst </u></i></b></span></p>

Pamiętaj, że znaczniki zamykamy zawsze w kolejności odwrotnej niż były otwierane.

Kolor tła i pozioma linia

Aby zmienić domyślny kolor tła i tekstu na całej stronie, należy zmodyfikować znacznik <body>, dodając atrybut style. Kolor tła i tekstu zawsze powinno się ustawiać jednocześnie, dbając o kontrast.

<body style="background-color: black; color: white"> Tu jest właściwa treść strony </body>

Poziomą linię, która może rozdzielać sekcje tematyczne, wstawia się za pomocą znacznika <hr>. Znacznik <hr>, podobnie jak <br> i <img>, nie posiada znacznika zamykającego.

Wstawienie obrazka

Aby wstawić obrazek, używa się znacznika <img>, który wymaga podania względnej ścieżki dostępu do pliku graficznego (atrybut src) oraz tekstu alternatywnego (atrybut alt). Należy zawsze używać względnych ścieżek, a nie bezwzględnych (np. nie "C:\www\..."), a w nazwach plików unikać wielkich liter i polskich znaków.

<img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka">

Aby ustawić obrazek na środku ekranu (wycentrować), należy umieścić go wewnątrz znacznika <div> z odpowiednim atrybutem:

<div style="text-align: center"><img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka"></div>

Tworzenie odsyłaczy (linków)

Odsyłacz (hiperłącze, link) jest tworzony za pomocą znacznika <a>.

Dobre praktyki

Aby stworzyć dobry serwis, należy dbać o poprawność ortograficzną stylistyczną, unikać jaskrawych kolorów tła, oraz ograniczać ilość grafiki, ponieważ wpływa ona na szybkość ładowania strony. Należy również pamiętać o zasadach poprawnego wpisywania znaków interpunkcyjnych (np. brak spacji przed kropką, przecinkiem, wykrzyknikiem lub pytajnikiem, ale spacja po nich).

#2 Nagłówek i treść HTML

Twórz profesjonalne strony WWW! Kompleksowy przewodnik po strukturze HTML, znaczeniu metatagów, SEO i RWD. Opanuj robots, canonical, viewport i obowiązkowe UTF-8, aby osiągnąć optymalne wyniki w Google.

Zobacz więcej...

Wszystkie odcinki podcastu HTML:

Informacje nagłówkowe (metadane)

W kontekście tworzenia stron WWW, niezwykle istotne jest zrozumienie struktury dokumentu HTML, w tym różnicy między nagłówkiem (<head>) a ciałem (<body>). Nagłówek zawiera metainformacje, które nie wpływają bezpośrednio na wygląd dokumentu, ale są równie ważne.

Metainformacje i ich znaczenie

Metainformacje, definiowane za pomocą znacznika <meta>, pozwalają określić ogólne wiadomości dotyczące dokumentu, takie jak sposób kodowania znaków, opis zawartości czy język. Zastosowanie metainformacji może pomóc w odszukaniu strony przez wyszukiwarki sieciowe.

  • Deklaracja strony kodowej: zawsze należy stosować <meta charset="utf-8">, zwłaszcza pisząc po polsku, aby uniknąć błędnego wyświetlania polskich liter.
  • Opis zawartości: <meta name="description"> zachęca internautów do odwiedzenia strony, wyświetlając opis w wyszukiwarkach (np. Google).
  • Język strony: atrybut lang w znaczniku <html> (np. lang="pl" dla języka polskiego) jest nieobowiązkowy, ale ułatwia pracę automatycznym tłumaczom.
  • Roboty: znacznik <meta name="robots"> steruje zachowaniem robotów-indekserów, określając, czy strona ma być indeksowana ("index") czy nie ("noindex") oraz czy roboty mają podążać za odsyłaczami ("follow" lub "nofollow").

Dodatkowe funkcje i linki

W nagłówku dokumentu można także umieścić inne elementy <link> lub <meta>, które dodają specjalne funkcje lub wskazują na powiązane dokumenty.

  1. Strona Kanoniczna: w celu usunięcia zduplikowanych stron z wyników wyszukiwania (powielona treść pod różnymi URL), stosuje się znacznik <link rel="canonical">. Wyszukiwarka zazwyczaj wyświetli tylko wskazaną wersję kanoniczną.
  2. Wersje językowe: do wskazania alternatywnych wersji językowych używa się <link rel="alternate" hreflang>. Jest to wykorzystywane przez Google do dopasowania wersji strony do ustawień przeglądarki użytkownika.
  3. Automatyczne odświeżanie/przekierowanie: możliwe jest automatyczne odświeżanie strony co określony czas (np. 60 sekund) za pomocą <meta http-equiv="refresh"> lub przekierowanie użytkownika na inny adres, np. natychmiastowo, za pomocą content="0; url=...".

Pamiętajmy, że polecenie BODY powinno wchodzić w skład każdego dokumentu HTML i zawierać wszystkie widoczne elementy. Wszystkie znaczniki <meta> i <title> muszą znajdować się wewnątrz nagłówka strony (<head>...</head>).

#3 Tekst HTML

Wprowadzenie do tekstu HTML. Poznaj znaczniki blokowe (p, div, h1) i liniowe (b, i). Odkryj, dlaczego kod poprawny semantycznie (używający strong, em, abbr) jest niezbędny dla robotów wyszukiwarek, SEO i syntezatorów mowy.

Zobacz więcej...

Wszystkie odcinki podcastu HTML:

Modele wyświetlania znaczników HTML

Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników:

  • W bloku: Automatycznie dodawane są znaki końca linii przed i po elemencie. Elementy blokowe, takie jak nagłówki (od <h1> do <h6>) oraz akapity (<p>), służą do tworzenia obszerniejszych struktur. Pamiętajmy, że <p> jest elementem blokowym, który nie może zawierać innych bloków. Do grupowania elementów służy również blok <div>.
  • W linii: Elementy są wyświetlane normalnie, obok siebie, bez dodatkowych interlinii. Przykładem są: pogrubienie (<b>), kursywa (<i>) oraz podkreślenie (<u>).

Kluczowa rola semantyki

W HTML rozróżniamy znaczniki formatujące i znaczniki semantyczne. Znaczniki formatujące (np. <b>) mają za zadanie tylko i wyłącznie zmienić wygląd tekstu.

Znaczniki semantyczne, takie jak <strong> (wysoka ważność lub pilność) i <em> (emfaza, czyli szczególny nacisk), określają charakter (znaczenie) tekstu. To właśnie ta informacja, a nie sposób formatowania, jest najważniejsza.

Dlaczego kod musi być poprawny semantycznie?

Kod jest semantyczny, gdy używamy elementów, które nadają swojej zawartości określone znaczenie. Zrozumienie istoty poprawności semantycznej kodu HTML jest niezwykle ważne. Ma to niebagatelne znaczenie dla kluczowych aplikacji:

  • Roboty wyszukiwarek sieciowych (SEO): prawidłowe oznaczanie tekstu ma niebagatelne znaczenie dla robotów wyszukiwarek, które są "niewidome". Docenią one, jeśli użyjemy nagłówków <h1> do <h6> zgodnie z ich przeznaczeniem, a nie tylko dla zmiany rozmiaru czcionki.
  • Syntezatory mowy (dostępność): znaczniki semantyczne mają ogromne znaczenie dla syntezatorów mowy używanych przez osoby niewidome. Na przykład, kiedy syntezator natrafi na <strong>, może specjalnie podkreślić tonem głosu zawarty w nim tekst. Inne istotne znaczniki to <abbr> (skrót/akronim) i <var> (zmienna).

W przypadku dłuższych cytatów, które mają własne akapity, należy użyć bloku cytowanego <blockquote>. Krótkie cytaty wewnątrz akapitu oznaczamy za pomocą <q>.

#4 Odsyłacze HTML

Odsyłacze HTML (linki, hiperłącza): naucz się tworzyć przejścia do innych stron WWW, etykiety (kotwice), linki pocztowe (mailto), odsyłacze obrazkowe oraz mapy odsyłaczy. Kontroluj SEO, blokując indeksowanie za pomocą rel="nofollow", "ugc" i "sponsored".

Zobacz więcej...

Wszystkie odcinki podcastu HTML:

Odsyłacze HTML (hiperłącza)

Odsyłacze (hiperłącza, odnośniki hipertekstowe, linki) stanowią istotę Internetu, powiązując dokumenty ze sobą. Są wykorzystywane głównie do tworzenia spisu treści w serwisie oraz do linkowania do innych ciekawych miejsc w Internecie. Linki te mogą prowadzić do stron w tym samym serwisie lub na drugim końcu świata.

Podstawowe odsyłacze nawigacyjne (wewnętrzne i zewnętrzne)

Obejmuje to linki w obrębie tego samego serwisu oraz standardowe odsyłacze do innych stron w Internecie. Odsyłacze do podstron są pomocne przy tworzeniu spisu treści serwisu.

  • Odsyłacz do podstrony: przenosi użytkownika do innej podstrony w ramach tego samego serwisu, gdzie każda podstrona jest osobnym plikiem HTML: <a href="...">.
  • Odsyłacz do adresu internetowego (WWW): wstawia linki do dowolnych stron w obrębie całego Internetu: <a href="https://...">.
  • Odsyłacz do etykiety (kotwice/zakładki): służy do tworzenia elektronicznej zakładki na stronie: <a href="#...">. Pozwala na bezpośrednie przeniesienie użytkownika do konkretnego, zaznaczonego miejsca w dokumencie, co ułatwia nawigację.

Odsyłacze funkcjonalne i protokolarne

Ta grupa obejmuje linki, które inicjują specyficzne działania klienta (np. wysyłanie poczty, połączenia, transfer plików) przy użyciu różnych protokołów.

  • Odsyłacz pocztowy (e-mail): umożliwia użytkownikom wysłanie listu poprzez otwarcie domyślnego programu pocztowego: <a "mailto:...">.
  • Odsyłacz FTP: pozwala na bezpośredni odsyłacz do pliku na serwerze FTP (ang, File Transfer Protocol): <a href="ftp://...">.
  • Inne protokoły: obejmujące usługi takie jak połączenia zdalne (ssh) czy skrypty (javascript).

Odsyłacze graficzne

Odsyłacze wykorzystujące obrazy jako elementy aktywne, w tym złożone struktury z wieloma klikalnymi obszarami.

  • Odsyłacz obrazkowy (graficzny przycisk): zamiast tekstu, wewnątrz znacznika odsyłacza (<a href>) umieszcza się znacznik obrazka (<a href="..."><img></a>).
  • Mapa odsyłaczy (image map): umożliwia dodanie kilku odnośników na jednym obrazku poprzez podział go na klikalne obszary: <map><area></map>.
  • Serwerowa mapa odsyłaczy: używana w przypadku bardzo skomplikowanych obszarów: <img ismap>.

Kontrola indeksowania (SEO)

Atrybuty używane w celu zablokowania lub sklasyfikowania wybranych odnośników przez wyszukiwarki sieciowe, takie jak Google.

  • Blokada indeksowania (rel="nofollow"): powoduje, że roboty wyszukiwarek nie podążają za tym linkiem, co jest często stosowane np. w systemach komentarzy, aby zniechęcić spamerów.
  • Treść tworzona przez użytkowników (rel="ugc"): wskazuje, że link został umieszczony przez użytkownika serwisu (ang. user generated content), co pomaga chronić reputację strony.
  • Linki sponsorowane (rel="sponsored"): konieczne do oznaczania płatnych linków reklamowych, zgodnie z wytycznymi Google, w celu uniknięcia kar.

#5 Tabele HTML

Opanuj podstawową strukturę (table, tr, td), łączenie komórek (colspan, rowspan), tytuły (caption), grupowanie wierszy (thead, tfoot) i kolumn (colgroup). Dowiedz się, jak tworzyć semantyczne nagłówki (th) i zagnieżdżać tabele.

Zobacz więcej...

Wszystkie odcinki podcastu HTML:

Struktura podstawowa tabel

Tabela w języku HTML to struktura służąca do organizowania danych w formie siatki, składającej się z wierszy i kolumn. Jest używana do prezentacji danych o powtarzającym się charakterze w uporządkowany i czytelny sposób.

  • Znacznik <table>...</table>: oznacza początek i koniec całej tabeli.
  • Znacznik <tr>...</tr>: służy do wstawiania nowego wiersza. W każdym wierszu danej tabeli powinna znajdować się taka sama liczba komórek.
  • Znacznik <td>...</td>: tworzy pojedynczą komórkę (rubrykę) w tabeli, czyli prostokątną przestrzeń na przecięciu wiersza i kolumny, w której można umieścić tekst lub inne elementy.
    • Należy pamiętać, że komórki tabeli <td> muszą znajdować się wewnątrz znaczników wierszy <tr>.
    • Domyślnie tabele nie mają obramowania, co może sprawić, że są mało czytelne. Obramowanie można dodać za pomocą atrybutu <table border="1">.
    • Wąską tabelę można wyśrodkować, używając atrybutu style="margin: auto" w znaczniku <table>.

Nagłówki i tytuły tabeli

  • Komórki nagłówkowe <th>: służą do wstawiania komórek nagłówkowych zamiast zwykłych komórek <td>. Tekst w nich jest zazwyczaj pogrubiony i wyśrodkowany.
    • Użycie <th> jest zalecane ze względu na ważne znaczenie semantyczne, chociaż efekt wizualny można by uzyskać przy użyciu <td> i stylów.
    • Nagłówki mogą być poziome, pionowe lub mieszane.
  • Tytuł tabeli <caption>: służy do wstawiania tytułu (podpisu) tabeli.
    • Element <caption> musi znajdować się zaraz po otwierającym znaczniku <table>.
    • Domyślnie tytuł wyświetla się na środku ponad tabelą.
  • Dymek narzędziowy: w obszernych tabelach, dla każdej zwykłej komórki <td>, przydatne jest określenie atrybutu title="tekst". Wartość tego atrybutu (np. treść nagłówka) pojawi się w dymku podpowiedzi po najechaniu myszą, co ułatwia czytanie, gdy nagłówki znikną z ekranu.

Łączenie komórek (scalanie)

Polecenie to pozwala na łączenie kilku sąsiadujących komórek w jedną większą. Połączona komórka rozciąga się na kilka komórek pojedynczych, eliminując tym samym zbędne znaczniki <td>.

  • Łączenie poziome: atrybut colspan="x" (gdzie "x" to liczba scalanych komórek) dodawany jest do znaczników <td> lub <th> w celu połączenia komórek w poziomie.
  • Łączenie pionowe: atrybut rowspan="y" dodawany jest do znaczników <td> lub <th> w celu połączenia komórek w pionie (w dół przez wiersze).

Grupowanie wierszy, nagłówki i stopki funkcjonalne

Znaczniki te pozwalają na łączenie wierszy w grupy funkcjonalne, co umożliwia łatwiejsze formatowanie za pomocą CSS. W tabeli powinien znajdować się tylko jeden nagłówek i jedna stopka, ale dowolna ilość sekcji ciała.

  • Nagłówek tabeli <thead>: tworzy nagłówek tabeli, który pojawi się na szczycie.
  • Stopka tabeli <tfoot>: tworzy stopkę tabeli, która pojawi się na dole. Ważna zasada: znacznik <tfoot> musi znajdować się w kodzie zaraz po <thead>, czyli przed <tbody>. Ma to ułatwić renderowanie, zanim wczytają się wszystkie wiersze.
  • Ciało sekcji tabeli <tbody>: łączy dowolną liczbę wierszy, stanowiąc główną treść tabeli. Jeśli użyjemy choć jednego znacznika <tbody>, wszystkie pozostałe wiersze muszą być w nie objęte.

Grupowanie kolumn i zagnieżdżanie tabel

  • Grupowanie kolumn <colgroup>: służy do łączenia kolumn w grupy strukturalne i umożliwia nadawanie formatowania całej grupie za pomocą CSS. Atrybut span="x" określa liczbę kolumn do połączenia.
  • Pojedyncza kolumna <col>: jest używana wewnątrz <colgroup> i pozwala nadać dodatkowe atrybuty poszczególnym kolumnom. Formatowanie z <col> nadpisuje formatowanie określone dla całej grupy <colgroup>.
  • Zagnieżdżanie tabel: możliwe jest wstawianie tabel jedna w drugiej. Tabela podrzędna (wewnętrzna) jest umieszczana wewnątrz znacznika komórki <td> tabeli nadrzędnej (zewnętrznej). Zagnieżdżanie może jednak obniżyć czytelność konstrukcji przy zbyt wielu poziomach.

#6 Multimedia HTML

Wstawiaj grafikę (img), dźwięk (MP3, WAV) i wideo (embed) na swoje strony WWW. Odkryj najlepsze formaty (GIF, JPG, PNG) oraz uniwersalne metody osadzania i pobierania plików (a, object). Zadbaj o dostępność i wydajność multimediów na stronie.

Zobacz więcej...

Wszystkie odcinki podcastu HTML:

Wstawianie grafiki

Element <img src="..." alt="..."> służy do wstawiania obrazków, grafik, zdjęć lub ilustracji na stronę WWW. Kluczowe atrybuty to:

  • src: wskazuje ścieżkę dostępu do lokalizacji, w której znajduje się obrazek.
  • alt (tekst alternatywny): krótka informacja, która pojawia się, jeśli grafika nie zostanie wyświetlona (np. gdy użytkownik wyłączył wyświetlanie grafiki) lub jest odczytywana przez syntezatory mowy.
  • width i height: określają szerokość i wysokość obrazka w pikselach ("x") lub w procentach ekranu ("x%"). Jest to dobry nawyk, ponieważ jeśli nie wstawimy rozmiarów, treść może się "rozjeżdżać" podczas wczytywania.

Formaty graficzne

Obrazki powinny być zapisane w jednym z trzech zalecanych formatów:

  • GIF: używany dla rysunków składających się z mniej niż 256 kolorów (np. przyciski menu). Obsługuje przezroczystość. Animowane bannery to specjalne pliki GIF, ale pamiętajmy, że im więcej klatek, tym większy rozmiar pliku.
  • JPG: przeznaczony dla zdjęć wielokolorowych. Nie obsługuje przezroczystości.
  • PNG: pozwala zapisywać grafiki i zdjęcia z bardzo dobrą jakością. Obsługuje kompresję oraz pełną i półprzezroczystość.

Należy unikać formatu BMP, który jest słabo skompresowany, co może kilkukrotnie zwiększyć rozmiar pliku. Multimedia znacząco zwiększają objętość strony, dlatego warto stosować kompresję.

Osadzanie multimediów innych niż grafika

Znacznik <embed> pozwala osadzić na stronie WWW pliki takie jak animacje, filmy lub muzyka. Wtyczka (plug-in) to niewielki program, który jest doinstalowywany do przeglądarki, aby umożliwić odtwarzanie danego pliku.

Znacznik <embed src="ścieżka" width="x" height="y"> współpracuje z różnymi plikami multimedialnymi:

  • Pliki dźwiękowe: *.wav, *.mid, *.mp3 (MPEG Layer-3).
  • Pliki wideo/animacje: *.avi, *.ra, *.mpeg, *.mov, *.asf.
  • Dokumenty PDF: element <embed> może służyć do bezpośredniego wyświetlenia pliku PDF w oknie przeglądarki, pod warunkiem, że użytkownik ma zainstalowany program Adobe Reader.

Ostrzeżenia dotyczące <embed>: polecenie <embed> sprawia wiele kłopotów, a jego użycie jest niezalecane dla plików audio-wideo, ponieważ mają one swoje dedykowane elementy (AUDIO, VIDEO). Ponadto, pliki multimedialne mają duże rozmiary, co może potwornie wydłużyć czas wczytywania strony.

Odsyłacz do pliku

Najbardziej uniwersalną metodą odtwarzania plików multimedialnych, która działa w każdej przeglądarce i z każdym formatem plików (np. JPG, AVI, WAV, TXT, DOC, PDF), jest użycie zwykłego odsyłacza.

Przykład użycia odsyłacza: <a href="ścieżka dostępu do pliku">opis</a>.

Odsyłacz do pliku posiada liczne zalety:

  • Nie powoduje opóźnienia w wczytywaniu strony, ponieważ plik nie jest umieszczony bezpośrednio na niej.
  • Działa z wszystkimi rodzajami plików.
  • Użytkownik może zdecydować, czy chce plik otworzyć, czy zapisać go na dysku.

W przypadku odsyłaczy do plików o większej objętości (np. większej niż 100 KB) dobrze jest podać ich rozmiar, aby użytkownik mógł zdecydować, czy chce uruchomić odnośnik.

Zagnieżdżanie plików multimedialnych

Element <object> działa podobnie jak <embed>, ale jest w założeniu bardziej uniwersalny. Jest przeznaczony do osadzania:

  • Różnorodnych plików multimedialnych (np. dokumenty MS Word, Excel, prezentacje PowerPoint).
  • Interaktywnych aplikacji, np. gier wideo, działających bezpośrednio wewnątrz strony.

Kluczową zaletą <object> jest to, że w jego wnętrzu można umieścić treść zastępczą (np. odsyłacz do pobrania pliku), która wyświetli się w przeglądarce, jeśli dany typ pliku nie jest przez nią obsługiwany.

#7 Widżety HTML

Chcesz wstawić widget (YouTube, Facebook) na swoją stronę? Poznaj sposób na osadzenia "strony w stronie" (iframe). Dowiedz się, jak wczytywać strony do takiego okienka i jak tworzyć wydajne szablony serwisu bez ramek (PHP/SSI).

Zobacz więcej...

Wszystkie odcinki podcastu HTML:

Widżety HTML i ramki - wprowadzenie

Ramki HTML umożliwiają stworzenie strony WWW podzielonej na kilka okienek. Ramka to dodatkowe okienko, które często posiada własne suwaki do przewijania zawartości, a jest umieszczone bezpośrednio na stronie, wyświetlając inną stronę - można to określić jako "strona w stronie". W jednym dokumencie HTML można osadzić wiele takich okienek. Należy jednak pamiętać, że każde okienko wczytuje pełną stronę wraz ze wszystkimi multimediami, co może prowadzić do bardzo długiego czasu ładowania dokumentu, jeśli ramek jest zbyt wiele.

Zastosowanie ramek i widżetów

Ramki są szczególnie użyteczne dla twórców różnego rodzaju widżetów (ang. widgets), czyli specjalnych gotowych kodów. Przykładami takich widżetów mogą być filmiki z YouTube’a lub posty z Facebooka czy Twittera. Strony wyświetlane wewnątrz ramek nie przejmują sposobu formatowania (np. koloru, rozmiaru ani kroju czcionki) z dokumentu nadrzędnego, w którym zostały osadzone. Dzięki tej właściwości widżety wyglądają identycznie, niezależnie od strony, na której zostaną osadzone. Właściciele stron natomiast zyskują bezpieczeństwo, ponieważ zewnętrzny widżet nie może nic zmienić poza obrębem ramki, w której jest wyświetlany, co zapobiega "popsuciu" strony.

Widżety można również projektować samodzielnie, zarówno do udostępniania innym, jak i na własny użytek. W standardowym serwisie statycznym menu nawigacyjne musi być powtórzone na każdej podstronie. Jeśli chcemy dodać nowe podstrony, wymaga to mozolnej zmiany menu w każdym istniejącym dokumencie. Aby wyeliminować tę niedogodność, można stworzyć jeden wspólny widżet zawierający odnośniki menu i osadzić go na każdej podstronie. Dotyczy to także innych stałych elementów, takich jak nagłówek (wraz z logotypem) i stopka serwisu.

Ramki lokalne

Element <iframe> służy do osadzania innej strony internetowej wewnątrz bieżącego dokumentu HTML. Ramki lokalne są umieszczane bezpośrednio na stronie w postaci pojedynczych, pływających okienek (ang. inline) o różnych rozmiarach. W ramce lokalnej można wyświetlić tylko całą oryginalną zawartość dokumentu HTML; nie można nic dodać ani zmieniać, np. ustawić innego koloru tła. Nie ma możliwości wybrania tylko fragmentu z innego dokumentu HTML do wyświetlenia w ramce.

Podstawowa składnia <iframe>

<iframe src="lokalizacja"><a href="lokalizacja">Tekst alternatywny</a></iframe>

  • "lokalizacja" to adres strony lub lokalizacja na dysku, która ma zostać wczytana do ramki.
  • "Tekst alternatywny" jest wyświetlany tylko w przeglądarkach, które nie obsługują ramek lokalnych.
  • Między znacznikiem otwierającym <iframe...> a zamykającym </iframe> można umieścić dowolny kod, który wyświetli się w przypadku, gdy przeglądarka nie obsługuje ramek lokalnych. Najprościej jest podać odsyłacz do tej samej strony, którą wczytujemy do ramki.
  • Jeśli nie określi się koloru tła dokumentu wczytywanego, przeglądarka może przyjąć kolor tła strony, na której wstawiono ramkę.

Określanie rozmiaru ramki <iframe width height>

<iframe src="lokalizacja" width="x" height="y">...</iframe>

lub

<iframe src="lokalizacja" width="x%" height="y%">...</iframe>

  • "x" to szerokość w pikselach, a "y" to wysokość w pikselach.
  • "x%" oznacza szerokość w procentach całego ekranu (lub elementu nadrzędnego), a "y%" oznacza wysokość w procentach.
  • Jeśli zawartość ramki przekroczy jej rozmiary, przeglądarka wyświetli suwaki do przewijania treści.

Wczytywanie strony do ramki lokalnej

Aby strony z menu wczytywały się do ramki umieszczonej w treści, używa się odsyłacza z dodatkowym atrybutem target="...".

<a target="cel" href="lokalizacja">opis</a>

  • Atrybut target pozwala wczytać stronę do wybranej ramki, innej niż ta, w której znajduje się odnośnik.
  • Dzięki temu treść w ramce może zmieniać się po załadowaniu strony.
  • Wartością atrybutu target="..." powinna być nazwa ramki nadana w znaczniku <iframe> (atrybut name="...").
  • Jeśli strona ma zostać wczytana do tej samej ramki, w której znajduje się odsyłacz, można pominąć atrybut target="...".
  • Podanie nazwy nieistniejącej ramki spowoduje otwarcie nowej karty w przeglądarce.

Polecenia specjalne atrybutu target

  • "_self": strona zostanie załadowana do bieżącej ramki (domyślnie).
  • "_top": strona zostanie wczytana w miejsce głównego dokumentu w hierarchii, zmieniając adres w pasku przeglądarki.
  • "_parent": strona zostanie wczytana w miejsce nadrzędnego dokumentu w hierarchii. Różnice między _top a _parent są widoczne przy większej liczbie zagnieżdżonych ramek (strona w stronie w stronie).
  • "_blank": strona zostanie załadowana w nowej karcie przeglądarki.

Wczytanie stron do dwóch ramek jednocześnie

Za pomocą pojedynczego odsyłacza można wczytać nową stronę tylko do jednej ramki. Aby zmienić zawartość dwóch (lub więcej) ramek po kliknięciu odnośnika, należy użyć kodu JavaScript:

<a href="javascript:void(0)" onclick="parent.nazwaramki1.location.href = 'adres1.html'; parent.nazwaramki2.location.href = 'adres2.html'; return false">...</a>

  • "nazwaramki1" i "nazwaramki2" to wartości atrybutów name="..." nadane znacznikom <iframe>.
  • W niektórych przypadkach zamiast parent.nazwaramki trzeba użyć top.nazwaramki albo self.nazwaramki.
  • Możliwe jest załadowanie więcej niż dwóch ramek poprzez dodanie kolejnych poleceń parent.nazwaramki.location.href = 'adres.html' oddzielonych średnikami (";").

Ostrzeżenie przed ramką

Sytuacja, w której użytkownik wczytuje stronę wchodzącą w skład struktury ramek bezpośrednio (np. poprzez wyszukiwarkę), bez strony startowej, powoduje, że strona wydaje się niekompletna (bez menu czy spisu treści). Aby zapobiec takim sytuacjom, możemy poinformować użytkownika, że spis treści znajduje się na innej stronie.

Wyświetlenie ostrzeżenia z odsyłaczem

Należy wstawić kod JavaScript bezpośrednio po znaczniku otwierającym BODY:

<script>if (self == parent) document.write('<div align="center"><b>UWAGA!</b> To jest tylko ramka - wróć do <a href="index.html"><b>STRONY GŁÓWNEJ</b></a></div><hr><br><br>');</script>

Jeśli strona zostanie wczytana poza ramkami, wyświetli się tekst z odsyłaczem do strony głównej (index.html). Przy poprawnym załadowaniu w ramce tekst się nie pojawi.

Automatyczne przekierowanie

Możliwe jest automatyczne przekierowanie użytkownika do strony głównej, jeśli dokument wczyta się poza ramką. Kod należy wkleić w treści nagłówkowej (w ramach <head>) dokumentu, który powinien wyświetlać się tylko w ramce:

<script>if (self == parent) location.href = "index.html";</script>

Szablon strony bez ramek (PHP/SSI)

W przypadku serwisów składających się z wielu podstron, powtarzające się elementy (nagłówek, menu, stopka) muszą być wstawione w każdym pliku. Ramki lokalne (<iframe>) mogłyby być teoretycznym rozwiązaniem, ale mają poważną wadę: w przypadku wczytywania podstron do ramki na pasku adresu wyświetla się cały czas ten sam adres. To powoduje problemy z dodawaniem podstron do ulubionych, przekazywaniem adresów oraz odświeżaniem, które zawsze prowadzi do strony głównej.

Alternatywą bez tych wad jest wydzielenie powtarzających się fragmentów strony (nagłówka i stopki szablonu) i zapisanie ich w osobnych plikach. Wprowadzenie zmian w powtarzających się elementach wymaga modyfikacji tylko jednego lub dwóch plików, a zmiany są widoczne na wszystkich podstronach. To rozwiązanie wymaga użycia języków skryptowych obsługiwanych po stronie serwera, np. PHP lub SSI. Obsługa tych skryptów wymaga specjalnej konfiguracji serwera WWW.

Szablon PHP (PHP Hypertext Preprocessor)

  • Wszystkie pliki podstron serwisu muszą mieć rozszerzenie *.php (np. podstrona.php). Plik strony głównej musi nazywać się index.php.
  • Nagłówek szablonu (np. head.php) oraz stopka (np. foot.php) są zapisywane w osobnych plikach i umieszczane w katalogu głównym konta WWW.
  • Z nagłówka szablonu należy wyciąć elementy, które powinny być różne na każdej podstronie (np. znacznik <title>...</title>) i zastąpić je specjalnym kodem <?php include $_SERVER['SCRIPT_FILENAME'].'.html'; ?>.
  • Każdy plik podstrony musi mieć następującą postać, wstawiając odwołanie do nagłówka i stopki:
    <?php include $_SERVER['DOCUMENT_ROOT'].'/head.php'; ?> Właściwa zawartość strony... <?php include $_SERVER['DOCUMENT_ROOT'].'/foot.php'; ?>
  • Ponieważ element <title> jest różny na każdej podstronie, każdy dokument (np. podstrona.php) musi posiadać odpowiadający sobie plik z kodem nagłówkowym (np. podstrona.php.html) zawierający np. <title>Tytuł strony</title>.

Szablon SSI (Server Side Includes)

  • Szablon SSI tworzy się analogicznie jak PHP, różnice dotyczą głównie rozszerzeń plików i poleceń dołączających.
  • Wszystkie pliki podstron muszą mieć rozszerzenie *.shtml (np. podstrona.shtml). Plik strony głównej musi nazywać się index.shtml.
  • Nagłówek szablonu (np. head.shtml) i stopka (np. foot.shtml) są umieszczane w katalogu głównym.
  • Plik nagłówka head.shtml musi zawierać specjalny komentarz do dołączania różniącego się kodu nagłówkowego (np. tytułu):
    <!--#include virtual="${SCRIPT_NAME}.html" -->
  • Każdy plik podstrony (np. podstrona.shtml) musi zawierać polecenia dołączające nagłówek i stopkę:
    <!--#include virtual="/head.shtml" --> Właściwa zawartość strony... <!--#include virtual="/foot.shtml" -->
  • Podobnie jak w PHP, każdy dokument (np. podstrona.shtml) musi posiadać plik z różniącym się kodem nagłówkowym, nazwany identycznie z przyrostkiem .html (np. podstrona.shtml.html).

#8 Formularze HTML

Opanuj formularze HTML! Twórz interaktywne ankiety i formularze zamówień. Poznaj elementy: pola tekstowe, hasła, checkbox/radio, listy select i textarea. Dowiedz się, jak bezpiecznie przesyłać dane (SSL) i stosować JavaScript do walidacji przed wysłaniem.

Zobacz więcej...

Wszystkie odcinki podcastu HTML:

Wprowadzenie do formularzy HTML i ich zastosowanie

Formularze HTML umożliwiają stosowanie interaktywnych elementów na stronach WWW. Są one przydatne do gromadzenia informacji o użytkownikach odwiedzających serwis lub do zamawiania towarów w sklepach internetowych.

Formularz funkcjonuje jako elektroniczna ankieta, którą wypełnia się bezpośrednio na stronie. Umożliwia to wpisywanie tekstu, odpowiadanie na pytania oraz zaznaczanie jednej lub kilku możliwości.

  • Prosty formularz może być przesłany pocztą elektroniczną e-mail (tzw. prosty formularz pocztowy).
  • W przypadku przesyłania poufnych danych (np. numerów kart kredytowych), należy zadbać o bezpieczeństwo, co można osiągnąć za pomocą skryptów wykonywanych po stronie serwera oraz protokołu SSL.
  • Do obsługi formularzy i ich odbierania stosuje się programy lub specjalne skrypty wykonywane w przeglądarce, np. JavaScript i PHP (PHP Hypertext Preprocessor).

Definicja ram formularza

Formularz wstawia się na stronę za pomocą znacznika <form>. Element ten musi posiadać znacznik otwierający i zamykający, a wszystkie elementy formularza muszą znajdować się pomiędzy nimi. Formularzy nie można zagnieżdżać (umieszczać jednego w drugim).

Podstawowa struktura znacznika <form>:

  • Przesyłanie na e-mail: <form action="mailto:adres e-mail gdzie wysłać formularz" method="post">...</form>.
  • Można również podać temat listu: <form action="mailto:adres e-mail?subject=temat" method="post">...</form>.
  • Obsługa przez skrypt: jako wartość atrybutu action="..." można podać adres skryptu PHP lub CGI.
  • Jeśli formularz jest wysyłany do skryptu PHP lub CGI, jako wartość atrybutu method="..." można również podać "get", co jest często stosowane dla bardzo krótkich formularzy.

Pole tekstowe

Służy do wpisywania np. imienia i nazwiska. Pole tekstowe ma wysokość jednej linii.

  • Wprowadzenie pola: <input type="text" name="nazwa"> lub <input name="nazwa">. Nazwa pola powinna być unikalna w obrębie formularza.
  • Domyślna odpowiedź: użycie atrybutu value="odpowiedź domyślna" powoduje dołączenie tej wartości, jeśli użytkownik nie wpisze innej.
  • Długość pola: atrybut size="k" ustala widoczną długość pola w liczbie znaków (użytkownik może wpisać dowolną ich liczbę, a zawartość będzie się przesuwać).
  • Maksymalna liczba znaków: atrybut maxlength="n" określa maksymalną dopuszczalną liczbę znaków, którą można wpisać.
  • Blokada i odczyt: pole może być tylko do odczytu (readonly) lub całkowicie zablokowane (disabled). Zablokowane pole nie jest przesyłane z danymi formularza.

Hasło

Pole do wpisywania hasła. Różni się od zwykłego pola tekstowego tym, że wpisywane znaki są niewidoczne, zastąpione gwiazdkami ("*").

  • Wprowadzenie pola: <input type="password" name="nazwa">.
  • Przesyłanie ważnych haseł w prostym formularzu pocztowym nie jest bezpieczne. Szyfrowanie można uzyskać, używając protokołu SSL, poprzedzając adres skryptu na serwerze przez "https://".

Pole wyboru (wielokrotny wybór)

Umożliwia użytkownikowi wybór kilku bądź jednej odpowiedzi. Pole wyświetlane jest w postaci kwadratu, który można zaznaczyć i odznaczyć.

  • Wprowadzenie pola: <input type="checkbox" name="nazwa" value="wartość">Opis pola.
  • Wszystkie pola tego typu, dotyczące tego samego pytania, powinny mieć tę samą nazwę, ale atrybut value="..." musi być inny dla każdej odpowiedzi i jest absolutnie konieczny.
  • Domyślne zaznaczenie: atrybut checked powoduje domyślne zaznaczenie pola.
  • Etykieta: aby kliknięcie opisu powodowało zaznaczenie/odznaczenie pola, należy użyć znacznika <label>.

Pole opcji (jednokrotny wybór)

Wprowadza na stronę WWW "przełącznik". Pozwala na zaznaczenie tylko i wyłącznie jednego z pól w grupie, jako możliwości odpowiedzi na to samo pytanie.

Lista rozwijalna

Wprowadza rozwijane menu (pole kombi).

  • Wprowadzenie listy: <select name="nazwa">, gdzie opcje są definiowane przez znaczniki <option>...</option>.
  • Jeśli chcemy przesłać inne wartości niż treść opcji, należy użyć atrybutu value="..." w znaczniku <option>.
  • Wielokrotny wybór: atrybut multiple w znaczniku <select> pozwala wybrać kilka opcji, zaznaczając je za pomocą klawisza Ctrl.
  • Opcja domyślna: atrybut selected w znaczniku <option>.
  • Wysokość pola: atrybut size="w" określa liczbę widocznych wierszy z odpowiedziami.
  • Grupowanie opcji: znacznik <optgroup> z atrybutem label grupuje tematycznie opcje w liście rozwijalnej. Nagłówka grupy nie można wybrać.

Obszar tekstowy (wieloliniowe pole)

Wprowadza wieloliniowe pole tekstowe, w którym można wpisać dłuższy komentarz lub wiadomość.

  • Wprowadzenie pola: <textarea name="nazwa" cols="x" rows="y">Domyślny tekst</textarea>. Atrybuty cols (kolumny) i rows (wiersze) określają widoczną szerokość i wysokość.
  • Tekst domyślny umieszcza się między znacznikami otwierającym i zamykającym <textarea>...</textarea>.
  • Może być ustawione jako tylko do odczytu (readonly) lub zablokowane (disabled).

Selektor plików

Umożliwia użytkownikowi wybranie pliku ze swojego dysku lokalnego. Wprowadza selektor składający się z pola tekstowego na ścieżkę dostępu i przycisku do przeszukania dysku.

Ukryte dane

Tworzy ukryte pole w formularzu, niewidoczne ani niedostępne dla użytkownika, którego wartość jest przesyłana wraz z formularzem.

  • Wprowadzenie pola: <input type="hidden" name="nazwa" value="wartość">.
  • Używane jest często do przekazywania informacji pomiędzy klientem a serwerem (w skryptach serwerowych), które mogłyby zostać utracone z uwagi na bezstanowy charakter protokołu HTTP.

Wysłanie formularza

Domyślnie formularz jest wysyłany po naciśnięciu Enter w polu tekstowym lub polu hasła. Zwykle umieszcza się dodatkowy przycisk wysyłający.

Wyczyszczenie danych

Wyświetla przycisk, którego naciśnięcie powoduje przywrócenie wszystkich pól do wartości początkowych (resetowanie).

  • Wprowadzenie przycisku: <input type="reset" value="wartość">.
  • Zapobieganie pomyłkom: można upewnić się, czy użytkownik chce wyczyścić formularz za pomocą zdarzenia onreset i funkcji JavaScript, np.: <form action="..." onreset="if (!confirm('...')) return false">.

Przycisk

Znacznik ten jest zbliżony do przycisków wysłania i wyczyszczenia, ale pozwala na umieszczenie wewnątrz grafiki, tabeli i formatowanego tekstu (np. pogrubienia).

Grupowanie pól

Służy do tematycznego zgrupowania kilku pól formularza, otaczając je ramką.

Forma Odszyfrowana i Kodowanie

Domyślnie formularze są wysyłane w formie zakodowanej (np. Imi%EA=S%B3awomir...).

  • Forma odszyfrowana: użycie atrybutu enctype="text/plain" w znaczniku <form> powoduje, że formularze są przesyłane w formie odszyfrowanej (np. Imię=Sławomir). Jest to przydatne w przypadku prostych formularzy pocztowych.
  • Strona kodowa: atrybut accept-charset="strona kodowa" (np. windows-1250) informuje przeglądarkę o kodowaniu używanym przez system odbierający dane, co może zapobiec zniekształceniu polskich znaków diakrytycznych.
  • Usuwanie polskich znaków: możliwe jest automatyczne usunięcie polskich znaków diakrytycznych z pól tekstowych i obszarów tekstowych za pomocą skryptu JavaScript wywoływanego przez zdarzenie onsubmit, aby uniknąć problemów w niektórych programach pocztowych.

Interaktywne formularze i skrypty

Przy użyciu języka JavaScript można stworzyć interaktywny formularz. Jednym z ważnych zastosowań skryptów wykonywanych po stronie klienta jest sprawdzenie poprawności wypełnienia formularza, jeszcze przed jego wysłaniem.

  • Walidacja: jeśli dane są obowiązkowe, a użytkownik ich nie wpisze, formularz nie zostanie wysłany (np. skrypt sprawdzający pola typu text, password lub textarea pod kątem pustej wartości).
  • Dynamiczne blokowanie/ukrywanie: za pomocą JavaScript można odblokować lub zablokować inne pola formularza po zaznaczeniu określonej opcji wyboru (np. checkbox). Możliwe jest również dynamiczne ukrywanie pól, gdy nie są potrzebne (za pomocą zmiany stylu display).

Alternatywne metody wysyłania formularzy

Prosty formularz pocztowy (oparty na mailto:) może nie działać poprawnie, jeśli użytkownik nie ma skonfigurowanego programu pocztowego.

  • Skrypt JavaScript: można użyć prostego skryptu JavaScript, który otwiera okno programu pocztowego użytkownika z wypełnioną treścią na podstawie danych z formularza.
  • Skrypty po stronie serwera (np. PHP): aby wysłać formularz na wskazany adres e-mail bez używania programu pocztowego użytkownika, konieczne jest użycie skryptów po stronie serwera, takich jak PHP. Wymaga to, aby serwer obsługiwał PHP, a funkcja mail nie była zablokowana.
  • W przypadku wysyłania formularza skryptem PHP, pola wielokrotnego wyboru (<input type="checkbox">) oraz rozszerzona lista rozwijalna (<select multiple>) muszą mieć na końcu nazwy pusty nawias kwadratowy (np. name="Nazwa[]").

#9 HTML5

Odkryj HTML5: uproszczona składnia, nowe elementy semantyczne (section, article), ulepszone formularze (nowe typy input, walidacja) i natywne multimedia (video, audio). Zoptymalizuj wydajność (preload, async) i bezpieczeństwo (sandbox, popover).

Zobacz więcej...

Wszystkie odcinki podcastu HTML:

Ewolucja i podstawowa składnia HTML5

HTML5 jest piątą, najnowszą wersją specyfikacji języka HTML. Jest to język komputerowy, którego skrót oznacza Hipertekstowy Język Oznaczania (Hypertext Markup Language), służący do tworzenia stron internetowych. Głównymi celami HTML5 było wprowadzenie nowych elementów w celu zwiększenia interaktywności, multimedialności i semantyczności dokumentów.

Ważne cechy ewolucji języka obejmują:

  • Zachowanie kompatybilności wstecz, tak aby użytkownicy starszych przeglądarek mogli korzystać ze stron napisanych w nowym języku.
  • Bardziej szczegółowe określenie sposobu obsługi błędów.
  • Wprowadzenie nowych znaczników semantycznych, aby uczynić sieć bardziej dostępną.

Uproszczona deklaracja typu dokumentu to <!doctype html>, która nie przełącza przeglądarki w tryb Quirks. Uproszczono również deklarację strony kodowej do <meta charset="utf-8">.

Nowe elementy semantyczne i strukturalne

W języku HTML5 wprowadzono nowe elementy, które tworzą sekcje lub grupują zawartość, w tym:

Kluczowe znaczniki sekcji:

  • <section>: reprezentuje ogólną tematyczną grupę treści, często z nagłówkiem, porównywalną do rozdziału w książce. Jeśli chcemy przekazać dodatkowe znaczenie semantyczne, należy używać tego elementu zamiast <div>.
  • <article>: samodzielna część dokumentu lub aplikacji, która potencjalnie mogłaby być opublikowana niezależnie od reszty treści, np. wpis na blogu lub komentarz.
  • <aside>: kawałek treści, który jest tylko nieznacznie powiązany tematycznie z resztą strony (np. bannery reklamowe lub wtrącone cytaty), a jego usunięcie nie spowodowałoby utraty spójności reszty dokumentu.
  • <header>: reprezentuje grupę wprowadzającą albo ułatwienia nawigacyjne. Zazwyczaj zawiera nagłówek sekcji, ale sam w sobie nie tworzy nowej sekcji.
  • <footer>: stanowi stopkę sekcji lub całej strony, przechowując informacje, takie jak autor lub prawa autorskie. Również nie tworzy nowej sekcji w dokumencie.
  • <main>: wskazuje główną zawartość strony WWW, z którą bezpośrednio związany jest tytuł strony. Służy jedynie do grupowania - nie tworzy nowej sekcji.
  • <nav>: sekcja strony zawierająca odnośniki nawigacyjne (np. menu główne).

Inne ważne elementy semantyki:

  • <figure> i <figcaption>: służą do oznaczania załączników (ilustracji, diagramów, kodu źródłowego) i dodawania do nich podpisów.
  • <mark>: służy do zaznaczenia lub uwydatnienia tekstu w określonym kontekście, np. w wynikach wyszukiwania.
  • <time>: poprawnie oznacza datę i/lub czas, często używany z atrybutem datetime="..." w formacie ustandaryzowanym, nawet jeśli treść znacznika jest podana w formacie czytelnym dla użytkownika.
  • <hgroup>: używany do grupowania nagłówka z podtytułem, tytułem alternatywnym lub sloganem.
  • <wbr>: umożliwia przeglądarce przełamanie długiej linii tekstu do następnego wiersza, jeśli linia nie mieści się w szerokości okna, ale nie wymusza przełamania wiersza, jeśli nie ma takiej potrzeby.

Elementy formularzy i interaktywność

HTML5 wprowadza nowe elementy i atrybuty do obsługi formularzy i interakcji:

  • Nowe typy pól <input>: wprowadzono nowe typy dla elementu <input>, które ułatwiają wprowadzanie danych, takie jak: color, date, datetime-local, email, month, number, range, search, tel, time, url, week.
  • <datalist>: tworzy listę rozwijaną z podpowiedziami dla elementu <input>, dodając autouzupełnianie pól formularza.
  • <progress>: wstawia pasek postępu, przedstawiający stopień ukończenia zadania. Może wskazywać określony stopień (value, max) lub nieokreślony.
  • <meter>: wstawia pasek wyniku, przedstawiający określoną wartość (np. zapełnienie dysku lub głosy w ankiecie). Może zawierać atrybuty min, max, low, high i optimum.
  • <details> i <summary>: pozwalają na wstawienie otwieralnego panelu. Element <summary> dostarcza nagłówek panelu, który po kliknięciu otwiera lub zamyka szczegóły.
  • popover: nowy atrybut, który pozwala na stworzenie wyskakującego okienka na warstwie ponad zawartością strony bez użycia JavaScriptu. Wymaga identyfikatora id="..." oraz przycisków z atrybutami popovertarget i popovertargetaction do sterowania.
  • required: atrybut logiczny wymuszający wypełnienie obowiązkowego pola formularza (<input>, <select>, <textarea>).
  • pattern: atrybut umożliwiający walidację pól formularza na podstawie wyrażenia regularnego, używany do wpisywania tekstu w niestandardowym formacie, np. kodu pocztowego.
  • novalidate: atrybut logiczny w elemencie <form>, który pomija walidację wszystkich pól formularza przy jego wysyłaniu.
  • placeholder: wyświetla tymczasową podpowiedź w polu formularza (<input>, <textarea>) w postaci szarego tekstu, który znika po rozpoczęciu wprowadzania danych.
  • form: atrybut umożliwiający umieszczanie pól formularza poza znacznikiem <form> i skojarzenie ich z wybranym formularzem za pomocą jego identyfikatora (id).
  • minlength, maxlength: atrybuty wymuszające minimalną i maksymalną liczbę znaków w polu formularza (<input>, <textarea>).

Multimedia, grafika i ścieżki tekstowe fo filmów

Zmiany w obsłudze mediów:

  • <video>, <audio>, <source>: elementy te służą do osadzania odtwarzaczy filmów wideo i muzyki audio bez wtyczek. Element <source> jest używany do wskazania tego samego materiału multimedialnego w wielu formatach (np. MP4 i OGV), aby przeglądarka mogła wybrać obsługiwany format.
  • <track>: dodaje napisy (ścieżkę tekstową) do filmu wideo. Napisy muszą być zapisane zgodnie ze standardem WebVTT (*.vtt). Atrybut kind może określać rodzaj ścieżki (np. subtitles, captions, descriptions).
  • Responsywny obrazek (<picture>, <source>): pozwala podać wiele alternatywnych plików graficznych, które przeglądarka wybierze w zależności od wielkości ekranu (media="...") lub obsługiwanego formatu (type="..."). Na końcu zawsze musi znajdować się tag <img> jako alternatywa dla starszych przeglądarek.

Optymalizacja wydajności i bezpieczeństwo

Nowe atrybuty dla optymalizacji i bezpieczeństwa:

  • loading="lazy": opóźnia ładowanie zasobów (<img>, <iframe>) do momentu, gdy użytkownik przewinie stronę w ich pobliże, poprawiając wydajność początkowego ładowania strony.
  • fetchpriority: pozwala określić priorytet ładowania krytycznych zasobów (<img>, <link>, <script>) jako low, high lub auto, co zapewnia szybsze wczytywanie ważnych elementów.
  • rel="preload" w <link>: służy do wstępnego ładowania zewnętrznych zasobów, zanim będą potrzebne, za pomocą atrybutów as="..." (określającego rodzaj zasobu, np. image, script, style) i href="...".
  • async w <script>: włącza asynchroniczne ładowanie skryptu JavaScript z zewnętrznego pliku, co zapobiega blokowaniu renderowania strony.
  • decoding="async" w <img>: podpowiada przeglądarce, aby dekodowała obrazek asynchronicznie, co może nie opóźniać wyświetlania reszty strony, zwłaszcza w przypadku dużych obrazków.
  • crossorigin: steruje przesyłaniem danych uwierzytelniających (np. ciasteczek) dla zasobów z innych domen. Może przyjmować wartości anonymous lub use-credentials.
  • data-...: Umożliwia dodanie własnych, niestandardowych atrybutów danych do dowolnego znacznika HTML, wykorzystywanych w skryptach JavaScript.
  • contenteditable: sprawia, że zawartość dowolnego elementu HTML jest edytowalna, umożliwiając dynamiczną edycję na stronie. Może przyjmować wartości true, false lub plaintext-only.

Kontrola użyteczności i zabezpieczenia

Mechanizmy kontroli interakcji i zabezpieczeń:

  • autocomplete="off": zabezpiecza formularze, wyłączając funkcję automatycznego uzupełniania pól formularza (dla <form>, <input>, <select>, <textarea>), co jest zalecane dla pól zawierających wrażliwe dane osobowe.
  • autofocus: automatycznie ustawia kursor tekstowy (fokus) na wybranym elemencie formularza po załadowaniu strony.
  • draggable="false": blokuje możliwość przeciągania danego elementu myszką.
  • inert: sprawia, że element przestaje być interaktywny - użytkownik nie może zaznaczać tekstu, edytować zawartości ani wyszukiwać tekstu (Ctrl+F) w obrębie elementu.
  • sandbox w <iframe>: wprowadza ograniczenia na osadzoną zawartość ramki, tworząc tzw. piaskownicę, która chroni użytkownika przed złośliwymi skryptami lub wyskakującymi oknami. Można odblokować wybrane funkcje, podając listę pozwoleń (np. allow-scripts, allow-forms).
  • srcdoc w <iframe>: pozwala na bezpośrednie osadzenie kodu HTML jako zawartości ramki lokalnej, eliminując potrzebę wczytywania zewnętrznego pliku.
  • spellcheck="false": blokuje automatyczne sprawdzanie pisowni w wybranych polach formularza lub edytowalnych elementach.
  • translate="no": blokuje automatyczne tłumaczenie wybranego fragmentu strony WWW na inne języki przez aplikacje tłumaczące.

Zmiany w istniejących elementach i atrybutach

Wiele elementów i atrybutów zostało zmienionych lub oznaczonych jako przestarzałe:

  • Zmiana elementu <a>: może teraz obejmować elementy blokowe, co jest pomocne przy tworzeniu dużych klikalnych obszarów, np. dla całego artykułu.
  • Zmiana elementu <address>: odnosi się do najbliższego elementu <article> lub <body>, w którym został wstawiony, i może zawierać elementy blokowe (z pewnymi wyjątkami).
  • <i>: oznacza np. termin techniczny, idiom z innego języka lub fragment wtrąconego tekstu.
  • <strong>: oznacza wysoką ważność, a nie mocne wyróżnienie tekstu.
  • Przestarzałe elementy: elementy formatujące, których funkcję przejęły style CSS, zostały wycofane. Należą do nich m.in.: <basefont>, <big>, <center>, <font>, <strike>, <tt>, <frame>, <frameset>, <noframes>.
  • Przestarzałe atrybuty: wycofano atrybuty takie jak rev i charset dla <link> i <a>, longdesc dla <img> i <iframe>, oraz wiele atrybutów formatujących, np. align dla wielu elementów.
  • border dla <table>: może zawierać tylko pustą wartość lub cyfrę "1".
  • reversed w <ol>: atrybut logiczny, który ustala odwrotną (malejącą) kolejność numeracji listy uporządkowanej.
Facebook