HTML i XHTML - ciąg dalszy

Wersje HTML

Pierwsza specyfikacja języka HTML została nazwana HTML Tags i pojawiła się w 1991 roku i zawierała 22 znaczniki. Na początku 1994 roku organizacja IETF wydzieliła HTML Working Group i powstał HTML 2.0, pierwsza oficjalna specyfikacja języka HTML. Opublikowana została w 1996 roku i zawierała pomysły ze szkicu HTML i HTML+.

14 stycznia 1997 roku opublikowany został HTML 3.2, a 18 grudnia 1997 roku HTML 4.0.

24 grudnia 1999 roku opublikowany został HTML 4.01 jako rekomendacja W3C.

22 stycznia 2008 roku opublikowany jako szkic powstał HTML5, a 28 października 2014 roku został opublikowany jako rekomendacja W3C.

Wersje XHTML

26 stycznia 2000 roku został opublikowany XHTML 1.0 jako rekomendacja W3C, 31 maja 2001 roku opublikowany został XHTML 1.1 jako rekomendacja W3C.

XHTML 2.0 długo funkcjonował jako szkic ale obecnie jest porzucony.

XHTML5 jest aktualizacją XHTML-a 1.x i jest zdefiniowany razem z HTML5.

Nagłówek dokumentu HTML i strona kodowa

Języki XHTML i HTML muszą obsługiwać wiele języków oraz różne znaki narodowe. Dla naszego kraju standardem jest ISO-8859-2. Jest to strona kodowa, która działa na Microsoft Windows, Unix, Linux, MacOS i innych, dlatego należy się stosować do tej normy. W Notatniku także można tworzyć strony www, jednak zakodowane znaki w Notatniku działają tylko w Microsoft Windows, a pozostałe systemy będą być może miały problemy z tą stroną kodową. Jednak możemy korzystać, np. z edytorów HTML z wbudowanym modułem do konwersji znaków lub możemy wstawiać polskie znaki w sposób tradycyjny w formacie Windows 1250. Następnie powinniśmy je przekonwertować za pomocą specjalnych programów – konwerterów. Możemy także zainstalować specjalny program KeyPlus, w którym wybierzemy odpowiednie kodowanie polskich znaków.

Po ustawieniu kodowania polskich znaków na ISO 8859-2 możemy w tradycyjny sposób wprowadzać polskie znaki, jednak czcionka musi być zgodna z ISO 8859-2.

Deklaracja dla strony kodowej ISO 8859-2 ma postać:

a dla strony kodowej Windows 1250:

Możemy także tworzyć dokumenty uniwersalne dzięki rozwiązaniu zastosowania Unikodu (Unicode), na stronie na której umieściliśmy dwa lub więcej języków. „Rozwiązanie to polega na przypisaniu unikatowego numeru wszystkim znakom charakterystycznym dla różnych alfabetów”.

Wyróżniamy trzy odmiany Unikodu: UTF-7, UTF-8 oraz UTF-16 (format 7-bitowy, format 8-bitowy i format 16-bitowy).

Odpowiednie polecenie w XHTML ma postać:

<head>

charset=UTF-8″ />

</head>

</html>

Następny znacznik to title (<title></title>) odpowiada za tytuł strony i znajduje się między znacznikami <head</head>,

<head>

<title>AS Computer Life</title>

</head>

</html>

Następnym elementem są słowa kluczowe (keywords) strony oraz opis (description).

Nagłówek <head></head> może zawierać także kilka innych znaczników jak:

<meta name=”author” content=”Adam Stopa” /> czyli informacje o autorze strony, dane nie są widoczne na zewnątrz, ale warto z niego korzystać.
<meta name=”copyright” content=”Adam Stopa” /> informacja o prawach autorskich.
<meta name=”generator” content=”nazwa edytora HTML” /> możemy zawrzeć informacje za pomocą jakiego edytora utworzyliśmy stronę www.
<meta name=”language” content=”pl” />informacja o języku strony.
<meta http-equiv=”refresh” content=”x” /> spowoduje automatyczne odświeżanie dokumentu co x sekund.
<meta http-equiv=”creation-date” content=”data wykonania” /> określa datę wykonania strony.

Metatag robots

Metatag ten wskazuje robota, który indeksuje nasze strony internetowe oraz dostępne dla niego sekcje, wykorzystując REP (na przykład strony chronione) w celu dostarczenia informacji o stronie dla wyszukiwarek. Podstawowe dyrektywy dla robotów to:

index, noindex, follow i nofollow.

index – oznacza włączenie zawartości strony do archiwum wyszukiwarki.

noindex – oznacza wyłączenie zawartości strony do archiwum wyszukiwarki.

follow – oznacza włączenie śledzenia wszystkich linków na stronie w celu identyfikacji.

nofollow – oznacza wyłączenie śledzenie linków na stronie.

Przykładowy tag:

Następnym znacznikiem jest <base />, które określa bazowy adres dla dokumentu i wszystkich odnośników znajdujących się w jego treści.

Przydatność tego znacznika doskonale jest widoczna, gdy przenosimy dokumenty do innych katalogów. Przy takiej operacji łatwo o zerwanie odnośników.

Ostatnim poleceniem jest <link />, które także wchodzi w skład nagłówka dokumentu i jest odpowiedzialne za dołączanie zewnętrznego arkusza stylów. Element <link /> ma konstrukcję:

Nagłówki i akapity

Nagłówki

W języku HTML i XHTML możemy utworzyć nagłówki o sześciu rozmiarach. Znacznik <h1></h1> jest największym nagłówkiem, a <h6></h6> najmniejszym. Przykłady nagłówków:

<h1>Nagłówek stopnia pierwszego</h1>

