- krótka informacja na temat wersji HTML naszego dokumentu
- nagłówek dokumentu czyli sekcja <head>
- zawartość właściwa, czyli ciało <body> strony internetowej
Sekcje <head> i <body> umieszczamy wewnątrz głównego taga <html> </html>
Co to jest DOCTYPE?
Razem z rozwojem i dojrzewaniem internetu zmienia się również język HTML. Np. jakieś 10 lat temu style CSS nie były wykorzystywane i cała warstwa prezentacyjna oparta była na tagach i atrybutach HTML. Kolejne specyfikacje języka HTML to kolejne zmiany i właśnie nagłówek DOCTYPE informuje przeglądarkę o wersji języka HTML, w której nasza strona została stworzona.
Jaki DOCTYPE ustawić? XHTML czy HTML?
W zależności od składni naszego języka HTML i tagów, które używamy, musimy sami zdecydować, który DOCTYPE obowiązuje w naszym dokumencie. Jeżeli dopiero zaczynacie i nie chce wam się czytać o tym - po prostu ustawcie HTML 4.01 Transtional.
Słówko na temat XHTML - jest to krok do przodu w porównaniu z czystym językiem HTML i zaleca się jego stosowanie, gdyż wymaga on większego porządku w kodzie HTML a to z kolei daje dodatkowe możliwości w przetwarzaniu naszych dokumentów HTML. Nie rozgrzebując zbytnio tego tematu spójrzmy na przykładowe typy DOCTYPE obowiązujące w ostatnich czasach :
<!-- HTML Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Strict to najbardziej rygorystyczna definicja dokumentu. Na pierwszym miejscu stawiana jest struktura dokumentu, a nie prezentacja. Zabrania ona stosowania między innymi:
- tagów uznanych za nieaktualne np. <center> oraz tagów służących tylko do zmian wyglądu, np. <b>, które bez problemu można zastąpić stylami CSS
- ramek (frames)
- atrubytu target w linkach
<!-- HTML Transtional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- XHTML Transtional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Transitional w odróżnieniu od Strict dopuszcza stosowanie tagów prezentacyjnych oraz target'ów w linkach. Kolejny typ Frameset dopuszcza ponadto stosowanie ramek.
<!-- HTML Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML Frameset -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HEAD dokumentu HTML czyli strona musi mieć głowę na karku
W sekcji <head> gromadzimy informacje na temat naszej strony internetowej, najważniejsze z nich to:
- tytuł strony wyświetlany na pasku przeglądarki internetowej oraz w wyszukiwarkach internetowych, bardzo ważny w pozycjonowaniu strony!
- opis strony również pojawiający się w wynikach wyszukiwania
- informacja na temat kodowania strony odpowiedzialna za poprawne wyświetlanie polskich znaków na naszej stronie
- możemy również podać słowa kluczowe, dołączyć arkusze stylów css lub pliki javascript, napisać o autorze strony itd.
Przykładowy nagłówek strony internetowej zawierający powyższe elementy może wyglądać tak:
<!-- otwarcie sekcji head -->
<head>
<!-- w tytule strony dobrze umieścić słowa kluczowe -->
<title>Jaki - niezwykłe zwierzęta z Azji</title>
<!-- opis strony powinien zachęcać do wejścia -->
<meta name="description" content="Informacje na temat jaków, niezwykłych zwierząt z Azji. Strona zawiera opis życia jaków oraz barwne fotografie i kierowana jest do wszystkich miłośników zwierząt oraz egzotyki." />
<!-- ustawienie kodowania na utf-8 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- słowa kluczowe strony -->
<meta name="keywords" content="jaki,jak,zwierzęta,azja,egzotyka" />
<!-- arkusz styli CSS -->
<link rel="stylesheet" type="text/css" href="style/dekoracje.css"/>
</head>
<body> - ciało dokumentu HTML
Sekcja <body> naszej strony to jej treść właściwa, a więc wszystko co będzie widoczne w oknie przeglądarki. Od twórcy strony zależy, jakie tagi wykorzysta, jak zorganizuje układ strony i treści na stronie.
Wszystko razem - pierwsza strona gotowa!
Zbierając powyższe informacje razem możemy stworzyć pierwszą (bardzo uproszczoną) stronę internetową:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jaki - niezwykłe zwierzęta z Azji</title>
<meta name="description" content="Informacje na temat jaków, niezwykłych zwierząt z Azji. Strona zawiera opis życia jaków oraz barwne fotografie i kierowana jest do wszystkich miłośników zwierząt oraz egzotyki." />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Strona na temat jaków</h1>
</body>
</html>
Posty
2 komentarze:
Nie trzeba korzystać z CSS, aby pogrubić czcionkę nie używając tagu "b". Można spokojnie skorzystać z tagu strong.
Równie dobrze można uzyć h1 i też będzie pogrubiony. Sęk w tym, że wybór znaczników powinien być dyktowany ich przeznaczeniem. Cytując W3: tag strong "Defines important text" a nie "makes font bold". Pozdro.
Prześlij komentarz
Uwaga: tylko uczestnik tego bloga może przesyłać komentarze.