Lekcja 1

<!-- -->

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

<sup></sup>

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
Zwiń lekcję

Lekcja 2

<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
Zwiń lekcję

Lekcja 3

<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.
Zwiń lekcję