Temat 3: Podstawowa struktura dokumentu
Zadeklarowanie języka Budowę dokumentu hipertekstowego rozpoczyna się od zadeklarowania, w jakim języku tworzona będzie strona internetowa. W naszym przypadku będzie to HTML. Odpowiada on za właściwe przedstawienie informacji zawartych w treści dokumentu oraz wprowadzenie dodatkowych elementów multimedialnych i plików. Ramy dokumentu hipertekstowego stanowią znaczniki określające język, które umieszczone są w nawiasach ostrych: <hmtl> <!-- zawartość dokumentu hipertekstowego --> </html>
Nagłówek dokumentu Po zadeklarowaniu języka, w jakim tworzona będzie strona, można przystąpić do wprowadzania nagłówka dokumentu <head>. Nagłówek odpowiedzialny jest za przechowywanie informacji dotyczących całego dokumentu. Można wprowadzić tu takie elementy jak: tytuł strony, kodowanie polskich znaków, słowa kluczowe, podstawowy opis strony, style formatujące dokument czy dane autora. Ogólny zarys nagłówka dokumentu przedstawia się następująco: <head> <!-- nagłówek dokumentu --> </head>
Treść dokumentu Elementy przedstawione powyżej nie są widoczne dla użytkownika przeglądającego daną stronę w internecie. Informacje te są zrozumiałe jedynie dla przeglądarki. Treść bezpośrednio uwidocznione na stronie umieszczone są w treści dokumentu <body>. Jest to miejsce przeznaczone do wprowadzania m.in. tekstów i obrazów. Ogólny zarys treści dokumentu przedstawia się następująco: <body> <!-- treść dokumentu --> </body>
Podstawowa struktura dokumentu Łącząc ze sobą w odpowiednim porządku powyższe elementy, otrzymamy podstawową strukturę dokumentu zawierającą deklarację języka HTML, nagłówek oraz treść dokumentu: <html> <head> <!-- nagłówek dokumentu--> </head> <body> <!-- treść dokumentu--> </body> </html>
Pierwsza strona internetowa Opierając się na poznanej strukturze, zbudujemy naszą pierwszą stronę internetową. W nagłówku dokumentu wprowadzimy dodatkowy znacznik <title>, odpowiedzialny za wyświetlenie tytułu strony, który wyświetla się w lewym górnym rogu na pasku tytułu przeglądarki. Następnie wprowadzimy tekst w treści dokumentu(To jest moja pierwsza strona WWW!). <html> <head> <title> Pierwsza strona </title> </head> <body> To moja pierwsza strona WWW! </body> </html>
Po zapisaniu pliku jako index Po zapisaniu pliku jako index.html i uruchomieniu przez przeglądarkę internetową otrzymamy:
Ćwiczenie Wykonaj stronę internetową na podstawie poniższego rysunku. Pamiętaj o wprowadzeniu znacznika <br> który odpowiada za przejście do nowej linii. Znacznik <br> nie ma znacznika zamykającego.