1. Wprowadzenie do dokumentu HTML
Zaczynamy rozumieć, jak są zbudowane dokumenty HTML. Od czego zaczyna się każdy dokument HTML? Każdy dokument HTML ma strukturę, która składa się z trzech zagnieżdżonych tagów: html, head i body. To standard, przykład:
<!DOCTYPE html>
<html>
<head>
Tagi techniczne
</head>
<body>
Główny dokument
</body>
</html>
Wszystko, co wyświetla przeglądarka, znajduje się wewnątrz parzystego taga body (treść dokumentu). W tagu head znajdują się tagi z danymi technicznymi/dodatkowymi dla przeglądarki.
Na początku dokumentu zwykle (choć nie jest to obowiązkowe) określa się typ dokumentu — DOCTYPE, aby przeglądarka lepiej rozumiała, jak interpretować błędy. Wiele przeglądarek potrafi prawidłowo wyświetlać dokumenty z uszkodzonym layoutem.
2. Przykład dokumentu HTML
Dokument HTML — to podstawa każdej strony internetowej. Informuje przeglądarkę, jak strona ma wyglądać. Oto prosty przykład dokumentu HTML:
<!DOCTYPE html>
<html>
<head> <title>Tytuł strony</title> </head>
<body> <h1>Cześć, świecie!</h1> <p>To moja pierwsza strona internetowa.</p> </body>
</html>
Główne części dokumentu HTML
Ta linia to deklaracja typu dokumentu (doctype). Informuje przeglądarkę, że dokument został napisany w HTML5, najnowszej wersji języka HTML. To ważne dla poprawnego wyświetlenia strony.
<html>
Tag <html>; otwiera dokument HTML. Cała zawartość strony internetowej powinna znajdować się wewnątrz tego taga. Wyznacza początek i koniec dokumentu HTML.
<head>
Tag <head> zawiera techniczne informacje o stronie. Te informacje nie są bezpośrednio widoczne na stronie internetowej, ale są ważne dla przeglądarek i wyszukiwarek.
Tag <title> ustawia tytuł strony, który wyświetla się na zakładce przeglądarki. To pierwsze, co widzi użytkownik po otwarciu strony.
<body>
Tag <body> zawiera całą widoczną zawartość strony internetowej: tekst, obrazy, linki, tabele i tak dalej. Wszystko, co użytkownik widzi na ekranie, znajduje się wewnątrz tego taga.
<h1>Cześć, świecie!</h1>
Tag <h1> reprezentuje nagłówek pierwszego poziomu. Jest używany dla najważniejszych nagłówków na stronie. Tekst w tym tagu wyświetla się dużą i pogrubioną czcionką.
<p>To moja pierwsza strona internetowa</p>
Tag <p> oznacza paragraf tekstu. Jest używany do podziału tekstu na logiczne bloki. Tekst w tym tagu wyświetla się jako zwykły akapit.
GO TO FULL VERSION