HTML I CSS

Technologie internetowe
Strony internetowe to podstawa internetu, a wszystkie one są zbudowane z trzech podstawowych technologii.
 HTML - odpowiada za wypełnienie strony internetowej treścią, za strukturę i zawartość.
 CSS - jest używana do projektowania i pozycjonowania, wygląd zewnętrzny.
 JavaScript - pozwala na dodanie funkcjonału, reakcji na działania użytkownika.
Te podstawowe technologie nie wystarczą do stworzenia strony internetowej. Podczas programowania używane są
edytory kodu, systemy kontroli wersji, buildery, frameworki, biblioteki, hostingi i inne koncepcje, z którymi
koniecznie trzeba się zapoznać.
HTML
HyperText Markup Language (hipertekstowy język znaczników) - język znaczników dokumentów internetowych.
Zestaw reguł do strukturyzowania (znaczników) informacji tekstowej, dodawania zdjęć, tworzenia tabel, formularzy,
list itp.
Dokument HTML - plik tekstowy z rozszerzeniem .html. Dokument oznaczony za pomocą HTML, interpretowany
przez przeglądarkę, dzięki czemu użytkownicy widzą nie kod źródłowy z elementami znaczników, ale ostateczny
wynik przetwarzania - stronę internetową.
Popularność HTML i jego wykorzystanie jako podstawy kodowania stron internetowych doprowadziły do potrzeby
tworzenia, utrzymywania i rozwijania standardów. Teraz tym się zajmuje Web Hypertext Application Technology
Working Group (WHATWG), która pracuje nad specyfikacją HTML Living Standard.
Znaczniki i atrybuty
Znacznik (tag) — element hipertekstowego języka znaczników. To jest najmniejszy element składowy każdej strony
internetowej. Każdy tag oznacza jakąś jednostkę: nagłówek, listę, akapit tekstu, obraz.
Aby zaznaczyć znaczniki w tekście dokumentu, stosowane są nawiasy ostre, w których jest określona nazwa
znacznika i jego atrybuty.
<nazwa_znacznika>...</nazwa_znacznika>
Znacznik otwierający wskazuje, gdzie zaczyna się element, a znacznik zamykający gdzie kończy się. Znacznik
zamykający jest tworzony przez dodanie ukośnika (/) przed nazwą znacznika. Zawartość znacznika – treść – znajduje
się między otwierającym a zamykającym znacznikiem.
Przykłady znaczników.
<section>Sekcja</section>
<p>Akapit</p>
<a>Link</a>
<button>Przycisk</button>
Komentarze
Komentarze służą do tego, żeby pozostawiać objaśnienia, uwagi w kodzie źródłowym, tymczasowo skomentować
fragment kodu itp.

<p>To jest akapit tekstu, on będzie wyświetlany na stronie.</p>

Atrybuty
Atrybuty to dodatkowe ustawienia znaczników, za pomocą których można zmieniać właściwości i zachowanie
elementu. Każdy znacznik ma obowiązkowe i nieobowiązkowe atrybuty, może ich być kilka lub nie być wcale.
Atrybuty są zapisywane wewnątrz znacznika otwierającego, a ich wartości znajdują się w podwójnych cudzysłowach.
Kilka atrybutów oddzielamy spacją.
<a href="https://google.com" class="link">...</a>
<img src="cat.jpg" alt="cute cat" />
<input type="text" name="user_name" />
<button type="submit">...</button>
<p class="text">...</p>
Przyjrzyjmy się niektórym atrybutom znaczników <a>.
<a href="http://google.com" target="_blank" title="Wyszukiwarka internetowa Google">

Google.com
</a>
 href - adres strony, na którą przejdzie użytkownik po kliknięciu w tekst linku.
 target - wskazuje, w której zakładce strona zostanie otwarta po kliknięciu w link.
 title - dodaje podpowiedź do tekstu linku.
Przyjrzyjmy się niektórym atrybutom znaczników <img>.
<img
src="https://picsum.photos/640/480"
alt="Dowolny obraz z generatora"
/>
 src - adres obrazka.
 alt - tekst alternatywny, który będzie wyświetlony, jeśli obraz nie zostanie załadowany.
Pomocne
Aby poznać dostępne atrybuty znaczników oraz ich przeznaczenie, można przejść do dokumentacji lub
przewodników, na przykład htmlreference.io.
Znaczniki sparowane
Składają się z otwierających i zamykających znaczników, które zawijają treść, umożliwiając zmianę jego właściwości
lub sposobu wyświetlania, grupowanie według znaczenia. Wewnątrz sparowanych znaczników można zagnieżdżać
inne znaczniki, podobnie do matrioszki.


<article>
<h1>Krótko o znacznikach sparowanych</h1>
<p>
Większość znaczników jest sparowana. Ich zawartość znajduje się między znacznikiem
otwierającym a zamykającym.
</p>
</article>
Znaczniki pojedyncze
Składają się tylko z znacznika otwierającego, nie zawierają treści tekstowej i otrzymują treść lub zachowanie na
podstawie atrybutów. Służy do zmiany właściwości dokumentu, połączenia plików itp.


<meta charset="utf-8" />


<input type="text" />


<img src="cat.jpg" alt="cool cat" />
Interesująco
W poprzednich standardach HTML pojedyncze znaczniki były koniecznie zapisywane z odwrotnym ukośnikiem /
przed nawiasem zamykającym. Na przykład <img /> albo <input />. W nowoczesnym standardzie jest to opcjonalne i
na nic nie wpływa.
Zagnieżdżanie znaczników
Zgodnie z pewnymi zasadami znaczniki można zagnieżdżać w sobie. Podczas zagnieżdżania kolejność ich zamykania
należy zachować zgodnie z zasadą matrioszki.
<znacznik1>
<znacznik2>
<znacznik4>...</znacznik4>
</znacznik2>
<znacznik3>
</znacznik3>
</znacznik1>
Oto są ważne znaczniki akapitu z linkiem i zaznaczonym tekstem, a także lista zalet wraz z opisem.
<p>
<a href="squoosh.app">Squoosh</a> - serwis <em>optymalizacja</em> obrazków.
</p>
<p>Zalety</p>
<ul>
<li>Działa w przeglądarce</li>
<li>Nie ładuje systemu</li>
<li>Wygodny interfejs</li>
</ul>
Ale ta wersja ma problemy (wiersze są podświetlone).


<p><a href="squoosh.app">Squoosh</a> - serwis <em></a>optymalizacja</p> obrazków.</em>


<ul>
<p>Zalety</p>
</ul>
Specyfikacja HTML
Specyfikacja HTML Living Standard - główny dokument opisujący standardy, możliwości i przyszły rozwój języka
HTML.
Aby przestudiować layout, przede wszystkim są ważne sekcje opisujące jakie są rodzaje elementów, co oznacza każdy
z nich , oraz rozumienie tego, jak można je zagnieżdżać w sobie.
Pomocne
Element HTML -jest to termin opisujący pewną semantyczną całość w standardzie HTML. Na przykład akapit,
nagłówek, listę lub link. W dokumencie HTML element jest reprezentowany przez znacznik (sparowany lub
pojedynczy) – składnię języka HTML.
Zagnieżdżanie znaczników
Algorytm określania czy znacznik można zagnieżdżać jest dość prosty.
 Sięgamy po specyfikację i znajdujemy potrzebny element.
 Sprawdzamy model treści elementu(Content model), do którego zagnieżdżamy.
 Sprawdzamy kategorie elementu (Categories), który zagnieżdżamy.
 Jeśli kategoria jest odpowiednia, a ograniczenia nie zabraniają, można zagnieżdżać, inaczej jest niemożliwe.
Po kilku dniach używania HTML przyzwyczaicie się do prawidłowego zagnieżdżania elementów w sobie, ponieważ
zasady zagnieżdżania będą intuicyjnie zrozumiałe po zapoznaniu się z głównymi znacznikami.
Szkielet dokumentu HTML

Dokument HTML składa się z „drzewa” znaczników. Poniżej przedstawiony jest wymagany minimalny
zestaw znaczników, który służy jako podstawa dla dowolnego dokumentu HTML, podobnie do fundamentu
dla domu.
<!DOCTYPE html>
<html lang="ru">
<head>

</head>
<body>

</body>
</html>
Deklaracja typu dokumentu

<!DOCTYPE > - to nie jest znacznik, ale obowiązkowa deklaracja typu dokumentu. Jest potrzebna, aby
poinformować przeglądarkę, w której wersji HTML jest napisany dokument.
Na podstawie DOCTYPE przeglądarka określa wersję HTML i poprawnie wyświetla stronę. Deklaracja
typu dokumentu powinna być pierwszą rzeczą, którą przeglądarka widzi podczas przetwarzania dokumentu
HTML.

<!DOCTYPE html>
Interesująco
Wcześniej HTML miał wersje, najnowsza to HTML5. Teraz HTML Living Standard jest to jedyna
specyfikacja HTML, w której wersje zostały porzucone, ona po prostu aktualizuje się. Jeśli mówią o
HTML5, oznacza to to samo, co „nowoczesny HTML” lub HTML Living Standard, tylko krócej.
Elementy najwyższego poziomu

Mają one na celu stworzenie podstawowej struktury strony internetowej oraz określenie sekcji nagłówka i
ciała dokumentu.
Znacznik <html>
Główny element dokumentu jest jako kontener, który zawiera całą zawartość strony. Nic poza nim nie jest
postrzegane przez przeglądarkę jako kod HTML i nie jest przetwarzane.
<!DOCTYPE html>
<html lang="ru"></html>
Atrybut lang wskazuje na to, w jakim języku napisany jest tekst strony. Jest to wymagane w przypadku
technologii asystujących, takich jak czytniki ekranu itp.
Znacznik <head>
Przeznaczony do przechowywania informacji serwisowych o stronie: nagłówek, opis, kodowanie itp.

Wszystkie te informacje nie są wyświetlane w oknie przeglądarki, ale zawierają dane, które mówią
przeglądarce, jak trzeba przetwarzać stronę.
<!DOCTYPE html>
<html lang="ru">
<head>
</head>
</html>
Znacznik <body>
Zawiera treść przyszłej strony internetowej. Treść, która ma być wyświetlana na stronie, powinna znajdować
się wewnątrz tego znacznika.
<!DOCTYPE html>
<html lang="ru">
<head>
</head>
<body>
</body>
</html>
Znaczniki nagłówków dokumentów

Grupa znaczników serwisowych, które znajdują się w nagłówku dokumentu. Większość z nich nie jest
wyświetlana bezpośrednio w oknie przeglądarki.
Nagłówek strony
Tekst umieszczony wewnątrz znacznika <title> jest wyświetlany w zakładce przeglądarki. Długość
nagłówka nie powinna przekraczać 60 znaków, aby całkowicie zmieścić się w nagłówku. Tekst nagłówka
powinien zawierać krótki opis treści strony internetowej.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>HTML5 to proste!</title>
</head>
<body>
</body>
</html>
Metadane
Znacznik <meta> służy do przechowywania informacji przeznaczonych dla przeglądarki i wyszukiwarek:

ustawienia kodowania dokumentu, przesyłania informacji do wyszukiwarek i wiele innych. Może istnieć
kilka meta znaczników, ponieważ w zależności od użytych atrybutów niosą one różne informacje
Aby przeglądarka poprawnie wyświetlała tekst, należy wskazać kodowanie strony. Jeśli nie zostanie to
zrobione lub podać nieprawidłowe kodowanie, zamiast znaków przeglądarka może wyświetlać hieroglify.
<!DOCTYPE html>
<html lang="ru">
<head>

</head>
<body>
</body>
</html>
Krótki opis zawartości pomaga wyszukiwarkom lepiej indeksować stronę.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="description" content="Nauka podstaw HTML5 dla początkujących" />
</head>
<body>
</body>
</html>
Meta znaczniki, które rozumie Google
Układ dokumentów
Układ to pionowa i pozioma kolejność wyświetlania elementów na stronie. Układ przebiega pionowo od
góry do dołu i domyślnie elementy są wyświetlane na stronie w takiej kolejności, w jakiej są one wskazane
w dokumencie HTML. Poziomo układ przebiega od strony lewej do prawej (lub od prawej do lewej dla
krajów wschodnich).
Wszystkie elementy bez wyjątku to prostokątne obszary, które zajmują określone miejsce w tak zwanych
„liniach”, jak słowa zdania na kartce w linie. Są dwa główne typy elementów - blokowe i liniowe.

<p>Element blokowy 1</p>


<a href="">Element liniowy 1</a>
Element blokowy (block-level element) - zajmuje całą linię, niezależnie od rozmiaru jej zawartości,
dlatego kilka elementów blokowych wizualnie idzie za sobą od góry do dołu.
Element liniowy (inline element) - zajmuje miejsce zgodnie z zawartością, dlatego kilka elementów
liniowych może znajdować się w tej samej linii. Jeśli w linii nie ma wystarczającej ilości miejsca, aby
zmieścić element liniowy, jest on przenoszony do nowej.
Semantyka
Znaczniki przyszłej strony internetowej powinny mieć sens, jak strona gazety lub magazynu. Strona zawiera
sekcje, nagłówki, listy, obrazki, akapity tekstu itd. Aby opisać całe bogactwo gatunkowe treści, są
odpowiednie znaczniki. Oznacza to, że semantyka jest pierwotnie częścią kodu HTML, ale ona jest
bezużyteczna, jeśli jest nieprawidłowo zrealizowana.
Znaczniki semantyczne - podejście do tworzenia znaczników HTML na podstawie używania znaczników

zgodnie z ich przeznaczeniem w oparciu o specyfikację oraz odpowiednie typy oznaczanych treści.
W większości przypadków znaczniki semantyczne to po prostu użycie zdrowego rozsądku. Zaznaczając

