<!-- -->

Komentarze. Kod pomiędzy nimi nie ma zastosowania

<h[1-6]></h[1-6]>

Nagłówek. Powiększa i wyróznia tekst

<p></p>

Akapit. Oddziela blok tekstu od reszty zawartości.

<blockquote></blockquote>

Blok tekstu będący cytatem. Atrybuty:

• cite="" - źródło cytatu

<hr />

Linia pozioma. Uzywana np. do oddzielania sekcji strony

<pre></pre>

Block tekstu preformatowanego. Tzn. tekst bedzie wygladal dokladnie tak jak widnieje w dokumencie HTML, z zachowaniem ilosci spacji, tabulacji itd.

<figure></figure>

Wyznacza elementy strony tworzące logiczną całość np. tabele z cenami wraz z jej podpisem, zdjecie z jego opisem itd. Powiązane znaczniki:

<figcaption></figcaption> - Podpis danej grupy elementow wewnatrz <figure>

<ol></ol>

Lista numerowana. Powiązane znaczniki:

• <li></li> - element listy (wiersz). Uzywany wewnatrz jej.

<ul></ul>

Lista nienumerowana. Powiązane znaczniki:

• <li></li> - element listy (wiersz). Uzywany wewnatrz jej.

<dl></dl>

Lista definicji. Powiązane znaczniki:

• <dt></dt> - pojęcie, termin. Uzywane wewnatrz listy definicji
• <dd></dd> - wyjasnienie pojecia, terminu. Uzywane wewnatrz listy definicji

<div></div>

Sluzy do grupowania znacznikow. Jest to taki "pojemnik" na zawartosc strony. Dzieki niemu mozemu podzielic strone WWW na warstwy. Niezbedny dla arkuszy stylow CSS

<br />

Znak przejscia do nowej linii.

<em></em> i <i></i>

Akcentowanie fragmentu tekstu za pomoca czcionki pochylej

<strong></strong> i <b></b>

Wyroznienie tekstu za pomoca czcionki pogrubionej

<small></small>

Delikatne zmniejszenie czcionki dla danego fragmenu

<cite></cite>

Wyroznienie fragmentu tekstu jako tytulu ksiazki/filmu/dziela.

<q></q>

Wyroznienie fragmentu tekstu jako cytat. Automatycznie dodaje cudzyslowia



Tekst wyswietlony bedzie jako index gorny

<sub><sub>

Tekst wyswietlony bedzie jako index dolny

<code></code>

Sluzy do wyroznienia kodu zrodlowego i zamieszczenia go na stronie

<span></span>

Nie formatuje bezposrednio tekstu. Umozliwia jednak arkuszom styli formatowanie fragmentu tekstu znajdujacego sie miedzy tymi znacznikami

<ins></ins> i <u></u>

Podkreslenie tekstu

<del></del> i <s></s>

Przekreslenie tekstu

<a></a>

Obiekt między tymi znacznikami stanie się linkiem. Moze to byc np. obrazek, tekst itp.. Atrybuty:

• href="" - adres do którego przenosi link
• target="_blank" - link otworzy się w nowej karcie

Przykłady uzycia atrybutu href:

• href="http://adres.com" - link do strony
• href="mailto:adres@gmail.com" - odnośnik do maila
• href="ftp://adres.com" - odnośnik do serwera ftp
• href="news:adres.com" - link do grupy dyskusyjnej
• href="#id-lub-nazwa" - link nie przenosi nas do zadnej innej strony, tylko przewija biezaca strone do elementu oznaczonego atrybutem name="nazwa" lub id="id", np. href="#sekcja1" przeniesie nas do elementu ktoremu nadalismy taki atrybut id="sekcja1" lub name="sekcja1"

Ściezki uzywane w atrybucie href dziela sie na:

• bezwzględne - np. http://andrzej-nowak.cba.pl/index.php - jest to ściezka pełna, działa niezaleznie w jakim katalogu znajduje się dokument biezacy.
• wzgledne - np. katalog1/test.html - podajemy sciezke do pliku wzgledem polozenia dokumentu w ktorym sie znajdujemy. Aby przejsc "katalog wyzej" w drzewie hierarchicznym uzywamy ../, np. href="../index.html"

<table></table>

Sluzy do tworzenia tabeli. Atrybuty:

• border="1" - obramowanie

Powiązane znaczniki:

• <tr></tr> - tworzy wiersz w tabeli. Wewnatrz niego moga znajdowac sie tylko znaczniki <td></td>
• <td></td> - okresla komorke tabeli. Pomiedzy tymi dwoma znacznikami wstawiamy zawartosc komorki

Atrybuty <td></td>:

• rowspan="x" - sluzy scalenia x wierszy w jedna komorke
• colspan="x" - sluzy do scalenia x komorek w jedna

<img />

Sluzy do wstawiania obrazkow do strony. Atrybuty:

