Podstawy HTML5 i CSS3

Planujesz stworzyć stronę internetową, ale nie wiesz od czego zacząć? Poznaj podstawy HTML5 oraz CSS3 i zacznij swoją przygodę z Web Developmentem.

Transcript

1. Podstawy html & css
2. Blazej Hadzik Ruby on Rails dev hadzikblazej@gmail.com 2
4. HTML: Hyper Text Markup Language 4
5. HTML: Nie jest językiem programowania 5
6. Struktura dokumentu 6
7. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tech Klub</title> </head> <body> </body> </html> 7 Struktura dokumentu
9. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tech Klub</title> </head> <body> <h1>Hello TechKlub</h1> <p> TechKluby to społeczności osób zainteresowanych szerszym zastosowaniem ICT w trzecim sektorze. Kluby mają formę cyklicznych, nieformalnych spotkań w wybranych miastach w Polsce (m.in. Poznań, Wrocław, Kraków, Rzeszów)... </p> </body> </html> 9
10. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tech Klub</title> </head> <body> <h1>Hello TechKlub</h1> <p> TechKluby to społeczności osób zainteresowanych... </p> </body> </html> 10
11. Tagi 11
12. <h1>Witaj TechKlub!</h1> 12
13. <p> <table> <form> <img> 13
14. <nav> <footer> <header> <strong> 14
15. Atrybuty 15
16. <p title=’about-techklub’> TechKlub to… </p> 16
17. <p title=’about-techklub’> TechKlub to… </p> 17 atrybut wartość
18. Rodzic-dziecko 18
19. <p> Adam M. wspomniał o TechKlub: <blockquote>Jesteście super!</blockquote> </p> 19
20. Odnośniki 20
21. <a href=’http://crossweb.pl’> Kliknij tutaj </a> 21
22. 22 <a href=’http://crossweb.pl’> Kliknij tutaj.. </p> wartość wyświetlana adres
23. Obrazki 23
24. <img src=’adam.jpg’> 24
25. Formularze 25
26. Klasy oraz ID 26
27. <body> <h1 id=”naglowek”>Hello TechKlub</h1> <p class=”paragraf”> TechKluby to społeczności... </p> <p class=”paragraf”> Istotną rolą TechKlubów jest... </p> <p class=”opis”> <strong>Do zobaczenia na spotkaniach!</strong> </p> </body> 27
28. Elementy grupujące 28
29. <body> <h1 id=”naglowek”>Hello TechKlub</h1> <div class=’content’> <p>TechKluby to społeczności...</p> <p>TechKluby to społeczności...</p> </div> <span class=’subcontent’> <p>TechKluby to społeczności...</p> <p>TechKluby to społeczności...</p> </span> </body> 29
30. Elementy typu block vs inline 30
31. <body> <div>element blokowy #1</div> <div>element blokowy #2</div> <div>element blokowy #3</div> <span>element inline #1</span> <span>element inline #2</span> <span>element inline #3</span> </body> 31
32. Po co nam HTML5? 32
33. w3schools.com codeschool.com 33
34. CSS: Cascading Style Sheets 34
35. Selektory 35
36. <a class=‘link’ href=’http://crossweb.pl’> Kliknij tutaj </a> 36
37. .selektor_klasa { font-size: 24px; color: blue; } 37 #selektor_id { font-size: 24px; color: blue; }
38. .link { color: blue; } 38 selektor właściwość wartość
39. .link, .subtitle, .navigation { color: blue; } 39
40. Właściowości 40
41. color background-color border width 41
42. Dziedziczenie 42
43. body { color: blue; } #h1 { font-size: 14px; } 43 <body> <h1 id=’h1’>Nagłówek</h1> </body>
44. CSS3 44
45. background: linear-gradient(red, blue) border-radius: 3px; 45
46. Dołączanie styli 46
47. 47 treść padding border margin #tresc{ padding: 20px; border: 1pt solid red; margin: 15%; }
48. RWD 48
49. Bootstrap, Foundation 49
50. Aplikacje internetowe 50
51. Dlaczego? 51
52. Czym są aplikacje internetowe? 52
53. tryruby.org 53
54. Dziękuję 54