akapit tekstu, używamy znacznika <p>, żeby oznaczyć link jest znacznik <a>, obraz z treścią jest
reprezentowany przez tag <img> itp.
Czyli znaczniki semantyczne oznaczają, że znaczniki nie są wybierane na podstawie tego, w jaki sposób
one są wyświetlane w przeglądarce, one są dobierane na podstawie rodzaju i struktury zaznaczanych treści.
Znaczniki tekstowe
Akapit
Znacznik <p> - uniwersalny pojemnik do grupowania małych elementów frazowych, oddzielania ich od
siebie i dalszej stylizacji. Domyślnie akapit jest elementem blokowym, to znaczy, że on zaczyna się w nowej
linii i ma dopełnienie pionowe, które można zmienić w CSS.
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eligendi, a
eaque, esse itaque porro non exercitationem odio earum quos perferendis!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, totam velit
asperiores non temporibus ut nisi minima?
</p>
Często konieczne jest wypełnienie znacznika pustym tekstem, w przypadku, gdy sam tekst, który zostanie
umieszczony w serwisie, nie będzie jeszcze dostępny. Aby to zrobić, używa się specjalnego symbolu
zastępczego.
Pomocne
W edytorze VSCode, w dokumencie HTML można wpisać kod lorem10, następnie nacisnąć klawisz Tab.
Stworzy to tablicę tekstową składającą się z 10 słów. Zamiast 10 można wpisać dowolną liczbę.
Nagłówki
Grupa znaczników<h1>...<h6> - definiuje nagłówki tekstowe sekcji semantycznych różnych poziomów,
które wskazują znaczenie sekcji treści znajdującej się po nich. Jest to narzędzie do strukturyzacji treści
tekstowych.
Znacznik <h1> jest najczęściej używany tylko raz, jako nagłówek strony głównej. Reszta nagłówków może
być używana tyle razy, ile się chce, ale one zawsze powinny być używane poprawnie, zgodnie z hierarchią.
Listy
Listy pozwalają uporządkować kolekcje i zaprezentować je w sposób wizualny i wygodny dla użytkownika.
Lista to kontener, którego elementami podrzędnymi mogą być tylko elementy listy, znaczniki <li>.
Znacznik <ol> - tworzy listę numerowaną (uporządkowaną), to znaczy każdy element listy jest
numerowany. Przeglądarka automatycznie numeruje elementy w kolejności, a jeśli usunąć jeden lub więcej
elementów takiej listy, pozostałe numery zostaną automatycznie przeliczone. Numerację elementów można
kontrolować za pomocą specjalnych atrybutów listy.
Służy do wyświetlania działań w określonej kolejności, takich jak przepis.
<h1>Jak zaparzyć herbatę</h1>

<p>
Szczegółowe instrukcje dla opornych, po prostu powtórz, a odniesiesz sukces!
</p>
<ol>
<li>Zagotować wodę</li>
<li>Wsypać herbatę do kubka</li>
<li>Wlać wrzątek do kubka</li>
<li>Czekać 10 minut, po czym można pić</li>
</ol>
Znacznik <ul> - tworzy listę wypunktowaną (nieuporządkowaną), której każdy element zaczyna się od
małego znaku (punktora). Dzięki CSS punktor można usunąć lub zastąpić.
Służy do umieszczania zestawu w dowolnej kolejności, na przykład listy kurortów.
<h1>Najgorętsze kurorty</h1>
<p>Eksperci zalecają odwiedzenie w tym roku następujących lokalizacji.</p>
<ul>
<li>Tunezja</li>
<li>Turcja</li>
<li>Grecja</li>
<li>Egipt</li>
</ul>
Listy zagnieżdżone
Tworzenie listy wielopoziomowej jest proste - umieszczamy jeszcze jedną listę w element listy. Jest to
często używane do tworzenia menu wielopoziomowych.
<ul>
<li>
Komputery i akcesoria
<ul>
<li>Procesory</li>
<li>Monitory</li>
<li>Karty graficzne</li>
</ul>
</li>
<li>
Artykuły gospodarstwa domowego
<ul>
<li>Lodówki</li>
<li>Telewizory</li>
<li>Pralki</li>
</ul>
</li>
<li>
Sprzęty gospodarstwa domowego
<ul>
<li>Fotele</li>
<li>Materace</li>
<li>Kominki elektryczne</li>
</ul>
</li>
</ul>
Link
Znacznik <a> - służy do tworzenia linków, tekstu, po kliknięciu którego przechodzimy do innej strony,
ściągamy plik itp. Tekst linku jest wyświetlany w przeglądarce z podkreśleniem, kolor czcionki jest
niebieski, po najechaniu na link kursor myszy zmienia widok.
Adres linku jest określony w wymaganym atrybuciehref="adres". Adres to URL, który może wskazywać
stronę, plik, dowolny zasób.
<a href="https://google.com">Link do strony głównej Google</a>
Atrybuty target i rel
Domyślnie link otwiera się w bieżącej zakładce przeglądarki. Atrybut target="wartość" określa, w której
zakładce ma zostać otwarty dokument, do którego prowadzi link. Jeśli wartość _blank, to strona otworzy się
na nowej karcie przeglądarki.
Atrybut rel uzupełnia atrybut href o informacje o relacji między bieżącym dokumentem a połączonym, i
jest używany w połączeniu z atrybutem target="_blank".


<a href="https://www.facebook.com/">Facebook</a>


<a href="https://www.facebook.com/" target="_blank" rel="noreferrer noopener">
Facebook
</a>
Atrybut download
Jeśli w href linku ścieżka do pliku jest określona, przeglądarka spróbuje go otworzyć w bieżącym oknie,
jeśli potrafi przetwarzać pliki tego typu. Zwykle dzieje się tak w przypadku obrazków i plików PDF.
Atrybut download="nazwa pliku" informuje przeglądarkę, że określony zasób nie powinien być
otwierany, ale ładowany w momencie kliknięcia linku przez użytkownika. Wartość atrybutu określa nazwę
wczytywanego pliku, czyli można zmienić nazwę podczas pobierania. Atrybutu można użyć bez określania
wartości, wtedy będzie użyta nazwa oryginalnego pliku.


<a href="/ścieżka/к/cv.pdf" download>Pobierz CV</a>
Wartości specjalne href
Linki umożliwiają nie tylko przejście do innych stron i pobieranie plików, ale także wykonywanie połączeń
telefonicznych, wysyłanie wiadomości czy wykonywanie połączeń przez Skype.


<a href="tel:+14251234563">+1 (425) 123-45-63</a>


<a href="mailto:example@mail.ru">example@mail.ru</a>
Link do zakotwiczenia
Link do zakotwiczenia służy do tworzenia nawigacji na bieżącej stronie. Na przykład, aby szybko przejść do
jakiejś sekcji (jak w tych materiałach). Po kliknięciu takiego linku przeglądarka przewinie stronę do
zakotwiczenia, bez jej ponownego ładowania.
Aby utworzyć link do zakotwiczenia, trzeba dodać do znacznika, do którego chcemy przewinąć stronę,
atrybut id - unikalny identyfikator. Natomiast atrybutowi href w linku ustawić wartość zaczynającą się od
znaku #, po którym jest wskazany identyfikator elementu.
Przycisk
Element interaktywny, który ożywia się za pomocą JavaScript. Na przykład przycisk do otwierania i
zamykania wyskakującego okienka, przełączania menu mobilnego lub przesyłania formularza. Musi być
wyraźnie określony atrybut type. Jego wartość domyślna to - submit, ale najczęściej potrzebujemy wartości
button. Tak, przycisk typu „przycisk”, taka osobliwość.
<button type="button">Otwórz okno modalne</button>
Atrybut lang
Jeśli strona zawiera tekst w różnych językach, aby zrobić go bardziej dostępnym dla technologii
asystujących, można ustawić atrybut lang nie tylko dla całego dokumentu, ale także dla poszczególnych
znaczników.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="description" content="Instrukcja obsługi ciasteczek" />
<title>Ciasteczka są smaczne!</title>
</head>
<body>
<p>Instrukcja obsługi</p>
<p lang="en">Operating instructions</p>
<p lang="fr">Manuel d'utilisation</p>
</body>
</html>
Obrazki
Zastosowanie grafiki sprawia, że strony internetowe są bardziej atrakcyjne wizualnie. Obrazki pomagają
lepiej przekazać istotę i treść dokumentu. Znacznik <img> jest przeznaczony do oznaczania obrazków w
różnych formatach graficznych.
<img
src="https://images.pexels.com/photos/67112/pexels-photo-67112.jpeg"
alt="Macbook Air na szarym drewnianym stole"
width="400"
/>
 src="ścieżka" - obowiązkowy atrybut, który wskazuje adres obrazka. Ścieżka dostępu do obrazka
może być bezwzględna lub względna.
 alt="opis" - obowiązkowy atrybut, alternatywny opis.
 width="wartość" i height="wartość" - ustawiają wymiary obrazu w pikselach. Bez zmiany
rozmiaru obraz jest wyświetlany na stronie w oryginalnym rozmiarze. Jeśli ustawić tylko jedną
wartość, przeglądarka automatycznie obliczy drugą, aby zachować proporcje.
Atrybut alt
Jest potrzebny do dostarczania istotnych informacji użytkownikom, którzy nie widzą obrazu (niedowidzący)
lub jeśli obraz nie został załadowany. Tekst alternatywny musi znajdować się w każdym znaczniku <img>.
 Opis powinien zawierać pełne, sformułowane zdanie.

 Tekst alternatywny powinien odpowiadać na pytanie „Co jest pokazane na obrazku?” -Opis
powinien być unikalny i nie powinien powtarzać tego, co już jest w tekście tego obrazu.
 W opisie nie musisz używać słów „obraz” czy „ilustracja”, jest to oczywiste.
Jeśli treść strony opisuje

historię tych kociąt, wystarczy poniższy opis.
<img src="kittens.jpg" alt="Kocięta" />
W przypadku, gdy mamy tylko galerię zdjęć, bez żadnego opisu tekstowego, konieczne jest
doprecyzowanie, co dokładnie jest pokazane na obrazku.
<img
src="kittens.jpg"
alt="Troje kociąt bawi się na słomie. Dwoje szarych i jedno czarne."
/>
Odsyłacz obrazkowy
Link nie obowiązkowo musi zawierać treść tekstową. Bardzo często, szczególnie w sklepach internetowych,
kliknięcie zdjęcia produktu na liście produktów przekierowuje użytkownika na stronę tego produktu.
Aby utworzyć odsyłacz obrazkowy, trzeba zmienić znacznik <img> na link.
<a href="https://www.pexels.com/photo/animals-sweet-cat-kitty-57416/">
<img
src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?
w=640"
alt="Rudy kot"
width="640"
/>
</a>
Obraz z podpisem
Takie zadanie jest często spotykane w artykułach, w których znajduje się wiele obrazków z objaśnieniami
pod lub nad obrazkiem, na przykład ilustracje, wykresy lub diagramy. Jeśli trzeba oznaczyć znacznikami
obraz z podpisem, można użyć znaczników<img> i akapit <p>. Ale właśnie dla takich zadań istnieją
znaczniki semantyczne <figure> i <figcaption>.
Wewnątrz <figure> umieszczamy znaczniki obrazu i opisu. Znacznik <figcaption> musi być pierwszym
lub ostatnim elementem dzieckiem elementu <figure>.
<figure>

<img src="adres obrazu" alt="tekst alternatywny" />
<figcaption>
Tekst wyjaśnienia, który będzie znajdował się pod obrazem
</figcaption>
</figure>
Ścieżki bezwzględne i względne

Strony internetowe zawierają wiele plików umieszczonych w oddzielnych folderach, aby ułatwić
zarządzanie nimi. Aby utworzyć połączenie między różnymi plikami, na przykład w dokumencie HTML w
celu dołączenia obrazu lub pliku stylu, używane są ścieżki bezwzględne lub względne, które opisują
lokalizację dołączonego pliku.
Ścieżka bezwzględna
Określa dokładną lokalizację pliku w strukturze folderów na serwerze. Bezwzględna ścieżka umożliwia
dostęp do pliku z zasobów zewnętrznych.
https://images.pexels.com/photos/583842/pexels-photo-583842.jpeg
Adresy bezwzględne składają się z co najmniej trzech części: protokołu, nazwy serwera i ścieżki pliku.
 https:// - protokół.
 images.pexels.com - nazwa serwera.
 /photos/583842/pexels-photo-583842.jpeg — ścieżka do pliku obrazu, gdzie «photos» i
«583842» nazwy folderów. Folder «583842» zagnieżdżony w «photos».
Interesująco
Na przykład po kliknięciu w link z tym adresem, przeglądarka otworzy kartę z obrazem, który znajduje się
gdzieś na serwerze w Internecie.
Ścieżka względna
Opisuje ścieżkę do zasobu odnośnie bieżącego pliku. Służy do tworzenia ścieżek do obrazów, plików stylów
lub tworzenia nawigacji do innych stron internetowych, które stwarzacie.
Weźmiemy standardową strukturę plików i folderów projektu.
Żeby w index.html dotrzeć do obrazu logo z folderu images, w atrybucie src należy określić ścieżkę
względną, czyli względną do dokumentu HTML.
<a href="">
<img src="images/logo.png" alt="Logo strony" />
</a>
Znak / oznacza przejście o jeden poziom niżej. Taką ścieżkę przeglądarka dosłownie rozumie, jak: „W
folderze images, na jednym poziomie z bieżącym plikiem index.html, wziąć plik logo.png».
W przyszłości konieczne będzie dołączenie obrazów do pliku stylów. Aby w pliku styles.css dotrzeć do
obrazu logo z folderu images, trzeba określić ścieżkę względną (względem pliku stylów).
background-image: url('../images/logo.png');
Ciąg znaków ../ wskazuje na przejście o jeden folder (poziom) wyżej. Przeglądarka dosłownie rozumie tę
ścieżkę jako: „Przejdź o jeden folder wyżej (wstecz), wejdź do folderu images i weź w nim plik logo.png».
Formaty plików graficznych