<h2>Nagłówek stopnia drugiego</h2>

…

<h6>Nagłówek stopnia szóstego</h6>

Akapity

Tekst, który znajduje się w akapicie automatycznie dostosowuje się do szerokości okna przeglądarki. Za tworzenie akapitu odpowiada znacznik <p></p>, np.

<p>tekstteksttekst</p>

Cytaty

Jeśli chcemy zacytować większy fragment tekstu w kodzie strony, korzystamy ze znacznika <blockqoute></blockquote>,np.

<blockquote>teksttekstekstteksttekst</blockqoute>

Jeśli chcemy zacytować wewnątrz bloku tekstu korzystamy ze znacznika <q></q>, np.

<p>teksttekst

tekstteksttekst<q>teksteksttekst</q>

</p>

Indeksy górne i dolne

W tekście możemy wymusić, aby fragment tekstu był pokazywany jako indeks górny lub indeks dolny.

Indeks górny znaczniki, to: <sup></sup>

Indeks dolny: <sub></sub>

,np.

otrzymamy

E=mc²

Łamanie wierszy

W specyfikacji języków XHTML i HTML możemy znaleźć znacznik, którego celem jest wymuszenie złamania linii. Jest to znacznik <br />.

Znacznik <br> domyślnie nie ma elmentu zamykającego, jednak w XHTML musimy wstawić na końcu „/”: <br />.

<p>

teksttekstteksttekst<br />tekstteksttekst

</p>

otrzymamy:

teksttekstteksttekst

tekstteksttekst.

Wyróżnianie tekstu

W specyfikacji języków XHTML i HTML mamy kilka znaczników, które wyróżniają, np. fragment tekstu.

Aby pogrubić tekst korzystamy ze <strong></strong>.

Tekst pochyły, inaczej kursywa to <em></em>.

Fragment tekstu o stałej szerokości <code></code>.

Twarda spacja

Jeżeli w bloku tekstu umieścisz dodatkowe znaki spacji w kodzie źródłowym, to przeglądarka to zignoruje i wyświetli tylko jeden znak przerwy. Jeżeli chcesz wymusić kilka dodatkowych spacji w tekście, musisz wstawić znak twardej spacji, czyli znaki &nbsp.

<h1>Nagłówek stopnia  nbsp; </h1>

Listy

Kolejnym elementem, z jakim można się spotkać są listy. Specyfikacja określa listy wypunktowane, numerowane oraz listy definicji.

Lista wypunktowana

Do stworzenia listy wypunktowanej korzystamy ze znaczników <ul></ul> oraz <li></li>. W praktyce wygląda to tak:

<ul>

<li>Pierwsza pozycja listy wypunktowanej</li>

<li>Druga pozycja listy wypunktowanej</li>

<li>Trzecia pozycja listy wypunktowanej</li>

</ul>

Otrzymujemy:

Pierwsza pozycja listy wypunktowanej
Druga pozycja listy wypunktowanej
Trzecia pozycja listy wypunktowanej

Lista numerowana

Drugi typ listy to lista numerowana, która składa się ze znaczników <ol></ol> oraz <li></li>. Przykład:

<ol>

<li>Pierwsza pozycja listy numerowanej</li>

<li>Druga pozycja listy numerowanej</li>

<li>Trzecia pozycja listy numerowanej</li>

</ol>

Otrzymujemy:

Pierwsza pozycja listy numerowanej
Druga pozycja listy numerowanej
Trzecia pozycja listy numerowanej

Lista definicji

Trzeci etap to lista definicji składająca się ze znaczników <dl></dl><dt></dt><dd></dd>.

Przykład

<dl>

<dt>Słowo definiowane</dt>

<dd>Opis słowa definiowanego</dd>

<dt>Kolejne słowo definiowane</dt>

<dd>Opis kolejnego słowa definiowanego</dd>

</dl>

Hiperłącza

Hiperłącza są podstawą witryn internetowych i całej sieci. Budowa hiperłącza wygląda w uproszczonej postaci następująco:

<a href=”strona.html”>Kliknij tu, by przejść dalej</a>

Znacznikiem odpowiedzialnym za odsyłacze jest <a></a>, a jego obowiązkowym atrybutem jest href=”adres lub nazwa pliku”.

Ma on postać:

<a href=”nazwa_pliku.html”>

<a href=”http://ascomputerlife.com.pl”>

<a href=”http://ascomputerlife.com.pl/nazwa_pliku.html”>

To pierwsza część odsyłacza, która określa dokąd się przeniesiemy, teraz opiszemy odsyłacz, by był widoczny dla użytkownika:

<a href=”http://ascomputerlife.com.pl”>Strona o tematyce IT</a>. Znacznik <a></a> należy zawsze zamknąć, gdyż niezamknięcie spowoduje błędy na stronie. Odsyłacz ten możemy odnieść także do:

grafik i obrazków: <a href=”obrazek.gif”>Opis</a>
adresów FTP: <a href=”ftp://ftp.ascomputerlife.com.pl”>Opis</a>
adresów e-mail: <a href=”mailto:imię@nazwisko.pl”>Opis</a>

Odsyłacz do poczty można rozbudować, dzięki czemu możemy narzucić temat wiadomości, np.

<a href=”mailto:imię@nazwisko.pl?Subject=Ocena witryny”>Oceń moją witrynę</a>.

Zdjęcia na stronie i fanpage’u As Computer Life zostały umieszczone legalnie z darmowego banku zdjęć: pixabay.

Tekst „HTML i XHTML – ciąg dalszy” opracowany został przez Adama Stopę w oparciu o źródła:

„HTML i XHTML – Ćwiczenia praktyczne” – Bartosz Danowski.
http://wikipedia.org

Image by Free-Photos from Pixabay