HTML with a little CSS

HTML + CSS

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

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

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

• 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 HTML - HyperText Markup Language

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

</body> </html> Idąc od góry...

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

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

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

<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: head

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

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

• Chrome: Developer Tools ◦ Mac OS X → ⌘+⌥+I
◦ Windows, Linux → Ctrl+Shift+I • Firefox: Firebug ◦ F12 • albo: prawy przycisk myszy → Zbadaj element/Inspect element Narzędzia dla programistów

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.

• 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 (tagi)

<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> Znaczniki - nagłówki

<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.

<a href="http://facebook.pl">facebook.pl</a> <a href="http://facebook.pl">onet.pl</a> <a href="mailto:[email protected]"> Napisz do nas </a>
<a href="http://facebook.pl"> <img src="http://placekitten.com/g/300/400"/> </a> Znaczniki - linki

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

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> ……

• 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 HTML5

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

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>

.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 - klasy

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

CSS - model pudełkowy

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

HTML with a little CSS

HTML with a little CSS

More Decks by Basia Madej

Other Decks in Programming

Featured

Transcript