Grafika wektorowa będzie się wyświetlać równie dobrze na normalnych ekranach, jak i na ekranach o dużej
gęstości pikseli. Grafika rastrowa, zwłaszcza skompresowana z utratą jakości będzie wyglądać na zamazaną.
Grafika rastrowa
Grafika rastrowa (raster, bitmap) - opis pliku graficznego w postaci tablicy ze współrzędnymi każdego
piksela oraz opisem koloru tego piksela. Jak paleta kolorów o stałym rozmiarze.
Najpopularniejsze rastowe formaty obrazów to:
 JPEG - duże pliki, które nie wymagają przezroczystego tła ani animacji. Ten format jest idealny do
żywych, fotorealistycznych zdjęć, ponieważ mogą one zawierać miliony kolorów.
 PNG - w przeciwieństwie do JPEG ma dodatkowy parametr do opisu przezroczystość (kanał alfa).
Odpowiedni dla obrazów z przezroczystym lub monochromatycznym tłem. Używany do ikonek i
przedmiotów dekoracyjnych. Używany również do obrazów o wysokiej precyzji - zrzutów ekranu,
rysunków, wykresów itp.
 webP - format zastępujący PNG i JPEG, ale nadal z niepełną obsługą w przeglądarkach. Przy tej
samej jakości obrazu skompresowane pliki będą mniejsze niż PNG i JPEG średnio o 25%.
Grafika wektorowa
Grafika wektorowa (SVG, Scalable Vector Graphics) - jest opisywana za pomocą reguł lub równań
definiujących linie, a także dodatkowych właściwości, koloru linii i tła kształtów.
Grafika wektorowa jest idealna do prostych obrazów, które można skalować i zajmują bardzo mało miejsca.
Jednak wraz ze wzrostem złożoności obrazu rozmiar pliku sprawia, że użycie formatu SVG jest
nieopłacalne. Grafika wektorowa zastępuje PNG i służy do tworzenia ikonek, logo, wykresów, grafiki
abstrakcyjnej i elementów dekoracyjnych.
Optymalizacja obrazów
Obrazy stanowią około 90% całkowitej masy zasobów strony, dlatego należy je najpierw zoptymalizować.
W przyszłości do optymalizacji zasobów projektu zostaną zaangażowane specjalne narzędzia, które będą to
robić automatycznie. Ale teraz trzeba myśleć o optymalizacji wagi strony i używać specjalnych usług online
do kompresowania obrazów.
 Squoosh do optymalizacji grafiki rastowej

 SVGOMG do optymalizacji grafiki wektorowej
Trzeba pamiętać, że optymalizacja pliku JPEG prowadzi do utraty jakości obrazu. Dlatego wraz ze
zmniejszeniem wagi obrazu jego wygląd ulegnie pogorszeniu. Optymalizacja formatu JPEG sprowadza się
do znalezienia równowagi między jakością obrazu a wagą.
Progresywny JPEG
Progresywne obrazy JPEG - są to pliki graficzne w formacie JPEG, które zostały zakodowane w taki
sposób, że podczas wyświetlania są ładowane w postaci warstw. Progresywny JPEG wygląda dokładnie tak,
jak zwykłe obrazy JPEG. Różnica polega na sposobie ich wyświetlania podczas uruchamiania.
Zwykłe pliki JPEG są ładowane i renderowane w postaci pasków (linia po linii) od góry do dołu. Dla
użytkownika stwarza to efekt słabej szybkości ładowania strony. Jest to szczególnie widoczne w przypadku
dużych obrazów lub na urządzeniach mobilnych o słabej jakości połączenia sieciowego.
Progresywny JPEG ładowany jest w taki sposób, że cały obraz jest wyświetlany od razu, ale w słabej
jakości, a w trakcie wczytywania jakość stopniowo poprawia się do maksimum.
Z punktu widzenia użytkownika progresywny JPEG zapewnia znacznie przyjemniejsze przeglądanie.

Użytkownik natychmiast otrzymuje pełny obraz zawartości strony.
Tworzenie
Aby zrobić progresywny obraz JPEG, wystarczy użyć specjalnych narzędzi, w tym online. Na przykład
podczas optymalizacji obrazów JPEG w Squoosh, one domyślnie (automatycznie) stają się progresywne.
Znaczniki strukturalne
Istnieje cały zestaw znaczników semantycznych do oznaczania dużych sekcji logicznych i ulepszania
semantyki strukturalnej strony. Każdy z nich może być użyty pod pewnymi warunkami. Wpływa to na
działanie technologii asystujących, indeksowanie strony i jej ranking w wynikach wyszukiwania.
Przesyłanie strumieniowe treści

Znacznik <header>
Nagłówek (header) podkreśla wprowadzającą część całej strony, złożonej sekcji lub artykułu. Zwykle
zawiera logo, nawigację, tekst wprowadzający, złożony nagłówek. Na stronie może być kilka.
<body>

<header>
<a href="/">Logo strony</a>
<ul>
Menu nawigacyjne do innych stron
</ul>
</header>
</body>
Znacznik <footer>
Stopka (footer) to ostatnia część całej strony, jej sekcji lub artykułu. Często zawiera prawa autorskie, listę
linków do sieci społecznościowych, dane kontaktowe i tak dalej. Na stronie może być kilka.
<body>

<header>
<ul>
Menu nawigacyjne do innych stron
</ul>
</header>


<footer>

<p>Wszelkie prawa zastrzeżone ©lpj.dev</p>


<ul>
<li><a href="">Facebook</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Instagram</a></li>
</ul>
</footer>
</body>
Znacznik <main>
Główna (unikalna) treść, która nie powtarza się na innych stronach internetowych. Na stronie może być
tylko jeden.
<body>

<header></header>


<main></main>

<footer></footer>
</body>
Sekcje semantyczne
Znacznik <nav>
Definiuje sekcję głównej nawigacji z linkami do sekcji bieżącej lub innych stron. Używany tylko do
nawigacji głównej, a nie do dowolnej grupy linków w dokumencie
<body>

<header>
<nav>

<ul>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>


<main></main>

<footer>


<ul>
<li><a href="">Facebook</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Instagram</a></li>
</ul>
</footer>
</body>
Znacznik <article>
Niezależna, odłączalna i znacząca część dokumentu. Na przykład post na forum, tweet, artykuł na blogu,
widżet reklamowy, historia na Instagramie, karta produktu w sklepie.
<article>
<h1>Słodkie ciasteczko</h1>
<img src="link do obrazu ciasteczka" alt="ciasteczko" />
<p>
Pyszne pieczone ciasteczka z różnymi nadzieniami: wiśniowym, śliwkowym,
brzoskwiniowym lub truskawkowym.
</p>
<p>Cena: 50 kredytów</p>
</article>
Znacznik section
Duża sekcja, która łączy treści według znaczenia. Nierozłączna z głównym dokumentem. Na przykład
sekcja listy produktów, blok danych osobowych w profilu użytkownika, sekcja danych kontaktowych.
<section>
<h1>Najpopularniejsze ciasteczka w tym tygodniu</h1>

<ul>
<li>Smażone z grzybami</li>
<li>Smażone z mięsem</li>
<li>Smażone z jabłkami</li>
<li>Pieczone z twarogiem</li>
</ul>
</section>
Znacznik <div>
Uniwersalny kontener bez znaczenia semantycznego. Używany jako blok opakowujący do dalszej stylizacji
treści.
Pomocne
Jeśli nie udaje się nadać grupie treści rozsądnej nazwy (nie „prawej kolumny”, ale mającej sens) - jest
to<div> i najprawdopodobniej jest potrzebny po prostu wspólny kontener do stylizacji.
Algorytm wyboru znacznika

Nie tylko początkujący mogą mieć trudności z podjęciem decyzji, którego znacznika użyć do oznaczania
bloku treści w oparciu o jego znaczenie semantyczne. Użyj tego algorytmu, aby wybrać odpowiedni
znacznik.
Oznaczanie strony
Korzystając ze wszystkich rozpatrywanych znaczników, wpiszmy znacznik prostej strony dla początkującej
strony internetowej.
W przykładzie brakuje znaczników szkieletu dokumentu, ponieważ sama platforma interaktywna dodaje go
automatycznie codepen.io. Aby uzyskać pełny obraz, zapiszmy podstawowe znaczniki dokumentu.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Web studio mango.dev</title>
</head>
<body>

</body>
</html>
Walidacja
W kodzie każdy przecinek, cudzysłów i nawias, nazwa atrybutu i znacznika, znacznik otwierający i
zamykający są ważne. Oczy, szczególnie w początkujących, nie mogą za tym wszystkim podążać, więc
został wymyślony walidator.
Walidacja jest potrzebna do wykrywania błędów w składni znaczników dokumentu HTML i rozbieżności ze
specyfikacją HTML określoną w <!DOCTYPE >. Program do tego sprawdzenia nazywany jest walidatorem.
W wyniku walidacji dokument przechodzi walidację lub otrzymuje listę zalecanych poprawek.
Uwaga
Walidatory sprawdzają tylko składnię i specyfikację HTML, a nie semantykę.
Jest specjalna usługa online (walidator) która sprawdza, czy kod dokumentu HTML spełnia standardy.
Aby to sprawdzić, są potrzebne tylko dwa kroki, pierwszy to wysłanie kodu źródłowego do walidatora,
drugi to kliknięcie przycisku do sprawdzania. Można przesłać kod do walidacji, pobierając plik HTML,
przesyłając link do działającej strony internetowej lub kopiując i wklejając cały kod.
Pomocne
Jeśli przekazać tylko oddzielne znaczniki HTML do walidatora, to on zwróci błąd, ponieważ każda strona
musi mieć podstawowy szkielet dokumentu.
Walidator sprawdza następujące punkty.
 Poprawna pisownia znaczników.

 Trafność znaczników i możliwość ich zastosowania w tej wersji HTML.
 Poprawność zamykania i zagnieżdżania znaczników.
 Prawidłowe użycie atrybutów.
<section>

<p><a href="squoosh.app">Squoosh - serwis <em></a>optymalizacji</p> obrazów.</em>


<ul>
<p>Zalety</p>
</ul>
</section>
Jeśli sprawdzimy ten kod w walidatorze (nie zapominając o dodaniu szkieletu dokumentu), otrzymamy
raport - listę błędów i ostrzeżeń. Każdy element listy zawiera wartość, atrybut i element, który nie przeszedł
walidacji, opis problemu oraz cytat z kodu z błędem i numerem wiersza.
Błędy są oznaczone jako Error i muszą zostać naprawione w takiej kolejności, w jakiej są wymienione.
Ostrzeżenia są oznaczone jako Warning, nie ma konieczności ich naprawy, ale jest to powód do
przemyślenia i ponownego rozważania jakości znaczników.
Naprawimy wszystkie błędy walidacji w przykładzie.
<section>
<p>
<a href="squoosh.app">Squoosh</a> - serwis <em>optymalizacji</em> obrazów.
</p>
<p>Zalety</p>
<ul>
</ul>
</section>
Tabele
Tabele pozwalają wyświetlać złożone relacje, umieszczając dowolną zawartość w komórkach. Należy ich
używać tylko do zaznaczania danych tabelarycznych: harmonogram transportu, kalendarz, wyniki meczów,
transakcje finansowe, menu w restauracji, cennik itp. To znaczy informacje, które logicznie można
przedstawić w formie tabelarycznej, na przykład za pomocą Google Sheets.
Pomocne
Elementy tabeli semantycznie opisują dane tabelaryczne, a używanie ich do innych celów stanowi
naruszenie semantyki.
Będziemy wpisywać znaczniki dla tego rozkładu jazdy pociągów.
Tabela to zbiór wierszy z komórkami. Przyjrzyjmy się podstawowym znacznikom.
 <table> - określa całą tabelę, kontener dla zawartości.

 <tr> - wiersz tabeli (table row). Nie może być pusty, musi zawierać co najmniej jedną komórkę.
 <td> - komórka tabeli (table data). Może być używana tylko wewnątrz wiersza. Każdy wiersz tabeli
musi mieć taką samą liczbę komórek.
Oznaczmy znacznikami rozkład jazdy pociągów tabelą z trzema wierszami.
<table>
<tr>
<td>433</td>
<td>Kijów - Kowel</td>
<td>5 godzin</td>
</tr>
<tr>
<td>701</td>
<td>Charków - Dniepr</td>
<td>7 godzin</td>
</tr>
<tr>
<td>258</td>
<td>Lwów - Odessa</td>
<td>4 godziny</td>
</tr>
</table>
Pomocne
Domyślnie tabela nie ma specjalnego formatowania, na przykład tak ciemnej ramki jak na obrazku. W tym
celu używany jest CSS, podobnie jak w przypadku każdego innego formatowania treści.
Komórki nagłówkowe
Aby utworzyć wiersz z nagłówkami kolumn, używamy standardowego znacznika <tr> dla wiersza i
oznaczamy komórki specjalnym znacznikiem <th> (table header) - semantycznym znacznikiem komórki
nagłówkowej. Domyślnie tekst wewnątrz <th> jest zaznaczony pogrubioną czcionką i jest wyśrodkowany.
<table>
<tr>
<th>Numer</th>
<th>Trasa</th>
<th>Czas podróży</th>
</tr>
<tr>
<td>433</td>
<td>5 godzin</td>
</tr>
<tr>
<td>701</td>
<td>7 godzin</td>
</tr>
<tr>
<td>258</td>
<td>4 godziny</td>
</tr>
</table>
Sekcje tabeli
Aby ulepszyć semantykę znaczników tabeli, istnieje kilka znaczników strukturalnych.
 <thead> - nagłówek, który opakowuje grupę wierszy tabeli w obszarze nagłówka.

 <tbody> - ciało, opakowuje główną grupę wierszy tabeli.
 <tfoot> - stopka, oznacza grupę wierszy tabeli w obszarze stopki.
