3. Prezentacja w 50% “pożyczona” od
Przemysław Dąbek
https://twitter.com/przemyslawdabek
4.
5. Plan działania
● Struktura dokumentu
● Znaczniki (tagi)
● CSS
● Model pudełkowy
● ?
6. HTML - HyperText Markup Language
● hipertekstowy język znaczników
● bazowa technologia wykorzystywana w tworzeniu stron
internetowych
● w wielu systemach zarządzania treścią (CMS) takich jak
Wordpress, Joomla można używać HTML-a
● również w newsletterach i mailach
7. Struktura dokumentu
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
Treść strony
</body>
</html>
8. Idąc od góry...
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
Treść strony
</body>
</html>
9. Doctype
<!DOCTYPE html>
● specjalny tag w pierwszej linijce dokumentu
● informuje, że dokument jest zgodny z HTML5
● http://en.wikipedia.org/wiki/Document_type_declaration
10. Struktura dokumentu
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
Treść strony
</body>
</html>
12. Struktura dokumentu
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
Treść strony
</body>
</html>
13. znacznik: head
<head></head>
● może zawierać tytuł strony,
metadane o stronie lub autorze,
kodowaniu znaków i inne
● linki do plików wykorzystywanych
na stronie
● informacje dla bootów
14.
15. Struktura dokumentu
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
Treść strony
</body>
</html>
19. Narzędzia dla programistów
● Chrome: Developer Tools
○ Mac OS X → ⌘+⌥+I
○ Windows, Linux → Ctrl+Shift+I
● Firefox: Firebug
○ F12
● albo: prawy przycisk myszy → Zbadaj element/Inspect
element
20. Zadanie 1
● Stwórzmy pierwszą stronę HTML zgodnie ze strukturą podaną na
wcześniejszych slajdach. W tym celu stwórzmy nowy plik w Sublime Text i
zapiszmy go na dysku z nazwą zadanie01.html.
● W treści strony wstawmy “Zażółć gęślą jaźń” albo inny dowolny tekst
zawierający polskie litery diakrytyczne: ą, ć, ę, ł, ń, ó, ś, ź, ż.
● Sprawdźmy czy w Chrome i Firefoksie polskie znaki wyświetlane są
poprawnie.
22. Znaczniki (tagi)
● zwykle znaczniki występują w parach
<nazwa-znacznika></nazwa-znacznika>
● przykłady:
<html></html>, <body></body>
● niektóre jednak żyją w pojedynkę
<meta/>, <img/>
24. Znaczniki (tagi)
● zagnieżdżanie znaczników
<nazwa-znacznika>
jakiś tekst
<nazwa-innego-znacznika>
coś tam coś tam
</nazwa-innego-znacznika>
<img src="http://placekitten.com/g/300/400"/>
</nazwa-znacznika>
25. Znaczniki - nagłówki
<h1>Nagłówek pierwszego poziomu</h1>
<h2>Nagłówek drugiego poziomu</h2>
<h3>Nagłówek trzeciego poziomu</h3>
...
<h6>Nagłówek szóstego poziomu</h6>
30. Zadanie 3
● Stwórzmy plik zadanie03.html. Na naszej stronie HTML
umieśćmy przynajmniej dwa różne obrazki, które będą
linkami do wybranych przez nas stron.
● Jeśli nie mamy pomysłu na to, jaki obrazek wstawić
użyjmy np:
○ http://lorempixel.com/
○ http://placekitten.com/
33. ● <span></span>
Ala <span>ma</span> kota
● <div></div>
Tola <div>ma</div> tablet.
Ala ma kota.
Tola
ma
tablet.
Znaczniki - span i div
34. Zadanie 4
● Stwórzmy plik zadanie04.html. Na naszej stronie HTML
umieśćmy przynajmniej 2 listy i 2 komentarze.
● Dodajmy spany do paragrafów (w dowolnym miejscu)
● Zagnieżdżmy paragrafy w divach:
<div>
<p> treść </p>
</div>
36. HTML5
● najnowsza wersja specyfikacji HTML
● wprowadza nowe znaczniki i API
● kładzie większy nacisk na semantykę znaczników
http://html5doctor.com/lets-talk-about-semantics
● video, audio, canvas, geolocation, data storage
37. CSS - Kaskadowe arkusze stylów
selektor { własciwość: wartość; }
p { background: pink; }
span { color: blue; }
div { border: 1px red solid;}
div { margin-top: 10px;}
38. Zadanie 5
● W pliku zadanie04.html dodajmy w części <head>
jakieś style, np.
<style>
div { color: red; }
ul { background: pink; }
li {border: 1px solid green; background: blue;}
</style>