HTML/Pierwsza strona

Najprościej będzie jak zaczniemy naszą naukę od stworzenia swojej pierwszej strony. W tym celu w swoim edytorze stwórz nowy plik i przepisz lub skopiuj kod przedstawiony poniżej:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <!-- Deklaracja typu dokumentu -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <!-- standard w3c -->
<head>
  <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" /> <!-- Kod kodowania Polskich znaków -->
  <meta name="Description" content=" wstaw tu opis strony " />
  <meta name="Keywords" content=" wstaw tu słowa kluczowe " />
  <meta name="Author" content=" dane autora " />

  <title> tytuł strony </title>

  <link rel="stylesheet" href=" nazwa_arkusza_stylow.css " type="text/css" /> <!-- standard CSS -->
</head>
<body>

<p>tutaj wstaw treść strony</p>

</body>
</html>

Nie przejmuj się na razie, że nic z tego nie rozumiesz. Zaraz wszystko się wyjaśni. Zapisz teraz swoją stronę pod nazwą index.html. Teraz możemy otworzyć stronę w przeglądarce by zobaczyć rezultat. Brawo, stworzyłeś swoją pierwszą stronę. Na razie nikt prócz ciebie jej nie zobaczy, ponieważ jest ona tylko na twoim komputerze. Zajmijmy się teraz analizą stworzonej strony.

Przedstawiony powyżej kod zawiera w większości tzw. znaczniki, czyli tekst w nawiasach ukośnych, których używa się do budowy strony WWW. Prawie wszystkie znaczniki otwiera się i zamyka, umieszczając przykładowo <html> i </html>. Istnieją jednak wyjątki, takie jak tag <img>, służący do wstawiania obrazków na stronie, ale omówimy go później. Przestrzenie pomiędzy znacznikami otwierającym i zamykającym nazywamy sekcjami. W sekcjach można umieszczać inne znaczniki i tekst.

Analiza[edytuj]

Deklaracja typu dokumentu[edytuj]

Każdy poprawny dokument HTML rozpoczyna się od linijki definiującej jego typ. Ze względu na typ dokumenty HTML dzielimy na:

strict: w pełni zgodny ze standardami W3C,
transitional: zawierający elementy pozwalające na tworzenie stron w znacznej mierze zgodnych ze standardem W3C, jednak zapewniających dostęp do funkcji, które nie są przez W3C popierane, jak np. decydowanie za użytkownika, gdzie otworzyć się ma odnośnik (brak elementu target, będzie o nim mowa później),
frameset: wariant typu transitional pozwalający na użycie ramek.

Zależnie od typu dokumentu HTML musimy wybrać stosowną dla niego definicję, którą umieścimy w pierwszej linijce kodu naszej strony internetowej. Podręcznik jest ukierunkowany na naukę HTML-a o jak najlepszej zgodności ze standardami, więc wybierzemy typ strict.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Jeżeli chciałbyś skorzystać z typu transitional powinieneś zamiast tego wpisać:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Natomiast dla frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Nie musisz oczywiście uczyć się tego na pamięć. Wystarczy, że będziesz miał te linijki gdzieś pod ręką.

Zapiszmy teraz nasz dokument. Nadajmy mu nazwę index.html – prawie wszystkie serwery stron WWW przeszukują na początku katalog z plikami naszej strony w poszukiwaniu pliku o tej nazwie, w wypadku nie znalezienia takiego pliku zwracają one zwykle błąd 404 (informujący o tym, że poszukiwana strona nie została odnaleziona) lub wyświetlają zawartość katalogu. Najlepiej utworzyć dla niego jakiś osobny katalog, ponieważ później dodamy jeszcze kilka innych plików.

Pozostałe[edytuj]

- W miejscu znaczników: <meta> - Pozwala umieścić bardzo ważne dla wyszukiwarek informacje. 3 Zostały w kodzie wyjaśnione (między znacznikami). Ten ostatni, z linijką ISO-8859-2 jest bardzo ważny - pozwala na uzyskanie polskich znaków. Jest to powszechnie uznany standard, i jego zmiana może spowodować błędy w większości komputerów!
- W miejscu znaczników: <title </title> wpisujemy tytuł strony. Jest wykorzystywany w belce tytułowej przeglądarki internetowej oraz jako nazwa odnośnika w wyszukiwarce (w Google odznacza się niebieskimi napisami)
- standard CSS - to osobny plik, o którym dowiemy się więcej w książce CSS. Pozwala na zdefiniowanie układu strony, np. menu po lewej stronie, na górze banner na dopiero na środku właściwa treść.
W miejscu tekstu: wstaw tu opis strony krótko opisujemy naszą witrynę. Z tej funkcji korzystają wyszukiwarki internetowe - tekst który tutaj wpiszesz, pojawi się w wyszukiwarce, poniżej odnośnika do twojej strony. Jeśli pozostawimy pole puste, pojawi się kilka pierwszych linijek które znajdują się na stronie.
W miejscu tekstu: wstaw tu słowa kluczowe - Tu wpisujemy słowa kluczowe, z których również korzysta wyszukiwarka by odnaleźć twoją stronę. Trzeba tam wpisać tagi tak dopasowane, by najwierniej odzwierciedlały zawartość strony. Jest to jedna z podstaw SEO których nie będziemy omawiać, ze względu na przeznaczenie książki. Zainteresowanych odsyłamy tutaj
Po tym przychodzi sekcja <body></body>. Obejmuje ona to, co chcemy umieścić na naszej stronie – czyli treść w postacji tekstu, zdjęć, obrazów i pozostałych właściwościach multimedialnych

W sekcji body utworzyliśmy akapit za pomocą znaczników <p></p>, w którego sekcji umieściliśmy nasz tekst. Nie jest to konieczne, ale zwiększa czytelność strony.

To wszystko. W dalszych rozdziałach będziemy rozbudowywać nasz dokument i poznawać nowe elementy. Ponadto, by wykorzystać ten szablon radzimy skasować z niego wszystko, co znajduje się pomiędzy 

« Przygotowanie do pracy

Spis treści

Składnia »