HTML with a little CSS
1 like672 views
Presentation from HTML+CSS beginners workshop for mothers from Freedomownia. Polish
HTML with a little CSS
- 1. HTML + CSS
- 3. Prezentacja w 50% “pożyczona” od Przemysław Dąbek https://twitter.com/przemyslawdabek
- 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>
- 11. znacznik: html <html></html> ● cały dokument HTML znajduje się w tych tagach
- 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
- 15. Struktura dokumentu <!DOCTYPE html> <html> <head> <title>Tytuł strony</title> </head> <body> Treść strony </body> </html>
- 16. znacznik: title <title></title> ● tytuł strony ● wykorzystywany przez przeglądarki podczas tworzenia zakładek
- 17. Struktura dokumentu <!DOCTYPE html> <html> <head> <title>Tytuł strony</title> </head> <body> Treść strony </body> </html>
- 18. znacznik: body <body></body> ● w tych znacznikach znajduje się właściwa treść strony
- 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.
- 21. Kodowanie znaków <meta charset="utf-8"/>
- 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/>
- 23. Znaczniki (tagi) ● znaczniki mogą zawierać także atrybuty <nazwa-znacznika atrybut="wartość"> zawartość </nazwa-znacznika> ● np. <img src="http://placekitten.com/g/200/300"/>
- 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>
- 26. <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
- 27. Zadanie 2 ● Stwórzmy plik zadanie02.html. Stwórzmy dokument, który będzie przypominał wpis na blogu (tytuł, informacja o autorze, treść). Wykorzystajmy poznane już znaczniki.
- 28. Znaczniki - linki <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>
- 29. Znaczniki - obrazki <img src="http://placekitten.com/g/300/400" alt=”kitten”/>
- 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/
- 31. <ul> <li>Drogon</li> <li>Viserion</li> <li>Rhaegal </li> </ul> <ol> <li>Drogon</li> <li>Viserion</li> <li>Rhaegal </li> </ol> Znaczniki - listy
- 32. Znaczniki - Komentarze <!-- nie wymaga komentarza :) -->
- 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>
- 35. Inne znaczniki <textarea> <label> <tbody><tr><td> <table> <ul> <li> <sup> <sub> <strong> <input> <a> <br/> <em><hr> ……
- 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>
- 39. 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>
- 40. CSS - id #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>
- 41. CSS - model pudełkowy
- 42. Co dalej? ● http://www.codecademy.com/en/tracks/web ● http://ferrante.pl/books/html ● https://dash.generalassemb.ly/ ● http://www.html5rocks.com/en/