Odwiedzający witrynę WWW widzi treść, grafikę, wideo i inne elementy. Kiedy jednak sprawdzi w przeglądarce źródło strony, to jego oczom ukaże się ogromna liczba znaków – kodu, który niesie informacje o wyglądzie i funkcjach serwisu. Strona budowana jest m.in. za pomocą języków HTML i CSS. Co oznaczają? Jak wygląda struktura witryny?
HTML i CSS – co to jest?
HTML nie jest językiem programowania. To skrótowiec od Hypertext Markup Language, czyli hipertekstowego języka znaczników. Pierwsza jego specyfikacja pojawiła się w 1991 roku, a zamieścił ją Berners-Lee. HTML wykorzystywany jest do budowania struktury witryny. Korzysta się z określonych znaczników, ale internauta widzi zamiast nich tekst, zdjęcie czy hiperłącze.
CSS jest natomiast skrótowcem od Cascading Style Sheets, czyli kaskadowych arkuszy stylów. Za pomocą tego języka komunikujesz przeglądarce, jak ma wyświetlać witrynę internetową. Można zdefiniować wiele parametrów, takich jak rozmiary i rodzaje czcionek, kolor tła, wyrównanie elementów na stronie. Według w3techs.com z CSS korzysta ponad 97% witryn.
Strona internetowa HTML ma określoną strukturę. Jak wygląda?
Struktura witryny w HTML-u
Strona internetowa HTML pod względem budowy przypomina szkielet ludzkiego ciała. Dwie główne jej części to <head>, czyli głowa, oraz <body>, czyli ciało serwisu. Oto, co zawierają:
- Head – ta część kodu znajduje się między znacznikami <head> i </head>. Jest widoczna wyłącznie po sprawdzeniu źródła serwisu. Zawiera takie informacje jak: tytuł i opis strony, wytyczne dla wyszukiwarek internetowych, dane o autorze czy zasady formatowania.
- Body – czyli kod między znacznikami <body> a </body>. Odpowiada za treści, które mają się wyświetlać użytkownikowi serwisu, czyli zdjęcia, teksty, video. Ten kod również jest widoczny dopiero po sprawdzeniu źródła witryny, natomiast w serwisie widzimy efekt w postaci konkretnego contentu.
Jak sprawdzić wspomniane źródło serwisu? W przeglądarce Chrome wystarczy kliknąć prawym klawiszem myszy gdziekolwiek na danej witrynie, a następnie wybrać „Wyświetl źródło strony”. W Firefoxie należy wykonać tę samą czynność, ale opcja ukrywa się pod nazwą „Pokaż źródło strony”.
Przykład kodu HTML
Poniżej znajduje się uproszczony przykład szkieletu strony WWW.
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Moja strona internetowa</title>
<meta name=”description” content=”Oto moja strona internetowa”>
</head>
<body>
<h1>Nagłówek</h1>
<p>Akapit tekstu</p>
</body>
</html>
Jeśli plik z takim kodem trafi na serwer, to po jego uruchomieniu internauta zobaczy wyłącznie to, co w sekcji body, ale bez znaczników, mianowicie Nagłówek i Akapit tekstu. Efektem będzie bardzo prosta strona internetowa HTML. Co oznaczają poszczególne elementy w tym kodzie?
Znaczniki w kodzie HTML
W powyższym przykładzie pojawiło się kilka podstawowych elementów. <!DOCTYPE html> wskazuje na typ dokumentu, który powinien się pojawić w pierwszej linijce pliku. Na tej podstawie przeglądarka może rozpoznać typ dokumentu. Kolejnym jest znacznik <html>, który obejmuje całą treść witryny. Dalej pojawia się <head>, a w nim m.in. <meta charset=”UTF-8″>. Ten element określa system kodowania języka. Kodowanie UTF-8 wspiera polskie znaki, dzięki czemu prawidłowo wyświetlają się na stronie.
Za pomocą znacznika title określa się tytuł strony, zaś description – opis. Po sekcji <head> pojawia się <body>, czyli część, która prezentuje treści wyświetlane użytkownikom. Za pomocą <h1> definiuje się najważniejszy nagłówek na stronie. Przeważnie jest nim nazwa kategorii lub tytuł artykułu. Znacznik <p> definiuje akapit. Przed nim i po nim przeglądarka automatycznie dodaje jeden pusty wiersz.
Więcej na temat kodu HTML dowiesz się tutaj: https://responsywnie.pl/kod-html-strony-internetowej/. Warto bliżej poznać ten język, aby łatwiej radzić sobie z prowadzeniem witryny i wprowadzać mniej wymagające modyfikacje bez pomocy specjalisty.
