3. Podstawowa struktura dokumentu
W tej dokumentacji przedstawione zostaną podstawowe elementy języka HTML, ich zastosowanie oraz sposób organizowania treści na stronie.
Dokumentacja została przygotowana z myślą o osobach, które dopiero rozpoczynają naukę HTML. Kolejne rozdziały przedstawiają najważniejsze elementy, takie jak nagłówki, akapity, linki, obrazy, listy, tabele oraz formularze.
Celem dokumentacji jest pokazanie, jak za pomocą HTML stworzyć poprawnie uporządkowaną i czytelną strukturę strony internetowej.
HTML oznacza HyperText Markup Language, czyli język znaczników hipertekstowych.
Jest to język używany do tworzenia struktury oraz zawartości stron internetowych.
HTML pozwala określić, jakie elementy znajdują się na stronie, np.:
Można powiedzieć, że HTML określa co znajduje się na stronie, a nie przede wszystkim jak to wygląda.
HTML wykorzystuje znaczniki, które informują przeglądarkę, czym jest dana część dokumentu.
Przykladowo:
<h1>Tytul strony</h1>
Tutaj:
Przeglądarka odczytuje taki dokument i przedstawia jego zawartość użytkownikowi.
HTML jest częścią podstawowego zestawu technologii wykorzystywanych przy tworzeniu stron internetowych.
HTML <— odpowiada za strukturę i znaczenie treści.
CSS <— odpowiada za wygląd strony, np. kolory, wielkość elementów czy ich rozmieszczenie.
JavaScript <— pozwala dodawać interakcje i zachowanie strony.
HTML nie jest językiem programowania w takim znaczeniu jak JavaScript, Python czy C++.
Jest językiem znaczników, ponieważ wykorzystuje znaczniki do opisywania struktury dokumentu.
HTML jest wykorzystywany praktycznie na każdej stronie internetowej.
Można za jego pomocą tworzyć między innymi:
HTML jest językiem znaczników służącym do tworzenia struktury stron internetowych. Za pomocą odpowiednich elementów określamy znaczenie i rodzaj poszczególnych fragmentów treści. HTML współpracuje z CSS oraz JavaScript, które odpowiadają odpowiednio za wygląd i interakcję strony.
Każda strona internetowa utworzona za pomocą HTML posiada określoną strukturę. Dzięki niej przeglądarka wie, w jaki sposób odczytać dokument i wyświetlić jego zawartość.
Podstawowy dokument HTML składa się z kilku najważniejszych elementów: DOCTYPE, html, head oraz body.
DOCTYPE jest deklaracją informującą przeglądarkę, że dokument został napisany w standardzie HTML5.
Deklaracja znajduje się na samym początku dokumentu:
<!DOCTYPE html>
Nie jest ona zwykłym elementem HTML, ale informacją dla przeglądarki o sposobie interpretowania dokumentu.
Element html jest głównym elementem całego dokumentu.
Wszystkie pozostałe elementy strony, z wyjątkiem deklaracji DOCTYPE, znajdują się wewnątrz niego.
Przykład:
<html>
...
</html>
Element <html> może również zawierać atrybut lang, który określa język dokumentu.
Przykład:
<html lang="pl"></html>
W tym przypadku pl oznacza język polski.
Element <head> zawiera informacje dotyczące dokumentu, które nie są bezpośrednio wyświetlane jako główna zawartość strony.
Wewnątrz elementu <head> mogą znajdować się między innymi informacje o kodowaniu znaków, tytuł strony, odwołania do arkuszy stylów oraz inne informacje dotyczące dokumentu.
Przykład:
<head>
<meta charset="UTF-8">
<title>Moja strona</title>
</head>
Element <head> jest umieszczany wewnątrz elementu <html> i znajduje się przed elementem <body>.
Element <title> określa tytuł dokumentu HTML.
Element <title> znajduje się wewnątrz elementu <head>.
Tytuł jest zazwyczaj wyświetlany na karcie przeglądarki oraz może być wykorzystywany przez wyszukiwarki internetowe.
Przykład:
<title>Dokumentacja HTML</title>
Tekst znajdujący się pomiędzy znacznikami <title> i </title> jest tytułem dokumentu.
Element <body> zawiera właściwą zawartość strony internetowej, która jest wyświetlana użytkownikowi.
Wewnątrz elementu <body> umieszczamy między innymi nagłówki, akapity, linki, obrazy, listy, tabele, formularze oraz inne elementy strony.
Przykład:
<body>
<h1>Moja strona</h1>
<p>Witaj na mojej stronie!</p>
</body>
Element <body> znajduje się wewnątrz elementu <html> i jest umieszczany po elemencie <head>.
Podstawowy dokument HTML posiada określoną kolejność najważniejszych elementów.
Na początku znajduje się deklaracja DOCTYPE, następnie element <html>, w którym znajdują się elementy <head> oraz <body>.
Można przedstawić to w następujący sposób:
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
Treść strony
</body>
</html>
Po połączeniu wszystkich opisanych elementów otrzymujemy podstawową strukturę dokumentu HTML.
Przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Dokumentacja HTML</title>
</head>
<body>
<h1>Dokumentacja HTML</h1>
<p>To jest przykładowa strona internetowa.</p>
</body>
</html>
Jest to podstawowy szablon, od którego można rozpocząć tworzenie strony internetowej.
Nagłówki HTML służą do tworzenia hierarchii oraz porządkowania treści znajdującej się na stronie internetowej. Dzięki nim użytkownik może łatwiej zrozumieć, jakie informacje znajdują się w poszczególnych częściach dokumentu.
HTML posiada sześć poziomów nagłówków, oznaczonych od <h1> do <h6>. Każdy poziom określa znaczenie oraz pozycję danego nagłówka w hierarchii dokumentu.
Nagłówki są elementami HTML używanymi do oznaczania tytułów oraz poszczególnych części dokumentu.
Pozwalają podzielić dłuższą treść na mniejsze, logiczne części. Dzięki temu strona jest łatwiejsza do czytania i użytkownik może szybciej znaleźć interesujące go informacje.
Nagłówki nie powinny być używane wyłącznie po to, aby powiększyć lub pogrubić tekst. Ich głównym zadaniem jest określanie struktury oraz znaczenia treści.
HTML udostępnia sześć poziomów nagłówków. Najwyższym poziomem jest <h1>, natomiast najniższym <h6>.
Poziomy nagłówków przedstawiają się następująco:
Im wyższy poziom nagłówka, tym wyżej znajduje się on w hierarchii dokumentu.
Element <h1> służy do oznaczenia najważniejszego nagłówka dokumentu. Zazwyczaj przedstawia on główny temat lub tytuł strony.
Przykład:
<h1>Dokumentacja HTML</h1>
Na jednej stronie może znajdować się więcej niż jeden element <h1>, jednak w przypadku prostych dokumentów najczęściej wykorzystuje się go do określenia głównego tematu strony.
Element <h2> służy do oznaczania głównych sekcji znajdujących się wewnątrz dokumentu.
Jeżeli głównym tematem strony jest dokumentacja HTML, poszczególne działy mogą zostać oznaczone za pomocą <h2>.
Przykład:
<h1>Dokumentacja HTML</h1>
<h2>Czym jest HTML?</h2>
<h2>Podstawowa struktura dokumentu</h2>
<h2>Nagłówki HTML</h2>
Nagłówki od <h3> do <h6> służą do tworzenia kolejnych poziomów podziału treści.
Przykładowo, jeżeli sekcja <h2> opisuje nagłówki HTML, można wykorzystać <h3> do opisania poszczególnych zagadnień związanych z tym tematem.
Przykład:
<h2>Nagłówki HTML</h2>
<h3>Czym są nagłówki?</h3>
<h3>Poziomy nagłówków</h3>
<h3>Hierarchia nagłówków</h3>
Należy zachowywać logiczną hierarchię nagłówków, ponieważ pozwala ona prawidłowo przedstawić strukturę dokumentu.
Po nagłówku <h1> mogą znajdować się główne sekcje oznaczone przez <h2>, a ich podsekcje mogą być oznaczone przez <h3>.
Przykładowa hierarchia może wyglądać następująco:
<h1>Dokumentacja HTML</h1>
<h2>Czym jest HTML?</h2>
<h3>Definicja</h3>
<h3>Zastosowanie</h3>
<h2>Podstawowa struktura dokumentu</h2>
<h3>DOCTYPE</h3>
<h3>Element html</h3>
Taka struktura pozwala określić, które informacje są głównymi tematami, a które stanowią ich rozwinięcie.
Logiczna hierarchia nagłówków sprawia, że dokument jest bardziej uporządkowany i łatwiejszy do zrozumienia.
Użytkownik może szybciej przejrzeć stronę i określić, jakie informacje znajdują się w poszczególnych sekcjach.
Hierarchia nagłówków ma również znaczenie dla dostępności. Osoby korzystające z czytników ekranu mogą wykorzystywać nagłówki do poruszania się po strukturze strony.
Dlatego nie należy wybierać poziomu nagłówka wyłącznie na podstawie jego wyglądu. Jeżeli potrzebujemy większego lub mniejszego tekstu, jego wygląd można zmienić za pomocą CSS, natomiast poziom nagłówka powinien odpowiadać jego znaczeniu w strukturze dokumentu.
Poniższy przykład przedstawia prawidłowe wykorzystanie różnych poziomów nagłówków:
<h1>Dokumentacja HTML</h1>
<h2>Czym jest HTML?</h2>
<h3>Definicja</h3>
<h3>Zastosowanie</h3>
<h2>Podstawowa struktura dokumentu</h2>
<h3>DOCTYPE</h3>
<h3>Element html</h3>
<h3>Element head</h3>
<h3>Element body</h3>
Nagłówki HTML służą do tworzenia hierarchii oraz porządkowania treści dokumentu.
HTML posiada sześć poziomów nagłówków, od <h1> do <h6>. Każdy z nich powinien być używany zgodnie ze swoim miejscem w strukturze dokumentu.
Najważniejsze jest zachowanie logicznej hierarchii oraz używanie nagłówków do określania struktury treści, a nie wyłącznie do zmiany wyglądu tekstu.
Akapity i tekst są podstawowymi elementami każdej strony internetowej. To właśnie za ich pomocą przekazywana jest większość informacji znajdujących się na stronie. HTML pozwala nie tylko umieszczać tekst w dokumencie, ale również odpowiednio go wyróżniać i nadawać mu znaczenie.
Element <p> służy do tworzenia akapitów tekstu. Każdy akapit powinien być umieszczony wewnątrz znacznika otwierającego <p> i zamykającego </p>.
Elementu <p> należy używać wtedy, gdy chcemy przedstawić tekst jako osobny akapit. Dzięki temu dokument jest bardziej uporządkowany i łatwiejszy do czytania.
Przykład:
<p>To jest przykładowy akapit tekstu.</p>
Tekst może być umieszczany bezpośrednio wewnątrz elementów HTML. Najczęściej znajduje się on w akapitach, nagłówkach, elementach list, linkach lub innych elementach przeznaczonych do wyświetlania treści.
Tekst powinien znajdować się w odpowiednim elemencie HTML, ponieważ element określa jego znaczenie i sposób organizacji dokumentu.
Przykład:
<p>HTML służy do tworzenia struktury strony internetowej.</p>
Element <br> służy do wymuszenia przejścia tekstu do nowej linii. Jest to element pusty, dlatego nie posiada znacznika zamykającego.
Elementu <br> należy używać wtedy, gdy przejście do nowej linii jest częścią treści, a nie do tworzenia dużych odstępów między elementami.
Przykład:
<p>Pierwsza linia<br>Druga linia</p>
Nie należy używać wielu elementów <br> tylko po to, aby uzyskać większy odstęp między tekstami. Do wyglądu i odstępów strony służy CSS.
Element <b> służy do wizualnego wyróżnienia tekstu poprzez jego pogrubienie. Sam element nie nadaje tekstowi dodatkowego znaczenia.
Elementu <b> można używać wtedy, gdy chcemy zwrócić uwagę na określony fragment tekstu, ale jego znaczenie nie wymaga zastosowania elementu semantycznego.
Przykład:
<p>To jest <b>pogrubiony tekst</b>.</p>
Element <strong> służy do oznaczania tekstu, który ma szczególne znaczenie lub jest ważny dla użytkownika.
Elementu <strong> należy używać wtedy, gdy chcemy podkreślić znaczenie danego fragmentu tekstu, a nie tylko jego wygląd. Domyślnie przeglądarka wyświetla tekst znajdujący się w <strong> jako pogrubiony.
Przykład:
<p><strong>Uwaga!</strong> Przed rozpoczęciem pracy zapisz plik.</p>
Element <i> służy do wyróżnienia tekstu poprzez jego pochylenie. Nie oznacza on, że tekst jest ważniejszy od pozostałej części dokumentu.
Elementu <i> można używać między innymi do oznaczania nazw, terminów, zwrotów lub tekstu, który powinien być wizualnie wyróżniony.
Przykład:
<p>Słowo <i>HTML</i> jest skrótem od HyperText Markup Language.</p>
Element <em> służy do podkreślenia znaczenia lub nacisku na określony fragment tekstu. Domyślnie przeglądarka wyświetla jego zawartość jako tekst pochylony.
Elementu <em> należy używać wtedy, gdy chcemy zaznaczyć, że dany fragment powinien być zaakcentowany podczas odczytywania treści.
Przykład:
<p>To jest <em>bardzo ważna</em> informacja.</p>
HTML posiada również inne elementy służące do oznaczania konkretnych rodzajów tekstu.
Elementy te należy stosować wtedy, gdy ich znaczenie pasuje do treści. Nie powinno się używać ich wyłącznie w celu uzyskania określonego wyglądu tekstu.
Poniższy przykład pokazuje zastosowanie kilku elementów tekstowych w jednym dokumencie.
<p>HTML jest <strong>językiem znaczników</strong> używanym do tworzenia stron internetowych.</p>
<p>Element <em><i>p</i></em> służy do tworzenia akapitów.</p>
<p><mark>Ważna informacja</mark> znajduje się tutaj.</p>
Elementy tekstowe pozwalają odpowiednio uporządkować i oznaczyć informacje znajdujące się na stronie. Element <p> służy do tworzenia akapitów, <br> do przejścia do nowej linii, a elementy takie jak <strong>, <em>, <mark> czy <small> pozwalają nadać fragmentom tekstu odpowiednie znaczenie.
Podczas tworzenia strony należy wybierać element odpowiedni do znaczenia treści, a nie tylko do jej wyglądu.
Linki są jednym z najważniejszych elementów stron internetowych. Pozwalają użytkownikowi przechodzić z jednej strony na inną, otwierać określone sekcje dokumentu, wysyłać wiadomości e-mail lub wykonywać inne działania.
Element <a> służy do tworzenia odnośników, czyli linków. Tekst znajdujący się pomiędzy znacznikiem otwierającym i zamykającym jest zazwyczaj klikalny.
Elementu <a> należy używać wtedy, gdy użytkownik ma mieć możliwość przejścia do innego miejsca lub wykonania działania za pomocą linku.
Przykład:
<a href="https://example.com">Przejdź na stronę</a>
Atrybut href określa miejsce, do którego prowadzi link. Jest to najważniejszy atrybut elementu <a>.
Atrybutu href należy używać zawsze wtedy, gdy tworzymy działający link prowadzący do określonego miejsca.
Przykład:
<a href="https://www.google.com">Google</a>
Link może prowadzić do strony znajdującej się w innej domenie. W takim przypadku w atrybucie href podajemy pełny adres strony, rozpoczynający się najczęściej od https://.
Takich linków używa się wtedy, gdy chcemy przekierować użytkownika do zewnętrznego serwisu, dokumentacji, artykułu lub innej strony internetowej.
Przykład:
<a href="https://www.example.com">Strona internetowa</a>
Linki mogą również prowadzić do innych stron znajdujących się w tym samym projekcie. W takim przypadku można podać nazwę pliku, na przykład kontakt.html.
Takiego rozwiązania używa się podczas tworzenia stron składających się z wielu plików HTML.
Przykład:
<a href="kontakt.html">Kontakt</a>
Link może prowadzić również do konkretnego miejsca na tej samej stronie. W tym celu element, do którego chcemy przejść, musi posiadać atrybut id.
W atrybucie href linku wpisujemy znak # oraz wartość id elementu.
Takie rozwiązanie jest szczególnie przydatne przy tworzeniu spisu treści, ponieważ pozwala użytkownikowi szybko przejść do wybranej sekcji.
Przykład:
<a href="#wprowadzenie">Wprowadzenie</a>
<section id="wprowadzenie">
<h1>Wprowadzenie</h1>
</section>
Atrybut target pozwala określić, gdzie ma zostać otwarty link. Wartość "_blank" powoduje otwarcie strony w nowej karcie lub oknie przeglądarki.
Rozwiązania tego można używać wtedy, gdy chcemy pozostawić aktualną stronę otwartą, a użytkownik ma przejść do zewnętrznej strony.
Przykład:
<a href="https://www.example.com" target="_blank">Otwórz stronę</a>
Za pomocą elementu <a> można utworzyć link, który po kliknięciu otworzy program pocztowy użytkownika i przygotuje wiadomość e-mail.
W tym celu w atrybucie href używa się prefiksu mailto: oraz adresu e-mail.
Przykład:
<a href="mailto:example@example.com">Wyślij wiadomość</a>
HTML pozwala również tworzyć linki przeznaczone do wykonywania połączeń telefonicznych. W tym celu w atrybucie href używa się prefiksu tel: oraz numeru telefonu.
Takiego linku używa się przede wszystkim na stronach, które powinny umożliwić użytkownikowi szybki kontakt telefoniczny.
Przykład:
<a href="tel:+48123456789">Zadzwoń do nas</a>
Poniższy przykład pokazuje kilka różnych rodzajów linków.
<a href="https://www.example.com">Strona zewnętrzna</a>
<a href="kontakt.html">Podstrona kontaktowa</a>
<a href="#wprowadzenie">Przejdź do wprowadzenia</a>
<a href="mailto:example@example.com">Wyślij e-mail</a>
<a href="tel:+48123456789">Zadzwoń</a>
Element <a> służy do tworzenia linków, a atrybut href określa miejsce, do którego prowadzą. Linki mogą prowadzić do zewnętrznych stron, podstron tego samego projektu, konkretnych sekcji dokumentu, adresów e-mail lub numerów telefonów.
Linki są bardzo ważnym elementem stron internetowych, ponieważ umożliwiają użytkownikowi łatwe przemieszczanie się pomiędzy różnymi treściami.
Obrazy pozwalają umieszczać na stronie internetowej zdjęcia, ilustracje, grafiki oraz inne materiały graficzne. Są często wykorzystywane do przedstawiania informacji w bardziej czytelny i atrakcyjny sposób.
Element <img> służy do umieszczania obrazu na stronie internetowej. Jest to element pusty, dlatego nie posiada znacznika zamykającego.
Elementu <img> należy używać wtedy, gdy chcemy wyświetlić obraz będący częścią treści strony.
Przykład:
<img src="obraz.jpg">
Atrybut src określa lokalizację obrazu, który ma zostać wyświetlony. Może wskazywać na plik znajdujący się w projekcie lub na obraz znajdujący się pod adresem internetowym.
Atrybutu src należy używać zawsze razem z elementem <img>, ponieważ bez niego przeglądarka nie będzie wiedziała, jaki obraz wyświetlić.
Przykład:
<img src="zdjecie.jpg">
Atrybut alt zawiera tekst alternatywny opisujący obraz. Jest on szczególnie ważny w przypadku, gdy obraz nie może zostać wyświetlony.
Atrybut alt należy stosować przy obrazach, ponieważ pomaga również osobom korzystającym z czytników ekranu zrozumieć zawartość grafiki.
Przykład:
<img src="kot.jpg" alt="Kot siedzący na krześle">
Atrybuty width i height pozwalają określić szerokość i wysokość obrazu.
Można ich używać wtedy, gdy chcemy określić wymiary obrazu już na poziomie HTML. Za dokładne dopasowanie wyglądu obrazu zazwyczaj odpowiada jednak CSS.
Przykład:
<img src="obraz.jpg" alt="Przykładowy obraz" width="300" height="200">
Obraz może znajdować się w tym samym folderze co plik HTML albo w innym katalogu. Wartość atrybutu src musi wskazywać właściwą ścieżkę do pliku.
Jeżeli obraz znajduje się w tym samym folderze co plik HTML, można podać samą nazwę pliku.
Przykład:
<img src="obraz.jpg" alt="Obraz">
Jeżeli obraz znajduje się w folderze obrazy, ścieżka może wyglądać następująco:
<img src="obrazy/obraz.jpg" alt="Obraz">
Element <figure> służy do oznaczania samodzielnej treści, takiej jak obraz, ilustracja, wykres lub diagram.
Elementu <figure> warto używać wtedy, gdy obraz jest osobnym elementem treści i może posiadać własny opis.
Przykład:
<figure>
<img src="obraz.jpg" alt="Przykładowy obraz">
</figure>
Element <figcaption> służy do dodania podpisu lub opisu do elementu <figure>.
Używa się go wtedy, gdy chcemy wyjaśnić, co przedstawia obraz lub dodać do niego dodatkową informację.
Przykład:
<figure>
<img src="obraz.jpg" alt="Widok miasta">
<figcaption>Widok miasta nocą.</figcaption>
</figure>
Przykładowy kod przedstawiający obraz wraz z jego opisem może wyglądać następująco:
<figure>
<img src="krajobraz.jpg" alt="Górski krajobraz">
<figcaption>Krajobraz górski.</figcaption>
</figure>
Obrazy dodaje się za pomocą elementu <img>. Atrybut src określa lokalizację obrazu, a alt zawiera jego opis. Elementy <figure> i <figcaption> pozwalają dodatkowo uporządkować obrazy oraz ich podpisy.
Listy pozwalają przedstawiać informacje w uporządkowany sposób. Są często używane do tworzenia zestawień, instrukcji, menu, spisów oraz innych grup informacji.
Element <ul> służy do tworzenia listy nieuporządkowanej. Elementy takiej listy są zazwyczaj oznaczane za pomocą punktów.
Listy nieuporządkowane należy stosować wtedy, gdy kolejność elementów nie ma znaczenia.
Przykład:
<ul>
<li>Jabłko</li>
<li>Banan</li>
<li>Pomarańcza</li>
</ul>
Element <ol> służy do tworzenia listy uporządkowanej. Elementy listy są domyślnie numerowane.
Listy uporządkowane należy stosować wtedy, gdy kolejność elementów ma znaczenie, na przykład podczas przedstawiania instrukcji lub kolejnych kroków.
Przykład:
<ol>
<li>Otwórz plik.</li>
<li>Wprowadź tekst.</li>
<li>Zapisz dokument.</li>
</ol>
Element <li> oznacza pojedynczy element listy. Może znajdować się wewnątrz listy <ul> lub <ol>.
Elementu <li> należy używać do każdego pojedynczego punktu znajdującego się na liście.
Przykład:
<ul>
<li>Pierwszy element</li>
<li>Drugi element</li>
</ul>
Listy mogą znajdować się wewnątrz innych list. Pozwala to tworzyć podpunkty i bardziej rozbudowane struktury informacji.
List zagnieżdżonych należy używać wtedy, gdy jeden element listy posiada własne podpunkty.
Przykład:
<ul>
<li>Owoce
<ul>
<li>Jabłko</li>
<li>Banan</li>
</ul>
</li>
</ul>
Element <dl> służy do tworzenia listy opisowej. Jest przeznaczony do przedstawiania pojęć oraz ich opisów.
Listę opisową można stosować na przykład przy tworzeniu słownika pojęć, listy terminów lub opisów.
Przykład:
<dl>
<dt>HTML</dt>
<dd>Język znaczników używany do tworzenia struktury stron.</dd>
</dl>
Element <dt> oznacza termin lub nazwę, natomiast <dd> zawiera opis tego terminu.
Elementów tych używa się razem z <dl> podczas tworzenia list opisowych.
Przykład:
<dt>CSS</dt>
<dd>Język służący do opisywania wyglądu strony.</dd>
Listy mogą być wykorzystywane między innymi do tworzenia menu, instrukcji i zestawień informacji.
Przykład listy kroków:
<ol>
<li>Uruchom edytor kodu.</li>
<li>Utwórz plik HTML.</li>
<li>Wpisz podstawową strukturę dokumentu.</li>
</ol>
Element <ul> służy do tworzenia list nieuporządkowanych, <ol> do list uporządkowanych, a <li> do pojedynczych elementów listy. Elementy <dl>, <dt> i <dd> służą do tworzenia list opisowych.
Rodzaj listy należy wybierać w zależności od tego, czy kolejność elementów ma znaczenie oraz jaki rodzaj informacji chcemy przedstawić.
Tabele służą do przedstawiania danych w postaci wierszy i kolumn. Są przydatne wtedy, gdy informacje można logicznie podzielić na określone kategorie i zestawić je ze sobą.
Element <table> służy do utworzenia tabeli. Wszystkie elementy należące do tabeli powinny znajdować się wewnątrz tego elementu.
Tabel należy używać wtedy, gdy przedstawiane informacje mają charakter danych tabelarycznych, a nie do tworzenia układu całej strony.
Przykład:
<table>
</table>
Element <tr> oznacza pojedynczy wiersz tabeli. Wewnątrz niego umieszczane są komórki tabeli.
Elementu <tr> należy używać dla każdego kolejnego wiersza tabeli.
Przykład:
<tr>
</tr>
Element <td> oznacza zwykłą komórkę tabeli. Wewnątrz niej umieszczane są dane.
Elementu <td> używa się wtedy, gdy chcemy umieścić zwykłą informację w konkretnej kolumnie i wierszu.
Przykład:
<td>Jan</td>
Element <th> służy do oznaczania komórki będącej nagłówkiem tabeli.
Elementu <th> należy używać wtedy, gdy komórka opisuje dane znajdujące się w określonej kolumnie lub wierszu.
Przykład:
<th>Imię</th>
Element <thead> służy do oznaczania części tabeli zawierającej nagłówki.
Można go używać wtedy, gdy chcemy wyraźnie oddzielić nagłówki tabeli od jej głównej zawartości.
Przykład:
<thead>
<tr>
<th>Imię</th>
<th>Wiek</th>
</tr>
</thead>
Element <tbody> oznacza główną część tabeli zawierającą dane.
Jego użycie pozwala oddzielić właściwe dane od nagłówków znajdujących się w <thead>.
Przykład:
<tbody>
<tr>
<td>Jan</td>
<td>20</td>
</tr>
</tbody>
Element <tfoot> służy do oznaczania stopki tabeli. Może zawierać na przykład podsumowanie przedstawionych danych.
Elementu <tfoot> można używać wtedy, gdy tabela posiada informacje podsumowujące znajdujące się na jej końcu.
Przykład:
<tfoot>
<tr>
<td>Razem</td>
<td>100</td>
</tr>
</tfoot>
Element <caption> służy do dodania tytułu lub krótkiego opisu tabeli.
Elementu <caption> warto używać wtedy, gdy chcemy jasno określić, czego dotyczą dane przedstawione w tabeli.
Przykład:
<table>
<caption>Lista uczniów</caption>
</table>
Przykładowa tabela zawierająca nagłówki oraz dane może wyglądać następująco:
<table>
<caption>Lista uczniów</caption>
<thead>
<tr>
<th>Imię</th>
<th>Wiek</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan</td>
<td>18</td>
</tr>
<tr>
<td>Anna</td>
<td>19</td>
</tr>
</tbody>
</table>
Tabele służą do przedstawiania danych w uporządkowanej formie. Element <table> tworzy tabelę, <tr> tworzy wiersz, <td> zwykłą komórkę, a <th> komórkę nagłówkową.
Elementy <thead>, <tbody> i <tfoot> pozwalają podzielić tabelę na logiczne części, natomiast <caption> pozwala nadać jej tytuł.
Tabel należy używać do przedstawiania danych tabelarycznych, a nie do tworzenia układu strony internetowej.
Formularze służą do zbierania informacji od użytkownika. Mogą być wykorzystywane między innymi do logowania, rejestracji, wysyłania wiadomości, wyszukiwania informacji oraz wypełniania ankiet.
Element <form> służy do utworzenia formularza. Wszystkie pola i elementy należące do danego formularza powinny znajdować się wewnątrz tego elementu.
Elementu <form> należy używać wtedy, gdy chcemy zebrać od użytkownika dane, które następnie mogą zostać przetworzone.
Przykład:
<form>
</form>
Element <label> służy do tworzenia opisu pola formularza. Informuje użytkownika, jakie dane powinien wprowadzić.
Elementu <label> należy używać przy polach formularza, aby użytkownik wiedział, do czego służy dane pole.
Przykład:
<label>Imię:</label>
Element <input> służy do tworzenia różnych rodzajów pól, w których użytkownik może wprowadzać lub wybierać dane.
Element <input> jest elementem pustym i nie posiada znacznika zamykającego.
Przykład:
<input type="text">
Atrybut type określa rodzaj pola <input>. Dzięki niemu można zdecydować, jakie dane użytkownik będzie mógł wprowadzić.
Przykładowe wartości atrybutu type to:
Element <textarea> służy do tworzenia pola przeznaczonego do wpisywania większej ilości tekstu.
Należy go używać wtedy, gdy użytkownik powinien mieć możliwość wpisania dłuższej wiadomości, komentarza lub opisu.
Przykład:
<textarea></textarea>
Element <select> służy do tworzenia listy rozwijanej, z której użytkownik może wybrać jedną lub więcej dostępnych opcji.
Elementu <select> należy używać wtedy, gdy mamy określony zestaw możliwych odpowiedzi i chcemy ograniczyć wybór użytkownika do tych wartości.
Przykład:
<select>
<option>Polska</option>
<option>Niemcy</option>
<option>Francja</option>
</select>
Atrybut name pozwala nadać polu formularza nazwę, pod którą jego wartość może być rozpoznawana podczas przetwarzania formularza.
Atrybutu name należy używać wtedy, gdy dane z formularza mają zostać przesłane i przetworzone przez serwer.
Przykład:
<input type="text" name="imie">
Atrybut placeholder pozwala wyświetlić w polu formularza krótką podpowiedź dotyczącą informacji, którą użytkownik powinien wpisać.
Placeholder należy stosować jako dodatkową wskazówkę, a nie jako zamiennik elementu <label>.
Przykład:
<input type="text" placeholder="Wpisz swoje imię">
Atrybut required oznacza, że dane pole formularza musi zostać wypełnione przed jego wysłaniem.
Należy go używać przy polach, które są wymagane do prawidłowego przetworzenia formularza.
Przykład:
<input type="text" name="imie" required>
Prosty formularz kontaktowy może wyglądać następująco:
<form>
<label>Imię:</label>
<input type="text" name="imie" required>
<label>E-mail:</label>
<input type="email" name="email" required>
<label>Wiadomość:</label>
<textarea name="wiadomosc"></textarea>
<button type="submit">Wyślij</button>
</form>
Formularze pozwalają zbierać informacje od użytkowników. Element <form> tworzy formularz, <input> umożliwia wprowadzanie różnych rodzajów danych, <textarea> służy do dłuższego tekstu, a <select> pozwala wybrać opcję z listy.
Elementy formularza powinny być odpowiednio opisane za pomocą <label>, a wymagane pola można oznaczyć atrybutem required.
Elementy semantyczne to elementy HTML, które określają znaczenie i przeznaczenie znajdującej się w nich treści. Dzięki nim struktura dokumentu jest bardziej czytelna zarówno dla użytkowników, jak i dla programów przetwarzających stronę.
Semantyka oznacza znaczenie danego elementu. W HTML element powinien informować nie tylko o tym, gdzie znajduje się treść, ale również czym ta treść jest.
Przykładowo element <header> wskazuje nagłówek lub obszar wprowadzający, a <footer> wskazuje stopkę dokumentu lub sekcji.
Element <header> służy do oznaczania nagłówka strony lub określonej sekcji.
Może zawierać między innymi logo, tytuł strony, nagłówki lub elementy nawigacyjne.
Elementu <header> należy używać wtedy, gdy określona część dokumentu pełni funkcję nagłówka.
Element <main> oznacza główną treść dokumentu.
Powinien zawierać najważniejszą treść charakterystyczną dla danej strony. Na stronie zazwyczaj powinien znajdować się jeden główny element <main>.
Element <section> służy do wydzielania logicznej części dokumentu. Zazwyczaj każda sekcja dotyczy określonego tematu.
Elementu <section> należy używać wtedy, gdy dana część strony stanowi samodzielny fragment treści posiadający określony temat.
Element <article> służy do oznaczania samodzielnej treści, która może istnieć niezależnie od pozostałej części strony.
Może być używany między innymi do artykułów, wpisów na blogu, wiadomości lub komentarzy.
Element <aside> służy do oznaczania treści dodatkowej lub pobocznej związanej z główną zawartością strony.
Może zawierać między innymi dodatkowe informacje, ciekawostki, linki lub materiały powiązane z główną treścią.
Element <figure> pozwala oznaczyć samodzielną treść, taką jak obraz, wykres lub ilustracja, natomiast <figcaption> służy do dodania jej podpisu.
Elementów tych należy używać wtedy, gdy obraz lub inna treść stanowi samodzielny element związany z główną zawartością.
Prosta struktura semantycznej strony może wyglądać następująco:
<header>
<h1>Moja strona</h1>
</header>
<nav>
<a href="#glowna">Strona główna</a>
</nav>
<main>
<section>
<h2>O stronie</h2>
<p>Treść strony.</p>
</section>
</main>
<footer>
<p>Stopka strony</p>
</footer>
Elementy semantyczne pozwalają tworzyć logiczną i przejrzystą strukturę dokumentu HTML. Do najważniejszych należą <header>, <nav>, <main>, <section>, <article>, <aside> oraz <footer>.
Elementy semantyczne powinny być wybierane na podstawie znaczenia treści, którą zawierają.
Podczas tworzenia dokumentów HTML można popełnić wiele błędów. Niektóre z nich powodują nieprawidłowe działanie strony, a inne sprawiają, że dokument jest trudniejszy do zrozumienia i utrzymania.
Jednym z podstawowych błędów jest brak znacznika zamykającego lub zamknięcie elementu w niewłaściwym miejscu.
Przykład błędnego kodu:
<p>To jest tekst</h1>
Znacznik otwierający i zamykający powinny należeć do tego samego elementu.
Elementy HTML mogą znajdować się wewnątrz innych elementów, ale powinny być zamykane w odpowiedniej kolejności.
Przykład nieprawidłowego zagnieżdżenia:
<p><b>Tekst</p></b>
Poprawna wersja:
<p><b>Tekst</b></p>
DOCTYPE informuje przeglądarkę, że dokument jest napisany zgodnie ze standardem HTML5.
Dokument HTML powinien rozpoczynać się od deklaracji:
<!DOCTYPE html>
Brak atrybutu alt przy obrazie może sprawić, że użytkownik korzystający z czytnika ekranu nie będzie wiedział, co przedstawia dana grafika.
Niepoprawny przykład:
<img src="kot.jpg">
Lepszy przykład:
<img src="kot.jpg" alt="Kot siedzący na krześle">
Atrybut href jest przeznaczony przede wszystkim dla elementu <a>. Nie powinno się używać go w elementach, które nie obsługują tego atrybutu.
Niepoprawny przykład:
<p href="strona.html">Przejdź dalej</p>
Poprawny przykład:
<a href="strona.html">Przejdź dalej</a>
Nagłówki powinny tworzyć logiczną hierarchię. Nie należy wybierać poziomu nagłówka tylko ze względu na jego domyślny wygląd.
Przykładowo po <h1> można użyć <h2> jako nagłówka podsekcji, a następnie <h3> dla jeszcze bardziej szczegółowej części.
Podczas tworzenia linków prowadzących do konkretnych sekcji strony wartości href i id muszą się ze sobą zgadzać.
Przykład:
<a href="#kontakt">Kontakt</a>
<section id="kontakt">
</section>
Jeżeli wartości będą różne, link nie będzie prowadził do właściwego miejsca.
Niektóre elementy wymagają odpowiednich atrybutów, aby działały zgodnie z przeznaczeniem. Przykładem jest element <img>, który potrzebuje atrybutu src wskazującego obraz.
Przed zakończeniem pracy warto sprawdzić, czy używane elementy posiadają potrzebne atrybuty.
Element <div> jest uniwersalnym kontenerem, ale nie opisuje znaczenia znajdującej się w nim treści.
Jeżeli istnieje odpowiedni element semantyczny, taki jak <header>, <nav>, <main> lub <footer>, warto użyć go zamiast zwykłego <div>.
Podczas pisania kodu warto regularnie sprawdzać, czy wszystkie elementy zostały prawidłowo zapisane i zamknięte.
Pomocne może być również korzystanie z narzędzi sprawdzających poprawność dokumentu HTML oraz z konsoli przeglądarki.
Przykład prostego i poprawnie uporządkowanego fragmentu dokumentu:
<section id="przyklad">
<h2>Przykład</h2>
<p>To jest przykładowy tekst.</p>
<img src="obraz.jpg" alt="Opis obrazu">
</section>
Najczęstsze błędy w HTML dotyczą między innymi nieprawidłowego zamykania znaczników, złego zagnieżdżania elementów, błędnej hierarchii nagłówków oraz niepoprawnego stosowania atrybutów.
Dokładne sprawdzanie kodu i zachowywanie logicznej struktury dokumentu pozwala uniknąć wielu problemów podczas tworzenia stron internetowych.
W tej sekcji znajduje się przykład prostej strony internetowej stworzonej przy użyciu podstawowych elementów HTML przedstawionych we wcześniejszych częściach dokumentacji.
Przykład pokazuje, jak można połączyć strukturę dokumentu, nagłówki, akapity, linki, obrazy, listy, tabelę, formularz oraz elementy semantyczne w jeden dokument.
Przykładowa strona składa się z podstawowych elementów HTML. Na początku znajduje się deklaracja DOCTYPE, następnie element <html>, a w nim <head> oraz <body>.
W elemencie <body> można umieścić między innymi nagłówek strony, nawigację, główną treść oraz stopkę.
Poniższy przykład przedstawia kompletną prostą stronę internetową:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja przykładowa strona</title>
</head>
<body>
<header>
<h1>Moja strona internetowa</h1>
</header>
<nav>
<a href="#onas">O nas</a>
<a href="#oferta">Oferta</a>
<a href="#kontakt">Kontakt</a>
</nav>
<main>
<section id="onas">
<h2>O nas</h2>
<p>To jest przykładowa strona internetowa wykonana w HTML.</p>
<img src="obraz.jpg" alt="Przykładowy obraz">
</section>
<section id="oferta">
<h2>Oferta</h2>
<ul>
<li>Tworzenie stron internetowych</li>
<li>Projektowanie stron</li>
<li>Pomoc techniczna</li>
</ul>
</section>
<section id="kontakt">
<h2>Kontakt</h2>
<form>
<label>Imię:</label>
<input type="text" name="imie">
<label>E-mail:</label>
<input type="email" name="email">
<label>Wiadomość:</label>
<textarea name="wiadomosc"></textarea>
<button type="submit">Wyślij</button>
</form>
</section>
</main>
<footer>
<p>Autor strony - 2026</p>
</footer>
</body>
</html>
Na początku dokumentu znajduje się <!DOCTYPE html>, który informuje przeglądarkę o zastosowaniu standardu HTML5.
Element <head> zawiera informacje dotyczące dokumentu, takie jak kodowanie znaków oraz tytuł wyświetlany na karcie przeglądarki.
Element <header> zawiera główny nagłówek strony, natomiast <nav> zawiera linki pozwalające użytkownikowi przechodzić do poszczególnych części dokumentu.
Główna zawartość strony znajduje się w elemencie <main>. Wewnątrz niego znajdują się poszczególne sekcje zawierające tekst, obraz, listę oraz formularz.
Na końcu dokumentu znajduje się <footer>, który pełni funkcję stopki strony.
W przykładzie wykorzystano wiele elementów omówionych we wcześniejszych rozdziałach.
Przykładowa strona pokazuje, że różne elementy HTML można łączyć ze sobą w celu stworzenia kompletnej struktury dokumentu.
HTML odpowiada za strukturę i znaczenie treści, dlatego odpowiednie dobranie elementów pozwala stworzyć uporządkowaną i czytelną stronę internetową.
HTML jest podstawowym językiem wykorzystywanym do tworzenia struktury stron internetowych. Za jego pomocą można określić, jakie elementy znajdują się na stronie oraz jakie znaczenie ma poszczególna treść.
Podstawą dokumentu HTML jest odpowiednia struktura składająca się między innymi z elementów <html>, <head> oraz <body>.
Nagłówki <h1> - <h6> służą do tworzenia hierarchii informacji, a element <p> pozwala tworzyć akapity tekstu.
Element <a> służy do tworzenia linków, <img> do wyświetlania obrazów, listy <ul> i <ol> do przedstawiania zestawień, a tabele do prezentowania danych tabelarycznych.
Formularze umożliwiają zbieranie informacji od użytkowników, natomiast elementy semantyczne pomagają określić znaczenie poszczególnych części dokumentu.
Podczas tworzenia dokumentu HTML należy zwracać uwagę na poprawne zagnieżdżanie elementów, prawidłowe zamykanie znaczników oraz odpowiednie stosowanie atrybutów.
Warto również stosować elementy semantyczne, ponieważ pozwalają one stworzyć logiczną strukturę dokumentu i lepiej określić znaczenie znajdującej się w nim treści.
HTML odpowiada przede wszystkim za strukturę strony i znajdującą się na niej treść. CSS służy do określania wyglądu strony, natomiast JavaScript pozwala dodawać interakcje i bardziej zaawansowane funkcje.
Technologie te często są używane razem, jednak każda z nich pełni inną funkcję.
Podczas pisania HTML warto stosować czytelne nazwy, zachowywać odpowiednie wcięcia oraz logicznie organizować kod.
Należy również używać elementów zgodnie z ich przeznaczeniem i unikać stosowania elementów wyłącznie ze względu na ich domyślny wygląd.
Ważne jest także sprawdzanie poprawności dokumentu i zwracanie uwagi na błędy w kodzie.
Znajomość podstaw HTML pozwala tworzyć poprawnie uporządkowane strony internetowe oraz stanowi podstawę do dalszej nauki tworzenia stron.
Opanowanie struktury dokumentu, nagłówków, tekstu, linków, obrazów, list, tabel, formularzy oraz elementów semantycznych pozwala rozpocząć tworzenie własnych stron internetowych.
HTML jest fundamentem tworzenia stron internetowych, dlatego jego poprawne zrozumienie jest ważnym krokiem w dalszej nauce CSS, JavaScript oraz innych technologii internetowych.