HTML with a little CSS

Basia Madej
https://twitter.com/basiamadej
Me?

Prezentacja w 50% “pożyczona” od
Przemysław Dąbek
https://twitter.com/przemyslawdabek

Plan działania
● Struktura dokumentu
● Znaczniki (tagi)
● CSS
● Model pudełkowy
● ?

HTML - HyperText Markup Language
● hipertekstowy język znaczników
● bazowa technologia wykorzystywana w tworzeniu stron
internetowych
● w wielu systemach zarządzania treścią (CMS) takich jak
Wordpress, Joomla można używać HTML-a
● również w newsletterach i mailach

Struktura dokumentu
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
Treść strony
</body>
</html>

Idąc od góry...
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
Treść strony
</body>
</html>

Doctype
<!DOCTYPE html>
● specjalny tag w pierwszej linijce dokumentu
● informuje, że dokument jest zgodny z HTML5
● http://en.wikipedia.org/wiki/Document_type_declaration

znacznik: html
<html></html>
● cały dokument HTML znajduje się w tych tagach

znacznik: head
<head></head>
● może zawierać tytuł strony,
metadane o stronie lub autorze,
kodowaniu znaków i inne
● linki do plików wykorzystywanych
na stronie
● informacje dla bootów

znacznik: title
<title></title>
● tytuł strony
● wykorzystywany przez przeglądarki podczas tworzenia
zakładek

znacznik: body
<body></body>
● w tych znacznikach znajduje się właściwa treść strony

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

Zadanie 1
● Stwórzmy pierwszą stronę HTML zgodnie ze strukturą podaną na
wcześniejszych slajdach. W tym celu stwórzmy nowy plik w Sublime Text i
zapiszmy go na dysku z nazwą zadanie01.html.
● W treści strony wstawmy “Zażółć gęślą jaźń” albo inny dowolny tekst
zawierający polskie litery diakrytyczne: ą, ć, ę, ł, ń, ó, ś, ź, ż.
● Sprawdźmy czy w Chrome i Firefoksie polskie znaki wyświetlane są
poprawnie.

Kodowanie znaków
<meta charset="utf-8"/>

Znaczniki (tagi)
● zwykle znaczniki występują w parach
<nazwa-znacznika></nazwa-znacznika>
● przykłady:
<html></html>, <body></body>
● niektóre jednak żyją w pojedynkę
<meta/>, <img/>

Znaczniki (tagi)
● znaczniki mogą zawierać także atrybuty
<nazwa-znacznika atrybut="wartość">
zawartość
</nazwa-znacznika>
● np. <img src="http://placekitten.com/g/200/300"/>

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>

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>

<p>Jelly donut pie jelly-o apple pie pie biscuit. Pastry donut lemon drops
muffin. Biscuit sweet liquorice lemon drops caramels marzipan. Cookie soufflé
lollipop sugar plum.</p>
<p>
Soufflé liquorice sesame snaps jujubes icing donut topping. Gummies
wafer toffee cupcake cake cupcake. Croissant sweet dragée.
</p>
http://www.cupcakeipsum.com/a
Znaczniki - paragrafy

Zadanie 2
● Stwórzmy plik zadanie02.html. Stwórzmy dokument,
który będzie przypominał wpis na blogu (tytuł,
informacja o autorze, treść). Wykorzystajmy poznane
już znaczniki.

Znaczniki - linki
<a href="http://facebook.pl">facebook.pl</a>
<a href="http://facebook.pl">onet.pl</a>
<a href="mailto:webmuses@gmail.com">
Napisz do nas
</a>
<a href="http://facebook.pl">
<img src="http://placekitten.com/g/300/400"/>
</a>

Znaczniki - obrazki
<img src="http://placekitten.com/g/300/400" alt=”kitten”/>

Zadanie 3
● Stwórzmy plik zadanie03.html. Na naszej stronie HTML
umieśćmy przynajmniej dwa różne obrazki, które będą
linkami do wybranych przez nas stron.
● Jeśli nie mamy pomysłu na to, jaki obrazek wstawić
użyjmy np:
○ http://lorempixel.com/
○ http://placekitten.com/

<ul>
<li>Drogon</li>
<li>Viserion</li>
<li>Rhaegal </li>
</ul>
<ol>
<li>Drogon</li>
<li>Viserion</li>
<li>Rhaegal </li>
</ol>
Znaczniki - listy

Znaczniki - Komentarze

● <span></span>
Ala <span>ma</span> kota
● <div></div>
Tola <div>ma</div> tablet.
Ala ma kota.
Tola
ma
tablet.
Znaczniki - span i div

Zadanie 4
● Stwórzmy plik zadanie04.html. Na naszej stronie HTML
umieść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>

Inne znaczniki
<textarea> <label>
<tbody><tr><td>
<table> <ul> <li>
<sup> <sub> <strong>
<input> <a> <br/>
<em><hr>
……

HTML5
● najnowsza wersja specyfikacji HTML
● wprowadza nowe znaczniki i API
● kładzie większy nacisk na semantykę znaczników
http://html5doctor.com/lets-talk-about-semantics
● video, audio, canvas, geolocation, data storage

CSS - Kaskadowe arkusze stylów
selektor { własciwość: wartość; }
p { background: pink; }
span { color: blue; }
div { border: 1px red solid;}
div { margin-top: 10px;}

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>

CSS - klasy
.nazwaKlasy { własciwość: wartość; }
<li class="dog">jamnik</li>
<li class="dog">buldog</li>
<li class="cat">kot</li>
<li class="sheap">krowa</li>
<style>
.dog {border: 1px solid red; }
</style>

CSS - id
#idTaga { własciwość: wartość; }
<li class="dog" id="reksio">reksio</li>
<li class="dog">jamnik</li>
<style>
#reksio {border: 1px solid blue; }
</style>

Co dalej?
● http://www.codecademy.com/en/tracks/web
● http://ferrante.pl/books/html
● https://dash.generalassemb.ly/
● http://www.html5rocks.com/en/

HTML with a little CSS

More Related Content

Similar to HTML with a little CSS

HTML with a little CSS