W rozkładzie pociągów można wybrać nagłówek z jednego wiersza z nazwami kolumn i ciało.
<table>
<thead>
<tr>
<th>Numer</th>
<th>Trasa</th>
</tr>
</thead>
<tbody>
<tr>
<td>433</td>
<td>5 godzin</td>
</tr>
<tr>
<td>701</td>
<td>7 godzin</td>
</tr>
<tr>
<td>258</td>
<td>4 godziny</td>
</tr>
</tbody>
</table>
Nagłówek tabeli
Jeśli tabela ma nagłówek, można oczywiście oznaczyć go za pomocą znaczników nagłówka.
<h1>Rozkład jazdy pociągów</h1>

<table>

</table>
Ale byłoby bardziej semantycznie użyć specjalnego znacznika tabeli <caption>, który powinien znajdować
się wewnątrz tabeli jako pierwszy element.
<table>
<caption>
Rozkład jazdy pociągów
</caption>


</table>
Oto przykład wyniku na żywo. W zakładce CSS można zobaczyć style, w których każda z reguł CSS ma
komentarz z wyjaśnieniem.
Łączenie komórek
Niektóre tabele są zrobione tak, że trzeba połączyć kilka komórek poziomo lub pionowo.
Napiszmy znaczniki takiej tabeli dodając dodatkowe komórki, biorąc pod uwagę, że „Usługa w chmurze”
zajmie dwie komórki w pionie, a „Użycie” - trzy w poziomie.
<table>
<thead>
<tr>
<th>Usługa w chmurze</th>
<th>Użycie</th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th>Użytkownicy</th>
<th>Odwiedzenia</th>
<th>Rozmiar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td>12000</td>
<td>307000</td>
<td>1000 Tb</td>
</tr>
<tr>
<td>Amazon</td>
<td>9000</td>
<td>200500</td>
<td>800 Tb</td>
</tr>
</tbody>
</table>
Zwróćcie uwagę na puste znaczniki <th>, każdy wiersz musi mieć taką samą liczbę komórek, więc na razie
zostawimy "dodatkowe" puste. W rezultacie otrzymujemy taką tabelę.
Zasady równej liczby komórek w wierszach i kolumnach nie można cofnąć, ale można ją ominąć. Aby
rozszerzyć komórkę w poziomie, używa się atrybutu colspan, w pionie - rowspan.
Trzeba określić grupę komórek do scalenia, a następnie ustawić atrybut colspan dla najwyższej lewej
komórki w grupie z liczbą komórek do scalenia po prawej stronie i / lub rowspan na dole. Następnie
konieczne jest usunięcie komórek, które stały się niepotrzebne po prawej stronie i / lub na dole.
W naszym zadaniu komórka "Usługa w chmurze" powinna zajmować 2 komórki w pionie, więc dodajemy
do niej rowspan="2" i usuwamy puste <th> w wierszu poniżej. Podobnie z komórką "Użycie" ustawiamy
colspan="3"i usuwamy dwie sąsiednie komórki po prawej stronie w tym wierszu.
<table>
<thead>
<tr>
<th rowspan="2">Usługa w chmurze</th>
<th colspan="3">Użycie</th>
</tr>
<tr>
<th>Użytkownicy</th>
<th>Odwiedzenia</th>
<th>Rozmiar</th>
</tr>
</thead>

</table>
Znaczniki tekstu
Znacznik <dl>
Znacznik <dl> (description list) jest to kontener na listę par terminów i ich opisów, czyli słownik. Istnieje
znacznik <dt> do tagowania terminów i znacznik <dd> do opisów. Służy do zaznaczania (tagowania) listy
definicji, na przykład podczas tworzenia glosariusza, książki telefonicznej itp.
Znacznik <span>
Uniwersalny kontener dla małej zawartości tekstowej, takiej jak pojedyncze słowa, fragmenty słów lub frazy
w tablicy tekstowej. Podobnie jak znacznik <div>, nie ma znaczenia semantycznego i służy do dodatkowej
stylizacji.
<p>
Znacznik <span class="accent">span</span> jest to uniwersalny pojemnik na małą
zawartość tekstową.
</p>
Interesująco
Spanowi z atrybutem class="accent" za pomocą CSS można dodać style, na przykład inny kolor tekstu,
jego rozmiar itp.
Znacznik <pre>
Domyślnie przeglądarka ignoruje podziały wierszy i więcej niż jedną spację z rzędu. Ten znacznik
umożliwia dodanie przeformatowanego tekstu z wymuszonymi znakami końca wiersza. Na przykład
zaznaczanie tekstu piosenki lub wiersza.
Znaczniki <sup> i <sub>

Przeznaczone do wyświetlania znaków w górnym (<sup>, skrót od superscript) i dolnym (<sub>, skrót od
subscript) indeksie. Na przykład do oznaczania prostych wzorów matematycznych lub chemicznych.
Znacznik <time>
Datę i godzinę można zapisać zwykłym tekstem, ale lepiej jest użyć specjalnego znacznika <time>. Data dla
osoby to tekst wewnątrz znacznika, a dla maszyny - wartość atrybutu datetime w formacie ISO 8601.
<p>
Najnowsze wiadomości <time datetime="2019-12-14">14 grudnia 2019 roku</time>.
</p>
<p>
Spotkanie odbyło się o <time datetime="2018-07-14T11:30">11:30 rano</time>.
</p>
Przeglądarka wyświetli tylko tekst wewnątrz znacznika. Osoba zobaczy zrozumiały tekst, a technologie
asystujące odczytają atrybut datetime i uzyskają dokładną wartość w wymaganym formacie.
Znacznik <address>
Przeznaczony do przechowywania danych kontaktowych autora artykułu, bloku informacji lub całej strony
internetowej. Informacje kontaktowe mogą mieć dowolną odpowiednią formę, na przykład adres fizyczny,
adres e-mail, link do strony internetowej, numeru telefonu, znacznik sieci społecznościowej.
<address>
Kijów, <br />
Bulwar Łesi Ukrainki, 26, <br />
Czwarte piętro biuro 427
</address>
<address>
<a href="mailto:mango@mail.pig">mango@mail.pig</a>
<a href="tel:+1112223344">(111) 222-33-44</a>
</address>
Zwróćcie uwagę na znacznik <br>, służy on do oznaczania tablicy tekstu z wymuszonymi podziałami
wierszy w celu wizualnego formatowania. Na przykład zaznaczenie jednego wiersza adresu w kilku
wierszach.
Uwaga
Znacznik <br/> (skrót od line break) nie jest używany do wymuszonego dodawania podziałów wierszy
między znacznikami ani do dzielenia tablicy tekstu na akapity.
Znaczniki <strong> i <b>

Używane do podkreślenia ważnego słowa lub całej frazy w tekście. Wizualnie oba znaczniki pogrubiają
tekst i na pierwszy rzut oka nie ma między nimi różnicy, ale tak nie jest.
Znacznik <strong> semantycznie podkreśla tekst jako ważny i wskazuje, że jest to znaczące słowo lub
fraza. Na przykład zaznaczyć ostrzeżenie lub dowolną część tekstu, na którą użytkownik powinien najpierw
zwrócić uwagę.
<p>
<strong>Uwaga!</strong> Okres subskrypcji dobiega końca.
<strong>Konto zostanie zawieszone.</strong> Odnów subskrypcję lub skontaktuj
się z pomocą techniczną.
</p>
Znacznik <b> (skrót od bold) powoduje, że tekst jest tylko wizualnie pogrubiony, przyciąga uwagę, ale nie
przywiązuje szczególnej wagi.
Interesująco
W przypadku technologii asystujących, takich jak czytnik ekranu, tekst zawinięty w <strong> ma
szczególne znaczenie i będzie dodatkowo wyróżniony intonacją.
Znaczniki <em> i <i>

Używane do akcentowania uwagi na fragmentach tekstu. Wizualnie oba znaczniki sprawiają, że tekst jest
kursywą i na pierwszy rzut oka nie ma między nimi różnicy, ale tak nie jest.
Znacznik <em> (skrót od emphasis) semantycznie podkreśla tekst, na który kładzie się specjalny nacisk,
który zmienia znaczenie frazy. Na przykład można podkreślić sarkazm.
<p>Jak <em>się cieszę</em> gdy wynagrodzenie jest spóźnione!</p>
Znacznik <i> (skrót od italic) sprawia, że tekst jest tylko wizualnie kursywą, zwraca na siebie uwagę, ale
nie przywiązuje szczególnej wagi. Na przykład wydzielić terminy w zdaniu.
Znaki specjalne
Nie wszystkie znaki można wpisać na klawiaturze. Na przykład zastrzeżony znak towarowy ®, znak
handlowy ™, znak praw autorskich ©. Aby wprowadzić takie znaki, używa się znaków specjalnych.
Interesująco
Standard kodowania Unicode zawiera znaki z prawie wszystkich języków świata, a także znaki specjalne i
usługowe. Znaki specjalne to linki-mnemoniki dzięki którym przeglądarka wie, który znak Unicode
wyświetlić.
Znaki specjalne to specjalne wiersze, które przeglądarki konwertują na znaki. Zmiany można dokonać na
kilka sposobów.
 &mnemokod; - wstawianie znaku według jego „mnemokodu”, czyli nazwy

 &#KOD10; - wstawianie znaku za pomocą jego kodu dziesiętnego
 &#xKOD16; - wstawianie znaku za pomocą jego kodu szesnastkowego
Na przykład znak praw autorskich © można dodać w ten sposób.
<p>Wszelkie prawa zastrzeżone © Lex, 2020</p>

Znaki specjalne są używane nie tylko do wstawiania znaków, których nie ma na klawiaturze, ale także do
znaków, które mają specjalne przeznaczenie w HTML. Na przykład, jeśli trzeba wyświetlić na stronie tekst
zawierający znaczniki jako tekst.
<p>Aby uzyskać efekt pogrubienia tekstu, trzeba wydzielić go znacznikami<strong> i

</strong>.</p>
Znak < i > jest częścią składni HTML, otwiera i zamyka znaczniki. Dlatego bezpośrednie wstawienie ich do
kodu strony prowadzi do interpretacji <strong> i </strong> jako znaczników. W tym przypadku zamiast
znaków < i > trzeba użyć znaków specjalnych < i >.
<p>
Aby uzyskać efekt pogrubienia tekstu, trzeba wydzielić go znacznikami <strong>
i </strong>.
</p>
Istnieje oficjalna strona W3C oraz serwis od Toptal, gdzie można znaleźć mnemonik dla dowolnego znaku.
Wideo i audio
Przed HTML5 znaczniki wideo i audio były trudnym zadaniem. W nowoczesnym standardzie dodano nowe
znaczniki do oznaczania treści multimedialnych z obsługą różnych formatów, wbudowanych elementów
sterujących itp.
Wideo
Sparowany znacznik służy do oznaczania treści wideo <video>.
<video
src="http://techslides.com/demos/sample-videos/small.webm"
poster="https://images.pexels.com/photos/595804/pexels-photo-595804.jpeg?w=640"
width="640"
controls
autoplay
loop
preload="auto"
></video>
Przeanalizujmy atrybuty.
 src - wskazuje adres pliku wideo

 poster - adres obrazu, który jest używany jako plakat, jeśli wideo nie zostało załadowane lub nie
jest jeszcze odtwarzane
 width i height - ustawiają wysokość i szerokość, jak w obrazie
 controls - atrybut "flaga", jeśli występuje, dodają się elementy sterujące wideo
 autoplay - atrybut "flaga", jeśli jest obecny, rozpocznie się odtwarzanie wideo jak tylko ono będzie
dostępne
 loop - atrybut "flaga", jeśli jest obecny, wideo zostanie powtórzone w pętli
Atrybut preload wskazuje tryb wstępnego ładowania wideo. Jego wartość wpływa na to, jakie informacje
zostaną załadowane. Wartość domyślna zależy od przeglądarki, w której została otwarta strona internetowa.
 none - nie pobierać wideo z wyprzedzeniem

 metadata - pobrać informacje o usłudze ładowania (czas trwania itp.)
 auto - pobrać całe wideo z wyprzedzeniem
Formaty wideo
Pobranie tylko jednego formatu pliku wideo nie wystarczy, niektóre przeglądarki mogą go nie obsługiwać, a
użytkownik nie będzie mógł obejrzeć wideo. Istnieje kilka popularnych formatów wideo, które należy
udostępnić przeglądarce do wyboru: webm, mp4 i ogg.
Aby to zrobić, trzeba usunąć atrybut src z znacznika <video> i dodać nowy znacznik <source> dla
każdego formatu. W atrybucie src należy ukazać adres pliku wideo, natomiast w atrybucie type format
wideo. Przeglądarka wybierze pierwszy z listy, który obsługuje i załaduje, ignorując resztę.
<video
width="640"
controls
>
<source
type="video/webm"
/>
<source
src="http://techslides.com/demos/sample-videos/small.mp4"
type="video/mp4"
/>
<source
src="http://techslides.com/demos/sample-videos/small.ogv"
type="video/ogg"
/>
</video>
Interesująco
Konwersja wideo i audio do wymaganych formatów jest zadaniem twórcy treści, menedżera treści lub w
skrajnych przypadkach programisty.
Audio
Sparowany znacznik <audio> jest używany do oznaczania treści audio. Jego użycie jest bardzo podobne do
<video>, ale można ustawić mniej atrybutów.
<audio src="song.mp3" controls autoplay loop preload="auto"></audio>
Przeanalizujmy atrybuty.
 src - wskazuje adres pliku audio

 controls - atrybut "flaga", jeśli występuje, dodają się elementy sterujące audio
 autoplay - atrybut "flaga", jeśli jest obecny, rozpocznie się odtwarzanie audio jak tylko ono będzie
