Html-strona

praca na lekcji

HTML od podstaw

Przydatne linki

Strona szkoły

Kaskadowe arkusze stylów

DIV

Podstawowe pojęcia

Jesteś tutaj: Start Struktura dokumentów HTML

Struktura dokumentów HTML

Print | Email | Odsłony: 858

Ramy dokumentu

Stronę WWW tworzy się podobnie jak zwykły dokument tekstowy. Po uruchomieniu edytora HTML należy wybrać opcję z menu: Plik/Nowy (lub File/New). Teraz można już zacząć pisanie strony. Jednak ponieważ dokument HTML nie jest całkowicie zwykłym plikiem tekstowym (zawiera hipertekst, osadzone obrazki i musi być poprawnie wyświetlany w różnych systemach operacyjnych na całym świecie), dlatego wymyślono specjalny szablon dokumentu HTML, który powinien być przestrzegany.

Oto jak przykładowo powinny wyglądać ramy każdego dokumentu w formacie HTML (istnieją również inne podobne szablony):

Zaznacz kod Edytuj na żywo

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="description" content="Tu wpisz opis zawartości strony">
	<title>Tu wpisz tytuł strony</title>
</head>
<body>

Tu wpisuje się treść strony

</body>
</html>

UWAGA!
Powyższy szablon dotyczy tzw. kodu źródłowego, dlatego jeżeli używasz edytora graficznego (np.: FrontPage), koniecznie musisz się przełączyć w tryb bezpośredniej edycji kodu źródłowego HTML. Dodatkowo jeśli używasz zwykłego edytora teksu (np. windowsowskiego Notatnika - Notepad), to niektóre polskie znaki mogą zostanć błędnie zakodowane - zamiast nich pojawią się "krzaczki"! Jeszcze raz radzę zaopatrzyć się w jakiś edytor HTML - najlepiej polski.

Większość edytorów HTML przy tworzeniu nowego dokumentu automatycznie wpisuje swój własny szablon - zbliżony do powyższego. Jeśli chcesz, możesz z niego skorzystać, modyfikując opisane poniżej fragmenty. Proponuję jednak zastąpić go szablonem przedstawionym w tym rozdziale. Również w tym przypadku wszystkich zmian należy dokonywać bezpośrednio w trybie edycji kodu źródłowego HTML! Jeśli posiadasz edytor graficzny, musisz się do niego przełączyć, natomiast edytory tekstowe najczęściej posiadają tylko taki tryb - wtedy nie trzeba nic przełączać.

Wskazówka dla bardzo początkujących
Nie musisz za każdym razem, gdy tworzysz nową stronę, przepisywać całego tekstu powyższego szablonu. Wystarczy w przeglądarce internetowej naprowadzić wskaźnik myszki na początek tekstu (wskaźnik powinien zmienić kształt) i wcisnąć lewy przycisk myszki. Trzymając cały czas wciśnięty lewy przycisk, przeciągnij myszką do końca tekstu szablonu, po czym zwolnij przycisk - tekst zostanie zaznaczony. Teraz wciśnij na klawiaturze jednocześnie klawisze: Ctrl+C, co wywoła skopiowanie zaznaczonego tekstu do schowka systemowego. Następnie w edytorze HTML po otwarciu nowego pliku wystarczy wcisnąć: Ctrl+V, a do dokumentu zostanie wklejony tekst ze schowka.
Jeśli jesteś bardziej doświadczonym użytkownikiem komputera, takie rady pewnie Cię śmieszą. Proszę jednak o wyrozumiałość - każdy kiedyś zaczynał. Przypomnij sobie Twoje początki...

Większości tekstu w powyższym szablonie nie powinno się zmieniać. Natomiast można, a nawet należy, zmienić tekst, który został wyróżniony - odpowiednie fragmenty zostaną szczegółowo opisane poniżej.

Cała treść która znajduje się pomiędzy <head> oraz </head> (w szablonie powyżej) jest nazywana nagłówkiem dokumentu(treść nagłówkowa), natomiast wszystko pomiędzy <body> oraz </body> stanowi tzw. ciało dokumentu (treść właściwa).