• src="" - sciezka do obrazka
• alt="" - tekst alternatywny, wyswietlany gdy z jakiegos powodu nie udalo sie zaladowac obrazka
• width="" - szerokosc obrazka w pikselach
• height="" - wysokosc obrazka w pikselach

<video></video>

Sluzy do zamieszczania filmow na stronie. Atrybuty:

• src="" - sciezka do pliku filmowego
• width="" - szerokosc w pikselach
• height="" - wysokosc w pikselach
• controls="controls" - atrybut dodaje pasek przewijania i przyciski kontroli odtwarzania filmu. Bez tego atrybutu w film nie bedziemy mogli ingerowac
• autoplay="autoplay" - film automatycznie sie wlaczy po zaladowaniu strony
• loop="loop" - film bedzie zapetlony
• preload="preload" - to samo co autoplay, lecz wpierw upewni sie czy film napewno sie zaladowal i jest dostepny

Powiązane znaczniki:

• <source="zrodlo" type="video/format" /> - umieszcza sie go wewnatrz znacznikow <video></video>. Umozliwia dodanie wielu zrodel filmu, a przegladarka sama wybierze najkorzystniejsze zrodlo. Nie mozna uzyc atrybutu src, jesli korzystamy z tego znacznika. Atrybut type="video/format" podkresla jakiego formatu jest zrodlo, np type="video/mp4"

Obslugiwane formaty filmow:

• ogg
• mp4
• Webm

Tekst umieszczony wewnatrz znacznikow <video></video> stanie sie tekstem alternatywnym pelniacym ta sama funkcje jak w przypadku znacznika <img />

<audio></audio>

Służy do osadzania plików dźwiękowych na stronie WWW. Atrybuty:

• src="" - sciezka do pliku dzwiekowego
• controls="controls" - atrybut dodaje pasek przewijania i przyciski kontroli odtwarzania dzwieku. Bez tego atrybutu w odtwarzanie dzwieku nie bedziemy mogli ingerowac
• autoplay="autoplay" - dzwiek automatycznie sie wlaczy po zaladowaniu strony
• loop="loop" - dzwiek bedzie zapetlony
• preload="preload" - to samo co autoplay, lecz wpierw upewni sie czy dzwiek napewno sie zaladowal i jest dostepny

Powiązane znaczniki:

• <source="zrodlo" type="audio/format" /> - umieszcza sie go wewnatrz znacznikow <audio></audio>. Umozliwia dodanie wielu zrodel dzwieku, a przegladarka sama wybierze najkorzystniejsze zrodlo. Nie mozna uzyc atrybutu src, jesli korzystamy z tego znacznika. Atrybut type="audio/format" podkresla jakiego formatu jest zrodlo, np type="audio/mp3"

Obslugiwane formaty filmow:

• ogg
• mp3
• wave

Tekst umieszczony wewnatrz znacznikow <audio></audio> stanie sie tekstem alternatywnym pelniacym ta sama funkcje jak w przypadku znacznika <img />

<embed />

Sluzy do zamieszczania na stronie animacji wykonanych w technologi Adobe Flash. Atrybuty:

• src="" - plik z animacja
• width="" - szerokosc w pikselach
• height="" - wysokosc w pikselach

<iframe></iframe>

Są to "ramki" w ktorych wyswietlana jest zawartość innej strony lub pliku HTML. Uzywane np. do osadzania banerów reklamowychAtrybuty:

• src="" - zrodlo strony ktora ma byc wyswietlana w ramce
• width="" - szerokosc w pikselach
• height="" - wysokosc w pikselach
• name="" - pozwala nadac nazwe, ktora uzywana moze byc w znacznikach <a></a>
• seamless="seamless" - pozwala w taki sposób osadzić ramkę, że stanie się ona częścią dokumentu, a krawędzie i paski przewijania znikną. Niestety przeglądarki Edge, Chrome i Firefox nie potrafią prawidłowo zinterpretować atrybutu seamless.
• srcdoc="zrodlo" - służy do bezpiecznego osadzania potencjalnie niebezpiecznych treści. Dzięki temu znacznikowi strona osadzana znajduję się w "piaskownicy" i nie ma dostepu do systemu operacyjnego.
• sandbox="" - umozliwia ustawienie dodatkowych restrykcji dla treści osadzonych w ramce. Moze przyjąć wartości:
  • allow-top-navigation – umożliwia nawigowanie najwyższego rodzica kontekstu. Z poziomu ramki możemy kontrolować stronę, na której została ona osadzona
  • allow-same-origin – umożliwia traktowanie treści wyświetlanej w osadzonej ramce jako elementu o tym samym pochodzeniu
  • allow-forms – pozwala na działanie formularzy dostępnych na osadzonej stronie
  • allow-scripts – pozwala na działanie skryptów dostępnych na osadzonej stronie.