Minimum informacji, które musimy wiedzieć o dokumencie HTML

W poprzedniej części kursu CSS zostały przedstawione czynności, które należy wykonać, aby przygotować się do dalszych części tego kursu.

W tej części kursu poznamy podstawowe informacje na temat dokumentu HTML, jego struktury oraz jego kodu.

Kiedy uświadomimy sobie z jakich części jest zbudowany człowiek, to dojdziemy do wniosku, że najważniejszymi elementami człowieka są głowa oraz ciało. Głowa człowieka pozbawiona ciała nie może funkcjonować podobnie jak ciało człowieka nie może funkcjonować bez głowy (trochę drastyczny przykład, ale wybaczcie).

Plik HTML, podobnie jak człowiek, będzie składał się z dwóch głównych elementów, czyli z głowy head oraz ciała body. Wspomniane elementy będą zawsze umieszczone w elemencie html, który określa początek i koniec dokumentu HTML.

Oprócz wyżej wymienionych elementów, każdy dokument HTML musi posiadać linijkę kodu, która będzie informowała przeglądarkę internetową o wersji języka HTML, za pomocą którego dany dokument HTML został napisany.

Obecnie zaleca się korzystanie z deklaracji języka HTML5, ponieważ język HTML w wersji 5 jest językiem przyszłości, dlatego staje się on coraz bardziej popularny. Wspomnianą deklarację zawsze umieszczamy na początku każdego dokumentu HTML. Składnia deklaracji języka HTML5 prezentuje się następująco: <!DOCTYPE html>

Nasz wcześniej przygotowany plik strona.html otwieramy za pomocą Notepad++, a następnie umieszczamy w nim wyżej wymienione elementy: html, head, body oraz deklarację języka HTML5, co zostało zaprezentowane w kodzie HTML, który został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>

  </head>

  <body>

  </body>
</html>

Jak możemy zauważyć w kodzie HTML, który został umieszczony powyżej, język HTML składa się z różnych znaczników, które posiadają swój początek, na przykład <body> i koniec, na przykład </body>. Pomiędzy początkiem, a końcem tych znaczników możemy umieszczać inne znaczniki, jak również zawartość jaką ma mieć dany znacznik (np. tekst).

Istnieje grupa znaczników, które stanowią "całość", tzn. nie wymagają one znacznika zamykającego (tego ze znakiem / oraz nazwą danego znacznika). W znacznikach tego typu nie możemy umieszczać innych znaczników. Wspomnianymi znacznikami, które nie posiadają znacznika zamykającego, są między innymi:

  • <img> - dzięki niemu możemy dołączyć obrazek do naszej strony internetowej
  • <br> - za pomocą niego możemy przełamać wiersz w tekście (określić miejsce przejścia do następnej linii)

Od tej pory zamiast słowa "znacznik" będę posługiwał się słowem "element", dzięki czemu będzie nam łatwiej zrozumieć pewne reguły, które rządzą plikami HTML i CSS.

Wracamy do naszego kodu, który umieściliśmy w naszym pliku HTML, czyli:

<!DOCTYPE html>
<html>
  <head>

  </head>

  <body>

  </body>
</html>

Głównym elementem w dokumencie HTML jest element html, który określa początek i koniec dokumentu HTML. W elemencie html znajdują się kolejne dwa ważne elementy, czyli element head oraz element body.

  • element head - ten element tworzy część head dokumentu HTML, w której możemy umieścić ważne dla dokumentu HTML elementy HTML. Dla nas najbardziej interesującym elementem HTML będzie element, w którym będziemy mogli umieszczać reguły CSS, czy też element, dzięki któremu będziemy mogli dołączyć do dokumentu HTML zewnętrzny plik CSS z regułami CSS. Dzięki wspomnianym regułom CSS będziemy mieli wpływ na styl wyglądu każdego elementu HTML w danym dokumencie HTML.
  • element body - ten element tworzy część body dokumentu HTML, w której możemy umieszczać elementy HTML tworzące wygląd strony internetowej i których wygląd możemy modyfikować za pomocą reguł CSS.

Pod spodem znajduje się ten sam kod HTML, lecz z komentarzami, które opisują poszczególne części dokumentu HTML.

<!DOCTYPE html> <!-- wersja języka HTML -->
<html> <!-- początek dokumentu html -->
  <head> <!-- początek części head -->

     <!-- miejsce na elementy części head, na przykład element z regułami CSS, element ze ścieżką do pliku z regułami CSS -->

  </head> <!-- koniec części head -->

  <body> <!-- początek części body -->

     <!-- miejsce na elementy części body, które tworzą wygląd strony internetowej i które możemy modyfikować za pomocą reguł CSS -->

  </body> <!-- koniec części body -->
</html> <!-- koniec dokumentu html -->

Warto zauważyć, że komentarz w pliku HTML tworzymy za pomocą następującej składni:
<!-- miejsce na twój komentarz -->

W następnej części kursu CSS poznamy kilka podstawowych elementów HTML, które możemy umieszczać w części body dokumentu HTML.