dostępne
 loop - atrybut "flaga", jeśli jest obecny, audio zostanie powtórzone w pętli
Atrybut preload wskazuje tryb wstępnego ładowania pliku audio. Jego wartość wpływa na to, jakie
informacje zostaną załadowane. Wartość domyślna zależy od przeglądarki, w której została otwarta strona
internetowa.
 none - nie pobierać audio z wyprzedzeniem

 metadata - pobrać informacje o usłudze ładowania (czas trwania itp.)
 auto - pobrać całe audio z wyprzedzeniem
Formaty audio
Z obsługą formatu w przeglądarce z audio sytuacja jest lepsza. Wszystkie nowoczesne przeglądarki
obsługują jeden z dwóch formatów: mp3 albo ogg.
Podobnie jak w przypadku wideo, usuwamy atrybut src i używamy znacznika <source> z atrybutamisrc i
type.
<audio controls>
<source src="song.mp3" type="audio/mpeg" />
<source src="song.ogg" type="audio/ogg" />
</audio>
Wsparcie dla starszych przeglądarek
Jeśli przeglądarka jest bardzo stara i nie obsługuje treści multimedialnych HTML5, trzeba poinformować o
tym użytkownika. Aby to zrobić, wewnątrz znaczników <video> albo <audio>, po wszystkich znacznikach
<source> trzeba dodać wiersz tekstu, który przeglądarka wyświetli, jeśli nie obsługuje treści
multimedialnych.
<video
width="640"
controls
>
<source
type="video/webm"
/>
<source
src="http://techslides.com/demos/sample-videos/small.mp4"
type="video/mp4"
/>
<source
src="http://techslides.com/demos/sample-videos/small.ogv"
type="video/ogg"
/>
Your browser does not support the <code>video</code> element.

</video>
<audio controls>
<source src="song.mp3" type="audio/mpeg" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support the <code>audio</code> element.

</audio>
Wprowadzenie do CSS
CSS (Cascading Style Sheets, Kaskadowe arkusze stylów) - jest językiem do opisu i zmiany wyglądu
elementów. HTML służy do definiowania struktury i semantyki treści dokumentu, a CSS jest używany do
projektowania i pozycjonowania.
Składnia
Blok kodu CSS nazywany jest regułą, która składa się z selektora i bloku deklaracji w nawiasach
klamrowych.
Selektor informuje przeglądarkę, do których elementów zastosować style z tej reguły. Każda deklaracja
składa się z pary właściwość: wartość;, gdzie właściwość i jej wartość są oddzielone dwukropkiem ze
spacją i koniecznie kończą się średnikiem. One opisują, co dokładnie należy zrobić ze stylami elementu.
selektor {
właściwość: wartość;
}
Dodanie stylów
Istnieją trzy sposoby dodawania stylów do dokumentu HTML: style wbudowane (inline styles), wbudowany
arkusz stylów (embedded stylesheet) i zewnętrzny arkusz stylów (external stylesheet). Każdy sposób ma
swoje zalety, wady, ograniczenia i zakres użycia.
Style wbudowane
Style wbudowane (inline) są ustawiane dla znacznika bezpośrednio w atrybucie style. Nie można ich
skalować, są trudne do zastąpienia i ponownego użycia, więc są rzadko używane. Na przykład w przypadku
stylów dynamicznych, które są ustawiane podczas wykonywania kodu JavaScript, gdy nie wiemy z góry,
jaka będzie wartość właściwości.
<p style="color:blue; font-size:24px;">Ten tekst będzie niebieski.</p>
Wbudowany arkusz stylów

Przy takim podejściu reguły CSS dodają się wewnątrz znacznika <style> w nagłówku dokumentu. Nie
można ich ponownie wykorzystać na innych stronach i są trudne do skalowania i konserwacji.
<head>
<style type="text/css">
p {
color: blue;
font-size: 24px;
}
</style>
</head>
Interesująco
Czasami takie podejście jest stosowane w celu optymalizacji szybkości renderowania strony przez dodanie
najważniejszych stylów bezpośrednio do dokumentu HTML. Ta zaawansowana technika nazywa się
Critical CSS.
Zewnętrzny arkusz stylów
Zewnętrzny kod CSS jest łatwy do skalowania, konserwacji i ponownego wykorzystania na innych stronach,
więc jest to standard łączenia stylów. Projekt tworzy oddzielny plik arkusza stylów z rozszerzeniem .css i
podłącza się do dokumentu HTML.
<head>
<link rel="stylesheet" href="./css/styles.css" />
</head>
 Na tym samym poziomie co index.html tworzony jest folder css, a wewnątrz niego arkusz stylów
styles.css.
 W znaczniku <head>, za pomocą znacznika <link>, podłączany jest wcześniej utworzony plik.
 Atrybut href określa ścieżkę do arkusza stylów względem dokumentu HTML.
 Atrybut rel określa typ dołączonego dokumentu - stylesheet (arkusz stylów).
Pomocne
Możesz dołączyć dowolną liczbę plików CSS, dodając do każdego znacznik <link>.
Selektory
Korzystając z różnych selektorów, można wybrać jeden lub grupę elementów. Selektorów jest dość dużo,
dlatego rozpatrzymy te główne, które można stosować każdego dnia
Selektor elementu (znacznika)
Opisuje, do jakiego typu elementów będzie stosowana reguła CSS. Selektor elementu nie jest wystarczająco
specyficzny, aby nadać styl poszczególnym elementom, dlatego jest najczęściej używany do stylizacji
wszystkich znaczników tego samego typu na stronie. Na przykład, jeśli trzeba usunąć podkreślenie ze
wszystkich linków w dokumencie.
/* Zastosowane do wszystkich akapitów na stronie */

p {
font-size: 24px;
}
/* Zastosowane do wszystkich linków na stronie */

a {
text-decoration: none;
}
Selektor klasy
Główny selektor w nowoczesnym designie. Używany w połączeniu z atrybutem globalnym class. Nazwa
klasy ustawia się tylko w języku angielskim i jest to koniecznie rzeczownik opisujący, jakiego rodzaju jest
ten element. Aby poszerzyć swoje słownictwo proszę używać przewodnika i słownika terminów.
<h1 class="title">Cześć, jestem Mango.</h1>

<p class="text">
Witam na mojej osobistej stronie. Tutaj możesz zobaczyć
<a class="link" href="">projekty</a>.
</p>
CSS używa selektora klasy do nadania stylu jednemu lub większej liczbie elementów o tej samej wartości
atrybutu class (nazwa klasy). W selektorze przed nazwą klasy umieszczana jest kropka ..
/* Będzie dotyczyć wszystkich znaczników z klasą title */

.title {
font-weight: 500;
}
/* Będzie dotyczyć wszystkich znaczników z klasą text */

.text {
color: brown;
font-size: 18px;
}
/* Będzie dotyczyć wszystkich znaczników z klasą link */

.link {
}
Uwaga
Nazwa klasy zawiera tylko małe litery i myślnik. Na przykład, list, list-item, logo-image itp.
Podkreślenialist_item, duże litery ListItem lub liczby listitem27 są uznawane za niewłaściwą formę.
Kompozycja klas
Element może mieć kilka klas, wtedy są one oddzielone spacją.
<element class="value1 value2 value3"></element>
Można to wykorzystać do łączenia i ponownego wykorzystywania stylów. Utwórzmy znaczniki i style dla
komponentu alertów.
<p class="alert success">Zakończono doładowanie konta</p>

<p class="alert warning">Uwaga, taryfy ulegną zmianie</p>
<p class="alert error">Błąd transakcji</p>
W stylach opisujemy kilka reguł, które są wspólne dla wszystkich alertów i specyficzne dla każdego typu.
/* Wspólne style dla wszystkich typów alertów */

.alert {
font-size: 24px;
font-weight: 500;
}
/* Specyficzne style dla każdego typu */

.success {
color: green;
}
.warning {
color: orange;
}
.error {
color: red;
}
Selektor identyfikatora
Podobnie jak w przypadku klasy, znaczniki mogą mieć globalny atrybut id. Różnica polega na tym, że
wartość id musi być unikalna na stronie, to znaczy nie mogą istnieć dwa elementy o tej samej wartości
identyfikatora.
<h1 id="title">Nagłówek strony</h1>
W selektorze CSS przed nazwą identyfikatora umieszczany jest symbol krzyżyka #.
#title {
font-weight: 500;
color: orange;
}
Pomocne
Nie używaj identyfikatorów do projektowania. Reguła wyjątkowej wartości uniemożliwia ponowne użycie
stylów. Identyfikatory dotyczą "kotwic".
Selektor potomka
Selektor potomka lub selektor kontekstowy stosuje style do elementów podrzędnych i potomnych elementu
na dowolnej głębokości zagnieżdżenia.
<a href="">Czytaj nasz blog!</a>
<ul class="social-links">
<li>
<a href="">Twitter</a>
</li>
<li>
<a href="">Instagram</a>
</li>
<li>
<a href="">Facebook</a>
</li>
</ul>
Na przykład, zamiast ustawiać style wszystkim linkom, wystarczy zmienić style tylko tych, które znajdują
się na liście z klasą social-links.
/* ❌ Będzie zastosowane do wszystkich linków w dokumencie */

a {
color: blue;
}
/* ✅ Będzie zastosowane tylko do linków, które znajdują się wewnątrz znacznika z klasą
social-links */
.social-links a {
color: blue;
}
Selektor dziecka
Kolejny popularny selektor, który pozwala wybrać tylko bezpośrednie dziecko w elemencie nadrzędnym.
Używamy znaczników dla wielopoziomowego menu sklepu, w którym trzeba nadać styl znacznikom <li>
na liście z klasą menu, ale nie submenu.
<ul class="menu">
<li>
Komputery i akcesoria
<ul class="submenu">
<li>Procesory</li>
<li>Monitory</li>
<li>Karty graficzne</li>
</ul>
</li>
<li>
Artykuły gospodarstwa domowego
<li>Lodówki</li>
<li>Telewizory</li>
<li>Pralki</li>
</ul>
</li>
<li>
Sprzęty gospodarstwa domowego
<li>Fotele</li>
<li>Materace</li>
<li>Kominki elektryczne</li>
</ul>
</li>
</ul>
Jeśli używać selektora potomka (kontekstowego), reguła CSS będzie zastosowana do wszystkich
znaczników <li>, a każdy z nich będzie miał czerwoną obwódkę.
/* ❌ Nie rozwiązuje problemu */

.menu li {
border: 1px solid tomato;
}
Selektor dziecka pomaga rozwiązać ten problem, wybierając tylko te <li>, które są dziećmi (pierwszym
zagnieżdżeniem) listy ul.menu.
/* ✅ Dokładnie to, czego potrzeba */

.menu > li {
border: 1px solid tomato;
}
Selektor atrybutu
Umożliwia stosowanie stylów do elementów o określonym atrybucie lub jego wartości.
element[atrybut]
Zastosuje style do wszystkich elementów, które mają określony atrybut.
<a href="https://htmlreference.io" title="Przewodnik po tagach">

htmlreference.io
</a>
<a href="https://cssreference.io" title="Przewodnik po tagach">

cssreference.io
</a>
<a href="https://www.youtube.com">YouTube </a>
Wybiera wszystkie linki z atrybutem title.
a[title] {
color: teal;
}
element[atrybut="wartość"]
Zastosuje style do wszystkich elementów, które mają atrybut o określonej wartości.
<a href="https://htmlreference.io" title="Przewodnik po tagach">

htmlreference.io
</a>
<a href="https://cssreference.io" title="Przewodnik po stylach">

cssreference.io
</a>
<a href="https://www.youtube.com">YouTube</a>
Wybiera wszystkie linki z atrybutem href i odpowiednią wartością.
/* Nietypowe formatowanie nawiasów klamrowych jest w porządku */

a[href="https://htmlreference.io"]
{
color: teal;
}
a[href="https://cssreference.io"]
{
color: orange;
}
a[href="https://www.youtube.com"]
{
color: tomato;
}
Pseudoklasy stanowe
Selektory stanowe służą do użycia stylów dla elementów interaktywnych na określone zdarzenie, takie jak
najechanie kursorem na link lub fokus z klawiatury.
Pseudoklasa definiuje określony stan elementu i jest dołączona do selektora znacznika, klasy itp. Pomiędzy
selektorem a pseudoklasą nie ma spacji wskazującej, że są one ze sobą powiązane. Jeśli dodać spację, to
pseudoklasa będzie dotyczyć wszystkich elementów w dokumencie.
selektor:pseudoklasa {
/* Właściwości */
}
Pseudoklasa :hover
Zostaje uruchamiana, gdy kursor myszy znajduje się w granicach elementu, na przykład gdy wskaźnik
myszy znajduje się nad linkiem lub innym elementem.
<p>
Znaleźć doskonałą ściągawkę do tagów można
<a class="link" href="https://htmlreference.io">kliknąc w link</a>.
</p>
Dodamy do linku styl bazowy oraz styl po najechaniu kursorem.
.link {
color: teal;
}
.link:hover {
color: tomato;
}
Pseudoklasy można zastosować do dowolnego selektora, w tym do selektorów kontekstowych.

