Newsy

poniedziałek, 12 maja 2014

Hipertekstowy język znaczników (HTML)

HTML (ang. HyperText Markup Language) – hipertekstowy język znaczników, obecnie szeroko wykorzystywany do tworzenia stron internetowych.

Opis wstępny


HTML pozwala opisać strukturę informacji zawartych wewnątrz strony internetowej, nadając znaczenie poszczególnym fragmentom tekstu – formując hiperłącza, akapity, nagłówki, listy – oraz osadza w tekście dokumentu obiekty plikowe np. multimedia bądź elementy baz danych np. interaktywne formularze danych.

HTML umożliwia określenie wyglądu dokumentu w przeglądarce internetowej. Do szczegółowego opisu formatowania akapitów, nagłówków, użytych czcionek i kolorów, zalecane jest wykorzystywanie kaskadowych arkuszy stylów.

W składni HTML wykorzystuje się pary znaczników umieszczone w nawiasach ostrokątnych, np. <title> i </title> lub <h1> i </h1>.

HTML pozwala również na osadzanie ciągów instrukcji języków skryptowych, umieszczonych pomiędzy znacznikami <script> i </script>

Należy nadmienić, że HTML, będąc językiem znaczników, nie jest zaliczany do języków programowania – w jego składni nie przewidziano wyrażeń obliczeniowych, warunkowych czy iteracyjnych.

Ważną cechą HTML-a, która przyczyniła się do popularności systemu WWW oraz Internetu, jest niezależność od systemu operacyjnego i wykorzystywanego sprzętu komputerowego.

Komponenty języka HTML


Język HTML składa się z kilku kluczowych komponentów:

  • znaczników (i ich atrybutów),
  • typów danych,
  • referencji znakowych,
  • odwołań w postaci encji,
  • deklaracji typu dokumentu. 

Znaczniki (tagi)


Znaczniki stanowią podstawowy komponent języka HTML. Charakteryzują je dwie cechy: atrybuty i zawartość. Każdy atrybut i zawartość musi spełniać określone wymagania, aby dokument został poprawnie zwalidowany pod kątem zgodności ze standardem. Znacznik zwykle rozpoczyna się znacznikiem otwierającym (np. <nazwa-znacznika>), a kończy znacznikiem zamykającym (np. </nazwa-znacznika>). Atrybuty elementu są zawarte w znaczniku otwierającym (po nazwie znacznika), natomiast zawartość umieszczana jest pomiędzy znacznikiem otwierającym i zamykającym. (np. <nazwa-znacznika atrybut="wartość">zawartość</nazwa-znacznika>). Niektóre elementy, np. <br>, <hr> nie posiadają zawartości, a także znacznika zamykającego.

W nomenklaturze polskiej, dotyczącej języka HTML, słowa element używa się do określenia grupy:

  • znacznik otwierający,
  • atrybuty,
  • zawartość,
  • znacznik zamykający.


Słowami znacznik określa się znacznik otwierający (wraz z zamykającym) w znaczeniu elementu składni języka HTML, np. "Do wyszczególnienia paragrafów wykorzystuje się znacznik <p>". Niektórzy słowa element używają zamiennie ze słowami znacznik lub tag.

Niektóre elementy nie wymagają znaczników końcowych (np. <p> odpowiadający za nowy akapit) lub ich nie mają (<img> wstawiający obrazek lub <br> łamiący linię).

Poniżej przedstawione są różne typy znaczników języka HTML.


Strukturalne – opisują logiczną strukturę tekstu, np. <h2>Golf</h2> nadaje znaczenie wyrazowi "Golf" i traktuje go jako nagłówek drugiego stopnia. Podczas renderowania(wyświetlania) zostanie on zaprezentowany w sposób wyróżniony (np. większą i pogrubioną czcionką). Znaczniki strukturalne nie definiują sposobu wyświetlania elementu, jednak większość przeglądarek posiada wbudowane style, których używa, gdy do dokumentu nie jest dołączony żaden kaskadowy arkusz stylów CSS.

