html with a little css

HTML + CSS

Basia Madejhttps://twitter.com/basiamadej

Me?

Przemysław Dąbekhttps://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 zarzadzania trescia (CMS) takich jak

Wordpress, Joomla mozna uzywac 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

<!DOCTYPE html>

<html>

<head>


</head>

<body>

Treść strony

</body>

</html>

Idąc od góry...

<!DOCTYPE html>

● specjalny tag w pierwszej linijce dokumentu

● informuje, ze dokument jest zgodny z HTML5

● http://en.wikipedia.org/wiki/Document_type_declaration

Doctype

Struktura dokumentu

<!DOCTYPE html>

<html>

<head>


</head>

<body>

Treść strony

</body>

</html>

<html></html>

● cały dokument HTML znajduje sie w tych tagach

znacznik: html

<!DOCTYPE html>

<html>

<head>


</head>

<body>

Treść strony

</body>

</html>

Struktura dokumentu

<head></head>

● moze zawierac tytuł strony, metadane o stronie lub autorze, kodowaniu znakow i inne

● linki do plików wykorzystywanych na stronie

● informacje dla bootów

znacznik: head

<!DOCTYPE html>

<html>

<head>


</head>

<body>

Treść strony

</body>

</html>

Struktura dokumentu

<title></title>

● tytuł strony● wykorzystywany przez przegladarki podczas tworzenia

zakładek

znacznik: title

<!DOCTYPE html>

<html>

<head>


</head>

<body>

Treść strony

</body>

</html>

Struktura dokumentu

<body></body>

● w tych znacznikach znajduje sie własciwa tresc 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● Stworzmy pierwsza strone HTML zgodnie ze struktura podana na

wczesniejszych slajdach. W tym celu stworzmy nowy plik w Sublime Text i zapiszmy go na dysku z nazwa zadanie01.html.

● W tresci strony wstawmy “Zazółc gesla jazn” albo inny dowolny tekst zawierajacy polskie litery diakrytyczne: a, c, e, ł, n, ó, s, z, z.

● Sprawdzmy czy w Chrome i Firefoksie polskie znaki wyświetlane są poprawnie.

● zwykle znaczniki wystepuja w parach<nazwa-znacznika></nazwa-znacznika>

● przykłady: <html></html>, <body></body>

● niektóre jednak zyja w pojedynke <meta/>, <img/>

Znaczniki (tagi)

● znaczniki moga zawierac takze 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 bedzie przypominał wpis na blogu (tytuł, informacja o autorze, tresc). 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

http://facebook.pl

mailto:[email protected]

http://placekitten.com/g/300/400%E2%80%9D/

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

Znaczniki - obrazki

http://placekitten.com/g/300/400%E2%80%9D/

Zadanie 3● Stworzmy plik zadanie03.html. Na naszej stronie HTML

umiescmy przynajmniej dwa rozne obrazki, ktore beda linkami do wybranych przez nas stron.

● Jesli nie mamy pomysłu na to, jaki obrazek wstawic uzyjmy 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.

Tolamatablet.

Znaczniki - span i div

Zadanie 4● Stworzmy plik zadanie04.html. Na naszej stronie HTML

umiescmy 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 wiekszy nacisk na semantyke znacznikowhttp://html5doctor.com/lets-talk-about-semantics

● video, audio, canvas, geolocation, data storage

HTML5

http://html5doctor.com/lets-talk-about-semantics

http://html5doctor.com/lets-talk-about-semantics

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" id="reksio">reksio</li>

<li class="dog">jamnik</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

Internet