• Artykuł

            

Kurs HTML - Struktura dokumentu Udostępnij na: Facebook

Autor: Marcin Bryk

Opublikowano: 2011-08-31

Coraz więcej osób decyduje się na zakup własnej domeny, aby potem na niej prowadzić własny serwis internetowy. Strona napisana w HTML-u przypomina wypracowania, które pisali w szkole – posiada temat, wprowadzenie, rozwinięcie (główną część) oraz zakończenie.  Tak samo jest z dokumentem HTML, różni je tylko występowanie określonych poleceń, zwanych TAGAMI. Większość tagów  ma dwie – części otwierającą <tag> i zamykającą </tag>. To, co znajduje się pomiędzy tagami ulega odpowiedniemu formatowaniu, po czym wyświetlane jest w naszej przeglądarce.

Po przeczytaniu tego artykułu będziesz znał:

  • strukturę dokumentu html,
  • podstawowe parametry nagłówka i głównej części dokumentu.

Implementacja

Dokument HTML, aby był dobrze przetwarzany przez przeglądarkę, musi odpowiadać ogólnie przyjętym zasadom i powinien zawierać przynajmniej trzy elementy (ogólną strukturę dokumentu HTML przedstawiono na schemacie poniżej):

Zawsze, gdy rozpoczynamy tworzenie dokumentu HTML, musimy pamiętać o tych trzech tagach. Całość powinna być zamknięta pomiędzy tagiem <html> a </html> i powinna składać się z dwóch części. W pierwszej części – rozpoczynającej się tagiem <head>, a kończącej </head> – zawieramy ogólne informacje o dokumencie, lecz bez treści. Druga część zawiera dane, które będą przedstawiane w przeglądarce. Musimy jednak pamiętać, że kolejność umieszczanych przez nas informacji jest istotna. Tak jak wpiszemy w dokumencie informacje, tak też będą one udostępnione innym w przeglądarce. Część tę rozpoczynamy tagiem <body>, a kończymy </body>.

Oprócz owych trzech najważniejszych tagów warto dodawać również tag <!doctype>. Przeznaczony jest do informowania przeglądarki, w jakiej wersji HTML-a został napisany dokument. Tag ten powinniśmy umieścić w pierwszej linii dokumentu (przed tagiem <html>). Poniżej został przedstawiony przykład oznaczenia HTML DTD (Document Type Definition) w wersji 4.01:

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

Tag nagłówka dokumentu zawiera, jak wyżej napisano, informacje o dokumencie. Wewnątrz tagu <head> można umieszczać następujące tagi: <base>, <isindex>, <link>, <meta>, <nextid>, <title>. Najczęściej jednak używane są dwa spośród nich.

Pierwszy to tag <meta>. Pozwala nam na tworzenie metainformacji, które podczas przesyłania dokumentu HTML do przeglądarki uzupełniają informacje o takie dane, jak: nazwisko autora, data utworzenia, słowa kluczowe oraz czy chcemy, żeby dokument był co jakiś czas przeładowywany. Poniżej znajdują się przykładowe parametry tagu.

  • content=”wartość” – wartość własności
  • dir=”kierunek” – kierunek tekstu
  • http-equiv=”nazwa” – nadaje nazwę
  • lang=”język” – określa język
  • name=”nazwa” – określa nazwę
  • url=”adres” – adres dokumentu, wymagane jest podanie całego adresu

Drugi tag – <title> – określić można bardzo krótko: nadaje on tytuł naszemu dokumentowi HTML. Najlepiej pokaże nam to ten screen:

Główną część dokumentu reprezentuje wyżej wspomniany tag <body>. Umieszcza się z nim:

  • odwołania (linki),
  • informacje o typie formatowanych elementów,
  • informacje o charakterze formatowanych elementów,
  • blokowe elementy formatujące,
  • listy,
  • grafiki,
  • tabele,
  • formularze.

I wszystko inne, co chcemy, aby było wyświetlane w przeglądarce. Oto przykładowe parametry umieszczane w dokumencie:

  • background=”adres” – wpisujemy adres obrazka, który będzie ustawiony jako tło naszego dokumentu,
  • bgcolor=”kolor” – określamy kolor tła,
  • style=”styl” – określamy informacje o stylach css.

Główna część dokumentu ze względu na swoją funkcję posiada wiele parametrów, które w zależności od potrzeb wykorzystujemy.

Podsumowanie

Podsumowując, w artykule zapoznaliśmy się ogólną strukturą dokumentu HTML oraz przykładowymi parametrami określającymi właściwości poszczególnych części dokumentu.