Prezentacyjne – opisują wygląd poszczególnych elementów, np. <b>lama</b> powoduje, że "lama" zostanie wyświetlona pogrubioną czcionką. Nie daje jednak żadnych wskazówek urządzeniom nie potrafiącym wyświetlić pogrubionego tekstu (takim jak syntezatory mowy, czytający daną stronę na głos). W przypadku <b>pogrubienia</b> oraz<i>pochylenia</i> istnieją równoważne znaczniki, mające podobną lub taką samą formę wizualną, ale posiadające naturę semantyczną. Są to odpowiednio <strong>silne wzmocnienie znaczenia</strong> oraz <em>wzmocnienie znaczenia</em>. W tym przypadku łatwiej określić zachowanie syntezatora mowy podczas interpretacji takich znaczników np. poprzez mocniejsze zaakcentowanie danego wyrażenia. Znaczniki semantyczne nie są jednak stuprocentowymi odpowiednikami znaczników prezentacyjnych. Istnieją sytuacje, gdy tylko wizualnie chcemy wyróżnić daną część tekstu. Nie jest pożądane, aby syntezator mowy wzmacniał znaczenie np. tytułu książki w trakcie czytania strony, podczas gdy wizualnie warto byłoby taki tytuł wyróżnić czcionką pochyłą dla poprawienia czytelności tekstu. Większość znaczników prezentacyjnych w specyfikacji HTML 4.0 oznaczono jako przestarzałe na rzecz kaskadowych arkuszy stylów CSS.

Hipertekstowe – zawierają linki do innych dokumentów lub innych części tego samego dokumentu. HTML aż do wersji XHTML 1.1 wymaga do utworzenia hiperłącza elementu o nazwie anchor (pol. kotwica), zapisywanego w postaci: <a>Wikipedia</a>. Oprócz tego atrybut href musi zwierać poprawny adres URL. Następujący kod HTML<a href="http://pl.wikipedia.org/">Wikipedia</a> wyświetli ciąg znaków "Wikipedia" jako hiperłącze.

Atrybut


Większość atrybutów elementów składa się z par nazwa-wartość, rozdzielonych znakiem "=", zawartych w znaczniku otwierającym elementu, po jego nazwie. Wartość może być zawarta w pojedynczych lub podwójnych cudzysłowach. Przy niektórych wartościach cudzysłowy mogą być pominięte (tylko w specyfikacji HTML, nie XHTML), jednak nie jest to zalecane, a wręcz praktyka taka uznana jest na niebezpieczną. W przeciwieństwie do atrybutów w postaci par nazwa-wartość istnieją atrybuty mające wpływ na element poprzez samo ich zawarcie w znaczniku otwierającym (np. ismap atrybut dla znacznika img).

Znaczna część elementów może posiadać standardowe dla znaczników atrybuty: id, class, style, title, a także atrybuty związane z językiem lang i dir.

Atrybut id nadaje elementowi unikatowy identyfikator. Może on zostać użyty przez arkusze stylów do sprecyzowania wyglądu tego elementu lub przez skrypty np. do zmiany jego zawartości. Atrybut class służy do sklasyfikowania elementów dla celów prezentacyjnych. Dokument HTML lub zbiór takich dokumentów może używać klasy class="stopka", sugerując, że powinny być one wyświetlone na dole strony w postaci stopki. Elementy posiadające taką klasę mogą otrzymać styl, dzięki któremu zamiast wyświetlać się w miejscu występowania w kodzie HTML, będą zaprezentowane na dole strony w postaci stopki.

Autor może użyć znacznika style, aby nadać styl konkretnemu elementowi w kodzie HTML. Dobrą praktyką jest jednak nadanie elementowi unikatowego identyfikatora id, odnosząc się prezentacji tego znacznika w arkuszu stylów. Czasem jest to jednak nieporęczne podczas szybkiego testowania wyglądu elementów. Atrybutu title używa się w celu dodania do elementu informacji tekstowej. W wielu przypadkach zawartość atrybutu title wyświetlana jest w postaci podpowiedzi (tooltip), pojawiającej się na ekranie po najechaniu myszą na dany element. Wykorzystanie tych atrybutów może ułatwić znacznik span, należący do grupy znaczników typu inline.

<span id="ZadaneId" class="DanaKlasa" style="color:blue;" title="Hypertext Markup Language">HTML</span>

Powyższy kod wyświetli niebieski napis HTML (najechanie wskaźnikiem myszy na skrót HTML powinno w większości przeglądarek wyświetlić podpowiedź z rozwinięciem skrótu).

Przykład dokumentu HTML


Prosty przykład strony WWW w HTML-u z ustawieniem języka polskiego:
<!doctype html>
 <html lang="pl" dir="ltr">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Tytuł strony</title>
</head>
<body>
<h1>Nagłówek pierwszego poziomu</h1>
 <p> Akapit (z ang. paragraph)<br /> i jeszcze trochę tekstu w następnym wierszu<br /> a to jest <a href="http://pl.wikipedia.org">link do Wikipedii</a>. </p>
</body>
</html>

Link do źródła

Brak komentarzy :

Prześlij komentarz

Szablon dla Bloggera stworzony przez Darmowe dodatki na blogi | oraz Blokotek.pl