<li><a class="link" href="https://twitter.com">Twitter</a></li>
<li><a class="link" href="https://www.instagram.com">Instagram</a></li>
<li><a class="link" href="https://www.facebook.com">Facebook</a></li>
</ul>
Dodamy styl podstawowy oraz styl po najechaniu kursorem do linku wewnątrz listy.
.social-links .link {
color: teal;
}
.social-links .link:hover {
color: tomato;
}
Pomocne
Taki selektor brzmi jak „Gdy najedziesz kursorem na elementy z klasą link, które znajdują się wewnątrz
elementu z klasą social-links”. Oznacza to, że selektory są czytane od prawej strony do lewej. :::
Pseudoklasa :focus
Jest aktywowana, gdy element interaktywny (link, przycisk, pole formularza) otrzymuje fokus podczas
nawigacji po stronie za pomocą klawiatury (klawisz Tab).
</ul>
Dodamy podstawowy styl i styl fokusu do linku wewnątrz listy.
color: teal;
}
.social-links .link:focus {
color: orange;
}
Aby wziąć pod uwagę najechanie kursorem i fokus, warto od razu stylizować oba stany. Odbywa się to po
prostu poprzez wyświetlenie selektorów.
color: teal;
}
/* Dwa i więcej selektorów są oddzielone przecinkami */

.social-links .link:hover,
color: orange;
}
Pseudoklasa :active
Występuje, gdy element jest aktywowany. Na przykład link staje się aktywny, jeśli najechać na niego
kursorem i kliknąć myszą. Pomimo faktu, że prawie każdy element może stać się aktywny, pseudoklasa
:active jest używana głównie dla linków i przycisków.
</ul>
color: teal;
}
color: orange;
}
.social-links .link:active {
color: red;
}
Pseudoklasa :visited
Ta pseudoklasa jest aktywowana na linkach, które zostały już odwiedzone. Domyślnie linki są wyświetlane
na niebiesko, a po odwiedzeniu zmieniają kolor na fioletowy.
<li><a href="https://twitter.com" class="link">Twitter</a></li>
<li><a href="https://www.instagram.com" class="link">Instagram</a></li>
<li><a href="https://www.facebook.com" class="link">Facebook</a></li>
</ul>
color: teal;
}
color: orange;
}
.social-links .link:active {
color: red;
}
.social-links .link:visited {
color: green;
}
Hover i tabele
Pseudoklasa :hover nie koniecznie musi być stosowana do linków, można ją dodać do innych elementów
dokumentu. Na przykład do wierszy lub komórek tabeli, aby zmienić kolor tła po najechaniu kursorem.
<table class="schedule">
<thead>
<tr>
<th>Numer</th>
<th>Trasa</th>
</tr>
</thead>
<tbody class="schedule-body">
<tr>
<td>433</td>
<td>5 godzin</td>
</tr>
<tr>
<td>701</td>
<td>7 godzin</td>
</tr>
<tr>
<td>258</td>
<td>4 godziny</td>
</tr>
</tbody>
</table>
Dodamy podstawowy układ tabeli i style dla hovera wierszy.
.schedule-body > tr:hover {

background-color: tomato;
color: white;
}
/* Ustalanie wyglądu tabeli */

.schedule {
border-collapse: collapse;
}
.schedule th,
.schedule td {
padding: 8px;
border: 1px solid #212121;
}
Właściwość cursor
Ustawia typ wskaźnika myszy, gdy znajduje się w granicach elementu. Typ kursora zależy od systemu
operacyjnego i jego ustawień. Zmieniać typ kursora bez powodu to zły pomysł, to tylko zmyli użytkownika,
gdy zamiast zwykłej dłoni lub szkła powiększającego zobaczy coś innego. W większości przypadków
najlepiej zostawić go tak, jak jest.
Najedź myszą na tekst (wartości właściwości), a kursor zmieni swój wygląd.

Praca z kolorami
Kolor tekstu
Używając właściwości color można zmienić kolor tekstu elementu. Nowoczesne przeglądarki obsługują
kilka podstawowych sposobów opisywania kolorów: słowa kluczowe, rgb i hex.
<p class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
.text {
color: tomato;
}
Pomocne
Na serwisie htmlcolorcodes.com możesz zobaczyć wartości kolorów w różnych formatach.
Kolor tła
Właściwość background-color umożliwia zmianę koloru tła elementu.
<p class="text">
</p>
.text {
background-color: tomato;
color: white;
}
Nazwane kolory
Aby opisać kolor w stylach, można użyć zestawów zarezerwowanych słów. We współczesnym tworzeniu
stron internetowych nie są już używane, ale są przydatne, jeśli trzeba szybko ustawić określony kolor.
p {
color: tomato;
}
RGB
Istnieją trzy podstawowe kolory: czerwony, zielony i niebieski. Mieszając je w różnych proporcjach,
możesz uzyskać dowolny inny kolor.
Ten format używa funkcji rgb() do ustawienia wartości, która określa proporcje każdego z trzech kolorów
podstawowych, po czym są one mieszane i uzyskuje się żądany kolor.
rgb(czerwony, zielony, niebieski)

Zakres wartości można
określić jako liczby od 0 (brak koloru) do 255 (maksymalny udział). To jest główny sposób ustawiania
koloru RGB.
/* Czysta czerwień: 255 czerwonego, 0 zielonego, 0 niebieskiego */

p {
color: rgb(255, 0, 0);
}
Lub procenty od0% do 100%.
/* Czysta czerwień: 100% czerwonego, 0% zielonego, 0% niebieskiego */

p {
color: rgb(100%, 0%, 0%);
}
Uwaga
Nie musisz zapamiętywać kombinacji wartości RGB, wszystkie kolory są w układzie od projektanta.
Hexadecimal
Ten opis koloru jest oparty na liczbie szesnastkowej. Udział każdego z trzech kolorów podstawowych jest
opisany dwoma liczbami.
Jako cyfry tego

systemu liczbowego używany jest zestaw cyfr od 0 do 9 oraz łacińskie litery od A do F małymi lub dużymi
literami.
 0 - najmniejszy udział koloru

 f - największy udział koloru
/* Czysta czerwień: ff (100%) czerwonego, 00 (0%) zielonego, 00 (0%) niebieskiego */

p {
color: #ff0000;
}
/* Czysty zielony kolor: 00 (0%) czerwonego, ff (100%) zielonego, 00 (0%) niebieskiego

*/
p {
color: #00ff00;
}
/* Czysty niebieski kolor: 00 (0%) czerwonego, 00 (0%) zielonego, ff (100%)

niebieskiego */
p {
color: #0000ff;
}
Uwaga
Nie musisz pamiętać kombinacji wartości HEX, wszystkie kolory są w układzie od projektanta.
Przezroczystość koloru
Głównym sposobem dodania przezroczystości do koloru jest użycie funkcji rgba(). W przeciwieństwie do
rgb() dodaje się także przezroczystość (kanał alfa).
rgba(czerwony, zielony, niebieski, alfa)
Najczęściej przezroczystość jest określana liczbą od 0 (przezroczysty) do 1 (nieprzezroczysty).
/* Czysty czerwony kolor z przezroczystością 30% */

p {
background-color: rgba(255, 0, 0, 0.3);
}
Ale jest to również możliwe z wartościami procentowymi od 0% (przezroczysty) do 100% (nieprzezroczysty).
/* Czysty czerwony kolor z przezroczystością 30% */

p {
background-color: rgba(100%, 0%, 0%, 30%);
}
Interesująco
Można również ustawić przezroczystość kolorów w formacie Hex, ale ze względu na złożoność takiego
zapisu i zapamiętywania wartości zawsze używają tej funkcji rgba().
Kaskada stylów
Kaskadowość - to mechanizm, który zarządza końcowymi wartościami właściwości elementu, gdy stosuje
się do niego wiele reguł CSS.
 Jeśli do elementu stosuje się wiele reguł, ich właściwości są łączone

 Jeśli reguły mają te same właściwości z różnymi wartościami, powoduje to konflikt
/* Jakiego koloru będzie tekst akapitów? */

p {
color: blue;
background-color: orange;
}
p {
color: teal;
}
Aby zebrać ostateczne style elementu i rozwiązać konflikty wartości właściwości, przeglądarka
wykorzystuje dwa mechanizmy: specyficzność i dziedziczenie.
Specyficzność selektorów
Dla każdej reguły CSS przeglądarka oblicza specyficzność (wagę) selektora. Jeśli właściwości z różnych
reguł muszą być zastosowane do elementu i istnieją sprzeczne (identyczne) właściwości, używa się wartości
właściwości z reguły z największą specyficznością selektora.
Wartość specyficzności składa się z czterech rang, których znaczenie rośnie od prawej strony do lewej.
Selektory czwartej rangi
Każdy selektor elementu i pseudoelementu dodaje jednostkę do czwartej rangi.
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<p>
</p>
<a href="">Czytaj więcej...</a>
</article>
Kolor tekstu akapitu będzie pomarańczowy, ponieważ specyficzność drugiej reguły jest większa.
/* Specyficzność - 0 0 0 1 */
p {
color: green;
}
/* ✅ Specyficzność - 0 0 0 2 */
article > p {
color: orange;
}
Selektory trzeciej rangi
Każdy selektor klasy, atrybutu i pseudoklasy dodaje jednostkę do trzeciej rangi.
<article class="post">
<h1 class="post-title">Lorem ipsum dolor sit amet</h1>
<p>
</p>
<a href="" class="post-link">Czytaj więcej...</a>
</article>
Tekst nagłowka będzie miał kolor pomarańczowy, ponieważ specyficzność trzeciej reguły jest większa.
.post-title {
color: green;
}
.post > h1 {
color: red;
}
.post > .post-title {
color: orange;
}
Kolor tekstu linku będzie brązowy, ponieważ specyficzność piątej reguły jest większa.
a {
color: green;
}
.post-link {
color: orange;
}
a.post-link {
color: blue;
}
.post > .post-link {
color: red;
}
.post > a.post-link {
color: brown;
}
Selektory drugiej rangi
Każdy selektor identyfikatora dodaje jednostkę do drugiej rangi.
<h1 class="post-title" id="title">Lorem ipsum dolor sit amet</h1>
<p>
</p>
</article>
Tekst nagłówka będzie miał kolor pomarańczowy, ponieważ specyficzność drugiej reguły jest większa.
.post-title {
color: green;
}
#title {
color: orange;
}
Selektory pierwszej rangi
Style wbudowane dodają jednostkę do pierwszej rangi, mają największą specyficzność i nie można ich
zastąpić za pomocą CSS.


<p style="color: green;">
</p>
Jednakowa specyficzność
Jeśli specyficzność jest taka sama, wygrywa reguła, która znajduje się niżej w kodzie.
/* Trzy selektory elementów o tej samej specyficzności */

a {
color: teal;
}
a {
color: brown;
}
/* Ponieważ ta reguła jest niżej, do wszystkich linków zostanie zastosowany

pomarańczowy kolor tekstu */
a {
color: orange;
}
Unikanie specyficzności
Jeśli selektor wygląda jak A > B > C + X Y, warto to rozważyć. Im prostszy selektor, tym mniej
problemów ze specyficznością. Dobrą zasadą jest używanie selektorów klasy. Atrybut class nie tylko
pomaga uniknąć problemów ze specyficznością, ale także poprawia czytelność znaczników HTML.
Pierwszym podejściem jest przypisanie klasy do wspólnego bloku rodzica i użycie selektorów dziecka i
potomka.
<h1>Lorem ipsum dolor sit amet</h1>
<p>
</p>
</article>
Taki CSS działa dobrze, gdy znaczniki są proste. Jednak wraz ze wzrostem złożoności znaczników
blokowych wygodne stylizowanie za pomocą selektorów znacznika staje się niemożliwe. Na przykład, jeśli
post zawiera 5 linków, a nie jeden, punktowo wybrać jakiś link nie uda się lub selektor będzie zbyt złożony.
.post {
/* Style artykułu */
}
.post > h1 {
/* Style nagłówka */
}
.post > p {
/* Style tekstu */
}
.post > a {
/* Style linku */
}
.post > a:hover {

/* Style linku po najechaniu kursorem */
}
Drugie podejście polega na dodaniu klas opisowych do bloku rodzica i znajdujących się w nim znaczników.
<h1 class="title">Lorem ipsum dolor sit amet</h1>
<p class="text">
</p>
<a class="link" href="">Czytaj więcej...</a>
</article>
Ten CSS dobrze się skaluje i jest dobrze obsługiwany. To jest punkt wyjścia do napisania dobrego CSS.
Jednak wraz ze wzrostem złożoności znaczników mogą wystąpić drobne problemy ze specyficznością.
.post {
}
.post > .title {

}
.post > .text {

/* Style tekstu */
}
.post > .link {

/* Style linku */
}
.post > .link:hover {

}
Trzecie podejście polega na przypisaniu bardzo konkretnych klas do bloku rodzica i do każdego znacznika
w nim na zasadzie nazwa_rodzica-nazwa_dziecka.
<p class="post-text">
</p>
<a href="" class="post-link">Czytaj więcej....</a>
</article>
To podejście wykorzystuje proste selektory klas, nie trzeba myśleć o specyficzności. Taki CSS jest dobrze
skalowalny i dobrze obsługiwany. Współczesny programista wykorzystuje różne odmiany tego podejścia
podczas pisania stylów.
.post {
}
.post-title {
}
.post-text {
/* Style tekstu */
}
.post-link {
/* Style linku */
}
.post-link:hover {
}
Pomocne
Nie ograniczaj się do jednego podejścia. Wszystkie trzy metody nazywania klas znaczników i stylów pisania
mogą być używane razem, w zależności od sytuacji.
Słowo kluczowe!important
Specyficzność reguły można zwiększyć za pomocą słowa kluczowego !important, dodając go po wartości
właściwości.
<p class="text" id="text-id">

</p>
Wartość tej właściwości ma pierwszeństwo przed wszystkimi innymi, a tekst akapitu będzie miał kolor
pomarańczowy.
p {
color: orange !important;
}
p#text-id.text {
color: blue;
}
Uwaga
Bardzo odradza się używanie !important we współczesnym programowaniu. Jedynym dopuszczalnym