A teraz wyjaśnimy sobie ważniejsze linijki.

  • W miejsce tekstu: Tu wpisz opis zawartości strony, należy wpisać słowny opis, co znajduje się na Twojej stronie internetowej. Z wiadomości tej korzystają wyszukiwarki internetowe - takie jak Google. Tekst który tutaj wpiszesz, pojawi się w wyszukiwarce po odnalezieniu przez nią Twojej strony. Jeśli nie wpiszesz tutaj nic, wyszukiwarka wyświetli najczęściej kilka pierwszych linijek, które znajdują się na stronie. Ciekawy, ale niezbyt długi opis może zachęcić internautów do odwiedzenia Twojego serwisu! Każda pojedyncza strona, która znajduje się w serwisie, powinna mieć swój własny opis, przedstawiający jej treść.
  • Pomiędzy <title> oraz </title> (w miejsce tekstu: Tu wpisz tytuł strony) należy wpisać tytuł, jaki będzie nosiła Twoja strona. Może on zawierać dowolny tekst, zaleca się jednak, aby nie był zbyt długi (najwyżej kilka wyrazów). Powinien on odnosić się do treści zawartych na danej stronie. Tytuł pojawia się na belce tytułowej przeglądarki internetowej (na samej górze okna programu), a także w wyszukiwarkach internetowych, po odnalezieniu Twojej strony - dlatego właśnie nie może on być zbyt długi. Trafny tytuł może również zachęcić internautów do obejrzenia Twojej strony!
  • I najważniejsze - w miejsce tekstu: Tu wpisuje się treść strony (pomiędzy <body> oraz </body>) należy wpisać właściwą zawartość strony. Może to być po prostu zwykły tekst, który ma się pojawić na stronie. Są to również tzw. znacznikisterujące wyglądem dokumentu (które zostaną opisane dalej).

Dla ciekawskich ;-)
Jeśli już teraz chcesz koniecznie wiedzieć, co oznaczają nieopisane powyżej linijki, zobacz rozdziały: Składnia (X)HTML5 oraz Deklaracja strony kodowej.

UWAGA!
W żadnym wypadku nie należy pomijać w powyższym szablonie następującej linijki:
<meta charset="utf-8">

Co to są podstrony?

Praktycznie wszystkie serwisy internetowe składają się z pewnej liczby podstron, a nie tylko z jednej, bardzo długiej strony głównej. Każda podstrona to po prostu osobny plik (z rozszerzeniem *.html lub *.htm), który tworzy się w taki sam sposób, jak stronę główną (przy użyciu szablonu przedstawionego powyżej). Np. ten serwis składa się z następujących podstron (zobacz w spisie treści): "HTML dla zielonych", "Nagłówek i treść", "Tekst" itd. Taka organizacja treści ułatwia użytkownikowi nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu od razu, co trwałoby prawdopodobnie bardzo długo.
Wszystkie podstrony zapisuje się zwykle w tym samym katalogu - jako osobne pliki - lub w różnych katalogach (jeśli chcemy je jakoś posegregować tematycznie). Z jednej podstrony użytkownik możne automatycznie przechodzić do innych, klikając odpowiednie odnośniki (jeśli je umieścimy).

Jeszcze jedno:
Plik będący stroną startową (czyli główną) musi nazywać się index.html lub index.htm. Twoja witryna internetowa może składać się z dowolnej ilości podstron - każda z nich to osobny plik, tworzony w ten sam sposób, jak strona główna. Inne podstrony mogą nazywać się dowolnie, byleby miały rozszerzenie *.html lub *.htm. Jednak stosowanie bardzo długich nazw może być uciążliwe - szczególnie w przypadku gdy internauta będzie chciał się bezpośrednio przenieść do którejś z podstron Twojego serwisu poprzez wpisanie jej adresu w przeglądarce (każda strona ma swój unikatowy adres, do którego można się odnosić).

UWAGA! Bardzo ważne: w nazwach plików lepiej nie używać:
  • wielkich liter
  • znaków specjalnych, np.: \ / : * ? " < > |
  • spacji (jeśli musisz, w zamian używaj podkreślnika "_")
  • polskich liter (ą, ć, ę, ł, ń... itd.)

Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)!

W dalszych punktach na tej stronie zostanie zamieszczony opis podstawowych poleceń, które mogą Ci być pomocne w napisaniu Twojej pierwszej najprostszej strony internetowej. Wszystkie je należy umieszczać pomiędzy <body> oraz </body> (w ramach właściwej treści strony). Jeśli chcesz wprowadzić na stronę zwykły tekst, możesz go po prostu bezpośrednio wpisać - bez używania żadnych dodatkowych poleceń.