Znaczniki i atrybuty HTML

Znaczniki i atrybuty HTML

Strony internetowe to dokumenty tekstowe tworzone przy wykorzystaniu języka HTML. Przy ich tworzeniu wymagane jest stosowanie się do ogólnie przyjętych reguł jego składni.



Pojęcie i budowa znacznika

Stronę www tworzy się, wykorzystując do tego celu znaczniki (ang. tagi). Każdy znacznik, który należy pisać małymi literami, zamknięty jest w tzw. ostrych nawiasach <>. Większość znaczników ma atrybuty, a atrybut posiada określoną wartość, tj.: <znacznik atrybut=”wartość”> tekst </znacznik>. Dodatkowo należy pamiętać, że znaczniki możemy zagnieżdżać, np.:<p>Język HTML pozwala zagnieżdżać <b>znaczniki</b></p>

Znaczniki dzieli się na:

  • posiadające parę: taki znacznik składa się ze znacznika otwierającego  i znacznika zamykającego, np. <p> tekst </p>
  • nieposiadające pary: taki znacznik posiada znacznik otwierający – nie ma znacznika zamykającego, np. <hr>

Ponadto w składni HTML stosuje się:

  • znaki specjalne, np. &nbsp (wstawienie twardej spacji)
  • komentarze, np. <!– To jest komentarz –>

Początek dokumentu

Budowa dokumentu HTML

Każdy prawidłowo zbudowany dokument HTML posiada następujące elementy:

  • deklarację dokumentu – DOCTYPE
  • definicję dokumentu – HTML
  • nagłówek dokumentu – HEAD
  • treść dokumentu – BODY

Deklarację typu dokumentu przedstawia się przez określenie standardu DTD (ang. Document Type Definition), w jakim tworzona jest strona internetowa. W specyfikacji HTML5 zapis ten jest ograniczony do wpisu <!DOCTYPE html>.

Definicja dokumentu przedstawia w jakim języku napisano stronę. Najczęściej używa się znacznika <html>. Bywa że stosuje się dodatkowy parametr określający typ języka lub regionalne ustawienia, np. <html lang=”pl-PL”> (dwie małe litery są deklaracją używanego języka, a kolejne dwie wielkie litery są deklaracją kraju, w którym tego języka się używa).

Nagłówek dokumentu zawiera informacje o stronie. Dane te nie są wyświetlane w oknie przeglądarki. Do najczęściej stosowanych znaczników należą:

  • <title> – tytuł strony
  • <style> – definiuje wewnętrzne arkusze stylów
  • <link> – odsyłacz do innego dokumentu html
  • <meta> – zawiera szczegółowe informacje o stronie, np. kodowanie, słowa kluczowe.

Podczas tworzenia dokumentu www należy pamiętać, aby tekst strony został wyświetlony w sposób prawidłowy. Dlatego też w znaczniku <meta> należy umieścić atrybut charset z odpowiednią wartością. Najczęściej wykorzystuje się wartość utf-8, który określa kodowanie polskich znaków.

Treść dokumentu to fragment strony, który znajduje się pomiędzy znacznikami <body> </body>.  To tutaj umieszczamy teksty i multimedia przeznaczone dla użytkowników witryny.

Początek dokumentu

Specyfikacja HTML 5

W specyfikacji języka HTML 5 wprowadzono liczne zmiany w stosunku do wcześniejszej specyfikacji HTML 4.01. Do najważniejszych należą:

  • wyodrębnienie znaczników odpowiedzialnych za podział strony
  • wprowadzenie nowych atrybutów znaczników do tworzenia formularzy
  • obsługa grafiki przy wykorzystaniu skryptów (canvas)
  • obsługa multimediów bez dodatkowych wtyczek (<audio>, <video>)

Początek dokumentu

Formatowanie tekstu w HTML 5

HTML 5 nie posiada mechanizmów odpowiedzialnych za elementy prezentacyjne – prezentacją treści strony zajmuje się całkowicie CSS. Nie mniej pozwala korzystać ze znaczników odpowiedzialnych za proste formatowanie tekstu i są to:

Znacznik Opis
pogrubienie <b> </b>
kursywa <i> </i>
podkreślenie <u> </u>
przekreślenie <s> </s>
podświetlenie <mark> </mark>
definiowanie czcionki <font> </font>
wyróżnienie tekstu <em> </em>
indeks dolny <sub> </sub>
indeks górny <sup> </sup>
czcionka mocno pogrubiona <strong> </strong>
znacznik definicji <dfn> </dfn>
tekst pisany czcionką zmieszoną o 1 <small> </small>
tekst pisany czcionką zwiększoną o 1 <big> </big>

Początek dokumentu

Znaki specjalne

Tworząc zawartość strony internetowej wymagane jest czasem użycie tzw. znaków specjalnych (np. paragrafu, niełamiącej się spacji). Znaki tai można wprowadzić do dokumentu HTML pod trzema różnymi postaciami: kodu dziesiętnego, kodu szesnastkowego i nazwy własnej. Poniżej znaki najczęściej wykorzystywane:

