Witam w pierwszej części kursu html. W tej części kursu dowiesz się jak wygląda podstawowa struktura dokumentu html oraz wspomniane zostaną rodzaje kodowania używane na stronach i wpisy, które należy umieścić na samym początku dokumentu.
Tak jak wspomniałem pierwszą rzeczą jaką poruszę to struktura dokumentu. Poniżej znajduje się listing, który przedstawia podstawową strukturę dokumentu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
Informacje nagłówkowe o dokumencie, łącznie z tytułem
</head>
<body>
Treść dokumentu - śródtytuły, tekst, grafika, odsyłacze itp.
</body>
</html>
Pierwsza linia z listingu informuje o tym jakiej wersji html jest używana w dokumencie.
Kolejny element dokumentu czyli <html> rozpoczyna dokument. Między znacznikami (bo tak będziemy nazywali wszystkie elementy, które znajdują się między <>) <html></html> znajduje się właściwa część strony czyli cała jej zawartość. Między znacznikami <head></head> wpisujemy tzw. tagi meta. Do czego służą meta tagi dowiesz się w dalszej części tego kursu. No i wreszcie kolejny znacznik <body></body> w tym miejscu wpisujemy to co ma zostać wyświetlone w przeglądarce.
Znasz już pokrótce strukturę dokumentu html. Przejdziemy zatem do bardziej szczegółowego opisywania elementów.
Zaczniemy od sekcji <head></head>. W tej części umieszczamy meta tagi. Meta tagi służą do prezentacji strony w wyszukiwarkach, ale nie tylko. W sekcji umieszczamy również takie informacje jak źródło do zewnętrznego pliku z kaskadowymi arkuszami stylów (CSS) oraz do plików zewnętrznych JavaScrpit (JS). Najważniejsze meta tagi, które trzeba umieścić w tej sekcji to:
- <meta http-equiv="content-type" content="text/html; charset=utf-8"> służy do oznaczenia w jakim systemie będzie kodować znaki, które umieszczamy na stronie
- <meta name=”description” content=”tutaj tekst”> tag ten służy do umieszczenia kótkiego rzeczowego opisu na temat tematyki I zawartości strony. Dzięki temu Tagowi wpisany tekst będzie wyświetlany w opisie wyszukań wyszukiwarki.
- <meta name=”keywords” content=”tutaj słowa kluczowe”> Tag ten służy do umieszczania tzw. słów kluczowych inaczej fraz, na które strona będzie znajdowana w wyszukiwarkach.
- <meta name=”author” content=”autor strony”> ten tag informuje kto jest twórcą strony
- <title></title> ten znacznik również umieszczamy w tej sekcji. Znacznik ten umożliwia wyświetlenie nazwy oraz tytułu strony. Tytuł z tego znacznika będzie wyświetlany w wynikach wyszukiwania wyszukiwarki
- <meta name=”generator” content=”narzędzie użyte do tworzenia strony”> ta ten informuje jakiego narzędzia użyto do tworzenia strony
Oczywiście występuje więcej tagów, które można umieścić w tej sekcji. Wyżej znajdują się te najważniejsze.
Jeśli mam już tak przygotowaną sekcją <head></head> możemy przejść do kolejnej sekcji. Sekcja <body></body> służy do umieszczania znaczników html, które wyświetlają stronę w przeglądarce. To tutaj wpisujemy tytuły, nazwy i inne treści, które mają być czytane przez potencjalnych internautów.