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 tekstuZwiń 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
- 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"
- 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
- <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
- 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
- <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"
- ogg
- mp4
- Webm
<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
- <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"
- ogg
- mp3
- wave
<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ę