HTML/Pierwsza strona
Z Wikibooks, biblioteki wolnych podręczników.
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 HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <title> Pierwsza Strona </title> </head> <body> <p>Przykładowy tekst.</p> <span style="color: red"> Moja strona </span><br> Witaj! </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. tagi, których używa się do budowy strony WWW. Prawie wszystkie znaczniki otwiera się i zamyka, umieszczając przykładowo <html> i </html></code>. Istnieją jednak wyjątki, takie jak tag <code><nowiki><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.
- Pierwsza linijka powyższego kodu (zwanego kodem HTML) przedstawia informację o dokumencie. Mówi ona o tym jaką wersje HTML-a zastosowaliśmy. Jest to potrzebne do dalszej interpretacji dokumentu.
- Następnie widzimy znacznik otwierający
<html>. Sygnalizuje on rozpoczęcie kodu HTML w dokumencie. W tej sekcji umieszczamy całą resztę kodu HTML. Na końcu dokumentu znajdziemy tag zamykający</html>. - Kolejną rzeczą jest sekcja
<head></head>. W niej zawieramy informacje o dokumencie – w tym przypadku o kodowaniu znaków i tytule dokumentu, który zawsze zobaczymy na pasku przeglądarki. W sekcji head możemy umieścić także informacje o autorze dokumentu (czyli strony HTML), opis dokumentu czy słowa kluczowe. Dokładniej sekcję head omówimy w dalszej części podręcznika. - Po tym przychodzi sekcja
<body></body>. Obejmuje ona to, co chcemy umieścić na naszej stronie - czyli informacje o tekście, wstawianych grafikach itp. - W sekcji body utworzyliśmy paragraf za pomocą tagów
<p></p>, w którego sekcji umieściliśmy nasz tekst. - Znacznik
<br>(break-line) oznacza przejście do następnej linii. <span style="color: red">Słowo </span>określa kolor czcionki w danym tekście. Tag<span>używany jest do zaznaczania fragmentu tekstu, w którym obowiązują określone wartości stylów CSS (zawarte w tym wypadku w atrybucie style). CSS służy do określania wyglądu tekstu, jak i niekiedy całych stron, ale o nim później.
To wszystko. W dalszych rozdziałach będziemy rozbudowywać nasz dokument i poznawać nowe elementy.