przypadkiem jest zastępowanie wartości właściwości, jeśli nie ma bezpośredniego dostępu do pliku ze
stylami, na przykład styl z biblioteki.
Dziedziczenie właściwości
Dziedziczenie genetyczne jest zwyczajowo widoczne w życiu. Na przykład wysocy rodzice często mają
wysokie dzieci, kolor włosów jest często przenoszony i tak dalej. Coś w tym stylu jest również w CSS. Jeśli
ustawić kolor tekstu rodzica na zielony, to jeśli jakakolwiek reguła nie zastąpi tej wartości, kolor tekstu
wszystkich jej elementów potomków również będzie zielony.
Dziedziczenie to mechanizm, za pomocą którego wartości pewnych właściwości są przekazywane od

przodka do jego potomków. Głównie dziedziczone są właściwości dekoracji tekstu, takie jak kolor. Jest to
wygodne, ponieważ nie trzeba ustawiać powtarzanie stylów dla każdego potomka oddzielnie.
<h1>Popularne w tym miesiącu</h1>
<p>
</p>
</article>
Zmienimy cały tekst postu na zielony.
.post {
color: green;
}
W narzędziach programistycznych, na karcie Styles na samym dole zobaczymy dziedziczenie dla akapitu i
nagłówka.
W
życiu nie wszystkie atrybuty rodziców są przekazywane dzieciom. Tak samo jest w CSS, nie każda
właściwość jest dziedziczona domyślnie przez potomków. W rzeczywistości, gdyby wszystkie właściwości
były dziedziczone, efekt byłby podobny do braku dziedziczenia, a wiele CSS musiałoby zostać napisanych,
aby zresetować odziedziczone style i zastąpić to zachowanie.
Wyjątki
Nie wszystkie elementy dziedziczą wartości właściwości od swoich przodków. Na przykład link nie
dziedziczy koloru tekstu.
<h1>Popularne w tym miesiącu</h1>
<p>
</p>
</article>
Jeśli chcesz, aby post miał taki sam kolor jak reszta tekstu, można użyć specjalnej wartości inherit dla
właściwości color, aby nie duplikować koloru w dwóch miejscach.
.post {
color: green;
}
.post-link {
color: inherit;
}
Pomocne
Wartość inherit mówi przeglądarce, że ma dziedziczyć wartość właściwości po przodku. W przypadku

koloru preferowaną wartością jest currentColor (bieżący kolor).
Kolor tekstu strony
Aby ustawić podstawowy (dominujący) kolor tekstu całego dokumentu, utwórz regułę dla znacznika <body>
i dodaj właściwość color. Ten kolor będzie dziedziczony przez całą zawartość tekstową z wyjątkiem
linków.
body {
color: #2a2a2a;
}
Zmienne CSS
Właściwości użytkownika (CSS Custom Properties), znane również jako zmienne CSS, to kontenery dla
wartości, określone w dokumencie CSS w celu powtórnego wykorzystania. Zmienne CSS ułatwiają
używanie i zmienianie powtarzających się wartości w pliku stylów. Wspierane są natywnie przez
przeglądarkę i nie potrzebują żadnych dodatkowych narzędzi.
 CSS
 HTML
styles.css
.section {
/* Inne style */
border: 2px solid #3f51b5;
}
.section-title {
/* Inne style */
color: #3f51b5;
}
.section-title::before {
/* Inne style */
background-color: #3f51b5;
}
W podanym przykładzie wartość #3f51b5 występuje trzykrotnie. Przyjmijmy, że to główny kolor marki,
który jest cały czas wykorzystywany na różnych podstronach strony internetowej. Jeżeli zmieni się kolor
marki, będziemy musieli wszędzie zmienić tę wartość, a w dużym projekcie mogą to być setki miejsc.
Najlepsze, co możemy zrobić, to używać opcji znajdź i zamień.
Zadeklarowanie zmiennej
Z pomocą przychodzą zmienne CSS. Nazwa zmiennej jest czuła na wielkość liter i może zawiera litery
łacińskie, cyfry, podkreślniki i pauzy. Utworzymy zmienną --brand-color do przechowywania koloru
marki (#3f51b5) i będziemy z niej korzystać.
styles.css
:root {
--brand-color: #3f51b5;
}
Zmienne globalne, dostępne w innej dowolnej zasadzie, określane są w selektorze :root – bardziej
specyficznym selektorze elementu <html>. Zadeklarowanie zmiennej zaczyna się od podwójnego łącznika
--, za którym pojawia się jej nazwa w dowolnej notacji. Na przykład brand-color lub brandColor - to
poprawne nazwy zmiennej. Najważniejsze, aby wszystkie zmienne w projekcie były w jednakowej notacji.
Nazwa i wartość rozdzielane są dwukropkiem, a na końcu deklaracji wstawia się średnik.
Ciekawostka
Deklaracja zmiennej to utworzenie nowej właściwości CSS, które jest dziedziczone, dlatego występuje
wszędzie, ponieważ dowolny element staje się potomkiem elementu <html>.
Wykorzystywanie zmiennej
W celu otrzymania dostępu do zmiennej przyjmowana jest wbudowana funkcja var(), której jako pierwszy
argument przekazuje się nazwę zmiennej.
styles.css
:root {
--brand-color: #3f51b5;
}
.section {
/* Inne style */
border: 2px solid var(--brand-color);
}
.section-title {
/* Inne style */
color: var(--brand-color);
}
/* Inne style */
background-color: var(--brand-color);
}
Zrobiło się trochę więcej kodu, ale jest on bardziej elastyczny i czytelny. Jeśli trzeba będzie zmienić kolor
marki, wystarczy podmienić wartość zmiennej --brand-color i kolor zmieni się wszędzie, gdzie jest ona
wykorzystywana.
Wskazówka
Zmienne CSS wykorzystuje się nie tylko do zapisywania palety kolorów projektu, można w nich
przechowywać dowolne informacje, na przykład standardowe wielkości czcionek, promień obramowania,
odstępny i pola, szerokości kontenerów, punkty zwrotne dla układu adaptacyjnego i tak dalej, to znaczy
dowolne wartości, które wykorzystuje się ponownie w różnych zasadach CSS.
Wartości rezerwowe
Funkcja var(nazwa_zmiennej, fallback) może przyjmować dwie wartości. Drugi argument to fallback –
wartość, która będzie wykorzystywana, jeżeli zmienna, przekazana przez pierwszy argument, nie jest
określona.
styles.css
.section {
border: 2px solid var(--brand-color, orange);
}
.section-title {
color: var(--brand-color, black);
}
background-color: var(--brand-color, tomato);
}
Wskazówka
Możliwość przekazania wartości domyślnie to po pierwsze możliwość, a nie obowiązkowe wymaganie przy
wykorzystaniu zmiennych CSS. Nie ma potrzeby pokazywania wszędzie fallbacku.
Zasięg widoczności
Zmienna --brand-color jest globalna, dlatego że została określona w :root, to znaczy jest dostępna w
dowolnym innym elemencie. Jeżeli wartość będzie wykorzystywana tylko w określonej części strony,
można tworzyć zmienne o lokalnym zasięgu widoczności. Będą dostępne tylko dla tego elementu i jego
potomków, w którym były zadeklarowane.
 CSS
 HTML
styles.css
.alert {
--alert-text-color: black;
--alert-accent-color: tomato;
}
.alert-text {
color: var(--alert-text-color);
border: 1px solid var(--alert-accent-color);
}
.alert-icon {
background-color: var(--alert-accent-color);
}
Przedefiniowanie wartości
Zmienne można przedefiniowywać lokalnie przy pomocy innych wartości. W tym celu należy zadeklarować
zmienną o takiej samej nazwie, co w przodku i wprowadzić do niej wymagane wartości.
Dekoracja tekstu
Tekst jest główną treścią stron internetowych i istnieje wiele różnych właściwości CSS, które są używane na
co dzień do nadawania mu dekoracji.
Właściwość text-decoration
Ustawia różne dekoracyjne podkreślenia i inne efekty tekstowe.
text-decoration: none | underline | line-through | overline
Arkusz stylów z przeglądarki ustawia znaczenie większości elementów na none, czyli wyłączone. Ale na
przykład linki mają domyślnie underline.
<h1 class="title">Iste odit similique sit</h1>

<p class="text">
<span>veritatis nihil alias iste</span> odit similique sit eius optio veniam,
impedit cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
<a href="" class="link">Czytaj więcej...</a>
.text > span {
text-decoration: line-through;
}
.link {
}
Właściwość text-transform
Kontroluje wielkość liter w tekście, na przykład zrobić wszystkie wielkie litery. W znacznikach tekst jest
zawsze wpisywany zgodnie z regułami języka. Następnie za pomocą funkcji text-transform, zostaje
poprawiany do pożądanej formy, bo wszystkie dekoracje muszą być w CSS.
text-transform: none | uppercase | lowercase | capitalize
Utwórzmy znacznik menu nawigacyjnego, którego tekst elementów w układzie jest narysowany wielkimi
literami.
<ul class="site-nav">
<li><a href="" class="link">Blog</a></li>
<li><a href="" class="link">Workshops</a></li>
<li><a href="" class="link">Podcasts</a></li>
<li><a href="" class="link">About</a></li>
</ul>
Teraz w stylach robimy wszystkie litery w tekście linku wielkimi literami.
.site-nav .link {
text-transform: uppercase;
}
Właściwość text-align
Steruje wyrównaniem w poziomie zawartości tekstowej elementu.
text-align: left | right | center | justify
Domyślnie tekst jest wyrównany do lewej (wartość left).
<p class="post-text align-right">
</p>
<p class="post-text align-justify">

</p>
</article>
Wycentrujemy tekst nagłówka i wyrównamy tekst akapitu do prawej i równomiernie.

.post-title {
text-align: center;
}
.align-right {
text-align: right;
}
.align-justify {
text-align: justify;
}
Uwaga
Używanie wartości justify nie jest dobrym pomysłem. Chociaż tekst jest dociskany równomiernie do
lewej i prawej krawędzi bloku, jego czytelność jest znacznie ograniczona. Dzieje się tak, ponieważ odstępy
między słowami mają różną szerokość, co negatywnie wpływa na postrzeganie tekstu.
Właściwość text-indent
Ustawia wielkość wcięcia pierwszego wiersza bloku tekstu, na przykład akapitu. Nie wpływa na wszystkie
inne wiersze z wyjątkiem pierwszej.
text-indent: wartość | procent | inherit
Dowolne jednostki długości są akceptowane jako wartości, na przykład piksele (px). W przypadku
ustawienia wartości w procentach wcięcie jest obliczane w zależności od szerokości bloku.
cumque fuga facere labore quo id necessitatibus quaerat rerum.Obcaecati
commodi, veritatis nihil alias iste odit similique sit eius optio veniam,
</p>
</article>
.post-text {
text-indent: 100px;
}
Właściwość line-height
Ustawia odstępy między wierszami (interlinia, wysokość wiersza) tekstu. Domyślnie odstępy między
wierszami zależą od rodzaju czcionki i jej rozmiaru i są określane automatycznie przez przeglądarkę.
line-height: mnożnik | wartość | procent | normal | inherit
Wartość można określić w jednostkach bezwzględnych lub względnych oraz w mnożniku. Najlepiej ustawić
wartość jako mnożnik, wtedy interlinia jest obliczana na podstawie aktualnego rozmiaru czcionki tekstu.
<p class="text">
</p>
Na przykład, jeśli rozmiar czcionki w układzie to 16px a interlinia 24px, po prostu dzielimy 24 przez 16 i
uzyskamy mnożnik 1.5. Użycie mnożnika zapewnia równomierne skalowanie odstępów między wierszami
w przypadku zmiany rozmiaru tekstu.
.text {
font-size: 16px;
line-height: 1.5;
}
Właściwość letter-spacing
Określa odstępy między znakami. Domyślnie odległość między znakami jest ustalana na podstawie rodzaju i
typu czcionki, jej rozmiaru oraz ustawień systemu operacyjnego.
letter-spacing: wartość | normal | inherit
Czasami projektanci ustawiają niestandardową wartość odstępów między znakami i dlatego istnieje
właściwość letter-spacing.
</p>
</article>
Dla jasności ustawmy duże wartości letter-spacing dla tekstu nagłówka i akapitu.
.post-title {
letter-spacing: 10px;
}
.post-text {
letter-spacing: 5px;
}
Właściwość word-spacing
Określa odstępy między wyrazami. Domyślnie odległość między słowami jest ustalana na podstawie typu i
rodzaju czcionki, jej rozmiaru oraz ustawień systemu operacyjnego.
word-spacing: wartość | normal | inherit
Interesująco
Właściwość word-spacing należy do grupy rzadko używanych właściwości dekoracji tekstu.
Właściwość text-shadow
Steruje cieniem tekstu, a także ustawia jego parametry: kolor, przesunięcie i promień rozmycia.
text-shadow: <przesunięcie wzdłuż osi x>, <przesunięcie wzdłuż osi y>, <promień
rozmycia>, <kolor>
 kolor - można określić w dowolnym formacie. Domyślnie kolor cienia jest taki sam jak kolor tekstu.
 przesunięcie wzdłuż osi x - poziome przesunięcie cienia względem tekstu. Pozytywna wartość
określa przesunięcie cienia w prawo, ujemna - w lewo.
 przesunięcie wzdłuż osi y - pionowe przesunięcie cienia względem tekstu. Pozytywna wartość
ustawia przesunięcie cienia w dół, ujemna - w górę.
 promień rozmycia - im wyższa wartość, tym bardziej cień jest rozmyty i staje się jasniejszy.
