Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Struktura dokumentu HTML5

Po tej sporej dawce teorii dochodzimy w końcu do miejsca, gdzie będziemy mogli stworzyć naszą pierwszą stronę WWW. Na razie bardzo prostą stronę, zadanie jest takie, aby przeglądarka pokazała napis "To jest moja pierwsza strona WWW". Zanim to zrobimy musimy jescze poznać, jakie elementy tworzą szkielet dokumentu. Słowo szkielet może nie kojarzy się miło, ale w pełni oddaje znaczenie jakie spełnia w dokumencie HTML. W ujęciu najprostszym wygląda on następująco:

<!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Zaznaczam, że jest to absolutne minimum, to jeszcze nie jest ten szkielet, który zapiszemy na swoich nośnikach do wykorzystania w każdym projekcie który będziemy wykonywać. Wyjaśnijmy znaczenie pokazanych znaczników:

  • <!doctype html> informuje przeglądarkę że ma do czynienia z dokumentem HTML;
  • <html></html> ten znacznik określa ramy dokumentu HTML, a więc jego początek i koniec;
  • sekcja <head></head> tworzy tak zwany nagłówek dokumentu. W tym przykładzie jest on pusty ale powinien obowiązkowo zawierać kilka informacji. W wersji minimum są to: strona kodowa, tytuł, oraz słowa kluczowe i opis trony;
  • sekcja <body></body> to tak zwane ciało dokumentu, tutaj umieszczamy treść.O ile sekcja head pełni rolę czysto informacyjną i jej zwartość (poza tytułem który przeglądarka wyświetla na pasku tytułu) można obejrzeć tylko w źródle, o tyle zawartość body jest w całości wyświetlane w oknie przeglądarki.

Ćwiczenie 1_0_0_1

Bardzo ważne. W tym ćwiczeniu, jak również w pracy domowej znajdującej się pod ćwiczeniem, omówiono sposób zapisywania wykonanych zadań na pendriwie. Musisz zawsze trzymać się ściśle tej instrukcji.

Wykonaj stronę WWW na której będzie pokazany napis "To jest moja pierwsza strona WWW". Proszę o dokładne wykonywanie poleceń i stosowanie podawanego tutaj nazewnictwa. Nazewnictwo musi być ujednolicone, aby umożliwić nauczycielowi kontrolę i ocenę prac wykonywanych przez uczniów, natomiast uczniowie nie będą tracić czasu na szukanie plików związanych z danym ćwiczeniem.

  1. Utwórz folder html5, w którym będziesz zapisywał swoje prace przez cały rok szkolny.
  2. Każde ćwiczenie będzie znajdowało się w oddzielnym folderze, na potrzeby tego ćwiczenia utwórz folder cwicz_1_0_0_1. Skąd się biorą te liczby? To proste, spójrz na pasek adresu przeglądarki, powinien tam się znajdować napis http://www.teacher.webd.pl/kurs_html5/k_1_0_0.php. W nazwie ćwiczenia 3 pierwsze liczby, przepisywane są z nazwy pliku bieżącego dokumentu, natomiast liczba ostatnia jest kolejnym numerem ćwiczenia wykonywanego na danej stronie. Zapytasz zapewne - po co tworzyć dodatkowe foldery z numeracją ćwiczenia, nie wystarczy plik? Otóż najczęściej nie wystarczy, bowiem dla prawidłowego wyświetlania strony potrzebne są inne pliki - np. obrazki.
  3. Otwórz Notepad++ i ustaw kodowanie na UTF-8. Przepisz pokazany wyżej szkielet dokumentu.
  4. W sekcji body napisz To jest moja pierwsza strona WWW. Pamiętaj aby zastosować wcięcie tego tekstu względem znaczników body.
  5. Zapisz plik jako cwicz_1_0_0_1.html.
  6. Otwórz ten plik za pomocą Firefoxa.
  7. Zwróć uwagę, że przeglądarka nie wyświetla nawet tytułu tak prymitywnie wykonanej strony a tylko adres do pliku, ponieważ nie wpisaliśmy żadnych informacji w sekcji head. Dodatkowo przeglądarka przyjęła kodowanie domyślne.

Tak powinna wyglądać poprawnie wykonana strona:

Praca domowa

  1. Wykonaj ponownie Ćwiczenie 1_0_0_1. Dokument zapisz jako html5/dom_1_0_0_1/dom_1_0_0_1.html. Jak widać, w przypadku prac domowych postępowanie jest analogiczne, jak w przypadku ćwiczeń, z tą różnicą, że zamiast cwicz piszemy dom. Tak przy okazji - zauważyłeś że ukośniki są inne jak w Windowsie? Na razie powiem tylko tyle, że nie jest to błąd i w kodzie HTML taki zapis stosuj.
  2. Napisz w zeszycie szkielet dokumentu i naucz się go na pamięć. Musisz umieć omówić znaczenie poszczególnych znaczników.