Nazwa Opis Kod dziesiętny Kod szesnastkowy
&nbsp; twarda spacja &#160; &#xA0;
&sec; paragraf &#167; &#xA7;
&euro; znak euro &#8364; &#x20AC;
&lt; mniejszy niż &#60; &#x3C;
&gt; większy niż &#62 &#x3E;

Początek dokumentu

Elementy blokowe i liniowe

Znaczniki HTML dzieli się na znaczniki liniowe oraz znaczniki blokowe. Znaczniki blokowe tworzą obszar zajmujący całą szerokość okna przeglądarki i nie pozwalają na jej współdzielenie z innymi znacznikami blokowymi. Natomiast elementy liniowe takiej właściwości nie mają.

Do znaczników blokowych należą:

  • znaczniki nagłówków: <h1></h1>, <h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>
  • znacznik akapitu: <p></p>
  • znacznik linii poziomej: <hr>
  • znacznik końca linii: <br>
  • znacznik bloku preformatowanego: <pre></pre>
  • znacznik bloku cytowanego: <blockquote></blockquote>
  • znacznik blokowy: <div></div>
  • znacznik listy uporządkowanej: <ol></ol>
  • znacznik listy nieuporządkowanej: <ul></ul>
  • znacznik tematycznego grupowania pól formularza: <fieldset></fieldset>
  • znacznik załącznika: <figure></figure>

Do znaczników liniowych należą:

  • znaczniki formatowania czcionek
  • znacznik liniowy: <span></span>
  • znacznik odsyłacza: <a href=””></a>
  • znacznik krótkiego cytatu: <q></q>

Początek dokumentu

Podstawowe znaczniki HTML

 

Znacznik Opis
<h1></h1>…<h6></h6> Znacznik nagłówka dzieli treść strony na odrębne części. Ma sześć stopni: do <h1>  (używa największą czcionkę) do <h6> (używa najmniejszej czcionki)
<p></p> Akapit jest tekstem składającym się zazwyczaj z jednego lub kilku zdań, które są z sobą powiązane i który umieszcza się pomiędzy znacznikami
<br> Znacznik przełamania wiersza  ma za zadanie przenieść tekst do nowej linii, co pozwala kontrolować szerokość wiersza tekstu
<hr> Znacznik linii poziomej jest linią ciągnącą się przez całą szerokość okna przeglądarki
<pre></pre> Znacznik bloku preformatowanego to znacznik, który zachowuje podczas wyświetlania w przeglądarce internetowej wszystkie spacje, tabulacje i łamania wiersza
<ol></ol> Znacznik listy uporządkowanej i aby utworzyć wykaz należy wewnątrz znacznika zastosować znaczniki <li>…</li>. Znacznik ten ma atrybut type, który określa rodzaj punktora:

  • A – numerowanie wg wielkich liter
  • a – numerowanie wg małych liter
  • I – numerowanie wg wielkich liczebników rzymskich
  • i – numerowanie wg małych liczebników rzymskich
  • 1 – numerowanie wg liczebników arabskich (wartość domyślna)

Dla znacznika można zastosować atrybut start, który określa wartość, od której ma rozpoczynać się numerowanie listy. Dodatkowo znacznik <li> ma atrybut value, który umożliwia określenie wartości wybranego znacznika.

<ul></ul> Znacznik listy nieuporządkowanej i aby utworzyć wykaz należy wewnątrz znacznika zastosować znaczniki <li>…</li>. Znacznik ten ma atrybut type, który może przyjmować wartości:

  • disc (domyślna wartość)
  • circle
  • square
<a></a> Znacznik odsyłacza to znacznik, który tworzy połączenie umożliwiające przejście do innej strony www lub pliku. Najczęstszym atrybutem tego znacznika jest href, który określa położenie dokumentu, ale również umożliwia utworzenie odsyłacza do skrzynki e-mail: <a href=”mailto:kowalski@poczta.pl”>Poczta</a>

Odsyłacz pozwala również na utworzenie przejścia pomiędzy elementami na tej samej stronie. W tym celu wartość atrybutu href poprzedzona jest #, np. <a href=”#nazwa”>Opis</a>

<span></span> Znacznik grupowania elementów liniowych takich jak tekst lub grafika. Pozwala na proste przypisanie dla określonej grupy wymaganego stylu

Początek dokumentu

Znaczniki podziału strony

Istotnym etapem tworzenia strony www jest zbudowanie jej struktury z wydzieleniem bloków, które spełniają określoną funkcję. Do tego celu wykorzystuje się w języku HTML 5 znaczniki semantyczne – są one jednoznacznie interpretowane przez przeglądarkę.

Znacznik Opis
<header></header> Znacznik nagłówka; może być wielokrotnie stosowany na stronie (może być zarówno nagłówkiem strony, jak i nagłówkiem określonej części strony)
<section></section> Znacznik sekcji; cześć strony, która zazwyczaj zawiera grupy innych znaczników
<footer></footer> Znacznik stopki; może być stosowany wielokrotnie na stronie
<article></article> Znacznik artykułu
<main></main> Znacznik głównej części strony; umieszcza się w nim najważniejszą część na stronie
<nav></nav>
Znacznik nawigacji; umieszcza się w nim tylko główne menu strony
<details></details> Definiuje interaktywne sekcje widoczne, np. po naciśnięciu na daną pozycję menu