Domyślnie, jeśli nie jest ustawiony, będzie 0.
<h1 class="title">Fusce posuere ligula elementum purus</h1>
Zróbmy biały tekst z ciemnym cieniem. Aby to zrobić, ustawimy przesunięcie X i Y na 2px, promień
rozmycia na 4px i czarny kolor cienia.
.title {
color: #ffffff;
text-shadow: 2px 2px 4px #000000;
}
Warstwowy efekt cienia
Można dodać wiele cieni do jednego elementu, oddzielając je przecinkami. Otrzymujemy wielowarstwowe
ciasto z cieni.
<h1 class="title">Fusce posuere ligula elementum purus</h1>
Kolejność wyświetlania jest następująca - pierwszy cień na liście jest umieszczony na samej górze, ostatni -
na samym dole. Oznacza to, że im wcześniej cień zostanie określony, tym wyżej będzie się znajdował w
warstwach i będzie wizualnie nakładał się na wszystkie kolejne.
.title {
color: #ffffff;
text-shadow: 2px 2px 20px #ff0000, 5px 5px 5px #000000;
}
Właściwość white-space
Domyślnie przeglądarka ignoruje więcej niż jedną spację i podział wiersza w znacznikach HTML.
Właściwość white-space, podobnie jak znacznik <pre>, ale bardziej elastycznie, kontroluje formatowanie
spacji i dzielenie wyrazów.
white-space: normal | nowrap | pre | pre-wrap

Właściwość font-size
Ustawia rozmiar czcionki elementu w jednostkach bezwzględnych lub względnych. Na razie ograniczmy się
do jednostek bezwzględnych - px (piksele).
<p class="text">
</p>
Domyślny rozmiar czcionki dla akapitów, który jest ustawiony w arkuszu stylów przeglądarki, to 16px.
.text {
font-size: 20px;
}
Właściwość font-weight
Kontroluje grubość (wagę) liter w czcionce. Wartość właściwości można określić jako zestaw
zarezerwowanych słów lub liczb od 100 do 900 ze skokiem 100, który określa grubość glifu od cienkiego
100 do grubego 900.
font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Słowa kluczowe są powiązane z liczbami, na przykład normal to 400, а bold to 700. Podczas
programowania używane są tylko liczby, ze względu na możliwość ustawienia tej samej dokładnej wagi we
wszystkich przeglądarkach.
<h1 class="title">Iste odit similique sit</h1>

<p class="text">
</p>
Domyślnie grubość czcionki w akapitach, która jest ustawiona w arkuszu stylów przeglądarki, to 400, a
grubość nagłówków to 700.
/* Zamienimy miejscami pogrubienie tekstu nagłówka i akapitu */

.title {
font-weight: 400;
}
.text {
font-weight: 700;
}
Właściwość font-style
Ustawia styl tekstu, na przykład można ustawić kursywę.
font-style: normal | italic | oblique | initial | inherit
Ze wszystkich wartości używane są tylko dwie.
 normal - wartość jest domyślna dla większości znaczników

 italic - tekst pisany kursywą
<h1 сlass="title">Iste odit similique sit</h1>

<p class="text">
</p>
Zróbmy tekst nagłówka kursywą.
.title {
font-style: italic;
}
Właściwość font-family
Czcionka — to zbiór znaków typograficznych, cyfr i znaków specjalnych o określonym stylu do
wpisywania tekstu.
Czcionki są podzielone na kilka głównych grup (rodzin): czcionki szeryfowe (serif), czcionki bezszeryfowe
(sans-serif), czcionki o stałej szerokości (monospace), czcionki dekoracyjne i odręczne. MacOS, Linux i
Windows zawierają zestaw standardowych czcionek z każdej rodziny. Domyślnie, jeśli nie określono innej
czcionki, przeglądarka używa Times New Roman z rodziny szeryfowej (serif).
Właściwość font-family ustawia czcionkę tekstu elementu. Można podać dowolną liczbę czcionek
oddzielonych przecinkami, które przeglądarka, w kolejności od lewej do prawej, spróbuje znaleźć w
systemie użytkownika i zastosuje pierwszą znalezioną.
body {
font-family: 'Helvetica Neue', 'Roboto', 'Verdana', 'Tahoma', sans-serif;
}
Rodzina czcionek jest zawsze wyświetlana na końcu listy, na wypadek gdyby żadna z wymienionych
czcionek nie została znaleziona. Wtedy zastosowana zostanie standardowa czcionka z tej rodziny, która jest
w systemie użytkownika.
Pseudoelementy tekstowe
Pseudoelement ::first-letter
Steruje stylem pierwszego znaku w tekście elementu, do którego jest dodawany. Do tego pseudoelementu
można zastosować tylko właściwości czcionki, koloru, tła, a także geometrie elementu.
element::first-letter {
}
Na przykład można zaznaczyć pierwsze litery każdego akapitu wiersza.
<pre>
Nudno jest tu bez ciebie. Nudno do obłędu!
Jestem jeszcze wraz z wiewiórką i pieskiem,
Piszę, czytam i palę, wciąż mam oczy niebieskie,
Lecz to wszystko tylko siłą rozpędu.
</pre>
<pre>
Wciąż jeszcze świt jest szary, zmierzch niebiesko -złoty,
Dzień przechodzi na jedną, noc na drugą stronę
I róże zakwitają bez wielkiej ochoty:
Bo tak są już przyzwyczajone.
</pre>
<pre>
A jednak świat się skończył. Czy wy rozumiecie?
Świata nie ma i ja go nie stworzę.
Czas jest równy i cichy. Lecz czekajcie... może -
Może ja jestem już na tamtym świecie?
</pre>
Dodamy style dla pseudoelementu ::first-letter znacznika pre. Zmienimy czcionkę, rozmiar i kolor
czcionki.
pre {
font-family: 'Arial', 'Helvetica', sans-serif;
color: #2a2a2a;
font-size: 16px;
}
pre::first-letter {
font-family: 'Tahoma', serif;
font-size: 32px;
color: #f44336;
}
Pseudoelement ::selection
Steruje stylem zaznaczania tekstu elementu, nadpisując standardowe wartości z arkusza stylów przeglądarki.
W projekcie można używać tylko właściwości color i background-color.
Niestandardowe czcionki
Czcionka sprawia, że witryna jest jasna i zapadająca w pamięć. Miliony witryn z jedną czcionką „Times
New Roman” prawdopodobnie byłyby zbyt nudne. Dlatego projektanci tworzą własne czcionki, a
programiści mogą ich używać w projektach.
Interesująco
Czcionki są podzielone na płatne i bezpłatne. Należy zakupić płatną licencję na czcionkę, a używanie jej bez
licencji jest obarczone naruszeniem praw autorskich. Istnieje wiele pięknych darmowych czcionek
należących do domeny publicznej.
Serwis Google Fonts

Google Fonts jest to repozytorium ogromnej liczby darmowych czcionek. Wszystko, co trzeba zrobić, to
znaleźć odpowiednią czcionkę, pobrać link do niej i umieścić ją w pliku HTML jako kolejny arkusz stylów.
Skopiuj i wklej następujący kod HTML do swojego pliku znaczników i otwórz stronę w przeglądarce. Tekst
renderowany niestandardową czcionką nie różni się niczym innym niż wyglądem, więc do dekoracji możesz
użyć dowolnej właściwości CSS.
<html>
<head>
<link
href="https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap"
rel="stylesheet"
/>
<style>
.title {
font-family: 'Tangerine', cursive;
}
</style>
</head>
<body>
<h1 class="title">Making the Web Beautiful!</h1>
</body>
</html>
Aby podłączyć niestandardową bezpłatną czcionkę z usługi Google Fonts, kliknij w link i przejdź do strony
wyników wyszukiwania.
Możesz przewijać galerię czcionek i wyszukiwać tę, która Ci się podoba, lub, jeśli znasz nazwę czcionki,
wprowadź ją w polu wyszukiwania i kliknij kartę czcionki.
Na stronie czcionki wybieramy żądaną grubość. Nie trzeba wybierać wszystkich dostępnych grubości, im
więcej opcji, tym cięższy będzie plik czcionki i tym dłużej wczytuje się Twoja strona internetowa. To samo
dotyczy liczby czcionek, zwykle ograniczają się do jednej, maksymalnie dwóch czcionek dla całej witryny.
Uwaga
Nie wszystkie czcionki obsługują pełny zakres grubości (od 100 do 900) i styl czcionki (standardowa lub
kursywa). Projektant tworzy zestaw najpopularniejszych wartości. Jeśli czcionka nie obsługuje określonej
wagi, przeglądarka wyrenderuje ją najbliższą dostępną grubością.
Potrzebujemy tylko wagi 700, ponieważ dołączamy czcionkę dla nagłówków..
Na karcie Embed skopiujemy znacznik <link>, który zawiera link do arkusza stylów czcionek i dodajemy go
do nagłówka dokumentu HTML, przed pozostałymi stylami.
Teraz możesz użyć czcionki Tangerine w arkuszu stylów, określając ją we właściwości font-family.
Dyrektywa @font-face
Zobaczmy, co dokładnie połączyliśmy z dokumentem HTML w ostatniej sekcji.
1. Otwórz narzędzia programistyczne i przejdź do karty „Network”.

2. Wybierz filtr „CSS”, aby były wyświetlane tylko pliki stylów.
3. Kliknij plik z Google Fonts.
4. Wybierz kartę „Preview”, która wyświetli zawartość pliku.
/* latin */
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Tangerine Bold'), local('Tangerine-Bold'),
url(https://fonts.gstatic.com/s/tangerine/v12/Iurd6Y5j_oScZZow4VO5srNZi5FNym499g.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
Tak więc Google Fonts zwróciło nam najpopularniejszy plik CSS, który zawiera dyrektywę @font-face -
deklarację czcionki. Ta dyrektywa umożliwia określenie parametrów podłączonej czcionki.
 font-family - lokalna nazwa do użycia w naszym kodzie CSS.

 font-style - styl czcionki (standardowa lub kursywa itp.)
 font-weight - waga podłączanej czcionki.
 font-display - steruje wyświetlaniem tekstu podczas ładowania czcionki.
 src - link do samego pliku czcionki i wyjaśnienie jej typu, zwykle woff albo woff2.W naszym
przypadku plik czcionki znajduje się na serwerach Google, ale może to być również czcionka
lokalna, która jest przechowywana w plikach projektu.
 unicode-range - określa zestaw wymaganych znaków w czcionce z tablicy znaków Unicode. Nie
ma potrzeby wczytywania wszystkich symboli, im mniej jest, tym szybciej ładuje się czcionka.
Pomocne
Wszystkie symbole znane ludzkości (języki, znaki matematyczne itp.) są zebrane i opisane w standardzie o
nazwie Unicode, w którym każdy symbol ma swoją nazwę (na przykład „latin capital letter a”) oraz kod
(code point) — liczba od 0 do 10FFFF.

HTML I CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML I CSS

Uploaded by

Copyright:

Available Formats

Technologie internetowe

 HTML - odpowiada za wypełnienie strony internetowej treścią, za strukturę i zawartość.

 CSS - jest używana do projektowania i pozycjonowania, wygląd zewnętrzny.

 JavaScript - pozwala na dodanie funkcjonału, reakcji na działania użytkownika.

<p>To jest akapit tekstu, on będzie wyświetlany na stronie.</p>

<a href="https://google.com" class="link">...</a>

<img src="cat.jpg" alt="cute cat" />

<input type="text" name="user_name" />

Przyjrzyjmy się niektórym atrybutom znaczników <a>.

<a href="http://google.com" target="_blank" title="Wyszukiwarka internetowa Google">

 href - adres strony, na którą przejdzie użytkownik po kliknięciu w tekst linku.

 target - wskazuje, w której zakładce strona zostanie otwarta po kliknięciu w link.

 title - dodaje podpowiedź do tekstu linku.

Przyjrzyjmy się niektórym atrybutom znaczników <img>.

 src - adres obrazka.

Ale ta wersja ma problemy (wiersze są podświetlone).

Algorytm określania czy znacznik można zagnieżdżać jest dość prosty.

 Sięgamy po specyfikację i znajdujemy potrzebny element.

 Sprawdzamy model treści elementu(Content model), do którego zagnieżdżamy.

 Sprawdzamy kategorie elementu (Categories), który zagnieżdżamy.

Szkielet dokumentu HTML

Deklaracja typu dokumentu

Elementy najwyższego poziomu

Przeznaczony do przechowywania informacji serwisowych o stronie: nagłówek, opis, kodowanie itp.

Znaczniki nagłówków dokumentów

Znacznik <meta> służy do przechowywania informacji przeznaczonych dla przeglądarki i wyszukiwarek:

Krótki opis zawartości pomaga wyszukiwarkom lepiej indeksować stronę.

Meta znaczniki, które rozumie Google

Znaczniki semantyczne - podejście do tworzenia znaczników HTML na podstawie używania znaczników

W większości przypadków znaczniki semantyczne to po prostu użycie zdrowego rozsądku. Zaznaczając

Służy do wyświetlania działań w określonej kolejności, takich jak przepis.

<h1>Jak zaparzyć herbatę</h1>

Służy do umieszczania zestawu w dowolnej kolejności, na przykład listy kurortów.

<a href="https://google.com">Link do strony głównej Google</a>

Atrybuty target i rel

Wartości specjalne href

<button type="button">Otwórz okno modalne</button>

 Opis powinien zawierać pełne, sformułowane zdanie.

Jeśli treść strony opisuje

<img src="kittens.jpg" alt="Kocięta" />

Aby utworzyć odsyłacz obrazkowy, trzeba zmienić znacznik <img> na link.

Ścieżki bezwzględne i względne

Weźmiemy standardową strukturę plików i folderów projektu.

Formaty plików graficznych

Najpopularniejsze rastowe formaty obrazów to:

 Squoosh do optymalizacji grafiki rastowej

Z punktu widzenia użytkownika progresywny JPEG zapewnia znacznie przyjemniejsze przeglądanie.

Przesyłanie strumieniowe treści

<p>Wszelkie prawa zastrzeżone © Lex, 2020</p>