html with a little css
Post on 29-Nov-2014
77 Views
Preview:
DESCRIPTION
TRANSCRIPT
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>
<title>Tytuł strony</title>
</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>
<title>Tytuł strony</title>
</head>
<body>
Treść strony
</body>
</html>
<html></html>
● cały dokument HTML znajduje sie w tych tagach
znacznik: html
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</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>
<title>Tytuł strony</title>
</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>
<title>Tytuł strony</title>
</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.
<meta charset="utf-8"/>
Kodowanie znaków
● 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:webmuses@gmail.com">
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● 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
<!-- nie wymaga komentarza :) -->
● <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
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?
top related