Listy
Listy można podzielić na:
- punktowane
- nieuporządkowane
- definicji
Znaczniki
<ul> - znacznik kontenerowy, tworzy nieuporządkowaną listę
<ol> - znacznik kontenerowy, tworzy uporządkowaną, punktową listę
<dl> - znacznik kontenerowy, tworzy ramy listy definicji
<dd> - znacznik kontenerowy, zawiera definicje
<dt> - znacznik kontenerowy, zawiera wytłumaczenie definicji
<li> - znacznik kontenerowy, tworzy kolejny wierz w liście
Lista nieuporządkowana
Lista uporządkowana
Lista definicji
Listy zagnieżdżone
Możemy również stworzyć listę zagnieżdżoną czyli "listę w liście"
Grafika
Dodawanie grafiki na stronę
Grafika jako tło
Grafika jako odnośnik
Tabele
Znaczniki
<table> - znacznik kontenerowy, tworzy ramy tabeli
<tr> - znacznik kontenerowy, tworzy nowy wierz w tabeli
<td> - znacznik kontenerowy, tworzy nową komórkę
<th> - znacznik kontenerowy, tworzy komórkę nagłówka
<caption> - znacznik kontenerowy, tworzy podpis do tabeli
Atrybuty tabeli
border - ustawia grubość lini tabeli, powinno ustawiać się "1"
colspan - ustala szerokość kolumny
rowspan - ustala wysokość wiersza
Przykłady tabel
Menu poziome
a:hover - wywołuje jakiś efekt po najechaniu kursorem
a:link - wywołuje efekt na nieodwedzonych odnośnikach
a:visited - wywołuje jakiś efekt po odwiedzeniu
Menu pionowe
Menu rozwijane
Formularze
<form> - znacznik kontenerowy, tworzy ramy formularza; może posiadać atrybuty:
- action - określa gdzie przesłać formularz po wypełnieniu
- method - "get/post" określa matodę HTTP na wysyłanie formluarza
- autocomplete - autowypełnianie
- novalidate - określa czy fomrularz nie będzie walidowany po wypełnieniu
<label> - znacznik kontenerowy, tworzy etykietę do pola
<input> - znacznik kontenerowy, tworzy nowe polu w formularzu; może posiadać atrybuty:
- name - określa nazwę dla pola
- type - określa typ pola; możliwe typy:"text", "password", "submit", "tell", "email", "url", "date", "numeber", "range", "color", "checkbox", "radio", "reset"
- value - określa wartość dal niektórych typów pól
- readonly - pole nie ma interaakcji, jest tylko do odczytu
- disabled - pole niedostępne
- maxlength - określa maksymalną ilość znaków
- size - określa wielkość pola
<button> - znacznik kontenerowy, tworzy przycisk ; może posiadać atrybuty:
- type - typ przcisku, przyjmuje wartości "button", "reset", "submit"
<select> - znacznik kontenerowy, tworzy listę wybieraną w formularzu
<optgroup> - znacznik kontenerowy, tworzy grupę opcji
<option> - znacznik kontenerowy, tworzy opcję do wybrania
<fieldset> - znacznik kontenerowy, tworzy obramowanie formularza
<legend> - znacznik kontenerowy, tworzy podpis do formularza
<textarea> - znacznik kontenerowy, tworzy ole do wpisania własnego tekstu; atrybuty:
- rows - określa ilość wierszy
- cols - określa ilość kolumn
- placeholder - określa tekst, który jest wpisany domyślnie
- required - oznacza że pole jest wymagane do uzupełnienia
<datalist> - znacznik kontenerowy, tworzy listę wybieraną z możliwośćią wpisywania tekstu
Multimedia
<audio> - znacznik kontenerowy, pozwala dodać pliki dźwiękowe
<source> - znacznik kontenerowy, określa źródło pliku i jego format
Możliwe atrybuty:
- controls - dodaje kontrolki do sterowania dźwiękiem
- autoplay - odtwarza się przy wejściu
- loop - zapętla się
- preload - odtwarza się po załadowaniu całje strony
<video> - znacznik kontenerowy, pozwala dodać pliki video
Gradienty
Animacje
Tworzenie animacji
@keyframes nazwa - definiuje animacje
animation: nazwa (czas)s - przypisuje animacje i określa jej czas
Animacja
Tekst na maszynie
Stworzony przy pomocy W3schools