Zawartość pliku index.html i podgląd w przeglądarce

Zawartość pliku style.css

 

Początek dokumentu

Znaczniki tabeli

Tabele służą do przedstawiania zestawień danych. Do jej tworzenia służy wybrany zestaw znaczników. Każdą tabelę rozpoczyna się od znacznika <table></table>. Wewnątrz tych znaczników umieścić należy znacznik wiersza tabeli <tr></tr>, w który zawierać ma znaczniki komórki <td></td>.

Znaczniki Opis
<table></table> Znaczniki określające obszar tabeli
<tr></tr> Znaczniki wiersza tabeli
<td></td> Znaczniki komórki tabeli
<th></th> Znaczniki komórki nagłówkowej
<caption></caption> Tytuł tabeli

Początek dokumentu

Atrybuty znaczników tabeli

Znaczniki tabeli nie zapewniają odpowiednich ustawień obramowania tabeli. Oczekiwane ustawienia uzyskuje się dzięki zastosowaniu odpowiednich atrybutów znaczników.

Znaczniki Opis
colspan Scalenie kolumn (atrybut stosuje się bezpośrednio w kodzie HTML)
rowspan Scalenie wierszy (atrybut stosuje się bezpośrednio w kodzie HTML)
border Rozmiar obramowania <table>, <tr>, <td>
border-collapse
Własność jest używana do stworzenia połączonych obramowań
border-spacing
Własność określa odległość pomiędzy obramowaniami sąsiadujących komórek
width szerokość elementu <table>, <tr>, <td>
height wysokość elementu <table>, <tr>, <td>
background-color kolor wypełnienia

Przykład tabeli  – scalenie wierszy

Zawód Klasa
Technik informatyk I G
II G
III G
Technik programista I P
II P
Technik elektronik I E

Początek dokumentu

Zastosowanie formularzy

Na strona www formularze służą do zbierania i wysyłana danych. Dane takie można przesłać wykorzystując skrypt utworzony po stronie serwera oraz skrypt działający po stronie klienta. Przed wysłaniem formularza dane należy zweryfikować.

Początek dokumentu

Znaczniki formularza

Każdy formularz umieszcza się między znacznikami <form></form>. Podstawowe znaczniki formularza zawiera poniższa tabela i są to:

Znaczniki Opis
<input> znacznik pola formularza
<select> znacznik listy rozwijanej
<textarea> znacznik pola tekstowego formularz
<fieldset> znacznik obramowania pól formularza
<legend> znacznik opisu pól formularza
<label> znacznik etykiety pola dla znacznika <input>

Początek dokumentu

Przesyłanie formularza

Do przesyłania formularza służą dwie metody: GET i POST. Metoda GET jest wykorzystywana do jawnego przesyłania informacji (metoda domyślna dla formularza). Służy do wysyłania krótkich, mniej istotnych danych. Metodę POST wykorzystuje się do przesyłania m.in. danych uwierzytelniających lub plików.

Początek dokumentu

Typy znacznika <input>

Znacznik <input> posiada atrybut type, który definiuje rodzaj tego pola formularza. Atrybut ten może posiadać wartości takie jak:

  • <input type=”text”> – pole tekstowe
  • <input type=”number”> – pole służy do wprowadzania liczb
  • <input type=”password”> – pole hasła
  • <input type=”radio”> – pole wyboru jednej opcji
  • <input type=”checkbox”> – pole wyboru wielu opcji
  • <input type=”submit”> – pole tworzy przycisk do wysłania formularza
  • <input type=”reset”> – pole tworzy przycisk czyszczący pola formularza
  • <input type=”file”> – pole wyboru pliku do przesłania
  • <input type=”hidden”> – pole ukryte
  • <input type=”button”> – pole tworzy przycisk
  • <input type=”date”> – pole daty
  • <input type=”time”> – pole godziny
  • <input type=”week”> – pole wyboru dnia tygodnia (numer dnia i rok)
  • <input type=”month”> – pole wyboru miesiąca (numer miesiąca i rok)
  • <input type=”color”> – pole służy do wyboru koloru
  • <input type=”range”> – pole służy do wyboru liczby z podanego zakresu
  • <input type=”email”> – pole służy do wprowadzania adresu e-mail (musi zawierać znak @)
  • <input type=”url”> – pole służy do wyprowadzania dresu URL (musi rozpoczynać się protokołem, np. http://)
  • <input type=”search”> – pole służy do do wprowadzania szukanego wyrażenia na danej stronie

Nie wszystkie przeglądarki wspierają przedstawione rodzaje pól. Jeśli przeglądarka nie wspiera wybranego typu pola, to w takim przypadku pole zostanie przedstawione jako pole tekstowe.

Dodatkowo znacznik <input> może posiadać atrybuty:

  • value – określa wartość pola formularza
  • disabled – oznacza, że pole jest wyłączone

Przykład formularza

Początek dokumentu