Wprowadzenie do HTML i CSS

Ćwiczenia
HTML i CSS
HTML
• Hipertekstowy język znaczników
• Skrót z angielskiego HyperText Markup Language
• Podstawowy język stron internetowych
• Opisuje strukturę informacji zawartej w dokumencie: nagłówek, stopka, akapity, artykuł, lista, tabela
itd.
• Pozwala integrować w jednym dokumencie test, grafikę, wideo, muzykę
• Oferuje prostą nawigację między dokumentami
CSS
• Kaskadowe arkusze stylów
• Skrót z angielskiego Cascading Style Sheets
• Język opisujący wizualną formę prezentacji dokumentów HTML
• Pozwala odseparować wygląd dokumentu od jego struktury
• Arkusz stylów CSS to lista reguł określających wygląd elementów.
Zalecenia organizacji W3C

• Oddzielenie struktury dokumenty (HTML) od wyglądu (CSS)

• uwzględnienie użyteczności i dostępności strony - także dla osób niepełnosprawnych
(niewidomych, słabo widzących)
• Uwzględnienie szybkości wyświetlania stron
• rozmiar grafiki, unikanie skomplikowanych struktur (np. unikanie skomplikowanych
tabel)
Przykładowy dokument pokazujący różnicę zastosowań HTML i CSS

h010.html
Historia HTML
• 1990: Tim Berners-Lee (fizyk pracujący dla CERN) tworzy specyfikację HTML, pierwszy serwer www oraz przeglądarkę.
• 1991: Berners-Lee publikuje dokument HTML tags
• 1993: IETF publikuje specyfikację HTML jako szkic (draft)
• 1995: IETF towrzy HTML 2.0 i publikuje go w 1996 jako RFC 1867 + kilka późniejszych RFC
• 1995: powstaje propozycja HTML 3.0 ale prace nad nią zostają przerwane
• 1997: HTML 3.2 zostaje opublikowany jako rekomendacja W3C
• 1997: HTML 4.0 zostaje opublikowany jako rekomendacja W3C
• 1999: HTML 4.01 zostaje opublikowany jako rekomendacja W3C
• rozwój HTML miał na tym się zakończyć. Przyszłością miał być XHTML
• 2000: HTML ISO/IEC 15445:2000 (na bazie HTML 4.01 strict)
• 2000: XHTML 1.0 opublikowany jako rekomendacja W3C
• 2001: XHTML 1.1 opublikowany jako rekomendacja W3C
• 2004: WHATWG rozpoczyna prace nad ulepszeniem HTML
• 2007: W3C tworzy grupę pracującą nad następcą HTML 4.01
• 2008: pierwszy roboczy szkic HTML 5 (working draft W3C)
• 2009: prace nad XHTML 2.0 zostają wstrzymane
• 2014: HTML 5 opublikowany jako rekomendacja W3C
• 2016: HTML 5.1 opublikowany jako rekomendacja W3C
• 2017: HTML 5.2 opublikowany jako rekomendacja W3C
• 2018: HTML 5.3 opublikowany jako wersja robocza
• 2019: W3C i WHATWG uzgadniają że specyfikacja HTML będzie zarządzana przez WHATWG jako „living document”
Tim Berners Lee

• Tim Berners Lee – twórca HTML - został doceniony zaproszeniem do uczestnictwa w

ceremoni otwarcia Igrzysk Olimpijskich w Londynie
• HTML – tweet Tima Berners Lee podczas otwarcia Igrzysk Olimpijskich 2012 w
Londynie https://www.youtube.com/watch?v=UMNFehJIi0E
Organizacje stojące za standardami (X)HTML i CSS

• Poniższe organizacje nie mają mocy prawnej

• kto chce, ten stosuje ustalone rekomendacje
• W3C (World Wide Web Consortium)
• zajmuje się ustanawianiem standardów tworzenia i przesyłu stron WWW
• założona w 1994 roku przez Tima Berners-Lee
• zrzesza kilkaset organizacji, firm, agencji rządowych i uczelni
• WHATWG (Web Hypertext Application Technology Working Group)
• organizacja utworzona w 2004 przez pracowników producentów przeglądarek
internetowych
• w pewnym stopniu konkurent dla W3C
• organizacja ma duży wpływ na działania W3C - np. W3C rozpoczęło pracę nad HTML5
w oparciu o propozycje WHATWG.
• Od 2019 roku to W3C utrzymuje specyfikację HTML
• IETF (Internet Engineering Task Force)
• nieformalne, międzynarodowe stowarzyszenie osób zainteresowanych ustanawianiem
standardów technicznych i organizacyjnych w Internecie. Zajmowało się HTML nim
powstało W3C
HTML a XHTML

• HTML został stworzony w oparciu o jęcyk SGML

• XHTML został stworzony w oparciu o język XML
• XML został stworzony o w oparciu o język … SGML
• Różnice między XHTML a HTML są minimalne
• XHTML wymaga większego porządku w kodzie
• XHTML teoretycznie pozwala osiągnąć rzeczy niedostępne dla HTMLa,
ale w praktyce są one niezwykle rzadko potrzebne
• Najczęściej jest zupełnie obojętne czy stworzysz dokument używając
HTML czy XHTML
• XHTML nie jest dalej rozwijany jako osobny język. Pod XHTML 5 rozumie
się HTML 5 z poprawną składnią XML zaserwowany przez serwer www
jako typ dokumentu: application/xhtml+xml
Wyższość XHTML nad HTML

• XHTML można łatwo mieszać z innymi językami opartymi na XML (np.

MathML służący do tworzenia równań matematycznych)
• XHTML można przetwarzać parserami XML (przetwarzać do innej
postaci)
• Można definiować własne tagi/elementy
• Błędy składni są natychmiast wykrywane przez przeglądarki - strona z
choć 1 błędem nie wyświetli się w ogóle!
XHTML w praktyce

• Nagłówek protokołu http (pole content-type) określa czy dokument jest HTML czy
dokumentem XML (XHTML)
• Nagłówek ustawia się w konfiguracji serwera www
• typ dokumentu = application/xhtml+xml - dokument jest przetwarzany przez
przeglądarkę jako XML (XHTML): można korzystać z dobrodziejstw XML
• typ dokumentu = text/html - dokument jest przetwarzany jako HTML i funkcje
XML nie są dostępne
• Dopiero Internet Explorer 9 zaczął obsługiwać typ application/xhtml+xml
• Wiele stron XHTML w Internecie jest serwowanych jako text/html
czyli są przetwarzane przez przeglądarki jako … HTML z błędami.
XHTML w praktyce: IE
• Współczesne przeglądarki znają typ application/xhtml+xml, bardzo stare (np. Internet Explorer 8) go
nie znają.
• W poniższym przykładzie dokument XHTML jest serwowany jako XHMTL (przesyłany jako
application/xhtml+xml protokołem http). Firefox wyświetla dokument, IE 8 traktuje dokument jako
nieznany typ i proponuje zapisanie go na dysku.
XHTML w praktyce na przykładzie Firefox
• Niedomknięty tag </p> - różnica interpretacji w
Firefox przy Content-Type: text/html i
application/xhtml+xml
• Poniższy dokument XHTML jest błędy. Element <p>
nie został zamknięty. Brakuje </p>
• Jeśli serwer przesyła go do Firefox jako HTML
(text/html), dokument jest wyświetlany. Jeśli serwer
przesyła go do Firefox jako XHTML
(application/xhtml+xml) przeglądarka wyświetla błąd.
• Przeglądarka opiera decyzję o tym czy przetwarzać
dokument jako XHTML, czy jako HTML w oparciu o
dane z protokołu HTTP, a nie z nagłówka HTML!
Aktualne rekomendacje wersji HTML

HTML: https://html.spec.whatwg.org/
CSS: https://www.w3.org/standards/techs/css#w3c_all
CSS
Wersje
• CSS 1 - rekomendacja w 1996
• CSS 2 - rekomendacja w 1998
• CSS 2.1 – rekomendacja od 2011
• CSS 3 / 4 – prace w toku
• Rozbite na kilkadziesiąt niezależnych modułów
• Status poszczególnych modułów można sprawdzić tutaj: https://www.w3.org/Style/CSS/
• Używaj wybiórczo – wiele elementów niekoniecznie jest wspieranych przez przeglądarki.

CSS – sytuacja
• Przeglądarki różnie interpretują CSS, czasem są to niezamierzone błędy (bugi), czasem celowe
działanie
• Czasem różne wersje tej samej przeglądarki mogą dawać różny efekt dla tego samego kodu.
• Konieczne jest testowanie strony w kilku przeglądarkach
• Niekiedy koniecznie tworzenie kilku wersji arkusza CSS (dla różnych przeglądarek)
Wsparcie przeglądarek dla poszczególnych elementów HTML i CSS

• http://caniuse.com/
• http://html5test.com
• http://www.w3schools.com/cssref/css3_browsersupport.asp
Sprawdzanie poprawności dokumentów

• Poprawne dokumenty oznaczają mniej problemów z wyświetlaniem i lepsze

pozycje w wynikach wyszukiwania
• http://validator.w3.org
• Sprawdzanie poprawności dokumentów html
• http://jigsaw.w3.org/css-validator/
• Sprawdzanie poprawności dokumentów css
• 3 zakładki:
• sprawdzanie strony w Internecie (podanie adresu)
• załadowanie pliku z dysku
• kopiuj/wklej dokument
010 – walidacja HTML

1.Otwórz http://validator.w3.org oraz

http://jigsaw.w3.org/css-validator/
2. Sprawdź liczbę błędów (czerwone) i ostrzeżeń (żółte) na
następujących witrynach:
• www.google.pl
• www.onet.pl
• www.wp.pl
• www.poznan.pl
020 – walidacja HTML #1

1. Ściągnij i zainstaluj Visual Studio Code

2. https://code.visualstudio.com/
3. Utwórz w dowolnym miejscu folder o
nazwie HTML (np. na pulpicie lub w
„Moje Dokumenty”). Będziesz w nim
przechowywać pliki.
4. Uruchom program i utwórz swoją
pierwszą witrynę:
a. Otwórz folder HTML używając
menu File / Open Folder
b. Stwórz nowy plik o nazwie 020.html
używając odpowiedniej ikony, lub
menu File / New File
c. W pierwszej linii pliku wpisz znak
wykrzyknik ! i naciśnij tabulator.
d. Zapisz plik używając kombinacji
klawiszy Ctrl+S lub menu File/Save
020 – walidacja HTML #2

1. Uruchom plik w przeglądarce (Użyj eksploratora Windows by przejść do katalogu

HTML i dwukrotnie kliknąć na plik)
2. Sprawdź poprawność pliku na stronie http://validator.w3.org
a. W edytorze skopiuj zawartość pliku (Ctrl+A aby zaznaczyć całą zawartość,
Ctrl+C aby skopiować do schowka)
b. Na stronie validator.w3.org przejdź do trzeciej zakładki (Validate by Direct
Input)
c. Wklej zawartość pliku (Ctrl+V) i kliknij „Check”
d. Czy plik przeszedł walidację bez błędów?
Edytory HTML/CSS

• Edytory WYSWIG (What You See Is What You Ge – dostaniesz to co widzisz)

• Edytory graficzne: do tworzenia witryn nie jest konieczna znajomość HTML/CSS –
edytor sam generuje kod HTML/CSS
• Zwykle możliwe jest przełączenie się w tekstowy tryb pracy
• Przykład: Dreamweaver
• Edytory tekstowe
• Konieczne jest wpisywanie kodu HTML/CSS
• Obecniej najczęściej HTML/CSS jest mieszany z językami programowania (np. PHP,
JavaScript) i praca z kodem źródłowym jest nieunikniona
• Cechy dobrego edytora tekstowego
• Kolorowanie kodu
• Numerowanie linii
• Podpowiadanie znaczników HTML, właściwości CSS
• Automatyczne domykanie znaczników
• Makra
• biblioteka ulubionych fragmentów kodu (snippets)
HTML – dokumentacja

https://www.w3.org/
https://developer.mozilla.org/pl/docs/Web/HTML
Znaki w dokumentach HTML

• Tekst treści dokumentu - przeglądarki przed wyświetleniem:

• ignorują znaki przejścia do następnej linii (zastępują je spacją)
• zastępują następujące po sobie „białe” znaki pojedynczym znakiem spacji

• Na dokument HTML składa się:

treść
elementy
atrybuty elementów
• W HTML wielkość liter elementów i atrybutów nie ma znaczenia
• W XHTML wielkość liter elementów i atrybutów MA znaczenie
• Ze względu na XHTML lepiej używać małych liter i dla elementów i dla atrybutów
Budowa dokumentu HTML

• 3 części: informacja o wersji HTML (pierwsza linijka), <head>, <body>

• Dokument jest zamknięty w tagach <html>
• Sekcja <head> – informacje pomocnicze o dokumencie (np. tytuł dokumentu)
• Sekcja <body> – zawartość dokumentu - w przykładzie zawiera jedynie jeden akapit (<p>)

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strona internetowa</title>
</head>
<body>
<p>Przykładowy akapit</p>
</body>
</html>
HTML – wersje (pierwsza linia dokumentu)

• HTML 5 – obecnie stosowana pierwsza linia dokumentu.

• <!DOCTYPE html>
• Wersje historyczne pierwszej linii dokumentu stosowane w przeszłości dla HTML
4.01. Były aż 3 wariatny:
• Strict – zawiera tyko współczesne elementy języka (te które nie zostały uznane
za przestarzałe)
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN”
"http://www.w3.org/TR/html4/strict.dtd">
• Transitional – to co strict + przestarzałe elementy i atrybuty
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN”
"http://www.w3.org/TR/html4/loose.dtd">
• Frameset – to co transitional + elementy opisujące ramki
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN”
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML – wersje (pierwsza linia dokumentu)

• XHTML 5 – obecnie stosowana pierwsza linia dokumentu.

• <!DOCTYPE html>
• Wersje historyczne poniżej:
• XHTML 1.0
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• XHTML 1.1
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Znaki specjalne

• Niektórych znaków nie ma na klawiaturze – np. ©

• Takie znaki można wprowadzać wykorzystując referencje znakowe
• Referencja znakowa zaczyna się od & a kończy średnikiem ;
• Referencja znakowa może być w postaci tekstowej, np.:
&lt; = <, &gt; = >, &quot; = ”
• lub numerycznej
&#D; – gdzie D jest liczbą dziesiętną, np.:
 &#229; = a,
&#xH; - gdzie H jest liczbą szesnastkową, np.:
 &#xE5; = a , &#x6C34; – chiński znak oznaczający woda
• Lista referencji znakowych na stronach W3C
Używanie w treści znaków <, >, ", &

• znaki <, >, ”, & są częścią języka HTML - przeglądarki mogą błędnie zinterpretować
fragment treści dokumentu jako kod HTML
• Zalecane jest używanie &lt; &gt; &quot; i &amp; w treści dokumentu w miejscach
gdzie ma wyświetlić się <, >, ", &
• W poniższym przykładzie użyto ostrych nawiasów w miejscu gdzie powinny się one
wyświetlić jako treść – przeglądarka zinterpretowała je jako rozpoczęcie elementu
HTML.
Używanie w treści znaków <, >, ", & - przykład
<!doctype html> <html lang="en">
<head>
<meta charset="UTF-8" /> <title>Moja strona</title>
</head>
<body>
<p>
W html akapit tekstu otwiera się tagiem <p>
a zamyka tagiem </p>
</p>
</body>
</html>

<!doctype html> <html lang="en">

<head>
<meta charset="UTF-8" /> <title>Moja strona</title>
</head>
<body>
<p>
W html akapit tekstu otwiera się tagiem &lt;p&gt;
a zamyka tagiem &lt;/p&gt;
</p>
</body>
</html>
HTML - elementy

• Element HTML składa się z 3 części:

• tag początkowy <nazwa-elementu>
• Zawartość
• tag końcowy </nazwa-elementu>
• Ale z wyjątkami:
• W niektórych elementach HTML zezwala na pomijanie tagów zamykających (np.
</p>, </li>) a nawet otwierających (np. <head>) ale nie jest to dobra praktyka,
będą problemy z ewentualnym przejściem na XHTML który wymaga domykania
wszystkich tagów
• Niektóre elementy nie mają treści ani tagu zamykającego (np. <br> -
wymuszenie nowej linii)
Elementy - przykład
<!DOCTYPE html> <html lang="pl">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Strona internetowa</title>
</head>
<body>
<ul>
<li>
<p>
Pierwszy akapit na liście
</p>
</li>
<li>
<p>
Drugi akapit na liście
</p>
</li>
</ul>
</body>
</html>
030 – Białe znaki: efekt końcowy
030 – Białe znaki
1. Utwórz w nowym lub istniejącym projekcie poprawny dokument HTML (030.html)
• W Visual Studio Code użyj odpowiedniej ikony lub menu File / New File
• W pierwszej linii pliku wpisz znak wykrzyknik ! i naciśnij tabulator.
2. W nowoutworzonym pliku zwróć uwagę na deklarację typu dokumentu <!DOCTYPE …> , sekcje
<head> i <body>.
3. Popraw tytuł witryny (wyświetlany w górnym pasku przeglądarki): <title> w sekcji <head>
4. Dodaj akapit tekstu: <p> </p>
a. zawierający polskie litery (ą,ć,ę,ł,ń,ó,ś,ź,ż)
b. zawierający znaki <, >, " i &
i. wprowadzone normalnie z klawiatury
ii. oraz jako referencje znakowe &lt; &gt; &quot; &amp;
c. Zawierający wielokrotne spacje pomiędzy sąsiednimi słowami
d. Zawierający znaki przejścia do kolejnej linii (znaki enter)
5. Sprawdź stronę w 2 przeglądarkach (do uruchomienia pliku użyj np. eksploratora Windows).
a. Co dzieje się z „białymi” znakami (enter, spacja?)
6. Sprawdź poprawność strony pod adresem http://validator.w3.org
a. Czy są jakieś błędy związane z <, >, " i &?
7. Wgraj plik na serwer udostępniony przez uczelnię (np. przy użyciu programu Filezilla, lub
wykorzystując wybrany dodatek FTP dla Visual Studio Code). Sprawdź w przeglądarce czy dokument
poprawnie się wyświetla: w pasku adresowym przeglądarki - po nazwie serwera dopisz /030.html
HTML – atrybuty

• Elementy mogą mieć specyficzne dla nich właściwości nazywane atrybutami

• Atrybuty mają wartości domyślne, lub przypisywane przez autora strony
• Atrybuty pojawiają się wewnątrz tagu początkowego
• Może być wiele atrybutów w jednym tagu
• Kolejność atrybutów w tagu nie gra roli
• Wartości atrybutów zamykane są w cudzysłowach (pojedynczych ' lub podwójnych ")
• Jeśli w wartości atrybutu ma się pojawić pojedynczy cudzysłów, wartość można
zamknąć w podwójnym.
• Jeśli w treści ma się pojawić podwójny cudzysłów, atrybut można zamknąć w
pojedynczym. Można również wykorzystać zapis
• &quot; lub &#34; (podwójny cudzysłów)
• &#39; (pojedynczy cudzysłów)
HTML – atrybuty: przykład

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Strona internetowa</title>
</head>
<body>
<h1 id="naglowek">Oto nagłówek</h1>
</body>
</html>
Atrybuty uniwersalne (występujące dla większości elementów)

• lang – określa język zawartości elementu (np. ”en”, ”pl”)

• Kody języków są co najmniej dwu literowe (wg RFC1766, np.: pl – polski)
• po 2 literach może być dopisek wg ISO3166 (np. en-us – angielski amerykański)
• dir – kierunek tekstu (ltr – z lewej do prawej, rtl – z prawej do lewej: np. arabski)
• Kierunki tekstu można ze sobą mieszać w jednym dokumencie
• title – tytuł elementu - nie jest pokazywany w treści
• często jest pokazywany jako dymek nad elementem (po najechaniu kursorem)
• id – identyfikator elementu: musi być unikatowy. Wykorzystywany min:
• przez arkusze stylów do określenia wyglądu elementu
• jako kotwica dla linków wewnętrznych dokumentu
• Jako unikatowy identyfikator elementu w językach skryptowych (np. javascript)
• class – identyfikator klasy elementu – wykorzystywane przez arkusze stylów do
określania wyglądu elementów
HTML – atrybuty name i id

• Atrybut id służy do jednoznacznej identyfikacji elementu

• Atrybut id można przypisać prawie wszystkim elementom, atrybut name niektórym (głównie
elementom formularzy)
• Wartości id muszą być unikatowe w dokumencie: nie może być dwóch elementów z
tym samym id.
• Wartości name mogą się powtarzać w dokumencie, szczególnie w przypadku pól
formularza z których dane chcemy przesyłać do skryptu przetwarzającego dane jako
jedną wspólną tablicę danych. Np. wyobraźmy sobie formularz z polami typu checkbox
gdzie można zaznaczyć własne zainteresowania typu muzyka, moda, sport. Można te
pola wysłać do skryptu przetwarzającego dane jako osobne zmienne nadając im
unikatowe name, lub można je wysłać jako jedną zmienną tablicową, nadając im
jednakowe name.
• id wykorzystuje się przede wszystkim w skryptach JavaScript i stylach CSS
• name wykorzystuje się przede wszystkim w formularzach. Name jest wysyłane przez
przeglądarkę do skryptów odbierających dane z formularzy HTML, dzięki czemu w skrypcie
odbierającym dane z przeglądarki wiadomo, które dane pochodzą z którego pola.
• W name można używać referencji znakowych typu &nbsp; a w id nie
Nagłówek dokumentu HTML (<head>)

• <head> - element tworzący nagłówek dokument HTML

• atrybut profile: rzadko używny, jego wartość to URI (lub lista URI oddzielonych
spacjami) dokumentu w którym zawarty jest opis meta danych <meta>
dotyczący bieżącego dokumentu
• <title> - element zawierający tytuł dokumentu. Wyświetlany w pasku tytułowym
strony. Każdy dokument HTML musi mieć ten element w sekcji <head> (tylko jeden)
• <meta> - element sekcji <head> który zawiera informacje o dokumencie.
• może występować wielokrotnie.
• może być definiowane w dokumencie (wewnątrz head) lub w osobnym pliku i
dołączone do właściwego dokumentu za pomocą <link>
• Kontekst meta danych może być ustawiony poprzez atrybut profile dla
elementu <head> (rzadko używany) - <head
profile="http://www.serwer.pl/profil">
Metadane

• <meta name=”nazwa” content=”zawartosc” scheme=”schemat” http-equiv=”nazwa”>

• name – nazwa właściwości meta.
• content – zawartość właściwości meta.
• scheme – nazwa schematu używanego do interpretacji wartości (zdefiniowana w
profile)
• http-equiv – może być użyte zamiast name. Serwery www mogą wykorzystywać
taki tag meta do generowania odpowiedzi protokołu http
• Specyfikacja nie definiuje listy nazw <meta> ani ich wartości, ale podaje kilka
przykładów które są powszechnie używane
Metadane – przykład
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Strona internetowa</title>
<meta charset="utf-8"> <!-- kodowanie znaków -->
<meta name="Author" content="Jan Kowalski"> <!-- Autor -->
<meta name="keywords" lang="pl" content="wakacje, słońce"> <!-- słowa kluczowe polski -->
<meta name="keywords" lang="en" content="holiday, sunshine"> <!-- słowa kluczowe angielski -->
<!-- zakazanie wyszukiwarkom zapamiętywania dokumentu i wchodzenia w linki -->
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<!-- instrukcja dla przeglądarek mobilnych: wyświetlenie strony na całej szerokości
urządzenia, z przybliżeniem 100% -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- instruckja dla Internet Explorer w wersji 10 i starszych, by
wykorzystywały najnowszy dostępny dla nich sposób wyświetlania stron -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<p>Strona o wakacjach</p>
</body>
</html>
HTML – kodowanie znaków

• Kodowanie znaków dla języka polskiego

• utf-8 – współcześnie stosowane – używaj!
• iso-8859-2 - przestarzałe kodowanie, unikaj!
• windows-1250 - przestarzałe kodowanie firmy Microsoft, niezgodne ze
standardami ISO, unikaj!
• Kodowanie znaków można ustalić na poziomie
• Dokumentu html - wykorzystując element meta (najczęściej stosowane):
• HTML 5: <meta charset=utf-8>
• HTML 4.01/XHTML 1.0/1.1 <meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
• Serwera www: wysyłając kodowanie w nagłówku http (rzadko stosowane), np.:
Content-Type: text/html; charset=utf-8
• Atrybutu charset (tylko niektórych elementów HTML – rzadko stosowane)
040 – Meta dane

1. Stwórz w nowym lub istniejącym projekcie poprawny dokument HTML

• W Visual Studio Code użyj odpowiedniej ikony lub menu File / New File
• W pierwszej linii pliku wpisz znak wykrzyknik ! i naciśnij tabulator.
2. Upewnij się że meta dane dotyczące kodowania znaków są ustawione na utf8
3. Dodaj meta dane używając elementu <meta> w sekcji <head>:
a. dotyczące zawartości strony (name="description")
b. dotyczące słów kluczowych (name="keywords")
c. dotyczące autora (name="author")
4. Sprawdź stronę w przeglądarce (zwróć uwagę że elementy meta nie są
wyświetlane)
5. Sprawdź poprawność strony pod adresem http://validator.w3.org
Body – treść dokumentu

• <body> - w elemencie zawarta jest treść dokumentu, atrybuty:

• id, class, lang, dir, title, style, zdarzenia
• Elementy blokowe (prostokątne)
• Mogą zawierać treść, inne elementy blokowe lub liniowe
• Domyślnie zaczynają się w nowej linii
• Przy zmianie rozmiaru przeglądarki (szerokość), jeśli element nie mieści się na
ekranie, w przeglądarce pojawiają się paski przewijania
• Przykład: akapit tekstu <p>
• Elementy liniowe (lub elementy linii, tekstowe)
• Mogą zawierać treść lub inne elementy liniowe
• Zaczynają się w bieżącej linii
• Przy zmianie rozmiaru przeglądarki (szerokość), jeśli element nie mieści się na
ekranie, to jego część przechodzi do kolejnej linii
• Przykład: tekst wewnątrz elementów
• Za pośrednictwem arkuszy stylów CSS można ustalić czy dany element ma być
wyświetlany jako blokowy czy jako liniowy (można nadpisać jego domyślne zachowanie)
Komentarze
• Komentarze są ignorowane przez przeglądarki (nie są wyświetlane jako treść)
• Mogą ciągnąć się przez wiele linii
• Twórcy stron wstawiają komentarze by ułatwić sobie w przyszłości edycję strony (np. przypomnieć
sobie co mieli na myśli podczas tworzenia strony)
• <!–- to jest komentarz -->

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Strona internetowa</title>
</head>
<body>
<!-- to miejsce na treść dokumentu! Ten komentarz nie jest widoczny
w przeglądarce. -->
</body>
</html>
HTML – <div>, <span>, nagłówki

• <div> - element blokowy bez konkretnego znaczenia wykorzystywany do

przygotowania miejsca na treść i jej formatowania
• <span> - element liniowy bez konkretnego znaczenia wykorzystywany do
przygotowania miejsca na treść i jej formatowania
• Atrybuty <div> i <span>
• id, class, lang, dir, titile, style, zdarzenia

• <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - elementy nagłówków (liniowe)

• Stosowane jako nagłówki sekcji – <h1> to najwyższy (najważniejszy) poziom
nagłówka, <h6> - najniższy
• <header> – oznaczenie sekcji nagłówkowej
Nagłówki: przykład
<!DOCTYPE html> <html lang="pl"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Strona internetowa</title>
</head> <body>
<article>
<header>
<h1>Kopciuszek zwyczajny</h1>
<p>gatunek małego ptaka wędrownego z rodziny muchołówkowatych.</p>
</header>
<section>
<header>
<h2>Charakterystyka</h2>
<p>Zasiedla Eurazję i północno-zachodnią Afrykę...</p>
</header>
<h3>Cechy gatunku</h3>
<p>Ptak o smukłej sylwetce, wielkości wróbla lub nieco ... </p>
<h3>Zachowanie</h3>
<p>Najłatwiej obserwować go w miastach, trudniej na ... </p>
</section>
</article>
<footer>
<p>Ostatnia aktualizacja: <time datetime="2020-12-21T18:26-07:00">2020-12-21 o 18:26 </time>
</p>
</footer>
</body></html>
<address>

<address> - element (liniowy) opisuje dane kontaktowe. Atrybuty: id, class, lang, title,
style, zdarzenia

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Przykładowa witryna</title>
</head>
<body>
<address>
Wyższa Szkoła Bankowa w Poznaniu <br>
ul. Powstańców Wielkopolskich 5 <br>
61-895 Poznań <br>
tel. 61 655 33 33 <br>
fax 61 655 32 27 <br>
</address>
</body>
</html>
Tekst dwukierunkowy

• <bdo> - element (liniowy) – wyłącza algorytm automatycznego dobory kierunku

wyświetlania tekstu (pozwala zdecydować autorowi w którą stronę wyświetlać tekst)
• Atrubyty lang, dir (obowiązkowy!)
• Zwykle wystarczą tagi z określonym atrybutem dir. Czasem kierunek tekstu może być
świadomie odwrócony przez autora – wtedy <bdo> pozwoli wyłączyć algorytm
przeglądarki (automatycznie dobierający kierunek wyświetlania tekstu)
• Jest grupa znaków unicode pozwalająca na dalsze manipulacje znakami – np. &zwnj;
(&#8204) blokuje możliwość łączenia liter między którymi się znajduje (przydatne w języku
arabskim)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Strona internetowa</title></head>
<body>
<pre>
<bdo dir="ltr">polski1 1IKSBARA polski2</bdo>
<bdo dir="rtl">polski3 2IKSBARA polski4</bdo>
</pre>
</body>
</html>
Tekst: cytaty

• <blockquote> - element blokowy do umieszczania dłuższych cytatów – domyślnie

nie generuje cudzysłowów. Zalecane jest generowanie ich za pomocą stylów.
• <q> - element liniowy do umieszczania krótszych cytatów – przeglądarka sama
wstawi cudzysłów.
• Atrybuty <q> i <blockquote>
• cite – źródło cytatu w formie URL do dokumentu skąd zaczerpnięto cytat.
• id, class, lang, dir, title, style, zdarzenia
Przykład: cytaty
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Przykładowa witryna</title>
</head>
<body>
<h1>Trznadel zwyczajny</h1>
<p>Oto, co o Trznadlu zwyczajnym mówi <cite>Wikipedia</cite>:</p>
<blockquote cite="https://pl.wikipedia.org/wiki/Trznadel_zwyczajny">
<p>Trznadel zwyczajny, trznadel, trznadel żółtobrzuch (Emberiza...</p>
</blockquote>
<h2>Afera Rywina</h2>
<p>
Z aferą Rywina nierozerwalnie wiąże się fragment zdania
<q cite="https://pl.wikipedia.org/wiki/(%E2%80%A6)_lub_czasopisma">
lub czasopisma</q>, który został ...
</p>
</body>
</html>
 Tekst: wyróżnianie
• <em> - nacisk na fragment tekstu (podkreślenie ważności)
• <strong> - silniejszy nacisk na fragment tekstu (podkreślenie ważności)
• <cite> - źródło cytatu lub odniesienie do innego źródła
• <dfn> - definicja pojęcia
• <code> - kod źródłowy , np. języka programowania
• <samp> - przykładowy wynik działania programu, skryptu itp.
• <kbd> - oznacza tekst jaki ma wprowadzić użytkownik
• <var> - zmienna lub argument programu
• <abbr> - skrócona forma (skrót)
• <acronym> - akronim (np. AGD)
• <s> (HTML 5) - oznaczanie fragmentów tekstu które są nieaktualne
• <i> (HTML 5) – fragment tekstu o innym charakterze niż reszta tekstu (np. w innym języku)
• <b> (HTML 5) - oznaczenie istotnego tekstu, ale bez kładzenia na niego nacisku (np. słowa kluczowe występujące we fragmencie tekstu)
• <u> (HTML 5) - fragment treści różnej stylistycznie lub nie przeznaczonej do czytania na głos (np. informacja jak NIE wymawiać/pisać
danego słowa)
• <mark> – wyróżnia fragment tekstu na potrzeby referencji w innym miejscu
• <bdi> - izolowanie tekstu na potrzeby określania kierunku pisania tekstu (z lewej do prawej lub odwrotnie). Określenie kierunku odbywa
się za pomocą stylów CSS
• <wbr> - możliwość złamania linii (umieszczenia reszty tekstu w kolejnej). Przydatne przy długich słowach lub np. w obszarach zamkniętych
w <pre> - gdzie normalnie linie nie są łamane.
Przykład: wyróżnianie tekstu 1/3
<p>To jest zwykły tekst. Używam elementu br aby wymusić wyświetlenie elementów po tym tekście w
nowej linii. Jeśli potrzebuję kilku linii przerwy, używam br kilkukrotnie<br>
Dla bardzo długich wyrazów, takich jak na przykład www.bardzo<wbr>-ale<wbr>-to<wbr>-bardzo-
<wbr>długa<wbr>-nazwa<wbr>-domeny<wbr>.pl mogę użyć elementu wbr aby zezwolić przeglądarce na
łamanie tekstu (przechodzenie do kolejnej linii) w wybranych miejscach.<br><br>
<em>A to tekst którego wagę chciałbym podkreślić - używam elementu em</em><br><br>
<strong>Ten tekst wyróżniam ze względu na jego ważność, powagę lub pilność - używam elementu
strong</strong><br><br>
<small>Ten tekst oznacza treść poboczną - używam elementu small. Często się go wykorzystuje do
zamieszczenia not prawnych poniżej głównej treści dokumentu</small><br><br>
<s>Ten tekst nie jest aktualny - oznaczam go elementem s</s><br><br>
<i>Ten tekst odróżnia się czymś od reszty tekstu, opisuje nastrój, reprezentuje inną cechę
tekstu - np. idiom czy wtrącenie z innego języka - zawarłem go w elementcie i </i><br><br>
<b>Ten tekst chcę wyróżnić ze względów użytkowych, a nie z powodu jego ważności, np. wyróżniam
słowa kluczowe - użyłem elementu b</b><br><br>
<u>Ten tekst wyróżniam ponieważ jest niespójny z resztą tekstu - np. zawiera literówkę -
używam elementu u</u><br><br>
<mark>Ten tekst jest wyróżniony, aby łatwiej się było do niego odnieść w innym miejscu - używam
elementu mark</mark><br><br>
<cite>Ten tekst opisuje źródło cytatu - ozaczam go elementem cite</cite><br><br>
<q>Ten tekst to krótki cytat - oznaczam go elementem q </q><br><br>
<dfn>Ten tekst to termin lub definicja - oznaczam go elementem dfn </dfn><br><br>
<abbr>Ten tekst to skrót lub akronim - oznaczam go elementem abbr</abbr><br><br>
Przykład: wyróżnianie tekstu 2/3
<data value="888">Ten tekst opisuje dane, które będą przetwarzane maszynowo - oznaczam go
elementem data. Dane dla oprogramowania zawarłem w atrybucie value </data><br><br>
<time datetime="2020-12-21T18:26-07:00">Ten tekst oznacza datę/czas – zawarłem go w elemencie
time. Dane dla oprogramowania zawarłem w atrybucie datetime w odpowiednim formacie
</time><br><br>
<code>Ten tekst zawiera kod jednego z języków programowania - oznaczyłem go elementem code
</code><br><br>
<var>Ten tekst zawiera zmienną matematyczną lub programistyczną – oznaczyłem go elementem var
</var><br><br>
<samp>Ten tekst zawiera przykładowy efekt działania oprogramowania – oznaczyłem go elementem
samp </samp><br><br>
<kbd>Ten tekst zawiera przykładowe dane wejściowe do programu – oznaczyłem go elementem kbd
</kbd><br>
_{Ten tekst to indeks dolny - oznaczyłem go elementem sub}
^{Ten tekst to indeks górny - oznaczyłem go elementem sup}
<bdi>Ten tekst odróżnia się od reszty tekstu tym, że powinien być wyświetlany w przeciwnym
kierunku, np. jest to tekst arabski. Używam elementu bdi aby przeglądarka mogła bezbłędnie
zidentyfikować który fragment wyświetlać w przeciwnym kierunku</bdi><br><br>
<bdo dir="rtl">Ten tekst odróżna się od reszty tym że jest wyświetlany od prawej do lewej.
Użyłem elementu bdi oraz atrybutu dir aby wskazać kierunek wyświetlania</bdo><br><br>
<span>Ten tekst nie ma szczególnego znaczenia, ale chciałbym go móc wyróżnić poprzez style CSS
lub móc zidentyfikować w skrypcie JavaScript - oznaczam go elementem span</span><br><br></p>
Przykład: wyróżnianie tekstu 3/3
Tekst: indeksy i akapity

• <sup> - element liniowy oznaczający indeks górny

• <sub> - element liniowy oznaczający indeks dolny
• atrybuty <sub> i <sup>: id, class, lang, title, style, zdarzenia
• <p> - element blokowy zawierający akapit.
• W jego środku nie można zagnieżdżać innych elementów blokowych (np.
kolejnego <p>)
• Atrybuty: id, class, lang, title, style, zdarzenia
• <br> - element wymuszający zakończenie linii – Nie ma tagu zamykającego.
• atrybuty: id, class, title, style
Przykład – indeksy i akapity

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Przykładowa witryna</title>
</head>
<body>
<p>
H₂O <br>
E = mc²
</p>
</body>
</html>
Tekst preformatowany

• &nbsp; - zapis wymusza „twardą” spację (zakaz łamania linii) – jest to również
sposób na wymuszenie wyświetlenia więcej niż 1 spacji jedna po drugiej.
• Myślniki – 2 rodzaje
• Zwykły myślnik wprowadzany jako znak z klawiatury traktowany jest jak każdy
inny znak
• „Miękki” myślnik – wyświetlany jako „–” ale wprowadzany jako &shy; , &#45; lub
&#x2D; - pozwala na łamanie linii (przeniesienie tekstu do następnej linii)
• <pre> - el. blokowy dla sformatowanego tekstu – przeglądarka nie łączy ze sobą
kolejnych „białych” znaków (np. spacje) i stara wyświetlić się tekst, w takiej formie w
jakiej jest on wprowadzony. (Atrybuty: id, class, lang, title, style, zdarzenia)
Przykład: tekst preformatowany
<body>
<p>W tej linii jest kilka spacji jedna po drugiej. Co na to przeglądarka?</p>
<p>W tej linii jest kilka twardych spacji nbsp jedna po
drugiej.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Co na to przeglądarka?</p>
<p>W tej linii używam długiej nazwy domeny. Ponieważ to jeden długi wyraz, przeglądarka nie
może go złamać: www.bardzodlugaaletonaprawdebardzodluganazwadomeny.com.pl. </p>
<p>W tej linii używam nazwy domeny z "miękkimi" myślnikami, które pozwalają na łamanie
tekstu we wskazanym miejscu jeśli zajdzie taka
potrzeba:www.bardzo&shy;dluga&shy;ale&shy;to&shy;naprawde&shy;bardzo&shy;dluga&shy;nazwa&shy;d
omeny.com.pl.
</p>
<pre>
W tym tekście jest kilka spacji jedna po drugiej. Przed tym tekstem.
Jest też kilka znaków
przejścia
do nowej
linii
czyli
enterów.
Co na to przeglądarka?
</pre>
</body>
</html>
070 – Cytaty i tekst formatowany: efekt
070 – Cytaty i tekst formatowany

1. Stwórz nowy plik 070.html.

2. Zamieść w dokumencie cytaty
1. długi (kilkulinijkowy - na przykład z Wikipedii) <blockquote>
2. krótki (niepełna linia) <q>
3. wskaż źródło cytatów (zarówno poprzez atrybtu cite jak i w treści dokumentu za
pomocą elementu <cite> )
4. Zamieść akapit tekstu <p> w którym:
a. pomiędzy wybranymi liniami przeglądarka wyświetli 4 linijki przerwy <br>
b. pomiędzy wybranymi wyrazami przeglądarka wyświetli 4 spacje odstępu &nbsp;
c. W którym znajdą się wzory H2O i E=mc2 (użyj indeksu dolnego i górnego: <sub> i
<sup>)
5. Zamieść fragment tekstu formatowanego w którym miejsca łamania linii będą wynikały
wprost z treści tekstu (a nie z elementów HTML). <pre>
a. Zamieść w tekście 4 powtarzające się spacje (jedna po drugiej), kilka znaków
tabulatora, znaki przejścia do następnej linii (enter)
b. dłuższy tekst nie zawierający żadnego znaku enter
6. Sprawdź działanie w przeglądarce. Sprawdź poprawność kodu walidatorem W3C
HTML – tekst: kontrola wersji

• <ins> tekst dodany do elementu (przydatne przy kontroli zmian w dokumencie)

• <del> tekst usunięty z elementu (przydatne przy kontroli zmian w dokumencie)
• <ins> i <del> mogą zachowywać się zarówno jak element blokowy jak i liniowy
(w zależności od elementu w którym są osadzone). Atrybuty <ins> i <del>:
• id, class, lang, title, style, zdarzenia
• cite – url do dokumentu który spowodował zmianę bieżącego dokumentu,
datetime – data i czas kiedy dokonano zmiany
Przykład: kontrola wersji
<!DOCTYPE html> <html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Przykładowa witryna</title>
</head>
<body>
<p>
wydawcy ogólnopolskiego dziennika
<del cite="https://pl.wikipedia.org/wiki/(%E2%80%A6)_lub_czasopisma"
datetime="2002-02-28T13:15:30+01:00"
title="modyfikacja w wyniku zaniżonej oferty korupcyjnej">
lub czasopisma</del>.
</p>
<footer>
Ostatnio aktualizowano:
<ins datetime="2002-02-28T13:15:30+01:00">
<time datetime="2002-02-28T13:15:30+01:00">
2002-02-28 13:15
</time>
</ins>
</footer>
</body> </html>
Listy

• Lista musi zawierać co najmniej 1 element.

• Listy mogą być zagnieżdżane w innych listach.
• <ul> - element zawierający listę nienumerowaną
• <ol> - element zawierający listę numerowaną
• <li> - element zawierający pozycję listy numerowanej lub nienumerowanej
• <dl> - element zawierający listę definicji
• <dt> - element liniowy zawierający pojedynczą definicję w liście
• <dd> - element blokowy zawierający opis pojedynczej definicji w liście
• Atrybuty <ul>, <ol>, <li>, <dl>, <dt>, <dd>:
• id, class, lang, title, style, zdarzenia.
• Pozostałe atrybuty uważane są za przestarzałe. Sposób wyświetlania list określa
się za pomocą stylów.
Listy - przykład
<article>
<h1>Rząd: grzebiące</h1>
<ul>
<li>Jarząbek zwyczajny</li>
<li>Pardwa mszarna</li>
<li>Cietrzew zwyczajny</li>
</ul>
<h1>Rząd: gołębiowe</h1>
<ol>
<li>Gołąb skalny</li>
<li>Grzywacz</li>
<li>Sierpówka</li>
</ol>
<h1>Rząd: nurkonose</h1>
<dl>
<dt>Burzyk żółtodzioby</dt>
<dd>gatunek dużego ptaka oceanicznego …</dd>
<dt>Burzyk szary</dt>
<dd>gatunek dużego ptaka wędrownego z rodziny burzykowatych ... </dd>
<dt>Burzyk północny</dt>
<dd>gatunek średniego ptaka oceanicznego z rodziny ...</dd>
</dl>
</article>
080 – Listy

1. Stwórz nowy plik 080.html.

2. Zamieść nienumerowaną listę zawierającą 3
owoce (<ul>, <li>)
3. Zamieść numerowaną listę zawierającą 3 warzywa
(<ol>, <li>)
4. Zamieść w dokumencie listę definicji zawierającą
skrót i jego rozwinięcie: www, http, html (można
skorzystać z Wikipedii) <dl>, <dt>, <dd>
5. Nad każdą z 3 list umieść nagłówek <h1>
6. Sprawdź wygląd dokumentu w przeglądarce
7. Sprawdź poprawność strony pod adresem
http://validator.w3.org
Ramki (frames)

• Ramki cieszyły się w latach 90tych i na początku XXI wieku dużą popularnością ze względu
na wygodę tworzenia menu
• Dają możliwość wyświetlania kilku niezależnych dokumentów jako 1 strony
• Obecnie nie są stosowane, ponieważ
• Nie widać adresów podstron (w pasku przeglądarki)
• kłopoty z dodawaniem podstron do ulubionych
• Kłopoty z przekazaniem adresu podstrony innym użytkownikom
• Kłopoty z drukowaniem
• Kłopoty z wyszukiwarkami
• Przy odświeżeniu strony następuje powrót do strony głównej
• Kłopoty z prezentacją w przeglądarkach tekstowych i czytnikach dla niewidomych
• Jedyny współcześnie wykorzystywany element ramek to <iframe> - jest częścią specyfikacji
HTML 5. Pozwala na wyświetlenie w ramce zewnętrznej strony
• atrybut sandbox, który pozwala dodać restrykcje poprawiające bepieczeństwo: allow-
forms, allow-popups, allow-same-origin, allow-scripts, and allow-top-navigation
• atrybut seamless pozwala regulować czy czy zawartość w ramce ma wyglądać na
zintegrowaną ze stroną ,czy ma się wyróżniać
Dzielenie treści na sekcje

<body> - element, w którym zawarta jest treść dokumentu. Występuje tylko jeden w
dokumencie.
<article> - element zawierający kompletną, samodzielną treść. Na przykład artykuł, wpis
na blogu, post w mediach społecznościowych czy na forum, raport itp.
<section> – służy do grupowania treści. Przykładami sekcji mogą być rozdziały eBooka,
Strona główna podzielona na sekcje wstępu, aktualności i danych kontaktowych itp.
<nav> – sekcja zawierająca nawigację (linki) prowadzące do treści zewnętrznych lub
wewnątrz witryny.
<aside> – sekcja powiązana z główną treścią, ale stanowiąca odrębną treść. Często będzie
reprezentowana graficznie w formie bocznych pasków takich jak „podobne artykuły” itp.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - Elementy służące do wyróżniania nagłówków
sekcji. <h1> to najwyższy poziom (ważność) nagłówka, <h6> to najniższy poziom
nagłówka.
<header> - Element służący do oznaczania treści wstępnej w sekcjach
<footer> - Element służący do oznaczania treści końcowej w sekcjach (stopka)
Przykład użycia sekcji
<article>
<header>
<h2>Jastrząb zwyczajny</h2>
<p><time datetime="2020-12-31">Opublikowano 3 dni temu</time></p>
</header>
<p> W dzisiejszym wpisie na blogu chciałbym przybliżyć ...</p>
<section>
<h3>Komentarze</h3>
<ol>
<li id="k1">
<p>Autor: Marian Kowalski</p>
<p>Miałem szczęście. Widziałem jastrzębia bodajże ...</p>
</li>
<li id="c2">
<p>Autor: Cecylia Dudek</p>
<p>Ja chyba jeszcze nigdy nie widziałam jastrzębia. Czy ... </p>
</li>
</ol>
</section>
<aside>
<h4>Podobne wpisny na temat ptaków drapieżnych</h4>
<nav> <a href="orlik.html">Orlik krzykliwy</a>,<br> </nav>
</aside>
<footer> <p>2 123 wyświetleń</p> </footer>
</article>
090 – Artykuły: efekt
090 – Artykuły

1. Stwórz nowy plik HTML: 090.html z informacjami o gruszach.

2. Zmodyfikuj dokument tak aby wewnątrz <body> zawierał:
1. Nagłówek <header> (na początku) i stopkę <footer> (na końcu) z
zamieszczonymi wewnątrz akapitami tekstu <p>. Tekst w akapitach powinien
być odpowiednio wprowadzeniem i podsumowaniem tematu o gruszach.
2. Po zamknięciu elementu <header>, ale przed rozpoczęciem elementu <footer>
dodaj sekcję <section>.
3. Wewnątrz sekcji dodaj 2 artykuły <article> o 2 różnych gatunkach gruszek.
4. Oba artykuły mają mieć w środku nagłówki wykorzystujące elementy <h2>
5. Po zakończeniu zamknięciu <section>, a przed otwarciem <footer> dodaj
element <aside> oznaczający treść poboczną.
6. Wewnątrz <aside> dodaj element <nav>. Wewnątrz <nav> dodaj tekst:
„Jabłonie, Wiśnie”. To będzie miejsce na dodanie w przyszłości linków
prowadzących do dokumentów o jabłoniach i wiśniach.
3. Sprawdź poprawność strony pod adresem http://validator.w3.org
4. Sprawdź działanie w przeglądarce. Czy elementy HTML 5 mają wpływ na wygląd?
Elementy interaktywne i grupowanie treści
<hr> - element reprezentujący przejście do innego tematu (nie ma tagu zamykającego, podobnie jak <br>).
Zwykle reprezentowany przez linię poziomą.
<figure> - element reprezentujący samodzielną treść, która jest wymieniana lub opisywana w głównej treści
dokumentu, ale jest umieszczona poza nią.
<figcaption> - opcjonalny element zamieszczany wewnątrz<figure>. Służy do oznaczania tytułu elementu
<figure>
<main> - element oznaczający główną treść dokumentu HTML. W dokumencie może znajdować się co
najwyżej jeden widoczny element <main>.
<div> - element który nie ma żadnego konkretnego znaczenia. Nagminnie nadużywany przede wszystkim do
formatowania treści za pomocą stylów CSS. Powinno się go używać jedynie wtedy, gdy rzeczywiście nie pasuje
żaden inny element mający znaczenie semantyczne.
<iframe> - Element służący do wyświetlenia w danym dokumencie HTML zawartości innego dokumentu
HTML, na przykład innej strony internetowej.
<details> – element służy do wyświetlania dodatkowych informacji
i kontrolek/pól. Dopóki element nie jest aktywowany kliknięciem, wyświetla jedynie zawartość elementu
<summary> w nim zagnieżdżonego.
<summary> - element zachęcający do wyświetlania dodatkowych informacji zawartych w elemencie
<details> (element musi być zagnieżdżony wewnątrz <details>).
dialog – element reprezentujący część aplikacji, która odpowiada za interakcję z użytkownikiem. Daje efekt
okna modalnego, zakrywającego inne elementy wyświetlane pod spodem. Element jest ukryty, chyba, że
zostanie ustawiony atrybut open.
Przykład: elementy interaktywne i grupowanie treści
<main>
<h1>Wiersz stychiczny </h1>
<p>Wiersz zbudowany z wersów ciągłych, w którym nie występuje ...</p>
</main>
<figure>
<figcaption>Pan Tadeusz</figcaption>
<details>
<summary> <q>Litwo! Ojczyzno moja! ty jesteś jak zdrowie...</q> </summary>
<blockquote>
<pre>
Ile cię trzeba cenić, ten tylko się dowie,
Kto cię stracił. Dziś piękność twą w całej ozdobie ...
</pre>
</blockquote>
</details>
</figure>
<hr>
<aside>
<p>A teraz coś z zupełnie innej beczki. Naciśnij przycisk ...</p>
<dialog open="open"><input type="button" onclick="s()" value="Rozpocznij miażdżenie"> </dialog>
<iframe src="https://pl.wikipedia.org/wiki/Lataj%C4%85cy_cyrk_Monty_Pythona" style='width:
100%; height: 500px;'></iframe>
</aside>
Przykład: elementy interaktywne i grupowanie treści - efekt
100 – Wyróżnianie: efekt
100 – Wyróżnianie

1. Stwórz nowy plik HTML: 100.html

2. Dodaj artykuł <article>. W artykule zamieść:
1. Akapit tekstu <p> opisujący informacje o zdjęciu gruszy pospolitej które zostanie
zamieszczone później w dokumencie. Zdjęcie gruszy i tekst jej dotyczący możesz
ściągnąć z Wikipedii.
1. W akapicie oznacz wybrany fragment jako nieaktualny <s>, fragment jako
istotny <b>, fragment jako odróżniający się stylistycznie <u> i fragment
odróżniający się językowo <i>
2. Akapit tekstu <p>, a w nim element <time> wraz z atrybutem datetime. Wewnątrz
<time> zamieść datę utworzenia dokumentu.
3. Zdjęcie gruszy wkopiuj do katalogu w którym znajduje się plik 100.html.
4. Dodaj element <figure> używany do oznaczania referencji pojawiających się w
głównej treści dokumentu. Wewnątrz <figure>:
1. Nadaj tytuł dla <figure> używając <figcaption>
2. Wstaw zdjęcie <img src="nazwa_pliku.jpg" alt="Grusza"> - zamiast
nazwa_pliku.jpg, użyj faktycznej nazwy pliku wkopiowanego do folderu.
3. Sprawdź poprawność strony pod adresem http://validator.w3.org
4. Sprawdź działanie w przeglądarce. Które z elementów wpływają na efekt wizualny?
110 – iframe: efekt
110 – iframe

1. Stwórz nowy plik HTML: 110.html

2. Zamieść dłuższy cytat z Wikipedii używając <blocquote>, z
fragmentem cytatu wyróżnionym za pomocą <mark>
3. Poniżej, w akapicie <p>, zamieść długi tekst bez spacji (np.
konstantynopolitańczykiewiczówna) z określeniem w których
miejscach w tym długim wyrazie, może wystąpić przejście do
nowej linii - użyj <wbr>
4. Na dole strony wyświetl zawartość witryny poznan.pl <iframe
src="http://poznan.pl" style="width: 100%; height: 500px;">
5. Sprawdź działanie w przeglądarce (zwróć uwagę czy przy zmianie
rozmiaru okna przeglądarki długi wyraz jest łamany w miejscu
wskazanym przez <wbr>)
6. Sprawdź poprawność strony pod adresem http://validator.w3.org
120 – szczegóły

1. Stwórz nowy plik HTML: 120.html

2. Dodaj rozwijalny element „Szczegóły” jak na
zrzucie ekranu (<details>, <summary>
wewnątrz <details>) z krótką informacją o
gatunkach gruszek.
3. Sprawdź działanie w różnych przeglądarkach
4. Sprawdź poprawność strony pod adresem
http://validator.w3.org
Adresy URI/URL

• URI – z ang. Universal Resource Identifier

• URL – z ang. Uniform Resource Locator
• składa się zwykle z 3 części:
• Nazwa mechanizmu używanego aby uzyskać dostęp do zasobu
• Nazwa serwera gdzie znajduje się zasób
• Nazwa i ścieżka do zasobu
• Przykład: http://www.w3.org/TR
• URI/URL może wskazywać nie tylko zasób, ale także określone miejsce wewnątrz
zasobu: http://www.przyklad.pl/sciezka/zasob.html#sekcja3
• W HTML URI ma szereg zastosowań, min. służy do linkowania dokumentów z innymi
zasobami, arkuszami stylów, dołączania grafik.
Hiperłącza <a>

• <a> - element hiperłącza umieszczany w sekcji <body> służy do wyświetlania linków

przenoszących do innych dokumentów lub sekcji wewnątrz dokumentu
• jest wyświetlany przez przeglądarkę
• może zawierać inne elementy (np. grafikę)
• Nie można zagnieżdżać <a> w <a>
• Ważniejsze atrybuty <a>:
• href – lokalizacja elementu docelowego (podana jako URI/URL),
• target – kontekst przeglądarki (pozwala otworzyć link w nowej zakładce/oknie)
• download – czy otworzyć zasób w oknie przeglądarki, czy go tylko ściągnąć
• hreflang – kod języka dokumentu docelowego,
• type - typ MIME – rodzaj dokumentu docelowego (np. application/pdf),
Hiperłącza - przykład

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Przykładowa witryna</title>
</head>
<body>
<p>
<a href="http://www.onet.pl">Link do Onetu</a>
</p>
</body>
</html>
Względne adresy

• Względny adres jest przekształcany na pełny przy wykorzystaniu adres

bazowy bieżącego dokumentu
• <a href=”przyklad.html”> wywołane z dokumentu o adresie bazowym
http://www.przyklad.pl/katalog1/test.htm zostanie rozwinięte przez
przeglądarkę do http://www.przyklad.pl/katalog1/przyklad.htm
• .. – oznacza lokalizację o 1 katalog wyżej
• / - oznacza przejście z danego katalogu do innego
• <a href=”../katalog2/przyklad2.htm”> zostanie rozwinięte przez
przeglądarkę do http://www.przyklad.pl/katalog2/przyklad2.htm
Adresy względne: przykład

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Strona o gruszkach</title>
</head>
<body>
<p>Wszelkie informacje o gruszkach</p>
<p>Szukasz informacji o innych roślinach?
Zajrzyj na strony o:
<a href="../jablka/index.html">jabłkach</a>,
<a href="../../warzywa/por/index.html">porach</a> lub
<a href="../../warzywa/seler/index.html">selerach</a>
</p>
</body>
</html>
130 – Linki

1. Stwórz strukturę katalogów i plików HTML

jak na obrazku.
2. W plikach dodaj nagłówki <h1> z
zawartością taką jak nazwa pliku, tak by łatwo
było odróżnić pliki od siebie w przeglądarce.
3. W pliku ssaki.html dodaj:
1. Łącza do portali onet.pl i wp.pl <a
href="http://…">
2. Łącza (adresy względne) do pozostałych
dwóch plików <a href="...">
3. komentarz <!-- … -->
4. Sprawdź działanie hiperłącz i poprawność
dokumentu http://validator.w3.org
HTML – <base>

• <base> - element umieszczany w sekcji <head> w którym ustawiany jest adres

bazowy (używany do przekształcania adresów względnych w pełne)
• <base> musi pojawić się w <head> przed pierwszym użyciem adresu względnego.
Nie ma tagu zamykającego ani zawartości!
• atrybut href określa bazowy adres
• Przeglądarka przy ustalaniu adresu bazowego próbuje korzystać z następujących
informacji (od najwyższego do najniższego priorytetu)
• URL podane w <base>
• URL podane w nagłówku HTTP
• adres bieżącego dokumentu
• <base> jest przydatny gdy witryna jest dostępna pod kilkoma adresami, ale jeden z
nich jest preferowany (np. ze względu na pozycjonowanie)
Przykład <base>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Przykładowa witryna</title>
<base href="http://www.przyklad.pl/folder3/strona3.html">
</head>
<body>
<p>
<a href="../folder2/strona2.html">Link do Onetu</a>
</p>
</body>
</html>
Kotwice

• Hiperłącza (linki, hiperłącza) pozwalają nawigować między różnymi dokumentami

• Kotwice (ang. anchor) to nazwane elementy w dokumencie
• Kotwice wizualnie nie wyróżniają się niczym od innych elementów w dokumencie
• Dla elementu który ma się stać kotwicą ustawia się atrybut id
• Hiperłącze może prowadzić do dokumentu, lub do konkretnej kotwicy w nim
• Do kotwicy odwołać się można za pomocą znaku #
Kotwice – przykład 1/2
<nav>
<ul>
<li><a href="#sowy">Informacje o sowach</a></li> <!--link do kotwicy-->
<li><a href="#dzieciolowate">Informacje o dzięciołowatych</a></li>
</ul>
</nav>
<main>
<section id="sowy"> <!-- kotwica -->
<h2>Sowy</h2>
<h3>Puszczyk zwyczajny</h3>
<p>Puszczyk (Strix aluco) – gatunek ptaka z rodziny... </p>
<h3>Puchacz zwyczajny</h3>
<p>Puchacz zwyczajny, puchacz (Bubo bubo) – gatunek dużego, ...</p>
</section>
<section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3>
<p>Dzięcioł duży, dzięcioł pstry większy (Dendrocopos major)...</p>
<h3>Dzięcioł średni</h3>
<p>Dzięcioł średni (Dendrocoptes medius)[3] – gatunek średniego ...</p>
</section> </main>
Kotwice – przykład 2/2 - efekt

Efekt przed kliknięciem linku: Efekt po kliknięciu linku „Informacje o dzięciołowatych”

140 – Kotwice

1. Utwórz nowy poprawny dokument 140.html – na

przykład na temat warzyw i owoców.
2. Umieść 2 nagłówki <h1> (rozdziały: owoce, warzywa), a
pod każdym 3 nagłówki <h2> (podrozdziały: Jabłko,
Gruszka, Czereśnia, Por, Ziemniak, Pietruszka).
3. Każdy z nagłówków <h1> i <h2> ma być kotwicą
(ustaw atrybuty id="..." na unikatowe wartości)
4. Pod każdym z nagłówków zamieść 1 bardzo długi
akapit tekstu <p> (skopiuj z Wikipedii). Łącznie
dokument powinien mieć kilka stron tekstu i wymagać
przewijania w dół.
5. Na dole strony zamieść spis treści z łączami do
wszystkich kotwic (nagłówków) w dokumencie <a
href="#...">.
6. Sprawdź działanie i wygląd dokumentu w
przeglądarkach, klikając na linki w spisie treści
7. Sprawdź poprawność strony pod adresem
http://validator.w3.org
HTML – typy linków rel, rev

• Wartości jakie dla atrybutów rel i rev definiuje HTML:

• Alternate – alternatywna wersja dokumentu
• Stylesheet – kaskadowy arkusz stylów
• Start – pierwszy dokument z większego zbioru
• Next – następny dokument
• Prev - poprzedni dokument
• Content – spis treści
• Index – indeks bieżącego dokumentu
• Glossary – słownik pojęć
• Copyright – dokument opisujący prawa autorskie
• Chapter – rozdział
• Section – sekcja
• Subsection - podsekcja
• Appendix – aneks
• Help – dokument z pomocą
• Bookmark – link do kotwicy w innym dokumencie
HTML – atrybut target

• Atrybut target został stworzony z myślą o ramkach, ale często jest stosowany do
wyświetlenia łącz w nowym oknie.
• Wyświetlanie linków w nowym oknie jest uznawane za złą praktykę (jest denerwujące
dla użytkowników)
• Zastosowanie w elementach: <a>, <area>, <base>, <form>, <link>
• Następujące nazwy celów (atrybut target) są zarezerwowane
• _blank – przeglądarka ma otworzyć łącze w nowym nienazwanym oknie
• _self – przeglądarka ma otworzyć link w bieżącym oknie
• _parent – przeglądarka ma otworzyć link w nadrzędnym oknie, jeśli takiego nie
ma to jest równoznaczne z _self
• _top – przeglądarka ma otworzyć link w głównym oknie (pierwszym) – jeśli
takiego nie ma, równoważne _self
150 – Target

1. Utwórz nowy poprawny dokument 150.html

2. Zamieść w nim hiperłącza do witryn onet.pl i wp.pl tak aby
otwierały się w nowym oknie (użyj atrybutu target dla elementu <a
target="…">)
3. Sprawdź działanie w przeglądarce klikając na linki
4. Sprawdź poprawność strony pod adresem http://validator.w3.org
Tabele: <table>

• <table> - element zawierający tabelę Atrybuty:

• summary – podsumowanie zawartości i struktury tabeli (np. dla czytników stron
dla niewidomych, wyszukiwarek)
• id, class, lang, dir, title, style, zdarzenia
• frame, rules, border, cellspacing, cellpadding, width
• Tabelom można przypisać dir
• rtl – kolumny układane są od prawej,
• ltr – kolumny układane są od lewej
• <caption> – tytuł tabeli – może występować tyko bezpośrednio za table i tylko raz
dla danej tabeli
• Atrybuty: id, class, lang, dir, title, style, zdarzenia
Tabele - sekcje

<thead> – element opisujący nagłówek tabeli (tylko 1 dla danej tabeli),

<tfoot> – element opisujący stopkę tabeli (tylko 1 dla danej tabeli),
<tbody> – element zawierający treść tabeli (może być ich wiele dla danej tabeli).

Ważniejsze atrybuty <thead>, <tfoot>, <tbody>:

• id, class, lang, dir, title, style, zdarzenia,

Podział na nagłówek, stopkę i treść jest opcjonalny

Nagłówek i stopka powinny zawierać informacje o kolumnach tabeli.
Każda z 3 sekcji musi posiadać co najmniej jeden element <tr>.
Tabele - grupowanie
Grupy kolumn pozwalają na tworzenie struktur w tabeli, które mogą być wygodnie wyróżniane za
pomocą stylów.
Jeśli w tabeli nie zostały stworzone grupy, to przeglądarka zakłada, że jest tylko 1.

<colgroup> – pozwala zdefiniować grupę kolumn.

<col> – pozwala przypisać atrybuty dla wielu kolumn jednocześnie, ale nie tworzy z nich grupy. Może
pojawiać się wewnątrz <colgroup>
lub niezależnie od <colgroup>.

Ważniejsze atrybuty <colgroup> i <col>:

• id, class, lang, dir, title, style, zdarzenia;
• span – liczba kolumn, które tworzą grupę (dla <colgroup>)
lub o których będą stosować się zdefiniowane atrybuty (<col>). Domyślna wartość span to 1.
Tabele - grupowanie: przykład
<table style="width: 100%;"> <!-- tabela na całą szerokość -->
<caption>Rasy psów</caption>
<colgroup style="background: lightblue;"> <!--ustaw. tła dla wszystkich kolumn w grupie-->
<col style="background:steelblue;width:30%;"><!--ustaw koloru tła i szer. pierwszej kol. -->
<col style="width: 50%;"> <!--kolor odziedziczony z colgroup-->
<col style="width: 20%;">
</colgroup>
<thead>
<tr> <th>Oryginalna nazwa rasy</th> <th>Nazwa polska</th> <th>Pochodzenie</th> </tr>
</thead>
<tbody>
<tr>
<td lang="de-DE">deutsch Drahthaar</td><td>wyżeł niemiecki szorstkowło</td><td>Niemcy</td>
</tr>
<tr>
<td lang="fr-FR">basset fauve de Bretagne</td> <td>basset bretoński</td> <td>Francja</td>
</tr>
</tbody>
<tfoot> <tr> <th>Podsumowanie:</th> <th>2 rasy</th> <th>2 kraje</th> </tr> </tfoot>
</table>
Tabele - komórki

<tr> – element zawierający wiersz tabeli. Ważniejsze atrybuty:

• id, class, lang, dir, title, style, zdarzenia,

<th> – komórka tabeli zawierająca nagłówek.

<td> – komórka tabeli zawierająca treść.

Komórki można ze sobą łączyć albo w wierszach (rowspan), albo

w kolumnach (colspan). Ta sama komórka nie może być jednocześnie połączona z
innymi w wierszach i w kolumnach.
Formatowanie tabel jest dostępne w CSS od wersji 2.
Tabele - atrybuty komórek
Atrybuty <th> i <td>:
id, class, lang, dir, title, style, zdarzenia;
rowspan – liczba kolejnych komórek w kolejnych wierszach, które mają być złączone. Domyślna wartość
1. 0 oznacza,
że wszystkie komórki w bieżącej sekcji (<thead>,<tbody>,<tfoot>), począwszy od bieżącej komórki, mają
być połączone w jedną,
colspan – liczba kolejnych komórek w kolejnych kolumnach, które mają być złączone. Domyślna wartość
1. 0 oznacza.
że wszystkie komórki z kolumn należących do bieżącej grupy kolumn (<colgroup>), począwszy od
bieżącej komórki, mają być połączone w jedną.
headers – lista oddzielonych spacją identyfikatorów nagłówków (ustawionych przez atrybut id), które
odnoszą się do zawartości bieżącej komórki;
abbr – zastosowanie tylko dla elementów nagłówkowych <th>. Alternatywny tekst zawartości komórki
nagłówkowej. Zwykle skrócona wersja zawartości komórki nagłówkowej. Wykorzystywane np. do
przetwarzania skryptami.
scope – zastosowanie tylko dla elementów nagłówkowych <th>. Przypisana wartość określa, do jakiego
zakresu ten nagłówek ma zastosowanie:
row – nagłówek dla bieżącego wiersza,
col – nagłówek dla bieżącej kolumny,
rowgroup – nagłówek dla bieżącej grupy wierszy,
colgroup – nagłówek dla bieżącej grupy kolumn,
Tabele - przykład
<table>
<caption> Dzienne zużycie kawy na spotkaniach zespołowych</caption>
<thead>
<tr>
<th id="n1">Zespół</th>
<th id="n3" abbr="Rodzaj" colspan="2">Rodzaj kawy</th>
<th id="n2" colspan="2">Filiżanki</th>
<th id="n4">Kostki cukru?</th>
</tr></thead>
<tbody>
<tr>
<td headers="n1">Dział planowania produkcji</td> <th headers="n3" id="k1">Espresso</th>
<th headers="n3" id="k2">Cappuchino</th> <td headers="n2 k1">8</td>
<td headers="n2 k2">3</td> <td headers="n4">Tak</td>
</tr> <tr>
<td headers="n1">Dział marketingu</td> <th headers="n3" id="k3">Latte</th>
<th headers="n3" id="k4">Mocha</th> <td headers="n2 k3">6</td>
<td headers="n2 k4">5</td> <td headers="n4">Nie</td>
</tr>
<tbody>
</table>
160 – Tabele
1. Utwórz nowy dokument 160.html
2. Utwórz tabelę o układzie przypominającym ten poniżej. Aby widoczne były krawędzie w
sekcji <head> dodaj następujący kod css:
<style>
table {border-collapse: collapse}
td, th { border: 1px solid blue; padding: 10px; }
</style>
3. Tworzenie wierszy: <tr>, komórek: <td>, komórek nagłówkowych <th>
4. Do scalania wierszy używamy atrybutu komórki rowspan, kolumn colspan
5. W tabeli możesz oznaczyć sekcje: nagłówka (pierwszy wiersz): <thead>, treści <tbody> i
stopki (ostatni wiersz) <tfoot>
6. Zatytułuj tabelę używając <caption>
Wstawianie grafiki do dokumentu
• <img> - element oznaczający plik graficzny. Może występować w dokumencie samodzielnie, lub
wewnątrz elementu <picture>. Ważniejsze atrybuty <img>:
• alt – opis grafiki, wykorzystywany kiedy grafiki nie można wyświetlić
• src – adres pojedynczego pliku z grafiką
• srcset – zestaw plików z grafiką
• sizes – informacje o rozmiarach grafik zawartych w srcset na podstawie których przeglądarka
wybierze który wariant grafiki wyświetlić.
• <picture> - kontener zawierający informacje o dostępnych wariantach pliku graficznego, który ma
być wyświetlany poprzez element <img> zawarty wewnątrz <picture>. Autor strony definiuje przy
jakich warunkach, który z wariantów grafiki ma być wyświetlony (uwzględnić można gęstość pikseli,
rozmiar obszaru wyświetlania, format obrazka, itp.). Jeśli przeglądarka nie obsługuje <picture>, lub
nie może załadować pożądanego wariantu grafiki, to wyświetli grafikę zdefiniowaną w atrybucie src
elementu <img> zawartego w środku <picture>
• <source> – pozwala wskazywać alternatywne wersje plików multimedialnych. W powiązaniu z
elementem <picture> i <img> pozwala na wskazywanie wariantów plików graficznych. Ważniejsze
atrybuty <source:
• src – adres pojedynczego pliku
• srcset – zestaw plików które mają być używane w różnych sytuacjach
• sizes – informacje o rozmiarach grafik zawartych w srcset na podstawie których przeglądarka
wybierze który wariant grafiki wyświetlić.
Przykład - wstawianie pliku graficznego

<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Przykładowa witryna - wtyczki</title>
</head>
<body>
<h1>Grusza pospolita</h1>
<img src="grafika/grusza-pospolita.jpg" alt="Zdjęcie gruszy
pospolitej">
</body>
</html>
170 – Grafika

1. Ściągnij z Internetu 2 dowolne pliki graficzne i zapisz je

do katalogu w którym pracujesz z plikami HTML.
2. W stwórz nowy dokument HTML o nazwie 170.html
3. Wstaw oba pliki do nowo utworzonego dokumentu <img
src="…" alt="…">
4. Wstaw do dokumentu kolejny obraz który znajduje się na
serwerze w Internecie. Np. użyj takiego adresu:
http://upload.wikimedia.org/wikipedia/commons/6/61/HT
ML5_logo_and_wordmark.svg
5. Wykorzystując atrybut alt dodaj krótki opis co
przedstawiają dołączone rysunki
6. Sprawdź działanie w przeglądarce
7. Sprawdź poprawność witryny (http://validator.w3.org)
Wyzwania związane z wyświetlaniem grafiki – szerokość ekranu

• Ekran telefonu jest wielokrotnie mniejszy niż ekran laptopa czy komputera.
• Dopasowanie wymiarów grafiki do ekranu laptopa czy komputera, spowoduje,
że na urządzenie mobilne ściągnięty zostanie duży plik, który trzeba
przeskalować w dół, aby go poprawnie wyświetlić.
• Dopasowanie wymiaru grafiki do rozmiaru telefonu spowoduje, że dla ekranu
komputera trzeba będzie je przeskalować w górę, co negatywnie odbije się na
jakości obrazu (efekt widocznych pikseli itp.).
Wyzwania związane z wyświetlaniem grafiki – rozdzielczość

• Rozdzielczość ekranu oznaczamy w pikselach, czyli punktach z których składa się ekran. Na
przykład ekran o rozdzielczości 1024 na 768 pikseli, składa się z pikseli ułożonych w 1024
kolumnach i 768 wierszach.
• Rozróżniamy dwa rodzaje pikseli:
• piksele fizyczne: ilość fizycznych punktów świetlnych, z których składa się ekran.
• piksele CSS: ilość punktów ekranu rozróżnianych przez przeglądarkę.
• Te 2 wartości mogą się różnić, ponieważ producenci w droższych urządzeniach decydują się
na większą niż standardowa gęstość pikseli fizycznych, aby poprawić jakość obrazu. Poniższy
przykład przedstawia w powiększeniu jakość krawędzi jaką można uzyskać na zwykłym
ekranie oraz na ekranach o podwójnej lub potrójnej gęstości pikseli.
Wyzwania związane z wyświetlaniem grafiki – współczynnik skalowania
• Stosunek liczby pikseli fizycznych do pikseli CSS określamy jako współczynnik skalowania.
• Współczynnik skalowania zwykle podawany jest w zaokrągleniu. Jeśli urządzenie ma współczynnik
skalowania 1, oznacza to, że aby wyświetlić w odpowiedniej jakości obraz o rozmiarze 100px na 100px,
wystarczy go dostarczyć w rozmiarze 100px na 100px.
• Jeśli chcemy wyświetlić taką grafikę na wyświetlaczu o wyższym poziomie gęstości pikseli, np. o
współczynniku skalowania 2, to obraz powinien mieć wymiary 200px na 200px.
• Jeśli będzie dostarczony w mniejszym rozmiarze, to przeglądarka lub system operacyjny dokona jego
skalowania do rozmiaru 200px na 200px, co spowoduje spadek jakości. Poniższa tabela przedstawia
niektóre telefony firmy Apple – ich rozmiar, liczbę pikseli fizycznych, liczbę pikseli CSS oraz
współczynnik skalowania. Model Przekątna Rozdzielczość Rozdzielczość Gęstość Wsp.
telefonu ekranu fizyczna (px) CSS (px) pikseli skalowania
(cale) (ppi)
iPhone 3 3,5 320x480 320x480 165 1
Właściwości własnego urządzenia możesz
iPhone 4 3,5 640x960 320x480 326 2
sprawdzić np. na stronie http://mydevice.io
iPhone 5 4 640x1136 320x568 326 2

iPhone 6 4,7 750x1334 375x667 326 2

iPhone 7 4,7 750x1334 375x667 326 2

iPhone 8 4,7 750x1334 375x667 326 2

iPhone X 5,8 1125x2436 375x812 458 3

Wyzwania związane z wyświetlaniem grafiki – orientacja, powiększanie, łącze
• Użytkownicy mogą używać różnej orientacji wyświetlacza.
• Dodatkowo w przypadku urządzeń mobilnych, orientacja w każdej chwili może być zmieniona.
• Wymiar grafiki dobrany do widoku pionowego będzie wymagał skalowania w górę do widoku
poziomego, co odbije się na jakości wyświetlanej grafiki.
• Użytkownik może w każdej chwili użyć powiększenia, by przybliżyć obraz lub fragment dokumentu.
Przy użyciu grafiki o zbyt małych wymiarach, jakość obrazu wyświetlanego przy powiększeniu widoku
może być nieodpowiednia.
• Przepustowość łącza internetowego i opóźnienia w przesyłaniu mogą być różne dla różnych
użytkowników. W przypadku urządzeń mobilnych warunki sieciowe mogą zmieniać się w krótkim
czasie, jeśli użytkownik się porusza. Zastosowanie zbyt „ciężkich” grafik o nadmiernie dużych
wymiarach może znacznie wydłużyć ładowanie się strony.
Wyświetlanie grafiki – podejścia
• Wyświetlanie grafiki na całej dostępnej szerokości okna przeglądarki,
przy użyciu różnych wariantów tej samej grafiki.

• Wyświetlanie plików graficznych w różnych układach w zależności od

dostępnej szerokości ekranu

• Prezentowanie różnych wariantów grafiki dla różnych orientacji ekranu,

np. pełnej grafiki dla ekranu o orientacji poziomej i jedynie jej wycinka
dla ekranu o orientacji pionowej

• Używanie rożnych formatów grafiki – np. takich, które lepiej się

kompresują dla urządzeń mobilnych a innych formatów dla ekranów
komputerowych.
Wybór grafiki oparty o gęstość pikseli (stały rozmiar grafiki)
• Strategia, w której wymiary wyświetlanego pliku graficznego są z góry znane i wskazane poprzez
atrybuty width (szerokość) oraz height (wysokość) lub przez analogiczne właściwości CSS.
• Za pomocą atrybutów src oraz srcset elementu <img> można wskazać warianty pliku graficznego,
które różnią się gęstością pikseli, przy założeniu, że będą wyświetlane w wymiarze określonym przez
atrybuty width/height.
• Do oznaczania rozmiarów wariantów grafiki wykorzystywany jest deskryptor x wskazujący gęstość
pikseli (współczynnik skalowania).
• Wariant pliku wskazany w atrybucie src, traktowany jest jako wersja podstawowa grafiki o rozmiarze
1x – podstawowa gęstość pikseli (współczynnik skalowania = 1).
• W atrybucie srcset wskazuje się pozostałe wersje grafiki, wraz z określeniem ich gęstości pikseli
względem wariantu wskazanego w src – używając deskryptora x, np. 2x będzie oznaczało grafikę o
dwukrotnie większej gęstości pikseli niż wariant wskazany w src.
• Przeglądarka sama decyduje, którego z wariantów grafiki użyć. Algorytm przeglądarki może
wykorzystać takie czynniki jak gęstość pikseli na ekranie, powiększenie/przybliżenie czy jakość łącza
sieciowego.
• Jeżeli przeglądarka jest przestarzała i nie obsługuje atrybutu srcset, to po prostu wyświetli
podstawowy wariant grafiki wskazany w atrybucie src
• Deskryptora x nie należy używać w sytuacji, gdy wyświetlany rozmiar grafiki zależy od szerokości
obszaru wyświetlania. Deskryptora x używa się, gdy grafice narzucamy konkretny wymiar.
Wybór grafiki oparty o gęstość pikseli (stały rozmiar grafiki) - przykład
120 img x.html
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Przykładowa witryna - grafika</title>
</head>
<body>
<main>
<h1>Kuropatwa zwyczajna</h1>
<img src="grafika/kuropatwa-200.jpg"
srcset="grafika/kuropatwa-100.jpg 0.5x,
grafika/kuropatwa-300.jpg 1.5x, grafika/kuropatwa-400.jpg 2x,
grafika/kuropatwa-500.jpg 2.5x, grafika/kuropatwa-600.jpg 3x"
alt="Zdjęcie kuropatwy" width="200" height="129">
</main>
</body>
</html>
Wybór grafiki oparty o obszar wyświetlania
• Za pomocą atrybutów src oraz srcset elementu <img> można wskazać warianty pliku graficznego,
które różnią się jedynie rozmiarem.
• Za pomocą atrybutu sizes wskazuje się wymiary, w jakich ma być wyświetlana grafika w
poszczególnych sytuacjach.
• Do wskazania wymiaru używa się deskryptora vw (szerokość) i/lub vh (wysokość).
• 100vw oznacza pełną szerokość obszaru wyświetlania, 50vw połowę szerokości obszaru
wyświetlania, 1vw – 1% obszaru wyświetlania itd. Podobnie 100vh oznacza pełną wysokość
obszaru wyświetlania.
• Można również użyć vmin (wybiera vh lub vw – zależy, która z wartości jest niższa) oraz vmax
(wybiera vh lub vw – zależy, która z wartości jest większa)
• Szerokość grafiki w atrybucie srcset oznacza się deskryptorem w. 100w oznacza grafikę o szerokości
100px.
• Na podstawie deskryptorów w oraz rozmiaru przestrzeni na grafikę wskazanego w sizes (vw, vh), dla
poszczególnych wariantów grafiki przeglądarka wylicza gęstość pikseli poszczególnych grafik dla
konkretnego rozmiaru obszaru wyświetlania.
• Przeglądarka sama decyduje, którego z wariantów grafiki użyć. Algorytm przeglądarki może
wykorzystać takie czynniki jak gęstość pikseli na ekranie, powiększenie/przybliżenie czy jakość łącza
sieciowego.
• Jeżeli przeglądarka jest przestarzała i nie obsługuje atrybutu srcset, to po prostu wyświetli
podstawowy wariant grafiki wskazany w atrybucie src
Wybór grafiki oparty o obszar wyświetlania - przykład
125 img w.html
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<title>Przykładowa witryna - grafika</title>
</head>
<body>
<main>
<h1>Drozd śpiewak</h1>
<img src="grafika/drozd-100.jpg"
srcset="grafika/drozd-100.jpg 100w, grafika/drozd-200.jpg 200w,
grafika/drozd-400.jpg 400w, grafika/drozd-800.jpg 800w,
grafika/drozd-1200.jpg 1200w, grafika/drozd-1600.jpg 1600w,
grafika/drozd-1920.jpg 1920w, grafika/drozd-3000.jpg 3000w"
sizes="95vw"
alt="Zdjęcie drozda śpiewaka">
</main>
</body>
</html>
Warunkowe wskazywanie rozmiaru grafiki
• Atrybut sizes elementów img, source pozwala na warunkowe ustalenie rozmiaru
wyświetlanego pliku.
• Warunków może być wiele, oddziela się je od siebie przecinkami.
• Warunki zamykane są w nawiasach okrągłych.
• Po spacji podaje się, w jakim rozmiarze ma być wyświetlany plik graficzny używając
jednostek vw, vh, vmin lub vmax.
• W warunkach można używać wszystkich właściwości wspieranych przez specyfikację
Media Queries (moduł CSS pozwalający na sprawdzanie różnych właściwości
przeglądarki i urządzenia).
• W warunkach można używać wszystkich właściwości wspieranych przez CSS, takich
jak np. cm (centymetry), px (piksele), em (rozmiar czcionki dla danego elementu),
rem (rozmiar czcionki elementu-korzenia czyli elementu html) itp.
Warunkowe wskazywanie rozmiaru grafiki – operatory i właściwości

• Można używać między innymi następujących właściwości i operatorów logicznych:

• min- - prefiks używany do wskazania wartości minimalnej
• max- - prefiks używany do wskazania wartości maksymalnej
• width – szerokość obszaru wyświetlania
• device-width – szerokość urządzenia
• height – wysokość obszaru wyświetlania
• device-height – wysokość urządzenia
• device-aspect-ratio – współczynnik szerokości do wysokości urządzenia (np.: 4:3, 16:9
itp.)
• orientation – ułożenie ekranu pionowe lub poziome
• resolution – gęstość pikseli ekranu przy przybliżeniu 100%
• color – liczba bitów przypadających na opisanie składowej koloru
• color-index – liczba kolorów które jest w stanie wyświetlić urządzenie
• not - przeciwieństwo warunku
• or – lub (suma logiczna)
• and – i (iloczyn logiczny)
Warunkowe wskazywanie rozmiaru grafiki – przykład
<!doctype html> 130 img w vw.html
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Przykładowa witryna - grafika</title>
</head>
<body>
<main>
<h1>Drozd śpiewak</h1>
<img src="grafika/drozd-100.jpg"
srcset="grafika/drozd-100.jpg 100w, grafika/drozd-200.jpg 200w,
grafika/drozd-400.jpg 400w, grafika/drozd-800.jpg 800w,
grafika/drozd-1200.jpg 1200w, grafika/drozd-1600.jpg 1600w,
grafika/drozd-1920.jpg 1920w, grafika/drozd-3000.jpg 3000w"
sizes="(min-width: 1200px) 50vw, (min-width: 800px) 80vw, 95vw"
alt="Zdjęcie drozda śpiewaka">
</main>
</body>
</html>
173 – Dobieranie grafiki przez przeglądarkę: efekt końcowy
173 – Dobieranie grafiki przez przeglądarkę

1. Ściągnij z Moodle pliki startowe, rozpakuj i wkopiuj folder grafika do folderu w

którym pracujesz. W folderze znajduje się kilka wersji tego samego pliku graficznego
HTML5_logo o różnych wymiarach (szerokość w pikselach zawarta jest w nazwie)
2. W projekcie stwórz nowy poprawny dokument HTML o nazwie 173.html
3. Używając elementu <img> wstaw do dokumentu plik graficzny pozwalając
przeglądarce dobrać optymalny wymiar grafiki:
1. Wykorzystując atrybut alt dodaj krótki opis co przedstawia dołączona grafika
2. Wykorzystując atrybut src wskaż najmniejszy wariant grafiki, co pozwoli
wyświetlić grafię przestarzałym przeglądarkom.
3. Wykorzystując atrybut sizes wskaż że przy obszarze wyświetlania do 600px,
grafika ma mieć rozmiar 250px, a powyżej ma zajmować 90% obszaru
wyświetlania: (max-width: 600px) 250px, 90vw
4. Wykorzystując atrybut srcset wskaż dostępne warianty grafiki:
1. Najpierw wskaż ścieżkę do pliku graficznego, a po spacji wskaż jego
szerokość w pikselach używając jednostki w, np. 250w oznacza 250 px,
2. Poszczególne warianty grafik oddziel od siebie przecinkami.
4. Sprawdź działanie w Firefox (nie Chrome) zmieniając rozmiar przeglądarki
5. Sprawdź poprawność witryny (http://validator.w3.org)
Jawne wskazywanie wariantu grafiki

• Używając element <picture> w połączeniu z elementem <source> i jego atrybutem media

można wskazać różne grafiki - różniące się nie tylko rozmiarem, ale także zawartością. Na
przykład grafika na mniejszych ekranach może być niewielkim kadrem z pliku graficznego
używanego na dużych ekranach.
• Elementy picture i source pozwalają wprost wskazać przeglądarce, którego wariantu grafiki,
w jakiej sytuacji użyć. Dzięki temu kontrolę nad wyświetlaniem ma twórca witryny, a nie
algorytm przeglądarki jak to miało miejsce we wcześniejszych przykładach.
• Możliwe jest wskazanie wariantów grafiki w ramach danego elementu source, tak, aby
umożliwić przeglądarce wybór dla ekranów z ponadstandardową gęstością pikseli.
Jawne wskazywanie wariantu grafiki – przykład
<!doctype html> 135 picture.html
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Przykładowa witryna - grafika</title>
<style>
picture {float: left; margin: 2%;}
img { max-width: 100%}
@media (max-width: 500px) { img { width: 420px;} }
</style>
</head>
<body>
<main>
<picture>
<source media="(min-width: 1190px)" srcset=" grafika/Flaming_duzy.jpg">
<source media="(min-width: 700px)" srcset="grafika/Flaming_sredni.jpg">
<img src="grafika/Flaming_maly.jpg" alt="Zdjęcie flaminga różowego">
</picture>
<h1>Flaming różowy</h1>
</main>
</body></html>
Jawne wskazywanie wariantu grafiki – przykład z wariantami gęstości
<!doctype html><html lang="pl"><head> 140 picture x.html
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Przykładowa witryna - grafika</title>
<style>
picture {float: left; margin: 2%;} img { max-width: 100%}
@media (max-width: 500px) { img { width: 420px;} }
</style>
</head>
<body>
<main>
<picture>
<source media="(min-width: 1190px)" srcset="grafika/Flaming_duzy.jpg,
grafika/Flaming_duzy_x2.jpg 2x, grafika/Flaming_duzy_x3.jpg 3x">
<source media="(min-width: 700px)" srcset="grafika/Flaming_sredni.jpg,
grafika/Flaming_sredni_x2.jpg 2x, grafika/Flaming_sredni_x3.jpg 3x">
<img src="grafika/Flaming_maly.jpg" alt="Zdjęcie flaminga różowego"
srcset="grafika/Flaming_maly_x2.jpg 2x, grafika/Flaming_maly_x3.jpg 3x">
</picture>
<h1>Flaming różowy</h1></main> </body></html>
175 – Wskazywanie wariantów grafiki: efekt końcowy
175 – Wskazywanie wariantów grafiki

1. Ściągnij z Moodle pliki startowe, rozpakuj i wkopiuj folder grafika do katalogu w

którym pracujesz. W folderze znajdują się pliki graficzne Konstytucja_mala_x1,
Konstytucja_srednia_x1, Konstytucja_duza_x1 które będą używane w tym
ćwiczeniu.
2. W projekcie stwórz nowy, poprawny dokument HTML o nazwie 175.html
3. Dodaj element <picture>, a wewnątrz wskaż 2 dostępne warianty grafiki opisując
poprzez element <source> którego pliku w jakich okolicznościach użyć. Elementu
<source> należy użyć 2 razy. Najpierw dodaj plik w wersji „duza” następnie w wersji
„srednia”
1. Użyj atrybutu media aby wskazać minimalną szerokość obszaru wyświetlania
przy której należy danej grafiki. Dla pliku w wersji „duza” szerokość to 1030px,
dla pliku w wersji „srednia” 490px - (min-width: NNNpx)
2. Użyj atrybutu srcset aby podać ścieżkę do właściwego pliku graficznego
4. Na końcu, wewnątrz <picture> zamieść grafikę w wersji „mala” poprzez <img>
5. Sprawdź działanie w przeglądarce, zmieniając rozmiar okna przeglądarki
6. Sprawdź poprawność witryny (http://validator.w3.org)
177 – Wskazywanie wariantów grafiki dla różnych gęstości pikseli na ekranie: efekt
177 – Wskazywanie wariantów grafiki dla różnych gęstości pikseli na ekranie

1. Do pliku z poprzedniego ćwiczenia dodamy dodatkowe warianty grafiki w

wyższej rozdzielczości, które pozwolą wyświetlać obraz w wysokiej jakości także na
urządzeniach o ponadstandardowej gęstości pikseli fizycznych.
2. Klikając na pliki jpg Konstytucja* w wersjach 2x.jpg i 3x.jpg zobacz ich zawartość.
Zwróć uwagę że zostały wyróżnione wizualnie białymi napisami x2 i x3 aby umożliwić
testowanie.
3. Do elementu <img> dodaj atrybut srcset. Wskaż w nim 2 dodatkowe warianty
grafiki "mala” x2.jpg oraz x3.jpg. Najpierw podaj ścieżkę do pliku, a następnie po
spacji współczynnik gęstości pikseli: 2x lub 3x (wariant x2.jpg ma dwukrotnie
większą rozdzielczość, 3x.jpg – trzykrotnie). Warianty należy oddzielić przecinkiem.
4. Analogicznie, do istniejącego atrybutu srcset, w obu elementach <source>, po
przecinku dopisz pozostałe warianty grafiki x2.jpg i x3.jpg z odpowiednimi
współczynnikami gęstości (2x, 3x).
4. Sprawdź działanie w przeglądarce, zmieniając powiększenie treści – można do
tego celu użyć kombinacji klawiszy Ctrl+ (powiększenie), Ctrl- (pomniejszenie) lub
Ctrl 0 (zero – rozmiar standardowy – powiększenie 100%)
5. Sprawdź poprawność witryny (http://validator.w3.org)
Mapy graficzne
• Mapa graficzna: podział grafiki na obszary i przypisanie do każdego z obszarów innego linku.
• <map> - element blokowy definiujący mapę. Może być skojarzony z takimi elementami jak <img>, <object> i
<input>, atrybuty (ważne także dla <area>):
id, class, lang, dir, title, style, zdarzenia
name, alt, href, tabindex, accesskey
• <area> - elment opisujący obszar na mapie, specyficzne atrybuty:
shape – kształt obszaru
default – cała mapa, rect – prostokąt, circle – koło, poly - wielobok
coords – współrzędne (zależne od kształtu) oddzielane przecinkami
shape = rect : x-lewa, góra-y, x-prawa, dół-y
shape = circ: x-środek, y-środek, promień
poly – x1, y1, x2, y2 … xN, yN – pary współrzędnych – pierwsza i ostatnia powinny być takie same (aby
zamknąć wielobok)
nohref – jeśli atrybut ustawiony, oznacza to brak linku dla tego obszaru
• Grafikę przypisuje się do mapy ustawiając dla grafiki (<img>) atrybut usemap i podając kotwicę mapy.
• W jednej mapie (<map>) można zdefiniować dowolną ilość obszarów (<area>)
• Dla każdego obszaru <area> należy określić atrybut alt (tekst alternatywny)
• Jeśli obszary nakładają się na siebie, pirorytet ma wcześniejszy
• Map można używać również względem obiektów (<object>)
Mapy graficzne – przykład

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html lang="pl“><head><title>Strona internetowa</title></head>
<body>
<p>
<img src="obraz.png" usemap="#mapa" alt="mapa">
</p>
<map name="mapa">
<area href="http://www.onet.pl" alt="portal onet" shape="rect" coords="0,0,100,50">
<area href="http://www.wp.pl" alt="Wirt. Polska" shape="rect" coords="50,0,200,50">
</map>
</body>
</html>
180 – Mapa graficzna

1. Utwórz nowy plik HTML 180.html

2. Ściągnij z Moodle pliki startowe, rozpakuj i wkopiuj folder
grafika do katalogu w którym pracujesz. W folderze znajduje
się plik polska.png,
3. Wstaw do dokumentu HTML grafikę polska.png i powiąż ją
z mapą graficzną <img src="..." usemap="…" >
4. Stwórz mapę graficzną <map id="…">.
5. W mapie zdefiniuj dwa prostokątne obszary <area
shape="rect" coords="…" href="…"> tak, aby kliknięcie w
górny obszar przenosiło na stronę wp.pl, a dolny obszar na
stronę onet.pl. Plik ma wymiary 300 na 300 pikseli, więc
połowa wysokości to 150px. W atrybucie coords dla kształtu
rect należy podać współrzędne 2 skrajnych punktów obszaru,
a więc 4 liczby oddzielone przecinkami.
6. Sprawdź działanie w przeglądarce
7. Sprawdź poprawność strony pod adresem
http://validator.w3.org
Mapy graficzne serwera
• Mapy mogą być obsługiwane również po stronie serwera, choć obecnie jest to dość rzadko
wykorzystywane
• Możliwe tylko dla
<img> - musi mieć ustawiony atrybut ismap
<input> - musi być typu image
• W momencie gdy użytkownik klika mapę współrzędne kursora (względem grafiki) są wysyłane do
serwera
• Do URI(URL) jest doklejane ?x,y
• W przykładzie poniżej przy kliknięciu w punkt o współrzędnych 10,20 byłoby to:
http://www.serwer.pl/skrypt-mapy.php?10,20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">
<head><title>Strona internetowa</title></head>
<body>
<p>
<a href="www.serwer.pl/skrypt-mapy.php" >
<img src="grafika.png" ismap alt="mapa stolicy" >
</a>
</p>
</body></html>
Wstawianie obiektów wymagających użycia zewnętrznych wtyczek do przeglądarki

Wtyczki to samodzielne, zewnętrzne programy. Posiadają funkcjonalności, które nie są

wbudowane w przeglądarkę. Przykładami wtyczek to Java czy Adobe Flash. Ze
względów bezpieczeństwa od dłuższego czasu większość przeglądarek domyślnie nie
zezwala na używanie wtyczek lub wręcz ich w ogóle nie obsługuje. Jeśli przeglądarka
obsługuje wtyczki, to użytkownik samodzielnie musi zezwolić na użycie wtyczki w
ustawieniach przeglądarki. Z tego względu wtyczki są obecnie rzadko wykorzystywane.
<embed> - element używany do wstawiania do dokumentu treści interaktywnych. W
praktyce używany był do wstawiania plików technologii flash.
<object> - element używany do wstawiania do dokumentu treści, która wymaga do
wyświetlenia użycia zewnętrznej wtyczki. Element można także wykorzystać do
wstawienia do dokumentu plików graficznych lub innych dokumentów html, ale do
tego można użyć innych elementów html.
<param> - element zagnieżdżany wewnątrz elementu <object>. Pozwala przekazywać
parametry do treści wstawiany za pomocą <object>.
Przykład - wstawianie treści wymagającej użycia wtyczek

<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Przykładowa witryna - wtyczki</title>
</head>
<body>
<embed src="plik.swf"> <!-- dołączenie animacji flash -->
<object type="application/x-java-applet"> <!-- dołączenie apletu java-->
<param name="code" value="MyJavaClass">
<p>Nie posiadasz lub nie włączyłeś wtyczki obsługującej
aplety Java
</p>
</object>
</body>
</html>
Wideo i audio

• <video> - służy do zagnieżdżania wideo

• <audio> - służy do zagnieżdżania dźwięku
• <source> - służy do wskazywania alternatywnych źródeł dla <video> i <audio> (jest
zagnieżdżane wewnątrz <video> i <audio>)
• <track> - służy do wskazywania ścieżek tekstowych dla <video> i <audio> - na
przykład napisów do filmów.
Wideo i audio: przykład
<!DOCTYPE html> <html lang="pl">
<head><meta charset="utf-8" /> <title>Strona w HTML 5</title> </head>
<body>
<embed src="test.swf" width="20%" height="20%">
<video controls>
<source src='film.ogg' type="video/ogg" >
<source src='film.mp4' type="video/mp4">
<track src="napisy.vtt" kind="subtitles" srclang="pl" label="Polski" />
Śmieszny filmik. Niestety twoja przeglądarka nie obsługuje filmów.
</video>
<audio controls="controls">
<source src="test.ogg" type="audio/ogg">
<source src="test.mp3" type="audio/mpeg">
Twoja przeglądarka nie potrafi odtwarzać audio
</audio>
</body>
</html>
190 – Multimedia

1. Utwórz w nowy plik HTML: 190.html

2. Ściągnij z Moodle archiwum pliki-startowe.zip, rozpakuj i skopiuj do folderu w
którym pracujesz katalog multimedia. Są tam pliki .swf, .mp3, .ogg, .mp4, .webm
które będziemy dołączać do dokumentu. Wstaw do dokumentu:
1. animację flash test.swf <embed src="…">
2. Fragment nagrania audio „test-audio” (wersja mp3 i ogg) - użyj <audio
controls> oraz <source src="…" type="…"> ustawiając atrybut type
odpowiednio jako audio/mp3 i audio/ogg
3. Fragment nagrania wideo „film” (wersja ogg, mp4, webm) - użyj <video
controls> oraz <source src="…" type="…"> ustawiając atrybut type
odpowiednio jako video/ogg, video/mp4 i video/webm
3. Sprawdź działanie w kilku różnych przeglądarkach
4. Sprawdź poprawność strony
pod adresem http://validator.w3.org
200 – YouTube

1. Utwórz nowy plik HTML: 200.html

2. Wstaw wybrany film z serwisu youtube używając kodu zalecanego
przez ten serwis (Udostępnij / Umieść na stronie)
3. Sprawdź działanie w przeglądarce
4. Sprawdź poprawność strony pod adresem http://validator.w3.org
Favicon

• Z angielskiego favorites icon: ikona ulubionych

• Jak sugeruje nazwa ikona powstała z zamiarem wyświetlania jej w przeglądarce w
„ulubionych” obok tytułu strony
• Pojawia się także przed adresem w polu adresowym przeglądarki, przed nazwą karty lub w
innym widocznym miejscu. Pojawia się również przy tworzeniu skrótu do witryny na pulpicie.
• Starsze przeglądarki wspierają jedynie format graficzny .ico
• Najnowsze wersje przeglądarek obsługują także inne formaty (min. png, gif – również
animowany, jpg)
• Nawet jeśli nie zamieścisz żadnego elementu w HTML, większość przeglądarek poszukuje
pliku favicon.ico w głównym katalogu witryny i jeśli go znajdą – to wyświetlają
• Najpopularniejsza metoda (działająca ze starszymy wersjami IE) informowania przeglądarki o
istnieniu ikony to dodanie w sekcji <head>:
 <link rel="shortcut icon" href="ikona.ico" />
• Urządznia firmy Apple do tworzenia skrótu na ekranie urządzenia wykorzystują następujący
zapis:
• <link rel="apple-touch-icon" href="plik.png" />
205 – favicon

1. Wejdź na stronę: http://www.favicon.cc

2. Narysuj własną ikonę
3. Kliknij „Download Favicon”
4. Utwórz nowy plik HTML z dowolną zawartością
5. Skopiuj ściągniętą ikonę do folderu z plikiem
6. W sekcji <head> dodaj <link rel="shortcut icon" href="favicon.ico" >
7. Sprawdź działanie w 2 różnych przeglądarkach
8. Sprawdź poprawność strony pod adresem http://validator.w3.org
Formularze

• Formularze to podstawowy mechanizm na gromadzenie informacji od użytkownika.

• Przetwarzaniem informacji zajmują się skrypty – HTML nie ma żadnych
mechanizmów pozwalających na obsługę wprowadzonych danych.
• Formularz może zawierać zwykły tekst ale przede wszystkim tzw. kontrolki (pola
tekstowe, listy)
• Każda kontrolka ma swoją nazwę określoną przez atrybut name, może mieć nadaną
wartość początkową.
• Formularz można wysłać do przetworzenia (zwykle po stronie serwera) lub
zresetować do wartości początkowych.
• Kontrolki mogą pojawiać się na zewnątrz <form>, ale nie da się wtedy przesłać
danych w nich zawartych do serwera
Element <form>
• <form> - element, w którym zamykane są pola formularza. Ważniejsze atrybuty:
• Atrybuty globalne (np. id, class, lang, dir, title, style), zdarzenia
• action – URI (URL) do skryptu przetwarzającego dane z formularza,
• method – sposób przesyłania danych z formularza do serwera:
• get – dane z formularza są dodawane do URI (URL) określonego
w <form> za znakiem „?”. Metody get należy używać w formularzach, których zadaniem jest
odczytywanie danych – na przykład służących do wyszukiwania informacji.
• post – dane są przesyłane w polach http i nie pojawiają się w URI (URL) pasku adresowego. Metody
post należy używać w formularzach, które służą do modyfikowania/zapisywania danych – na
przykład wprowadzanie danych do bazy danych.
• enctype – sposób przesyłania danych do serwera, jeśli użyto atrybutu method = "post„
• Domyślnie application/x-www-form-urlencoded
• Jeśli przesyłany jest plik, to należy użyć kodowania multipart/form-data
• autocomplete – pozwala przeglądarce na wstępne wypełnianie pól danego formularza, na podstawie
danych wprowadzanych w przeszłości. Przy użyciu w elemencie <form>, opisuje domyślne zachowanie pól
wewnątrz formularza. Więcej informacji w sekcji dotyczącej automatycznego uzupełniania pól formularzy.
• novalidate – umożliwia wysłanie formularza bez przeprowadzania walidacji poprawności wypełnienia pól.
• spellcheck – włącza („on”) lub włącza („off”) sprawdzanie pisowni przez przeglądarkę w całym formularzu
lub poszczególnych polach.
Element <input>
• <input> -pole pozwalające na wprowadzanie różnych typów danych – nie ma tagu zamykającego. Ważniejsze
atrybuty:
• Atrybuty globalne, zdarzenia,
• accept – używany w połączeniu z atrybutem type="file". Wskazuje przeglądarce, jakie typy plików akceptować.
• alt – używany w połączeniu z atrybutem type="image". Opisuje zawartość grafiki. Tekst w alt jest używany, jeśli
przeglądarka nie może wyświetlić grafiki.
• autocapitalize – zmienia wprowadzany tekst na drukowane litery, o ile tekst nie jest wprowadzany przy użyciu
klawiatury fizycznej (czyli np. przy tekście wprowadzanym na wirtualnej klawiaturze na urządzeniu mobilnym lub
dyktowanym głosowo). W zależności od zawartości atrybutu zmienia na drukowane litery wszystkie znaki
(characters), pierwszą literę każdego słowa (words), pierwszą literę zdania (sentences) lub zostawia znaki bez zmian
(none).
• autocomplete – automatyczne uzupełnianie pól przez przeglądarkę w oparciu o historię. Szczegóły w sekcji
dotyczącej uzupełniania.
• autofocus – aktywuje element natychmiast po załadowaniu strony. Do elementu można od razu wprowadzać
dane, bez klikania na nim.
• capture – pozwala określić tryb dostępu do kamery/mikrofonu. Np. czy używać przedniej czy tylnej kamery w
smartfonie.
• checked - dla pól typu checkbox lub radiobutton określa czy element jest zaznaczony przez użytkownika.
• dirname – pozwala przesłać do skryptu kierunek wprowadzonego tekstu (z prawej do lewej, czy z lewej do prawej
– jak np. jest w języku arabskim)
Element <input> - atrybuty
• disabled – pozwala na wyłączenie pola (uniemożliwia wprowadzenie danych i przesłanie ich do
skryptu)
• form – pozwala powiązać pole z konkretnym formularzem. Zwykle nie ma potrzeby używania tego
atrybutu, o ile pole jest zagnieżdżone wewnątrz elementu <form>
• formaction, formenctype, formmethod, formnovalidate, formtarget – atrybuty mogą być używane
w połączeniu z atrybutem type="submit” i mają takie samo działanie jak zwykle stosowane,
odpowiadające im atrybuty elementu <form>: action, enctype, method, novalidate, target.
• height – pionowy wymiar elementu w pikselach. Lepiej do określenia rozmiaru stosować style.
• list – pozwala stworzyć powiązanie z elementem <datalist>, w którym można zamieścić sugestie dla
wartości wprowadzanych przez użytkownika. Umożliwia to podpowiadanie użytkownikowi wartości
w czasie, gdy wprowadza dane.
• max, min – atrybuty pozwalają określić maksymalną i minimalną wartość, jaką użytkownik powinien
wprowadzić do elementu.
• maxlength, minlength – atrybuty, które pozwalają określić maksymalną i minimalną liczbę znaków,
które użytkownik powinien wprowadzić do elementu.
• multiple – zezwala na wprowadzenie/wybranie kilku wartości.
• name – nazwa pola (kontrolki), która będzie przesyłana do skryptu przetwarzającego dane.
Element <input> - atrybuty – ciąg dalszy
• pattern – wzorzec w postaci wyrażenia regularnego JavaScript [ECMS-262], z którym musi się zgadzać
wartość wprowadzona do pola przez użytkownika. Atrybut jest używany do zaawansowanej walidacji
wprowadzanych wartości. Jeśli atrybut pattern został użyty, i jeśli użyto równocześnie atrybutu title, to
atrybut title musi wyjaśniać sprawdzany wzorzec, aby przeglądarka miała szansę wyświetlić
użytkownikowi podpowiedź na temat oczekiwanej wartości. W przypadku błędnego wypełnienia pola,
przeglądarka wyświetli atrybut title z podpowiedzią jak uzupełnić pole.
• placeholder – etykieta lub zachęta wyświetlana w polu. Znika, gdy użytkownik zacznie wprowadzać
do pola dane.
• readonly – zabrania użytkownikowi wprowadzania danych. Pole jest w trybie tylko do odczytu.
• required – określa czy wypełnienie pola jest obowiązkowe. Jeśli pole oznaczone jako required, nie jest
wypełnione, to przeglądarka nie pozwoli wysłać danych do skryptu dopóki pole nie zostanie
wypełnione.
• size - rozmiar pola podawany, jako liczba znaków wyświetlanych jednocześnie.
• src – używane w połączeniu z atrybutem type="image". Pozwala na wskazanie ścieżki do używanej
grafiki.
• step – wskazuje krok między dopuszczalnymi wartościami w polu. Używane w powiązaniu z
atrybutami min i/lub max.
• value - wartość wpisana w polu która zostanie przesłana do formularza.
• type – typ pola
Ważniejsze wartości atrybutu „type” dla elementu <input>
• hidden – ukryte pole: wykorzystywane do przekazywania dodatkowych informacji do skryptu
przetwarzającego – takich, których nie wprowadza użytkownik.
• text – uniwersalne pole tekstowe (wyświetlane w jednej linii)
• search – pole tekstowe dedykowane do wyszukiwania
• tel – pole tekstowe do wprowadzania numeru telefonu
• url – pole tekstowe do wprowadzania adresu URL
• email – pole tekstowe do wprowadzania adresu email
• password – pole tekstowe do wprowadzania hasła (wprowadzane znaki nie są wyświetlane – zamiast
wprowadzanego znaku przeglądarka wyświetla kropki lub gwiazdki)
• date – data: rok, miesiąc i dzień
• month – miesiąc
• week – numer tygodnia w roku
• time – czas: godzina, minuta, sekunda, ułamek sekundy
• datetime-local – data i czas: rok, miesiąc, dzień, godzina, minuta, sekunda, ułamek sekundy
• number – pole do wprowadzania liczb
• range – liczba z zakresu wybierana za pomocą suwaka
Ważniejsze wartości atrybutu „type” dla elementu <input> - ciąg dalszy
• color – wybór koloru
• checkbox – pole wyboru dla nie wykluczających się opcji
• radio – pole wyboru dla wykluczających się opcji
• file – pole pozwalające wskazać plik na komputerze użytkownika
i przesłać go na serwer.
• submit – przycisk wysyłający dane wprowadzone do formularza do skryptu obsługującego formularz.
• image – przycisk w formie grafiki (wymaga podania atrybutów src
i alt). Po kliknięciu w grafikę, do skryptu obsługującego formularz przekazywane są także współrzędne
miejsca, w którym dokonano kliknięcia.
• reset – przycisk ustawiający wartości w polach formularza do wartości początkowych,
• button – przycisk bez konkretnego znaczenia. Może być wykorzystany do uruchamiania skryptów
działających po stronie przeglądarki.
<form>, <input> - przykład
<form action="http://www.wsb.pl/skrypt.php" method="get"><p>
<input type="hidden" name="identyfikator" value="4321">
Imię lub pseudonim: <input type="text" name="imie"><br>
Nr telefonu: <input type="tel" name="telefon"><br>
Twoja witryna internetowa: <input type="url" name="witryna"><br>
Adres email: <input type="email" name="email"><br>
Hasło: <input type="password" name="haslo"><br>
Data urodzin: <input type="date" name="data-urodzin"><br>
Liczba dzieci: <input type="number" name="dzieci"><br>
Ile lat masz prawo jazdy: <input type="range" min="0" max="80" step="1"><br>
Ulubiony kolor: <input type="color" name="kolor"><br>
Ulubiony sport: <input type="checkbox" name="pilka-nozna„ value="pilka-nozna"> Piłka nożna
<input type="checkbox" name="siatkowka" value="siatka"> Siatkówka<br>
Płeć: <input type="radio" name="plec" value="mężczyzna"> mężczyzna
<input type="radio" name="plec" value="kobieta"> kobieta<br>
Załaduj awatar:<input type="file" name="awatar"> <br>
<input type='submit' value="Utwórz konto"> <input type='reset' value="Zresetuj formularz">
<input type="button" value="Info" onclick="alert('Twój profil będzie aktywny natychmiast po
zapisaniu danych')">
</p></form>
Opisywanie pól: element <label> i atrybut placeholder

• Element <label> tworzy etykietę dla danego pola w formularzu. Powiązanie z polem tworzy
się za pomocą atrybutu for, lub zamykając pole wewnątrz elementu <label>. Ważniejsze
atrybuty:
• Atrybuty globalne, zdarzenia,
• for - tworzy powiązanie etykiety, z konkretnym polem formularza. Jako wartość podaje
się identyfikator (ustawiony przez atrybut id) pola, którego ma dotyczyć etykieta.
• Atrybut placeholder elementu <input> umożliwia stworzenie wskazówki dla użytkownika,
w formie słowa lub zdania. Wskazówka jest zwykle wyróżniania kolorem szarym i znika w
momencie, gdy użytkownik rozpocznie wprowadzanie do pola danych. Atrybut ten jest
uzupełnieniem elementu <label> i nie powinien go zastępować.
Opisywanie pól - przykład
<!doctype html> <html lang="pl"> <head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Przykład formularza</title> </head> <body> <h1>Zaloguj się</h1>

<form action="http://www.wsb.pl/skrypt.php" method="post">
<p>
<label for="imie-id">Imię lub pseudonim:</label>
<input type="text" name="imie" id="imie-id" placeholder="np. Jan"><br>
<label>
Hasło: <input type="password" name="haslo" placeholder="np. A#bc9.I"><br>
</label>
<input type='submit' value="Zaloguj się">
</p>
</form> </body> </html>
Element <button>
• <button> - Wyświetla przycisk. Pozwala uruchamiać akcje i skrypty.
• Zasada działania identyczna jak dla przycisków tworzonych przy pomocy <input> z odpowiednim
atrybutem type, z tym, że <button> ma treść (ma tag zamykający), a <input> nie ma.
• Ważniejsze atrybuty:
• Atrybuty globalne, zdarzenia
• disabled – patrz opis atrybutu dla elementu <input>
• form, formaction, formenctype, formmethod, formnovalidate, formtarget – sprawdź
opis atrybutów dla elementu <input>
• autofocus – sprawdź opis atrybutu dla elementu <input>
• name, value – sprawdź opis atrybutu dla elementu <input>
• type – rodzaj akcji skojarzonej z przyciskiem uruchamianej po jego wciśnięciu:
• submit – wysłanie formularza
• reset – resetowanie wartości w formularzu do ustawień domyślnych
• buton – brak reakcji formularza. Zwykle używane do uruchamiania skryptów działających
po stronie przeglądarki.
• Można osiągnąć ten sam efekt co dla <input> z type=” image” zawierając jako treść <button>
grafikę <img>.
Przykład <button>
<!doctype html>
<html lang="pl">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład formularza</title> </head> <body> <h1>Zaloguj się</h1>
<form action="http://www.wsb.pl/skrypt.php" method="get">
<p>
<label for="imie-id">Imię lub pseudonim:</label>
<input type="text" name="imie" id="imie-id"><br>
<label for="haslo-id">Hasło:</label>
<input type="password" name="haslo" id="haslo-id"><br>
<button type='submit'>Zaloguj</button>
<button type='reset'>Wartości domyślne</button>
<button type="button" onclick="alert('Po wprowadzeniu poprawnych
danych wyświetlimy Twoje ostatnie faktury')">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Breezeicons-
apps-32-help-about.svg" alt="ikona dodatkowych informacji">
</button>
</p>
</form> </body>
</html>
Listy wyboru: <select>, <optgroup>, <option>
• <select> - element tworzący menu. Ważniejsze atrybuty:
• Atrybuty globalne, zdarzenia,
• autocomplete – sprawdź opis atrybutu dla elementu <input>
• autofocus – sprawdź opis atrybutu dla elementu <input>
• disabled – sprawdź opis atrybutu dla elementu <input>
• form – sprawdź opis atrybutu dla elementu <input>
• multiple – jeśli atrybut jest ustawiony, to możliwy jest jednoczesny wybór wielu elementów z
listy (np. przy użyciu klawisza ctrl) a lista jest wyświetlana w wielu wierszach. Jeśli multiple nie
jest ustawione, przeglądarki wyświetlają menu wyboru, jako listę w 1 wierszu. Można wówczas
wybrać tylko jedną wartość z listy.
• name – sprawdź opis atrybutu dla elementu <input>
• required – sprawdź opis atrybutu dla elementu <input>
• size – jeśli <select> jest prezentowany jako lista, size określa liczbę wierszy widocznych
jednocześnie na liście. Pozostałe będą opcje dostępne po użyciu bocznego paska przewijania,
• Wewnątrz <select> musi być co najmniej jeden element <option> - określający pojedynczą wartość
na liście.
• Jeśli wartości na liście jest wiele, do ich grupowania można wykorzystać <optgroup>.
• Jeśli żadna z opcji nie jest wybrana, przeglądarka nie przekazuje informacji
o liście do skryptu przetwarzającego dane.
<optgroup>, <option>

• <optgroup> - pozwala grupować opcje w liście wyboru. Ważniejsze atrybuty:

• Atrybuty globalne, zdarzenia
• disabled – sprawdź opis atrybutu dla elementu <input>
• label – określa etykietę wyświetlaną dla grupy opcji.
• Elementy <optgroup> nie mogą być w sobie zagnieżdżane i muszą być dziećmi
<select>

• <option> - określa pojedynczą opcję w liście wyboru. Ważniejsze atrybuty:

• Atrybuty globalne, zdarzenia.
• disabled – sprawdź opis atrybutu dla elementu <input>,
• label – etykieta opcji. Normalnie, jako etykieta wyświetlany jest tekst zawarty w
<option></option>.
• selected – jeśli atrybut jest ustawiony to dana opcja jest ustawiona jako
domyślny wybór. Kilka opcji może mieć ustawione selected jedynie jeżeli
<select> ma ustawiony atrybut multiple,
• value –sprawdź opis atrybutu dla elementu <input>
Listy wyboru - przykład
<!doctype html> <html lang="pl"> <head> <meta charset="UTF-8">
<title>Przykład formularza</title> </head> <body> <h1>Ulubione technologie</h1>
<form action="http://www.wsb.pl/skrypt.php" method="get"> <p>
<label for="spis-id">Wybierz najciekawszy rozdział kursu:</label>
<select id="spis-id" name="spis">
<optgroup label="HTML">
<option value="HTML1">Tabele</option>
<option value="HTML2">Formularze</option>
</optgroup>
<optgroup label="CSS">
<option value="CSS1">Selektory</option>
<option value="CSS2" label="Kolory" selected="selected"> Kolory CSS</option>
</optgroup>
</select> </p>
<label for="technologie-id">Wybierz swoje ulubione technologie:</label> <br>
<select id="technologie-id" name="techonologie" multiple="multiple" size="2">
<option label="JS">Javascript</option>
<option selected="selected">HTML</option>
<option selected="selected">CSS</option>
</select>
<br><br> <input type="submit" value="Zapisz"> </form> </body> </html>
Element <textarea>
<textarea> - tworzy duże pole tekstowe obejmujące wiele wierszy.
Atrybuty:
Atrybuty globalne, zdarzenia,
autocapitalize – sprawdź opis atrybutu dla elementu <input>,
autocomplete – sprawdź opis atrybutu dla elementu <input>,
autofocus – sprawdź opis atrybutu dla elementu <input>,
cols - liczba znaków w linii: definiuje szerokość pola
dirname - – sprawdź opis atrybutu dla elementu <input>,
disabled – – sprawdź opis atrybutu dla elementu <input>,
form – sprawdź opis atrybutu dla elementu <input>,
maxlength, minlength – sprawdź opis atrybutu dla elementu <input>,
name – sprawdź opis atrybutu dla elementu <input>,
placeholder – sprawdź opis atrybutu dla elementu <input>
readonly – sprawdź opis atrybutu dla elementu <input>,
required – sprawdź opis atrybutu dla elementu <input>,
rows – określa z ilu linii składa się pole: definiuje wysokość pola,
wrap – ustawienie zawartości atrybutu na hard, powoduje że przeglądarka dodaje znaki nowej linii na końcu
każdego wiersza. Domyślna wartość soft, oznacza że tekst przesyłany przez przeglądarkę do skryptu nie jest
modyfikowany.
Przykład <textarea>
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład formularza</title>
</head>
<body>
<h1>Reklamacja</h1>
<form action="http://www.wsb.pl/skrypt.php" method="get">
<label for="reklamacja-id">Wpisz treść reklamacji:</label>
<textarea name="reklamacja" id="reklamacja-id" rows="10" cols="100"
minlength="500" maxlength="10000" autocapitalize="words"
autofocus="autofocus" required="required" wrap="soft"
spellcheck="on">
</textarea>
<br>
<input type="submit" value="Wyślij">
</form>
</body>
</html>
Grupowanie pól: <fieldset>, <legend>

<fieldset> - pozwala grupować tematycznie zestawy pól i ich etykiet.

Ważniejsze atrybuty:
Atrybuty globalne, zdarzenia,
disabled - sprawdź opis atrybutu dla elementu <input>,
form - sprawdź opis atrybutu dla elementu <input>,
name - sprawdź opis atrybutu dla elementu <input>
<legend> - ustawia tytuł dla zestawu pól określonego przez <fieldset> - przydatne dla
osób przeglądających strony za pomocą syntezatorów mowy.
Ważniejsze atrybuty
Atrybuty globalne, zdarzenia
Przykład grupowania pól: <fieldset>, <legend>
<form action="http://www.wsb.pl/skrypt.php" method="get">
<fieldset>
<legend>Dane podstawowe</legend>
<label for="imie-id">Imię lub pseudonim:</label> <input id="imie-id" type="text" name="imie"><br>
<label for="tel-id">Nr telefonu:</label> <input id="tel-id" type="tel" name="telefon"><br>
<label for="url-id">Twoja witryna internet:</label> <input id="url-id" type="url" name="witr"><br>
<label for="email-id">Adres email:</label> <input id="email-id" type="email" name="email"><br>
<label for="haslo-id">Hasło:</label> <input id="haslo-id" type="password" name="haslo"><br>
</fieldset>
<fieldset>
<legend>Zainteresowania:</legend>
<label for="kolor">Ulubiony kolor:</label> <input id="kolor" type="color" name="kolor"><br>
Ulubiony sport:
<input type="checkbox" name="pilka-nozna" value="pilka-nozna" id="pilka">
<label for="pilka"> Piłka nożna</label>
<input type="checkbox" name="siatkowka" value="siatkowka" id="siatka">
<label for="siatka">Siatkówka</label><br>
</fieldset>
<input type='submit' value="Utwórz konto">
</form>
Walidacja pól formularzy
Przeglądarki potrafią sprawdzić poprawność danych, i w przypadku błędów nie dopuścić do przesłania danych do
skryptu przetwarzającego. Ważniejsze atrybuty wspomagające walidację:
accept – używany w połączeniu z atrybutem type="file", wskazujący przeglądarce, jakie typy plików akceptować do
przesłania.
max, min – atrybuty pozwalają określić maksymalną i minimalną wartość, jaką użytkownik musi wprowadzić do
elementu.
maxlength, minlength – atrybuty, które pozwalają określić maksymalną i minimalną liczbę znaków, które użytkownik
musi wprowadzić do pola.
pattern – wzorzec w postaci wyrażenia regularnego zgodnego z JavaScript [ECMS-262], z którym musi się zgadzać
wartość wprowadzona do pola przez użytkownika. Wykorzystywane do zaawansowanej walidacji wprowadzanych
wartości. Jeśli atrybut pattern został użyty i jeśli użyto równocześnie atrybutu title, to atrybut title musi wyjaśniać
sprawdzany wzorzec, aby użytkownik wiedział jaka wartość jest oczekiwana w tym polu. W przypadku błędnego
wypełnienia pola, przeglądarka wyświetli atrybut title z podpowiedzią, jakimi wartościami uzupełnić pole.
required – określa czy wypełnienie pola jest obowiązkowe. Jeśli pole obowiązkowe nie jest wypełnione, przeglądarka
nie pozwoli wysłać danych do skryptu.
step – wskazuje krok między dopuszczalnymi wartościami w polu. Używane w powiązaniu z atrybutami min i/lub
max.
Z punktu widzenia CSS walidację obsługują pseudo-klasy :valid i :invalid które odpowiednio oznaczają czy dane pole
zostało poprawnie lub niepoprawnie wypełnione.
Na treść komunikatów związanych z walidacją można wpływać poprzez atrybut title lub metodę setCustomValidity() –
używając skryptów JavaScript.
Przykład – walidacja
<form action="http://www.wsb.pl/skrypt.php" method="post">
<fieldset>
<legend>Dane podstawowe</legend>
<label for="imie-id">Imię lub pseudonim:</label> <!—min. 3 znaki -->
<input type="text" name="imie" id="imie-id" minlength="3" required="required"><br>
<label for="tel-id">Nr tel. komórkowego:</label>
<!-- dokładnie 9 cyfr od 0-9 -->
<input type="tel" id="tel-id" name="telefon" pattern="[0-9]{9}" placeholder="Wprowadź 9
cyfr" required="required" title="Wprowadź numer telefonu składajacy się z 9 cyfr "><br>
<label for="data-id">Data urodzenia:</label>
<!-- najwcześniejsza dopuszczalna data to 1 stycznia 1900 -->
<input type="date" name="urodziny" id="data-id" min="1900-01-01" required="required"><br>
<label for="url-id">Twoja witryna internetowa:</label> <!-- URL -->
<input type="url" id="url-id" name="witryna" required="required"><br>
<label for="email-id">Adres email:</label> <!-- poprawny email -->
<input type="email" id="email-id" name="email" required="required"><br>
<label for="foto-id">Wczytaj swoje zdjęcie:</label>
<!--przeglądarka będzie domyślne pokazywać tylko grafikę na dysku -->
<input type="file" accept="image/*" id="foto-id" name="foto"required="required"><br>
</fieldset>
<input type='submit' value="Utwórz konto"> </form>
Przykład – walidacja – efekt 1/2
Przykład – walidacja – efekt 2/2
223 – Formularz: efekt
223 – Formularz 1/2
1. Utwórz plik 223.html i stwórz w nim formularz (<form>). Formularz ma przesyłać dane do pliku skrypt.php
(action). Dane należy przesyłać metodą post (method). Jako kodowania znaków należy użyć "
multipart/form-data" (enctype). Należy zezwolić na podpowiadanie danych (autocomplete="on")
2. W formularzu mają znaleźć się 2 grupy pól o tytułach „Twoje dane” oraz „Zainteresowania i
umiejętności”. Wykorzystaj elementy <fieldset> oraz <legend>.
3. Wszystkie pola formularza powinny zostać opisane etykietami <label>
4. W pierwszej z grup <fieldset> dodaj następujące pola <input>:
1. „Imię lub nick” – pole tekstowe (type="text"), o rozmiarze 12 znaków (size). Treść ma mieć od 3 do
20 znaków (minlength, maxlength). Pole ma być obowiązkowe (required) i aktywowane po
załadowaniu dokumentu (autofocus). W polu należy umieścić przykład danych (placeholder)
2. „Hasło” oraz „Powtórz hasło” – pola hasła (type="password") o długości minimum 8 znaków
(minlength). Pola mają być obowiązkowe (required). Pole „hasło” ma zawierać przykład
(placeholder).
3. „Numer telefonu” – pole do wprowadzenia numeru telefonu (type="tel"). Pole ma być obowiązkowe
(required) oraz ma wymagać wprowadzenia dokładnie 9 cyfr (pattern="[0-9]{9}"). Przeglądarka ma
wyświetlać wskazówkę, o konieczności wprowadzenia 9 cyfr (title)
4. „Data urodzenia” – pole daty (type="date"). Najwcześniejsza data (min) na jaką ma zezwalać
przeglądarka to 1918-11-11.
5. „Płeć” – dwa pola wyboru nawzajem wykluczające się (type="radio", name) dotyczące płci.
Domyślnie zaznaczone ma być pole „Kobieta” (checked).
6. „Twój awatar” – pole do ładowania pliku (type="file"). Przeglądarka ma akceptować tylko pliki
graficzne (accept="image/*")
223 – Formularz 2/2
1. W drugiej z grup fieldset dodaj następujące kontrolki:
1. „Sport” – 3 pola wyboru (type="checkbox") dla sportów: „piłka nożna”, „szczypiorniak”,
„żużel”. Pole dotyczące szczypiorniaka ma być domyślnie zaznaczone (checked)
2. „Umiejętności IT” – lista wielokrotnego wyboru (<select>, multiple) o rozmiarze pozwalającym
na jednoczesne wyświetlenie 5 opcji (size):
1. Na liście mają znaleźć się 2 grupy (<optgroup>, label): „Systemy operacyjne” i
„Oprogramowanie biurowe”
2. W pierwszej grupie należy zamieścić 3 opcje (option): „Windows”, „Linuks”, „MacOS”.
3. W drugiej grupie należy zamieścić 3 opcje (option): „Word”, „Excel”, „PowerPoint”.
4. Opcje „Windows” oraz „Linux” mają być domyślnie zaznaczone (selected)
3. „Ulubiony kolor” – kontrolka umożliwiająca wybór koloru (<input>, type="color")
4. „Jak bardzo nie lubisz poniedziałków” – suwak umożliwiający wskazanie w skali od 1 do 10
(min, max, step) niechęci do poniedziałków (<input>, type="range")
5. „Kilka słów o pozostałych zainteresowaniach” – duże pole tekstowe (<textarea>) o rozmiarze
4 linii (rows) i 50 znakach szerokości (cols)
2. Formularz ma wyświetlać 2 przyciski (<input> lub <button>) umożliwiające wysłanie danych do
skryptu (type="submit") oraz zrestartowanie formularza do wartości domyślnych (type="reset")
3. Sprawdź wygląd i działanie mechanizmów walidacji w 2 przeglądarkach.
4. Sprawdź poprawność kodu HTML na witrynie http://validator.w3.org
Przełączanie się pomiędzy polami za pomocą klawiatury
Uaktywnianie kontrolek:
Myszka/Ekran dotykowy: kliknięcie w pole lub etykietę powiązaną z polem atrybutem for,
aktywuje pole i pozwala na wprowadzanie danych.
Klawisz tab – pozwala na przechodzenie do kolejnego pola. Aby powrócić do poprzedniego
pola, należy użyć kombinacji klawiszy shit + tab.
Skróty klawiaturowe – skrót zdefiniowany w atrybucie acceskey. Na platformie
Windows/Linux zwykle alt + litera, lub alt + shift + litera. Na platformie Mac zwykle Control Alt
+ litera.
Ostatnie dwie metody są szczególnie istotne dla osób niewidomych
i słabo widzących.
Atrybuty wspomagające nawigację
• tabindex – kolejność aktywacji elementów klawiszem tab, podawana jako liczba od 0 do 32 767.
• Nawigacja odbywa się w kolejności od elementów z najmniejszą liczbą (poczynając od 1)
do elementów z największą liczbą.
• Na końcu uaktywniane są elementy z tabindex="0" lub bez ustawionego tabindex – w
kolejności ich występowania w dokumencie.
• accesskey – pojedyncza litera, która w połączeniu z odpowiednim klawiszem skrótów (np. alt, lub
shift+alt dla Windows) aktywuje dany element.
Przykład nawigacji za pomocą klawiatury

<form action="http://www.wsb.pl/skrypt.php" method="get">

<fieldset>
<legend>Dane podstawowe</legend>
<label for="imie-id">Imię lub pseudonim:</label>
<input id="imie-id" type="text" name="imie" tabindex="3"><br>
<label for="tel-id">Nr telefonu:</label>
<input id="tel-id" type="tel" name="telefon" tabindex="4"><br>
<label for="url-id">Twoja witryna internetowa:</label>
<input id="url-id" type="url" name="witryna" tabindex="5"><br>
<label for="email-id">Adres email:</label>
<!-- pole email zostanie uaktywnione przy pierwszym wciśnięciu klawisza tab lub skrótu
klawisz. Alt+Shift+f (np. firefox). Kolejne wciśnięcie tab przeniesie użytkownika do hasła-->
<input id="email-id" type="email" name="email" tabindex="1" accesskey="f"><br>
<label for="haslo-id"> Hasło:</label>
<input id="haslo-id" type="password" name="haslo" tabindex="2"><br>
</fieldset>
<input type='submit' value="Utwórz konto" tabindex="6">
</form>
Blokowanie pól formularzy

HTML pozwala na blokowanie pól – np. zablokowanie możliwości wciśnięcia przycisku

wyślij dopóki użytkownik nie wprowadzi wszystkich pól, czy warunkowe
blokowanie/ukrywanie jednego pola, w zależności od zawartości innego pola.
Atrybut disabled – całkowicie blokuje pole. Przeglądarka nie prześle zawartości pola do
skryptu przetwarzającego.
Atrybut readonly – pole jest ustawiane w tryb tylko do odczytu – nie da się
wprowadzać/modyfikować danych w tym polu.
Atrybut hidden – pole jest ukryte – nie jest wyświetlane przez przeglądarkę.
Elementy zablokowane, ukryte, w trybie tylko do odczytu mogą być w każdej chwili
aktywowane przez skrypty działające po stronie przeglądarki.
Przykład – blokowanie i ukrywanie pól
<body>
<h1>Wprowadź swoje dane</h1>
<form action="http://www.wsb.pl/skrypt.php" method="get">
<fieldset>
<legend>Dane podstawowe</legend>
<label for="imie-id">Imię lub pseudonim:</label>
<input type="text" name="imie" id="imie-id"><br>
<label for="telefon-id">Nr telefonu:</label>
<input type="tel" name="telefon" disabled="disabled"
id="telefon-id"><br> <!-- dane nie zostaną wysłane do skryptu-->
<label for="url">Twoja witryna internetowa:</label><!--pole ukryte-->
<input type="url" name="witryna" hidden="hidden" id="url"><br>
<label for="email ">Adres email:</label> <!-- tylko do odczytu -->
<input type="email" name="email" readonly="readonly" id="email"><br>
<label for="haslo-id">Hasło:</label>
<input type="password" name="haslo" id="haslo-id" ><br>
</fieldset>
<input type='submit' value="Utwórz konto">
</form>
</body>
</html>
225 – Nawigacja w formularzach

1. Utwórz nowy plik 225.html z następującymi polami <input>

2. Pole tekstowe do wprowadzania nazwy użytkownika (type="text")
3. Pole adresu www do wprowadzania adresu URL profilu na facebooku (type="url"). Pole ma
być zablokowane (disabled). Miałoby być aktywowane skryptem jedynie dla osób zalogowanych.
4. Pole adresu email (type="email"). Ustaw dla tego pola skrót klawiszowy alt+shift+g (atrybut
accesskey), który będzie służył do aktywowania tego pola.
5. Pole liczbowe by wprowadzić liczbę kupowanych lekcji (type="number"). Pole ma być tylko do
odczytu (readonly). W trybie zapisu miałoby być aktywowane skryptem jedynie dla
zalogowanych użytkowników.
6. Pole liczbowe z liczbą lekcji gratisowych (type="number"). Pole ma być domyślnie ukryte
(hidden) – miałoby być włączane skryptem jedynie w okresach promocji.
7. Używając atrybutu tabindex uporządkuj pola tak, aby przy pierwszym wciśnięciu klawisza
tabulacji przeglądarka aktywowała pole email, a przy drugim w pole nazwa użytkownika.
8. Sprawdź działanie w 2 przeglądarkach
1. Przetestuj czy pól facebook/liczba lekcji nie da się edytować
2. Przetestuj kolejność nawigacji po polach klawiszem tabulacji
3. Przetestuj skrót klawiszowy alt+shift+g (aktywacja pola email)
9. sprawdź poprawność kodu http://validator.w3.org
Automatyczne uzupełnianie pól formularzy 1/3
Atrybut autocomplete – pozwala przeglądarce na wstępne wypełnianie pól danego formularza, na podstawie
danych wprowadzanych w przeszłości do innych formularzy. Przy użyciu w elemencie <form>, opisuje
domyślne zachowanie pól wewnątrz formularza. Przy użyciu w danym polu, opisuje zachowanie tego pola.
Zawartość atrybutu autocomplete wskazuje przeglądarce, czego dotyczy dane pole. Umożliwia to przeglądarce
dobranie odpowiedniej zawartości z wartości wprowadzanych przez użytkownika wcześniej.
Najważniejsze wartości atrybutu:
off – wyłączenie mechanizmu uzupełniania dla danego formularza (pola). Zabrania przeglądarce
zapamiętywania na przyszłość wprowadzanej zawartości. Np. można by zabronić zapamiętywania
numeru pesel czy nr dowodu osobistego. W wielu przeglądarkach nie da się wyłączyć zapamiętywania
nazwy użytkownika i hasła – przeglądarka będzie proponować zapamiętanie tych wartości, nawet przy
ustawieniu off.
name – pełna nazwa (imię i nazwisko, nazwa organizacji)
given-name - imię
family-name – nazwisko
username – nazwa użytkownika
current-password – hasło
new-password – nowe hasło
street-address – adres: ulica
country-name – nazwa kraju
postal-code – kod pocztowy
Automatyczne uzupełnianie pól formularzy 2/3

Najważniejsze wartości atrybutu autocomplete ciąg dalszy:

cc-name – nazwa na instrumencie płatniczym (np. karcie kredytowej)
cc-number – numer instrumentu płatniczego
cc-exp – data wygaśnięcia instrumentu płatniczego
cc-csc – kod bezpieczeństwa instrumentu płatniczego (np. CVV)
cc-type – typ instrumentu płatniczego (np. karta Visa)
transaction-currency – waluta
transaction-amount – kwota transakcji
language – język
bday – data urodzenia
sex – płeć
url – adres URL witryny domowej (osoby, firmy itp.)
tel – numer telefonu
email – adres email
impp – URL reprezentujący link użytkownika w formacie protokołu aplikacji
błyskawicznych (np. WhatsApp, Messenger itp.)
Automatyczne uzupełnianie pól formularzy 3/3

W atrybucie autocomplete można podać od 1 do nawet 4 wartości. Opcjonalnie można

zamieścić dodatkowe wskazówki dla przeglądarki oddzielając je spacjami. Między
innymi:
Informację o sekcji, do jakiej należy dane pole. Nazwy grup mogą być dowolne, jednak
muszą zaczynać się od prefiksu section-
Opcjonalną informacje czy dane dotyczą adresu wysyłki (wartość: shipping) lub
rachunku/faktury (wartość: billing)
Dodatkowe informacje o danych kontaktowych (w tym o numerze telefonu, adresie
email):
home – dom
work – praca
mobile – lokalizacja nie gra roli
fax – faks
pager - pager
Przykład automatycznego uzupełniania pól
<form action="http://www.wsb.pl/skrypt.php" method="post">
<fieldset>
<legend>Dane do wysyłki</legend> <label for="odb">Odbiorca:</label>
<input id="odb" type="text" name="odb" autocomplete="shipping name" > <br>
<label for="ul">Ulica i numer domu/mieszkania:</label>
<input id="ulica" type="text" name="ulica" autocomplete="shipping address-line1"><br>
<label for="miejscow">Miejscowość:</label>
<input id="miejscow" type="text" name="miejsc" autocomplete="shipping address-level2"><br>
<label for="kod">Kod pocztowy:</label>
<input id="kod" type="text" name="kod" autocomplete="shipping postal-code"><br>
</fieldset> <fieldset>
<legend>Dane do faktury</legend> <label for="n">Imię i nazwisko lub nazwa firmy:</label>
<input id="n" type="text" name="n" autocomplete="billing name"><br>
<label for="ulica-fakt">Ulica i numer budynku:</label>
<input id="ulica-fakt" type="text" name="ulica-fakt" autocomplete="billing address-line1">
<br><label for="miejscow-f">Miejscowość:</label>
<input id="miejscow-f" type="text" name="miejscow-f" autocomplete="billing address-level2">
<br><label for="kod-faktura">Kod pocztowy:</label>
<input id="kod-faktura" type="text" name="kod-fakt" autocomplete="billing postal-code"><br>
</fieldset> <input type='submit' value="Zapisz">
</form>
Przykład automatycznego uzupełniania pól - efekt
235 – Automatyczne uzupełnianie w oparciu o historię

1. Plik z poprzedniego ćwiczenia zapisz jako 235.html

2. Usuń atrybut disabled z pola dotyczącego profilu w serwisie facebook
3. Skonfiguruj formularz i wybrane pola tak, aby przeglądarka podpowiadała
wartości pól na podstawie danych wcześniej wprowadzanych do tego i innych
formularzy. Ustaw odpowiednie wartości atrybutu autocomplete w następujących
elementach:
1. Dla <form>: "on" – zezwala przeglądarce na podpowiadanie wartości.
2. Dla pola użytkownik: "username"
3. Dla pola email: "email"
4. Dla pola z adresem facebook: "url"
4. Sprawdź działanie w 2 przeglądarkach. Przetestuj uzupełnianie wartości przez
przeglądarkę. Sprawdź czy po wysłaniu formularza i jego
powtórnym wypełnianiu, podpowiadane są wcześniej
używane wartości
1. sprawdź poprawność kodu http://validator.w3.org
Podpowiadanie - element <datalist>

<datalist> - element pozwala stworzyć listę sugerowanych wartości, które mogą być
podpowiadane użytkownikowi w czasie wypełniania pola powiązanego z danym
elementem <datalist>. Sugestie zamieszcza się w elementach <option> wewnątrz
<datalist>
Ważniejsze atrybuty: Atrybuty globalne, zdarzenia
Podpowiadanie - przykład
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład formularza</title>
</head>
<body>
<h1>Jakiego ssaka ostatnio widziałeś w lesie?</h1>
<form action="http://www.wsb.pl/skrypt.php" method="post">
<input type="text" list="ssaki">
<datalist id="ssaki">
<option value="borsuk">
<option value="jeleń">
<option value="sarna">
</datalist>
<input type="submit" value="Zapisz">
</form>
</body>
</html>
Pokazywanie wyników i postępu: <output>, <progress>, <meter>
<output> - element służy do wyświetlania wyników obliczeń lub efektów akcji podjętej przez użytkownika. Atrybuty:
Atrybuty globalne, zdarzenia,
for – opisuje, dla których pól przeprowadzono obliczenie
form - sprawdź opis atrybutu dla elementu <input>,
name - sprawdź opis atrybutu dla elementu <input>,
<progress> - element służy do wyświetlania postępu zadania Atrybuty:
Atrybuty globalne, zdarzenia,
value – bieżąca wartość
max – maksymalna możliwa wartość
<meter> - element służy do przedstawiania pomiaru w znanym zakresie wartości, na przykład odsetka głosujących
na daną odpowiedź w ankiecie. Atrybuty:
Atrybuty globalne, zdarzenia,
value – bieżąca wartość
min – minimalna możliwa wartość
max – maksymalna możliwa wartość
low – jeśli wartość value jest poniżej low, to przeglądarka może wyróżnić element <meter> innym kolorem
(zwykle żółty, czerwony)
high – jeśli wartość value jest powyżej high, to przeglądarka może wyróżnić element <meter> innym kolorem
(zwykle żółty, czerwony)
optimum – w połączeniu z atrybutami low i/lub high, przeglądarka jest w stanie zidentyfikować czy wartość
value elementu <meter> jest w optymalnym zakresie i może to podkreślić kolorystycznie.
Przykład pokazywania wyników i postępu
<section >
<h2>Kalkulator</h2>
<form oninput="suma.value = a.valueAsNumber + b.valueAsNumber">
<label for="a-id">Pierwsza liczba</label>
<input name="a" type="number" step="any" id="a-id"><br>
<label for="b-id">Druga liczba</label>
<input name="b" type="number" step="any" id="b-id"><br>
<label for="suma-id">Suma obu liczb</label>
<output name="suma" for="a b" id="suma-id"></output><br>
</form>
</section>
<section>
<h2>Postęp</h2>
<label for="postep">Odpowiedziałeś już na 75% pytań!</label>
<progress id="postep" max="100" value="75"> <span>75%</span> </progress>
</section>
<section>
<h2>Wynik</h2>
<label for="wynik">Liczba pytań na które odpowiedziałeś poprawnie:</label>
<meter id="wynik" min="0" max="30" low="15" value="14"> 14 (z 30) </meter>
</section>
240 – Formularz: podpowiadanie wskazanych wartości

1. Utwórz nowy plik HTML: 240.html

2. Utwórz formularz <form> z polami jak poniżej.
3. Pole wskazujące stopień wypełnienia formularza <progress>. Wartość (atrybut
value) ustaw na 33, atrybut max na 100
4. Pole <input type="text" list="…"> służące do wprowadzania nazwy ulubionego
owocu. Pole ma podpowiadać wpisywany tekst, co wymaga stworzenia listy
<datalist id="…"> z kilkoma wartościami <option value="wartość" id="…">
5. Poniżej formularza zamieść element pokazujący że 450 osób z oczekiwanych 500
wypełniło już ten formularz (<meter> i atrybuty min, max, value)
6. Sprawdź działanie w dwóch przeglądarkach, wpisując pojedynczą literę w polu
tekstowym (taką która występuje wśród choć jednej wartości wprowadzonej w
datalist. Sprawdź poprawność kodu: http://validator.w3.org
Skrypty
W HTML można zagnieżdżać skrypty działające po stronie klienta:
uruchamiane w momencie ich załadowania przez przeglądarkę
uruchamiane przez zdarzenia (w momencie wystąpienia zdarzenia) – dostępne z poziomu HTML
za pomocą atrybutów zdarzeń.
<script> - element służący do zagnieżdżania skryptów lub bloków danych w dokumencie.
• Może występować dowolną liczbę razy, zarówno w sekcji <head> jak i <body>.
• Skrypty można zagnieżdżać bezpośrednio w dokumencie HTML pomiędzy <script></script> lub
wskazywać osobne pliki ze skryptami (zalecane, bo pozwala zachować lepszą przejrzystość kodu).
• Jeśli zawartość elementu jest skryptem, to powinna być zgodna ze specyfikacją JavaScript [ECMA-
262].
• Jeśli zawartość jest blokiem danych, to dane powinny być zawarte wewnątrz <script></script> a ich
format powinien być zgodny z typem wskazanym atrybutem type.
• Skrypty zawarte w plikach zewnętrznych domyślnie są ściągane równolegle z innymi zasobami i
natychmiast wykonywane. Przetwarzanie innych zasobów jest jednak blokowane dotąd, dopóki nie
wykonają się skrypty. Blokowanie przetwarzania innych zasobów do czasu wykonania się skryptów
można wyłączyć atrybutami defer lub async.
<nosrcipt> – element zawiera informacje, które zostaną wyświetlone tylko w sytuacji, jeśli skrypt nie
może zostać wykonany (przeglądarka nie obsługuje danego języka, użytkownik wyłączył uruchamianie
skryptów).
Ważniejsze atrybuty elementu <script> 1/2
• Atrybuty globalne
• src – URL do zewnętrznego zasobu (pliku) ze skryptem.
• type – Wskazuje typ dołączanego zasobu. Rodzaje zasobów, jakie można dołączać:
skrypty klasyczne: atrybut nie ustawiony w ogóle lub ustawiony na jeden z typów MIME
wskazujących JavaScript, np. text/javascript.
skrypty modułowe: atrybut ustawiony na wartość "module". Skrypty modułowe to nowocześniejszy
sposób tworzenia skryptów JavaScript, gdzie skrypt jest podzielony na moduły.
bloki danych: ustawienie atrybutu na dowolny typ MIME. Zawartość wskazana jako blok danych
nie jest przetwarzana przez przeglądarkę.
• async – dotyczy skryptów klasycznych i modułowych ładowanych z osobnych plików za pomocą
atrybutu src. Atrybut informuje przeglądarkę, że ściąganie pliku ze skryptem może odbywać się
równolegle do przetwarzania strony a wykonywanie skryptu może rozpocząć się natychmiast po jego
ściągnięciu. Skrypt może, więc zostać wykonany, zanim inne zasoby strony zostaną ściągnięte lub
przetworzone przez przeglądarkę. Sam skrypt w żaden sposób nie blokuje innych zasobów strony.
• defer - dotyczy tylko skryptów klasycznych ładowanych z osobnych plików za pomocą atrybutu src.
Oznacza, że ściąganie pliku ze skryptem może odbywać się równolegle do przetwarzania strony, ale
wykonywanie skryptu może rozpocząć się dopiero wtedy, gdy przeglądarka zakończy ściąganie i
przetwarzanie pozostałych zasobów. Atrybutu tego powinno się używać, jeśli skrypt wykonuje
operacje na elementach strony i sam nie ma wbudowanych mechanizmów oczekiwania na pełne
załadowanie się strony.
Ważniejsze atrybuty elementu <script> 1/2

• crossorgin – atrybut dotyczący zabezpieczeń CORS (Cross-Origin Resources Sharing), czyli

ustawień dotyczących zasobów udostępnianych przez obce serwery. Atrybut dotyczy
sytuacji, gdy skrypt jest hostowany na innym serwerze lub udostępniany za pomocą innego
protokołu lub portu niż dokument, w którym jest używany. Dla skryptów modułowych
przeglądarki zawsze używają protokołu CORS. W tym wypadku wartość atrybutu decyduje o
tym czy przy ściąganiu zasobów będzie używana autentykacja:
anonymous – anonimowy dostęp do zasobów (bez autentykacji). Serwer z którego
ściągane są zasoby, musi na to pozwalać.
use-credentials – w zapytaniu o zasoby będą przesyłane informacje dotyczące
autentykacji. Autentykacja konfigurowana jest zwykle na poziomie serwera www. Może
odbywać się np. poprzez ciasteczka, certyfikaty SSL czy autentykację protokołu http. Język
HTML nie ma wpływu na te szczegóły.
• integrity – atrybut poprawiający bezpieczeństwo, używany do sprawdzania integralności
danych przechowywanych na obcych serwerach. Zawartość atrybutu to skrót lub skróty
kryptograficzne dołączanego pliku poprzedzone prefiksem oznaczającym używaną funkcję
kryptograficzną. Przykłady prefiksów oznaczających funkcje kryptograficzne to sha384- czy
sha512-. Przeglądarka po ściągnięciu zasobu sprawdza go tą samą funkcją kryptograficzną i
używa go jedynie wtedy, gdy skrót kryptograficzny pliku zgadza się ze skrótem zawartym w
atrybucie integrity.
Przykład dołączania skryptów
<!doctype html> <html lang="pl"> <head> <meta charset="UTF-8">
<!-- dołączenie bibliot. jquery ze sprawdzeniem jej integralności przy użyciu funkcji
kryptograficznej sh256 (integrity) bez logowania się do serwera jquery.com (crossorgin) -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvuH60="
crossorigin="anonymous"></script>
<script src="gra.js"></script> <!--dołączenie pliku ze skryptem gra.js-->
<!– poniżej dane dla gry, przeglądarka je zignoruje, bo atrybut type nie wskazuje że to JS-->
<script type="text/x-game-map">
........U.........e
.A..AAA...AAAAA...e
</script>
<!-- dołączenie przykładowego skryptu modułowego. Skrypty modułowe umożliwiają podział kodu
na moduły i wykonują się dopiero po przetworzeniu całego dokumentu -->
<script type="module" src="aplikacja.js"></script>
</head> <body>
<noscript>
<p>Twoja przeglądarka nie obsługuje skryptów lub została skonfigurowana w ten sposób by ich
nie obsługiwać. Z tego powodu nie widzisz wszystkich funkcjonalności tej witryny. </p>
</noscript>
</body></html>
Atrybuty zdarzeń

• Atrybuty zdarzeń można przypisywać do większości elementów HTML. Jako wartość

przyjmują one skrypt. Najczęściej przypisuje się im wywołanie funkcji, która jest
zdefiniowana w innym miejscu (zewnętrznym pliku lub wewnątrz elementu
<script>).
• Atrybuty zdarzeń rozpoczynają się od prefiksu „on”. Np. skrypt wewnątrz atrybutu
onclick zostanie uruchomiony w momencie kliknięcia myszką w element, w którym
użyto tego atrybutu. Z listą dostępnych atrybutów można zapoznać się pod likami:
• https://www.w3.org/wiki/HTML/Attributes/_Global#Event-handler_Attributes
• https://developer.mozilla.org/pl/docs/Web/Events
• Wiele różnych atrybutów zdarzeń może być przypisanych do tego samego
elementu.
• Zdarzenia są dostępne również z poziomu JavaScript przy użyciu metody
addEventListener(). Ze względu na przejrzystość kodu, wielu programistów preferuje
dodawanie obsługi zdarzeń właśnie w kodzie JavaScript zamiast w kodzie HTML.
• Skrypty mogą modyfikować zawartość dokumentu HTML używając interfejsu
programistycznego DOM
Przykładowe atrybuty zdarzeń:
• onload – zakończenie ładowania elementu (często używane w elemencie <body> - wówczas oznacza także załadowanie
całego dokumentu);
• onclick – użytkownik kliknął na element;
• ondblclick - użytkownik kliknął na element dwa razy;
• onmousedown – użytkownik nacisnął klawisz myszki nad elementem;
• onmouseup – użytkownik puścił klawisz myszki nad elementem;
• onmouseover – użytkownik wjechał myszką nad element;
• onmousemove – użytkownik ruszył myszką nad elementem;
• onmouseout – myszka opuściła obszar nad elementem;
• onfocus – element stał się aktywny (np. po wciśnięciu tab);
• onblur – element stał się nieaktywny;
• onkeypress – klawisz został wciśnięty i puszczony nad elementem;
• onkeydown – w momencie wciskania klawisza nad elementem;
• onkeyup – w momencie puszczania klawisza nad elementem;
• onsubmit – moment wysłania formularza;
• onreset – moment resetowania formularza;
• onselect – zaznaczanie tekstu;
• onchange – wartość elementu formularza została zmodyfikowana;
Przykład dołączenia skryptu i użycia zdarzenia

<!doctype html> <html lang="en">

<head>
<meta charset="UTF-8" />
<title>Skrypty JavaScript</title>
<!-- dołączenie skryptu ściągniętego z internetu - wyświetla spadające liście. Skrypt
uruchomi się natychmiast po załadowaniu -->
<script src="picture-fall.js" type="text/javascript"></script>
</head>
<body>
<h1>Skrypt javascript</h1>
<!-- przypisanie do zdarzenia onclick konkretnej funkcji kliknięcie na tekst w h2
spowoduje uruchomienie funkcji -->
<h2 onclick="start()">Po kliknięciu na ten tekst wyskoczy okienko z tekstem</h2>
<p>Zwykły akapit tekstu</p>
<!-- skrypt javascript generujący wyskakujące
okienko z tekstem ala ma kota-->
<script type="text/javascript">
function start() {
alert('ala ma kota')
}
</script>
</body></html>
250 – Skrypt JavaScript: efekt
250 – Skrypt JavaScript
1. Utwórz nowy plik HTML: 250.html
2. Ściągnij z Moodle archiwum pliki-startowe.zip i rozpakuj. W środku znajduje się folder 250,
wkopiuj go do katalogu w którym pracujesz.
3. W pliku html, w sekcji <head> dołącz (<script src="…"></script>) poniższe pliki dokładnie w
poniższej kolejności. Aby uniknąć literówek, korzystaj z podpowiedzi edytora.
250/JSFX_Layer.js
250/JSFX_Browser.js
250/JSFX_Mouse.js
250/JSFX_MouseSquidie.js
1. Dołącz jako skrypt <script> …</script> w sekcji <head> następujący kod:
function start() {
JSFX.MakeMouseSquidie(15,"<img src='250/alien_head.gif'>","<img src='250/alien_tail.gif'>");
}
1. Umieść wywołanie funkcji start() jako akcję dla zdarzenia załadowania treści elementu body:
<body onload="start();" >
2. Przekopiuj do HTML zawartość pliku prawa-autorskie.txt jako komentarz <!-- … -->
3. Zamieść informacje dla przeglądarek nie obsługujących JavaScript (<noscript>)
4. Sprawdź działanie w przeglądarce. Spróbuj także tymczasowo wyłączyć w przeglądarce obsługę
JavaScript by zobaczyć działanie elementu <noscript>.
XHTML – różnice względem HTML 1/2
• Dokumenty XHTML muszą być porządnie zbudowane (well-formed) – np. niedopuszczalne jest
zamykanie tagów w złej kolejności
Źle: <p>tekst<em>test 2</p></em>
Dobrze: <p>tekst<em>test 2</em></p>
• Elementy i atrybuty muszą być pisane małymi literami (w HTMLu jest to obojętne),
np. <a shref=…>
• Atrybuty muszą być zawsze w cudzysłowach (HTML dopuszczał podawanie niektórych atrybutów
bez cudzysłowów),
np. <td rowspan= "3" >
• Każdy atrybut musi mieć przypisaną wartość (HTML dopuszczał podawanie niektórych atrybutów
jako nazwy bez przypisanej wartości),
np. <dl compact="compact">
• Elementy które w HTMLu nie mają tagów zamykających w HTMLu muszą mieć znaki zamykające,
2 sposoby:
dodanie / do tagu
<br />
lub otwarcie i zamknięcie tagu)
<br></br>
XHTML – różnice względem HTML 1/2
• Znaki < oraz & zawarte w skryptach <script> oraz stylach <style> będą interpretowane jako
fragmenty XHTML (początki tagów i referencji znakowych).
• Referencje znakowe &lt; oraz &amp; zawarte w skryptach i stylach będą przetwarzane przez
praser do < i &.
• Aby zapobiec dwóm powyższym należy:
Dołączać skrypty (lub style) jako zewnętrzne pliki
Zawierać skrypty (lub style) w <script type="text/javascript"> <![CDATA[ treść skryptu
]]></script>
• DOM XHTML zwraca elementy i atrybuty małymi literami, DOM HTML – dużymi literami.
Ważne w skryptach działających po stronie klienta korzystających z DOM
• Wartości atrybutów uściślone przez HTML należy pisać małymi literami (w HTML było to
obojętne), np. <input type="text" />
• Referencje znakowe w zapisie szestastkowym muszą zaczynać się od małego x – w html było to
obojętne, np.: &#x98
• Deklaracja XML jest niezbędna jeśli używa się kodowania innego niż UTF-8 lub UTF-16, w
przypadku użycia UTF wciąż jest zalecana
• Element <html> musi zawierać deklarację przestrzeni nazw (zastrzeżonych nazw) XHTML - <html
xmlns="http://www.w3.org/1999/xhtml" …
XHTML – przykład

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
<head>
<title>Tytuł strony</title>
</head>
<body>
<p>To jest akapit.</p>
</body>
</html>
XHTML – zgodność z HTML
• XHTML daje następujące zalecenia jeśli chodzi o zgodność z przeglądarkami, które znają tylko HTML:
• Można pominąć delarację xml (może spowodować błąd w starych przeglądarkach), ale dokument
musi być kodowany w UTF.
• Elementy puste (bez tagów zamykających) warto zapisywać w postaci skróconej – dodać /, a przed /
najlepiej zostawić spację, np. <br />
• Jeśli style lub skrypty zawierają znaki <, & lub ]]> najlepiej umieszczać je w zewnętrznych plikach
• Zalecane używanie zarówno lang jak i xml:lang w tagach. xml:lang ma wyższy priorytet.
xml:lang to odpowiednik HTMLowego lang
• Kodowanie znaków określa się w nagłówku xml, dla przeglądarek nie obsługujących XHTML
dodatkowo można je określić w <meta>: <meta http-equiv="Content-type" content="text/html;
charset=utf-8" />
• Znak & ma znaczenie specjalne (początek nazwanej referencji znakowej) i nie może być używany w
treści czy wartościach atrybutów. Do wyświetlenia & należy używać &amp;,
np.. <a href= http://www.serwer.pl/skrypt.php?a=1&amp;b=2
• W kaskadowych arkuszach stylów należy używać małych liter jako selektorów klas i atrybutów (w
XHTML są one pisane małymi literami)
• Przy użyciu elementu <style> należy go również wymienić w deklaracji stylów xml
XHML – przykład z wewnętrznymi stylami CSS

<?xml-stylesheet href="http://www.serwer.pl/style.css"
type="text/css"?>
<?xml-stylesheet href="#wewnetrznyStyl" type="text/css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Tytuł</title>
<style type="text/css" id="wewnetrznyStyl">
p {
color: green;
}
</style>
</head>
<body>
<p>Treść akapitu</p>
</body>
</html>
HTML – tematy zaawansowane

HTML
Tematy zaawansowane
(wymagające użycia
skryptów)
HTML – Ważniejsze atrybuty globalne przydatne w zastosowaniach zaawansowanych
• aria-*, role - atrybuty zdefiniowane w rekomendacji Web Accessibility Initiative – Accessible Rich
Internet Applications (w skrócie WAI-ARIA lub ARIA). ARIA to zbiór atrybutów, które umożliwiają
tworzenie aplikacji webowych (szczególnie tych, które wykorzystują AJAX, Javascript, CSS) w sposób
przyjazny ludziom z niepełnosprawnościami. Dla przykładu, dodanie atrybutów ARIA umożliwia
zorientowanie się czytnikowi dla niewidomych czy dany link jest częścią menu nawigacyjnego oraz czy
menu lub treść są w danym momencie widoczne czy też ukryte za pomocą stylów CSS lub skryptu
JavaScript.
• contenteditable (true, false) – określa, czy dany element można edytować. Można go użyć z
elementami, które w ogóle nie są przeznaczone do edycji – takimi jak np. <p> czy <span>.
Przeglądarka nic nie zrobi z wprowadzoną czy zmienioną treścią. Należałoby utworzyć skrypt, który
coś zrobi z wprowadzonymi zmianami. Przykład w jakim można by wykorzystać ten atrybut, to
stworzenie edytora tekstu działającego w przeglądarce.
• dir (ltr, rtl) – określa kierunek tekstu w elemencie, w którym go użyto: od lewej do prawej (ltr) lub od
prawej do lewej (rtl).
• draggable (true, false) – atrybut określający, czy element można przeciągać. Przy użyciu tego
atrybutu wraz ze skryptami JavaScript, da się stworzyć stronę w której użytkownik może przeciągać
elementy z jednego miejsca w inne.
• spellcheck (true, false) – określa, czy sprawdzać pisownię i gramatykę tekstu. Działa dla elementów
edytowalnych – czyli elementów formularzy oraz elementów z atrybutem contenteditable ustawionym
na true.
• translate (yes, no) – określa, czy przeglądarka może tłumaczyć tekst elementu
Przykład użycia atrybutów WAI ARIA - efekt
Przykład użycia atrybutów WAI ARIA
<!doctype html> <html lang="pl"> <head> <meta charset="UTF-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script> $( function() { $( "#zakladki" ).tabs(); } ); </script>
</head> <body>
<!-- Dzięki stylom CSS i skryptowi JS fragment HTML poniżej jest wyświetlany jako zakładki.
Atrybuty WAI ARIA: role, aria-* dają szansę np. czytnikowi dla niewidomych zrozumienie
kontekstu wyświetlania i w efekcie na przeczytanie etykiety dla danego akapitu zawartej w
elementach li, przed odczytaniem treści danego akapitu. -->
<div id="zakladki" role="tablist">
<ul>
<li id="l1" role="tab"><a href="#z1">HTML</a></li>
<li id="l2" role="tab"><a href="#z2">CSS</a></li>
<li id="l3" role="tab"><a href="#z3">JavaScript</a></li>
</ul>
<div>
<p id="z1" role="tabpanel" aria-labelledby="l1">HTML pozwala opisać strukturę...</p>
<p id="z2" role="tabpanel" aria-labelledby="l2">Arkusz stylów CSS to lista dyrektyw... </p>
<p id="z3" role="tabpanel" aria-labelledby="l3">Najczęściej spotykanym zastosowaniem...</p>
</div></div></body></html>
Przykład użycia atrybutów contenteditable i spellcheck
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML - atrybuty globalne</title>
</head>
<body>
<p contenteditable="true" spellcheck="true">
HTML pozwala opisać strukturę informacji zawartych wewnątrz strony internetowej,
nadając znaczenie poszczególnym fragmentom tekstu – formując hiperłącza, akapity, nagłówki,
listy – oraz osadza w tekście dokumentu obiekty plikowe np. multimedia bądź elementy baz
danych np. interaktywne formularze danych.
</p>
</div>
</body>
</html>
280 – Atrybuty

1. Stwórz nowy plik: 280.html.

2. Dodaj akapit tekstu <p> z atrybutem contenteditable który umożliwi edycję tekstu.
3. Dodaj element <textarea> z atrybutem spellcheck który pozwoli przeglądarce
sprawdzać poprawność wprowadzanego tekstu.
4. Dodaj akapit tekstu <p> z atrybutem lang="en-US" i zawartością „This is text in
English”
5. Sprawdź poprawność strony pod adresem http://validator.w3.org
6. Sprawdź działanie w przeglądarkach.
1. Czy pierwszy akapit można edytować?
2. Czy przy wpisywaniu danych do elementu
<textarea> przeglądarka wyróżnia błędy
ortograficzne i literówki?
3. Czy przeglądarka Chrome tłumaczy tekst w
akapicie w języku angielskim na polski
(prawy klawisz myszy na tekście i wybór
„przetłumacz na język polski”)
Przykład użycia przeciągnij i upuść - efekt
Przykład użycia przeciągnij i upuść
<!DOCTYPE html> <html lang="pl">
<head>
<meta charset="utf-8"> <title>Przeciągnij i upuść</title>
<style>
div { width: 350px; height: 200px; padding: 10px; border: 1px solid #aaaaaa; }
</style>
<script>
function pozwol(ev) { ev.preventDefault(); }
function przeciagnij(ev) { ev.dataTransfer.setData("text", ev.target.id); }
function upusc(ev) { ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data)); }
</script>
</head>
<body>
<p>Dzięki atrybutowi draggable oraz skryptowi JavaScript grafikę poniżej
da się przeciągnąć do elementu div oznaczonego ramką. Spróbuj!</p>
<div ondrop="upusc(event)" ondragover="pozwol(event)"></div> <br>
<img id="g" src="grafika/kuropatwa-300.jpg" draggable="true" ondragstart="przeciagnij(event)"
alt="zdjęcie kuropatwy">
</body></html>
Powielanie szablonów kodu HTML

<template> – element umożliwia zadeklarowanie fragmentu kodu HTML, który może

być wykorzystywany przez skrypty JavaScript do powielania tego fragmentu.
<template> i jego zawartość nie są wyświetlane przez przeglądarkę (nie są traktowane
jako część dokumentu HTML). Dopiero kod powielony z elementu <template> staje się
częścią dokumentu HTML i jest wyświetlany.
<slot> - jest wykorzystywany wewnątrz elementu <template>, pozwalając na
parametryzację kodu HTML umieszczonego w <template>. Element <slot> tworzy
nazwane miejsce w kodzie – nazwę dla slotu podaje się używając atrybutu name. Dzięki
tej nazwie, podczas korzystania z szablonu będzie można wprowadzać dowolną treść:
wystarczy w kodzie opartym o szablon wykorzystać wybrany element html (np. <span>)
wraz atrybutem name którego wartością będzie nazwa zdefiniowanego wcześniej slotu.
Przykład powielania - efekt
Przykład powielania
<!DOCTYPE html>
<html lang="pl">
<head> <meta charset="utf-8"> <title>Element template - przykład</title>
<script>
function klonuj() {
const fragment = document.getElementById('szablon').content.cloneNode(true);
document.body.appendChild(fragment);
}
</script>
</head>
<body>
<p>Przykład użycia elementu template. Każde naciśnięcie przycisku klonuje
drozda. Naciśnij przycisk kilka razy aby wyświetlić kilka drozdów!
</p>
<button type="button" onclick="klonuj();">Sklonuj drozda!</button>
<template id="szablon">
<p>Sympatyczny drozd:</p>
<img src="grafika/drozd-200.jpg" alt="zdjęcie drozda">
</template>
</body>
</html>
Własne elementy i atrybuty
• HTML umożliwia tworzenie własnych elementów.
• Aby stworzyć własny element trzeba napisać kod JavaScript zgodnie z wytycznymi zawartymi w
rekomendacji HTML.
• Nazwa własnego elementu składa się z dwóch członów oddzielonych myślnikiem.
• Dla własnych elementów można programistycznie w JavaScript definiować ich domyślny wygląd
w oparciu o style CSS.
• Dostępne są 2 typy własnych elementów:
Elementy autonomiczne: elementy, które całkowicie definiuje twórca. Twórca również określa
znaczenie nowego elementu.
Elementy rozbudowane: elementy które rozszerzają elementy już wbudowane w HTML.
Elementy rozbudowane dziedziczą atrybuty od elementu o który zostały oparte.
• Przy tworzeniu własnych elementów często wykorzystuje się elementy <template> (definicja
szablonu kodu HTML/CSS) oraz <slot> (parametryzacja szablonu kodu)
• Atrybuty zaczynające się od prefiksu „data-” są traktowane jako poprawne i nie wpływają na
wygląd strony.
• Twórcy mogą je wykorzystywać na potrzeby własnych skryptów działających na ich stronach,
np. na stronie do odsłuchiwania muzyki atrybut data-dlugosc-piosenki użyty w elementach listy
mógłby być wykorzystywany przez skrypt sortujący piosenki wg długości utworu.
Przykład użycia własnego elementu 1/2
<!DOCTYPE html> <html lang="pl">
<head> <meta charset="utf-8"/> <title>Własny element</title> </head>
<body>
<template id="element-szablon"> <!-- sablon kodu -->
<style> /* ustawienie poprzez CSS koloru tła i odległości */
details { background: yellow; padding: 2px 6px 2px 6px; }
</style>
<details>
<summary><slot name="ptak">NAZWA</slot> <!-- stworzenie slotu ptak --> </summary>
<p> <slot name="opis">OPIS</slot><!-- stworzenie slotu opis --> </p>
</details> <hr>
</template>
<element-szczegoly> <!-- użycie własnego elementu-->
<span slot="ptak">Kukułka</span> <!-- użycie slotu ptak-->
<span slot="opis">Kukułka zwyczajna, kukułka pospolita, ... </span>
</element-szczegoly>
<element-szczegoly> <!-- użycie własnego elementu-->
<span slot="ptak">Drop</span><!-- użycie slotu ptak-->
<span slot="opis">Drop zwyczajny, drop, drop wielki ...</span>
</element-szczegoly>
Przykład użycia własnego elementu 2/2
<script>/*utworzenie elementu element-szczegoly opartego o szablon*/
customElements.define('element-szczegoly',
class extends HTMLElement {
constructor() {
super(); /*uruchomienie konstruktora rodzica*/
var szablon = document.getElementById('element-szablon').content;
const shadowRoot = this.attachShadow({mode: 'open'})
.appendChild(szablon.cloneNode(true)); /*dołączenie zawartości wg szablonu */
}
}
)
</script>
</body>
</html>
Tworzenie grafiki

<canvas> – daje możliwość rysowania grafiki za pomocą skryptów.

Dostępnych jest szereg funkcji umożliwiających rysowanie poszczególnych
punktów, krzywych czy figur geometrycznych. Większość gier działających
w przeglądarkach wykorzystuje właśnie ten element.
Przykład rysowania w elemencie canvas
<!DOCTYPE html>
<html lang="pl">
<head> <meta charset="utf-8"/> <title>Element canvas - przykład</title>
<script>
function rysuj() {
var canvas = document.getElementById('kanwa');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);
}
}
</script>
</head>
<body onload="rysuj();">
<p>Przykład narysowania prostej grafiki przy użyciu elementu canvas</p>
<canvas id="kanwa" width="150" height="150" ></canvas>
</body>
</html>
Zagnieżdzanie wzorów MathML

<math> – służy do zagnieżdżania MathML (język do tworzenia równań

matematycznych) w kodzie HTML. Specyfikacje języka MathML dostępne są
na stronach W3C: https://www.w3.org/Math/
Przykład zagnieżdżania MathML wewnątrz HTML
<body>
<p>Przykład wzoru zapisanego językiem MathML wewnątrz elementu math: </p>
<math>
<mrow>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi> <mn>2</mn>
</msup>
</mrow>
<mo>=</mo>
<msup>
<mi>c</mi> <mn>2</mn>
</msup>
</mrow>
</math>
</body>
Zagnieżdżanie kodu SVG

• SVG to format grafiki wektorowej zdefiniowany przez W3C wspierany przez

większość przeglądarek. Rekomendacje dotyczące standardu można znaleźć na
stronach W3C: https://www.w3.org/Graphics/SVG/
• HTML 5 pozwala zagnieżdżać SVG nie tylko za pomocą <img> jako zewnętrzny plik,
ale również bezpośrednio w dokumencie HTML. Podobnie jak HTML czy MathML,
język SVG składa się z tagów. Do zagnieżdżania grafik w języku SVG służy element
<svg>
Przykład bezpośredniego zagnieżdżania grafiki wektorowej SVG wewnątrz HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Zagnieżdżanie SVG - przykład</title>
</head>
<body>
<p>Przykład bezpośredniego zagnieżdżenia grafiki wektorowej svg w kodzie
HTML za pomocą elementu svg:</p>
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="blue" fill="yellow" />
<circle cx="150" cy="50" r="10" stroke="blue" fill="yellow" />
</svg>
</body>
</html>
Geolokalizacja

• Przeglądarki za zgodą użytkownika, poprzez interfejs API obsługiwany za pomocą

JavaScript mogą udzielać witrynom informacji na temat położenia urządzenia, na
którym działają.
• Najlepszą dokładność lokalizacji uzyskujemy na urządzeniach wyposażonych w
odbiornik GPS (o ile zezwolono przeglądarce na dostęp do danych GPS).
• Są także inne techniki geolokalizacji wspomagające GPS lub zastępujące GPS. Na
przykład:
Przybliżenie lokalizacji można uzyskać w oparciu o publiczny adres IP urządzenia.
Adresy IP przydzielane są do poszczególnych krajów czy operatorów
telekomunikacyjnych. Istnieją bazy danych podające bardzo zgrubną lokalizację
dla danego adresu IP.
Sprawdzanie nazwy wykorzystywanej sieci WiFi. Np. firma Google gromadzi
informacje o nazwach i adresach MAC wykorzystywanych przez sieci
bezprzewodowe a także lokalizacjach GPS urządzeń, które z tych sieci korzystają.
Dzięki temu firma Google jest w stanie określić zbliżoną lokalizację innych
urządzeń łączących się do danej sieci bezprzewodowej i umożliwia wykorzystanie
tych danych przeglądarkom.
Geolokalizacja - przykład
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"/> <title>geoLokalizacja - </title>
<script>
function geoLokalizacja() {
var element = document.getElementById("polozenie");
if (!navigator.geolocation){
element.innerHTML = "<p>Przeglądarka nie udziela informacji o lokalizacji. </p>";
return; }
function sukces(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
element.innerHTML = '<p>szerokość geograficzna: ' + latitude + '°
<br>wysokość geograficzna: ' + longitude + '°</p>'; }
function blad() {
element.innerHTML = "Nie udało się uzyskać informacji o
lokalizacji. Czy pozwoliłeś przeglądarce udostępniać położenie?"; }
element.innerHTML = "<p>sprawdzanie położenia ...</p>";
navigator.geolocation.getCurrentPosition(sukces, blad);
}
</script>
</head><body>
<p><button onclick="geoLokalizacja()">Pokaż moje położenie</button></p>
<output id="polozenie"></output>
</body></html>
Geolokalizacja – przykład - efetk
 Powiadamianie przeglądarki - Push API i Notification API
• Push API – rekomendacja dotycząca wysyłania przez serwery aplikacyjne asynchronicznych powiadomień do przeglądarki.
Umożliwia zapisanie się przeglądarce na otrzymywanie powiadomień z serwera.
• Notification API – rekomendacja dotycząca wyświetlania przez przeglądarki otrzymanych powiadomień.
• Wykorzystanie obu interfejsów programistycznych umożliwia wyświetlanie przez przeglądarki powiadomień pochodzących
od serwerów aplikacyjnych.
• Przykładami użycia Push API są:
powiadomienie przeglądarki przez portal internetowy, o głównej wiadomości dnia.
powiadamianie przeglądarki przez serwer pocztowy o tym, że nadeszła nowa wiadomość którą można odczytać w
programie pocztowym działającym w przeglądarce.
• Powiadomienie – wiadomość wyświetlana poza interfejsem użytkownika aplikacji webowej, ale w ramach przeglądarki.
• Wiadomość push – wiadomość wysłana przez serwer do przeglądarki
• Usługa push – system trasowania wiadomości pomiędzy serwerem a klientem. Każda przeglądarka ma własny system
trasowania.
• Powiadomienia z serwera aplikacji mogą być wysyłane do przeglądarki nawet wtedy, gdy aplikacja nie jest w danym
momencie w ogóle uruchomiona w przeglądarce - powiadomienie otrzymuje nie tyle aplikacja w przeglądarce, co
przeglądarka.
• Można wysyłać powiadomienia nawet wtedy, gdy przeglądarka nie jest uruchomiona. Powiadomienia są przez pewien czas
przechowywane na serwerze aplikacyjnym. Przeglądarka otrzyma powiadomienie, krótko po tym, gdy zostanie włączona.
• Użytkownik musi zgodzić się na otrzymywanie powiadomień od danej aplikacji.
• Do zwykłej komunikacji między serwerem aplikacyjnym a przeglądarką stosuje się prostsze metody niż powiadomienia –
na przykład formularze czy AJAX.
Przykład proszenia o zgodę na powiadomienia w przeglądarce
<head> <meta charset="utf-8"> <title>Powiadomienia - przykład</title>
<script>
function powiadom() {
// sprawdzenie czy przeglądarka obsługuje powiadomienia
if (!("Notification" in window)) { alert("Ta przeglądarka nie obsługuje powiadomień"); }
// sprawdzenie czy użytkownik już się zgodził na powiadomienia
else if (Notification.permission === "granted") {
var notification = new Notification("Masz nową wiadomość!"); // stworzenie powiadomienia
}
// jeśli użytkownik nie odrzucił w przeszłości powiadomień, to poproszenie o zgodę
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// Jeśli użytkownik się zgodził, to stworzenie powiadomienia
if (permission === "granted") {
var notification = new Notification("Cześć! Masz nową wiadomość!");
}
});
}
}
</script>
</head> <body>
<p><button onclick="powiadom()">Stwórz powiadomienie</button></p>
</body>
Przykład proszenia o zgodę na powiadomienia w przeglądarce - efekt
Adnotacje ruby
• <ruby> - element służący do oznaczania treści adnotacjami ruby. Adnotacje te to tekstowe wskazówki
dotyczące głównego tekstu używane przede wszystkim w językach azjatyckich do udzielania
informacji na temat wymowy.
• <rb>- element oznaczania tekstu podstawowego
• <rt> - element oznaczania adnotacji ruby
• <rtc> - element oznaczania kontenera z tekstem ruby
• <rp> - element do wprowadzania tekstu alternatywnego - dla przeglądarek, które nie wspierają
adnotacji ruby
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Ruby - przykład</title>
</head>
<body>
<ruby>法<rb>華<rb>経<rt>ほ<rt>け<rt>きょう</ruby>
</body>
</html>
Web storage
• Przeglądarki umożliwiają przechowywania danych aplikacji webowych. Najpopularniejszym
mechanizmem są ciasteczka, ale można również korzystać z web storage.
• Dzięki Web storage można przechowywać duże ilości danych - są to wartości rzędu kilku
megabajtów (dla porównania ciasteczka umożliwiają przechowywanie kilku kilkobajtów)
• 2 obiekty:
localStorage – przechowywanie danych bez daty wygaśnięcia.
sessionStorage – przechowywanie danych tylko na czas sesji (do czasu zamknięcia okna przeglądarki).
Przykład użycia local storage
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Local Storage - przykład</title>
<script>
function licznik(klikniecie){
if (localStorage.licznik) {
localStorage.licznik = Number(localStorage.licznik)+klikniecie;
} else {
localStorage.licznik=1;
}
document.getElementById('licznik-id').innerHTML=localStorage.licznik;
}
</script>
</head>
<body onload="licznik(0);">
<p>Poniższy licznik zlicza wszystkie kliknięcia. Nawet jeśli ...</p>
<button onclick="licznik(1);">Kliknij a policzę!</button><br>
<p>Kliknąłęś powyższy przycisk <span id="licznik-id">?</span> razy</p>
</body></html>
Style CSS
Style

HTML pozwala dołączać arkusze stylów w dowolnym języku, ale

praktycznie stosowany język wspierany przez wszystkie przeglądarki jest
tylko jeden: CSS
410 – Zen Garden

1. Wejdź an stronę CSS Zen Garden: http://www.csszengarden.com

• Ten sam plik HTML
• Różne pliki CSS (i grafika) = całkowicie inny wygląd
• Przejrzyj kilka - kilkanaście wersji wyglądu tej strony klikając na
linki
CSS – zasada działania

<html>
<head><title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<h1>Nagłówek</h1>
<p>To jest akapit</p> selektor właściwość wartość
</body>
</html>

arkusz.css
h1 { color: red; }
CSS – deklaracje reguł

• Deklaracje dotyczące danego selektora : arkusz.css

są zamknięte w nawiasach { … } h1{color:red;font-
kolejne właściwości są oddzielone size:12pt;background-
średnikami ; color:white}
po ostatniej deklaracji może być
arkusz.css
średnik, ale nie musi
h1 { color: red }
• znaki takie jak spacje, tabulatory, przejścia h1 { font-size: 12pt; }
do następnej linii nie są niezbędne, ale i h1 { background-color: white; }
nie przeszkadzają.
• Wszystkie 3 deklaracje obok dadzą ten arkusz.css
sam efekt. Najczęściej stosowana jest h1 {
ostatnia. color: red;
font-size: 12pt;
background-color: white;
}
CSS – błędy
• Jeśli w kodzie CSS wystąpi błąd, przeglądarka ignoruje daną regułę, właściwość lub wartość
• W poniższym przykładzie z lewej strony błędne zapisy zostaną zignorowane, i efekt będzie taki jak dla
reguł z prawej strony

h1 {
color: red;
font-style: 12pt; /* błąd: font-style nie może być liczbą. Powinno być
jedną z wartości: normal|italic|oblique|initial|inherit */ }
p {
color: blue;
font-vendor: any; /*błąd: właściwość font-vendor nie istnieje */}
}
h1 {
color: red;
}
p {
color: blue;
}
CSS – znaki i komentarze

• CSS NIE dba o wielkość liter, ala=ALA, ALE

tylko w przypadku standardowych angielskich liter (ó będzie traktowane jako inny
znak niż Ó)
• XHTML dba o wielkość liter. Nazwy klas/identyfikatorów w XHTMLu i CSS powinny
być identyczne
• Identyfikatory (tagi, nazwy klas, nazwy identyfikatorów)
mogą zawierać znaki Unicode (a więc także polskie litery)

• /* komentarz */
• Ciągi znaków w cudzysłowiach
pojedyncze (‘tekst’) lub podwójne (”tekst”).
Cudzysłów w cudzysłowiach:
”tekst ’ tekst ” lub ‘tekst ” tekst’
znak maskujący (”tekst \” tekst”) lub (‘tekst \’ tekst’)
Przykład – komentarze i ciągi znaków

/* to jest komentarz - przeglądarka zignoruje ten tekst */

h1 { /* właściwości elementów h1 w dokumentcie */
color: red; /* kolor czcionki */
font-size: 12pt; /*rozmiar czcionki */
background-color: white; /* kolor tła */
/* to też
jest komentarz
- ale w kilku linijkach
*/
}
/* przykład użycia znaku cudzysłów zagnieżdzonego wewnątrz tekstu zawartego w
cudzysłowiach.
W takim wypadku cudzysłów w środku trzeba poprzedzić ukośnikiem, w przeciwnym wypadku
przeglądarka
stwierdzi że cudzysłów w środku tekstu, to koniec tego tekstu */
[title="atrybut title zawierający cudzysłów \" to rzadkość"] { color: blue; }
/* Kolejny przykład użycia znaku cudzysłów wewnątrz tekstu. Jeśli tekst zamkniemy w
apostrofie,
cudzysłów w środku nie będzie sprawiał żadnych kłopotów */
[title='atrybut title zawierający cudzysłów " to rzadkość'] { color: green; }
CSS - liczby

• Liczby
całkowite (np. 2) i rzeczywiste (np. 1.2)
W liczbach rzeczywistych używa się kropki . (tak jak w języku angielskim) nie
przecinka , (tak jak w języku polskim)
Liczby dodatnie (bez znaku, lub znak +)
Liczby ujemne (znak -)
Procenty (%)

h1 {
font-size: 1.2ex;
/*przykład użycia ułamka: używamy kropki, a nie przecinka!*/
}
h2 {
font-size: 120%; /* przykład użycia procentów */
Jednostki i obliczenia

• CSS oferuje szereg jednostek, które mogą być wykorzystywane w różnych

kontekstach.
• Wartości liczbowe podaje się jako liczby całkowite lub rzeczywiste
• Po wartości liczbowej podaje się dopisek oznaczający jednostkę
• Co do zasady dla wyświetlania na ekranach lepiej nadają się jednostki względne
(rozmiar będzie dostosowywał się do wymiarów ekranu), a do drukowania lepiej
wykorzystywać jednostki bezwzględne.
• CSS umożliwia także przeprowadzanie prostych operacji matematycznych aby
wyliczać wartości matematyczne.
Jednostki odległości wyliczane względem wymiarów czcionki 1/2

• Wiele jednostek względnych obliczanych jest względem różnych wymiarów czcionki.

• Wyliczony wymiar będzie zależał albo od rozmiaru czcionki elementu-rodzica w
którym znajduje się dany element, albo od rozmiaru elementu-korzenia (czyli
elementu html)
• Grafika poniżej zaczerpnięta ze specyfikacji W3C, może być przydatna do
zrozumienia niektórych jednostek.
• Niektóre z poniższych jednostek są oznaczone, jako „niezatwierdzona propozycja w
wersji roboczej rekomendacji W3C” – nie zostały jeszcze oficjalnie zatwierdzone.
 Jednostki odległości wyliczane względem wymiarów czcionki 2/2
• em – 1em to rozmiar czcionki (czyli właściwość font-size) wyliczony dla elementu, dla którego użyto jednostki.
To jedna z najpopularniejszych jednostek.
• ex – 1ex to rozmiar równy wysokości małej litery x, dla pierwszej dostępnej czcionki dla elementu, dla którego
użyto jednostki (zwróć uwagę na wymiar x-height lub wysokość litery x na grafice powyżej)
• cap – niezatwierdzona propozycja w wersji roboczej rekomendacji W3C: 1cap to rozmiar równy rozmiarowi
drukowanej litery łacińskiej (zwróć uwagę na linię cap height lub na wymiar litery S na grafice powyżej).
• ch – 1ch to rozmiar cyfry 0 (zero). Zwykle będzie to szerokość, ale jeśli wyświetlanie odbywałoby się
nienaturalnej orientacji tekstu, co jest możliwe np. za pomocą obracania dostępnego w CSS, to w pewnych
okolicznościach może to być wysokość litery 0.
• ic - niezatwierdzona propozycja w wersji roboczej rekomendacji W3C: 1ic to rozmiar idiogramu “水” (znak
oznaczający „woda”). Zwykle będzie to wysokość, ale podobnie jak w przypadku jednostki ch, w pewnych
okolicznościach może to być szerokość tego idiogramu. Przydatne w językach azjatyckich.
• rem – 1rem to wysokość czcionki elementu-korzenia dokumentu, czyli elementu html. To jedna z
najpopularniejszych jednostek i najwygodniejsza przy ewentualnych przyszłych zmianach rozmiarów w
dokumencie. W razie potrzeby zmiany rozmiarów w dokumencie, przy konsekwentnym wykorzystaniu
jednostki rem, wystarczy zmienić rozmiar czcionki dla elementu html by wszystkie wymiary w dokumencie
zostały przeskalowane.
• lh – niezatwierdzona propozycja w wersji roboczej rekomendacji W3C: 1lh to rozmiar wyliczonej wysokości
linii (właściwość line-height) dla danego elementu, w oparciu o pierwszą dostępną czcionkę.
• rlh – Propozycja do rekomendacji W3C: 1rlh to rozmiar wyliczonej wysokości linii dla elementu-korzenia
dokumentu, czyli elementu html.
Jednostki odległości wyliczane względem obszaru wyświetlania

• Dostępnych jest kilka rozmiarów względnych wyliczanych względem początkowego obszaru

wyświetlania, czyli obszaru okna wyświetlarki przeznaczonego na wyświetlanie strony.
• Jeśli użytkownik zmieni rozmiar okna przeglądarki, to wszystkie wymiary zostaną
odpowiednio przeskalowane.
• vw – 1vw to 1% szerokości obszaru wyświetlania. Jedna z popularniejszych jednostek, bo
najczęściej interesuje nas bardziej szerokość obszaru wyświetlania niż wysokość obszaru
wyświetlania.
• vh – 1vh to 1% wysokości obszaru wyświetlania.
• vi – niezatwierdzona propozycja w wersji roboczej rekomendacji W3C: 1vi to 1% wymiaru
obszaru wyświetlania wzdłuż kierunku wyświetlania elementów tekstowych. Kierunek
wyświetlania może być poziomy lub pionowy (np. w niektórych językach azjatyckich).
• vb – niezatwierdzona propozycja w wersji roboczej rekomendacji W3C: 1vi to 1% wymiaru
obszaru wyświetlania wzdłuż kierunku wyświetlania elementów blokowych (elementów o
kształcie prostokąta). Kierunek wyświetlania może być poziomy lub pionowy (np. w
niektórych językach azjatyckich).
• vmin – 1vmin to jedna z wartości 1vw lub 1vh: ta która po wyliczeniu okaże się mniejsza.
• vmax – 1max to jedna z wartości 1vw lub 1vh: ta która po wyliczeniu okaże się większa.
Jednostki odległości bezwzględne

• Jednostki bezwzględne to jednostki oznaczający konkretny fizyczny wymiar.

• Są przydatne w sytuacjach, gdy z góry wiadomo, na jakich dokładnie urządzeniach
dokument będzie wykorzystywany.
• Część jednostek to popularne jednostki miary
• cm – 1cm to 1 centymetr.
• mm – 1mm to 1 milimetr.
• Q – 1Q to jedna czwarta milimetra.
• in – 1in to 1 cal. 1 cal = 2.54cm = 96px.
• pc – 1pc to jedna szósta cala. 1pc = 1/6in.
• pt – 1pt to jedna siedemdziesiąta druga cala. 1pt = 1/72in
• px – 1px to jeden piksel CSS. Jeden piksel CSS to jedna dziewięćdziesiąta szósta cala.
1px=1/96in.
Pozostałe jednostki

• Jednostki kąta
• deg – 1deg to 1 stopień, 360 stopni to pełny obrót.
• grad – 1grad to 1 gradian. 400 gradianów to pełny obrót.
• rad – 1rad to 1 radian. 2*pi radianów to pełny obrót.
• turn – 1turn to 1 obrót. 1trun to pełny obrót.
• Jednostki czasu
• s – 1s to 1 sekunda.
• ms – 1ms to 1 milisekunda. 1000ms to 1 sekunda.
• Jednostki częstotliwości
• Hz – 1Hz to 1 Hertz.
• kHz – 1kHz to 1 kilo Hertz. 1kHz to tysiąc Hertzów.
• Jednostki rozdzielczości
• dpi – 1dpi to 1 punkt na cal.
• dpcm – 1dpcm to 1 punkt na centymetr
• dppx - 1dppx to 1 punk na piksel
Przykład – długość i wysokość – 320.html
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <title>Jednostki </title>
<link rel="stylesheet" href="arkusz.css" type="text/css">
</head>
<body>
<h1>Przykłady użycia jednostek względnych dla rozmiaru czcionki:</h1>
<span id="j_em">| Tekst 1em |</span>
<span id="j_ex">| Tekst 1ex |</span>
<span id="j_ch">| Tekst 1ch |</span>
<span id="j_rem">| Tekst 1rem |</span><br>
<span id="j_vw">| Tekst 1vw |</span>
<span id="j_vh">| Tekst 1vh |</span>
<span id="j_vmin">| Tekst 1vmin |</span>
<span id="j_vmax">| Tekst 1vmax |</span>
<h1>Przykłady użycia jednostek bezwzględnych dla szerokości elementu:</h1>
<div id="j_cm">2,54cm</div>
<div id="j_mm">25,4mm</div>
<div id="j_Q">101.6Q</div>
<div id="j_in">1in</div>
<div id="j_pc">6pc</div>
<div id="j_pt">72pt</div>
<div id="j_px">96px</div> </body> </html>
Przykład – długość i wysokość – arkusz CSS
html { font-size: 40px; }
body { font-size: 30px; }
#j_em { font-size: 1em; } /* użycie różnych jednostek względnych */
#j_ex { font-size: 1ex; }
#j_ch { font-size: 1ch; }
#j_rem { font-size: 1rem;}
#j_vw { font-size: 5vw;}
#j_vh { font-size: 5vh;}
#j_vmin { font-size: 5vmin;}
#j_vmax { font-size: 5vmax;}
#j_cm { width: 2.54cm;} /*wszystkie szerokości poniżej to 2,54cm czyli 1 cal*/
#j_mm { width: 25.4mm;}
#j_Q { width: 101.6Q;}
#j_in { width: 1in;}
#j_pc { width: 6pc;}
#j_pt { width: 72pt;}
#j_px { width: 96px;}
/* ustawienie szerokości, wysokości i koloru elementów div */
div { height: 1cm; background-color: lightblue; border-style: solid; border-width: 1px;
border-color: black; font-size: 0.5rem; }
h1 {font-size: 0.5rem;}
Przykład – długość i wysokość – arkusz CSS - efekt
Obliczenia

• Poniższe funkcje matematyczne umożliwiają wykorzystanie wyrażeń

matematycznych: dodawanie (+), odejmowanie (-), mnożenie (*) oraz dzielenie (/)
• calc() – zwraca wynik wyrażenia matematycznego zawartego w nawiasach
• min() – zwraca najmniejszą z wartości obliczeń zawartych w nawiasach.
Poszczególne obliczenia oddziela się od siebie przecinkami.
• max() – zwraca największą z wartości obliczeń zawartych w nawiasach. Poszczególne
obliczenia oddziela się od siebie przecinkami.
• clamp() – przyjmuje jako argument trzy wyrażenia oddzielone przecinkami: pierwszy
argument to dopuszczalna wartość minimalna, drugi argument to wartość
preferowana, a trzeci argument to dopuszczalna wartość maksymalna. Jako wynik
zwracana jest wartość preferowana, chyba że nie mieści się we wskazanym zakresie.
Wówczas zwracana jest odpowiednio wartość minimalna (jeśli wartość preferowana
jest mniejsza od niej) lub wartość maksymalna (jeśli wartość preferowana jest
większa od niej).
Przykład – obliczenia
html { font-size: 20px; }
/* rozmiar czcionki w h1 ma być pomiędzy 16 a 20px.
Jeśli 0.9rem zmieści się w tym zakresie, to taka wysokość zostanie użyta.
W tym wypadku będzie to 18px (bo font-size dla elementu html to 20px) */
h1 { font-size: clamp(16px, 0.9rem, 20px); }
/* wybranie jako rozmiaru czcionki najmniejszej z 4 wartości */
h2 { font-size: min(14px, 1rem, 3vw, 3ex); }
div { <!DOCTYPE html>
background-color: lightblue; <html lang="pl">
height: 20px; <head>
/*wyświetlenie elementu na całą szerokość, <meta charset="utf-8">
z zostawieniem 50px wolnej przestrzeni*/ <title>Obliczenia - przykład</title>
width: calc(100% - 50px); <link rel="stylesheet" href="325_obliczenia.css"
} type="text/css">
</head>
<body>
<h1>Nagłówek h1</h1>
<h2>Nagłówek h2</h2>
<div>Element div</div>
</body>
</html>
CSS – URL
• Można korzystać ze zdalnych plików
• Adres do pliku jest zamykany w url(…)
• Dodatkowo URL może być zamknięty w cudzysłowie pojedynczym ‘ lub podwójnym ”
przydatne jeśli w adresie występują spacje
• Można stosować adresy względne odnoszące się do bazowego adresu URL strony www
Przykład użycia url()
<!DOCTYPE html>
<html lang="pl">
<head> <meta charset="utf-8"> <title>Uroki roztocza</title>
<link rel="stylesheet" href="arkusz.css" type="text/css">
</head>
<body>
<h1>Piękno roztocza to:</h1>
<ul>
<li>Fauna</li>
<li>Flora</li>
</ul>
</body>
</html>
body {
background-image:
url('https://upload.wikimedia.org/wikipedia/commons/5/55/Roztocze_Jacnia.JPG');
}
li {
list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5a/Emblem-important-
green.svg');
margin: 20px;
}
CSS – Kolory
• color - właściwość służąca do ustalania koloru tekstu
• background-color – właściwość służąca do ustalania koloru tła
• opacity – właściwość służąca do ustalania poziomu przezroczystości całego elementu, włącznie z jego zawartością. Jest
to liczba rzeczywista (ułamek) od 0 (pełna przezroczystość – element niewidoczny) do 1 (brak przezroczystości –
elementy pod spodem niewidoczne)
• color-adjust – propozycja właściwości, która pojawiła się w wersji roboczej rekomendacji CSS Color Level 4. Jest
wspierana przez niektóre przeglądarki i pozwala wskazać jak traktować kolory, które są drogie z punktu widzenia
urządzenia na którym są używane. Przykładem może być czarny kolor tła przy wydruku strony na drukarce, na którego
wydruk zużyto by dużo tonera. Wartość economy oznacza, że przeglądarka ma prawo zoptymalizować kolor tak, aby stał
się tańszy – np. użyć jaśniejszej wersji koloru. Wartość exact oznacza, że kolor ma być dokładnie odwzorowany.
• Kolory można wskazywać na kilka sposobów. Najczęściej kolory podaje się wskazując 3 podstawowe składowe RGB:
czerwoną (Red), zieloną (Green) i niebieską (Blue). Często składowe nazywane są kanałami.
• Dodatkowo do koloru można dodać informację o jego przezroczystości (która decyduje o tym, czy będą widoczne
elementy pod spodem danego elementu). Przezroczystość nazywana jest również kanałem alfa.
• Niektóre kolory są nazwane – można je wskazywać używając ich angielskich nazw: np. red, green itp.
• Lista nazwanych kolorów dostępna jest w specyfikacji W3C: https://www.w3.org/TR/css-color-4/#named-colors
• Istnieją 2 specjalne kolory nazwane:
transparent – kolor przezroczysty. Przeglądarka wyświetla kolor o wszystkich trzech składowych równych 0 i pełnej
przezroczystości (także wartość 0) – a więc kolor ten jest niewidoczny.
currentcolor – kolor bieżącego elementu. Zawiera wartość koloru i umożliwia użycie tej wartości do ustawienia innej
właściwości danego elementu, np. do ustawienia koloru tła.
Zapis szesnastkowy kolorów

• To najpopularniejszy sposób wskazywania kolorów, w którym podaje się prefiks #, a

następnie trzy składowe koloru w postaci liczb zapisanych w systemie szesnastkowym.
• Większość oprogramowania graficznego podaje wartości kolorów właśnie w tym
formacie.
• Najczęściej kolor wskazuje się jako 6 znaków po znaku #, ale możliwe jest również
podanie 3, 4 lub 8 znaków:
6 znaków: pierwsze 2 znaki wskazują kanał czerwony, kolejne 2 znaki wskazują kanał
zielony a ostatnie 2 znaki wskazują kanał niebieski. Liczba 00 oznacza brak składowej,
liczba FF oznacza maksymalną wartość składowej.
8 znaków: zachowanie identyczne jak w przypadku 6 znaków. Dodatkowe 2 znaki
opisują przezroczystość (kanał alfa). Wartość 00 oznacza pełną przezroczystość, FF –
brak przezroczystości
3 znaki: skrócony sposób zapisu niektórych kolorów dostępnych w zapisie 6-
znakowym. Na każdy kanał przeznaczony jest tylko 1 znak. Wartość 0 oznacza brak
składowej, Wartość F oznacza maksymalne nasycenie.
4 znaki: skrócony sposób zapisu niektórych kolorów dostępnych w zapisie 8-
znakowym. Wartość 0 oznacza brak składowej, Wartość F oznacza maksymalne
nasycenie.
Składnie służące do wskazywania kolorów 1/2
• rgb(czerwony,zielony,niebieski) – przyjmuje trzy argumenty oddzielone przecinkami
określające kanały składowe: czerwony, zielony i niebieski. Kanały można wskazywać w
następujący sposób:
procentowo (liczba od 0% do 100%), gdzie 0% to brak składowej a 100% to pełny udział
składowej
liczbowo (liczba od 0 do 255). Zakres do 255 bierze się stąd, że na pojedynczą składową
koloru w pamięci komputera przeznacza się 1 bajt. W 1 bajcie da się zapisać liczby od 0 do
255. 0 oznacza brak składowej, 255 – pełny udział składowej.
• rgba(czerwony,zielony,niebieski,alfa) – działanie identyczne jak rgb(), z tym że dodawany jest
jeszcze czwarty argument – kanał alfa, określający przezroczystość. Kanał alfa może przyjmować
wartość od 0 (pełna przezroczystość) do 1 (brak przezroczystości) lub procentowo od 0% (pełna
przezroczystość) do 100% (brak przezroczystości).
• hsl(kolor,nasycenie,jasność)- umożliwia wskazanie koloru w palecie HSL. Paleta HSL opiera się o
walec kolorów. Przyjmuje 3 argumenty oddzielone przecinkami:
pierwszy argument to odcień podawany w stopniach (jednostka deg) jako położenie w kole
kolorów. Poprawne wartości wynoszą od 0 do 360 deg.
 Drugi argument to nasycenie podawane w procentach: od 0% (brak nasycenia – czyli kolor
szary) do 100% (pełne nasycenie koloru).
Trzeci argument to jasność podawana w procentach od 0% (kolor czarny) przez 50% (kolor
normalny) do 100% (kolor biały).
Składnie służące do wskazywania kolorów 2/2

• hsla(kolor,nasycenie,jasność) – działanie identyczne jak hsl(), z tym że dodawany jest

jeszcze jeden argument – kanał alfa, określający przezroczystość. Kanał alfa może
przyjmować wartości identyczne jak w przypadku rgba().
• hwb(kolor, biel, czerń, alfa) – propozycja kolejnej palety barw, która pojawiła się w
wersji roboczej rekomendacji CSS Color Level 4 którą być może przeglądarki zaczną
wkrótce wspierać. W palecie HWB będzie można definiować barwy wskazując kolor,
poziom bieli i poziom czerni. Przyjmuje 3 lub 4 argumenty oddzielone przecinkami:
pierwszy argument to odcień podawany w stopniach (jednostka deg) jako położenie
w kole kolorów. Poprawne wartości wynoszą od 0 do 360 deg
drugi argument to ilość bieli, jaką przeglądarka ma dodać podawana w procentach
od 0% (brak bieli) do 100% (biel)
trzeci argument to ilość czerni, jaką przeglądarka ma dodać podawana w procentach
od 0% (brak czerni) do 100% (czerń)
• czwarty argument jest opcjonalny i oznacza kanał alfa (przezroczystość). Podawany
identycznie jak kanał alfa w metodzie rgba().
Przykłady kolorów HSL według Wikipedii
Użycie kolorów – przykład – 335.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"> <title>Kolory</title>
<link rel="stylesheet" href="arkusz.css" type="text/css">
</head>
<body>
<h1>Ten sam kolor tekstu, uzyskany na 5 sposobów:</h1>
<p id="k_1">Ten kolor to { color: lime; } - kolor nazwany</p>
<p id="k_2">Ten kolor to { color: #00FF00; } - zapis składowych ...</p>
<p id="k_3">Ten kolor to { color: #0F0; } - skrócony zapis ...</p>
<p id="k_4">Ten kolor to { color: rgb(0,255,0); } - zapis ...</p>
<p id="k_5">Ten kolor to { color: rgb(0%,100%,0%); } - zapis ...</p>
<h1>Przykład użycia wartości currentcolor do ustawienia tła:</h1>
<div id="tlo"></div>
<h1>Przykład użycia zapisu hsl:</h1>
<p id="k_hsl1">Ten kolor to {color: hsl(120deg, 100%, 50%); }</p>
<p id="k_hsl2">Ten kolor to { color: hsl(120deg, 100%, 25%); }</p>
</body>
</html>
Użycie kolorów – przykład – arkusz.css
/* kolor tł dokumentu */
body { background-color: #6C886C;}
/* Jeden z odcieni zielonego, zapisany na 5 sposobów */
#k_1 { color: lime; }
#k_2 { color: #00FF00; }
#k_3 { color: #0F0; }
#k_4 { color: rgb(0,255,0); }
#k_5 { color: rgb(0%,100%,0%); }
/* wykorzystanie jako koloru tła, koloru
użytego jako kolor tekstu */
#tlo {
color: lime;
background-color: currentcolor;
width: 300px;
height: 30px;
}
/* 2 odcienie zielonego uzyskane przy użyciu
zapisu hsl */
#k_hsl1 { color: hsl(120deg, 100%, 50%); }
#k_hsl2 { color: hsl(120deg, 100%, 25%); }
Przezroczystość – przykład – 340.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Przezroczystość</title>
<link rel="stylesheet" href="340_opacity_alfa.css" type="text/css">
</head>
<body>
<h1>Przykład przezroczystości kolorów i elementów</h1>
<p>Cztery elementy div w kolorze czerwonym, zielonym ...</p>
<div id="tlo_1"></div>
<div id="tlo_2"></div>
<div id="tlo_3"></div>
<div id="tlo_4"></div>
</body></html>
Przezroczystość – przykład – arkusz CSS
div {
position: absolute; /* element będzie w dokładnie wskazanym miejscu */
width: 400px; /* szerokość */ height: 400px; /* wysokość */
border: 1px dashed black; /* krawędź */
}
#tlo_1 {
color: red;
background-color: currentcolor; /* kolor tła, taki jak tekstu */
z-index: 1; /* odległość od widza */
top: 200px; /* odległość od góry */ left: 50px; /*odległość od lewej strony */
}
#tlo_2 {
background-color: rgba(0%,100%,0%,0.75); /* 0.75 to kanał alfa */
top: 250px; left: 100px; z-index: 2; }
#tlo_3 {
background-color: blue;
opacity: 0.8; /*przezroczystość elementu i jego treści */
top: 300px; left: 150px; z-index: 3; }
#tlo_4 {
background-color: transparent; /* kolor przezroczysty - niewidoczny */
top: 350px; left: 200px; z-index: 4; }
Metody dołączania stylów

• Zagnieżdżanie jako atrybutu style wewnątrz tagu (X)HTML

• Zagnieżdżanie w tagu <style> … </style>
• Dołączanie jako zewnętrznego pliku/plików
Można dołączyć wiele plików do jednego dokumentu
Kolejność dołączania arkuszy ma znaczenie – późniejszy arkusz może nadpisać
reguły z poprzednich
Można dołączać wersje alternatywne
• Importowanie dodatkowego zewnętrznego stylu wewnątrz jednej z powyższych opcji
• Wszystkich powyższych opcji można używać jednocześnie
Styl jako atrybut

<html>
<head>
…
…
</head>
<body>
<p style='color: red; font-weight: bold;'> To jest akapit.
Jego wygląd (kolor, krój czcionki) jest ustalany przez
kaskadowe arkusze stylów</p>
…
</body>
</html>
Wewnętrzny arkusz stylów
<html>
<head>
…
<style>
p{
color: red;
font-weight: bold;
}
…
</style>
…
</head>
<body>
<p> To jest akapit. Jego wygląd (kolor, krój czcionki) jest ustalany przez kaskadowe arkusze stylów</p>
…
</body>
</html>
Zewnętrzny arkusz stylów
strona.html
<html>
<head>
…
<link rel="stylesheet" href="arkusz.css" type="text/css" media="all”/>
…
</head>
<body>
<p> To jest akapit. Jego wygląd (kolor, krój czcionki) jest ustalany przez kaskadowe arkusze stylów</p>
…
</body>
</html>

arkusz.css
p{
color: red;
font-weight: bold;
}
Import arkusza stylów
• @import musi występować przed innymi regułami
• Możliwe jest importowanie pliku css przez inny plik css, ale najlepiej tego unikać miejąc na względzie
optymalizację prędkości ładowania się strony. Plik css nie rozpocznie być importowany, dopóki nie
zostanie ściągnięty plik css dokonujący importu. Przy klasycznym dołączaniu plików przy
wykorzystaniu elementu <link>, bądź importowaniu pliku wewnątrz elementu <style>, przeglądarka
może ściągać wszystkie pliki CSS równolegle, dzięki czemu strona ma szansę załadować się nieco
szybciej. Przy importowaniu pliku css przez inny plik css, wczytywanie plików przez przeglądarkę
odbywa się po kolei
Import arkusza stylów - przykład
<html>
<head>
…
<style>
@import "arkusz.css";/*@import
musi być przed innymi regułami CSS!*/
… arkusz.css
</style> @import url(”http://www.inny-serwer.pl/drugi-arkusz.css”);
@import url(”trzeci-arkusz.css”) print;
…
/*@import musi być przed innymi regułami CSS!*/
</head> p {
color: red;
<body>
font-weight: bold; trzeci-arkusz.css
<p> treść strony </p> } h2 {
</body> color: black;
font-weight: bold;
</html> }
…
Zalety zewnętrznego arkusza
• Ten sam arkusz można dołączyć do wielu (pod)stron
• Do zmiany wyglądu wystarczy modyfikacja arkusza (zamiast modyfikowania n plików HTML)

arkusz.css
p {
color: red;
font-weight: bold;
}
…
Dołączanie stylów - podsumowanie

• Dołączanie zewnętrznego arkusza stylów za pomocą elementu HTML <link>

Najlepsza i najpopularniejsza z dostępnych metod
Umożliwia wykorzystanie tego samego arkusza w wielu plikach HTML pozwalając
na utrzymanie spójności wyglądu
• Dołączenie zewnętrznego arkusza stylów za pomocą reguły CSS @import
Teoretycznie daje ten sam efekt i benefity jak wykorzystanie elementu HTML
<link>, jednak w praktyce przeglądarki nieco wolniej ładują pliki dołączone tą
metodą w związku z czym jest rzadko stosowana.
Jeśli reguła @import jest używana, to musi być na samym początku arkusza
stylów!
• Dołączenie wewnętrznego arkusza stylów za pomocą elementu HTML <style>
Metoda mało praktyczna, gdyż taki arkusz wewnętrzny trzeba by powielać we
wszystkich dokumentach HTML tworzących witrynę.
• Zdefiniowanie stylów dla danego elementu za pomocą atrybutu HTML style.
• Metoda mało praktyczna, gdyż style trzeba by definiować dla każdego elementu z
osobna.
Arkusze alternatywne
• Użytkownik sam musi wybrać alternatywny arkusz w przeglądarce
• Bardziej ciekawostka niż praktyczne zastosowanie
<html><head>
…
<link rel="stylesheet" href="arkusz.css" type="text/css" media="all” title="Styl
standardowy” />
<link rel="alternate stylesheet" href="zielony.css" type="text/css" media="all”
title="Na zielono” />
<link rel="alternate stylesheet" href="nieb.css" type="text/css" media="all”
title="Na niebiesko” />
…
</head>
<body>
<p> To jest akapit. Jego wygląd (kolor, krój czcionki)
jest ustalany przez kaskadowe arkusze stylów</p>
…
</body>
</html>
420 – Dołączanie stylów

1. Utwórz 4 nowe poprawne pliki HTML zawierające akapit tekstu <p>.

2. 420a.html: za pomocą atrybutu style ustaw kolor tekstu w akapicie na
czerwony (color: red;)
3. 420b.html: za pomocą elementu <style> w sekcji <head> umieść regułę
która ustawi kolor tekstu w akapicie na zielony p { color: green; }
4. 420c.html: za pomocą elementu <link rel="stylesheet" href="…">
dołącz zewnętrzny arkusz stylów (np. 420c.css). W nowym pliku CSS ustaw
kolor akapitów na niebieski (color: blue;)
5. 420d.html: umieść element <style> w sekcji <head>. Wewnątrz <style>
zdefiniuj importowanie zewnętrznego arkusza o nazwie 420c.css (z
poprzedniego ćwiczenia). @import url("…"). Jeśli będziesz próbować dodać
więcej reguł, to pamiętaj że @import musi poprzedzać wszelkie inne reguły.
6. Sprawdź utworzone strony w 2 przeglądarkach
7. Sprawdź poprawność kodu w 420c.css pod adresem
http://jigsaw.w3.org/css-validator
CSS - kodowanie znaków
• Jeśli CSS jest zagnieżdżony w (X)HTML, przejmuje jego kodowanie
• Jeśli CSS jest dołączony z osobnego pliku można ustalić kodowanie znaków w CSS
Podczas dołączania <link charset=”kodowanie">
W dołączanym pliku @charset „kodowanie";
MUSI to być pierwsza dyrektywa w pliku!
Domyślnie zostanie przyjęte UTF-8
• Może mieć znaczenie jeśli używamy w nazwach znaków innych niż standardowych angielskich

@charset "UTF-8"; /* jawne wskazanie kodowania znaków jako UTF-8. Zwykle

wskazywanie kodowania nie jest konieczne, ale jeśli trzeba wskazać
kodowanie znaków, to deklaracja musi znaleźć się w pierwszej linijce kodu
CSS, i to od samego początku linijki */
h1 {
color: red;
}
[title="gżegżółka"] { /*przykład użycia polskich znaków przy sprawdzaniu
zawartości atrybutu title */
color: blue;
}
Skrócony zapis właściwości CSS
Niektóre właściwości można zapisywać w skróconej postaci. Poniżej przykład dla czcionki:
<!DOCTYPE html> <html lang="pl"> <head> meta charset="utf-8">
<title>Skrócony zapis właściwosci</title> <link rel="stylesheet" href="345_font.css">
</head> <body>
<p id="a1">Przykład tekstu opisanego szczegółowymi właściwościami CSS dotyczącymi
czcionki.</p> <hr>
<p id="a2">Przykład tekstu opisanego skróconym zapisem CSS "font" o dokładnie takim samym
wyglądzie jak w pierwszym akapicie.</p>
</body> </html>

#a1 {
font-weight: bold; /*czcionka pogrubiona*/
font-size: 1rem; /*rozmiar czcionki taki jak dla elementu HTML*/
line-height: 2rem; /*wysokość linii, w której będzie tekst */
font-family: Arial, Helvetica, sans-serif; /*rodziny czcionek, jakich
należy użyć od najbardziej preferowanej do najmniej preferowanej*/
}
#a2 { /* zapis skrócony - użycie właściwości font */
font: bold 1rem/2rem Arial, Helvetica, sans-serif;
}
Rozszerzenia przeglądarek 1/2
• Producenci przeglądarek wprowadzają własne rozszerzenia CSS, które działają tylko w tej danej
przeglądarce lub silniku o który oparto przeglądarkę.
• Rozszerzenia przeglądarek rozpoczynają się od prefiksu, zwykle w postaci myślnika.
• Na przykład rozszerzenia przeglądarki firefox rozpoczynają się od prefiksu –moz-, rozszerzenia
przeglądarek opartych o silnik webkit (np. Chrome) rozpoczynają się od prefiku -webkit- a
rozszerzenia przeglądarek firmy Microsoft rozpoczynają się od prefiksu –ms-
• Przykłady rozszerzenia:
–moz-force-broken-image-icon – rozszerzenie przeglądarki Firefox które umożliwia wymuszenie
wyświetlenie ikony niedziałającej grafiki zamiast opisu tej grafiki zawartej w atrybucie alt.
• Rozszerzenia przeglądarki działają tylko w tej przeglądarce której dotyczą, więc co do zasady lepiej ich
nie używać, chyba że tworzymy aplikację wyłącznie dla jednej konkretnej przeglądarki.
• Producenci przeglądarek podczas prac nad dodaniem wsparcia dla nowych właściwości CSS, które
mają stać się oficjalną rekomendacją dopiero w przyszłości, najczęściej początkowo dodają ich
obsługę z prefiksem. Przykładem może być właściwość animation (tworzenie animacji CSS) która
początkowo w starszych wersjach Firefox dostępna była pod nazwą -moz-animation a obecnie jest
dostępna pod oficjalną nazwą animation.
• Przy wykorzystywaniu nowości użycie prefiksów może być niezbędne. To czy dana właściwość wymaga
prefiksu w danej przeglądarce lub jej wersji można sprawdzić na witrynie producenta przeglądarki lub
na witrynie http://caniuse.com.
Rozszerzenia przeglądarek 1/2

• Przy wykorzystywaniu właściwości, które stały się popularne stosunkowo niedawno,

wykorzystanie prefiksów jednocześnie z oficjalnymi nazwami właściwości może być
korzystne – dzięki temu elementy będą wyświetlać się poprawnie także w nieco
starszych wersjach przeglądarek, które nie wspierały jeszcze oficjalnych nazw
właściwości, ale wspierały je już z prefiksami.
• Język CSS rozwija się bardzo dynamicznie, więc przy korzystaniu z nowości
stosowanie prefiksów jest niejednokrotnie konieczne. Z tego powodu powstało
szereg narzędzi, które umożliwiają automatyczne dodawanie prefiksów, jeśli uznają
że kod CSS tego wymaga – na przykład na podstawie informacji z caniuse.com.
Można je podzielić na 2 główne grupy:
narzędzia online dodające prefiksy do kodu CSS na zasadzie kopiuj/wklej np.
http://www.cssdrive.com/cssautoprefixer/
• dodatki do narzędzi automatyzujących pracę deweloperów takich jak np. gulp, czy
webpack. Po skonfigurowaniu narzędzia te po uruchomieniu przez dewelopera
automatycznie uruchamiają dodatek który przetwarza pliki CSS i dodaje
samodzielnie niezbędne prefiksy Przykładem popularnego dodatku jest autoprefixer:
https://www.npmjs.com/package/autoprefixer
Rozszerzenia przeglądarek - przykład
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Prefiksy</title>
<link rel="stylesheet" href="arkusz.css">
</head>
<body>
<p>
Reggae – styl we współczesnej muzyce rozrywkowej …
</p>
</body>
</html>

p {
/*tworzenie gradientu. -webkit-linear-gradient zadziała dla przestarzałych
przeglądarek opartych o starą wersję silniku webkit: Chrome poniżej
wersji 26, Safari poniżej wersji 7, Android Browser poniżej wersji 4.4.
Nowsze przeglądarki wykorzystają linear-gradient. */
background: -webkit-linear-gradient(top, lime, yellow, red);
background: linear-gradient(to bottom, lime, yellow, red); }
DOM – Document Object Model

Dokumenty (X)HTML to drzewa zawierające przodków, potomków, rodziców, dzieci i rodzeństwo

Dziedziczenie

Jeśli arkusze stylów nie definiują wprost któregoś z parametrów wyglądu to jest on
dziedziczony od przodków (elementów nadrzędnych)
<html>
<head>
<link rel="stylesheet" href="arkusz.css" type="text/css" media="all”/>
</head>
<body>
<h1>To jest <span>nagłówek</span></h1>
</body>
</html>

body { font-size: 10px;}

h1 { font-size: 130%;}

Jaki będzie rozmiar czcionki słowa „nagłówek” ?

Grupowanie selektorów
Selektory z tą samą definicją można grupować za pomocą przecinka. Oba pliki dadzą ten sam efekt.

arkusz.css arkusz.css
h1 { h1 , p , li {
color: red; color: red;
font-size: 12pt; font-size: 12pt;
background-color: white; background-color: white;
} }
p {
color: red;
font-size: 12pt;
background-color: white;
}
li {
color: red;
font-size: 12pt;
background-color: white;
}
Selektor uniwersalny
• Znak *
• Jeśli to nie jedyny element prostego selektora, to można go pominąć (i w większości przypadków się
go pomija). Oba pliki poniżej będą działać tak samo.

arkusz.css
*[lang=pl] { color: red }
*.klasa { color: red }
*#identyfikator { color: red }

arkusz.css
[lang=pl] { color: red }
.klasa { color: red }
#identyfikator { color: red }
Selektor typu
• Selektor ma takie brzmienie jak element (X)HTML którego dotyczy
• Reguła będzie dotyczyć wszystkich elementów tego typu w całym dokumencie

<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<h1>Nagłówek</h1>
<p>To jest akapit</p>
<p>To jest drugi akapit</p>
</body>
h1 {
</html>
font-size: 18pt;
color: red;
}
p {
color: black;
font-size: 14px;
}
Selektory potomków
• Jeśli w selektorze elementy oddzielone są spacją, to reguła zadziała jeśli w dokumencie (X)HTML
późniejszy element jest potomkiem poprzedniego

<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<h1>To jest <em> nagłówek </em> </h1>
</body>
</html>

h1 { color: red }
em { color: red };
h1 em { color: blue }
Selektory potomków – ciąg dalszy
• W selektorze można określić pokolenia potomków do których reguła ma być stosowana
<html>
<head><title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<div>
<p>To jest pierwszy akapit</p>
<div>
<p>To jest drugi i akapit</p>
</div>
<p>To jest trzeci akapit</p>
</div>
</body>
</html>

p { color: black }
div { color: blue }
div * p { color: red }
Selektory dzieci
• Przy uściślaniu że reguła ma być tylko dla dzieci, między rodzicem a dzieckiem jest znak >
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<p>To jest pierwszy akapit</p>
<div>
<p>To jest drugi i akapit</p>
<p>To jest trzeci akapit</p>
</div>
</body>
</html

body p {color: black }

body > p { color: red }
Selektory rodzeństwa
• Symbol plus +: element przed plusem to rodzeństwo (musi być poprzedzającym elementem w
drzewie), element po plusie to nazwa dla której reguła będzie użyta.
• Symbol tylda ~: element przed plusem to rodzeństwo (nie musi być poprzedzającym elementem w
drzewie), element po plusie to nazwa dla której reguła będzie użyta.
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<h1>To jest pierwszy nagłówek</h1>
<p> To jest akapit </p>
<h2>To jest drugi nagłówek</h2>
<h1>To jest trzeci nagłówek</h1>
<h2> To jest czwarty nagłówek</h2>
</body>
</html>

h1 , h2 {color: black }
h1 + h2 { color: red }
442 – Selektory: efekt
442 – Selektory
1. Ściągnij z Moodle archiwum pliki-startowe.zip i rozpakuj. W środku znajduje się plik style.html
oraz folder grafika. Wkopiuj je do katalogu w którym pracujesz.
2. Przeanalizuj plik style.html i zapisz pod nazwą 442.html
3. Stwórz nowy plik 442.css i dołącz go do pliku html poprawiając <link href="stylesheet"
href="…">. W pliku css ustaw wygląd jak poniżej:
4. Utwórz regułę dla elementu html i ustaw rozmiar czcionki na 20px (font-size)
5. Nagłówki h1 i h2 mają być wyświetlane w kolorze darkmagenta.
6. Kolor tła (background-color) dla h1, h2, p, ul, table ma być w kolorze lightgray. Wykorzystaj
przecinek do oddzielenia selektorów.
7. Akapity <p> zawarte wewnątrz <footer> mają mieć kolor tła kolorze gray. Wykorzystaj selektor
potomstwa: w kodzie CSS pomiędzy footer i p pozostaw spację.
8. Podobnie element form ma mieć kolor tła w kolorze gray.
9. Fragmenty tekstu „Mieszko I” w akapitach <p>, zawarte wewnątrz <strong> mają być
wyświetlone w kolorze darkmagenta, a fragment tekstu „to historyczny pierwszy władca…”
zawarty wewnątrz <strong>, ma być wyświetlony przy użyciu czcionki o rozmiarze 1.5rem
(font-size). Wykorzystaj fakt, że elementy <strong> które mają być kolorowane są dziećmi <p>
(selektor >), a element <strong> z tekstem do powiększenia jest wnukiem <p> (selektor
potomstwa: spacja, selektor uniwersalny: *)
10.Podejrzyj stronę w 2 przeglądarkach i sprawdź poprawność kodu CSS pod adresem
http://jigsaw.w3.org/css-validator
Selektory atrybutów

• Reguły dla elementów, które mają ustawiony zadany atrybut

• [atrybut]- atrybut ustawiony na dowolną wartość
• [atr=”wart”] - atrybut atr ustawiony na wartość wart
• [atr~=”wart”] -atrybut atr którego wartość to lista oddzielona spacjami a jeden
z elementów tej listy ma wartość wart
• [atr|=”wart”] - atrybut atr który ma wartość wart lub jego wartość rozpoczyna
się od wart, a bezpośrednio po wart występuje myślnik
• [atr*="wart"] – atrybut który ma wartość wart w dowolym miejscu
• [atr^="wart"] – atrybut którego zawartość rozpoczyna się od wartości wart
• [atr$="wart"] – atrybut którego zawartość kończy się na wartości wart
Selektory atrybutów – przykład 1

<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<h1>To jest pierwszy nagłówek</h1>
<h1 title="tytul">To jest drugi nagłówek</h1>
<h1 title="tytul2">To jest trzeci nagłówek</h1>
</body>
</html>

h1 {color: black }
h1[title] { color: red }
Selektory atrybutów – przykład 2

<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<h1>To jest pierwszy nagłówek</h1>
<h1 dir=”ltr” title="tytul”>To jest drugi nagłówek</h1>
<h1 title="tytul">To jest trzeci nagłówek</h1>
</body>
</html>

h1 {color: black }
h1[title="tytul"][dir="ltr"] { color: red }
Selektory atrybutów – przykład 3

<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<img src=”obrazek.png” alt=”to jest opis obrazka” />
<br />
<img src=”obrazek.png” alt=”to jest
opis grafiki” />
</body>
</html>

img {
border-color: black;
border-width: 3px;
border-style: solid; }
img[alt~="obrazka"] {
border-color: red;
border-width: 3px;
border-style: solid; }
Selektory atrybutów – przykład 4
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<p lang=”en-US” xml:lang=”en-us” >USA</p>
<p lang=”en-UK” xml:lang=”en-uk” >UK</p>
<p lang=”pl-PL” xml:lang=”pl” >Polska</p>
</body>
</html>

p { color: black; }
p[lang|="en"] { color: red; }
Selektory atrybutów – przykład 5

<!DOCTYPE html><html lang="pl">

<head><meta charset="utf-8" /><title>Wpis na blogu</title>
<link rel="stylesheet" href="615.css" type="text/css" />
</head>
<body>
<p title="gruszki są OK">Gruszki są OK</p>
<p title="Najlepsze są gruszki">Gruszki są OK</p>
<p title="i gruszki, i jabłka">Gruszki są OK</p>
</body></html>

p[title*="gruszki"] { color: blue;}

p[title^="gruszki"] { color: red;}
p[title$="gruszki"] { color: green;}
Selektory klas
• To najpopularniejszy i najwygodniejszy selektor
• Skrócony zapis selektora dla atrybutu class:
element.klasa
• do klas można się też odwoływać za pomocą selektora atrybutu (kosztem mniejszej specyficzności
reguły): *.zielony { color: green }
element[class~=value] .niebieski { color: blue }
<html> p.czerwony { color: red }
<head> .duzy {font-size: 300%}
<title>Tytuł strony</title> p.kursywa.niebieski { color: yellow }
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<h1 class="zielony">To jest pierwszy nagłówek</h1>
<p class="niebieski"> To jest pierwszy akapit </p>
<h2 class="czerwony">To jest drugi nagłówek</h2>
<p class="czerwony"> To jest drugi akapit </p>
<p class="zielony duzy"> To jest trzeci akapit </p>
<p class="niebieski kursywa duzy"> To jest czwarty akapit </p>
<p class="zielony kursywa"> To jest piąty akapit </p>
</body>
</html>
Selektory identyfikatorów
• Identyfikatory są unikatowe w dokumencie (nie powtarzają się)
Dzięki temu ten selektor jest bardzo precyzyjny
• Zapis #identyfikator
• Można się też odwoływać za pomocą selektora atrybutu (kosztem mniejszej specyficzności reguły):
• [id=identyfikator]
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all">
</head>
<body>
<h1 id="akapit1">To jest pierwszy nagłówek</h1>
<h2 id="akapit2">To jest drugi nagłówek</h2>
<p id="akapit3"> To jest pierwszy akapit </p>
<p id="akapit4"> To jest drugi akapit </p>
</body>
</html> *[id="akapit1"] { color: red }
#akapit2 { color: blue }
p#akapit3 { color: red }
h2#akapit4 { color: yellow }
*#akapit1 { color: green }
452 – Selektory atrybutów: efekt
452 – Selektory atrybutów i identyfikatorów

1. Zapisz style.html pod nazwą 452.html.

2. Stwórz nowy plik 452.css i dołącz go do html modyfikując element <link>.
3. W pliku css ustaw poniższy wygląd:
4. Utwórz regułę dla elementu html i ustaw rozmiar czcionki na 20px (font-size)
5. Tekst zawarty we wszystkich elementach <i> z ustawionym atrybutem lang na
jakąkolwiek wartość ma być wyświetlany w kolorze darkgoldenrod (użyj selektora
i[lang])
6. Jeżeli element article ma atrybut id o wartości dokładnie „mieszko” to artykuł ten
ma mieć kolor tła bisque (background-color). Użyj zwykłego selektora atrybutu
article[id="szukanyTekst"]
7. Dla elementu o identyfikatorze „boleslaw” ustaw kolor tła orange. Użyj selektora #
8. Jeżeli atrybut alt elementu img zawiera tekst „Matejko” to element img ma mieć
krawędź o grubości 1rem: użyj zapisu border: 1rem solid mediumvioletred;
1. Selektor służący do wyszukiwania tekstu w atrybutach to *="szukanyTekst"
9. Podejrzyj stronę w 2 przeglądarkach
10.Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Pseudo-elementy i pseudo-klasy

• Pseudo klasy i pseudo elementy w przeciwieństwie do „prawdziwych” nie pojawiają się

wprost w formatowanym dokumencie
• Pseudo elementy
nie należą do specyfikacji języka (XHTML) i nie stanowią gałęzi w drzewie dokumentu.
mogą być doklejone do ostatniego prostego elementu w selektorze
Przed nazwą mają dwa dwukropki ::
• Pseudo klasy
pozwalają na klasyfikację elementów za pośrednictwem niestandardowych metod i są
dynamiczne - mogą zmieniać swą wartość w zależności od zachowania użytkownika
mogą pojawić się w dowolnym miejscu selektora
przed nazwą mają jeden dwukropek :
::first-line i ::first-letter
• ::first-line – pierwsza linia w bloku (akapicie)
• ::first-letter – pierwsza litera w bloku
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head><body>
<div>
<p>To jest pierwszy akapit. To jest pierwszy akapit. To jest pierwszy
akapit. To jest pierwszy akapit. To jest pierwszy akapit. To jest pierwszy
akapit. </p>
<p>To jest drugi akapit. To jest drugi akapit. To jest drugi akapit.
To jest drugi akapit. To jest drugi akapit. To jest drugi akapit.
</p>
</div>
</body>
</html>

div { width: 300px; }

p::first-line { color: blue }
p::first-letter { font-size: 2em }
::before i ::after
::before – generowanie zawartości przed elementem
::after – generowanie zawartości po elemencie
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<h1>To jest pierwszy tytuł</h1>
<h1>To jest drugi tytuł</h1>
<h1>To jest trzeci tytuł</h1>
<h1>To jest czwarty tytuł</h1>
</body>
</html>

h1::before {
content: "Tytuł: ";
font-size: 0.5em }
h1::after {
content: " koniec tytułu";
font-size: 0.5em }
Selektory linków
:first-child – pierwsze dziecko elementu
:lang – język elementu
:link – nieodwiedzony link
:visited – odwiedzony link (przeciwieństwo :link)
<html><head><title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" /></head>
<body>
<div>
<p>To jest <em>pierwszy</em> akapit</p>
<a href="testA.html">Odwiedzony link</a><br />
<a href="testB.html">Nieodwiedzony link</a>
</div><div>
arkusz.css
<h1 lang="pl">To jest pierwszy nagłówek</h1>
<p>To jest <em>drugi</em> akapit</p>
p:first-child em { color: blue }
</div> h1:lang(pl) {
</body> color: yellow }
</html> a:link {
color: red }
:visited {
color: green }
Selektory linków – ciąg dalszy
:hover – kursor znajduje się nad elementem
:active – element aktywowany (np. w trakcie kliknięcia)
:focus – element w trakcie przyjmowania danych
a:hover musi być zdefiniowany po :link i :visited – (zostanie nadpisany bo te stany się nie wykluczają)
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all" />
</head>
<body>
<a href="testB.html">Link 1</a><br />
<input type="text" />
</body>
</html>

:hover { color: yellow }

:focus { color: red }
:link:active { color: green }
472 – Pseudo-klasy i selektory hiperłącz: efekt
472 – Pseudo-klasy i selektory hiperłącz

1. Zapisz style.html pod nazwą 472.html. Stwórz nowy plik 472.css i dołącz go do
html modyfikując element <link>. W pliku css ustaw poniższy wygląd:
2. Tekst w pierwszym akapicie w każdym z artykułów article ma być wyświetlony w
kolorze darkslategray (właściwość color). Użyj selektora :first-of-type
3. Teksty w elementach i w języku łacińskim (la) mają być wyświetlone w kolorze
darkgoldenrod. Użyj selektora :lang( język)
4. Linki <a> które nie były jeszcze odwiedzone, mają być wyświetlone na zielono. Użyj
selektora :link i szesnastkowego zapisu koloru #00FF00
5. Linki <a> odwiedzone mają być wyświetlone na szaro (gray) (selektor :visited)
6. Linki <a> nad którymi znajdzie się kursor mają być wyświetlane w kolorze
niebieskim. Użyj selektora :hover i procentowego zapisu koloru rgb(0%,0%,100%)
7. Linki <a> w momencie kliknięcia mają być wyświetlane na czerwono. Użyj
selektora :active i zapisu liczbowego koloru rgb(255,0,0)
8. Kolor tekstu w polu input w momencie wprowadzania danych ma być niebieski.
Użyj selektora :focus i skróconego zapisu szesnastkowego koloru #00F
9. Podejrzyj stronę w 2 przeglądarkach i sprawdź poprawność kodu CSS pod adresem
http://jigsaw.w3.org/css-validator
Selektor :nth-child(An+B) 1/3
• Selektor zlicza numer dziecka. Poniższy przykład ustawia właściwości parzystych i nieparzystych
wierszy tabeli (które są parzystym i nieparzystym dzieckiem rodzica).
<!DOCTYPE html><html lang="pl">
<head><meta charset="utf-8" /><title>Wpis na blogu</title>
<link rel="stylesheet" href="620.css" type="text/css" />
</head>
<body>
<table>
<tr><td>Gruszka</td></tr>
<tr><td>Jabłko</td></tr>
<tr><td>Śliwka</td></tr>
<tr><td>Czereśnia</td></tr>
<tr><td>Wiśnia</td></tr>
<tr><td>Brzoskwinia</td></tr>
<tr><td>Morela</td></tr>
</table>
</body>
</html>

tr:nth-child(odd) { background-color: yellow;}

tr:nth-child(even) { background-color: blue;}
Selektor :nth-child(An+B) 2/3
• Ustawianie właściwości co trzeciego wiersza tabeli (które są co trzecim dzieckiem rodzica).
<!DOCTYPE html><html lang="pl">
<head><meta charset="utf-8" /><title>Wpis na blogu</title>
<link rel="stylesheet" href="620.css" type="text/css" />
</head>
<body>
<table>
<tr><td>Gruszka</td></tr>
<tr><td>Jabłko</td></tr>
<tr><td>Śliwka</td></tr>
<tr><td>Czereśnia</td></tr>
<tr><td>Wiśnia</td></tr>
<tr><td>Brzoskwinia</td></tr>
<tr><td>Morela</td></tr>
</table>
</body>
</html>

tr:nth-child(3n) { background-color: yellow;}

tr:nth-child(3n+1) { background-color: blue;}
tr:nth-child(3n+2) { background-color: green;}
Selektor :nth-child(An+B) 3/3
• Ustawianie czwartego i szóstego wiersza tabeli (czwartego i szóstego dziecka rodzica).
• Ustawianie co trzeciego wiersza tabeli (co trzeciego dziecka) rozpoczynając z przesunięciem o jeden.
<!DOCTYPE html><html lang="pl">
<head><meta charset="utf-8" /><title>Wpis na blogu</title>
<link rel="stylesheet" href="620.css" type="text/css" />
</head>
<body>
<table>
<tr><td>Gruszka</td></tr>
<tr><td>Jabłko</td></tr>
<tr><td>Śliwka</td></tr>
<tr><td>Czereśnia</td></tr>
<tr><td>Wiśnia</td></tr>
<tr><td>Brzoskwinia</td></tr>
<tr><td>Morela</td></tr>
</table>
</body>
</html>

tr:nth-child(3n-1) { background-color: yellow;} /*2,5,8,11,14,17 itd.*/

tr:nth-child(4) { background-color: blue;}
tr:nth-child(6) { background-color: green;}
Selektor :nth-last-child(An+B)
• Ustawianie właściwości dla ostatnich 3 wierszy tabeli (ostatniej trójki dzieci rodzina)
• Ustawianie właściwości dla piątego wiersza (piątego dziecka rodzica) licząc od końca
<!DOCTYPE html><html lang="pl">
<head><meta charset="utf-8" /><title>Wpis na blogu</title>
<link rel="stylesheet" href="620.css" type="text/css" />
</head>
<body>
<table>
<tr><td>Gruszka</td></tr>
<tr><td>Jabłko</td></tr>
<tr><td>Śliwka</td></tr>
<tr><td>Czereśnia</td></tr>
<tr><td>Wiśnia</td></tr>
<tr><td>Brzoskwinia</td></tr>
<tr><td>Morela</td></tr>
</table>
</body>
</html>

tr:nth-last-child(-n+3) { background-color: yellow;} /*ostatnie 3 wiersze*/

tr:nth-last-child(5) { background-color: green;} /*5ty wiersz od końca*/
Pseudo klasy nty element typu :nth-of-type(An+B) i :nth-last-of-type(An+B)

• Pseudo klasy :nth-of-type i nth-last-of-type mają podobne działanie do pseudo klas :nth-
child i nth-last-child – podobnie jako one przeszukują rodzeństwo. Różnica polega na tym,
że selektory nth-of-type i nth-last-of są bardziej specyficzne: zliczają tylko elementy danego
typu, podczas gdy selektory rodzeństwa zliczają wszystkie elementy rodzeństwa.
• nth-of-type i nth-last-of-type jest bezpieczniejsze w użyciu, jeśli w kodzie HTML rodzeństwa
występują różne rodzaje elementów i nie możemy wykluczyć późniejszych modyfikacji kodu
HTML.
• Pseudo klasa :nth-of-type zlicza elementy od początku kodu, pseudo klasa nth-last-of-type
zlicza elementy od końca kodu.
• Argumenty przyjmowane przez obie pseudo klasy, są identyczne jak w przypadku :nth-child i
:nth-last-child:
wzór w formacie An+B, gdzie
A to liczba całkowita mnożona przez n,
n to liczba pod którą przeglądarka podstawia wyliczony numer elementu
B to liczba dodawana do wyniku mnożenia
even – elementy parzyste (to samo co wzór 2n+0 lub 2n)
• odd – elementy nieparzyste (to samo co wzór 2n+1)
Przykład różnic w działaniu :nth-of-type i :nth-child - HTML
<main><section id="sowy">
<h2>Sowy</h2> <!-- dziecko nr 1: nieparzyste-->
<h3>Puszczyk zwyczajny</h3> <!-- dziecko nr 2: parzyste -->
<p>Puszczyk (Strix aluco)... </p> <!-- dziecko nr 3: nieparzyste i pierwszy el. p: nieparzysty -->
<h3>Puchacz zwyczajny</h3> <!-- dziecko nr 4: parzyste -->
<p>Puchacz zwyczajny, puch... </p> <!-- dziecko nr 5: nieparzyste, i drugi element p: parzysty -->
<h3>Pójdźka zwyczajna</h3> <!-- dziecko nr 6: parzyste -->
<p>Pójdźka zwyczajna, pójdź...</p><!-- dziecko nr 7: nieparzyste, i trzeci el. p: nieparzysty -->
<h3>Sóweczka zwyczajna</h3> <!-- dziecko nr 8: parzyste -->
<p>Sóweczka zwyc...</p> <!-- dziecko nr 9: parzyste, jednocześnie czwarty element p: parzysty -->
</section><section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3>
<p>Dzięcioł duży, dzięci... </p><!-- dziecko nr 3: nieparzyste, i pierwszy el. p: nieparzysty -->
<h3>Dzięcioł średni</h3>
<p>Dzięcioł średni (Dendroc...</p> <!-- dziecko nr 5: nieparzyste, i drugi element p: parzysty -->
<h3>Dzięciołek</h3>
<p>Dzięciołek, dzięcioł mał...</p><!-- dziecko nr 7: nieparzyste, i trzeci el. p: nieparzysty -->
<h3>Dzięcioł czarny</h3>
<p>Dzięcioł czarny (Dryoco ...</p><!-- dziecko nr 9: parzyste, i czwarty element p: parzysty -->
</section></main>
Przykład różnic w działaniu :nth-of-type i :nth-child - CSS

main { display: flex; flex-direction: row; }/*wyświetlanie elementów dzieci w jednym wierszu*/
section { margin: 5px; } /*ustawienie marginesów dla elementu section */
/*wyszukanie w elemencie o identyfikatorze #sowy, takich akapitów p które są jego nieparzystymi
dziećmi. W tym przykładzie wszystkie akapity są nieparzystymi dziećmi, ale wystarczyłoby dodać
1 dowolny element aby stały się parzystymi i kod przestałby działać*/
#sowy p:nth-child(odd) { background-color: lightblue; }
#sowy p:nth-child(even) { /*parzyste mają być zielone – ale żadnego nie ma!*/
background-color: lightgreen; }
/*wyszukanie w elemencie o identyfikatorze #dzieciolowate, takich akapitów p które są
nieparzyste. Przy zliczaniu pod uwagę brane są wyłącznie akapity - pozostałe rodzeństwo jest
pomijane. Tak więc dodanie dowolnego rodzeństwa innego niż p nie wpłynie na działanie kodu */
#dzieciolowate p:nth-of-type(odd) { background-color: lightblue; }
#dzieciolowate p:nth-of-type(even){ background-color:lightgreen} /*parzyste mają być zielone */
/*wyszukanie od końca w elemencie o identyfikatorze #sowy, takich nagłówków h3 które są jego
parzystymi dziećmi. W tym przykladzie wszystkie nagłówki h3 są parzystymi dziećmi, ale
wystarczyłoby dodać 1 dowolny element aby stały się nieparzystymi i kod przestałby działać*/
#sowy h3:nth-last-child(even) { background-color:aquamarine; }
#sowy h3:nth-last-child(odd) { background-color:lime; }/*zliczanie od końca */
#dzieciolowate h3:nth-last-of-type(even) { background-color:aquamarine;}/*zliczanie od końca */
#dzieciolowate h3:nth-last-of-type(odd) { /*zliczanie od końca */
background-color:lime; }
Przykład różnic w działaniu :nth-of-type i :nth-child - Efekt
492 – Selektory nth-: efekt
492 – Selektory nth-

1. Zapisz style.html pod nazwą 492.html. Stwórz nowy plik 492.css i dołącz go do
html modyfikując element <link>. W pliku css ustaw poniższy wygląd:
2. Utwórz regułę dla elementu html ustawiając rozmiar czcionki na 20px (font-size)
3. Tło (background-color) parzystych wierszy tr ustaw na kolor lightblue. Użyj
selektora :nth-of-type(even),
4. Tło nieparzystych wierszy tr ustaw na kolor lightgreen. Użyj :nth-child (2n+1).
5. Przetestuj działanie w 2 przeglądarkach? Czemu jeden z wierszy nie pasuje wizualnie?
6. Tło dla czwartego wiersza tr od końca ustaw na ligthgreen. Np. :nth-last-child()
7. W drugiej komórce td każdego wiersza ustaw pogrubienie tekstu (font-weight:
bold). Użyj selektora :nth-of-type() lub :nth-child().
8. Przetestuj stronę w 2 przeglądarkach. Dlaczego w 2 wierszach pogrubienie odstaje
wizualnie od reszty dokumentu?
9. Dla parzystych elementów label ustaw kolor czcionki na brown. Najpierw użyj
selektora nth-of-type(2n) i przetestuj, a następnie nth-child(2n) i przetestuj.
Dlaczego w pierwszym przypadku faktycznie co druga etykieta jest wyświetlana na
brązowo, a w drugim nie?
10.Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Ważniejsze pseudo-klasy 1/4
• :link – linki które jeszcze nie zostały odwiedzone
• :visited – linki które zostały odwiedzone. Ten mechanizm umożliwia tworzenie skryptów sprawdzających czy
użytkownik odwiedzał w przeszłości daną stronę, stąd niektóre przeglądarki ze względu na poprawę prywatności
mogą nie obsługiwać tej pseudoklasy
• :hover – pseudoklasa dotycząca sytuacji gdy kursor znajduje się nad elementem
• :active –pseudoklasa dotycząca momentu aktywacji elementu, na przykład momentu kliknięcia myszki
• :focus – pseudoklasa dotycząca sytuacji gdy element jest aktywny: przyjmuje dane z klawiatury czy myszki
• :focus-within – to samo co :focus, ale dotyczy również potomstwa, tj. żeby element na którym użyto :focus-within
został wybrany, to wystarczy by którykolwiek z jego potomków był aktywny (był w trakcie przyjmowania danych).
• :target – pseudoklasa oznaczająca aktywną kotwicę, to jest taką, do której przeglądarka właśnie przeniosła widza
po kliknięciu przez niego w link do niej prowadzący. Kotwice to nazwane miejsca w dokumencie – takie dla
których ustawiono atrybut id. Dzięki temu mogą do nich prowadzić linki. W linku kotwicę oznacza się znakiem #.
• :lang( język) – pseudoklasa dotycząca języku elementu. Język jest określany w HTML zwykle przez atrybut lang,
może też wynikać ze znaczników meta czy nagłówków protokołu http. Na przykład argument pl lub pl-pl będzie
oznaczał język polski, argument en język angielski, a argument en-US język angielski w wariancie amerykańskim
• :enabled – pseudoklasa dotycząca elementów włączonych
• :disabled – psudoklasa dotycząca elementów wyłączonych, czyli takich których nie da się aktywować. Przykładem
zablokowanego elementu będzie pole formularza z ustawionym atrybutem disabled.
• :checked – pseudoklasa dotycząca wybranych elementów formularza typu radio i checkbox.
Ważniejsze pseudo-klasy 2/4
:indeterminate - pseudoklasa dotycząca niektórych pól formularza, gdy ich stan jest nieokreślony (na przykład gdy
żaden z wykluczających się przycisków radio w danej grupie nie jest jeszcze zaznaczony)
:in-range – oznacza element input, którego wartość mieści się pomiędzy wartościami wskazanymi atrybutami min i
max.
:out-of-range – oznacza element input, którego wartość NIE mieści się pomiędzy wartościami wskazanymi
atrybutami min i max. Przeciwieństwo :in-range.
:required – oznacza pola formularza które są wymagane, to jest mają ustawiony atrybut required.
:optional – oznacza pola formularza które nie są wymagane, to jest nie mają ustawionego atrybutu required.
:read-only – oznacza element którego użytkownik NIE może edytować
:read-write – oznacza element który użytkownik może edytować.
:root – pseudoklasa dotycząca elementu - korzenia dokumentu. W języku html będzie to po prostu element <html>
:invalid – pseudo-klasa dotycząca pól formularza w których stwierdzono błędy (np. wprowadzona wartość nie
zgadza się z wzorcem określonym atrybutem pattern)
:valid – pseudo-klasa dotycząca pól formularza w których nie stwierdzono błędów. Przeciwieństwo :invalid.
:default – dotyczy pól wyboru w formularzach takich jak radio czy checkbox. Pseudo-klasa oznacza takie elementy,
które są domyślnie zaznaczone (np. element typu radio wstępnie wybrany przy użyciu atrybutu checked).
:defined – oznacza element zdefiniowany, taki który już istnieje. Może być przydatne w sytuacjach, gdy elementy w
dokumencie są tworzone w locie przez skrypt. Jeśli tworzenie elementu jest czasochłonne bo na przykład posiada
wiele elementów-dzieci, to element można ukrywać do czasu gdy zostanie w pełni stworzony.
Ważniejsze pseudo-klasy 3/4
:empty – oznacza element który nie ma potomstwa
:first – używane w połączeniu z regułą @page i dotyczy drukarek. Oznacza pierwszą stronę wydruku.
:left – używane w połączeniu z regułą @page i dotyczy drukarek. Oznacza że strona jest „lewa”, co wynika
bezpośrednio z kierunku tekstu na pierwszej stronie.
:right – używane w połączeniu z regułą @page i dotyczy drukarek. Oznacza że strona jest „prawa”, co wynika
bezpośrednio z kierunku tekstu na pierwszej stronie.
:fullscreen() – oznacza wyświetlanie dokumentu w trybie pełnoekranowym
:not() – negacja – oznacza listę wszystkich elementów które nie pasują do selektorów podanych jako argument
dla not().
:nth-child(An+B) – pseudoklasa określająca który w kolejności jest dany element wśród swego rodzeństwa.
Wzorzec wskazany jako argument to wzór na podstawie którego przeglądarka wybiera czy dany element do
niego pasuje czy nie. Przeglądarka zlicza całe rodzeństwo, bez względu na typ elementu. Wzór w formacie
An+B, oznacza:
A to liczba całkowita mnożona przez n,
n to liczba, pod którą przeglądarka podstawia numer elementu liczonego względem reszty
rodzeństwa.
B to liczba dodawana do wyniku mnożenia
Słowo „even” to elementy parzyste (to samo co wzór 2n+0 lub 2n)
Słowo „odd” to elementy nieparzyste (to samo co wzór 2n+1)
Ważniejsze pseudo-klasy 4/4

:nth-of-type(An+B) –pseudoklasa ma podobne działanie do :nth-child, ale zlicza tylko

elementy typu wskazanego bezpośrednio przed dwukropkiem. Jest bezpieczniejsza w użyciu,
jeśli w kodzie HTML rodzeństwa występują różne rodzaje elementów i nie możemy wykluczyć
późniejszych modyfikacji tego kodu HTML.
:nth-last-of-type(An+B) –pseudoklasa ma podobne działanie do :nth-last-child, ale zlicza tylko
elementy typu wskazanego bezpośrednio przed dwukropkiem. Jest bezpieczniejsza w użyciu,
jeśli w kodzie HTML rodzeństwa występują różne rodzaje elementów i nie możemy wykluczyć
późniejszych modyfikacji tego kodu HTML.
:first-child – element który jest pierwszym dzieckiem
:last-child – element który jest ostatnim dzieckiem
:only-child - element który jest jedynym dzieckiem
:first-of-type – to samo co :nth-last-of-type(1)
:last-of-type – to samo co :nth-last-of-type(1)
:only-of-type – element który jest jedynym elementem danego typu.
Pseudo-klasy: disabled, enabled, checked
Ustawienie właściwości dla dla zablokowanego i aktywnego i wybranego elementu input
<!DOCTYPE html><html lang="pl">
<head><meta charset="utf-8" /><title>Wpis na blogu</title>
<link rel="stylesheet" href="655.css" type="text/css">
</head>
<body>
Ulubione warzywo:
<input type="text" disabled value="zablokowane"><br>
Ulubiony owoc:
<input type="text" value="odblokowane"><br>
<input type="checkbox" checked> obieram skórkę<br>
<input type="checkbox"> myję w gorącej wodzie
</body></html>

input:disabled {
color: green; border-color: yellow;
border-style: solid; border-width: 3px;
}
input:enabled {color: blue;}
input:checked {background-color: yellow;}
Pseudoklasy: :target, :not, :root
• Ustawienie właściwości akapitu który jest celem linku
• Ustawienie tła dla wszystkich elementów które nie są typu p
• Ustawienie tła dla korzenia dokumentu (root), czyli dla html (od którego odziedziczą kolor wszystkie
elementy).
<!DOCTYPE html><html lang="pl">
<head><meta charset="utf-8" /><title>Wpis na blogu</title>
<link rel="stylesheet" href="660.css" type="text/css" />
</head>
<body>
<a href="#gruszka">Gruszka</a><br>
<a href="#jablko">Jabłko</a><br>
<p id="gruszka">Gruszki są smaczne</p>
<p id="jablko">Jabłka też są niczego sobie</p>
<p>Wiśnie jeszcze nie dojrzały</p>
<div>A co z porzeczkami?</div>
</body></html>

p:target {color: blue;}

:not(p) {background-color: yellow}
p{background-color: white;}
:root {background-color: green;}
512 – Selektory wyboru i pseudo-elementy: efekt
512 – Selektory wyboru i pseudo-elementy

1. Zapisz style.html pod nazwą 512.html. Stwórz nowy plik 512.css i dołącz go do
html modyfikując element <link>. W pliku css ustaw poniższy wygląd:
2. Utwórz regułę dla elementu html ustawiając rozmiar czcionki na 20px (font-size)
3. Zaznaczone pole checkbox (input) ma zmieniać lewy margines na (margin-left)
40px. Do wybrania zaznaczonego pola użyj selektora :checked
4. Opis pola checkbox (label), po zaznaczeniu checkbox ma zmieniać kolor na
darkgreen. Zauważ że label jest w kodzie HTML zaraz po input – użyj selektora +
5. Artykuły (article) które są kotwicami (atrybut id), mają zmieniać kolor tła
(background-color) na chartreuse po kliknięciu linku prowadzącego do danej
kotwicy. Użyj selektora :target. Kolor zmienia się dopiero po kliknięciu na link.
6. Pierwsza linia w każdym akapicie p ma być pogrubiona (font-weight: bold). Użyj
selektora :first-line
7. Pierwsza litera w każdym akapicie p ma być w rozmiarze 1.5rem (właściwość font-
size) oraz pisana czcionką monospace (właściwość font-family)
8. Przetestuj działanie w 2 przeglądarkach.
9. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Nazewnictwo klas i metodyki tworzenia kodu CSS
• Rekomendacja W3C definiuje jak mają działać klasy, ale nie daje żadnych wskazówek, co do ich
nazewnictwa. Konwencja nazewnicza zostaje więc w rękach twórcy witryny.
• Przez lata powstało wiele konkurencyjnych, mniej lub bardziej formalnych metodyk tworzenia kodu
CSS oraz różnych konwencji nazewniczych. Blogi dotyczące CSS pełne są sporów dotyczących
wyższości danej metodyki nad innymi podejściami.
• Żadna z metodyk nie jest idealna ani najlepsza. Każda ma swoje zalety i wady.
• Zamiast wymyślać własną konwencję nazywania klas czy wręcz metodykę tworzenia kodu CSS, lepiej
wybrać którąkolwiek z istniejących, popularnych metodyk i się jej konsekwentnie trzymać.
• Przykłady popularnych metodyk/konwencji tworzenia kodu CSS:
AMCSS - Attribute Modules for CSS - https://amcss.github.io/
Atomic CSS - https://css-tricks.com/lets-define-exactly-atomic-css/
BEM – Block Element Modifier - http://getbem.com/ https://en.bem.info/methodology/quick-
start/
FUN – Flat hierarchy of selectors, Utility Styles, Name-spaced components -
https://benfrain.com/enduring-css-writing-style-sheets-rapidly-changing-long-lived-projects/
MCSS - Multilayer CSS - https://operatino.github.io/MCSS/en/
OOCSS - Object Oriented CSS. Link: https://github.com/stubbornella/oocss/wiki
RSCSS – Reasonable System for CSS - https://rscss.io/
SMACSS - Scalable and Modular Architecture for CSS. Link: https://smacss.com/
Przykład metodyki tworzenia stylów CSS: BEM 1/2
• BEM to jedna z wielu dostępnych metodyk tworzenia stylów CSS.
• Metodyka opiera się na podziale elementów w dokumencie na bloki, elementy i modyfikatory:
• bloki - niezależne fragmenty takie jak na przykład menu nawigacyjne, formularz, które mogą być wielokrotnie
używane niezależnie od innych fragmentów kodu.
Nazwy bloków powinny odzwierciedlać ich cel a nie ich wygląd.
Bloki nie powinny wpływać na elementy wokół nich. Z tego względu dla bloków nie powinno ustawiać się
takich właściwości jak pozycja czy marginesy.
Dla bloków nie powinno się używać selektorów typu czy identyfikatorów, lecz wyłącznie klas CSS. Pozwala to
na ich wielokrotne użycie w kodzie.
Bloki można w sobie zagnieżdżać w kodzie HTML.
Przykład nazwy klasy bloku: .formularz
• elementy to składowe bloków (nie mylić z elementami HTML!). Nie mogą być niezależnie wykorzystane bez bloku,
w którym występują. Nazwy elementów odpowiadają ich nazwom (np. input) lub celom (np. wyslij) . Przykładami
elementów mogą być link w menu, pole w formularzu, tekst (zawartość elementu HTML).
Nazwa klasy elementu zawiera dwa podkreśliniki __ które występują przed słowem opisującym element, a po
słowie opisującym blok w którym zawarty jest element, na przykład .formularz__input
BEM zakłada, że elementy są zawsze zależne od bloków – są w nich zawarte i nie występują samodzielnie.
Elementy można w sobie zagnieżdżać. Wówczas nazwa elementu w kodzie CSS powinna to odzwierciedlać, na
przykład: .formularz__tresc__wyslij (zakłada że w HTML element dotyczący „wyślij” jest zagnieżdżony wewnątrz
elementu o klasie .formularz__tresc)
Powyższe zasady umożliwiają tworzenie „płaskiego” kodu, to jest takiego który eliminuje korzystanie z
dziedziczenia. Dzięki temu kod jest bardziej przejrzysty i łatwiejszy do zarządzania.
Przykład metodyki tworzenia stylów CSS: BEM 2/2

• Modyfikatory – klasy która określają wygląd (np. wymiar), stan (np. zablokowany, tylko
do odczytu) lub zachowanie (np. górny prawy róg) danego bloku/elementu.
Nazwa klasy modyfikatora zawiera dwa myślniki które występują przed słowem
opisującym modyfikację, a po słowie opisującym blok lub element, na przykład
.formularz__input--zablokowany
Modyfikatory nie mogą istnieć samodzielnie – zawsze są używane w połączeniu z
blokiem lub elementem.
• Inne zasady:
Nie należy używać identyfikatorów
Nie należy używać selektorów w postaci nazw elementów
Tworzony kod ma być płaski, tj. nie należy używać selektorów potomstwa.
BEM opisuje nawet strukturę katalogów i plików w kodzie źródłowym i zaleca
trzymanie kodu dotyczącego danego bloku czy elementu w osobnym pliku. Kod
dotyczący każdego z bloków powinien być w osobnym katalogu o nazwie takiej, jak
nazwa tego bloku. Wewnątrz katalogów dotyczących bloków, należy zmieszczać
podkatalogi dotyczące elementów, o nazwach takich jak nazwy tych elementów
(włącznie z dwoma podkreślnikami).
Uproszczony przykład użycia BEM - HTML
<body>
<form action="http://www.wsb.pl/skrypt.php" method="get" class="formularz
formularz--zimowy"> <!-- dodanie 2 klas: głównej klasy bloku i klasy modyfikującej -->
<h1 class="formularz__naglowek">Wprowadź swoje dane</h1>
<label for="imie-id" class="formularz__etykieta">Imię lub pseudonim:</label>
<input type="text" name="imie" id="imie-id" class="formularz__poletekst"><br>
<label for="telefon-id" class="formularz__etykieta">Nr telefonu:</label>
<input type="tel" name="telefon" disabled id="telefon-id" class="formularz__poletekst
formularz__poletekst--zablokowane"><br><!--dodanie 2 klas: klasy bloku i klasy modyfikującej-->
<label for="url-id" class="formularz__etykieta formularz__etykieta--ukryta">Twoja witryna
internetowa:</label> <!-- powyższa etykieta zostanie ukryta przez klasę modyfikatora-->
<input type="url" name="witryna" hidden="hidden" id="url-id" class="formularz__poletekst
formularz_poletekst--ukryte"><br><!--dodaje 2 klasy: główną klasę bloku i klasę modyfikującą-->
<label for="email-id" class="formularz__etykieta">Adres email:</label>
<!-- dodanie 2 klasy: głównej klasy bloku i klasy modyfikującej -->
<input type="email" name="email" readonly id="email-id"
class="formularz__poletekst formularz__poletekst--tylkoodczyt"><br>
<label for="haslo-id" class="formularz__etykieta">Hasło:</label>
<input type="password" name="haslo" id="haslo-id"
class="formularz__poletekst"><br>
<input type='submit' value="Utwórz konto" class="formularz__zapisz">
</form></body>
Uproszczony przykład użycia BEM - CSS
.formularz { /*blok*/ border: 1px dotted blue; padding: 10px; }
.formularz--zimowy{/*blok i modyfikator. Przed modyfikatorem są 2 myśliniki*/
background-image: url('https://upload.wikimedia.org/wikipedia/commons/d/d6/Field-with-snow-
champ-enneige.jpg'); background-size: 50%;
} /*formularz zimowy, to modyfikacja, która wyświetla zimowe tło */
.formularz__etykieta { /*blok i element. Przed elementem są 2 podkreśliniki*/
font-size: 1rem; font-weight: bold; text-align: right; width: 12rem; display: inline-block;}
.formularz__etykieta--ukryta { /*blok, element i modyfikator*/
visibility: hidden; /*modyfikacja polega na ukrywaniu elementu*/ }
.formularz__poletekst { /*blok i element*/
font-size: 1rem; border: 1px solid blue; margin: 1px; }
.formularz__poletekst--zablokowane{ /*blok, element i modyfikator*/
background-color: lightslategray; /*modyfikacja ustawia szare tło*/ }
.formularz__poletekst--tylkoodczyt{ /*blok, element i modyfikator */
background-color: lightslategray; /*modyfikacja ustawia szare tło*/ }
.formularz_poletekst--ukryte{ /*blok, element i modyfikator*/
visibility: hidden; /*modyfikacja ukrywa element*/ }
.formularz__zapisz { /*blok i element*/
background-color: lightblue; margin-top: 1rem; margin-left: 12rem; border-style: none; }
.formularz__naglowek{
color:darkblue; }
Uproszczony przykład użycia BEM - efekt
517 – Selektory klas: efekt
517 – Selektory klas
1. Zapisz style.html pod nazwą 517.html. Stwórz nowy plik 517.css i dołącz go do html
modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color) na
snow, kolor tekstu (color) na black, wyśrodkowanie treści (margin: 0 auto;) oraz odstęp
treści (padding) na 0.5rem
3. .nagłówek – kolor tekstu na midnightblue
4. .article – krawędź border: 1px solid midnightblue, odstęp treści (padding) – 0.5rem,
margines dolny (margin-bottom) na 0.5rem, minimalną wysokość (min-height) na 22rem
5. .article__img – wyrównanie do prawej strony ze zgodą na opływanie (float: right),
maksymalną wysokość (max-height) na 20rem, marginesy (margin) na 1rem
6. .article__h2 – wyrównanie do lewej strony (float: left), marginesy na 1rem;
7. .table – scalanie krawędzi wewnątrz tabeli: border-collapse: collapse
8. .table__td – odstęp od treści na 1rem i krawędź border: 1px dashed midnightblue
9. .stopka – kolor tekstu na slategray;
10..formularz__label – wyświetlanie elementu jako bloku: display: block
11. .formularz__pole – wyświetlanie elementu jako bloku: display: block
12..formularz__pole--do-lewej - wyrównanie do lewej i zezwolenie na opływanie: float:left
13.Przetestuj działanie w 2 przeglądarkach i sprawdź poprawność kodu CSS
Kaskada

• 3 źródła arkuszy
Autor (witryny)
Użytkownik (przeglądający witrynę) Przykład opcji w przeglądarce opera gdzie
Możliwość istnieje, ale nikt z niej użytkownik można ustawić własne arkusze
nie korzysta – niszowe stylów:
funkcjonalność
Przeglądarka (domyślne ustawienia
stylów)
Sposób ustawienia arkuszy
użytkownika zależy od przeglądarki
Co jeśli reguły (autora, użytkownika i
przeglądarki) się wykluczają?
Algorytm kaskady

• Pogrupowanie reguł według źródła (od najmniej do najbardziej ważnych)

deklaracje przeglądarki
deklaracje użytkownika
deklaracje autora
ważne deklaracje autora (reguły oznaczone !important)
ważne deklaracje użytkownika (reguły oznaczone !important)
• W ramach grup powyżej posortowanie według specyficzności selektora
• W ramach jednakowej specyficzności posortowanie wg kolejności dołączania –
najpóźniejsza deklaracja wygrywa

Przykład użycia reguły !important

p { color: red !important }
Specyficzność

• Specyficzność to 4 liczby (pozycje)

• Najważniejsza jest liczba pierwsza, najmniej ważna - czwarta
• Wartość =1 jeśli reguła została zdefiniowana w atrybucie style np: <p style=‘color:
red;’>…</p>. W pozostałych przypadkach 0.
• Wartość = liczba identyfikatorów w selektorze (znak #)
• Wartość = liczba pseudo-klas (znak .) oraz atrybutów (znaki [..]) w selektorze
• Wartość = liczba nazw elementów (np. p, h1, li, ul) oraz pseudo-elementów (np.
:first-line) w selektorze
• Bardziej specyficzna jest ta reguła, która ma wyższą wartość liczbową (uwzględniając
wagę pozycji liczb).
Specyficzność: przykłady

* {color: red;} /* 0,0,0,0 */

li {color: red;} /* 0,0,0,1 */
li:first-line {color: red;} a /* 0,0,0,2 */
ul li {color: red;} /* 0,0,0,2 */
ul ol+li {color: red;} /* 0,0,0,3 */
h1 + *[rel=up] {color: red;} /* 0,0,1,1 */
ul ol li.red {color: red;} /* 0,0,1,3 */
li.red.level {color: red;} /* 0,0,2,1 */
#x34y {color: red;} /* 0,1,0,0 */
<p style="color: red;"> /* 1,0,0,0 */
CSS – Specyficzność : przykład
Jaki kolor będzie miał tekst „tekst” ?
<html>
<head><link rel="stylesheet" href="arkusz.css" media="all" /></head>
<body>
<div id="div1" class="klasa1">
<p id="p1" class="klasa2">
To jest <span class="klasa3">
tekst</span>
</p>
</div>
</body>
</html>

#div1.klasa1 .klasa2 span { color: red;}

span { color: green;}
.klasa1 #p1 span.klasa3 { color: blue;}
div.klasa1 p.klasa2 span.klasa3 { color: yellow;}
body span.klasa3 { color: black;}
CSS – Specyficzność : przykład

Jaki kolor będzie miał tekst „tekst” ? NIEBIESKI

<html>
<head><link rel="stylesheet" href="arkusz.css" media="all" /></head>
<body>
<div id="div1" class="klasa1">
<p id="p1" class="klasa2">
To jest <span class="klasa3">
tekst</span>
</p>
</div>
</body>
</html>

#div1.klasa1 .klasa2 span { color: red;}

span { color: green;}
.klasa1 #p1 span.klasa3 { color: blue;}
div.klasa1 p.klasa2 span.klasa3 { color: yellow;}
body span.klasa3 { color: black;}
Typy elementów ze względu na sposób ich wyświetlania

• CSS dzieli elementy na różne typy ze względu na sposób ich wyświetlania. Do

wskazywania typu wyświetlania służy właściwość display. Wartości do display można
wpisywać w wersji skróconej (jedno słowo) lub pełnej (1 do 3 słów) wprowadzonej w CSS
3.
• Każdy element ma swój domyślny typ wyświetlania wynikający ze specyfikacji HTML,
jednak można go dowolnie zmieniać używając właściwości display. Np. da się
spowodować by dowolny element zachowywał się jak element listy.
• Dwa główne typy wyświetlania to elementy blokowe i elementy liniowe. Istnieją także
inne typy, opisane poniżej.
• Elementy blokowe - tworzą odrębne w pionie bloki zawartości (w kontekście
wizualnym) – zazwyczaj używając przełamania linii przed zawartością i po niej. Przykłady
elementów, które domyślnie są blokami to: <blockquote>, <div> czy nagłówki. Elementy
blokowe układają się jeden pod drugim i są rozdzielone marginesami.
• Elementy liniowe nie tworzą wyraźnych bloków zawartości, nie łamią linii, zawartość
elementu jest wyświetlana przy użyciu pudełka liniowego (zawartość jest rozmieszczana
linia po linii wewnątrz zawierającego ją fizycznego lub wirtualnego elementu
blokowego). Przykłady elementów które domyślnie zachowują się jak liniowe to <span>,
<strong>, <b>, <q>.
Ważniejsze wartości właściwości „display” 1/2
• none – element ani jego zawartość nie zostaną w ogóle wyświetlone. Efekt jest taki, jakby element w ogóle nie
istniał;
• contents – element sam nie generuje pudełka ani nie jest widoczny – efekt jest taki jakby nie istniał. Jeśli element
ma dzieci, to one wyświetlają się normalnie.
• block lub block flow – blok pudełka, któremu można nadać wymiary. Domyślnie wyświetla się od nowej linii i
zajmuje całą dostępną szerokość i wymusza wyświetlanie kolejnego elementu pod spodem.
• flow-root lub block flow-root – element tworzy pudełko, które staje się nowym kontekstem do wyświetlania.
Można to wykorzystać by ograniczyć możliwość wizualnego „wydostawania się” dzieci poza pudełko w którym są
umieszczone.
• inline lub inline flow – element generuje jedno lub więcej pudełek elementu liniowego (jego wymiary można
regulować rozmiarem czcionki). Nie generuje przejść do następnej linii: kolejny element liniowy wyświetli się w tej
samej linii.
• inline-block lub inline flow-root – element generuje pudełko elementu blokowego, które będzie opływane
otaczającą treścią, jakby było pojedynczym pudełkiem liniowym (nie będzie powodować przejść do nowej linii). Z
punktu widzenia dzieci zachowuje się jak element blokowy (można określić jego wymiary), ale dla elementów
zewnętrznych działa jak element liniowy.
• run-in lub run-in flow – tworzy rodzaj pudełka zależny od kontekstu: albo blokowy, albo liniowy – w zależności
od tego, przez jakiego rodzaju elementy jest otaczany element w którym użyto tej wartości.
• list-item lub block flow list-item - tworzy miejsce na blokowy element listy. Element będzie zachowywał się tak
jak element <li>. Będzie także tworzył dodatkowy pseudo element umożliwiający wyświetlenie wyróżnika listy
przy użyciu właściwości list-style.
• inline item-list lub inline flow list-item - tworzy miejsce na liniowy element listy.
 Ważniejsze wartości właściwości „display” 2/2
• flex lub block flex – tworzy kontener flex który dla świata zewnętrznego zachowuje się jak element blokowy. Wewnątrz
kontenerów flex można w prosty i wygodny sposób rozmieszczać elementy. Więcej informacji o flex dalej w materiałach.
• inline-flex lub inline flex - tworzy liniowy kontener flex, który z zewnątrz zachowuje się jak element liniowy, a dla
elementów wewnątrz zachowuje się jak kontener flex. Więcej informacji o flex dalej w materiałach.
• grid lub block grid – tworzy kontener grid, który dla elementów sąsiednich zachowuje się jak element blokowy. Wewnątrz
kontenera grid można w precyzyjny sposób rozmieszczać elementy - dzieci. Więcej informacji o grid dalej w materiałach.
• inline-grid lub inline grid – tworzy liniowy kontener grid, który z zewnątrz zachowuje się jak element liniowy, a dla
elementów wewnątrz zachowuje się jak kontener grid. W kontenerze grid można precyzyjnie rozmieszczać elementy.
Więcej informacji o grid w materiałach na temat pozycjonowania elementów na stronie.
• ruby lub inline ruby – tworzy liniowy kontener ruby. W kontenerze ruby można wyświetlać adnotacje – np. adnotacje
fonetyczne używane w językach azjatyckich.
• block ruby – tworzy kontener ruby, który dla elementów sąsiednich zachowuje się jak element blokowy. W kontenerze
ruby można wyświetlać adnotacje – np. adnotacje fonetyczne używane w językach azjatyckich.
• ruby-base, ruby-text, ruby-base-container, ruby-text-container – typy dopuszczalne dla elementów wewnątrz
kontenerów typu ruby. Tworzą miejsca na odpowiednie elementy adnotacji ruby.
• table lub block table – tworzy kontener przeznaczony do wyświetlania tabeli, który dla sąsiednich elementów zachowuje
się jak element blokowy.
• inline-table lub inline table – tworzy liniowy kontener przeznaczony do wyświetlania tabeli. Z zewnątrz zachowuje się jak
element liniowy, a dla elementów wewnątrz zachowuje się jak kontener tabeli.
• table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column,
table-caption - typy dopuszczalne dla elementów wewnątrz kontenera dla tabeli. Tworzą miejsce na odpowiednie
elementy tabeli.
Model pudełka – składowe
• Element blokowy nazywany jest także pudełkiem. Poniższy przykład przedstawia jego składowe:
• 4 boki dla – każdego można ustawiać właściwości z osobna
• Margines – odległość od sąsiedniego elementu
• Ramka – krawędź, która może mieć różne style, kolory i grubość
• Odstęp wewnętrzny – odległość między treścią elementu a krawędzią
• Treść – zawartość elementu
• Wymiary pudełka (szerokość, wysokość) mogą być liczone albo tylko względem zawartości (content-box) –
działanie domyślne, albo względem ramki (border-box), za co odpowiada właściwość box-sizing.
Marginesy

margin-top, margin-right, margin-bottom, margin-left: ustawienie marginesu dla

odpowiedniej strony (góra, prawa, dół, lewa).
Wartość może być określona jako długość (np. px), procenty lub auto (przeglądarka
sama dobierze wartość).
Ustawienie marginesu prawego i lewego na auto pozwala wyśrodkować element
blokowy względem rodzica.
Wartość może być ujemna.
margin:
1 wartość – ustawienie wszystkich 4 marginesów na tę samą wartość;
2 wartości – ustawienie górnego i dolnego marginesu na pierwszą wartość,
lewego i prawego na drugą wartość;
3 wartości – ustawienie górnego marginesu na pierwszą wartość, lewego i
prawego na drugą wartość, dolnego na trzecią wartość;
4 wartości – ustawienie po kolei górnego, prawego, dolnego i lewego marginesu
(zgodnie z ruchem wskazówek zegara).
Marginesy – przykład: HTML
<nav>
<ul>
<li><a href="#sowy">Informacje o sowach</a></li> <!--link do kotwicy-->
<li><a href="#dzieciolowate">Informacje o dzięciołowatych</a></li>
</ul>
</nav>
<main>
<section id="sowy"> <!-- kotwica -->
<h2>Sowy</h2>
<h3>Puszczyk zwyczajny</h3> <p>Puszczyk (Strix aluco) – gatunek ptaka z rodziny …</p>
<h3>Puchacz zwyczajny</h3> <p>Puchacz zwyczajny, puchacz (Bubo bubo) – gatunek dużego, …</p>
<h3>Pójdźka zwyczajna</h3> <p>Pójdźka zwyczajna, pójdźka (Athene noctua) – gatunek …</p>
<h3>Sóweczka zwyczajna</h3> <p>Sóweczka zwyczajna, sóweczka (Glaucidium passerinum) ...</p>
</section><section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3> <p>Dzięcioł duży, dzięcioł pstry większy (Dendrocopos major) ...</p>
<h3>Dzięcioł średni</h3> <p>Dzięcioł średni (Dendrocoptes medius)[3] – gatunek średn ...</p>
<h3>Dzięciołek</h3> <p>Dzięciołek, dzięcioł mały (Dryobates minor ) – gatunek małej...</p>
<h3>Dzięcioł czarny</h3> <p>Dzięcioł czarny (Dryocopus martius) – gatunek średniej ...</p>
</section>
</main>
Marginesy – przykład: CSS
body, nav, ul, li, main, section, h2, h3, p { /*ustawienia dla kliku elementów*/
border: 1px solid black;/*krawędź o grubości 1px, linia ciągła, kolor czarny*/
margin: 0px auto; /*brak marginesów pionowych, dla poziomych przeglądarka dobiera wymiar
sama. Da równe wartości z obu stron a więc wyśrodkuje element */
padding: 0px; /*brak odstępu między krawędzią a treścią*/ }
ul {/*kontener na listę*/
margin: 10px 20px 40px 80px; /*marginesy: górny 10px, prawy: 20px, dolny: 40px; lewy: 80px;*/
background-color: lightskyblue;/*kolor tła: niebieski*/ }
li {/*element listy*/
margin-top: 10px; /*margines górny: 10px*/
margin-right: 20px; /*margines prawy: 20px*/
margin-bottom: 40px; /*margines dolny: 40px*/
margin-left: 80px; /*margines lewy: 80px*/
background-color: yellow; /*kolor żółty*/ }
h2 { /*nagłówki h2*/
margin: 10px; /*wszystkie marginesy: 10px*/ background-color: coral; /*kolor pomarańczowy*/ }
h3 {/*nagłówki h3*/
margin: 20px 40px; /*margines górny i dolny 20px; margines prawy i lewy: 40px;*/
background-color: aquamarine; }
p { margin: 30px 40px 50px; /*margines górny 30px, lewy i prawy 40px, dolny:50px*/
background-color: fuchsia; }
Marginesy – przykład: efekt
Marginesy zlewające się

Marginesy w poziomie (lewa, prawa) nie mogą się zlewać. Odległość między
elementami jest sumą marginesów pomiędzy elementami.
Marginesy w pionie (dół, góra) przylegających elementów zlewają się:
odległość między elementami nie jest sumą marginesów, lecz jest równa
wartości większego z marginesów
jeśli jeden z marginesów jest dodatni, a drugi ujemny – wyliczana jest suma ich
wartości.
Przyjrzyj się ponownie wcześniejszemu przykładowi dotyczącemu marginesów:
margines górny elmentu <p> to 30px, margines dolny elementu <h3> to 20px.
Wydawałoby się więc że odległość między elementami powinna wynosić 50px,
tymczasem wynosi ona 30px.
Wyjątki od reguły zlewania się marginesów:
w choć jednym z elementów używane jest pozycjonowanie float,
w choć jednym z elementów overflow jest inne niż visible,
w choć jednym z elementów używane jest pozycjonowanie absolutne,
choć jeden z elementów jest wyświetlany w trybie in-line.
Odstępy wewnętrzne

• padding-top, padding-right, padding-bottom, padding-left:

ustawienie odstępu treść – ramka dla odpowiedniej strony (góra,
prawa, dół, lewa).
• Wartość może być określona jako długość (np. px), procenty lub auto
(przeglądarka sama dobierze rozmiar).
• padding: – ustawienie odstępów dla wszystkich 4 stron – analogicznie
jak dla marginesów.
Odstępy wewnętrzne – przykład: HTML
<nav>
<ul>
<li><a href="#sowy">Informacje o sowach</a></li> <!--link do kotwicy-->
<li><a href="#dzieciolowate">Informacje o dzięciołowatych</a></li>
</ul>
</nav>
<main>
<section id="sowy"> <!-- kotwica -->
<h2>Sowy</h2>
<h3>Puszczyk zwyczajny</h3> <p>Puszczyk (Strix aluco) – gatunek ptaka z rodziny …</p>
<h3>Puchacz zwyczajny</h3> <p>Puchacz zwyczajny, puchacz (Bubo bubo) – gatunek dużego, …</p>
<h3>Pójdźka zwyczajna</h3> <p>Pójdźka zwyczajna, pójdźka (Athene noctua) – gatunek …</p>
<h3>Sóweczka zwyczajna</h3> <p>Sóweczka zwyczajna, sóweczka (Glaucidium passerinum) ...</p>
</section><section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3> <p>Dzięcioł duży, dzięcioł pstry większy (Dendrocopos major) ...</p>
<h3>Dzięcioł średni</h3> <p>Dzięcioł średni (Dendrocoptes medius)[3] – gatunek średn ...</p>
<h3>Dzięciołek</h3> <p>Dzięciołek, dzięcioł mały (Dryobates minor ) – gatunek małej...</p>
<h3>Dzięcioł czarny</h3> <p>Dzięcioł czarny (Dryocopus martius) – gatunek średniej ...</p>
</section>
</main>
Odstępy wewnętrzne – przykład: CSS
body, nav, ul, li, main, section, h2, h3, p { /*ustawienia dla kliku elementów*/
border: 1px solid black;/*krawędź o grubości 1px, linia ciągła, czarny*/
margin: 10px; /* wszystkie marginesy 10px*/
padding: 0px; /*brak odstępu między krawędzią a treścią*/
text-align: justify; /*justyfikacja tekstu*/ }
ul {/*kontener na listę*/
padding: 10px 20px 40px 80px;/*odległości: góra 10px, prawa: 20px, dolna: 40px; lewa: 80px;*/
background-color: lightskyblue;/*kolor tła: niebieski*/ }
li {/*element listy*/
padding-top: 10px; /*odległość górna: 10px*/ padding-right: 20px;/*odległość prawa: 20px*/
padding-bottom: 40px; /*odległość dolna: 40px*/ padding-left: 80px; /*odległość lewa: 80px*/
background-color: yellow; /*kolor żółty*/ }
h2 { /*nagłówki h2*/
padding: 10px; /*wszystkie odległości: 10px*/ background-color: coral; /*kolor pomarańczowy*/
}
h3 {/*nagłówki h3*/
padding: 20px 40px; /*odległość górna i dolna 20px; odległość prawa i lewa: 40px;*/
background-color: aquamarine; }
p {
padding: 30px 40px 50px;/*odległość górna 30px, lewa i prawa 40px, dolna:50px*/
background-color: fuchsia; }
Odstępy wewnętrzne – przykład: efekt
Krawędzie - grubość

• border-top-width, border-right-width, border-bottom-width, border-

left-width: ustawienie grubości krawędzi dla odpowiedniej strony
(góra, prawa, dół, lewa).
• Wartość może być określona jako thin, medium, thick lub jako
odległość (np. w px).
• Wartość nie może być ujemna.
• border-width: – ustawienie szerokości dla wszystkich 4 stron –
analogicznie jak dla marginesów.
Krawędzie grubość – przykład: HTML
<nav>
<ul>
<li><a href="#sowy">Informacje o sowach</a></li> <!--link do kotwicy-->
<li><a href="#dzieciolowate">Informacje o dzięciołowatych</a></li>
</ul>
</nav>
<main>
<section id="sowy"> <!-- kotwica -->
<h2>Sowy</h2>
<h3>Puszczyk zwyczajny</h3> <p>Puszczyk (Strix aluco) – gatunek ptaka z rodziny …</p>
<h3>Puchacz zwyczajny</h3> <p>Puchacz zwyczajny, puchacz (Bubo bubo) – gatunek dużego, …</p>
<h3>Pójdźka zwyczajna</h3> <p>Pójdźka zwyczajna, pójdźka (Athene noctua) – gatunek …</p>
<h3>Sóweczka zwyczajna</h3> <p>Sóweczka zwyczajna, sóweczka (Glaucidium passerinum) ...</p>
</section><section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3> <p>Dzięcioł duży, dzięcioł pstry większy (Dendrocopos major) ...</p>
<h3>Dzięcioł średni</h3> <p>Dzięcioł średni (Dendrocoptes medius)[3] – gatunek średn ...</p>
<h3>Dzięciołek</h3> <p>Dzięciołek, dzięcioł mały (Dryobates minor ) – gatunek mał...</p>
<h3>Dzięcioł czarny</h3> <p>Dzięcioł czarny (Dryocopus martius) – gatunek średniej ...</p>
</section>
</main>
Krawędzie grubość – przykład: CSS
body, nav, ul, li, main, section, h2, h3, p { /*ustawienia dla kliku elementów*/
margin: 10px; /* marginesy 10px*/ padding: 10px; /*odstęp między krawędzią a treścią 10px;*/
text-align: justify; /*justyfikacja tekstu*/
border-color: black; /*kolor krawędzi czarny*/ border-style: solid; /* styl krawędzie */
border-width: 0px; /* grubość krawędzi - krawędź niewidoczna */ }
ul {/*kontener na listę*/
border-width: 1px 4px 8px 12px; /*krawędzi: górna 1px, prawa: 4px, dolna: 8px; lewa: 12px;*/
background-color: lightskyblue;/*kolor tła: niebieski*/ }
li {/*element listy*/
border-top-width: 1px; /*krawędź górna: 1px*/
border-right-width: 4px; /*krawędź prawa: 4px*/
border-bottom-width: 8px; /*krawędź dolna: 8px*/
border-left-width: 12px; /*krawędź lewa: 12px*/ background-color: yellow; /*kolor żółty*/ }
h2 { /*nagłówki h2*/
border-width: 1px; /*wszystkie krawędzie: 1px*/ background-color: coral; /* pomarańczowy*/}
h3 {/*nagłówki h3*/
border-width: 1px 4px; /*krawędź górna i dolna 1px; krawędź prawa i lewa: 4px;*/
background-color: aquamarine; }
p {
border-width: 1px 4px 8px;/*krawędź górna 1px, lewa i prawa 4px, dolna:8px*/
background-color: fuchsia; }
Krawędzie grubość – przykład: efekt
Krawędzie: kolor

• border-top-color, border-right-color, border-bottom-color, border-

left-color : ustawienie koloru krawędzi dla odpowiedniej strony (góra,
prawa, dół, lewa).
• Wartość może być jako transparent lub jako kolor.
• border-color: – ustawienie kolorów dla wszystkich 4 krawędzi –
analogicznie jak dla marginesów.
Krawędzie: kolor – przykład: HTML
<nav>
<ul>
<li><a href="#sowy">Informacje o sowach</a></li> <!--link do kotwicy-->
<li><a href="#dzieciolowate">Informacje o dzięciołowatych</a></li>
</ul>
</nav>
<main>
<section id="sowy"> <!-- kotwica -->
<h2>Sowy</h2>
<h3>Puszczyk zwyczajny</h3> <p>Puszczyk (Strix aluco) – gatunek ptaka z rodziny …</p>
<h3>Puchacz zwyczajny</h3> <p>Puchacz zwyczajny, puchacz (Bubo bubo) – gatunek dużego, …</p>
<h3>Pójdźka zwyczajna</h3> <p>Pójdźka zwyczajna, pójdźka (Athene noctua) – gatunek …</p>
<h3>Sóweczka zwyczajna</h3> <p>Sóweczka zwyczajna, sóweczka (Glaucidium passerinum) ...</p>
</section><section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3> <p>Dzięcioł duży, dzięcioł pstry większy (Dendrocopos major) ...</p>
<h3>Dzięcioł średni</h3> <p>Dzięcioł średni (Dendrocoptes medius)[3] – gatunek średn ...</p>
<h3>Dzięciołek</h3> <p>Dzięciołek, dzięcioł mały (Dryobates minor ) – gatunek mał...</p>
<h3>Dzięcioł czarny</h3> <p>Dzięcioł czarny (Dryocopus martius) – gatunek średniej ...</p>
</section>
</main>
Krawędzie: kolor – przykład: CSS
body, nav, ul, li, main, section, h2, h3, p {/*ustawienia dla kliku elementów*/
margin: 10px; /* marginesy 10px*/ padding: 10px; /*odstęp między krawędzią a treścią 10px;*/
text-align: justify; /*justyfikacja tekstu*/
border-color: transparent; /*kolor krawędzi przezroczysty - krawędź niewidoczna*/
border-style: solid; /* styl krawędzi */ border-width: 10px; /* grubość krawędzi */ }
ul {/*kontener na listę*/
border-color: red blue green black; /*kolory krawędzi: górna , prawa, dolna, lewa*/
background-color: lightskyblue;/*kolor tła: niebieski*/ }
li {/*element listy*/
border-top-color: red; /*krawędź górna*/ border-right-color: blue; /*krawędź prawa*/
border-bottom-color: green; /*krawędź dolna*/ border-left-color: black; /*krawędź lewa*/
background-color: yellow; /*kolor żółty*/ }
h2 { /*nagłówki h2*/
border-color: red; /*wszystkie krawędzie czerwone*/
background-color: coral; /*kolor pomarańczowy*/ }
h3 {/*nagłówki h3*/
border-color: red blue; /*krawędź górna i dolna; krawędź prawa i lewa*/
background-color: aquamarine; }
p {
border-color: red blue green;/*krawędź górna, lewa i prawa, dolna*/
background-color: fuchsia; }
Krawędzie: kolor – przykład: efekt
Krawędzie: style

border-top-style, border-right-style, border-bottom-style, border-left-style : ustawienie

stylu krawędzi dla odpowiedniej strony (góra, prawa, dół, lewa).
Wartości:
none – brak ramki (szerokość = 0),
hidden – zwykle to samo co none. W przypadku tabel mogą być różnice działania w
porównaniu z none, bo wartość hidden ma wpływ na algorytm rozwiązywania konfliktów,
gdy o kolorze danej krawędzi decyduje więcej niż jeden element tabeli.
dashed – linia przerywana,
dotted – linia kropkowana,
double – 2 linie ciągłe (ich grubość oraz przerwa między nimi daje wartość szerokości
ramki: border-width),
groove – daje efekt wyrzeźbienia (wgłębienie),
inset – daje efekt wklęsłości, zapadnięcia,
outset – przeciwieństwo inset. Daje efekt wypukłości, trójwymiarowości
ridge – Przeciwieństwo groove - przypomina wypukłą linię,
solid – linia ciągła,
border-style: – ustawienie stylów dla wszystkich 4 stron – analogicznie jak dla marginesów.
Krawędzie: style – przykład: HTML
<nav>
<ul>
<li><a href="#sowy">Informacje o sowach</a></li> <!--link do kotwicy-->
<li><a href="#dzieciolowate">Informacje o dzięciołowatych</a></li>
</ul>
</nav>
<main>
<section id="sowy"> <!-- kotwica -->
<h2>Sowy</h2>
<h3>Puszczyk zwyczajny</h3> <p>Puszczyk (Strix aluco) – gatunek ptaka z rodziny …</p>
<h3>Puchacz zwyczajny</h3> <p>Puchacz zwyczajny, puchacz (Bubo bubo) – gatunek dużego, …</p>
<h3>Pójdźka zwyczajna</h3> <p>Pójdźka zwyczajna, pójdźka (Athene noctua) – gatunek …</p>
<h3>Sóweczka zwyczajna</h3> <p>Sóweczka zwyczajna, sóweczka (Glaucidium passerinum) ...</p>
</section><section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3> <p>Dzięcioł duży, dzięcioł pstry większy (Dendrocopos major) ...</p>
<h3>Dzięcioł średni</h3> <p>Dzięcioł średni (Dendrocoptes medius)[3] – gatunek średn ...</p>
<h3>Dzięciołek</h3> <p>Dzięciołek, dzięcioł mały (Dryobates minor ) – gatunek mał...</p>
<h3>Dzięcioł czarny</h3> <p>Dzięcioł czarny (Dryocopus martius) – gatunek średniej ...</p>
</section>
</main>
Krawędzie: style – przykład: CSS
body, nav, ul, li, main, section, h2, h3, p {/*ustawienia dla kliku elementów*/
margin: 10px; /* marginesy 10px*/ padding: 10px; /*odstęp między krawędzią a treścią 10px;*/
text-align: justify; /*justyfikacja tekstu*/ border-color: black; /*kolor krawędzi*/
border-style: none; /* brak krawędzi - krawędź niewidoczna*/
border-width: 15px; /* grubość krawędzi */ }
ul {/*kontener na listę*/
border-style: solid dashed dotted double; /*style krawędzi: górna , prawa, dolna, lewa*/
background-color: lightskyblue;/*kolor tła: niebieski*/ }
li {/*element listy*/
border-top-style: groove; /*krawędź górna*/ border-right-style: groove; /*krawędź prawa*/
border-bottom-style: groove; /*krawędź dolna*/ border-left-style: groove; /*krawędź lewa*/
background-color: yellow; /*kolor żółty*/ }
h2 { /*nagłówki h2*/
border-style: inset; /*wszystkie krawędzie */
background-color: coral; /*kolor pomarańczowy*/ }
h3 {/*nagłówki h3*/
border-style: outset outset; /*krawędź górna i dolna; krawędź prawa i lewa*/
background-color: aquamarine; }
p {
border-style: ridge ridge ridge;/*krawędź górna, lewa i prawa, dolna*/
background-color: fuchsia; }
Krawędzie: style – przykład: efekt
Krawędzie - skrócony zapis

• border-top, border-right, border-bottom, border-left: ustawienie

wszystkich cech dla odpowiedniej strony krawędzi.
• Ustawiane właściwości: border-width, border-style, border-color.
• Pominięte właściwości przyjmą wartości domyślne.
• border: – ustawienie cech jak powyżej dla wszystkich 4 stron
w jednej definicji. Nie da się w ten sposób ustawić różnych cech dla
krawędzi z różnych stron.
Krawędzie: skrócony zapis – przykład: HTML
<nav>
<ul>
<li><a href="#sowy">Informacje o sowach</a></li> <!--link do kotwicy-->
<li><a href="#dzieciolowate">Informacje o dzięciołowatych</a></li>
</ul>
</nav>
<main>
<section id="sowy"> <!-- kotwica -->
<h2>Sowy</h2>
<h3>Puszczyk zwyczajny</h3> <p>Puszczyk (Strix aluco) – gatunek ptaka z rodziny …</p>
<h3>Puchacz zwyczajny</h3> <p>Puchacz zwyczajny, puchacz (Bubo bubo) – gatunek dużego, …</p>
<h3>Pójdźka zwyczajna</h3> <p>Pójdźka zwyczajna, pójdźka (Athene noctua) – gatunek …</p>
<h3>Sóweczka zwyczajna</h3> <p>Sóweczka zwyczajna, sóweczka (Glaucidium passerinum) ...</p>
</section><section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3> <p>Dzięcioł duży, dzięcioł pstry większy (Dendrocopos major) ...</p>
<h3>Dzięcioł średni</h3> <p>Dzięcioł średni (Dendrocoptes medius)[3] – gatunek średn ...</p>
<h3>Dzięciołek</h3> <p>Dzięciołek, dzięcioł mały (Dryobates minor ) – gatunek mał...</p>
<h3>Dzięcioł czarny</h3> <p>Dzięcioł czarny (Dryocopus martius) – gatunek średniej ...</p>
</section>
</main>
Krawędzie: skrócony zapis – przykład: CSS
body, nav, ul, li, main, section, h2, h3, p { /*ustawienia dla kliku elementów*/
margin: 10px; /* marginesy 10px*/
padding: 10px; /*odstęp między krawędzią a treścią 10px;*/
text-align: justify; /*justyfikacja tekstu*/
border-color: transparent; /*kolor przezroczysty - krawędź niewidoczna*/
border-style: none; /* brak krawędzi - krawędź niewidoczna*/
border-width: 0px; /* grubość krawędzi - krawędź niewidoczna*/
}
ul {/*kontener na listę*/
border-top: 1px solid red; /*krawędź górna*/
border-right: 2px dotted green; /*krawędź prawa*/
border-bottom: 4px dashed blue; /*krawędź dolna*/
border-left: 8px double black; /*krawędź lewa*/
background-color: lightskyblue;/*kolor tła: niebieski*/
}
li {/*element listy*/ background-color: yellow; /*kolor żółty*/ }
h2 { /*nagłówki h2*/
border: 1px dashed black; /*wszystkie krawędzie*/
background-color: coral; /*kolor pomarańczowy*/ }
h3 {/*nagłówki h3*/ background-color: aquamarine; }
p { background-color: fuchsia; }
Krawędzie: skrócony zapis – przykład: efekt
522 – Krawędzie: efekt końcowy
522 – Krawędzie
1. Zapisz style.html pod nazwą 522.html. Stwórz nowy plik 522.css i dołącz go do html
modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color) na
snow, kolor tekstu (color) na black, marginesy na 0 (margin) oraz odstęp treści (padding)
na połowę wysokości czcionki w elemencie html: 0.5rem
3. .naglowek - ustaw krawędź górną i dolną (border-top, border-bottom) o grubości równej
połowie szerokości obszaru wyświetlania (0.5vw), jako linię podwójną (double) i w kolorze
maroon. Ponadto ustaw:
a. maksymalną szerokość (max-width) na 90% obszaru wyświetlania (90vw)
b. marginesy pionowe na 2vw, a poziome na auto aby wyśrodkować element (margin)
c. odstępy pionowe od treści ustaw na 10px a poziome na 20px (padding)
4. .tresc - ustaw krawędź lewą i prawą (border-left, border-right) o grubości 1px i kolorze
maroon w formie linii składającej się z kropek (dotted). Ponadto ustaw:
1. odległość treści od lewej krawędzi na 3vw a od prawej 1vw.
5. .article - ustaw krawędź dolną (border-bottom) na 1px, jako linię ciągłą (solid), w kolorze
maroon. Ponadto ustaw:
a. margines górny (margin-top) na rozmiar 3rem.
6. Przetestuj działanie w 2 przeglądarkach. Zwróć uwagę jak zmieiają się wymiary vw przy
zmianie szerokości okna przeglądarki. Sprawdź poprawność kodu CSS
Krawędzie - zaokrąglanie rogów

• Moduł CSS Backgrounds and Borders pozwala na zaokrąglanie rogów ramek.

• 1 wartość – zaokrąglenie jest wycinkiem koła o promieniu o podanej wartości.
• 2 wartości – zaokrąglenie jest wycinkiem elipsy (pierwsza wartość: promień poziomy,
druga wartość: promień pionowy);
• border-top-left-radius, border-top-right-radius, border-bottom-right-radius,
border-bottom-left-radius: ustawienie promienia ramki dla odpowiedniego
rogu (lewa góra, prawa, góra, lewa dół, prawa dół)
• border-radius: – ustawienie zaokrąglenia dla wszystkich 4 rogów.
• Wartości: wymiar promienia lub procent.
• Generator kodu zaokrągleń rogów: http://border-radius.com.
Krawędzie: zaokrąglanie rogów – przykład: HTML
<nav>
<ul>
<li><a href="#sowy">Informacje o sowach</a></li> <!--link do kotwicy-->
<li><a href="#dzieciolowate">Informacje o dzięciołowatych</a></li>
</ul>
</nav>
<main>
<section id="sowy"> <!-- kotwica -->
<h2>Sowy</h2>
<h3>Puszczyk zwyczajny</h3> <p>Puszczyk (Strix aluco) – gatunek ptaka z rodziny …</p>
<h3>Puchacz zwyczajny</h3> <p>Puchacz zwyczajny, puchacz (Bubo bubo) – gatunek dużego, …</p>
<h3>Pójdźka zwyczajna</h3> <p>Pójdźka zwyczajna, pójdźka (Athene noctua) – gatunek …</p>
<h3>Sóweczka zwyczajna</h3> <p>Sóweczka zwyczajna, sóweczka (Glaucidium passerinum) ...</p>
</section><section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3> <p>Dzięcioł duży, dzięcioł pstry większy (Dendrocopos major) ...</p>
<h3>Dzięcioł średni</h3> <p>Dzięcioł średni (Dendrocoptes medius)[3] – gatunek średn ...</p>
<h3>Dzięciołek</h3> <p>Dzięciołek, dzięcioł mały (Dryobates minor ) – gatunek mał...</p>
<h3>Dzięcioł czarny</h3> <p>Dzięcioł czarny (Dryocopus martius) – gatunek średniej ...</p>
</section>
</main>
Krawędzie: zaokrąglanie rogów – przykład: CSS
body, nav, ul, li, main, section, h2, h3, p { /*ustawienia dla kliku elementów*/
margin: 10px; /* marginesy 10px*/
padding: 10px; /*odstęp między krawędzią a treścią 10px;*/
text-align: justify; /*justyfikacja tekstu*/ }
ul {/*kontener na listę*/ background-color: lightskyblue;/*kolor tła: niebieski*/ }
li {/*element listy*/ background-color: yellow; /*kolor żółty*/ }
h2 { /*nagłówki h2*/
border: 5px solid black; /*wszystkie krawędzie*/
border-top-left-radius: 3rem 0.5rem; /* górny lewy róg - promienie elipsy */
border-top-right-radius: 1rem 3rem; /* górny prawy róg - promienie elipsy */
border-bottom-right-radius: 4rem 0.5rem; /* dolny prawy róg - promienie */
border-bottom-left-radius: 1rem 3rem; /* dolny lewy róg - promienie elipsy */
background-color: coral; /*kolor pomarańczowy*/
}
h3 {/*nagłówki h3*/
background-color: aquamarine; border-top: 2px solid green; border-bottom: 8px dotted black;
border-radius: 20px 10px; /*wszystkie rogi zaokrąglone: promień elipsy w
poziomie i pionie*/ }
p {
background-color: fuchsia;
border-radius: 1rem; /*wszystkie rogi zaokrąglone - promień koła*/ }
Krawędzie: zaokrąglanie rogów – przykład: efekt
Krawędzie jako wycinek grafiki 1/2
• Moduł CSS Backgrounds and Borders pozwala na używanie jako krawędzi grafiki zamiast
klasycznych krawędzi określanych stylem i kolorem.
• Wygląd jest pobierany na podstawie krawędzi i rogów wskazanego pliku graficznego. Plik graficzny
może być skalowany, rozciągany czy przycinany.
• border-image-source – wskazuje grafikę, która ma być wykorzystana do wyświetlania krawędzi. Jako
grafiki można użyć także gradientów generowanych w CSS.
• border-image-slice – przyjmuje od 1 do 5 argumentów. 4 argumenty liczbowe oznaczają odstęp od
góry, prawej strony, dołu i lewej strony grafiki. Dzieli to grafikę na 9 obszarów: 4 rogi (używane są do
wyświetlania rogów krawędzi), 4 krawędzie (są używane do wyświetlania poszczególnych krawędzi( i
środek. Część środkowa jest odrzucana. Jeśli zostanie użyte słowo kluczowe fill, to część środkowa
grafiki nie zostanie odrzucona i użyta przy wyświetlaniu. Poniższy przykład ilustruje podział grafiki na
obszary przy użyciu 4 argumentów 25%, 30%, 12%, 20%:
Krawędzie jako wycinek grafiki 2/2

• border-image-outset – określa o ile grafikę krawędzi można wysunąć poza obszar

przeznaczony na krawędź. Przyjmuje od 1 do 4 wartości określających odległości od
góry, prawej, dolnej i lewej strony.
• border-image-repeat – określa jak grafika ma być przetwarzana by dostosować ją
do wymiarów elementu. Przyjmuje od 1 do 2 argumentów. Pierwszy argument
określa sposób przetwarzanie w poziomie, drugi w pionie. Jeśli podano tylko jeden
argument, to przetwarzanie w poziomie i pionie są identyczne. Dopuszczalne
wartości:
stretch – rozciąganie grafiki
repeat – powtarzanie grafiki
round – działanie podobnie jak repeat, to jest powtarzanie grafiki. Grafika jest
jednak wcześniej skalowana, tak, aby liczba powtórzeń wpisywała się idealnie w
wypełniany obszar.
• space – działanie podobne jak repeat, to jest powtarzanie grafiki. Jeśli liczba
powtórzeń nie wpisuje się idealnie w wypełniany obszar, to zamiast ostatniego
niepełnego fragmentu powstaje pusta przestrzeń. Przestrzeń ta jest równomiernie
dzielona i wstawiana pomiędzy pełne powtórzenia grafiki.
Krawędzie jako wycinek grafiki – przykład: HTML
<nav>
<ul>
<li><a href="#sowy">Informacje o sowach</a></li> <!--link do kotwicy-->
<li><a href="#dzieciolowate">Informacje o dzięciołowatych</a></li>
</ul>
</nav>
<main>
<section id="sowy"> <!-- kotwica -->
<h2>Sowy</h2>
<h3>Puszczyk zwyczajny</h3> <p>Puszczyk (Strix aluco) – gatunek ptaka z rodziny …</p>
<h3>Puchacz zwyczajny</h3> <p>Puchacz zwyczajny, puchacz (Bubo bubo) – gatunek dużego, …</p>
<h3>Pójdźka zwyczajna</h3> <p>Pójdźka zwyczajna, pójdźka (Athene noctua) – gatunek …</p>
<h3>Sóweczka zwyczajna</h3> <p>Sóweczka zwyczajna, sóweczka (Glaucidium passerinum) ...</p>
</section><section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3> <p>Dzięcioł duży, dzięcioł pstry większy (Dendrocopos major) ...</p>
<h3>Dzięcioł średni</h3> <p>Dzięcioł średni (Dendrocoptes medius)[3] – gatunek średn ...</p>
<h3>Dzięciołek</h3> <p>Dzięciołek, dzięcioł mały (Dryobates minor ) – gatunek mał...</p>
<h3>Dzięcioł czarny</h3> <p>Dzięcioł czarny (Dryocopus martius) – gatunek średniej ...</p>
</section>
</main>
Krawędzie jako wycinek grafiki – przykład: efekt

Plik graficzny PNG z przezroczystym tłem, z którego są wycinane fragmenty na potrzeby tworzenia
krawędzi. Ma rozmiar 81px na 81px. 27 pikseli na 27 pikseli to rozmiar pojedynczego diamentu,
stąd takie właśnie liczby są używane w przykładzie – pozwalają wyciąć dokładnie 1 diament.
Szerokość, wysokość i przepełnienia 1/2
box-sizing – określa w jaki sposób przeglądarka ma wyliczać szerokość i wysokość elementu.
Najważniejsze wartości
content-box – to zachowanie domyślne przeglądarki - określa że przestrzeń jest liczona
względem miejsca na treść. Na przykład jeśli box-sizing ma wartość content-box i szerokość
elementu (width) została ustawiona na 100px, to dotyczy ona szerokości treści. Jeśli element ma
odstępy (padding) o rozmiarze 10px oraz krawędzie (border) o grubości 5px, to faktyczna
szerokość elementu wyniesie 100px+2*10px+2*5px.
border-box - oznacza że przy wyliczaniu szerokości i wysokości zostaną uwzględnione pełne
wymiary elementu, uwzględniające także krawędź (border) i odstępy (padding). Na przykład jeśli
box-sizing ma wartość border-box i element ma odstępy (padding) o rozmiarze 10px oraz
krawędzie (border) o grubości 5px, to cały rozmiar elementu będzie miał 100px a rozmiar treści w
elemencie wyniesie 100px-2*10px-2*5px.
width – określa szerokość elementów blokowych (ale nie elementów linii, wierszy tabel). Wartość
może być określona jako długość (np. px), procenty, auto.
min-width, max-width – analogiczne do width – pozwala określić dopuszczalny zakres szerokości
(przydatne w witrynach responsywnych).
height – określa wysokość elementów blokowych (ale nie elementów linii, wierszy tabel). Wartość
może być określona jako długość (np. px), procenty, auto.
min-height, max-height – analogiczne do height – pozwala określić dopuszczalny zakres szerokości
(przydatne w witrynach responsywnych).
Szerokość, wysokość i przepełnienia 2/2

overflow-x – instrukcje dla przeglądarki co zrobić, jeśli treść się nie mieści w założonym
obszarze. Przeglądarka może ukryć zawartość która się nie mieści, pokazać pasek przewijania
lub zignorować narzucone ograniczenie i wyświetlić zawartość. Właściwość overflow-x opisuje
reakcję na przepełnienie w poziomie.
overflow-y – działanie jak powyżej, ale dla przepełnienia w pionie.
overflow – skrócony zapis overflow-x i overflow-y. Jako wartość przyjmuje dwie wartości:
pierwsza to instrukcja overflow-x, drugi to overflow-y. Jeśli podano tylko jedną wartość,
oznacza to że instrukcja dla overflow-x i overflow-y jest taka sama.
Dopuszczalne wartości overflow-x, overflow-y i overflow:
visible – zawartość która się nie mieści jest po prostu wyświetlana
hidden – zawartość która się nie mieści, jest ukrywana. Twórca mógłby stworzyć skrypt i
mechanizm który pozwoli użytkownikowi wyświetlić niewidoczną treść.
clip – niedawno dodane do specyfikacji i jeszcze nie obsługiwane przez przeglądarki. To
samo co hidden, z tym że nie daje dostępu do ukrytych danych nawet za pomocą
interfejsu programistycznego
scroll – zawartość która się nie mieści jest ukrywana, ale przeglądarka wyświetla pasek
przewijania umożliwiający wyświetlenie ukrytej treści.
auto – przeglądarka sama wybiera tryb.
Przykład box-sizing - HTML
<nav>
<ul>
<li><a href="#sowy">Informacje o sowach</a></li> <!--link do kotwicy-->
<li><a href="#dzieciolowate">Informacje o dzięciołowatych</a></li>
</ul>
</nav>
<main>
<section id="sowy"> <!-- kotwica -->
<h2>Sowy</h2>
<h3>Puszczyk zwyczajny</h3> <p>Puszczyk (Strix aluco) – gatunek ptaka z rodziny …</p>
<h3>Puchacz zwyczajny</h3> <p>Puchacz zwyczajny, puchacz (Bubo bubo) – gatunek dużego, …</p>
<h3>Pójdźka zwyczajna</h3> <p>Pójdźka zwyczajna, pójdźka (Athene noctua) – gatunek …</p>
<h3>Sóweczka zwyczajna</h3> <p>Sóweczka zwyczajna, sóweczka (Glaucidium passerinum) ...</p>
</section><section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3> <p>Dzięcioł duży, dzięcioł pstry większy (Dendrocopos major) ...</p>
<h3>Dzięcioł średni</h3> <p>Dzięcioł średni (Dendrocoptes medius)[3] – gatunek średn ...</p>
<h3>Dzięciołek</h3> <p>Dzięciołek, dzięcioł mały (Dryobates minor ) – gatunek mał...</p>
<h3>Dzięcioł czarny</h3> <p>Dzięcioł czarny (Dryocopus martius) – gatunek średniej ...</p>
</section>
</main>
Przykład box-sizing - CSS
nav {/*kontener na nawigację*/
box-sizing: content-box; /*szerokość i wysokość liczona tylko dla treści. grubość krawędzi i
odstępy (padding) nie są uwzględnione */
background-color: greenyellow;/*kolor tła*/
width: 800px; /*szerokość elementu - tu szerokości treści*/
border: 10px solid darkgreen; /*krawędź o grubości 10px*/
padding: 5px; /*odstęp treści od krawędzi 5px z każdej strony*/
margin: 50px; /*margines od sąsiednich elementów - z każdej strony*/
}
main {/*kontenter na treść główną*/
box-sizing: border-box; /*szerokość i wysokość liczona z uwzględnieniem grubości krawędzi
oraz wymiarów odstępów (padding)*/
background-color: lime; /*kolor tła*/
width: 800px; /*szerokość - tu liczona względem wymiarów
krawędzi, tak więc jest to faktycznie szerokość krawędzi */
border: 10px solid darkgreen; /*krawędź o grubości 10px*/
padding: 5px; /*odstęp treści od krawędzi 5px z każdej strony*/
margin: 50px; /*margines od sąsiednich elementów - z każdej
strony*/
}
Przykład przepełnienia - HTML
<nav>
<ul>
<li><a href="#sowy">Informacje o sowach</a></li> <!--link do kotwicy-->
<li><a href="#dzieciolowate">Informacje o dzięciołowatych</a></li>
</ul>
</nav>
<main>
<section id="sowy"> <!-- kotwica -->
<h2>Sowy</h2>
<h3>Puszczyk zwyczajny</h3> <p>Puszczyk (Strix aluco) – gatunek ptaka z rodziny …</p>
<h3>Puchacz zwyczajny</h3> <p>Puchacz zwyczajny, puchacz (Bubo bubo) – gatunek dużego, …</p>
<h3>Pójdźka zwyczajna</h3> <p>Pójdźka zwyczajna, pójdźka (Athene noctua) – gatunek …</p>
<h3>Sóweczka zwyczajna</h3> <p>Sóweczka zwyczajna, sóweczka (Glaucidium passerinum) ...</p>
</section><section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3> <p>Dzięcioł duży, dzięcioł pstry większy (Dendrocopos major) ...</p>
<h3>Dzięcioł średni</h3> <p>Dzięcioł średni (Dendrocoptes medius)[3] – gatunek średn ...</p>
<h3>Dzięciołek</h3> <p>Dzięciołek, dzięcioł mały (Dryobates minor ) – gatunek mał...</p>
<h3>Dzięcioł czarny</h3> <p>Dzięcioł czarny (Dryocopus martius) – gatunek średniej ...</p>
</section>
</main>
Przykład przepełnienia - CSS
body, nav, ul, li, main, section, h2, h3, p { /*ustawienia dla kliku elementów*/
margin: 10px; /* marginesy*/ padding: 10px; /*odstęp*/ text-align: justify; /*justyfikacja*/ }
ul {/*kontener na listę*/ background-color: lightskyblue;/*kolor tła: niebieski*/ }
li {/*element listy*/ background-color: yellow; /*kolor żółty*/ }
h2 { /*nagłówki h2*/
width:300px; /*szerokość*/ height:40px;/*wysokość */background-color: coral;/*pomarańczowy*/}
h3 {/*nagłówki h3*/
background-color: aquamarine; max-width: 350px; /*szerokość nie większa niż*/ }
p { background-color: fuchsia; }
p:first-of-type { /*pierwszy akapit wewwnątrz rodzica*/
max-height: 20px; /*wysokość nie większa niż */
overflow: hidden; /*ukrywanie treści w x i y jeśli się nie mieści*/ }
p:nth-of-type(2) { /*drugi akapit wewwnątrz rodzica*/
max-height: 40px; /*wysokość nie większa niż */
overflow-y: scroll; /*przewijanie treści w pionie jeśli się nie mieści*/ }
p:nth-of-type(3) {/*trzeci akapit wewwnątrz rodzica*/
height: 50px; /*wysokość */ width: 50px; /*szerokość*/
overflow: scroll hidden; /*przewijanie treści w x i ukrywanie w y */}
p:nth-of-type(4) {/*czwarty akapit wewwnątrz rodzica*/
height: 10px; /*wysokość */
overflow: visible visible; /*wyświetlanie nie mieszczącej się treści w x i y*/ }
Przykład przepełnienia - efekt
Cieniowanie elementów blokowych

• Moduł CSS Backgrounds and Borders pozwala na nadawanie cienia elementom

blokowym.
• box-shadow: – definicje cieniów oddzielonych przecinkami (można zdefiniować
więcej niż 1 cień).
• Każdy cień jest opisywany za pomocą wartości oddzielonych spacjami:
odległość w poziomie od prawej krawędzi (lub lewej – jeśli ujemna),
odległość w pionie od dolnej krawędzi (lub górnej – jeśli ujemna) ,
promień rozmywania cienia (opcjonalny). Jeśli równy 0, to krawędź cienia jest
ostra.
promień rozmiaru (opcjonalny) – liczby dodatnie rozprzestrzeniają cień we
wszystkich kierunkach, liczby ujemne zmniejszają go. Domyślna wartość to 0: cień
będzie tego samego rozmiaru co element.
kolor,
inset – rzuca cień wewnątrz pudełka. Jeśli nie ustawiono inset, to – rzuca cień na
zewnętrz pudełka (domyślne zachowanie).
• Generator cieniów online: http://css3gen.com/box-shadow/.
Cienie – przykład: HTML
<nav>
<ul>
<li><a href="#sowy">Informacje o sowach</a></li> <!--link do kotwicy-->
<li><a href="#dzieciolowate">Informacje o dzięciołowatych</a></li>
</ul>
</nav>
<main>
<section id="sowy"> <!-- kotwica -->
<h2>Sowy</h2>
<h3>Puszczyk zwyczajny</h3> <p>Puszczyk (Strix aluco) – gatunek ptaka z rodziny …</p>
<h3>Puchacz zwyczajny</h3> <p>Puchacz zwyczajny, puchacz (Bubo bubo) – gatunek dużego, …</p>
<h3>Pójdźka zwyczajna</h3> <p>Pójdźka zwyczajna, pójdźka (Athene noctua) – gatunek …</p>
<h3>Sóweczka zwyczajna</h3> <p>Sóweczka zwyczajna, sóweczka (Glaucidium passerinum) ...</p>
</section><section id="dzieciolowate">
<h2>Dzieciołowate</h2>
<h3>Dzięcioł duży</h3> <p>Dzięcioł duży, dzięcioł pstry większy (Dendrocopos major) ...</p>
<h3>Dzięcioł średni</h3> <p>Dzięcioł średni (Dendrocoptes medius)[3] – gatunek średn ...</p>
<h3>Dzięciołek</h3> <p>Dzięciołek, dzięcioł mały (Dryobates minor ) – gatunek mał...</p>
<h3>Dzięcioł czarny</h3> <p>Dzięcioł czarny (Dryocopus martius) – gatunek średniej ...</p>
</section>
</main>
Cienie – przykład: CSS
body, nav, ul, li, main, section, h2, h3, p { /*ustawienia dla kliku elementów*/
margin: 30px; /* marginesy*/ padding: 10px; /*odstęp*/ text-align: justify; /*justyfikacja*/ }
ul {/*kontener na listę*/ background-color: lightskyblue;/*kolor tła: niebieski*/ }
li {/*element listy*/ background-color: yellow; /*kolor żółty*/ }
h2 { /*nagłówki h2*/
border:5px solid black;/*krawędzie*/ border-top-left-radius: 3rem 0.5rem; /*górny lewy róg */
border-top-right-radius: 1rem 3rem; /* górny prawy róg */
border-bottom-right-radius: 4rem 0.5rem; /* dolny prawy róg */
border-bottom-left-radius: 1rem 3rem; /* dolny lewy róg */ background-color: coral;
box-shadow: 20px 10px 5px rgba(0,0,0,0.4); /* cień: przesunięcie w poziomie: 20px, w pionie
10px, promień rozmycia 5px. kolor czarny z przezroczystością*/ }
h3 {/*nagłówki h3*/
background-color: aquamarine; border: 5px solid black; /*wszystkie krawędzie*/
box-shadow: 20px 10px 5px 5px rgba(0,0,0,0.4); /* cień jak dla h2, ale powiększony o 5px*/ }
p {
background-color: fuchsia; border-radius: 1rem;/*wszystkie rogi zaokrąglone - promien koła*/ }
p:first-of-type{ /*pierwszy akatpit w bloku*/
box-shadow: 20px 20px 10px rgba(0,0,0,0.4) inset; /* cień z przesunięciem 20px w pionie i
poziomie, o rozmyciu 10px, ale rzucany do wewnątrz elementu*/ }
p:nth-of-type(2){ /*drugi akapit w bloku*/
box-shadow: -20px -10px 5px rgba(0,0,0,0.4); /* cień: identyczny jak w h2, ale przez minusy
rzucany od prawego dolnego rogu*/}
Cienie – przykład: efekt
532 – Rogi: efekt
532 – Rogi

1. Pliki z poprzedniego ćwiczenia zapisz pod nazwami 532.html i 532.css. W pliku HTML
zmodyfikuj element <link> aby wskazywał na 532.css. Dodaj reguły dla poniższych klas:
2. .article_img – Ustaw typ wyświetlania (display) na block flow aby element zaczął
zachowywać się jak element blokowy. Następnie ustaw:
1. marginesy pionowe w rozmiarze 15px a marginesy poziome ustaw na auto, aby
wyśrodkować grafikę w ramach obszaru rodzica.
2. cień (box-shadow) w kolorze szarym (gray) z przesunięciem w poziomie: 20px, w
pionie 10px oraz promieniem rozmycia 15px.
3. Maksymalną szerokość (max-width) na 70vw, aby grafika skalowała się dla mniejszych
szerokości ekranu.
3. .article__h2 - ustaw zaokrąglanie rogów (border-radius) o promieniu 1rem oraz ustaw:
a. Kolor tła (background-color) na maroon a kolor tekstu na biały (white)
b. Ustaw szerokość (width) na 50% obszaru wyświetlania, to jest 50vw.
c. Odstęp od treści (padding) równy 1rem.
4. .aside – ustaw maksymalną szerokość (max-width) na 90vw oraz ustaw:
a. aby przy przepełnieniu (overflow) wyświetlane były paski przewijania (scroll scroll)
5. Przetestuj stronę w 2 przeglądarkach. Zmniejsz okno przeglądarki aby sprawdzić
zachowanie grafiki i tabeli dla małych ekranów. Sprawdź poprawność kodu CSS.
Listy w CSS 1/2
display: list-item tworzy miejsce na zawartość listy oraz na zawartość wyróżnienia konkretnej pozycji
listy.
Właściwości list pozwalają określić rodzaj wyróżnienia i pozycję elementów listy.
list-style-image ustawia obrazek który będzie działał jako wyróżnik pozycji w liście. Ma wyższy
priorytet niż list-style-type (nadpisuje go). Obrazek podaje się jako url,
Domyślna wartość: none – brak obrazka.
np. ul { list-style-image: url("obrazek.png") }.
list-style-position – pozycja wyróżnika
outside – wyróżnik pozycji listy znajduje się na zewnątrz bloku w którym znajdują się wartości listy
inside – wyróżnik pozycji listy znajduje się w tym samym bloku co wartości listy
inherit – dziedziczenie od rodzica
list-style zapis skrócony dla list-style-type list-style-position list-style-image
można podać 1,2 lub wszystkie 3 własności,
np. ul { list-style: upper-roman inside url(”obrazek.png”) }
Listy w CSS 2/2
list-display-style – rodzaj wyróżnika
disc – koło
circle – okrąg
square – kwadrat
decimal - Liczba dziesiętna (1, 2, 3 …)
decimal-leading-zero - liczba dziesiętna z zerami z przodu (01, 02, 03 …)
lower-roman – małe liczby rzymskie (i, ii, iii …)
upper-roman – duże liczby rzymskie (I, II, III …)
lower-greek – małe litery greckie (alfa, beta, gama …)
lower-latin – małe litery łacińskie (a, b, c …)
upper-latin – duże litery łacińskie (A,B, C …)
armenian – numerowanie armeńskie
georgian – numerowanie gruzińskie
lower-alpha – to samo co lower-latin
upper-alpha - to samo co upper-latin
none – brak wyróżnika
inherit – dziedziczenie od rodzica
Listy w CSS - przykład
<html><head><title>Tytuł strony</title><link rel="stylesheet" href="arkusz.css"
type="text/css" media="all" />
</head>
<body>
<ul>
<li>pierwszy element listy</li>
<li>drugi element listy</li>
<li>trzeci element listy</li>
</ul>
<ul class="lista2">
<li>pierwszy element listy</li>
<li>drugi element listy</li>
<li>trzeci element listy</li>
</ul>
</body>
</html>

ul { list-style: lower-greek inside; }

ul.lista2 { list-style: disc outside url(”obrazek.png”)}

ul { list-style: disc inside; }

ul.lista2 { list-style: disc outside; }
Pozycje elementów w dokumencie 1/2
• CSS definiuje 3 główne schematy pozycjonowania elementów na stronie:
Pozycjonowanie normalne – ułożenie elementu zależy od tego czy jest on elementem liniowym (wyświetlane
jeden obok drugiego) czy blokowym (wyświetlane jeden pod drugim)
Opływanie – element jest usuwany ze swojej normalnej pozycji i wyrównywany do lewej lub prawej strony
Pozycjonowanie absolutne – element jest całkowicie usuwany z normalnej pozycji i przypisywany do
konkretnych współrzędnych
• Dodatkowe warianty pozycjonowania uszczegóławiają możliwości oferowane przez 3 główne sposoby:
Pozycjonowanie względne – po tym, gdy pozycja elementu została określona przy użyciu pozycjonowania
normalnego lub opływania, do pozycji może być dodane przesunięcie wynikające z właściwości left, right, top,
bottom
Pozycjonowanie „sticky” – to połączenie pozycjonowania względnego i absolutnego. Element podlegający
takiemu pozycjonowaniu jest traktowany jak element w pozycjonowaniu względnym do chwili, gdy
przeglądarka natrafi na próg (na przykład w wyniku przewijania) zdefiniowany przez właściwości left, right,
top, bottom. W tym momencie element zachowuje się jak element pozycjonowany absolutnie i przeglądarka
będzie go wyświetlać w miejscu określonym przez ten nieprzekraczalny próg.
Pozycjonowanie „fixed” – to rozwinięcie pozycjonowania absolutnego, gdzie element pozostaje w tej samej
pozycji nawet przy przewijaniu ekranu (w pozycjonowaniu absolutnym podlega przewijaniu).
• Za wybór większości z powyższych sposobów pozycjonowania odpowiada właściwość position. Za opływanie
odpowiada właściwość float.
• Dostępne są także kontenery flex i grid które same podlegają zasadom pozycjonowania opisanym powyżej,
jednak dla elementów zawartych wewnątrz nich oferują dodatkowe opcje pozycjonowania nieosiągalne
powyższymi metodami. Szczegóły dotyczące kontenerów flex i grid poruszone zostaną w dalszej części kursu.
Pozycje elementów w dokumencie 2/2
• position może przyjmować następujące wartości:
static – pozycjonowanie normalne (top, right, bottom, left nie mają zastosowania). To jest domyślna wartość.
Elementy blokowe wyświetlane są jeden pod drugim, elementy liniowe jeden obok drugiego.
relative – miejsce elementu jest wyliczane tak jak w static, a następnie element jest przesuwany względem
wyliczonego miejsca (określone przez właściwości top, right, bottom, left),
absolute – pozycja elementu jest określana poprzez właściwości top, right, bottom, left.
W praktyce dość rzadko się używa pozycjonowania absolutnego w kontekście umieszczenia elementów
względem okna przeglądarki. Ciekawym często spotykanym rozwiązaniem jest absolutne pozycjonowanie
elementu będącego dzieckiem elementu pozycjonowanego względnie (position: relative). Wówczas
współrzędne pozycjonowania absolutnego nie odnoszą się do całego okna przeglądarki, a jedynie do
współrzędnych rodzica. Dzięki temu można wygodnie pozycjonować elementy wewnątrz takiego obiektu
rodzica, przy czym obiekt rodzica można wciąż pozycjonować względem innych elementów.
fixed – pozycja elementu jest wyliczana jak dla absolute i jest zablokowana – element nie zmieni pozycji nawet
przy przewijaniu dokumentu.
sticky – element jest pozycjonowany tak jak w pozycjonowaniu normalnym. Następnie przesunięcie (left,
right, top, bottom) jest wyliczane względem najbliższego przodka, który umożliwia przewijanie lub względem
głównego obszaru wyświetlania.
• top, right, bottom, left:
Używane tylko jeśli position jest inne niż static;
Określają odpowiednio odległość od górnego, prawego, dolnego i lewego marginesu. W zależności od
kontekstu punktem odniesienie może być rodzic, współrzędne wyliczone dla pozycjonowania normalnego lub
okno przeglądarki.
• Wartość może być podana jako długość, procent lub auto.
Opływanie

• Jeśli nie wystarczy miejsca, aby element opływający zmieścił się obok opływanego
zostanie wyświetlony pod spodem
• float
left – element przesunięty do lewej
right – element przesunięty do prawej
none – opływanie wyłączone
• clear
none – element może opływać elementy z ustawionym float
left – element NIE może opływać elementów z float: left
right – element NIE może opływać elementów z float: right
both – element NIE może opływać elementów z ustawionym float
• CSS 3 wprowadziło nowe modele wyświetlania display: flex, oraz display: grid w
których łatwiej osiągnąć założony układ witryny. W związku z czym popularność float
oraz display: inline-block systematycznie spada.
Opływanie - przykład
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" type="text/css" media="all" />
</head>
<body>
<img src="obrazek.png" />
<p>To jest tekst akapitu. To jest tekst akapitu. To jest tekst akapitu. </p>
</body>
</html>

body { width: 200px } body { width: 200px } body { width: 200px }

img { float: left } img { float: none } img { float: left }
p { clear: left}
542 – Opływanie: efekt
542 – Opływanie
1. Zapisz style.html pod nazwą 542.html. Stwórz nowy plik 542.css i dołącz go do html
modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color) na
snow, kolor tekstu (color) na black, marginesy na 0 (margin). odstęp treści (padding) na
połowę wysokości czcionki w elemencie html: 0.5rem
3. .lista--linki ustaw kolor tła na cornsilk;
4. .lista__li ustaw właściwość display na wartość inline – elementy listy będą wyświetlane w linii
zamiast w osobnych blokach.
5. .article ustaw krawędź o szerokości 1px jako linię ciągłą (solid) w kolorze brown;
6. .article::after ustaw sztuczkę clearfix: content: ""; clear: both; display: table; aby elementy
wewnątrz tej klasy wyrównywane za pomocą float nie wychodziły poza przewidziany obszar.
::after to pseudoelement który staje się ostatnim dzieckiem elementu.
7. .article__img ustaw opływanie z wyrównaniem (float) do prawej strony (right), szerokość
(width) na 50% i marginesy (margin) 20px.
8. .article__h2 ustaw opływanie z wyrównaniem (float) do lewej strony (left), szerokość
(width) na 50% i marginesy (margin) 20px.
9. Przetestuj stronę w 2 przeglądarkach zmieniając rozmiar okna. Spróbuj tymczasowo
usunąć sztuczkę clearfix. Jaki jest efekt?
10.Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Pozycje: porównanie – przykłady 1/2
<body>
<p>To jest początek akapitu. <span id="outer"> oto zewnętrzna treść
<span id="inner"> Oto wewnętrzna treść </span>
koniec zewnętrznej treści
</span>
Koniec akapitu
</p>
</body>
body { body {
display: block; font-size:14px; display: block; font-size:14px;
line-height: 200%; line-height: 200%;
width: 200px; height: 400px width: 200px; height: 400px
} }
p { display: block } p { display: block }
span { display: inline } span { display: inline }
#outer { color: red } #outer {
#inner { color: blue } position: relative;
top: -6px; color: red }
#inner {
position: relative;
top: 6px color: blue }
Pozycje: porównanie – przykłady 2/2
<body>
<p>To jest początek akapitu. <span id="outer"> oto zewnętrzna treść
<span id="inner"> Oto wewnętrzna treść </span>
koniec zewnętrznej treści
</span>
Koniec akapitu
</p>
</body>

body {
display: block; font-size:14px;
line-height: 200%;
width: 200px; height: 400px body {
} display: block; font-size:14px;
p { display: block } line-height: 200%;
span { display: inline } width: 200px; height: 400px }
#outer { color: red } p { display: block }
#inner { float: right; span { display: inline }
width: 70px; #outer { position: absolute;
color: blue top: 200px; left: 100px;
} width: 100px; color: red; }
#inner { color: blue }
552 – Pozycjonowanie względne, absolutne i sticky: efekt
552 – Pozycjonowanie względne, absolutne i sticky

1. Zapisz style.html pod nazwą 552.html. Stwórz nowy plik 552.css i dołącz go do
html modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color)
na snow, kolor tekstu (color) na black, marginesy na 0 (margin). odstęp treści
(padding) na połowę wysokości czcionki w elemencie html: 0.5rem
3. .lista--linki ustaw kolor tła (background-color) na cornsilk, pozycjonowanie
(position) na fixed, położenie na 10px od góry (top) i 10px od prawej strony
(right), maksymalną szerokość (max-width) na 150px oraz przezroczystość
(opacity) na 0.9.
4. .article ustaw krawędź o szerokości 1px jako linię ciągłą (solid) w kolorze brown;
5. .article__img ustaw szerokość (width) na 30%, pozycjonowanie (position)
względne (relative) i odległość od lewej strony (left) na 150px.
6. .article__h2 ustaw pozycjonowanie (position) na wartość sticky, maksymalną
szerokość (max-width) na 150px i kolor tła (bakcground-color) na lightgray.
7. Przetestuj stronę w 2 przeglądarkach. Co się dzieje przy przewijaniu w dół? Zmień
pozycjonowanie w .lista--linki z fixed na absolute. Co się zmieniło?
8. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Pozycje: warstwy
z-index –położenie w trzecim wymiarze (odległość od widza - im większa liczba tym bliżej widza –
domyślnie=0)
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="arkusz.css" media="all">
</head>
<body>
<img id="obrazek" class="stos" src="obrazek.png" />
<div id="tekst1" class="stos">Ten tekst jest na górze</div>
<div id="tekst2">Ten tekst będzie pod spodem wszystkiego</div>
<div id="tekst3" class="stos" >Ten tekst jest poniżej tekstu 1, ale powyżej obr</div>
</body>
</html>
.stos {
position: absolute; left: 20px; top: 20px;
width: 200px; height: 50px;font-size: 18px;
}
#obrazek {z-index: 1}
#tekst1 { z-index: 3; color: red;}
#tekst3 { z-index: 2; color: blue; position: relative;
top: -3px; }
Rozmieszczanie w kolumnach

• Pozwala podzielić tekst na kilka kolumn bez konieczności stosowania tabel

• column-count: liczba kolumn
• column-fill: jak wypełnić kolmny (balance: przeglądarka próbuje umieścić podobną
ilość tekstu)
• column-gap: przerwy między kolumnami
• column-rule-color: kolor prowadnicy między kolumnami
• column-rule-style: styl prowadnicy
• column-rule-width: szerokość prowadnicy
• column-rule: zapis skrócony właściwości prowadnicy
• column-span: pozwala połączyć ze sobą wszystkie kolumny (przydatne np. dla
nagłówków)
• column-width: szerokość kolumny
• column: zapis skrócony dla column-width i column-count
Rozmieszczanie w kolumnach: przykład
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Animacja</title>
<link href="h270.css" type="text/css" rel="stylesheet">
</head>
<body>
<p id="a1">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p id="a2">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</body>
</html>

#a1 {
column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;
column-gap: 50px; -moz-column-gap: 50px; -webkit-column-gap: 50px;
column-rule-color: red; -moz-column-rule-color: red; -webkit-column-rule-color: red;
column-rule-style:solid;-moz-column-rule-style:solid;-webkit-column-rule-style:solid;
column-rule-width:10px; -moz-column-rule-width:10px;-webkit-column-rule-width:10px;
}
562 – Kolumny: efekt
562 – Kolumny

1. Zapisz style.html pod nazwą 562.html. Stwórz nowy plik 562.css i dołącz go do
html modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color)
na snow, kolor tekstu (color) na black, marginesy (margin) i odstęp treści
(padding) na 0px
3. .tresc ustaw wyświetlanie w 2 kolumnach (column-count), z przerwą między
kolumnami (column-gap) 30px, kolor linii między kolumnami (column-rule-color)
w kolorze maroon, styl linii (column-rule-style) - double, grubość krawędzi
(column-rule-width): 5px
4. .article ustaw unikanie łamania elementu do kolejnej kolumny (page-break-inside:
avoid)
5. .article__img ustaw maksymalną szerokość (max-width) na 100%,
6. Przetestuj stronę w 2 przeglądarkach. Co się dzieje gdy usuniesz właściwość page-
break-inside?
7. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Elastyczne ułożenie elementów – kontener flex 1/2
• Rekomendacja W3C CSS Flexible Box Layout wprowadza 2 nowe wartości dla właściwości display: flex i inline-
flex
• Przy pozycjonowaniu elementów na stronie element z wartością flex zachowuje się jak element blokowy, inline-flex
zachowuje się jak element liniowy
• Wartości flex i inline-flex tworzą kontener, który pozwala na umieszczanie elementów (dzieci) w liniach (wierszach
lub kolumnach). Do ustalenia układu elementów służy szereg właściwości CSS. Najważniejsze właściwości
przedstawiono poniżej:
• flex-direction – określa jak elementy są umieszczane w kontenerze typu flex:
row – rozmieszczenie elementów wieszami, jeden obok drugiego.
row-reverse – tak samo jak row, ale w odwrotnej kolejności – od końca
column – rozmieszczenie elementów kolumnami, jeden pod drugim.
column-reverse – tak samo jak column, ale w odwrotnej kolejności – od dołu
• flex-wrap – określa czy elementy mają być rozkładane w wielu liniach (wierszach lub kolumnach), czy w jednej.
nowrap – wszystkie dzieci mają być rozmieszczone w jednej linii (wierszu lub kolumnie)
wrap – dzieci mogą być rozmieszczone w wielu liniach (wierszach lub kolumnach)
wrap-reverse – tak jak wrap, ale kolejność wyświetlania jest odwrócona.
• flex-flow - zapis skrócony dla powyższych wartości flex-direction i flex-wrap. Przyjmuje 1 (wartości takie jak dla
flex-direction) lub 2 argumenty (jedna wartość taka jak dla flex-direction, druga tak jak dla flex-wrap)
• order - właściwość dla dzieci elastycznego kontenera. Jako wartość przyjmuje liczbę. Pozwala zmieniać kolejność
wyświetlania w kontenerze – im mniejsza liczba, tym wcześniej dziecko zostanie wyświetlone.
Elastyczne ułożenie elementów – kontener flex 2/2
• flex - właściwość dla dzieci elastycznego kontenera. Skrócony zapis dla 3 poniższych właściwości
flex-grow, flex-shring i flex-basis. W tym wypadku W3C wyraźnie zaleca użycie zapisu
skróconego, co pozwoli uniknąć niespodziewanego zachowania gdyby autor przeoczył określenie
wartości dla jednej z 3 właściwości zapisanych w formie skróconej.
• flex-basis - właściwość dla dzieci elastycznego kontenera. ustawia preferowaną szerokość
elementu. Przyjmuje następujące wartości:
rozmiar - podany w jednostkach odległości, np. pikselach.
auto – automatycznie dobiera rozmiar wynikający z właściwości width, height
content – dobiera rozmiar w zależności od zawartości elementu
• flex-grow - właściwość dla dzieci elastycznego kontenera. Jeśli jest dostępna wolna przestrzeń,
to określa ile razy więcej miejsca w kontenerze dany element może zająć niż jego rodzeństwo. Dla
przykładu, jeśli w kontenerze mamy troje dzieci, wszystkie o rozmiarze flex-basis: 100px, dwoje
dzieci ma współczynnik flex-grow: 1, jedno dziecko ma współczynnik flex-grow: 2 i w kontenerze
została jeszcze wolna przestrzeń, to dziecko ze współczynnikiem 2 będzie miało 200px.
• flex-shrink: działa podobnie jak flex-grow, ale tutaj współczynnik określa pomniejszenie
elementu w przypadku gdyby w kontenerze zabrakło miejsca. Dla przykładu, jeśli w kontenerze
mamy troje dzieci, wszystkie o rozmiarze flex-basis: 100px, dwoje dzieci ma współczynnik flex-
shrink: 1, jedno dziecko ma współczynnik flex-shrink: 2 i w kontenerze zabrakło miejsca (ma
szerokość mniejszą niż 300px), to dziecko ze współczynnikiem 2 będzie miało 50px.
Elastyczne ułożenie elementów – kontener flex: justify-content
justify-content: - określa jak rozmieszczać wolną przestrzeń między dziećmi kontenera w linii (pozostałą po
ustaleniu wszystkich marginesów):
flex-start lub start – wypełnianie kontenera od początku i zostawienie wolnego miejsca na końcu linii
end lub flex-end – wypełnianie kontenera od końca i zostawienie wolnego miejsca na początku linii
center – ułożenie elementów na środku, obok siebie i zostawienie wolnego miejsca po bokach.
space-between – wolne miejsce jest równomiernie rozmieszczane pomiędzy elementami (ale nie przed
pierwszym i nie po ostatnim – one przylegają do krawędzi kontenera)
space-around – podobne do space-between, z tym że wolna przestrzeń rozmieszczana jest także przed
pierwszym elementem i za ostatnim elementem. W tym wypadku wolna przestrzeń przypadająca na dany
element jest dzielona na pół – jedna połowa jest wyświetlana z jednej strony elementu, druga połowa z drugiej
strony elementu
space-evenely – podobne do space-between, z tym że wolna przestrzeń rozmieszczana jest także przed
pierwszym elementem i za ostatnim elementem. W tym wypadku wszystkie wolne przestrzenie między
elementami mają jednakowy rozmiar.
left - wypełnianie kontenera od lewej i zostawienie wolnego miejsca po prawej
right - wypełnianie kontenera od prawej i zostawienie wolnego miejsca po lewej
normal – elementy są ustawiane, jak gdyby wartość właściwości nie została ustawiona.
safe – używanie w połączeniu z innymi wartościami powyżej (np. safe center). W przypadku gdyby miało dojść
do przepełnienia w wyniku którego część któregoś z elementów nie mogłaby być wyświetlona, to wówczas
zostanie użyte wyrównanie start.
unsafe - przeciwieństwo safe: nawet jeśli miałoby dojść do przepełnienia i obcięcia części treści, wyrównanie
zostanie wykonane zgodnie z wartością podaną po unsafe.
Elastyczne ułożenie elementów – justify-content
Wizualizacja niektórych wartości właściwości justify-content wg specyfikacji W3C – elementy są oznaczone kolorami,
wolna przestrzeń kolorem szarym.
 Elastyczne ułożenie elementów – align-items i align-self 1/2
• align-items i align-self– align items to właściwość kontenera elastycznego która ustawia align-self dla jego dzieci, align-
self to właściwość elementu (dziecka) w kontenerze. Przyjmują identyczne wartości i mają identyczne działanie, z tym, że
pierwsza właściwość dotyczy całego kontenera, a druga właściwość opisuje zachowanie danego dziecka w kontenerze.
Właściwości określają jak wyrównywać elementy (dzieci), gdy nie zajmują całej dostępnej dla nich przestrzeni w linii w
kierunku prostopadłym (czyli gdy element nie zajmuje całej wysokości wiersza albo gdy nie zajmuje całej szerokości
kolumny):
auto – dziedziczenie od rodzica
flex-start lub start lub self-start - wyrównanie do początku linii (dla języka polskiego do góry przy rozmieszczaniu
wierszami, do lewej strony przy rozmieszczaniu kolumnami)
flex-end lub end lub self-end – wyrównanie od końca linii (dla języka polskiego do dołu przy rozmieszczaniu wierszami,
do prawej strony przy rozmieszczaniu kolumnami)
center – ułożenie elementów na środku
stretch lub normal – rozciąganie elementów by dopasować ich rozmiar do kontenera
safe – używanie w połączeniu z innymi wartościami powyżej (np. safe center). W przypadku gdyby miało dojść do
przepełnienia w wyniku którego część któregoś z elementów nie mogłaby być wyświetlona, to wówczas zostanie użyte
wyrównanie start.
unsafe - przeciwieństwo safe: nawet jeśli miałoby dojść do przepełnienia i obcięcia części treści, wyrównanie zostanie
wykonane zgodnie z wartością podaną po unsafe.
baseline, first baseline, last baseline – wyrównanie do odpowiedniej linii bazowej: linia bazowa elementu jest
wyrównywana z linią bazową całej grupy, do której element należy. baseline lub first baseline oznaczają pierwszą linię
bazową, last baseline oznacza ostatnią linię bazową. Linia bazowa to linia, w której jest wyświetlany tekst (oznaczona
czerwony kolorem na poniższym przykładzie).
Elastyczne ułożenie elementów – align-items i align-self 2/2

• Wizualizacja niektórych wartości właściwości align-items i align-self wg specyfikacji

W3C – elementy są oznaczone kolorami, wolna przestrzeń kolorem szarym.
Elastyczne ułożenie elementów – align-content

• align-content - działa w sposób podobny do justify-content, ale dotyczy całych linii, a nie
pojedynczych elementów (dzieci). jak układać linie w kontenerze, jeśli jest w nim wiele linii i
pozostaje wolna przestrzeń. Wartości przyjmuje takie jak justify-content.
Wizualizacja niektórych wartości właściwości align-content wg specyfikacji W3C – elementy
są oznaczone kolorami, wolna przestrzeń kolorem szarym.
Elastyczny kontener – przykład: HTML
<body>
<main>
<article>
<h1>Bocian Biały</h1>
<img src="https://upload.wikimedia.org/wikiped..." alt="Bocian biały">
<p>Gatunek dużego ptaka brodzącego z rodziny bocianów (Ciconiidae)</p>
</article>
<article class="wazne">
<h1>Bocian czarny</h1>
<img src="https://upload.wikimedia.org/wikiped... " alt="Bocian czarny">
<p>Gwarowo: hajstra (Ciconia nigra) – gatunek dużego ptaka ...</p>
</article>
<article>
<h1>Bocian czaronodzioby</h1>
<img src="https://upload.wikimedia.org/wi..." alt="Bocian czarnodzioby">
<p>Bocian czarnodzioby (Ciconia boyciana) – gatunek dużego ...</p>
<p>Od bociana białego różni się czarnym dziobem i czerwoną ...</p>
</article>
<!-- i tak dalej ...-->
</main>
</body>
Elastyczny kontener – przykład: CSS
html { font-size: 14px; /*rozmiar czcionki*/ }
main {
display: flex; /* stworzenie kontenera flex - dzieci main podlegają układaniu liniami*/
flex-direction:row;/*układanie wierszami*/flex-wrap:wrap;/*dopuszczalnych jest wiele wierszy*/
justify-content: space-between; /*gdyby zostało wolne miejsce w poziomie między dziećmi, to
rozłożenie tego miejsca równo między dziećmi*/
align-items: stretch; /*jeśli wymiary dzieci w pionie nie są równe, to rozciągnięcie
elementów, aby wszystkie dzieci w wierszu miały taką samą wysokość*/
align-content: flex-start; /*wyrównanie treści elementów do góry*/
border: 1px solid black; /*krawędź*/ padding: 10px; /*odstępy*/
margin: 10px auto; /*marginesy pionowe 10px, poziome automatyczne, czyli wyśrodkowanie*/ }
article {
flex: 1 1 25vw; /*ustawia kolejno flex-grow (możliwość powiększania wymiaru) - współczynnik 1
(nie powiększa wymiaru), flex-shink (możliwość pomniejszania) - współczynnik 1 – nie pomniejsza
wymiaru, oraz flex-basis (rozmiar pożądany) - 25vw to będzie 25% szerokości okna przeglądarki*/
border: 1px dotted darkblue; /*krawędź*/
min-width: 280px; /*szerokość co najmniej 280px */ padding: 10px; /*odstępy*/ }
.wazne {
flex: 2 1 40vw; /*jeśli miejsce pozwala, to ten element może być 2 razy szerszy niż
rodzeństwo, nie powinien być pomniejszany, a jego pożądana szerokość to 40% okna przeglądarki*/
order: -1; /*ten element będzie wyświetlany przed wszystkimi innymi*/ }
img { width: 20vw; /*grafika powinna mieć szerokość równą 20% szerokości przeglądarki*/ }
Elastyczny kontener – przykład: efekt

Efekt dla dużego ekranu (1280px) Efekt dla Galaxy S9 (360px x740px)

Efekt dla iPada. (1024pxx768px)

572 – Elastyczny kontener: efekt
572 – Elastyczny kontener
1. Zapisz style.html pod nazwą 572.html. Stwórz nowy plik 572.css i dołącz go do html
modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color) na
snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na 0px
3. .lista__li ustaw typ wyświetlania (display) jako block oraz marginesy (margin) 5px
4. .lista--linki ustaw typ wyświetlania (display) jako elastyczny kontener (flex). Zezwól na
wiele linii (flex-wrap: wrap), wyświetlanie wierszami (flex-direction: row), wyrównywanie
wolnego miejsca (justify-content) na space-around, kolor tła na yellow
5. .tresc ustaw typ wyświetlania (display) jako elastyczny kontener (flex), zezwól na wiele linii
(flex-wrap: wrap), wyświetlanie wierszami (flex-direction: row), wyrównywanie wolnego
miejsca (justify-content) na space-between, marginesy (margin) i odstępy (padding) na 0.
6. .article ustaw krawędzie lewą i prawą (border-left, border-right) 1px, linia ciągła (solid),
kolor brown. Ustaw marginesy (margin) na 0px, a odstęp treści (padding) na 10px; Ustaw
minimalną szerokość (min-width) na 150px a maksymalną szerokość (max-width) wylicz
wyrażeniem calc(33% - 22px) - od dostępnej szerokości zostaną odjęte 22px.
7. .article__h2 ustaw kolor tła na brown a kolor tekstu na white.
8. .article__img ustaw maksymalną szerokość (max-width) na 100%;
9. .aside ustaw pojawianie się pasków przewijania gdy treść się nie mieści: overflow: scroll
10.Przetestuj stronę w 2 przeglądarkach zmieniając rozmiar okna i sprawdź poprawność
Siatka grid 1/3
• Rekomendacja kandydacka CSS Grid Layout Module wprowadza 2 nowe wartości dla właściwości
display: grid i inline-grid
• Przy pozycjonowaniu elementów na stronie, element z wartością display: grid zachowuje się jak
element blokowy, a z wartością inline-grid zachowuje się jak element liniowy
• Wartości grid i inline-grid tworzą kontener, który pozwala na umieszczanie elementów (dzieci) w
dwuwymiarowej siatce składającej się z wierszy i kolumn.
• Różnica pomiędzy flex i grid polega na tym, że flex rozmieszcza elementy w jednowymiarowej linii, a
grid w dwuwymiarowej siatce.
• W flex, gdy brak miejsca na wyświetlenie kolejnych elementów, to są one po prostu
przenoszone do kolejnej linii.
• W grid, elementy są umieszczane w dwuwymiarowej siatce, dzięki czemu można wyświetlać
elementy obejmujące kilka linii/kolumn czy wyrównać elementy w ramach tej samej kolumny.

Przykład układu elementów flex trudny do osiągnięcia w Przykład układu elementów grid trudny do osiągniecia
kontenerach grid w kontenerach flex
Siatka grid 2/3

• Grid umożliwia precyzyjne ustawianie elementów w siatce. W połączeniu z

możliwościami rekomendacji CSS Media Queries umożliwia bardzo wygodne
tworzenie responsywnego wyglądu dokumentu, dostosowanego do różnych
rozdzielczości.
• Kontener grid to siatka składająca się z numerowanych wierszy i kolum. Wiersze i
kolumny są rozdzielone numerowanymi liniami. O ilości wierszy i kolumn decyduje
twórca witryny używając odpowiednich właściwości CSS. Poniższy przykład siatki
składa się z 3 wierszy (między 4-ma liniami) i 2 kolumn (między 3-ma liniami):
Siatka grid 3/3
• Wymiary kolumn i wierszy można ustawiać używając jednostek odległości (np. piksele), procentów lub
jednostek względnych fr.
• Wartość liczbowa jednostki fr jest wyliczana przez przeglądarkę: Dostępna przestrzeń jest dzielona
przez liczbę potrzebnych jednostek fr wskazanych w kodzie CSS i w ten sposób wiadomo ile wynosi 1fr.
• Najmniejsza jednostka w siatce, w której można umieścić element, to komórka siatki (przecięcie wiersza i
kolumny). Można umieścić element tak, by zajmował wiele komórek.
• Poszczególnym wierszom i kolumnom można nadawać nazwy.
• Sąsiadujące komórki w siatce można grupować i nadawać im nazwy. Nazwana grupa może składać się także
z tylko jednej komórki.
• Położenie elementu w siatce można wskazywać podając numery wierszy/kolumn, nazwy wierszy/kolumn
lub nazwy obszarów.
• Można wskazać dokładną budowę siatki, ale przeglądarka może dodać dodatkowe wiersze i kolumny, jeśli
wymiary siatki nie pasują do ilości elementów w siatce wynikających z kodu HTML.
• Można określić wyrównanie poszczególnych elementów w siatce.
• Jeśli elementy siatki na siebie nachodzą (na przykład z powodu marginesów), to podobnie jak w
pozycjonowaniu absolutnym da się określić bliskość widza używając właściwości z-index.
• Podobnie jak w kontenerach flex, w kontenerach grid można zmieniać kolejność wyświetlania dzieci - służy
do tego właściwość order.
Definiowanie układu siatki 1/3
Właściwości grid-template-columns oraz grid-template-rows służą do definiowania kolumn i wierszy w siatce.
Przyjmują dowolną liczbę argumentów oddzielonych spacjami. Argumenty oznaczają wymiary kolumn (dla grid-
template-columns) lub wierszy (dla grid-template-rows).
Istnieje kilka typów argumentów, jakich można użyć do zdefiniowania wierszy i kolumn. Dostępne możliwości:
Automatyczny algorytm podziału kontenera na siatkę - auto.
Wskazanie wymiarów w jednostkach odległości (np. piksele)
Wskazanie wymiarów w procentach (względem wymiarów siatki)
Wskazanie wymiarów w jednostkach względnych fr (przeglądarka zlicza liczbę fr użytych w danym wierszu /
kolumnie i znając rozmiar dostępnego miejsca wylicza wartość 1fr dla danego wiersza czy kolumny). Przydatne
jeśli dla części kolumn wskazujemy konkretny rozmiar, a dla reszty chcemy użyć pozostałe wolne miejsce.
min-content – najmniejszy rozmiar treści w danym wierszu/kolumnie (to jest taki, który nie prowadzi do
przepełnienia w żadnym z elementów przypisanych do danego wiersza/kolumny)
max-content – największy rozmiar treści w danym wierszu/kolumnie.
Funkcja fit-content(rozmiar w procentach) – tworzy wiersz/kolumnę w rozmiarze podanym jako argument,
chyba że zawartość nie mieści się w komórce siatki – wówczas rozmiar zostanie dobrany tak, aby zmieścić
treść.
Funkcja repeat(liczba powtórzeń, układ do powtórzenia) – powtarza dany układ zdefiniowaną liczbę razy,
co jest pomocne przy bardziej rozbudowanych układach siatki. Jako liczbę powtórzeń można użyć słów auto-
fill lub auto-fit. Generują one tyle kolumn, ile uda się zmieścić bez generowania przepełnienia. Różnica miedzy
auto-fill i auto-fit jest taka, że auto-fit ukrywa puste wiersze i kolumny a auto-fill je pokazuje.
Funkcja minmax(minimum, maximum) – wskazuje dozwolony zakres rozmiaru, w jakim ma się mieścić dany
wiersz/kolumna.
Definiowanie układu siatki 2/3

Wiersze i kolumny automatycznie otrzymują numery (numeracja rozpoczyna się od

1), ale mogą także być także nazywane. Nazwy wierszy i kolumn podaje się w
nawiasach kwadratowych, np. [nazwa] przed podaniem rozmiaru danego
wiersza/kolumny.
Komórki siatki można grupować w prostokątne obszary. Służy do tego właściwość
grid-template-areas, do której wartości zapisuje się w następujący sposób:
Każdy wiersz siatki jest opisany ciągiem znaków zamkniętym w znakach
cudzysłów.
Opisy wierszy są od siebie oddzielone spacjami/enterami. Opisów wierszy być
tyle, ile jest wierszy w siatce.
Wewnątrz znaków cudzysłowu znajdują się nazwy obszarów oddzielone spacjami.
Nazw obszarów w danym wierszu, musi być tyle, ile kolumn ma siatka.
Jeśli dana komórka nie należy do żadnego obszaru, to jako nazwy obszaru należy
użyć kropki – wówczas taka komórka nie zostanie przypisana do żadnego obszaru.
Właściwość grid to skrócony zapis, którym można ustawić właściwości grid-template-
rows, grid-template-columns, i grid-template-areas.
Definiowanie układu siatki 3/3

Siatka w całości (brak definicji) lub częściowo (powyższe definicje nie wystarczają by
rozmieścić w kontenerze wszystkie jego dzieci) może być generowana automatycznie
na podstawie zawartości. Wówczas przydatne są następujące właściwości:
grid-auto-columns – określenie wymiarów kolumn
grid-auto-rows – określenie wymiarów wierszy
grid-auto-flow – wskazanie jak ma zachowywać się algorytm tworzący siatkę
automatycznie:
row – dokładanie do siatki wierszy (tak siatka działa domyślnie)
colum – dokładanie do siatki kolumn
dense – słowo kluczowe występujące przed row lub column, które oznacza że
przed dokładaniem dodatkowych wierszy lub kolumn, algorytm ma wypełnić
elementami ewentualne wolne miejsca w siatce nie wypełnione jeszcze przez
żadne elementy.
Przykłady definicji siatek - HTML
<body>
<main>
<article>
<h2>Jeden</h2>
</article>
<article class="wazne">
<h2>Dwa</h2>
</article>
<article>
<h2>Trzy</h2>
</article>
<article>
<h2>Cztery</h2>
</article>
<!-- i tak dalej ...-->
<article>
<h2>Piętnaście</h2>
</article>
</main>
</body>
Przykłady definicji siatek – CSS 1/7
brak siatki
main { siatka automatyczna
background-color: lightgoldenrodyellow; (domyślnie elementy rozłożone w wierszach)
border: 1px solid blue; main {
} background-color: lightgoldenrodyellow;
article { border: 1px solid blue;
background-color: lightcyan; display: grid;
border: 1px solid black; }
}
Przykłady definicji siatek – CSS 2/7

siatka automatyczna – elementy rozłożone w kolumnach

siatka automatyczna
main { (domyślnie elementy rozłożone w wierszach)
background-color: lightgoldenrodyellow;
border: 1px solid blue;
display: grid; /*stworzenie siatki*/
grid-auto-flow: column; /*rozłożenie elementów
kolumnami*/
}
article {
background-color: lightcyan;
border: 1px solid black;
}
Przykłady definicji siatek – CSS 3/7
Siatka z trzema kolumnami, reszta automatyczna Ta sama siatka, ale kolumny zostały nazwane
main { main {
background-color: lightgoldenrodyellow; background-color: lightgoldenrodyellow;
border: 1px solid blue; border: 1px solid rgb(191, 191, 233);
display: grid; display: grid;
grid-template-columns: 20% 40% 20%; grid-template-columns: [pierwsza] 20% [druga]
40% [trzecia] 20%; /* trzy kolumny – ich
/* trzy kolumny – ich rozmiar podany w % */ rozmiar podany w procentach. Kolumny zostały
} nazwane: pierwsza, druga, trzecia - co umożliwi
ich łatwiejsze używanie w czasie przypisywania
article { pozycji elementom wewnątrz siatki */
background-color: lightcyan; }
border: 1px solid black; article {
} background-color: lightcyan;
border: 1px solid black; }
Przykłady definicji siatek – CSS 4/7
Siatka z czterema kolumnami z wykorzystaniem jednostek fr
main {
background-color: lightgoldenrodyellow;
border: 1px solid blue;
display: grid;
grid-template-columns: 300px 2fr 1fr 1fr;
/* cztery kolumny - rozmiar pierwszej kolumny jest podany w pikselach. Pozostała wolna
przestrzeń jest dzielona przez 4 (2+1+1). Stąd druga kolumna zajmie połowę wolnej
przestrzeni (2/4) a trzecia i czwarta kolumna po 1/4 wolnej przestrzeni */
}
article {
background-color: lightcyan;
border: 1px solid black;
}
Przykłady definicji siatek – CSS 5/7
Siatka z 8 kolumnami wygenerowanymi funkcją repeat
main {
background-color: lightgoldenrodyellow;
border: 1px solid blue;
display: grid;
grid-template-columns: 90px repeat(4, 2fr 1fr) /* Pierwsza kolumna ma 90px, a resztę kolumn
generuje funkcja repeat: 4 to liczba powtórzeń układu po przecinku, w efekcie zostanie
wygenerowany zapis 2fr 1fr 2fr f1r 2fr 1fr 2fr 1fr. */
}
article {
background-color: lightcyan;
border: 1px solid black;
}
Przykłady definicji siatek – CSS 6/7
Siatka z określonym zakresem wysokości wiersza:
main {
background-color: lightgoldenrodyellow;
border: 1px solid blue;
display: grid;
grid-template-columns: repeat(3, 1fr); /* repeat stworzy 3 równe kolumny */
grid-auto-rows: minmax(100px, auto); /*wiersze mają mieć rozmiar co najmniej 100px, a co
najwyżej rozmiar auto - czyli jeśli treść w danym wierszu jest większa niż 100px, to ten
wiersz będzie wyższy*/
}
article {
background-color: lightcyan;
border: 1px solid black;
}
Przykłady definicji siatek – CSS 7/7
Siatka z nazwanymi obszarami
background-color: lightgoldenrodyellow;
border: 1px solid rgb(191, 191, 233);
display: grid;
grid-template-columns: repeat(3, 1fr); /* repeat stworzy 3 równe kolumny */
/*stworzenie i nazwanie obszarów w siatce. Ułatwia to poźniejsze wskazywanie w którym
obszarze (lub komórce) ma się wyświetlić dane dziecko siatki. Komórki w pierwszym wierszu
tworzą obszar naglowek", 4 komórki tworzą obszar tresc1, 3 komórki tworzą obszar tresc2, 2
komórki nie są nazwane/przypisane do żadnego obszaru, i trzy komórki tworzą obszar stopka*/
grid-template-areas: "naglowek naglowek naglowek"
"tresc1 tresc1 tresc2"
"tresc1 tresc1 tresc2"
". . tresc2"
"stopka stopkpa stopka"
}
article {
background-color: lightcyan;
border: 1px solid black;
}
Wskazywanie elementom pozycji w siatce
• Gdy w kontenerze grid zdefiniujemy układ siatki, dzieciom kontenera możemy wskazać położenie w siatce. Służą do
tego następujące właściwości:
grid-column-start – określenie linii kolumny, od której rozpocząć wyświetlanie elementu (np. kolumna 1 znajduje się
pomiędzy liniami 1 i 2)
grid-column-end – określenie linii kolumny na której zakończyć wyświetlanie elementu (np. kolumna 1 znajduje się
pomiędzy liniami 1 i2)
grid-row-start – określenie linii wiersza od którego rozpocząć wyświetlanie elementu (np. wiersz 1 znajduje się
pomiędzy liniami 1 i 2)
grid-row-end – określenie linii wiersza na którym zakończyć wyświetlanie elementu np. wiersz 1 znajduje się
pomiędzy liniami 1 i 2)
grid-column – zapis skrócony dla grid-column-start i grid-column-end. Obie wartości rozdziela się ukośnikiem /
grid-row – zapis skrócony dla grid-row-start i grid-row-end. Obie wartości rozdziela się ukośnikiem /
grid-area – zapis skrócony dla grid-row start grid-column-start grid-row-end i grid-column-end. Cztery wartości
oddziela się trzema ukośnikami.
• Do powyższych właściwości można zapisać następujące wartości:
auto – rozmieszczenie standardowe, wynikające z miejsca w kodzie HTML.
numer kolumny/wiersza, od którego rozpocząć wyświetlanie elementu (grid-column-start/grid-row-start) lub na
którym zakończyć wyświetlanie elementu (grid-column-end/grid-row-end). Przy wskazaniu liczby ujemnej liczenie
odbywa się od końca.
nazwę nadaną kolumnie/wierszowi
słowo span po którym podana jest liczba oznaczająca na ile wierszy lub kolumn ma się rozciągać element (a nie
numer wiersza lub kolumny).
obszar (zdefiniowany wcześniej przez grid-template-area) w którym wyświetlić element.
Przykłady wskazywania pozycji w siatce - HTML
<body>
<main>
<article>
<h2>Jeden</h2>
</article>
<article class="wazne">
<h2>Dwa</h2>
</article>
<article>
<h2>Trzy</h2>
</article>
<article>
<h2>Cztery</h2>
</article>
<!-- i tak dalej ...-->
<article>
<h2>Piętnaście</h2>
</article>
</main>
</body>
Wskazanie pozycji wybranych elementów przez numer linii
main {background-color: lightgoldenrodyellow; border: 1px solid blue; display: grid;
grid-template-columns:repeat(3,1fr 2fr);/*stworzenie 6ciu kolumn:powtórzenie 3x wymiarów 1fr 2fr*/
grid-template-rows: repeat(5, minmax(50px,max-content)); /*stworzenie 5ciu wierszy o wysokości co
najmniej 50px ale nie większych niż największy rozmiar elementu w danym wierszu*/}
article { background-color: lightcyan; border: 1px solid black; }
article:nth-of-type(15){ /*15ty element article*/
grid-column-start: 5; /*rozpoczyna się od linii 5*/ grid-column-end:6; /* kończy na linii 6, czyli
jest w kolumnie 5*/
grid-row-start: 2; /*ma się wyświetlać od linii 2*/
grid-row-end: 5; /*ma się wyświetlać od linii 5 - czyli w wierszach 2,3,4*/ }
article:nth-of-type(14){ /*14ty element article*/
grid-column: 3 / 4; /*zapis skrócony kolumn: ma się rozpoczynać od linii 3 a kończyć w linii 4 -
czyli kolumna 3*/
grid-row-start: 1; /*ma się rozpoczynać w linii 1 a kończyć w linii 6, czyli rozpoczyna się w
wierszu 1 a końcy w wierszu 5*/ grid-row-end: 6; }
article:nth-of-type(13){ /*element 13ty*/
grid-column-start: 4;/*ma się zaczynać od linii 4 a kończyć w linii 7,czyli kolumny 4,5 i 6*/
grid-column-end: 7; grid-row: 5; /*zapis skrócony: ma się wyświetlać do linii 5. Skoro brak
drugiego argumentu, to przyglądarka przyjmie że ma to być szerokość 1 wiersza*/}
article:nth-of-type(12){
grid-column: 2; /*zapis skrócony: ma się wyświetlać od linii 2 (czyli kolumna 2). Skoro brak
informacji o drugim argumencie, to przeglądarka przyjmie, że szerokość to 1 kolumna*/
grid-row: 5; /*zapis skrócony, ma się wyświetlać od linii numer 5, czyli w piątym wierszu. Skoro
brak drugiego argumentu, to przeglądarka przyjmie, że ma to być wysokość 1 wiersza*/}
article:nth-of-type(11){ /*11 ty element */
grid-column: 1; /*ma się wyświetlać w pierwszej kolumnie i 4tym wierszu*/ grid-row: 4;}
Wskazanie pozycji wybranych elementów przez numer linii - efekt
Wskazanie pozycji poprzez grid-area i span
main { background-color: lightgoldenrodyellow; border: 1px solid blue;
display: grid;
grid-template-columns: repeat(3, 1fr 2fr); /* stworzenie 6ciu kolumn: powtórzenie 3 razy
wymiarów 1fr 2fr*/
grid-template-rows: repeat(5, minmax(50px,max-content)); /*stworzenie 5ciu wierszy o
wysokości co najmniej 50px ale nie większych niż największy rozmiar elementu w danym wierszu*/
}
article { background-color: lightcyan; border: 1px solid black; }
article:nth-of-type(15){ /*15ty element article*/
grid-area: 1 / 5 / 5 / 6; /*zapis skrócony właściwości poniżej w kolejności linia wiersza
początkowa, linia kolumny początkowa, linia wiersza końcowa, linia kolumny końcowa */
/*grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 5; */
}
article:nth-of-type(14){ /*14ty element article*/
grid-column: 1 / -1; /*zapis skrócony - element ma być wyświetlany od pierwszej linii
kolumny, do pierwszej linii kolumny licznonej od końca (znak – oznacza liczenie od końca) -
czyli przez całą szerokość siatki */
grid-row: 4 / span 2; /*wyświetlanie rozpoczyna się od 4 linii i ciągnie się przez 2 wiersze
– czyli czwarty i piąty wiersz */
}
Wskazanie pozycji poprzez nazwane wiersze
main {
background-color: lightgoldenrodyellow;
border: 1px solid blue; display: grid;
grid-template-columns: repeat(3, 1fr 2fr); /* stworzenie 6ciu kolumn: powtórzenie 3 razy
wymiarów 1fr 2fr*/
/*stworzenie nazwanych wierszy*/
grid-template-rows: [wiersz1] 1fr [wiersz2] 1fr [wiersz3] 1fr [wiersz4] 1fr [wiersz5] 1fr;
}
article { background-color: lightcyan; border: 1px solid black; }
article:nth-of-type(15){ /*15ty element article*/
grid-area: wiersz1 / 5 / wiersz5 / 6; /*zapis skrócony właściwosci poniżej w kolejności
nazwany wiersz początkowy, linia kolumny początkowa, nazwa wiersza końcowa, linia kolumny
końcowa */
/*grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 5; */
}
article:nth-of-type(14){ /*15ty element article*/
grid-column: 1 / -1; /*zapis skrócony - element ma byćwyświetlany od pierwszej linii kolumny
do pierwszej linii kolumny od końca (-1 - liczy od końca) - czyli przez całą szerokosć */
grid-row: wiersz5; /*wyświetlanie w piątym wierszu*/ }
Wskazanie pozycji poprzez nazwane obszary
main { background-color: lightgoldenrodyellow; border: 1px solid blue; display: grid;
grid-template-columns: repeat(3, 1fr 2fr); /* stworzenie 6ciu kolumn: */
grid-template-rows: 1fr 1fr 1fr 1fr 1fr; /*stworzenie wierszy*/
grid-template-areas: /*stworzenie nazwanych obszarów*/
"lewa naglowek naglowek naglowek naglowek prawa"
"lewa obszar1 obszar1 . . prawa"
"lewa obszar1 obszar1 . obszar2 prawa"
"lewa . obszar3 . obszar2 prawa"
"lewa . obszar3 . . prawa"
"lewa stopka stopka stopka stopka prawa"
}
article { background-color: lightcyan; border: 1px solid black;}
/*przypisanie artykułów do poszczególnych obszarów. nieprzypisane artykuly trafią w pierwsze
wolne mijesce*/
article:nth-of-type(15) { grid-area: lewa; }
article:nth-of-type(14) { grid-area: prawa; }
article:nth-of-type(13) { grid-area: naglowek; }
article:nth-of-type(12) { grid-area: stopka; }
article:nth-of-type(11) { grid-area: obszar1; }
article:nth-of-type(10) { grid-area: obszar2; }
article:nth-of-type(9) { grid-area: obszar3; }
Wyrównanie i przerwy w siatce 1/2

Siatka umożliwia kontrolowanie przerw pomiędzy wierszami i kolumnami. Służą do tego

właściwości: column-gap (przerwa między kolumnami), row-gap (przerwa między wierszami)
oraz gap (skrócony zapis dla dwóch poprzednich przyjmujący dwie wartości). Jako wartość
przyjmują odległość lub procenty (liczone względem wymiaru elementu). Dla starszych
przeglądarek można użyć właściwości grid-column-gap, grid-row-gap i grid-gap.
Do wyrównywania elementów służy szereg właściwości:
justify-content jest przydatne gdy obszar w którym wyświetlana jest siatka, jest większy
od rozmiaru siatki (pozostaje wolne miejsce): wówczas można wyrównać siatkę w linii
wiersza (np. do lewej, do prawej).
align-content jest przydatne gdy obszar w którym wyświetlana jest siatka jest większy od
rozmiaru siatki (pozostaje wolne miejsce). Wówczas można wyrównać siatkę w linii
kolumn (np. do góry, do dołu)
justify-items służy do wyrównywania elementów siatki w linii wiersza (np. do lewej,
do prawej). Dla pojedynczego elementu dziecka w siatce można użyć justify-self.
align-items służy do wyrównywania elementów siatki w linii kolumny (np. w górę, w
dół). Dla pojedynczego elementu dziecka można użyć align-self.
Wyrównanie i przerwy w siatce 2/2

Poniższy przykład zaczerpnięty ze specyfikacji W3C CSS Box Aligment Module

przedstawia do czego mogą być przydatne poszczególne właściwości.
justify-content
Poniżej przedstawione są ważniejsze wartości justify-content która określa co przeglądarka robi z wolnym miejscem,
jeśli takie zostanie po umieszczeniu w siatce elementów.
start – wyrównanie wszystkich elementów siatki do lewej (dla języków pisanych od lewej do prawej, takich jak
polski) i zostawienie wolnego miejsca po prawej.
end – wyrównanie wszystkich elementów siatki do prawej (dla języków pisanych od lewej do prawej, takich jak
polski) i zostawienie wolnego miejsca po lewej.
center – ułożenie elementów na środku, obok siebie i zostawienie wolnego miejsca po bokach.
space-between – wolne miejsce jest równomiernie rozmieszczane pomiędzy elementami (ale nie przed
pierwszym i nie po ostatnim – one przylegają do krawędzi kontenera)
space-around – podobne do space-between, z tym że wolna przestrzeń rozmieszczana jest także przed
pierwszym elementem i za ostatnim elementem. W tym wypadku wolna przestrzeń przypadająca na dany
element jest dzielona na pół – jedna połowa jest wyświetlana z jednej strony elementu, reszta z drugiej strony
space-evenely – podobne do space-between, z tym że wolna przestrzeń rozmieszczana jest także przed
pierwszym elementem i za ostatnim elementem. W tym wypadku wszystkie wolne przestrzenie między
elementami mają jednakowy rozmiar.
left – wyrównanie wszystkich elementów siatki do lewej i zostawienie wolnego miejsca po prawej.
right – wyrównanie wszystkich elementów siatki do prawej i zostawienie wolnego miejsca po lewej.
normal lub stretch – rozciągnięcie elementów, tak żeby zagospodarować całą wolną przestrzeń.
safe – używanie w połączeniu z innymi wartościami powyżej (np. safe center). W przypadku gdyby miało dojść
do przepełnienia w wyniku którego część któregoś z elementów nie mogłaby być wyświetlona, to wówczas
zostanie użyte wyrównanie start.
unsafe - przeciwieństwo safe: nawet jeśli miałoby dojść do przepełnienia i obcięcia części treści, wyrównanie
zostanie wykonane zgodnie z wartością podaną po unsafe.
align-content 1/2
Poniżej przedstawione są ważniejsze wartości align-content która określa co przeglądarka robi
z wolnym miejscem pozostałym w pionie, jeśli takie zostanie po umieszczeniu w siatce
elementów.
start – wyrównanie wszystkich elementów siatki do góry (dla języków pisanych od lewej do
prawej, takich jak polski) i zostawienie wolnego miejsca na dole.
end – wyrównanie wszystkich elementów siatki do dołu (dla języków pisanych od lewej do
prawej, takich jak polski) i zostawienie wolnego miejsca na górze.
center – ułożenie elementów na środku, obok siebie i zostawienie wolnego miejsca na dole
i górze.
space-between – wolne miejsce jest równomiernie rozmieszczane pomiędzy elementami
(ale nie przed pierwszym i nie po ostatnim – one przylegają do krawędzi kontenera)
space-around – podobne do space-between, z tym, że wolna przestrzeń rozmieszczana jest
także przed pierwszym elementem i za ostatnim elementem. W tym wypadku wolna
przestrzeń przypadająca na dany element jest dzielona na pół – jedna połowa jest
wyświetlana z jednej strony elementu, druga połowa z drugiej strony elementu
space-evenely – podobne do space-between, z tym że wolna przestrzeń rozmieszczana jest
także przed pierwszym elementem i za ostatnim elementem. W tym wypadku wszystkie
wolne przestrzenie między elementami mają jednakowy rozmiar.
align-content 1/2
normal – elmenty są ustawione w domyślnym położeniu, tak jakby nie ustawiono tej
wartości.
stretch – rozciągnięcie elementów, tak żeby zagospodarować całą wolną przestrzeń.
safe – używanie w połączeniu z innymi wartościami powyżej (np. safe center). W przypadku
gdyby miało dojść do przepełnienia w wyniku którego część któregoś z elementów nie
mogłaby być wyświetlona, to wówczas zostanie użyte wyrównanie start.
unsafe - przeciwieństwo safe: nawet jeśli miałoby dojść do przepełnienia i obcięcia części
treści, wyrównanie zostanie wykonane zgodnie z wartością podaną po unsafe.
baseline, first baseline, last baseline – wyrównanie do odpowiedniej linii bazowej: linia
bazowa elementu jest wyrównywana z linią bazową całej grupy, do której element należy.
baseline lub first baseline oznaczają pierwszą linię bazową, last baseline oznacza ostatnią
linię bazową. Linia bazowa to linia, w której jest wyświetlany tekst (oznaczona czerwony
kolorem na poniższym przykładzie).
justify-items
Poniżej przedstawione są ważniejsze wartości justify-items (właściwość kontenera – określa
wyrównanie dla wszystkich elementów - dzieci) i justify-self (właściwość dziecka -
wyrównanie konkretnego elementu w wierszu). Poniższe znaczenie wartości dotyczy języków
pisanych w poziomie, takich jak język polski. Dla języków pisanych w pionie, znaczenie byłoby
inne.
auto – sposób wyrównania dziedziczony od rodzica
normal, stretch – rozciąganie zawartości by zapełnić całą przestrzeń
start lub self-start – wyrównanie do lewej linii (w językach pisanych od lewej do prawej)
end lub self-end– wypełnianie do prawej linii (w językach pisanych od lewej do prawej)
center – wyśrodowanie.
left – wyrówanie do lewej
right – wyrównanie do prawej
safe – używanie w połączeniu z innymi wartościami powyżej (np. safe center). W
przypadku gdyby miało dojść do przepełnienia w wyniku którego treść elementu nie
mogłaby być wyświetlona, to wówczas zostanie użyte wyrównanie start.
unsafe - przeciwieństwo safe: nawet jeśli miałoby dojść do przepełnienia i obcięcia
części treści, wyrównanie zostanie wykonane zgodnie z wartością podaną po unsafe.
align-items
Poniżej przedstawione są ważniejsze wartości align-items (właściwość kontenera – określa wyrównanie dla
wszystkich elementów - dzieci) i align-self (właściwość dziecka - wyrównanie konkretnego elementu w
kolumnie). Poniższe znaczenie wartości dotyczy języków pisanych w poziomie, takich jak język polski. Dla
języków pisanych w pionie, znaczenie byłoby inne.
normal lub stretch – rozciąganie zawartości by zająć dostępną przestrzeń
center – ułożenie elementu na środku
start lub self-start - wyrównanie do góry (dla języka polskiego)
end lub self-end – wyrównanie do dołu (dla języka polskiego)
safe – używanie w połączeniu z innymi wartościami powyżej (np. safe center). W przypadku gdyby miało
dojść do przepełnienia w wyniku którego część któregoś z elementów nie mogłaby być wyświetlona, to
wówczas zostanie użyte wyrównanie start.
unsafe - przeciwieństwo safe: nawet jeśli miałoby dojść do przepełnienia i obcięcia części treści,
wyrównanie zostanie wykonane zgodnie z wartością podaną po unsafe.
baseline, first baseline, last baseline – wyrównanie do odpowiedniej linii bazowej: linia bazowa elementu
jest wyrównywana z linią bazową całej grupy, do której element należy. baseline lub first baseline
oznaczają pierwszą linię bazową, last baseline oznacza ostatnią linię bazową. Linia bazowa to linia, w
której jest wyświetlany tekst (oznaczona czerwony kolorem na poniższym przykładzie).
Wyrównanie i przerwy – przykłady - HTML
<body>
<main>
<article>
<h2>Jeden</h2>
</article>
<article class="wazne">
<h2>Dwa</h2>
</article>
<article>
<h2>Trzy</h2>
</article>
<article>
<h2>Cztery</h2>
</article>
<!-- i tak dalej ...-->
<article>
<h2>Piętnaście</h2>
</article>
</main>
</body>
Wyrównanie całej siatki i jej dzieci
main {
background-color: lightgoldenrodyellow;
border: 1px solid blue;
display: grid;
/* stworzenie 6ciu kolumn*/
grid-template-columns: repeat(6, 130px);
/*stworzenie 3 wierszy o wysokości 90px*/
grid-template-rows: repeat(3, 90px);
width: 80%; /*szerokość na 80% dostępnej przestrzeni*/
height: 400px; /*wysokość 400px*/
justify-content: right; /*siatka ma być wyrównana do prawej*/
align-content: end; /*siatka ma być wyrównana do dołu*/
justify-items: stretch; /*elmenty w siatce należy rozciągać na szerokość*/
align-items: stretch; /*elementy w siatce należy rozciągać na wysokość*/ }
article { background-color: lightcyan; border: 1px solid black; }
article:nth-of-type(1) { justify-self: right; /*wyrówanie elmentu do prawej*/ }
article:nth-of-type(2) { justify-self: left; /*wyrówanie elmentu do lewej*/ }
article:nth-of-type(5) { justify-self: center; /*wyśwrodkowanie w poziomie*/ }
article:nth-of-type(8) { align-self: start; /*wyrównanie do góry*/ }
article:nth-of-type(9) { align-self: end; /*wyrównanie w dół*/ }
article:nth-of-type(13){ align-self: center;/*wyśrodkowanie w pionie*/ }
Przykład ustawiania przerw

main {
background-color: lightgoldenrodyellow;
border: 1px solid blue;
display: grid;
grid-template-columns: repeat(6, 130px); /* stworzenie 6ciu kolumn*/
grid-template-rows: repeat(3, 90px); /*stworzenie 3 wierszy 90px*/
row-gap: 40px; /*przerwa między wierszami*/
column-gap: 10px; /*przerwa między kolumnami*/
}
article {
background-color: lightcyan;
border: 1px solid black;
}
Kierunek siatki

• Kierunek siatki zależy od języka – dla języków pisanych od lewej do prawej zachowanie
elementów jest takie jak opisano w tym kursie. Jednak istnieją języki pisane od góry do dołu,
gdzie znaczenie pojęć wiersz i kolumna nie odpowiada temu znanemu z języków
europejskich. Zamiast słowa wiersz właściwszym byłoby więc użycie pojęcia „inline” –
oznaczającego kierunek rozkładania tekstu, a zamiast słowa kolumna użycie pojęcia „block” –
oznaczającego kierunek rozkładania bloków. Dla większości języków odpowiada to jednak
pojęciom wiersz i kolumna użytym w tym kursie.
• Kierunek siatki można zmienić używając właściwości writing-mode. Najważniejsze
wartości:
 horizontal-tb – elementy są układane poziomo od lewej do prawej i od góry w dół.
 vertical-rl – elementy są układane od góry do dołu, a w poziomie od prawej do lewej
 vertical-lr – elementy są układane od góry do dołu, a w poziomie od lewej do prawej
Przykład zmiany kierunku siatki - HTML
<body>
<main>
<article>
<h2>Jeden</h2>
</article>
<article class="wazne">
<h2>Dwa</h2>
</article>
<article>
<h2>Trzy</h2>
</article>
<article>
<h2>Cztery</h2>
</article>
<!-- i tak dalej ...-->
<article>
<h2>Piętnaście</h2>
</article>
</main>
</body>
Wyrównanie całej siatki i jej dzieci
main {
background-color: lightgoldenrodyellow;
border: 1px solid blue;
display: grid;
grid-template-columns: repeat(6, 130px); /* stworzenie
6ciu kolumn*/
grid-template-rows: repeat(3, 90px); /*stworzenie 3
wierszy 90px*/
row-gap: 40px; /*przerwa między wierszami*/
column-gap: 10px; /*przerwa między kolumnami*/
writing-mode: vertical-lr; /* siatka w pionie, tekst od
lewej do prawej*/
}
article {
background-color: lightcyan;
border: 1px solid black;
}
Siatka grid – przykład responsywnego układu: HTML
<body>
<main>
<article>
<h1>Bocian Biały</h1>
<img src="https://upload.wikimedia.org/wikiped..." alt="Bocian biały">
<p>Gatunek dużego ptaka brodzącego z rodziny bocianów (Ciconiidae)</p>
</article>
<article class="wazne">
<h1>Bocian czarny</h1>
<img src="https://upload.wikimedia.org/wikiped... " alt="Bocian czarny">
<p>Gwarowo: hajstra (Ciconia nigra) – gatunek dużego ptaka ...</p>
</article>
<article>
<h1>Bocian czaronodzioby</h1>
<img src="https://upload.wikimedia.org/wi..." alt="Bocian czarnodzioby">
<p>Bocian czarnodzioby (Ciconia boyciana) – gatunek dużego ...</p>
<p>Od bociana białego różni się czarnym dziobem i czerwoną ...</p>
</article>
<!-- i tak dalej ...-->
</main>
</body>
Siatka grid – przykład responsywnego układu: HTML
<body>
<main>
<article>
<h1>Bocian Biały</h1>
<img src="https://upload.wikimedia.org/wikiped..." alt="Bocian biały">
<p>Gatunek dużego ptaka brodzącego z rodziny bocianów (Ciconiidae)</p>
</article>
<article class="wazne">
<h1>Bocian czarny</h1>
<img src="https://upload.wikimedia.org/wikiped... " alt="Bocian czarny">
<p>Gwarowo: hajstra (Ciconia nigra) – gatunek dużego ptaka ...</p>
</article>
<article>
<h1>Bocian czaronodzioby</h1>
<img src="https://upload.wikimedia.org/wi..." alt="Bocian czarnodzioby">
<p>Bocian czarnodzioby (Ciconia boyciana) – gatunek dużego ...</p>
<p>Od bociana białego różni się czarnym dziobem i czerwoną ...</p>
</article>
<!-- i tak dalej ...-->
</main>
</body>
Siatka grid – przykład responsywnego układu: CSS
html {
font-size: 14px; /*rozmiar czcionki*/
}
main {
display: grid; /* utworzenie kontenera grid*/
/* auto-fit: utworzenie tyle kolumn ile jest potrzebne, każda o szer. 1fr*/
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1rem; /*odległości między komórkami siatki*/
border: 1px solid black; /*krawędź*/
padding: 10px; /*odstępy*/
}
article {
border: 1px dotted darkblue; /*krawędź*/
min-width: 240px; /*nie mniej niż 280px szerokości*/
padding: 10px; /*odstępy*/
}
.wazne {
order: -1; /*ten element będzie wyświetlany przed wszystkimi innymi*/
}
img { width: 100%; /*grafika powinna mieć szerokość równą 100% dostępnego */ }
Siatka grid – przykład responsywnego układu: Efekt

Efekt dla dużego ekranu (1280px) Efekt dla Galaxy S9 (360x740 px)

Efekt dla iPada. (768x1024) px

582 – Siatka grid: efekt
582 – Siatka grid
1. Zapisz style.html pod nazwą 582.html. Stwórz nowy plik 582.css i dołącz go do html
modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument - ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color) na
snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na 0px
3. .witryna ustaw typ wyświetlania (display) jako grid. W siatce utwórz 2 kolumny: grid-
template-columns: 160px auto, 3 wiersze: grid-template-rows: auto auto auto; oraz
nazwane obszary: grid-template-areas: "naglowek tr_glowna" "naglowek tr_boczna"
"stopka stopka". Ustaw odstępy dla siatki (grid-gap) na 10px i odstęp (padding) na 0px.
4. .naglowek ustaw jako obszar w siatce (grid-area): naglowek i kolor tła na wheat
5. .lista--linki ustaw odstęp (padding) na 0px;
6. .tresc ustaw jako obszar w siatce tr_glowna. Utwórz kolejną siatkę używając display: grid.
Siatka ma sama dobierać liczbę i rozmiar kolumn o rozmiarze min. 300px: grid-template-
columns: repeat(auto-fit, minmax(300px, 1fr)) Odstępy dla siatki (grid-gap) to 10px;
7. .article ustaw odstęp 10px, i lewą krawędź (border-left : 1px solid brown)
8. .article_img ustaw szerokość (width) na 100%.
9. .aside ustaw jako obszar w siatce: tr_boczna. Ustaw overflow: scroll i dowolną krawędź.
10..stopka ustaw jako obszar w siatce (grid-area): stopka. Ustaw tło lightgray i odstęp 10px
11.Przetestuj stronę w 2 przeglądarkach zmieniając rozmiar okna
12.Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
 Techniki tworzenia układu witryny
• Układ strony to rozmieszczenie głównych obszarów na stronie, w które wstawiana jest treść. Grafika poniżej
przedstawia przykładowy, dość popularny układ strony.

• Głównym wyzwaniem przy tworzeniu układu strony jest umieszczenie elementów obok siebie, a nie jeden pod
drugim.
• Podejście do tworzenia takich układów zmieniało się wraz z rozwojem technologii CSS i możliwościami
przeglądarek.
• Techniki tworzenia układu strony (ustawiania elementów obok siebie), można pogrupować od najstarszych do
najnowszych w następujący sposób:
Wykorzystanie tabel HTML – stosowane w czasach, gdy nie było jeszcze stylów CSS.
Wykorzystanie właściwości float – stosowane do dziś, ale nowocześniejsze metody są wygodniejsze. W metodzie
float aby uzyskać pożądany rezultat często trzeba używać nieoczywistych sztuczek.
Wykorzystanie właściwości display: inline-block lub inline-table (umożliwiają ustawianie elementów blokowych
obok siebie) – stosowane do dziś, jako mniej problematyczne niż float, jednak nowocześniejsze metody są
wygodniejsze.
Wykorzystanie elastycznych kontenerów flex (display: flex)
• Wykorzystanie siatki grid (display: grid) – co do zasady najwygodniejszy ze wszystkich sposobów.
CSS – widoczność

• visibility – określa czy element ma widoczny.

visible – element jest widoczny
hidden – element jest niewidoczny, ale wciąż ma wpływ na układ sąsiednich
elementów. Do całkowitego wyeliminowania elementu z układu strony służy
display: none.
collapse – używane przy operacjach na wierszach i kolumnach tabel. Powoduje
ukrycie wiersza lub kolumy zwalniając miejsce dla innej treści.
• Wykorzystywane głównie w technologiach dynamicznych (np. DHTML) do
tymczasowego ukrywania treści.
Kolor i tło 1/3
• color – właściwość określa kolor tekstu w elemencie
• Tło może być kolorem lub grafiką
• background-color – kolor tła (w tym kolor transparent – czyli tło przezroczyste)
• background-image – obraz wyświetlany jako tło (podany jako url). Można wskazać kilka plików
oddzielając je przecinkami.
• background-repeat – co zrobić z obrazkiem jeśli jest on zbyt mały. Czy obrazek ma się powtarzać by
zapełnić tło.
repeat – obrazek jest powielany w pionie i poziomie
repeat-x - obrazek jest powielany w poziomie
repeat-y – obrazek jest powielany w pionie
no-repeat – obrazek nie jest powielany (jest wyświetlany tylko raz)
• background-attachment – określa czy obrazek tła jest przypisany bezwzględnie do pozycji czy może
się przewijać razem z treścią
scroll – grafika podlega przewijaniu razem z blokiem, który go zawiera
fixed – grafika jest przypisany bezwzględnie do pozycji, nie podlega przewijaniu i cały czas
wyświetla się w tej samej pozycji.
local – podobne do fixed, ale tylko w kontekście bloku, który zawiera grafikę (może być przydatny
w użyciu z rodzicem który wyświetli własny pasek przewijania).
inherit – dziedziczenie wartości od rodzica
Kolor i tło 2/3
• background-position – początkowa pozycja grafiki w postaci 2 wartości. Pierwsza określa pozycję w
poziomie, druga w pionie. Jeśli tylko pierwsza wartość jest podana, druga przyjmuje domyślną wartość
center
% - procent przesunięcia względem elementu z uwzględnieniem obszaru padding (górny prawy róg)
odległość - (np. w px) względem górnego prawego rogu elementu (z uwzględnieniem obszaru padding)
top – góra (to samo co 0% lub 0)
right – prawa strona (to samo co 100%)
bottom – dół (to samo co 100%)
left – lewa strona (to samo co 0%)
center – środek (to samo co 50%)
Poniższy przykład przedstawia w jakim miejscu należy spodziewać się grafiki przy podaniu wartości
background-position: 75% 25%:
Kolor i tło 3/3
background – skrócony zapis właściwości: background-color background-image background-repeat
background-attachment background-position
od 1 do 5 parametrów. Może mieć wartość inherit
background-size – rozmiar tła. Można określić jako
wysokość i szerokość – podające jednostki takie jak odległość (piksele) i procenty
contain – przeskalowanie obrazka do wymiarów elementu, z zachowaniem jego
współczynnika wysokości do szerokości, do takiego wymiaru że obrazek w całości zmieści się
w obrębie przewidzianym na wyświetlanie tła.
cover – podobne do contain, z tym że grafika skalowana jest do takiego rozmiaru, że w całości
pokryje obszar wyświetlania tła..
background-origin – umiejscowienie tła:
padding-box - względem obszaru określanego przez miejsce na odstępy padding.
border-box - względem obszaru określanego przez miejsce na krawędź
content-box: względem obszaru określanego przez miejsce na treść
background-clip - przycinanie tła:
padding-box: do obszaru określanego przez miejsce na dostępy padding
border-box: do obszaru określanego przez miejsce na krawędź
content-box: do obszaru określanego przez miejsce na treść
Grafika tła – przykład: HTML

<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<title>Obraz tła</title>
<link href="h280.css" rel="stylesheet">
</head>
<body>
<p id="a1">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p id="a2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. ...</p>
</body>
</html>
Grafika tła – przykład: CSS
p {
background-image: url('grafika/css.png'); /*dołączenie pliku*/
background-repeat: no-repeat; /*zakaz powtarzania grafiki*/
width: 300px;
border-width: 30px;
border-style: dotted;
border-color: red;
padding: 30px;
}
#a1 {
background-size: 80px 100px; /*wymiar grafiki*/
background-origin: content-box; /*wyświetlanie w miejscu
przeznacznonym na zawartość*/
}
#a2 {
background-origin: border-box; /*rozpoczęcie wyświetlania
w miejscu przeznaczonym na krawędź*/
background-clip: content-box; /*obcięcie części grafiki
znajdującej się poza miejscem przeznaczonym na zawartość*/
}
592 – Listy i grafika tła: efekt
592 – Listy i grafika
1. Zapisz style.html pod nazwą 592.html. Stwórz nowy plik 592.css i dołącz go do html
modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color) na
snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na 0px
3. .lista - ustaw typ listy (list-style-type), tak aby jej elementy były numerowane jako małe
rzymskie liczby (lower-roman)
4. .naglowek - ustaw jako tło kolor whitesmoke oraz grafikę Plemiona.png z plików
startowych (background-image: url(…)), aby znalazła się w prawym dolnym rogu
(background-position: right bottom). Grafika ma mieć określony rozmiar: (background-
size: 390px 390px). Jej wyświetlanie ma rozpoczynać się w miejscu na krawędź
(background-origin: border-box), ale ma być wyświetlany tylko fragment w obszarze
treści (background-clip: content-box). Grafika ma się przewijać razem z elementem
(bacground-attachment: scroll). Plik ma być wyświetlony tylko 1 raz (background-repeat:
no-repeat). Dodaj odstęp (padding) 20px oraz krawędź border: 30px ridge brown;
5. .tresc - ustaw tło - grafikę gradient-poziomy.png i wymuś powtarzanie w pionie (repeat-y)
6. .aside- ustaw tło - grafikę gradient-pionowy.png i wymuś powtarzanie w poziomie
7. Przetestuj stronę w 2 przeglądarkach. Co się stanie gdy zmienisz background-attachment
ze scroll na fixed?
8. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Czcionki
• Rodziny czcionek
• font-family – definiuje rodziny czcionek (określonych lub generycznych), które należy
wykorzystać. Jeśli podana czcionka nie istnieje w systemie użytkownika, przeglądarka
próbuje wykorzystać kolejną z listy. W wartości do oddzielenia czcionek używa się przecinka:
np.: body { font-family: Gill, Helvetica, sans-serif }.
• Czcionki określone – konkretna czcionka, np. Helvetica.
• Czcionki generyczne
• Czcionek generycznych nie wolno zamieszczać w cudzysłowie, ponieważ są to słowa
kluczowe:
• serif – czcionki szeryfowe – z poprzecznymi lub ukośnymi ogonkami, zawijasami (np.
Times);
• sans-serif – czcionki bezszeryfowe – bez dodatkowych elementów wykańczających (np.
Helvetica);
• cursive – czcionki odręczne – naśladują odręczne pismo
(np. Zapf-Chancery);
• fantasy – czcionki fantazyjne – stosują wymyślne metody dekorowania liter (np. Western);
• monospace – czcionki nieproporcjonalne (lub czcionki stałej szerokości) – każdy znak
zajmuje tyle samo miejsca (np. Courier).
• system-ui – czcionka odpowiada domyślnej czcionce w danym systemie operacyjnym.
Style czcionek

• font-style – określa styl czcionki:

normal – zwykły wygląd czcionki;
italic – czcionka w wersji pochylonej (zwykle posiada elementy – np.
łączniki – niedostępne w zwykłej wersji czcionki). Jeśli styl italic
jest niedostępny, przeglądarka próbuje użyć stylu oblique;
oblique – zazwyczaj pochylona wersja zwykłej czcionki. Po spacji
można podać także kąt pochylenia w stopniach. Jeśli jest kilka
wariantów pochylenia, przeglądarka spróbuje dobrać czcionkę
najbliższą wskazanemu kątowi.
inherit – dziedziczenie wartości od rodzica.
Style czcionek

• font-style – określa styl czcionki:

normal – zwykły wygląd czcionki;
italic – czcionka w wersji pochylonej (zwykle posiada elementy – np.
łączniki – niedostępne w zwykłej wersji czcionki). Jeśli styl italic
jest niedostępny, przeglądarka próbuje użyć stylu oblique;
oblique – zazwyczaj pochylona wersja zwykłej czcionki. Po spacji
można podać także kąt pochylenia w stopniach. Jeśli jest kilka
wariantów pochylenia, przeglądarka spróbuje dobrać czcionkę
najbliższą wskazanemu kątowi.
inherit – dziedziczenie wartości od rodzica.
Warianty czcionek

font-variant – pozwala doprecyzować, jakie znaki spośród dostępnych w czcionce

wykorzystywać. To zapis skrócony dla następujących szczegółowych właściwości:
font-variant-caps – korzystanie z liter drukowanych
font-variant-numeric – korzystanie z liczb, ułamków ipt.
font-variant-alternates – korzystanie z alternatywnych znaków
font-variant-ligatures – korzystanie z alternatywnych połączeń między literami
font-variant-east-asian – korzystanie ze znaków używanych w językach
wschodnioazjatyckich
Popularne wartości wprowadzone w starszych wersjach CSS.
normal – zwykły wygląd czcionki;
small-caps – tekst pisanymi wielkimi literami, ale w mniejszym rozmiarze niż
normalnie: rozmiar i proporcje liter są inne
niż w tekście pisanym wielkimi literami;
Z listą dostępnych wartości można zapoznać się na przykład na tej stronie:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
Grubość czcionki

• font-weight – określa grubość czcionki:

• normal – zwykły wygląd czcionki (odpowiada grubości 400);
• bold – czcionka pogrubiona (odpowiada grubości 700);
• bolder – czcionka grubsza niż czcionka rodzica;
• lighter – czcionka cieńsza niż czcionka rodzica.
• Jedna z liczb: 100, 200, 300, 400, 500, 600, 700, 800 lub 900 –
grubość czcionki. Każda kolejna liczba oznacza czcionkę co najmniej
tak grubą/ciemną jak poprzednia. Liczba dostępnych wersji
grubości/ciemności jest zależna od rodziny czcionki i wcale nie musi
mieć aż 9 poziomów.
Rozmiar czcionki

• font-size – rozmiar czcionki. Ta właściwość jest używana do wyliczania wielu

jednostek względnych – na przykład em, ex. Wartości które można zapisać do
właściwości:
• wartość bezwzględna – jedna z xx-small, x-small, small, medium, large, x-large,
xx-large (od najmniejszej do największej);
• wartość względna – względem rodzica;
• larger – czcionka ma być większa niż czcionka rodzica;
• smaller – czcionka ma być mniejsza niż czcionka rodzica;
• długość (np. w px);
• procenty – względem odziedziczonego rozmiaru czcionki;
• font-size – rozmiar czcionki. Ta właściwość jest używana do wyliczania wielu
jednostek względnych – na przykład em, ex.
• line-height – rozmiar linii w której będzie wyświetlana czcionka.
Pozostałe właściwości czcionek

Inne istotne właściwości czcionek:

font-kerning – reguluje odstępy miedzy znakami w czcionce
font-variant-position – używanie indeksów górnych i dolnych
font-feature-settings – pozwala odczytać
font-language-override – pozwala wskazać jakiego zestawu znaków używać z punktu
widzenia języka
font-optical-sizing – pozwala włączyć lub wyłączyć optymalizacje wyświetlania w
przeglądarce (np. małe czcionki mogą być wyświetlane w grubszym wariancie by ułatwić
odczytanie tekstu)
font-size-adjust – pozwala określić czy wyliczenia dotyczące rozmiarów czcionek powinny
być oparte o litery drukowane czy litery małe.
font-stretch – określa stopień rozstrzelenia liter w czcionce (czcionki mogą oferować
węższe i szersze warianty poszczególnych liter)
font-synthesis – pozwala określić czy przeglądarka może samodzielnie tworzyć pochyloną
wersję czcionki np. przez transformację geometryczną, jeśli dana czcionka takiej wersji nie
oferuje.
font-variation-settings – pozwala wpływać na zmienne parametry w czcionkach, na które
nie da się wpłynąć standardowymi właściwościami CSS.
Czcionki – zapis skrócony

• font – skrócony zapis dla ustawienia parametrów czcionek. W pełnej wersji

podaje się font-style font-variant font-weight font-size/line-height font-family,
np. p { font: normal small-caps bolder 120%/120% fantasy, serif }

Można wykorzystać ustawienia czcionek systemowych (ich rodzinę, rozmiar,

grubość, styl itd.) – np. font: menu
caption – czcionka tytułów – np. przycisków;
icon – czcionka wykorzystywana do opisu ikon;
menu – czcionka wykorzystywana w menu;
message-box – czcionka wykorzystywana w oknach dialogowych;
small-caption – to samo co caption, ale dla niedużych elementów;
status-bar – czcionka wykorzystywana w pasku statusowym przeglądarki.
Czcionki - przykład
.a1 { font: 20px/24px serif }
.a2 { font: 80% sans-serif }
.a3 { font: x-large/110% "New Century Schoolbook", serif }
<!doctype html> .a4 { font: bold italic large monospace }
<html lang="pl"> .a5 { font: normal small-caps 120%/120% cursive }
<head> .a6 {
<meta charset="UTF-8"> font-family: Verdana, Arial, Helvetica, sans-serif;
<meta name="viewport" content="width=device-width,
font-weight: 700;initial-scale=1.0">
<link rel="stylesheet" href="460_font.css">
}
<title>Float</title>
</head>
<body>
<p class="a1">To jest akapit 1. Font z rodziny serif</p>
<p class="a2">To jest akapit 2. Font z rodziny sans-serif</p>
<p class="a3">To jest akapit 3. Font New Century Schoolbook</p>
<p class="a4">To jest akapit 4. Font z rodziny monospace</p>
<p class="a5">To jest akapit 5. Font z rodziny cursive</p>
<p class="a6">To jest akapit 6. Font Verdana.</p>
</body>
</html>
612 – Czcionki: efekt
612 – Czcionki

1. Zapisz style.html pod nazwą 612.html. Stwórz nowy plik 612.css i dołącz go do
html modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color)
na snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na
0px
3. Dla kolejnych klas ustaw następujące czcionki (generyczne) używając właściwości:
font-family, font-style, font-weight i font-size:
4. .naglowek – czcionka szeryfowa (serif), pochylona (oblique), o grubości 100,
rozmiar podwójna wysokość litery x: 2ex
5. .tresc – czcionka bezszeryfowa (sans-serif), kursywa (italic), o grubości 400,
rozmiar medium
6. .aside – czcionka odręczna (cursive), normalna (normal), o grubości 600, rozmiar
x-large
7. .stopka – czcionka nieproporcjonalna (monospace), normalna (normal) o grubości
900, rozmiar larger
8. Przetestuj stronę w 2 przeglądarkach
9. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Własne czcionki

• CSS daje twórcom witryn pełną kontrolę nad wyglądem tekstu poprzez możliwość
definiowania własnych czcionek. Służy do tego reguła @font-face
• Popularne formaty czcionek:
Web Open Font Format – .woff,
TrueType – .ttf,
OpenType – .ttf, .otf,
Embedded OpenType – .eot,
SVG Font – .svg, .svgz.
• Własne czcionki:
• Przykładowy serwis z czcionkami (także darmowymi): http://www.fontsquirrel.com.
• Podczas ściągania/zakupu upewnij się, że otrzymujesz licencję na używanie czcionek
w Internecie (często na używanie czcionki w Internecie wymagana jest oddzielna
licencja).
• Upewnij się, że czcionka obsługuje polskie litery (niestety wiele czcionek obsługuje
jedynie litery anglosaskie).
Własna czcionka - przykład
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="465_font-face.css">
<title>Czcionka</title> @font-face {
</head> font-family: "czcionka";
<body> src: url("font.ttf");
<p> }
Trudna do czytania czcionka p {
</p> font-family: czcionka;
font-size: 60px;
</body> }
</html>
622 – Własne czcionki: efekt
622 – Własne czcionki

1. Ściągnij z moodle archiwum pliki-startowe.zip, rozpakuj pliki AlexBrush-

Regular.ttf oraz Dumb.ttf i wkopiuj do katalogu w którym pracujesz
2. Zapisz style.html pod nazwą 622.html. Stwórz nowy plik 622.css i dołącz
go do html modyfikując element <link>.
3. W arkuszu stylów dołącz obie czcionki używająć @font-face { font-family:
"nazwa" src: url('plik') }
4. W pliku css dodaj reguły dla poniższych klas:
5. .dokument - ustaw rozmiar czcionki na 20px (font-size), kolor tła
(background-color) na snow, kolor tekstu (color) na black, marginesy
(margin) i odstępy (padding) na 0px
6. .article__h2 - ustaw czcionkę Dumb (font-family)
7. .article__p - ustaw czcionkę AlexBrush (font-family)
8. Przetestuj stronę w 2 przeglądarkach
9. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-
validator
Google fonts

• Google udostępnia za darmo obszerną bibliotekę fontów

https://www.google.com/fonts
• Fonty są serwowane bezpośrednio z serwerów Google za pośrednictwem
ich własnego mechanizmu API
• Wystarczy wybrać interesującą Cię czcionkę i dołączyć do dokumentu styl
CSS jak opisano na stronach google, na przykład
<link href='http://fonts.googleapis.com/css?family=Amarante'
rel='stylesheet' type='text/css'>
• We własnych arkuszach stylów użyć fontu, na przykład:
p { font-family: 'Amarante', cursive; }
632 – Czcionki Google: efekt
632 – Czcionki Google

1. Na stronie https://www.google.com/fonts wybierz 2 interesujące Cię

czcionki
2. Przeczytaj instrukcje jak je zamieścić
3. Pliki z poprzedniego ćwiczenia zapisz pod nazwami 632.html i 632.css
4. Do strony HTML dołącz kolejno 2 arkusze CSS ze stron google
obsługujące wybrane czcionki (przed plikiem 632.css!)
5. W pliku css dodaj reguły dla poniższych klas:
1. .aside - ustaw pierwszą czcionkę (font-family)
2. .stopka - ustaw drugą czcionkę (font-family)
6. Przetestuj stronę w 2 przeglądarkach
7. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-
validator
Tekst: wcięcie, wyrównanie, przełamywanie 1/2
• text-indent – wcięcie pierwszej linii tekstu w bloku (wartość może być ujemna). Ważniejsze wartości
odległość – (np. w pikselach);
procenty (względem szerokości elementu);
each-line – słowo kluczowe dodawane po wartości. Oznacza że wcięcie ma dotyczyć także
kolejnych linii w bloku, w których wymuszono przejście do nowej linii.
hanging – słowo kluczowe dodawane po wartości. Oznacza że logika wcięć ma być odwrócona, to
jest wszystkie linie będą miały wcięcie z wyjątkiem pierwszej.
• text-align - wyrównanie tekstu. Ważniejsze wartości:
left – do lewej;
right – do prawej;
start – od początku tekstu (w językach europejskich to samo co left)
end – od końca tekstu (w językach europejskich to samo co right)
center – wyśrodkowanie;
justify – wyrównany do obu stron;
justify-all – to samo co justify, ale obejmuje także ostatnią linię w bloku.
match-parent – wyrównanie takie samo jak dla rodzica.
• text-align-last – jak wyrównywać ostatnią linię w bloku tekstu. Wartości takie jak dla text-align.
Tekst: wcięcie, wyrównanie, przełamywanie 2/2
• text-justify – jak wyrównywać tekst, jeśli text-align ustawiono na justify – zawiera kilka wartości
szczególnie przydatnych do precyzowania mechanizmu wyrównywania tekstu w językach azjatyckich
(np. japońskim);
• text-overflow – co robić z tekstem, który nie mieści się w przewidzianej przestrzeni. Można np. tekst
obcinać (clip) lub zamienić na trzy kropki – … (ellipsis);
• word-break – jak łamać teksty: normalnie (normal), w dowolnym miejscu jeśli miało by dojść do
przepełnienia (break-all) czy w miejscach, gdzie są myślniki (hyphenate);
• overflow-wrap (w starszych wersjach CSS) – zbliżone do word-break. W sytuacji, gdy wymuszone
jest łamanie słów, to word-break łamie słowo dokładnie przed literą, która miałaby spowodować
przepełnienie, a overflow-wrap będzie próbować przenosić słowo do kolejnej linii. Przy wartości
normal – przełamanie następuje po słowie, Przy wartości break-word przełamanie może nastąpić w
środku słowa;
• hyphens – ustala jak łamać słowa z pomocą myślników. Można np. określić że łamanie słów ma się
odbywać przy użyciu miejsc wskazanych za pomocą sugestii myślnika (&shy;) albo automatycznie
(przeglądarka sama wstawia myślniki)
• line-break – ustala jak łamać linie w niektórych językach azjatyckich.
Wyrównanie i łamanie tekstu - przykład
<body>
<p>Najdłuższe słowo w słowniku języka polskiego to: konstantynopolitańczykowianeczka</p>
<p>Znany polityk to choćby Korwin-Mikke </p>
<p class="obcinaj">To jest tekst który się tu nie zmieści. Jest zdecydowanie za długi... </p>
</body>

p {
font-size: 30px;
overflow-wrap:break-word; /*zezwolenie na łamanie tekstu w
środku słowa*/
text-align:justify; /*justyfikacja tekstu*/
text-justify:inter-word; /*powiększenie przestrzeni między
słowami aby dokonać justyfikacji*/ }
.obcinaj {
white-space:nowrap; /*zakaz znaków łamania linii*/
width:12em; border:1px solid #000000;
overflow:hidden; /*ukrywanie tekstu który wykracza poza obszar*/
text-overflow:ellipsis; /*jeśli tekst się nie mieści, to w miejscu gdzie
się kończy miejsce, zostaną wyświetlone trzy kropki ...*/ }
Tekst: dekoracje, transformacje
• text-decoration – zapis skrócony dla następujących właściwości szczegółowych:
text-decoration-line – sposoby wyróżniania tekstu przy użyciu linii takie jak na przykład
podkreślenie, linia nad tekstem, przekreślenie.
text-decoration-color – ustalenie koloru dekoracji (na przykład podkreślenia)
text-decoration-style – uszczegóławia styl dekoracji wprowadzonej przy pomocy text-
decoration-line. Można min. określić czy linia ma być ciągła, przerywana czy kreskowana.
Szczegółowy opis właściwości i wartości z wiązanych z dekorowaniem można znaleźć pod tym
linkiem: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
Niektóre wartości:
underline – podkreślenie tekstu;
overline – linia nad tekstem;
line-through – tekst przekreślony;
blink – tekst miga (na zmianę znika i pojawia się);
• text-transform – przekształcenia tekstu – drukowane i zwykłe litery. Ważniejsze wartości:
• uppercase – używane są drukowane litery;
• capitalize – pierwsza litera każdego wyrazu jest zastępowana literą drukowaną;
• lowercase – używane są małe litery;
• none – brak przekształcenia tekstu;
Tekst: odstępy
• letter-spacing – odstępy między literami:
normal – domyślne odstępy dla czcionki;
długość – (np. px) – określa dodatkowy odstęp dodany
do domyślnego (wartość może być ujemna – wtedy litery będą gęściej upakowane);
• word-spacing – odstępy między słowami:
• normal – domyślne odstępy dla czcionki;
• długość – (np. px) – określa dodatkowy odstęp dodany
do domyślnego (wartość może być ujemna);
• line-height – wysokość linii w bloku:
liczba (mnożnik * wielkość czcionki), długość (np. px), procenty, normal.
• white-space – określa zachowanie niewidocznych znaków (np. spacji, tabulacji):
normal – zastępowanie ciągów niewidocznych znaków jednym znakiem; znaki łamania linii w tekście
źródłowym są ignorowane, linie są łamane według ograniczeń miejsca wyświetlania;
pre – wyłącza zastępowanie niewidocznych znaków jednym; linie są łamane jedynie, jeśli znak łamania linii
wystąpi w tekście źródłowym;
nowrap – to samo co normal, ale w ogóle nie łamie linii;
pre-wrap – to samo co pre, ale dodatkowo linie mogą być łamane
tak jak w normal (tj. według ograniczeń miejsca wyświetlania tekstu);
pre-line – niewidoczne znaki są zastępowane jednym; linie są łamane, jeśli znak łamania linii wystąpi w tekście
źródłowym lub zgodnie
z ograniczeniami miejsca wyświetlania tekstu;
Kierunek tekstu

• W niektórych językach (np. arabskim) pisze się od prawej do lewej,

co należy uwzględnić w wyglądzie strony.
• direction – określa kierunek tekstu:
ltr – z lewej do prawej;
rtl – z prawej do lewej.
• unicode-bidi – stosowane, jeśli na tej samej stronie trzeba połączyć
teksty pisane w obu kierunkach (przeglądarka do rozpoznania kierunku
wykorzystuje algorytm zdefiniowany w unicode):
normal – szereguje tekst zgodnie z zasadami unicode;
embed – stara się szeregować tekst zgodnie z direction dla danego
elementu, ale zachowuje zasady unicode;
• bidi-override – szereguje wyłącznie według direction dla danego
elementu, ignorując zasady zdefiniowane w unicode.
Wyrównanie pionowe
vertical-align – określa wyrównanie w pionie dla elementów liniowych
oraz komórek tabel:
baseline – wyrównanie linii bazowych z rodzicem; jeśli element nie ma linii bazowej, nastąpi wyrównanie
krawędzi dolnego marginesu z linią bazową rodzica;
middle – wyrównanie środka elementu z linią bazową rodzica powiększoną o połowę jego wysokości;
sub – obniżenie linii bazowej elementu do pozycji właściwej
dla indeksu dolnego rodzica;
super – podwyższenie linii bazowej elementu do pozycji właściwej
dla indeksu górnego rodzica;
text-top – wyrównanie góry elementu z górą przestrzeni na treść rodzica;
text-bottom – wyrównanie dołu elementu z dołem przestrzeni
na treść rodzica;
procenty – podniesienie (wartość dodatnia) lub obniżenie (wartość ujemna) pozycji, liczone względem line-
height; 0% odpowiada wartości bazowej;
długość (np. px) – podniesienie (wartość dodatnia) lub obniżenie (wartość ujemna) elementu;
top – wyrównuje element relatywny względem elementu liniowego do jego góry;
bottom – wyrównuje element relatywny względem elementu liniowego do jego dołu.
Przykład wyrównania pionowego grafiki z gwiazdką dla różnych
wartości vertical-align:
642 – Tekst: efekt
642 – Tekst

1. Zapisz style.html pod nazwą 642.html. Stwórz nowy plik 642.css i dołącz go do html
modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color) na
snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na 0px
3. .naglowek – wcięcie pierwszej linii (text-indent): 50px, wyrównanie tekstu (text-align)
do lewej (left), podkreślenie tekstu (text-decoration: underline), wszystkie litery mają
być wyświetlane są jako małe (text-transform: lowercase), ustaw wysokość linii (line-
height) na 150%.
4. .tresc – wcięcie pierwszej linii 100 px, wyrównanie tekstu do obu stron (justify),
odstępy między wyrazami 1,5 razy większe niż normalnie (word-spacing: 1.5),
przekształcenie tekstu na kapitaliki (text-transform: capitalize)
5. .aside – odległość między literami (letter-spacing) równa wysokości litery x (1ex),
wyrównanie tekstu do prawej strony
6. .stopka – odległość między literami 2px, wyśrodkowanie tekstu (center),
przekształcenie tekstu na litery drukowane (text-transform: upperrcase)
7. Przetestuj stronę w 2 przeglądarkach
8. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Cieniowanie tekstu

• Rekomendacja W3C CSS Text Decoration Module pozwala na nadawanie cienia

tekstowi.
• text-shadow: definicje cienia oddzielone przecinkami (można zdefiniować więcej niż 1
cień).
• Każdy cień jest opisywany za pomocą wartości oddzielonych spacjami:
odległość w poziomie (w prawo względem tekstu, ujemna wartość – w lewo);
odległość w pionie (w dół względem tekstu, ujemna wartość –
w górę);
promień rozmywania cienia (opcjonalny);
kolor
• Generator cieniów online: http://css3gen.com/text-shadow/
<body>
<p id="a1">Bitwa pod Cedynią odbyła się 24 czerwca 972 między wojskami ...</p>
<p id="a2">W rejonie Cedyni znajdować się miał bród na Odrze, przez ...</p>
</body>

p {
padding: 20px;
width: 600px;
font-size: 28px;
}
#a1 {
text-shadow: 4px 7px 3px red;
}
#a2 {
color: white;
text-shadow: 0.1em 0.1em 0.1em black;
}
662 – Cień tekstu

1. Zapisz style.html pod nazwą 662.html. Stwórz nowy plik 662.css i dołącz go do
html modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color)
na snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na
0px
3. .article__h2 – ustaw cień tekstu (text-shadow) z przesunięciem w prawo 5px, w
dół 5px, promieniem rozmycia 5px, kolor gray.
4. .article__p – ustaw cień tekstu z przesunięciem w lewo -1px, w górę -1px,
promień rozmycia 3px, kolor red.
5. Przetestuj stronę w 2 przeglądarkach
6. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Generowanie treści w CSS
CSS pozwala na generowanie treści:
elementom, które właściwość display mają ustawioną na list-item,
za pomocą właściwości content (w połączeniu z pseudo-elementami ::before i ::after). Do
wygenerowanego pseudo-elementu można zapisać za pomocą content między innymi takie
wartości:
none – treść nie jest generowana,
normal –dla elementów ::before i ::after to samo co none
dowolny ciąg znaków – tekstowa wartość treści która będzie wyświetlana
url – link do zewnętrznego zasobu (np. grafiki). Jeśli nie uda się wyświetlić zasobu, to albo
pseudo-element zostanie pominięty, albo zostanie wyświetlona odpowiednia ikona
informująca o problemie z wyświetleniem.
grafika – może być wskazana np. jako url lub gradient wygenerowany przez CSS.
licznik – licznik zdefiniowany funkcjami counter() lub counters()
attr(atrybut) – funkcja attr pobierze z elementu zawartość atrybutu o zadanej nazwie i
wstawi go jako treść
open-quote – znak otwierający cytat (określony przez właściwość quotes),
close-quote – znak zamykający cytat (określony przez właściwość quotes),
no-open-quote – nie wyświetla zawartości, ale zwiększa liczbę otwartych cytatów,
no-close-quote – nie wyświetla zawartości, ale zmniejsza liczbę otwartych cytatów,
Znak cudzysłów

• quotes pozwala określić znaki wyświetlane jako cudzysłów.

• content pozwala je wyświetlić (wartość open-quote lub close-quote).
• Znaki określa się jako listę – parami (znak otwarcia [open-quote] + znak
zamknięcia [close-quote]). Kolejne pary oznaczają kolejne zagnieżdżenia.
Znak cudzysłów - przykład
<body>
<p>Marek powiedział:</p>
<blockquote>
<span class="cytat">
A to Albert Einstein powiedział o tym co ważne:
<span class="cytat">
Wiele spośród rzeczy, które możesz policzyć, nie liczą się. Wiele
z tych, których policzyć nie można, naprawdę sie liczą.
</span>
</span>
.cytat { quotes: '"' '"' "'" "'"}
</blockquote>
.cytat:before { content: open-quote }
</body>
.cytat:after { content: close-quote }
Liczniki
• Liczniki pozwalają wpływać na wygląd dokumentu uwzględniając położenie i numery elementów. Na
przykład dzięki licznikom można automatycznie numerować rozdziały.
• Liczniki to zmienne na których zawartość wpływają reguły CSS
• counter-reset – ustawia licznik – jako wartość przyjmuje nazwę licznika, po której jest liczba
(opcjonalnie). Liczba określa stan licznika (jeśli
nie jest podana, to licznik jest ustawiany na 0).
• counter-increment – określa zachowanie liczników – jako wartość przyjmuje nazwę licznika, po
której jest liczba (opcjonalnie). Liczba określa, o ile zwiększać licznik przy każdym użyciu (jeśli liczba
nie jest podana, to licznik jest zwiększany o 1).
• W jednym zapisie można skonfigurować wiele liczników, np.:
h1:before {counter-increment: rozdzial 4 podrozdzial 1; },
h1 { counter-reset: rozdzial 8 podrozdzial 0 }.
• Liczniki można zagnieżdżać – zresetowanie licznika dla potomka tworzy jego nową instancję.
• Licznikom można nadawać style takie jak listom:
counter(name, styl-listy) – np. h1:before { content: counter(licznik, upper-latin) }.
• Niektóre elementy nie mogą zwiększać liczników (counter-increment):
jeśli właściwość display: none,
• pseudoelementy – p::first-line {counter-increment: licznik; }.
Liczniki – przykład: HTML
<body>
<main>
<article>
<h1>Bocian Biały</h1>
<img src="https://upload.wikimedia.org/wikiped..." alt="Bocian biały">
<p>Gatunek dużego ptaka brodzącego z rodziny bocianów (Ciconiidae)</p>
</article>
<article class="wazne">
<h1>Bocian czarny</h1>
<img src="https://upload.wikimedia.org/wikiped... " alt="Bocian czarny">
<p>Gwarowo: hajstra (Ciconia nigra) – gatunek dużego ptaka ...</p>
</article>
<article>
<h1>Bocian czaronodzioby</h1>
<img src="https://upload.wikimedia.org/wi..." alt="Bocian czarnodzioby">
<p>Bocian czarnodzioby (Ciconia boyciana) – gatunek dużego ...</p>
<p>Od bociana białego różni się czarnym dziobem i czerwoną ...</p>
</article>
<!-- i tak dalej ...-->
</main>
</body>
Licznik – przykład: CSS
img { max-width: 200px; }
body {
counter-reset: bocian 0 /*utworzenie licznika o nazwie
bocian i ustawienie wartości na 0*/
}
h1:before { /*przed każdym elementem h1*/
content: "Bocian nr " counter(bocian,upper-roman) ":
";/*wyświetlenie tekstu Bocian nr oraz zawartości licznika
bocian. Zawartość licznika jest formatowana jako liczba
rzymska*/
counter-increment: bocian 1; /*zwiększenie licznika bocian
o 1*/
font-size: 120%; /*rozmiar czcionki dla wyświetlanej
zawartości*/
}
672 – Liczniki: efekt
672 – Liczniki

1. Zapisz style.html pod nazwą 672.html. Stwórz nowy plik 672.css i dołącz go do html
modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color) na
snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na 0px
3. .naglowek - ustaw licznik o nazwie numer-linku na 0: counter-reset: numer-linku 0;
4. .lista__li--linki:before
1. ustaw zwiększanie licznika numer-linku o 1: counter-increment: numer-linku 1.
2. Wyświetl numer-linku, dwukropek i spację: content: counter(numer-linku) ": "
5. .tresc – podobnie jak w klasie .naglowek utwórz licznik o nazwie wladca
6. .article__h2:before
1. podobnie jak w klasie .lista__li--linki:before ustaw zwiększanie licznika wladca oraz
wyświetlanie jego zawartości, jednak tu sformatuj licznik tak, aby wyświetlany był
przy użyciu cyfr rzymskich: counter(wladca, upper-roman).
2. Użyj kropki zamiast dwukropka do oddzielenia wygenerowanej treści od treści
HTML
7. Przetestuj stronę w 2 przeglądarkach
8. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
 Media stronicowane (wydruki)
• Media stronicowane – czyli takie, w których strona nie może być renderowana na 1 egzemplarzu medium (np.
wydruk na drukarce na kilku arkuszach).
• @page określa reguły dla strony (np. wydruku).
• Przy wydrukach dwustronnych możliwe jest, że miejsce na zawartość będzie różne dla lewych i prawych stron. Może
to być uwzględnione poprzez pseudo-klasy @page:left, @page:right.
• Wymuszanie kolejnej strony:
page-break-before – zasady kończenia strony przed elementem,
page-break-after – zasady kończenia strony po elemencie,
page-break-inside – zasady kończenia strony w ramach elementu (tylko avoid, auto lub inherit).
Ważniejsze wartości dla 3 właściwości powyżej:
auto – nie określa zasady,
always – wymusza zakończenie strony,
avoid – nakazuje unikanie zakończenia strony,
left – wymusza takie zakończenie strony, aby była ona drukowana na stronie „lewej” (przy druku
dwustronnym),
right – wymusza takie zakończenie strony, aby była ona drukowana na stronie „prawej” (przy druku
dwustronnym),
inherit – dziedziczenie z elementu nadrzędnego.
• Kończenie stron w ramach elementu:
orphans – określa minimalną liczbę linii elementu, które muszą pozostać na dole strony,
widows – określa minimalną liczbę linii elementu, które muszą pozostać na górze strony.
Kontury

• Kontury są podobne do krawędzi, ale to nie to samo:

nie rezerwują miejsca jak krawędzie – są kreślone nad miejscem zarezerwowanym
dla elementu,
nie muszą być prostokątne.
• outline-width – szerokość konturu podana jako długość (np. w px).
• outline-offset – pozwala przesunąć kontur poza krawędź – wskazuje odległość od
krawędzi elementu
• outline-style – styl konturu - wartości takie same jak dla border-style.
• outline-color – kolor konturu:
kolor,
invert – odwraca kolory miejsca, nad którym kontur zostanie wykreślony.
outline – zapis skrócony dla wartości powyżej, podaje się je w kolejności outline-
color outline-style outline-width.
682 – Kontury: efekt końcowy
682 – Kontury

1. Zapisz style.html pod nazwą 682.html. Stwórz nowy plik 682.css i dołącz go do
html modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color)
na snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na
0px
3. .article
1. Ustaw odstępy na 5px a marginesy na 10px.
2. Ustaw krawędź border: 2px solid black.
3. Ustaw kontur na kolor (outline-color) maroon, szerokość (outline-width) 2px i
linię ciągłą (outline-style: solid). Przesuń kontur o 2px względem krawędzi
(outline-offset).
4. Ustaw kursor myszki na celownik (cursor: crosshair).
4. .formularz__pole – ustaw kursor wprowadzania tekstu (caret-color) na red
5. Przetestuj stronę w 2 przeglądarkach. Czy kontur zajmuje miejsce marginesów?
6. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Kursor w CSS
• cursor – typ kursora dla urządzenia wskazującego (np. myszki). Można podać kilka typów kursorów
oddzielonych spacjami. Jeśli pierwszy będzie niedostępny dla przeglądarki, spróbuje ona użyć kolejnego.
Ważniejsze wartości:
auto – przeglądarka wybiera kursor w zależności od kontekstu,
crosshair – celownik przypominający +,
default – kursor domyślny (zwykle przypominający strzałkę),
pointer – kursor oznaczający link/odnośnik,
move – kursor oznaczający, że coś można przenieść.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize,
w-resize – kursor oznaczający przemieszczenie krawędzi obiektu (przy skalowaniu), gdzie krawędzie
oznaczone są literami e – wschód (prawa), n – północ (górna), s – południe (dolna), w – zachodnia (lewa), np.
se-resize będzie oznaczało kursor, który pojawia się przy zmianie pozycji dolnego lewego rogu okna.
text – kursor do zaznaczania tekstu.
wait – kursor oznaczający, że przeglądarka jest zajęta (często przypominający klepsydrę).
progress – kursor oznaczający, że przeglądarka coś przetwarza, ale użytkownik może ciągle wydawać kolejne
polecenia.
help – kursor oznaczający, że dla zawartości pod nim dostępna jest pomoc.
url – przeglądarka ma pobrać ikonę kursora spod wskazanego adresu (kursor może być np. w formacie SVG).
Pełną listę wartości i ich wygląd można sprawdzić: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
• caret-color – kolor kursora przy wprowadzaniu danych (np. do formularza). Np. caret-color: red; użyte w polu
input spowoduje, że kursor wprowadzania danych będzie czerwony:
Przestrzenie nazw (namespaces)
CSS Namespaces to jeden z modułów CSS. Jest stosowany podczas:
formatowania dokumentów XML korzystających z wielu przestrzeni nazw,
wykorzystywania tego samego arkusza stylów do formatowania dokumentów xhtml, w których
zagnieżdżone są też grafiki SVG czy równania MathML (np. niektóre elementy mają te same nazwy w SVG
i w XHTML.). Zarówno SVG jak i MathML są oparte o XML.

@namespace url(http://www.w3.org/1999/xhtml); /*dołączenie przestrzeni nazw xhtml*/

@namespace svg url(http://www.w3.org/2000/svg); /*dołączenie przestrzeni nazw SVG*/

/*poniższa reguła dotyczy elementów XHTML - domyślną przestrzenią nazw jest XHTML, a nie
użyto prefiksu przestrzeni nazw*/
a {}

/* poniższa reguła ma zastosowanie tylko dla elementów a języka SVG - svg| dotyczy
przestrzeni nazw svg*/
svg|a {}

/*poniższa reguła ma zastosowanie i dla elementów a języka html i elementów a języka SVG - *
oznacza dowolną przestrzeń nazw*/
*|a {}
Tabele: display i ważniejsze właściwości 1/4

• caption-side – określa pozycję nagłówka tabeli:

• top – ponad tabelą,
• bottom – pod tabelą,
• Ważniejsze właściwości jakich można używać dla tabeli, kolumn i grup
kolumn:
• border – krawędź,
• background – widoczne tylko jeśli komórka i wiersz mają
przezroczyste tło,
• width – szerokość kolumny,
• visibility – widoczność,
Tabele: display i ważniejsze właściwości 2/4

• Wartości display specyficzne dla tabel:

• table – tabela jako element blokowy (właściwości formatowania elementów blokowych); odpowiada
<table> w (X)HTML-u,
• inline-table – tabela jako element linii (właściwości formatowania elementów liniowych); odpowiada
<table> w (X)HTML-u,
• table-row – element jest wierszem tabeli; odpowiada <tr>
w (X)HTML-u
• table-row-group – element jest grupą wierszy (1 lub więcej wierszy); odpowiada <tbody> w (X)HTML-u,
• table-header-group – zbliżona do table-row-group, z tym że jest wyświetlana zawsze przed innymi
wierszami; jeśli w tabeli jest kilka elementów z ustawionym display: table-header-group, tylko pierwszy jest
tak traktowany, a pozostałe są traktowane jak table-row-group; odpowiada <thead> w (X)HTML-u,
• table-footer-group – analogiczna do table-header-group, z tym że jest wyświetlana po wszystkich
wierszach; zasada, że tylko 1. element
w tabeli jest w ten sposób traktowany, również ma zastosowanie; odpowiada <tfoot> w (X)HTML-u,
• table-column – element jest kolumną komórek; odpowiada <col>
w (X)HTML-u,
• table-column-group – element jest grupą kolumn (1 lub więcej kolumn); odpowiada <colgroup> w
(X)HTML-u,
• table-cell – element jest komórką tabeli; odpowiada <td> lub <th>
w (X)HTML-u,
• table-caption – element jest nagłówkiem tabeli; odpowiada <caption> w (X)HTML-u.
Tabele: display i ważniejsze właściwości 3/4
• Elementy w środku tabeli (takie jak komórki) to prostokąty ze swoją zawartością i ramkami.
Mają również padding, ale nie posiadają własnych marginesów.
• table-layout – określa sposób układania komórek, wierszy i kolumn:
fixed – poziomy układ nie zależy od zawartości komórek, lecz od szerokości tabeli,
kolumn, ramek oraz odstępów między komórkami,
auto – poziomy układ zależy nie tylko od własności komórek,
ale także od ich zawartości,
• visibility: collapse – ukrywa wiersz lub kolumnę, pozostawiając miejsce dla sąsiednich
elementów – można to wykorzystać w skryptach.
• Wyrównanie poziome zawartości komórki ustawia się za pomocą text-align.
• vertical-align – określa ułożenie komórki w wierszu:
baseline – linia bazowa komórki jest na tej samej wysokości co linia bazowa pierwszego
wiersza (jeśli komórka obejmuje kilka wierszy),
top – góra komórki jest na wysokości góry pierwszego wiersza (jeśli komórka obejmuje
kilka wierszy),
bottom – dół komórki jest na wysokości dołu ostatniego wiersza (jeśli komórka obejmuje
kilka wierszy),
middle – środek komórki jest na wysokości środka wierszy, które obejmuje,
Tabele: display i ważniejsze właściwości 4/4

• Lina bazowa komórki to linia bazowa pierwszego elementu liniowego

w tej komórce.
Tło komórki

• Ostateczne tło komórki jest zależne od poprzednich warstw tabeli (poszczególne

warstwy mogą być przezroczyste lub mieć własny kolor tła).
• Na samym dole znajduje się element tabeli, na górze – element komórki.
Tabele - krawędzie 1/2
• border-collapse – wybiera 1 z 2 modeli renderowania ramek:
collapse – model łączenia krawędzi między komórkami,
separate – model definiowania oddzielnych krawędzi dla każdej komórki,
• border-spacing – określa odległości między krawędziami sąsiednich komórek
(dla border-collapse: separate):
długość (np. w pikselach); jeśli podana jest jedna długość – określa odstęp w pionie i w poziomie;
jeśli podane są obie długości – pierwsza określa odległość w poziomie, druga – w pionie,
inherit – dziedziczenie wartości od rodzica.
• empty-cells – określa zachowanie krawędzi i tła dla komórek, które są puste
(dla border-collapse: spearate):
• show – zachowanie jak dla komórek z zawartością,
• hide – nie są wyświetlane ani tło, ani krawędzie; jeśli wszystkie komórki
w wierszu są puste i mają empty-cells: hide – wiersz nie jest wyświetlany,
• W modelu border-collapse: collapse informacje na temat krawędzi mogą pochodzić z różnych
elementów. Przeglądarka musi rozwiązać konflikty.
• border-style: hidden ma najwyższy priorytet, border-style: none najniższy. Wygrywa ramka
grubsza. W przypadku kolorów ramki priorytet jest zgodny
z elementem warstwowym (najwyższy ma kolor ramki komórki, najniższy – kolor ramki tabeli).
Tabele – krawędzie 2/2

• border-style – niektóre rodzaje ramek mają inne znaczenie dla tabel niż
dla pozostałych elementów. Poniżej tylko te rodzaje ramek, których
wygląd się różni:
hidden – to samo co none, dodatkowo w przypadku border-collapse:
collapse blokuje wyświetlanie ramek pochodzących od innych
elementów (przy rozwiązywaniu konfliktów),
inset – w modelu osobnych ramek dla komórek (border-collapse:
separate) ramka wygląda na wklęsłą, w modelu łączenia ramek (border-
collapse: collapse) zachowuje się jak ridge,
outset – w modelu osobnych ramek dla komórek (border-collapse:
separate) ramka wygląda na wypukłą, w modelu łączenia ramek
(border-collapse: collapse) zachowuje się jak groove.
Tabele – przykład: HTML
<body>
<table> <!-- tabela na całą szerokość -->
<caption>Rasy psów</caption>
<colgroup> <col id="kol1"> <col> <col> </colgroup>
<thead>
<tr> <th>Oryginalna nazwa rasy</th> <th>Nazwa polska</th> <th>Pochodzenie</th> </tr>
</thead>
<tbody>
<tr>
<td lang="de-DE">deutsch Drahthaar</td> <td class="kom1">wyżeł niemiecki szorstkowłosy</td>
<td class="kom2">Niemcy</td>
</tr>
<tr>
<td lang="fr-FR">basset fauve de Bretagne</td><td>basset bretoński</td> <td>Francja</td>
</tr>
</tbody>
<tfoot>
<tr> <th>Podsumowanie:</th> <th>2 rasy</th> <th>2 kraje</th> </tr>
</tfoot>
</table>
</body>
Tabele – przykład: CSS
table {
border-collapse: collapse; /*krawędzie scalone, zamiast odrębnych krawędzi dla sąsiednich
komórek*/
border: 5px solid brown; /*krwędź dla całej tabeli*/ }
#kol1 { border: 3px solid black; } /*krawędź dla kolumny o identyfikatorze #kol1*/
td {
border: 1px solid red; /*krawędź zwykłej komórki*/ padding: 1em; }
th {
border: 2px solid fuchsia; /*krawędź komórki nagłówkowej*/ padding: 1em; }
td.kom1 { border: 5px dashed blue; } /*krawędź komórki o klasie kom1*/
td.kom2 { border: 5px solid green; } /*krawędź komórki o klasie kom2*/
/*tło sekcji tfoot w tabeli*/
tfoot {background-color: lightgray;}
/*tło sekcji thead w tabeli*/
thead {background-color: lightyellow;}
/*tło sekcji tbody w tabeli*/
tbody {background-color: white;}
692 – Krawędzie tabeli: efekt
692 – Krawędzie tabeli

1. Zapisz style.html pod nazwą 692.html. Stwórz nowy plik 692.css i dołącz go do html
modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color) na
snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na 0px
3. .tabela – ustaw scalanie krawędzi komórek (border-collapse: collapse) oraz krawędzie:
1. Górna krawędź tabeli ma być ciągłą (solid) niebieską (blue) linią o grubości 3px
(border-top-width, border-top-style, border-top-color lub border)
2. Prawa krawędź tabeli ma być kropkowaną (dotted) zieloną (green) linią 4px
3. Dolna krawędź tabeli ma być ciągłą (solid) czerwoną (red) linią 5px
4. Lewa krawędź tabeli ma być przerywaną (dashed) szarą (gray) linią 2px
5. .tabela__tr – ustaw aby krawędzie dolna i górna (border-top, border-bottom) były
wyświetlane przerywaną (dashed) niebieską (blue) linią 1px.
4. .tabela__td – ustaw aby krawędzie lewa i prawa (border-left, border-right) nie były
wyświetlane (none). Ustaw odstępy (padding) 5px.
5. .tabela__th – ustaw kolor tła na żółty (yellow)
6. Przetestuj stronę w 2 przeglądarkach
7. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Responsywny układ strony

Responsywny układ
strony
Atrybut „media” w HTML
Atrybut media elementu link określa dla jakich typów urządzeń przygotowano arkusz stylów
Przeglądarka wie na jakim urządzniu działa, i wczyta jedynie te arkusze które pasują do urządzenia –
zgodnie wartością atrybutu media
Do CSS 2.1 włącznie dostępne były jedynie poniższe wartości
all - wszystkie dostępne typy z listy poniżej
braille - urządzenia obsługujące język Braille’a
handheld - niewielkie urządzenia przenośne np. PDA
print - drukarki
projection - projektory
screen - ekrany
aural - syntezatory mowy
tty - terminale znakowe
tv – telewizory

<html>
<head>
<link rel="stylesheet" href="arkusz.css" type="text/css" media=”screen”>
</head>
<body>…</body>
</html>
CSS Media Queries
• Media Queries to jeden z zatwierdzonych modułów CSS 3
• Wspierany przez nowe wersje ważniejszych przeglądarek
• Rozszerza możliwości atrybutu media znanego z CSS 2.1 o wstawianie warunków
• Style z przykładów zostaną użyte tylko dla mediów (ekranów, drukarek itp.) które są w stanie
prezentować kolory

<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" type="text/css" href="/style.css" media="all and (color)">
</head>
<body> … </body>
</html>

@import url(style.css) all and (color);

/*@import musi być przed innymi regułami CSS!*/
@media all and (color) {
p {color: blue;}
}
Media queries - parametry
• Parametry urządzenia o których wie przeglądarka:
• width - określenie wartości szerokości okna przeglądarki internetowej (np. min-width: 400px)
• height - określenie wartości wysokości okna przeglądarki internetowej (np. max-height: 200px)
• device-width - określenie wartości rozdzielczości ekranu urządzenia szerokość (np. device-width:
300px)
• device-height - określenie wartości rozdzielczości ekranu urządzenia wysokość (np. device-height:
150px)
• color - określenie liczby bitów na kolor lub określenie czy urządzenie posiada kolorowy ekran (np. color: 8)
• color-index - określenie wartości głębi kolorów, które obsługuje dane urządzenie (np. min-color-index:
256)
• aspect-ratio - określenie wartości proporcji szerokości do wysokości okna przeglądarki internetowej (np.
aspect-ratio: 16/9)
• device-aspect-ratio - określenie wartości proporcji szerokości do wysokości rozdzielczości ekranu
urządzenia (np. aspect-ratio: 4/3)
• grid - określenie urządzenia z ograniczonymi możliwościami wyświetlania (np. grid: 1)
• monochrome - określenie liczby bitów na piksel w urządzeniach monochromatycznych, jednokolorowych
(np. monochrome: 2)
• orientation - określenie orientacji pionowej lub poziomej urządzenia (np. orientation: landscape)
• resolution - określenie wartości gęstości pikseli dla danego urządzenia (np. resolution: 300dpi)
• scan - określenie czy urządzenie posiada skanowanie obrazu progresywne czy międzyliniowe (np. scan:
interlace)
Operatory w Media Queries

• and – oba warunki muszą być spełnione

• not – negacja (przeciwieństwo)
• , - wystarczy że jeden z warunków jest spełniony (lub)
Media queries – przykład użycia w HTML

<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" media="screen and (color)" href="a.css" />
<link rel="stylesheet" type="text/css" href="b.css" media="all and (color)">
<link rel="stylesheet" media="not screen and (color)" href="c.css" />
<link rel="stylesheet" media="only screen and (color)" href="d.css" />
<link rel="stylesheet" media="print and (min-width: 25cm)" href="e.css" />
<link rel="stylesheet" media="screen and (device-height: 600px)" href="f.css"
/>
<link rel="stylesheet" media="all and (min-color-index: 256)" href="g.css" />
<link rel="stylesheet" media="print and (color)" href="h.css" />
<link rel="stylesheet" media="print and (monochrome)" href="i.css" />
</head>
<body> … </body>
</html>
Media queries – przykład użycia w CSS 1/2

@import url(color.css) screen and (color); /*kolorowe ekrany*/

/*@import musi być przed innymi regułami CSS!*/
@media all and (min-width:500px) { … } /*co najmniej 500px*/
@media (min-width:500px) { … } /*identyczne jak powyżej*/
@media (orientation: portrait) { … } /*ułożenie portertowe*/
@media all and (orientation: portrait) { … } /*identyczne jak powyżej*/
@media screen and (color), projection and (color) { … } /*ekrany i proj. kolorowe*/
@media screen and (min-width: 400px) and (max-width: 700px) { … }
/*ekrany o szerokości od 400 do 700px, ekrany i urz. przen o szerokości co najmniej 20 em */
@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
@media screen and (device-width: 800px) { … } /*ekrany o szerok. dokładnie 800px*/
@media all and (orientation:portrait) { … } /*ułożenie portertowe*/
@media all and (orientation:landscape) { … } /*ułożenie krajobrazowe*/
@media screen and (device-aspect-ratio: 16/9) { … } /* 3 razy ekrany 16:9*/
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … } /*ekrany 16:9*/
@media all and (color) { … } /*wszystko co obsługuje kolory*/
Media queries – przykład użycia w CSS 2/2

@media all and (min-color: 1) { … } /*wszystko co obsługuje kolory*/

@media all and (min-color: 2) { … } /*urz. zapisujące kolor w co najmniej 2 bitach*/
@media all and (color-index) { … } /*wszystko co obsługuje kolory*/
@media all and (min-color-index: 1) { … } /*wszystko co obsługuje kolory*/
@media all and (monochrome) { … } /*wszystko co nie obsługuje kolorów */
@media all and (min-monochrome: 1) { … } /*wszystko co nie obsługuje kolorów */
@media print and (min-resolution: 300dpi) { … } /*druk. o rozdz. co naj. 300 dpi */
@media print and (min-resolution: 118dpcm) { … } /*druk. o rozdz. 118dpcm*/
@media tv and (scan: progressive) { … } /*tv ze skanowaniem progresywnym*/
@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }
/*urządzenia przenośne bez skalowania obrazu o max szerokości 15em i max wysokości 7em*/
702 A – Responsywny układ witryny – małe ekrany: efekt
702 A – Responsywny układ witryny – małe ekrany: efekt

1. Ściągnij z moodle pliki-startowe.zip. Rozpakuj, a plik uklad.html (to nieco zmodyfikowana

wersja pliku style.html) skopiuj do katalogu w którym pracujesz. Zmień nazwę pliku na
702.html. Zapoznaj się z jego zawartością. Stwórz nowy plik 702.css i dołącz go do html
modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas:
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color) na
snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na 0px
3. .article__img – ustaw maksymalną szerokość (max-width) na 100%.
4. .formularz – ustaw elastyczny kontener (display: flex) i wyświetl dzieci w jednej kolumnie
(flex-direction: column)
5. .witryna - ustaw siatkę grid (display: flex) o odstępach elementów 5px (grid-gap) i
nazwanych obszarach: grid-template-areas: "naglowek" "nawigacja" "tresc" "dodatek"
"reklamy" "stopka"
6. Dla klas: .naglowek, .nawigacja, .tresc, .dodatek, .reklamy, .stopka ustaw właściwość
grid-area na odpowiednią nazwę obszaru z poprzedniego punktu, np. dla .naglowek wpisz
grid-area: naglowek. Ustaw kolory tła (background-color), kolejno: goldenrod, yellow, gold,
bisque, beige, lightgray
7. Przetestuj stronę w 2 przeglądarkach zmieniając rozmiar okna
8. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
702 B – Responsywny układ witryny – średnie ekrany: efekt
702 B – Responsywny układ witryny – średnie ekrany

1. Kontynuuj pracę na plikach z poprzedniego ćwiczenia. W pliku CSS dodaj:

2. Regułę @media dla ekranów o rozmiarze co najmniej 500px: @media (min-width: 500px)
{ … }. Wewnątrz reguły (w nawiasach klamrowych) ustal zachowanie dla następujących klas:
3. .witryna – ustaw
1. 2 kolumny dla siatki grid o szerokości 1 i 3 jednostki fr: grid-template-columns: 1fr 3fr;
2. Nazwane obszary w czterech wierszach: grid-template-areas:
"naglowek naglowek"
"nawigacja nawigacja"
"dodatek tresc"
"reklamy stopka";
4. .lista--linki – ustaw
1. elastyczny kontener (display: flex),
2. Pozwól na wiele linii (flex-wrap: wrap)
3. wyrównanie z wolnym miejscem wokół dzieci: justify-content: space-around
5. .lista__li—linki – ustaw wyświetlanie elementów w linii: display: inline
6. Przetestuj stronę w 2 przeglądarkach zmieniając rozmiar okna. Co się przy szerokości
przeglądarki poniżej 500px a co powyżej?
7. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
702 C – Responsywny układ witryny – duże ekrany: efekt
702 C – Responsywny układ witryny – duże ekrany: efekt

1. Kontynuuj pracę na plikach z poprzedniego ćwiczenia. W pliku CSS dodaj:

2. Regułę @media dla ekranów o rozmiarze co najmniej 750px: @media (min-width: 750px)
{ … }. Wewnątrz reguły (w nawiasach klamrowych) ustal zachowanie dla następujących klas:
3. .witryna – ustaw
1. 3 kolumny dla siatki grid o szerokości 1, 4 i 1 jednostki fr: grid-template-columns: 1fr
4fr 1fr;
2. Nazwane obszary w czterech wierszach: grid-template-areas:
"naglowek naglowek naglowek"
"nawigacja tresc dodatek"
"nawigacja tresc reklamy"
"stopka stopka stopka"
4. .lista--linki – ustaw elastyczny kontener (display: flex), tylko w jednej linii (flex-wrap:
nowrap), wyświetlanie w kolumnach (flex-direction: column), wyrównanie do góry
(justify-content: start) i zerowe odległości od treści (padding) 0px;
5. .lista__li--linki – ustaw wyświetlanie elementów w linii: display: inline
6. Przetestuj stronę w 2 przeglądarkach zmieniając rozmiar okna. Co się przy szerokości
przeglądarki około 500px i około 750px?
7. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Narzędzia
Narzędzia

• Przed projektowaniem sprawdź jakich przeglądarek i jakich rozdzielczości używają

Internauci: www.ranking.pl
• Masz kłopoty z dobieraniem kolorów? Spróbuj tu:
http://colorschemedesigner.com/
https://kuler.adobe.com
• Współczesne przeglądarki mają wbudowane narządzia pozwalające na analizowanie i
wykrywanie problemów w kodzie HTML/CSS
• Przykład Firefox:
• https://mdn.mozillademos.org/files/7459/inspector-opening.png
710 – Diagnostyka błędów: efekt
710 – Diagnostyka błędów

1. W wybranej przeglądarce kliknij prawy klawisz myszy na wybranej

stronie i wybierz opcję „Zbadaj element” lub podobnie brzmiący
2. W panelu dolnym który się pojawi, kliknij na ikonę przypominającą
lupę (np. chrome, opera) lub przypominającą kursor nad ekranem (np.
firefox)
3. Przesuń myszkę nad górnym panelem wyświetlającym stronę –
kolejne elementy HTML powinny być wyróżniane. Po wybraniu
fragmentu strony, w dolnym panelu powinien pojawić się kod HTML
tworzący ten obszar oraz style które mają do niego zastosowanie.
4. Spróbuj zmodyfikować style bezpośrednio w inspektorze przeglądarki.
1. Czy wygląd strony się zmienia?
2. Czy wprowadzone zmiany faktycznie zostaną zapisane w
modyfikowanym pliku CSS?
Emmet przykłady

div+p+bq zostanie rozwinięte do: html:5 zostanie rozwinięte do:

<div></div> <!doctype html>
<p></p> <html lang="en">
<blockquote></blockquote> <head>
<meta charset="UTF-8" />
ul>li*5 zostanie rozwinięte do: <title>Document</title>
<ul> </head>
<li></li> <body>
<li></li> </body>
<li></li> </html>
<li></li>
<li></li>
</ul>

ul>li.item$*5 zostanie rozwinięte do:

<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
730 – Emmet: efekt

Naciśnięcie
tabulatora
730 – Emmet

1. Jeśli Twój edytor nie ma wbudowanej obsługi składni Emmet/Zen Code,

spróbuj znaleźć odpowiedni dodatek do edytora i go zainstalować. Jeśli
ma (np. Visual Studio Code), możesz przejść do dalszej części ćwiczenia.
2. Utwórz nowy dokument HTML
3. Wykorzystując składnię Emmet/Zen dodaj kod HTML:
1. W Visual Studio Code skrót do rozwijania składni Emmet/Zen to
tabulator
2. Na przykład stworzenie szablonu dokumentu HTML 5 to „html:5” i
wciśnięcie tabulatora, a stworzenie artykułu z pięcioma akapitami o
klasie akapit to „article>p*5”
3. Lisa dostępnych skrótow: http://docs.emmet.io
Szablon Boilerplate
• Boilerplate to darmowy szablon strony HTML 5/CSS przygotowany na podstawie doświadczeń wielu
deweloperów
• W szablonie zawarte są min:
Sztuczki przyspieszające ładowanie strony (np. umieszczenie kodu JS w optymalnym miejscu kodu)
„Reset” stylów CSS (ustalenie właściwości CSS dla wszystkich elementów aby wyglądały one identycznie
we wszystkich przeglądarkach)
Optymalizacje dla przeglądarek mobilnych
Optymalizacje dla przestanych przeglądarek (IE 6) i różnych wersji Internet Explorera
Pouplarna biblioteka JQuery (JavaScript)
Biblioteka Modernizr (JavaScript) – służąca wykrywaniu jakie elementy HTML/CSS obsługuje
przeglądarka
Kod Google Analytics
• Kilka z usprawnień:
• Wskazówka dla IE żeby używał najnowszej dostępnej wersji (żeby nie przełączał się w tryb
zgodności). Instrukcja także dla Chrome pracującego w trybie IE.: <meta http-equiv="X-UA-
Compatible" content="IE=edge,chrome=1" />
• Wskazówka dla urządzeń mobilnych żeby nie skalowały strony po załadowaniu (załadowały stronę w
skali 1:1). Użytkownik będzie mógł samodzielnie powiększyć/pomniejszyć ekran: <meta
name="viewport" content="width=device-width; initial-scale=1" />
• Instrukcje dla starszych wersji Internet Explorera: <!--[if lt IE 8]>
Sass/Scss – pre-procesor CSS 1/2

• Preprocesory CSS to narzędzia, które rozszerzają możliwości języka CSS wprowadzając

dodatkowe instrukcje, których CSS jeszcze nie oferuje. Umożliwia to szybsze pisanie
krótszego i przejrzystszego kodu źródłowego.
• Pliki stworzone w języku danego pre-procesora nie są obsługiwane przez przeglądarki.
Muszą być wcześniej skompilowane do kodu CSS.
• Przykłady popularnych pre-procesorów to Sass i LESS
• Sass - Syntactically awesome style sheets to jeden z najpopularniejszych preprocesorów CSS
• Poprawny kod CSS jest poprawnym kodem Sass
• Kod Sass może być kompilowany do kodu CSS na kilka sposobów:
Przez twórcę witryny przy budowaniu projektu czy publikowaniu strony, tak by witryna
korzystała ze skompilowanych plików. Do kompilacji kodu można wykorzystać komendy
linii poleceń, narzędzia z graficznym interfejsem użytkownika czy kompilatory online.
Dynamicznie, w locie po stronie serwera (pewien narzut na moc obliczeniową serwera
oraz drobne opóźnienie ładowania się strony)
Dynamicznie po stronie klienta przez przeglądarkę (za pomocą javascript) – nie jest to
polecane ze względu na dodatkowy narzut czasu ładowania strony oraz zużycia mocy
obliczeniowej.
Sass/Scss – pre-procesor CSS 2/2

• Pliki Sass można tworzyć w dwóch formatach (rozszerzeniach plików):

sass – starsza składnia – wykorzystuje znaki tabulacji i wcięcia
scss – nowsza składnia, bardziej zbliżona do CSS ze względu na wykorzystanie
nawiasów klamrowych zamiast tabulatorów i wcięć. Łatwiejsza do zrozumienia dla
osób które już znają CSS.
• Witryna Sass: https://sass-lang.com/
• Instrukcja jak zainstalować narzędzie linii poleceń do kompilacji kodu Sass: https://sass-
lang.com/install
• Przykładowy kompilator kodu Sass online: https://www.sassmeister.com/
• Przykładowy graficzny program do kompilacji kodu Sass: http://koala-app.com/
Scss – tworzenie zmiennych
• Wszystkie poniższe przykłady są w formacie scss (bardziej przypomina CSS, bo wykorzystuje nawiasy klamrowe)
• Tworzenie zmiennych – na przykład definiujemy zmienną i zapisujemy do niej konkretny kolor. Następnie
wszędzie w kodzie zamiast nazwy koloru używamy nazwy zmiennej. Jeśli przyjdzie kiedyś potrzeba by zmienić
kolor, to wystarczy zmienić zawartość zmiennej kolor zamiast poprawiać dziesiątki czy setki linii kodu, w których
użyty był dany kolor. Nazwy zmiennych rozpoczynają się od znaku $.

$font: Helvetica, sans-serif;

$kolor: #333;
arkusz.css (po skompilowaniu)
body { body {
font: 100% $font; font: 100% Helvetica, sans-serif;
color: $kolor; color: #333;
} }
Scss - zagnieżdżanie reguł – pozwala stworzyć przejrzystszy kod źródłowy

nav {
ul {
margin: 0; arkusz.css (po skompilowaniu)
padding: 0; nav ul {
list-style: none; margin: 0;
} padding: 0;
list-style: none;
li { }
display: inline-block; nav li {
} display: inline-block;
}
a { nav a {
display: block; display: block;
padding: 6px 12px; padding: 6px 12px;
text-decoration: none; text-decoration: none;
}
} }
Scss – pliki z fragmentami kodu
Pliki z fragmentami kodu (tzw. partials) – można tworzyć pliki z fragmentami kodu które można
potem wielokrotnie wykorzystywać w innych miejscach. Pozwala to zredukować ilość tworzonego kodu.
Nazwy plików z fragmentami kodu rozpoczynają się od podkreślenia, a dołącza się je za pomocą
instrukcji @import – (nie trzeba podawać pełnej nazwy pliku: pomija się początkowe podkreślenie i
rozszerzenie pliku)
_reset.scss arkusz.css (po skompilowaniu)
// _reset.scss html,
html, body,
body, ul,
ul, ol {
ol { margin: 0;
margin: 0; padding: 0;
padding: 0; }
} body {
font: 100% Helvetica, sans-serif;
arkusz.scss
@import 'reset'; background-color: #efefef;
body { }
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
Scss - Fragmenty kodu z parametrami (tzw. mixins)
Fragmenty kodu z parametrami (tzw. mixins). Przydatne na przykład w sytuacji, gdzie trzeba dodawać
oprócz właściwości CSS także jej warianty z prefiksami specyficznymi dla poszczególnych przeglądarek.
Definicja takiego fragmentu rozpoczyna się od słowa @mixin, a przy użyciu używa się słowa @include.

arkusz.scss arkusz.css (po skompilowaniu)

@mixin transformacja($akcja) { .klasa {
-webkit-transform: $akcja; -webkit-transform: rotate(30deg);
-ms-transform: $akcja; -ms-transform: rotate(30deg);
transform: $akcja; transform: rotate(30deg);
} }
.klasa {
@include transformacja(rotate(30deg));
}
Scss - dziedziczenie

 Fragmenty kodu które mogą być dziedziczone przez inne fragmenty kodu. Kod
który może być dziedziczony oznacza się znakiem procent - %.
arkusz.scss
%krawedz-i-odstepy {
border: 1px solid #ccc;
padding: 10px;
color: #333;
} arkusz.css (po skompilowaniu)
.ostrzezenie { .ostrzezenie, .sukces, .blad {
@extend %krawedz-i-odstepy; border: 1px solid #ccc;
} padding: 10px;
.sukces { color: #333;
@extend %krawedz-i-odstepy; }
border-color: green; .sukces {
} border-color: green;
.blad { }
@extend %krawedz-i-odstepy; .blad {
border-color: red; border-color: red;
} }
Scss - operatory
Operatory, działania matematyczne i pętle: możliwe jest dokonywanie obliczeń

arkusz.scss arkusz.css (po skompilowaniu)

.kontener { .kontener {
width: 100%; width: 100%;
} }
main { main {
float: left; float: left;
width: 600px / 960px * 100%; width: 62.5%;
} }
aside { aside {
float: right; float: right;
width: 300px / 960px * 100%; width: 31.25%;
} }
Scss – przykład: HTML
<body>
<main>
<article>
<h1>Bocian Biały</h1>
<img src="https://upload.wikimedia.org/wikiped..." alt="Bocian biały">
<p>Gatunek dużego ptaka brodzącego z rodziny bocianów (Ciconiidae)</p>
</article>
<article class="wazne">
<h1>Bocian czarny</h1>
<img src="https://upload.wikimedia.org/wikiped... " alt="Bocian czarny">
<p>Gwarowo: hajstra (Ciconia nigra) – gatunek dużego ptaka ...</p>
</article>
<article>
<h1>Bocian czaronodzioby</h1>
<img src="https://upload.wikimedia.org/wi..." alt="Bocian czarnodzioby">
<p>Bocian czarnodzioby (Ciconia boyciana) – gatunek dużego ...</p>
<p>Od bociana białego różni się czarnym dziobem i czerwoną ...</p>
</article>
<!-- i tak dalej ...-->
</main>
</body>
Scss – przykład: Scss
$kolor-tekstu-zwykly: darkslategray; /*zdefiniowanie różnych zmiennych */
$kolor-tekstu-wyrozniony: crimson; $kolor-tla-zwykly: cornsilk;
$kolor-tla-wyrozniony: darkorange; $promien-maly: 10px; $promien-duzy: 35px;
$margines-maly: 10px; $margines-duzy: 40px;
/*zdefiniowanie mixin tworzącego krawędzie o 3 parametrach: promień zaokrąglenia rogów, grubość
podstawowa krawędzi, kolor krawędzi*/
@mixin krawedzie($promien,$grubosc,$kolor) { /*prefiksy dla starych wersji przeglądarek*/
-webkit-border-radius: $promien; -moz-border-radius: $promien;
border-radius: $promien; /*ustawienie promienia*/
border-left: $grubosc*4 solid $kolor; /*ustawienie krawędzi lewej i prawej na 4 razy większą
grubość niż dolnej i górnej*/
border-right: $grubosc*4 solid $kolor; border-top: $grubosc solid $kolor;
border-bottom: $grubosc solid $kolor; }
h1 {/*nagłówki*/ color: $kolor-tekstu-wyrozniony; /*użycie zmiennej*/
margin: $margines-maly; background-color: $kolor-tla-wyrozniony;
@include krawedzie($promien-maly, 1px, $kolor-tekstu-wyrozniony); /*użycie mixin -
przekazanie 3 parametrów, z czego dwa to nazwy zmiennych*/ }
article { margin: $margines-duzy; background-color: $kolor-tla-zwykly;
@include krawedzie($promien-duzy, 3px, $kolor-tekstu-zwykly ); }
p { margin: $margines-maly; color: $kolor-tekstu-zwykly; }
img { margin: $margines-maly; max-width: 100px;
@include krawedzie($promien-maly, 1px, $kolor-tekstu-zwykly ); }
Scss – przykład: CSS po skompilowaniu
@charset "UTF-8";
h1 { /*nagłówki*/ color: crimson; /*użycie zmiennej*/ margin: 10px;
background-color: darkorange;
-webkit-border-radius:10px;-moz-border-radius:10px;/*prefiksy dla starych wersji przegląd.*/
border-radius: 10px ; /*ustawienie promienia*/
/*ustawienie krawędzi lewej i prawej na 4 razy większą grubość niż dolnej i górnej*/
border-left: 4px solid crimson; border-right: 4px solid crimson;
border-top: 1px solid crimson; border-bottom: 1px solid crimson; }
article { margin: 40px; background-color: cornsilk;
-webkit-border-radius:35px;-moz-border-radius:35px;/*prefiksy dla starych wersji przegląd.*/
border-radius: 35px; /*ustawienie promienia*/
/*ustawienie krawędzi lewej i prawej na 4 razy większą grubość niż dolnej i górnej*/
border-left: 12px solid darkslategray; border-right: 12px solid darkslategray;
border-top: 3px solid darkslategray; border-bottom: 3px solid darkslategray; }
p { margin: 10px; color: darkslategray; }
img { margin: 10px; max-width: 100px;
-webkit-border-radius:10px;-moz-border-radius: 10px; /*prefiksy dla starych wersji przegląd.*/
border-radius: 10px; /*ustawienie promienia*/
/*ustawienie krawędzi lewej i prawej na 4 razy większą grubość niż dolnej i górnej*/
border-left: 4px solid darkslategray; border-right: 4px solid darkslategray;
border-top: 1px solid darkslategray; border-bottom: 1px solid darkslategray;}
Scss – przykład: efekt
752 – Sass: efekt
 752 – Sass
1. Zapisz style.html pod nazwą 752.html. Dołącz nie istniejący jeszcze plik 752.css do html
modyfikując element <link>. Utwórz nowy plik 752.scss i dodaj w nim:
2. Następujące zmienne: $odleglosc-mala: 2px; $odleglosc-duza: 20px; $kolorB: maroon; $kolorC:
darkorange; $kolorD: goldenrod; $kolorE: indigo; $promien: 10px;
3. Funkcję (@mixin) o nazwie krawedz(…) z następującymi argumentami: $grubosc, $kolor, $promien.
Wewnątrz ustaw krawędź (border) o grubości $grubosc, rysowaną jako linia ciągła (solid) i w
kolorze $kolor. Rogi (border-radius) mają mieć zaokrąglenie o promieniu $promien.
4. .dokument - rozmiar czcionki (font-size) na $odleglosc-duza oraz kolor tekstu (color) na $kolorE
5. .naglowek - kolor tła (background-color) na $kolorC oraz użyj funkcji krawedz(…) z odpowiednimi
argumentami: @include krawedz($odleglosc-duza, $kolorB , $promien)
6. .tresc - margines (margin) na $odleglosc-mala, kolor tła na wartość $kolorD . Użyj funkcji
krawedz(…) z poprzedniego punktu, lecz jako koloru użyj $kolorE.
7. .article - margines górny (margin-top) o wartości $odleglosc-duza oraz użyj funkcji krawedz(…) z
argumentami: $odleglosc-mala, $kolorB, $promien
8. .article_h2 - kolor tła na $kolorC oraz użyj funkcji krawedz(…) z argumentami jak w poprzednim
punkcie
9. Odstęp (padding) o wartości $odleglosc-duza dla klas: .dokument, .naglowek, .tresc, .article,
.article_h2
10.Skompiluj kod SCSS do CSS używając komendy sass, programu Koala lub dowolnego kompilatora Saas
online. Plik wynikowy zapisz jako 752.css.
11.Przetestuj działanie w 2 przeglądarkach i sprawdź poprawność kodu CSS.
Twitter Bootstrap

• Darmowy framework CSS - zbiór narzędzi ułatwiający tworzenie witryn

• Bazuje na gotowych rozwiązaniach HTML, CSS i JavaScript
• Stworzony w firmie Twitter
• Pozwala w prosty sposób konstruować responsywne witryny (dostosowujące się do
rozdzielczości ekranu)
• Układ elementów ustala się za pomocą siatki – siatkę konstruuje się dobierając
predefiniowane klasy CSS w formacie col-nn lub col-xx-nn, gdzie
xx to jeden z predefiniowanych zakresów rozmaru ekranu, dla którego obowiązuje
styl.
nn to szerokość elementu (od 1 do 12, przy czym 12 to pełna szerokość ekranu). Jeśli
rozmiar wszystkich elementów w wierszu przekroczy 12, to ostatni element zostanie
przeniesiony poniżej.
• W Bootstrap jest wiele pre-definiowanych klas CSS które po prostu wystarczy
wykorzystać w kodzie HTML.
• Bootstrap jest stworzony przy użyciu pre-procesora CSS. Jeśli nie odpowiadają nam na
przykład punkty przełamania, to można stworzyć własny wariant Bootstrapa.
Bootstrap - kontener

• Kontener to miejsce na treść. Rozróżniamy 2 typy kontenerów:

• O ustalonej szerokości – klasa „container” – wyświetla zawartość na szerokość
max-width

• Płynny – klasa „container-fluid” – zajmuje całą szerokość

Bootstrap – wiersze i punkty przełamania

• Elementy które mają znaleźć się w tym samym wierszu należy zamknąć w rodzicu z
ustawioną klasą „row”.
• Punkty przełamania (szerokości ekranu) przy których Bootstrap przechodzi do innego układu
witryny, uzależnionego od użytej klasy:
Urządzenia małe, to te, które, mają szerokość ekranu mniejszą niż 576px.
Urządzenia bardzo duże to te, które mają szerokość ekranu większą niż 1200px
• Pomiędzy są jeszcze 2 kolejne punkty przełamania.
Bootstrap – klasy .col-

• W zależności od tego, dla jakiego rozmiaru ekranu przewidujemy dany układ treści,
używamy odpowiedniej klasy col-nn lub col-xx-nn. Dla danego elementu możemy
równocześnie użyć wielu klas, określając różny układ dla różnych rozmiarów ekranów.
• Witryna z której można ściągnąć framework i zapoznać się z dokumentacją:
https://getbootstrap.com
Bootstrap – przykłady układów 1/?2
• Elementy które powinny znajdować się w tym samym wierszu zamyka się w klasie row
• 3 równe kolumny dla małych lub większych ekranów (klasa col-sm). Dla bardzo małych ekranów
elementy będą wyświetlać się jeden pod drugim
Bootstrap – przykłady układów 2/2
W pierwszym wierszu 4 równe kolumny, w drugim wierszu 2 kolumny, jedna o szerokości 8/12, druga o
szerokości 4/12. Układ będzie zachowany nawet dla urządzeń z bardzo małymi ekranami (klasa col)
Bootstrap – przykład układu responsywnego 1/2

• Układ będzie zachowywać się inaczej dla urządzeń z bardzo małą szerokością ekranami
(klasy col) a inaczej dla urządzeń ze średnią szerokością ekranu (klasy col-md).
Dla średnich i większych ekranów (klasy col-md-nn)
W pierwszym wierszu, pierwszy element wyświetli się na 8/12 dostępnego miejsca a
drugi na 4/12 miejsca
W drugim wierszu wszystkie 3 elementy będą miały taką samą szerokość
W trzecim wierszu oba elementy zajmą po połowie miejsca.
Dla bardzo małych ekranów (klasy col):
Pierwszy element z pierwszego wiersza wyświetli się na całą szerokość (col-12). Przez
to drugi element z pierwszego wiersza się nie zmieści i przez to zostanie wyświetlony
poniżej, na połowę dostępnej szerokości (col-6)
W drugim wierszu zmieszczą się tylko 2 z 3 elementów (oba zostaną wyświetlone na
połowę dostępnej szerokości – col-6). Trzeci element się nie zmieści i zostanie
wyświetlony poniżej na połowę szerokości (col-6)
W trzecim wierszu oba elementy zajmą po połowie miejsca.
Bootstrap – przykład układu responsywnego 2/2
Bootstrap – przykład: HTML 1/2
<!doctype html> <html lang="pl"> <head> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" <!-- Bootstrap CSS -->
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4..." crossorigin="anonymous">
<title>Bociany</title> </head> <body>
<main class="container-fluid">
<section class="row">
<article class="col-12 col-md-3 col-xl-5 order-2 bg-secondary"> <h1>Bocian Biały</h1>
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia... " alt="Bocian biały">
<p>Gatunek dużego ptaka brodzącego z rodziny bocianów (Ciconiidae) ...</p> </article>
<article class="col-12 col-md-9 col-xl-7 order-1 wazne bg-primary">
<h1>Bocian czarny</h1>
<img class="img-fluid " src="https://upload.wikimedia.org/wikipe...jpg" alt="Bocian czarny">
<p>Gwarowo: hajstra (Ciconia nigra) – gatunek dużego ptaka z rodziny ... </p> </article>
</section>
<section class="row ">
<article class="col-6 col-sm-12 col-xl-6 bg-success"> <h1>Bocian czaronodzioby</h1>
<img class="img-fluid float-left m-2„ src="https://upload.... " alt="Bocian czarnodzioby">
<p>Bocian czarnodzioby (Ciconia boyciana) – gatunek dużego ...</p> </article>
Bootstrap – przykład: HTML 2/2
<article class="col-6 cols-sm-6 col-xl-3 bg-danger"> <h1>Bocian białobrzuchy</h1>
<img class="img-fluid " src="https://upload.wikimedia.org/w..." alt="Bocian białobrzuchy">
<p>Gatunek dużego ptaka brodzącego z rodziny bocianów występuj...</p></article>
<article class="col-12 col-sm-6 col-xl-3 bg-warning">
<h1>Bocian białoszyi</h1>
<img class="img-fluid " src="https://upload.wikimedia.org..." alt="Bocian białoszyi">
<p>Gatunek ptaka z rodziny bocianów (Ciconidae) z błyszczącym,...</p></article>
</section><section class="row">
<article class="col-10 col-sm-6 col-xl-4 bg-info"> <h1>Bocian garbaty</h1>
<img class="img-fluid float-left m-2" src="https://upload.wikime..." alt="Bocian garbaty">
<p>gatunek dużego ptaka z rodziny bocianów (Ciconiidae)... </p> </article>
<article class="col-12 col-sm-6 col-xl-8 bg-dark"> <h1>Bocian sinodzioby</h1>
<img class="img-fluid float-left" src="https://upload.wikime..." alt="Bocian sinodzioby">
<p>gatunek dużego ptaka z rodziny bocianów (Ciconiidae) z pros...</p></article>
</section> </main><!--Optional JavaScript jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4Y..." crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7..." crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1..." crossorigin="anonymous"></script>
</body></html>
Bootstrap – przykład: efekt
Efekt dla dużego ekranu (1280px) Efekt dla iPada. (768x1024) px

Efekt dla Galaxy S9 (360x740 px)

775 – Bootstrap: efekt
775 – Bootstrap

1. Zapisz style.html pod nazwą 775.html.

2. Wejdź na stronę Bootstrap: http://getbootstrap.com. W sekcji getting started znajdź
odpowiednie fragmenty kodu (dołączanie plików CSS i JavaScript), skopiuj je i wklej do
775.html aby dołączyć Twitter Bootstrap jako zdalne pliki hostowane w chmurze.
3. Dodaj klasę container-fluid dla elementu <body>, co określi wymiary treści.
4. Dodaj klasę row do następujących elementów: <header>, <main>, <aside>, <footer>. To
stworzy 4 wiersze w siatce Bootstrap.
5. Wewnątrz <header> dla poszczególnych elementów dodaj następujące klasy: <h1> - col-
lg-2 i order-2, <p> - col-lg-5 i order-3, <nav> - col-lg-5 i order-1. Ustawi to zasady
wyświetlania dla dużych i bardzo dużych ekranów, oraz zmieni kolejność wyświetlania.
6. Dla elementu <ul> wewnątrz elementu <nav>, dodaj klasę nav. Ponadto dla elementów
<li> tej listy dodaj klasę nav-item, a do <a> klasę nav-link. Tworzy to linki nawigacyjne.
7. Dla elementów <article> dodaj klasę col-xl-2, co wyświetli to 6 artykułów obok siebie.
8. Dla elementów <img> dodaj klasę img-fluid, co spowoduje skalowanie grafik.
9. Dla elementu <table> dodaj klasy table oraz table-responsive, co zapobiegnie problemom
z wyświetlaniem tabeli dla wąskich ekranów (tabelę da się wciąż przewijać w poprzek by
zobaczyć zawartość niewidocznych kolumn)
10.Sprawdź wygląd witryny. Co się dzieje gdy zmniejszasz szerokość okna przeglądarki?
780 – Bootstrap: efekt 1/2
780 – Bootstrap: efekt 2/2
780 – Bootstrap

1. Plik z ćw. 775 zapisz pod nazwą 780.html i dostosuj dodając dodatkowe klasy:
1. Wewnątrz elementu <header> dla elementu <h1> dodaj klasę col-md-4 a dla
elementu <p> klasę col-md-8. Elementowi <nav> dodaj taką klasę, aby wyświetlał się
na całą szerokość dla bardzo małych, małych i średnich urządzeń.
2. Artykuły <article> wyświetlają się w 6ciu równych kolumnach dla bardzo dużych
urządzeń. Dla mniejszych urządzeń wyświetlają się jeden pod drugim. Dodaj odpowiednie
klasy, aby dla dużych urządzeń wyświetlany były 4 artykuły obok siebie, dla średnich
urządzeń 3 artykuły obok siebie a dla małych urządzeń 2 artykuły obok siebie. Dla
bardzo małych urządzeń artykuły mają wyświetlać się jeden pod drugim.
3. Dla elementu <table> dodaj klasy które poprawią wygląd tabeli: table-striped
(wyróżnianie co drugiego wiersza), table-dark (ciemny motyw) oraz table-hover
(wyróżnianie wiersza nad którym jest kursor)
4. Dla etykiet formularza <label> dodaj klasę form-text a dla pól formularza <input>
dodaj klasę form-control – pola będą wyświetlane pod etykietami.
5. Ustaw kolory tła wyróżniające sekcje dokumentu: dla <header> dodaj bg-warning, dla
<main> dodaj bg-light a dla <footer> dodaj bg-secondary.
6. Sprawdź wygląd witryny w 2 przeglądarkach. Co się dzieje gdy zmniejszysz szerokość
okna przeglądarki?
lorem ipsum

• Łaciński tekst wzorowany na fragmencie traktatu Cycerona

• Stosowany do demonstracji krojów pisma (czcionek, fontów), wyglądu kolumny itp.
• Po raz pierwszy został użyty przez nieznanego drukarza w XVI w.
• Często spotykany na podstronach prezentujących dema i wyniki działania kodu
HTML
• Tekst można skopiować/wygenerować na wielu stronach internetowych, np.
http://www.ipsum-generator.com
• Jeśli w edytorze jest zainstalowany dodatek emmet, tekst można wygenerować
wpisując tekst lorem
 Automatyzacja budowania projektu 1/2
Niektóre typowe czynności optymalizacyjne związane z budowaniem projektu do formy gotowej to:
• Minifikacja – proces mający na celu zmniejszenie kodu źródłowego poprzez usunięcie niepotrzebnych znaków bez
zmieniania jego funkcjonalności.
Stosuje się to zwykle w językach CSS, JavaScript i HTML, tak by przesłanie takich plików do przeglądarki zajmowało jak
najmniej czasu i transferu danych. Usuwane są wcięcia (białe znaki), znaki nowej linii, komentarze, niekiedy są skracane
nazwy zmiennych. Efekt działania minifikacji jest podobny do działania zaciemniania kodu, lecz ma inny cel. Efekt jest
podobny jak w kompresji, tylko przeglądarka nie musi dekompresować kodu. Minifikację można też stosować łącznie z
kompresją taką jak deflate i gzip którą ustawia się w konfiguracji serwera www. Stosowanie minifikacji oraz włączanie
kompresji po stronie serwera www to szeroko stosowane i polecane metody optymalizacyjne mające realny wpływ na
redukcję czasu ładowania witryny.
• Scalanie – proces redukowania liczby plików poprzez łączenie ich w jeden lub więcej plików.
Zwykle stosowane dla języków CSS i JavaScript. Tworząc kod dla przejrzystości i porządku zazwyczaj dzielimy go na
wiele plików, co ułatwia zapanowanie nad projektem. Okazuje się jednak że równoległe ściąganie wielu plików przez
przeglądarkę w protokole http w wersji 1.x jest wolniejsze niż jednorazowe ściągnięcie jednego większego pliku. Z tego
też powodu przy budowaniu projektu najczęściej osobne pliki CSS czy JavaScript scalało się w jeden lub kilka większych
plików. W protokole http w wersji 2 wprowadzono liczne optymalizacje, przez co wydajność przy scaleniu wielu plików
w jeden nie jest już potrzebna a wręcz odradzana: przy scalaniu, zmiana jednego małego pliku oznacza powstanie
nowej wersji scalonego pliku, a to z kolei oznacza że przeglądarka musi ściągnąć cały scalony plik od nowa nawet jeśli
już wcześniej ściągnęła i przechowywała poprzednią wersję scalonego pliku. W przypadku zachowania oryginalnego
podziału na pliki, przeglądarka ściągnie od nowa tylko jeden mały plik który się zmienił, a resztę plików ponownie
wykorzysta bez ściągania. Scalanie jest wciąż stosowane, nawet z protokołem http w wersji 2, ze względu na to że dla
większych plików nieco lepiej działa kompresja konfigurowana w serwerze www. O tym jaka wersja protokołu http jest
wykorzystywana decyduje serwer www. W grudniu 2018, 32% spośród 10 milionów najpopularniejszych witryn
internetowych na świecie obsługiwało protokół http w wersji
 Automatyzacja budowania projektu 2/2
• Dodawanie prefiksów specyficznych dla przeglądarek do kodu CSS.
Twórcy przeglądarek wykorzystują prefiksy by wyróżnić własne rozszerzenia dla CSS lub eksperymentalne
właściwości z roboczych wersji specyfikacji CSS. I tak na przykład zanim Firefox zaczął oficjalnie wspierać
właściwość CSS o nazwie box-shadow, to wcześniej w kilku wersjach obsługiwał ją eksperymentalnie z
prefiksem: -moz-box-shadow. Aby witryna poprawnie działała w tych kilku wersjach, oprócz standardowego -
box-shadow dla nowszych wersji Firefoxa, trzeba więc dodać także wersję z prefiksem: -moz-box-shadow.
Dodawanie takich prefiksów jest bardzo uciążliwe, jednak istnieją narzędzia takie jak Autoprefixer które
automatycznie przeanalizują kod CSS i na podstawie informacji z witryny caniuse.com sprawdzą czy warto dodać
wersje właściwości z prefiksami i same wprowadzą dodatkowy kod CSS do dokumentu.
• Kompilacja kodu pre-procesorów takich jak Sass lub Less do kodu CSS
Aby ułatwić pracę z kodem CSS i skrócić często stosuje się pre-procesory które posiadają funkcje niedostępne
jeszcze w CSS. Niestety języki pre-procesorów nie są obsługiwane przez przeglądarki i pliki z kodem źródłowym
wymagają kompilacji do kodu CSS. Stąd przy każdej nawet najmniejszej zmianie kodu źródłowego, aby
sprawdzić efekt końcowy w przeglądarce, trzeba dokonać kompilacji źródła na kod CSS.
• W czasie tworzenia kodu powyższe monotonne i powtarzalne czynności trzeba wykonywać dość często. Można to
robić manualnie, jednak istnieje szereg narzędzi które pozwalają na automatyzację zadań. Zwykle narzędzia te są
obsługiwane z linii poleceń, wymagają użycia dodatków/pluginów i opierają się koncepcję strumienia czynności
wykonywanych na plikach wejściowych. Efekt końcowy strumienia to zmodyfikowane pliki wyjściowe.
• Przykłady popularnych narzędzi:
• Webpack - https://webpack.js.org/
• Gulp - https://gulpjs.com/
• Grunt - https://gruntjs.com/
Ważne witryny internetowe, które warto odwiedzać

• https://caniuse.com - witryna z informacjami na temat wsparcia

przeglądarek dla elementów HTML i CSS
• https://css-tricks.com – witryna z praktycznymi przykładami użycia CSS
• https://developer.mozilla.org/pl/ - witryna Mozilla Developer Network z
obszerną dokumentacją na temat HTML, CSS i innych technologii
• https://w3c.org – oficjalne specyfikacje W3C
• https://ranking.pl – statystyki dotyczące polskich internautów
(przeglądarki, urządzenia itp.)
• https://jigsaw.w3.org/css-validator/ - walidator CSS
• https://validator.w3.org/ - walidator HTML
Nawigacja – przykład: efekt

większe ekrany mniejsze ekrany

Nawigacja – przykład 1/3
• W tym przykładzie do dołączenia menu nawigacyjnego do wszystkich podstron witryny wykorzystano
prosty skrypt JavaScript używający biblioteki jquery do ściągania pliku z serwera www a następnie do
dołączenia jego zawartości we wskazane miejsce dokumentu. W analogiczny sposób jak nawigację, skrypt
dołącza dwa inne fragmenty kodu, które są wspólne dla wszystkich podstron witryny.
• Ten przykład należy uruchamiać za pośrednictwem serwera www (na przykład apache), ponieważ skrypty
JavaScript nie są w stanie odczytywać plików z dysku, a jedynie poprzez protokoły sieciowe z serwerów.
• Dzięki wydzieleniu nawigacji, nagłówka i stopki do osobnych plików można je łatwo modyfikować, przez co
wygląd zmieni się na wszystkich podstronach. W tym przykładzie są jedynie 4 podstrony, ale w sytuacji gdy
byłyby ich setki, wydzielenie powtarzających się fragmentów do osobnych plików miałoby kluczowe
znaczenie dla ewentualnych przyszłych modyfikacji.
• witryna składa się z kilku plików:
index.html – plik startowy witryny: strona główna
cennik.html – plik z cenami usług
kontakt.html – plik z danymi kontaktowymi
prywatnosc.html – plik z polityką prywatności
style.css – arkusz stylów CSS
skrypt.js – skrypt dołączający 3 pliki z fragmentami kodu identycznymi dla wszystkich 4 plików HTML
nawigacja.html – plik z fragmentem kodu html wyświetlającego nawigację
naglowek.html – plik z fragmentem kodu html wyświetlającego nagłówek
stopka.html – plik z fragmentem kodu html wyświetlającego stopkę.
Nawigacja – przykład 2/3
skrypt.js – kod który ściąga 3 pliki i wstawia je do elementów o wskazanym identyfikatorze #:
$(function() { /*wykorzystanie metody load z biblioteki jQuery która umożliwa wczytanie pliku
z serwera www. Załadowanie wczytanego pliku do elementu o identyfikatorze podanym w okrągłym
nawiasie*/
$("#nawigacja").load("nawigacja.html");
$("#naglowek").load("naglowek.html");
$("#stopka").load("stopka.html");
});
nawigacja.html – jeden z plików ściąganych przez skrypt
<!-- to jest nawigacja wykorzystywana przez inne pliki -->
<ul class="lista--linki">
<li>Menu:</li>
<li><a href="index.html">Start</a></li>
<li><a href="cennik.html">Cennik</a></li>
<li><a href="Kontakt.html">Kontakt</a></li>
<li><a href="prywatnosc.html">Prywatność</a></li>
<li>Przyjaciele:</li>
<li><a href="https://pl.wikipedia.org">Wikipedia</a></li>
<li><a href="http://www.viva.org.pl/">Fundacja Viva</a></li>
</ul>
Nawigacja – przykład 3/3
naglowek.html – jeden z plików ściąganych przez skrypt
<!-- to jest nagłówek wykorzystywany przez inne pliki -->
<h1 class="naglowek__h1">Kiciuś - najlepszy hotel dla zwierząt!</h1>

stopka.html – jeden z plików ściąganych przez skrypt

<!-- to jest stopka wykorzystywana przez inne pliki -->
<p class="stopka__akapit">
W ramach naszej witryny stosujemy pliki cookies w celu świadczenia Państwu usług na
najwyższym poziomie, w tym w sposób dostosowany do indywidualnych potrzeb. Korzystanie z
witryny bez zmiany ustawień dotyczących cookies oznacza, że będą one zamieszczane w Państwa
urządzeniu końcowym. Możecie Państwo dokonać w każdym czasie zmiany ustawień dotyczących
cookies.
</p>
Nawigacja – przykład: indeks.html
<!doctype html> <html lang="pl" class="dokument"> <head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <title>Kiciuś - hotel dla zwierząt</title>
<script src=https://code.jquery.com/jquery-3.3.1.min.js integrity="sha256-
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="skrypt.js" defer></script><!-- skrypt ładującz nawigację, nagłówek i stopkę -->
</head>
<body class="witryna">
<header class="naglowek" id="naglowek"> <!-- miejsce na nagłóek --> </header>
<nav class="nawigacja" id="nawigacja"> <!-- miejsce na nawigację --> </nav>
<main class="tresc" id="tresc">
<h1>Właśnie tego szukałeś dla swego zwierzątka!</h1>
<img class="tresc__grafika" src="https://upload.wikimedia.org/wik..." alt="zdjęcie psa">
<p class="tresc__akapit">Nasz hotel położony jest w centrum ...<p>
<ul class="lista">
<li>Weterynarz</li> <li>Trener zwierzęcy</li> <li>Fryzjer zwierzęcy</li>
<li>Behawiorysta zwierzęcy</li> <li>Kynolog</li>
</ul>
<p class="tresc__akapit"> Mamy wieloletnie doświadczenie w ... </p>
</main>
<footer id="stopka" class="stopka"> <!-- miejsce na stopkę --> </footer> </body></html>
Nawigacja – przykład: cennik.html
<!doctype html> <html lang="pl" class="dokument"> <head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <title>Kiciuś - cennik</title>
<script src=https://code.jquery.com/jquery-3.3.1.min.js integrity="sha256-
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=„ crossorigin="anonymous"></script>
<script src="skrypt.js" defer></script>
</head> <body class="witryna">
<header class="naglowek" id="naglowek"></header> <nav class="nawigacja" id="nawigacja"> </nav>
<main class="tresc" id="tresc">
<h1>Cennik</h1>
<img class="tresc__grafika" src="https://upload.wikimedia.org/wi..." alt="zdjęcie kota">
<p>Wszystkie ceny w polskich złotych za jedną noc</p>
<table>
<tr><th>Waga zwierzątka</th><th>Cena</th></tr>
<tr><td>&lt; 1kg</td><td>100</td></tr> <tr><td>1-5kg</td><td>200</td></tr>
<tr><td>5kg-10kg</td><td>300</td></tr> <tr><td>10kg-30kg</td><td>400</td></tr>
<tr><td>30kg-100kg</td><td>500</td></tr> <tr><td>100kg-1000kg</td><td>600</td></tr>
<tr><td>&gt; 1000kg</td><td>1000</td></tr>
</table>
</main>
<footer id="stopka" class="stopka"></footer> </body> </html>
Nawigacja – przykład: kontakt.html
<!doctype html> <html lang="pl" class="dokument"> <head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <title>Kiciuś - kontakt</title>
<script src=https://code.jquery.com/jquery-3.3.1.min.js integrity="sha256-
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=„ crossorigin="anonymous"></script>
<script src="skrypt.js" defer></script>
</head>
<body class="witryna">
<header class="naglowek" id="naglowek"> </header>
<nav class="nawigacja" id="nawigacja"> </nav>
<main class="tresc" id="tresc">
<h1>Kontakt</h1>
<img class="tresc__grafika"
src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Felis_catus..." alt="zdjęcie kota">
<address class="tresc__akapit"> ulica Błotna 17<br> 21-123 Wąchock<br> tel. 32 123 321<br>
fax. 32 123 322<br> email: <a href="mailto:[email protected]">[email protected]</a><br>
</address>
</main>
<footer id="stopka" class="stopka">
</footer>
</body></html>
Nawigacja – przykład: prywatnosc.html
<!doctype html> <html lang="pl" class="dokument"> <head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <title>Kiciuś - polityka prywatności</title>
<script src=https://code.jquery.com/jquery-3.3.1.min.js integrity="sha256-
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<script src="skrypt.js" defer></script>
</head>
<body class="witryna">
<header class="naglowek" id="naglowek"></header>
<nav class="nawigacja" id="nawigacja"> </nav>
<main class="tresc" id="tresc">
<h1>Polityka prywatnosci</h1>
<img class="tresc__grafika" src="https://upload.wikimedia.org/wik..." alt="zdjęcie kota">
<p class="tresc__akapit">Zgodnie z art. 13 ust. 1 i 2 rozporządzenia ...</p>
<p class="tresc__akapit"> administratorem Pani/Pana danych ...</p>
</main>
<footer id="stopka" class="stopka">
</footer>
</body>
</html>
Nawigacja – przykład: CSS 1/2
@import url('http://fonts.googleapis.com/css?family=Akronim&subset=latin,latin-ext');
/*dołączenie czcionek z google fonts*/
@import url(http://fonts.googleapis.com/css?family=Baloo+Chettan&subset=latin,latin-ext);
.dokument { /* dokument to klasa elemetnu html, ustawienie rozmiaru czcionki elementu html od
którego odziedziczy go resza elementów*/ font-size: 20px; }
.witryna { display: grid; /*ustawienie siatki grid*/
grid-template-columns: 150px 1fr; /*siatka ma składać się z 2 kolumn,3 wierszy i 4 obszarów*/
grid-template-areas: "naglowek naglowek"
"nawigacja tresc"
"stopka stopka";
background: #ADD100; /*kolor tła*/ color: #181d02; /*kolor tekstu*/
background: linear-gradient(to right, #7B920A, #ADD100); /*ustawienie gradientu - zielień*/
font-family: 'Baloo Chettan', sans-serif; /*wskazanie czcionki*/ text-align: justify; }
.naglowek { grid-area: naglowek; /*przypisanie do nazwanego obszaru siatki grid*/
margin-bottom: 20px; /*ustawienie marginesu dolnego*/ }
.naglowek__h1 { font-family: 'Akronim', sans-serif; /*ustawienie czcionki*/
text-align: center; /*wyśrodkowanie tekstu*/ width: 80vw; /*szerokość elementu*/
margin: 0px auto; /*marginesy*/ font-size: 2.5rem; /*rozmiar czcionki*/ color: #f1f4e6; }
.tresc { grid-area: tresc; /*przypisanie do nazwanego obszaru siatki grid*/ padding: 1rem; }
.tresc__grafika { max-width: 30vw; /*ustawienie maksymalnej szerokości*/
float: right; /*wyrówanie do prawej*/ margin: 15px; /*marginesy*/ border: 1px solid #181d02;
border-radius: 1rem; /*zaokrąglenie krawędzi*/ }
Nawigacja – przykład: CSS 2/2
.nawigacja { grid-area: nawigacja; /*przypisanie do nazwanego obszaru siatki grid*/ }
.stopka { grid-area: stopka; /*przypisanie do nazwanego obszaru siatki grid*/
font-size: 0.8rem; /*rozmiar czcionki*/ color: #3D4905; /* kolor tekstu */ }
.lista--linki {
list-style-type: none; /*brak wyróżnika elementu listy*/
padding: 0px; /*bez odstępu*/ margin: 0px; /*bez marginesu*/
display: block; /*wyświetlanie jako elementu blokowego */ }
:link , :visited { /*linki odwiedzone i nieodwiedzone*/ color: #210A92; }
@media (max-width: 600px) { /*reguły dla ekranów węższych niż 600px */
.witryna {
display: grid; /*stworzenie siatki grid*/
grid-template-columns: 1fr; /*1 kolumna w siatce, 4 wiersza, 4 nazwane obszary */
grid-template-areas: "naglowek"
"nawigacja"
"tresc"
"stopka"; }
.lista--linki { display: flex;
flex-direction: row; flex-wrap: wrap; justify-content: space-around;
}
}
Rozwijalne menu nawigacyjne
• Rozwijalne menu tworzy się wykorzystując skrytpy JavaScript, CSS lub połączenie obu.
• W CSS efekt rozwijalnego menu można osiągnąć domyślnie ukrywając podmenu (np. display: none), i
pokazując podmenu (np. display: block) jedynie wtedy gdy myszka nadjedzie na właściwy element
nadrzędny (:hover)
• W Internecie można znaleźć mnóstwo gotowych przykładów które wystarczy dostosować do własnych
potrzeb
• Przykład rozwijalnego menu opartego wyłącznie o HTML/CSS
Przykład rozwijalnego menu nawigacyjnego w CSS: HTML
<body>
<nav>
<ul id="menu">
<li><a href="start.html">Start</a></li>
<li>
<a href="#">Portale</a>
<ul>
<li><a href="http://www.onet.pl">Onet</a></li>
<li><a href="http://www.wp.pl">Wirtualna Polska</a></li>
</ul>
</li><li>
<a href="#">Narzędzia</a>
<ul>
<li><a href="http://validator.w3.org">Walidacja HTML</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/">Walidacja CSS</a></li>
</ul>
</li>
<li><a href="praca.html">Praca</a></li>
</ul>
</nav>
<h1>Witamy na naszych stronach</h1>
<p>Lorem ipsum dolor sit amet, ...</p><p>Lorem ipsum dolor sit amet ...</p>
</body>
Przykład rozwijalnego menu nawigacyjnego w CSS: CSS 1/2
nav ul ul { /* ukrycie wszystkich podmenu (ul w ul) */ display: none; /*ukrywanie */}
nav ul li:hover > ul { /* pokazanie podmenu które jest dzieckiem li nad którym znajduje
się myszka */ display: block; /* wyświetlanie jako element blokowy */}
nav ul { /* ustalenie wyglądu menu*/ background: #efefef; /*kolor tła*/
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);/*wypełnienie gradient*/
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15); /*CSS3: cień */
padding: 0 20px;/* odstępy*/ border-radius: 10px; /* zaokrąglenie rogów ramek */
list-style: none; /* brak wyróżnika listy */
position: relative; /* pozycjonowanie względne: pozwoli określić pozycję podmenu
względem menu głównego */
display: inline-table;/*rodzaj wyświetlania: tabela w lini-ustawia szerokość menu*/}
nav ul:after {/* szutczka usuwająca opływanie kolejnych elementów listy*/
content: ""; /*dodanie pustego elementu */ clear: both; /*zabronienie opływania*/
display: block; /*element blokowego */}
nav ul li { float: left; /* ustawienie opływania dla kolejnych elementów listy */}
nav ul li:hover { /* reguły dla li nad którymi jest myszka*/
background: #4b545f; /* kolor tło */
background: linear-gradient(top, #4f5964 0%, #5f6975 40%); /* gradient tła */
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); /* jw. */
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); /*jw. */
}
Przykład rozwijalnego menu nawigacyjnego w CSS: CSS 2/2
nav ul li:hover a { /*kolor tekstu dla linków nad którymi jest myszka*/ color: #fff;}
nav ul li a { /* reguły dla linków */
display: block; /* wyświetlanie jako elementu blokowego */
padding: 25px 40px; /* odstępy */ color: #757575; /* kolor */
text-decoration: none; /* dekoracja tekstu */}
nav ul ul { /* reguły dla podmenu (ul w ul)*/
background: #5f6975; /*kolor tła */ border-radius: 0px; /*zaokrąglenie rogów */
padding: 0; /* odstępy */ position: absolute; /* pozycjonowanie bezwzględne */
top: 100%; /* odległość od góry */}
nav ul ul li { /* reguły dla li w podmenu (ul w ul)*/
float: none; /* bez opływania */
border-top: 1px solid #6b727c; /*górna ramka */
border-bottom: 1px solid #575f6a; /* dolna ramka */
position: relative; /* pozycjonowanie względne */}
nav ul ul li a { /* reguły dla linków w podmenu */
padding: 15px 40px; /* odstępy */
color: #fff; /* kolor tekstu */
}
nav ul ul li a:hover {/*link nad którym jest myszka */
background: #4b545f; /* kolor tła */
}
/*źródło: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu*/
790 – Menu

1. W projekcie utwórz 3 nowe dokumenty HTML: 790a.html, 790b.html,

790c.html. Każdy z identycznym menu nawigacyjnym które pozwala przejść
do dowolnej z trzech stron
2. Menu nawigacyjne utwórz w oparciu albo o dowolny darmowy przykład z
Internetu działający wyłącznie w oparciu o style CSS (bez JavaScript) lub w
oparciu o klasę navbar Twitter Bootstrap
(https://getbootstrap.com/docs/4.2/components/navbar/ )
3. Wygląd i układ menu jest dowolny.
4. Menu nawigacyjne ma mieć dodatkowe rozwijalne podmenu „Linki” które
ma zawierać linki do portali Onet i WP
5. Sprawdź działanie w 2 przeglądarkach
6. zweryfikuj poprawność HTML i CSS
1. http://validator.w3.org
2. http://jigsaw.w3.org/css-validator/
Efekty wizualne

Efekty
wizualne
Gradienty

• CSS umożliwia generowanie gradientów które są traktowane podobnie

do grafiki. Najważniejsze właściwości:
• linear-gradient – generuje gradient liniowy
• radial-gradient – generuje gradient kołowy
• repeating-linear-gradient – generuje powtarzany gradient liniowy
• repeating-radial-gradient – generuje powtarzany gradient kołowy
• Szczegóły dotyczące właściwości gradientów -
https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Images/Using_CSS_gradients
• Generator gradientów CSS online: http://www.colorzilla.com/gradient-
editor/
Gradienty – przykłady: HTML
<body>
<main>
<article>
<h1>Bocian Biały</h1>
<img src="https://upload.wikimedia.org/wikiped..." alt="Bocian biały">
<p>Gatunek dużego ptaka brodzącego z rodziny bocianów (Ciconiidae)</p>
</article>
<article class="wazne">
<h1>Bocian czarny</h1>
<img src="https://upload.wikimedia.org/wikiped... " alt="Bocian czarny">
<p>Gwarowo: hajstra (Ciconia nigra) – gatunek dużego ptaka ...</p>
</article>
<article>
<h1>Bocian czaronodzioby</h1>
<img src="https://upload.wikimedia.org/wi..." alt="Bocian czarnodzioby">
<p>Bocian czarnodzioby (Ciconia boyciana) – gatunek dużego ...</p>
<p>Od bociana białego różni się czarnym dziobem i czerwoną ...</p>
</article>
<!-- i tak dalej ...-->
</main>
</body>
Gradient liniowy - przykład

img {
max-height: 60px; float: left; margin: 5px; }
article { color: white; margin: 10px; }
article:first-of-type { /*od lewej do prawej */
background: -webkit-linear-gradient(left, red, blue); /* dla starego Safari*/
background: -o-linear-gradient(right, red, blue); /* dla starych Oper */
background: -moz-linear-gradient(right, red, blue); /* dla starych Firefox */
background: linear-gradient(to right, red, blue);
}
article:nth-of-type(2) { /* skośny do dolnego prawego rogu*/
background: linear-gradient(to bottom right, red, blue);
}
article:nth-of-type(3) { /* określenie własnego kąta*/
background: linear-gradient(60deg, red, blue);
}
article:nth-of-type(4) { /*od lewej do prawej, kilka kolorów*/
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
 Gradient kołowy - przykład
img {
max-height: 60px; /*maksymalna wysokość grafiki*/
float: left; /*wyrównanie z lewej i opływanie z prawej*/
margin: 5px; /*marginesy*/
}
article { color: white; /*kolor tekstu*/ margin: 10px; /*margines 10px*/ }
article:first-of-type { /*kołowy */
background: -webkit-radial-gradient(red, green, blue); /* stare Safari */
background: -o-radial-gradient(red, green, blue); /* stare Opery */
background: -moz-radial-gradient(red, green, blue); /* stare Firefox */
background: radial-gradient(circle, red, green, blue);
}
article:nth-of-type(2) { /* nieproporcjonalny podział kolorów*/
background: radial-gradient(circle, red 7%, green 17%, blue 65%);
}
article:nth-of-type(3) { /* elitpyczny */
background: radial-gradient(ellipse, red, green, blue);
}
article:nth-of-type(4) { /* wiele kolorów */
background: radial-gradient(red, green, blue, purple, red, gray);
}
 Przykład gradientu z określoną pozycją środka

img {
max-height: 60px; /*maksymalna wysokość grafiki*/
float: left; /*wyrównanie z lewej i opływanie z prawej*/
margin: 5px; /*marginesy*/
}
article { color: white; /*kolor tekstu*/ margin: 10px; /*margines 10px*/ }
article:first-of-type { /* rozmiar do najbliższego brzegu*/
background: radial-gradient(circle closest-side at 30% 30%, red, green, blue);
}
article:nth-of-type(2) { /* rozmiar do najdalszego brzegu */
background: radial-gradient(circle farthest-side at 30% 30%, red, green, blue);
}
article:nth-of-type(3) { /* rozmiar do najbliższego rogu */
background: radial-gradient(circle closest-corner at 30% 30%, red, green, blue);
}
article:nth-of-type(4) { /* rozmiar do najdalszego rogu */
background: radial-gradient(circle farthest-corner at 30% 30%, red, green, blue);
}
Przykład gradientu z powtarzaniem

img {
max-height: 60px; /*maksymalna wysokość grafiki*/
float: left; /*wyrównanie z lewej i opływanie z prawej*/
margin: 5px; /*marginesy*/
}
article {
color: white; /*kolor tekstu*/
margin: 10px; /*margines 10px*/
}
article:first-of-type { /* powtarzanie gradientu liniowego*/
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
article:nth-of-type(2) { /* powtarzanie gradientu kołowego*/
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
802 – Gradienty: efekt
802 – Gradienty

1. Zapisz style.html pod nazwą 802.html. Stwórz nowy plik 802.css i dołącz go do html
modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color) na
snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na 0px
3. .article – ustaw jako tło (background) gradient liniowy (linear-gradient()) od lewej do
prawej (to right) składający się z kolorów white 30% oraz red
4. naglowek – ustaw jako tło (background) gradient kołowy (radial-gradient()) w formie koła
(circle) o rozmiarze wynikającym z odległości do najbliższego rogu (closest-corner) z
centrum w 80% szerokości i 65% wysokości (at 80% 65%) w kolorach red i white
5. .table – ustaw jako tło (background) powtarzalny gradient liniowy (repeating-linear-
gradient()) o kącie minus 45 stopni (-45 deg) składający się z kolorów white , red 10% i
white 10%
6. stopka – ustaw jako tło (background) powtarzalny gradient kołowy (repeating-radial-
gradient()) w formie koła (circle) o rozmiarze wynikającym z odległości do najbliższego
rogu (closest-corner) z centrum w 80% szerokości i 65% wysokości (at 80% 65%) w
kolorach white, red 10% i white 10%
7. Przetestuj stronę w 2 przeglądarkach
8. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Efekty przejścia
• Transitions to moduł CSS, który pozwala tworzyć przejścia, czyli efekty graficzne polegające na
zmianie w zadanym czasie określonej właściwości CSS.
• transition-property - właściwość CSS która ma podlegać transformacji
można podać wiele właściwości oddzielając je przecinkami
• transition-duration - czas trwania transformacji (w sekundach)
jeśli dla różnych właściwości jest różny czas transformacji, można podać wiele właściwości oddzielając je
przecinkami
• transition-timing-function - określa jakiej funkcji użyć do liczenia wartości punktów pośrednich w
animacji.
ease: to samo co cubic-bezier(0.25,0.1,0.25,1), wolny start, szybki środek, wolne zakończenie.
linear: równomiernie – to samo co cubic-bezier(0,0,1,1)
ease-in: wolny start. To samo co cubic-bezier(0.42,0,1,1)
ease-out: wolna końcówka. To samo co cubic-bezier(0,0,0.58,1)
ease-in-out: wolny start i końcówka. To samo co cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n): zdefiniowanie własnej funkcji
• transition-delay - opóźnienie rozpoczęcia animacji
• transition - skrócony zapis wszystkich powyższych właściwości w kolejności: property, duration,
timing function, delay
Przejścia – przykład: HTML
<body>
<main>
<article>
<h1>Bocian Biały</h1>
<img src="https://upload.wikimedia.org/wikiped..." alt="Bocian biały">
<p>Gatunek dużego ptaka brodzącego z rodziny bocianów (Ciconiidae)</p>
</article>
<article class="wazne">
<h1>Bocian czarny</h1>
<img src="https://upload.wikimedia.org/wikiped... " alt="Bocian czarny">
<p>Gwarowo: hajstra (Ciconia nigra) – gatunek dużego ptaka ...</p>
</article>
<article>
<h1>Bocian czaronodzioby</h1>
<img src="https://upload.wikimedia.org/wi..." alt="Bocian czarnodzioby">
<p>Bocian czarnodzioby (Ciconia boyciana) – gatunek dużego ...</p>
<p>Od bociana białego różni się czarnym dziobem i czerwoną ...</p>
</article>
<!-- i tak dalej ...-->
</main>
</body>
Przejścia – przykład: CSS

img {
height: 60px;
}
p {
transition-property: color, background-color; /*właściwości podlegające zmianie*/
transition-delay: 0.5s; /* zmiana rozpoczyna się po 0.5 sekunkdy*/
transition-duration: 5s; /*czas trwania zmiany*/
transition-timing-function:ease-in-out; /*tempo zmiany: powolny start, szybki środek,
powolny koniec*/
color: black;
background-color: white;
}
/*w momencie najechania myszką nad obszar po 0.5 s zacznie
* on stopniowo zmieniać kolor tekstu
* na niebieski a kolor tła na żółty
*/
p:hover{
color: blue;
background-color: yellow;
}
Przejścia – przykład: efekt
Przed zmianą:

W trakcie zmiany (kilka sekund po najechaniu nad akapit kursorem)

812 – Przejścia: efekt

Po najechaniu
myszką nad akapit
stopniowo zmienia
się jego wygląd

Po najechaniu myszką
nad nagłówek
stopniowo zmienia
się jego wygląd
812 – Przejścia CSS

1. Zapisz style.html pod nazwą 812.html. Stwórz nowy plik 812.css i dołącz go do html
modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color) na
snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na 0px
3. .article__p – ustaw trwające 3 sekundy przejście które po najechaniu myszką nad akapit
zmienia tło akapitu na czarny (black), a kolor tekstu na biały (white). Przejście ma się
rozpoczynać natychmiast (transition-delay:0), ma trwać 3 sekundy (transition-
duration: 3s). Zmieniane właściwości (transition-property) to color i background-
color. Przejście ma wykonywać się w sposób liniowy (transition-timing-function:
linear).
4. article__p:hover – ustaw stan docelowy właściwości color i background-color
5. .article__h2 - ustaw trwające 3 sekundy przejście które po najechaniu myszką zmienia
rozmiar czcionki (font-size) do 300%, a kolor czcionki na niebieski (blue).
6. .article__h2:hover - ustaw stan docelowy właściwości font-size i color
7. Przetestuj stronę w 2 przeglądarkach – najedź kursorem nad akapity i nagłówki w
artykułach i odczekaj chwilę.
8. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Transformacje CSS - transform
transform: - właściwość do której można przypisać jedną lub więcej transformacji rozdzielonych spacjami.
none - bez transformacji
translateX(x) - przesunięcie elementu w prawo lub lewo
translateY(y) - przesunięcie elementu w dół lub w górę
translate(x,y) – zapis skrócony dla translateX, translateY
translateZ( z ) - przesunięcie elementu w tył lub w przód
translate3d( x,y,z ) - zapis skrócony dla translateX, translateY, translateZ
scaleX(x) – zwężenie lub rozciągnięcie elementu (szerokość)
scaleY(y) – skrócenie lub wydłużenie elementu (wysokość)
scale( x,y ) – zapis skrócony dla scaleX, scaleY
scaleZ( z ) - przeskalowanie elementu w osi Z (odległość od widza)
scale3d( x,y,z ) - zapis skrócony dla scaleX, scaleY, scaleZ
połączenie funkcji scaleX(), scaleY() oraz saleZ()
skewX( x ) - pochylenie w prawą lub lewą stronę
skewY( y ) - pochylenie w dół lub w górę
skew( x,y ) – zapis skrócony dla skewX, skewY
rotate( a ) - obrócenie elementu (2D)
rotateX( x ) - obrócenie elementu wokół osi X (3D) rotateY( y ) - obrócenie elementu wokół osi Y (3D)
rotateZ( z ) - - obrócenie elementu wokół osi Z (3D) rotate3d( x,y,z,a ) – obracanie 3D
matrix(n,n,n,n,n,n) - transformacja 2D wg matrycy (6 wartości)
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) – transformacja 3D wg matrycy (16 wartości)
Transformacje

• backface-visibility: czy spód elementu ma być przezroczysty i pokazywać co jest z

drugiej strony (visible) czy nie (hidden)
• perspective: odległość od widza. Elementy 3 d które są większe niż perspektywa nie
są rysowane.
• perspective-orgin: definiuje perspektywę na którą patrzy widz.
• transform-orgin: pozwala określić miejsce względem którego odbywa się
transformacja. Np. domyślnie rotate będzie wykonywane względem środka elementu.
transform-orgin pozwala to zmienić.
• transform-style – określa zachowanie potomków elementu poddawanego
transformacji.
preserve-3d – podlega transformacji
flat – nie podlega
• Generator transformacji: http://css3generator.com
Transformacje - przykład
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Przejście</title>
<link href="h250.css" type="text/css" rel="stylesheet">
</head>
<body>
<p id="a1">Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p>
<p id="a2">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</body>
</html>

#a1 {
background-color: lightblue;
transform: rotate3d(1,10,1,45deg);
}
#a2 {
background-color: yellow;
transform: skewX(20deg) translate(10px,35px);
}
822 – Transformacje: efekt
822 – Transformacje

1. Zapisz style.html pod nazwą 822.html. Stwórz nowy plik 822.css i dołącz go do
html modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-
color) na snow, kolor tekstu (color) na black, marginesy (margin) i odstępy
(padding) na 0px
3. .naglowek – obróć o 170 stopni (170 deg) wokół osi X (rotateX(…)). Ustaw
kolor tła na gold.
4. .tresc – obróć o 170 stopni (170 deg) wokół osi Y (rotateY(…)). Ustaw kolor tła
na goldenrod.
5. .table – obróć o 170 stopni (170 deg) wokół osi Z (rotateZ(…)). Ustaw kolor tła
na gold.
6. .stopka – obróć 3D o 40 stopni (40 deg) wokół punktu 10,60,1 (rotate3d(…)).
Ustaw kolor tła na goldenrod.
7. Przetestuj stronę w 2 przeglądarkach.
8. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Animacje CSS
• Pozwalają animować przejście z jednego stylu na inny
• animation-delay: po jakim czasie animacja się rozpoczynma
• animation-direction: czy gdy animacja się skończy powinna być odtwarzana w odwrotnej
kolejności czy powtórzona.
• animation-duration: ile sekund / milisekund trwa animacja. Infinite – ma być powtarzana w
nieskończoność.
• animation-fill-mode: jakie style mają zastosowanie gdy animacja jest niekatywna (zakończyła się
albo oczekuje na uruchomienie)
• animation-iteration-count: liczba powtórzeń animacji
• animation-name: nazwa animacji ustalona przez @keyframes
• animation-play-state: określa czy animacja jest aktywna czy nie.
• animation-timing-function: funkcja czasowa określająca prędkość animacji.
• animation: skrócona forma zapisu powyższych właściwości (z wyjątkiem animation-play-state i
animation-fill-mode)
• @keyframes – nadanie nazwy animacji i zdefiniowanie reguł określających jej wygląd. Czas
animacji jest określony przez animation-duration, więc wewnątrz @keyframes punkt w czaise
określa się procentami, ewentualnie słowami kluczowymi from (0%) i to (100%).
Animacja – przykład: HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Przejście</title>
<link href="h250.css" type="text/css" rel="stylesheet">
</head>
<body>
<p id="a1">Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p>
<p id="a2">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</body>
</html>
Animacja – przykład: CSS
#a1 {
animation-duration: 3s;
animation-name: animacja;
animation-iteration-count: infinite;
animation-direction: alternate;
height: 300px; padding: 3px; margin: 3px;
}
@keyframes animacja {
from {
font-size: 10px;
color: black;
}
64% {
font-size: 20px;
color: green;
}
to {
font-size: 40px;
color: red;
}
}
832 – animacje: efekt
832 – animacje

1. Zapisz style.html pod nazwą 832.html. Stwórz nowy plik 832.css i dołącz go do
html modyfikując element <link>. W pliku css dodaj reguły dla poniższych klas
2. .dokument ustaw rozmiar czcionki na 20px (font-size), kolor tła (background-color)
na snow, kolor tekstu (color) na black, marginesy (margin) i odstępy (padding) na
0px
3. .article__h2 – ustaw trwającą 3 sekundy animację która zmienia kolor tła. Animacja
ma trwać 3 sekundy (animation-duration), nazwa to animacja (animation-name),
liczba powtórzeń (animation-iteration-count) w nieskończoność (infinite), animacja
ma odbywać się w tą i z powrotem (animation-direction: alternate)
4. Ustaw animację używając @keyframes nazwa-animacji {…}. Wskaż 4 kroki
pośrednie
1. 0% {…} - kolor tła (background-color) biały (white)
2. 33% {…} - kolor tła yellow
3. 66% {…} - kolor tła gold
4. 100% {…} - kolor tła goldenrod
5. Przetestuj stronę w 2 przeglądarkach.
6. Sprawdź poprawność kodu CSS pod adresem http://jigsaw.w3.org/css-validator
Kadrowanie - clip-path

• clip-path to właściwość CSS która tworzy obszar używany do

pokazywania fragmentu elementu. Fragmenty nie mieszczące się we
wskazanym obszarze są obcinane.
• Pozwala osiągnąć bardzo ciekawe efekty wizualne.
• Pozwala wykorzystać jeden z predefiniowanych kształtów, takich jak koło
czy elipsa lub stworzyć własny obrys przy użyciu współrzędnych.
• Dokumentacja właściwości dostępna jest pod tym linkiem:
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
Kadrowanie – przykład: HTML
<body>
<main>
<article>
<h1>Bocian Biały</h1>
<img src="https://upload.wikimedia.org/wikiped..." alt="Bocian biały">
<p>Gatunek dużego ptaka brodzącego z rodziny bocianów (Ciconiidae)</p>
</article>
<article class="wazne">
<h1>Bocian czarny</h1>
<img src="https://upload.wikimedia.org/wikiped... " alt="Bocian czarny">
<p>Gwarowo: hajstra (Ciconia nigra) – gatunek dużego ptaka ...</p>
</article>
<article>
<h1>Bocian czaronodzioby</h1>
<img src="https://upload.wikimedia.org/wi..." alt="Bocian czarnodzioby">
<p>Bocian czarnodzioby (Ciconia boyciana) – gatunek dużego ...</p>
<p>Od bociana białego różni się czarnym dziobem i czerwoną ...</p>
</article>
<!-- i tak dalej ...-->
</main>
</body>
img {
max-width: 40%;
clip-path: circle(40%); /*wykadrowanie koła znajdującego się w środku grafiki
o promieniu 40% rozmiaru grafiki*/
}