Wstęp do HTML5

  • 4,726 views
Uploaded on

Wstęp do nauki HTML5, którego używamy podczas szkoleń w http://functionite.pl. Zobacz, jak nauczamy!

Wstęp do nauki HTML5, którego używamy podczas szkoleń w http://functionite.pl. Zobacz, jak nauczamy!

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,726
On Slideshare
0
From Embeds
0
Number of Embeds
16

Actions

Shares
Downloads
10
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Wstęp do HTML5/CSS
  • 2. SiteSell Nokia meet.js ferrante.pl Front-Trends Damian Wielgosik javascript.pl Functionite founder Falsy Values otwartasiec.pl Roche @varjs
  • 3. SiteSell Nokia meet.js ferrante.pl Front-Trends Damian Wielgosik javascript.pl JavaScript programmer Falsy Values otwartasiec.pl Roche @varjs
  • 4. SiteSell Nokia meet.js ferrante.pl Front-Trends Damian Wielgosik javascript.pl event organizer Falsy Values otwartasiec.pl Roche @varjs
  • 5. SiteSell Nokia meet.js ferrante.pl Front-Trends Damian Wielgosik javascript.pl Open Web activist Falsy Values otwartasiec.pl Roche @varjs
  • 6. Czym jest strona internetowa?
  • 7. Gdyby tak porównać stronę internetową do klocków?
  • 8. Przeanalizujmy na przykład wycinek z ofertami pracy...
  • 9. Załóżmy na chwilę, że każdy element będzie oddzielnym klockiem i oznaczmy je.
  • 10. Klocki Lego jednak różnią się od siebie. Każdy pełni inną funkcję.
  • 11. Nie ma uniwersalnego klocka, który pasuje do wszystkiego.
  • 12. Podobnie jest w HTMLu, z którego zbudowane są strony internetowe. Jest wiele elementów, których używasz wedle ich przeznaczenia.
  • 13. kategoria posta nagłówek tytułowy data treść oferty treść oferty treść oferty link do pełnej oferty
  • 14. Przeglądarka internetowa chce wiedzieć, jaką funkcję pełni dany element strony, inaczej traktuje go jako zwykły tekst.
  • 15. Dlatego wymyślono HTML.
  • 16. HTML pomaga opisać dokumenty tekstowe i wyróżnić każdy z jego elementów, jeśli tylko pełni on jakąś funkcję.
  • 17. Chcesz zbudować dach z Lego? Używasz dużego klocka, bo głównie do tego on się nadaje. Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bo do tego go stworzono
  • 18. Przeanalizujmy krótki przykład...
  • 19. nagłówek pierwszego stopnia obrazek nagłówek drugiego stopnia akapity tekstu
  • 20. Jakby wyglądał taki dokument w zwykłym notatniku? Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 21. Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 22. A jak wyświetli go przeglądarka? Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 23. Nie wygląda to za dobrze. Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 24. Dlatego jest HTML, który pozwoli oznaczyć poszczególne części tekstu według ich przeznaczenia. Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 25. Wykorzystując HTML, „powiemy” przeglądarce, co jest tytułem, co zwykłym akapitem tekstu, a co obrazkiem. Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 26. Dokonajmy więc małego tłumaczenia, by dogadać się z przeglądarką. Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 27. <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1> <img src=”http://berlinstartupjobs.com/wpcontent/uploads/Banner-homeondemand.png”> <h2>About us</h2> <p>Our product, homeondemand.co.uk, listens to your unique preferences and lifestyle choices. A wooden floor, a balcony, a park nearby or an easy commute – just describe the features of the property & neighborhood you are after.</p> <p>Our algorithms crunch vast amounts of data about the real estate market and every aspect of living across the city to determine which properties match your wish list best. Every day you will receive a list of carefully selected properties with all the information you need to make a decision to rent or buy.</p>
  • 28. Zapiszmy wszystko w pliku z rozszerzeniem .html Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 29. Zapiszmy wszystko w pliku z rozszerzeniem .html Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 30. Jak teraz to wygląda w przeglądarce? Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 31. Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 32. Różnice? Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 33. Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono HTML Zwykły tekst
  • 34. HTML to inaczej HyperText Markup Language. Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 35. A więc język znaczników. Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 36. Są jak słowa w komunikacji werbalnej - niezbędne, a każdy znaczy coś innego. Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 37. <article> <h1> <ol> <p> <footer> <h2> <section> <h3> <h5> <h4> <h6> <li> Znaczniki? <table> <input> <header> <div> <img> <span> Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono <form> <aside> <strong> <ul>
  • 38. <article> (blok z pojedynczą treścią np. postem na bloga) <h1> (nagłówek 1. stopnia) <ol> (lista uporządkowana) <p> (akapit tekstu) <footer> (stopka) <section> (cała sekcja z treśćmi o danej tematyce np. komentarze do postu) <h2> (nagłówek 2. stopnia) <h4> (nagłówek 4. stopnia) <h3> (nagłówek 3. stopnia) <li> <h5> (nagłówek 5. stopnia) <h6> (nagłówek 6. stopnia) (element listy) Znaczniki? <table> <input> (dane tabelaryczne) (element formularza) <header> (blok nagłówkowy) <div> <img> <span> Chcesz dodać obrazek do strony? (obrazki) Używasz znacznika <img> z HTML, bodo tego go stworzono <form> (formularz) <aside> <strong> <ul> (blok z treścią poboczną) (ważny fragment tekstu) (blok, nieposiadający znaczenia semantycznego) (fragment tekstu, bez znaczenia semantycznego) (lista nieuporządkowana)
  • 39. <article> <h1> <ol> <p> <footer> <h2> <section> <h5> <h4> <h3> <h6> <li> I wiele więcej http://www.w3.org/TR/html-markup/elements.html <input> <table> <header> <div> <img> <span> Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono <form> <aside> <strong> <ul>
  • 40. Wyróżniamy znaczniki, które trzeba „zamknąć”, poprzez dopisanie ukośnika przed jego nazwą np.: <div>treść</div> Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 41. Są też takie, których nie trzeba „domykać”: <img src=”obrazek.jpg”> Chcesz dodać obrazek do strony? Używasz znacznika <img> z HTML, bodo tego go stworzono
  • 42. W kilka minut powstała prosta strona z artykułem. Ulepszmy ją, by była zgodna ze standardami tworzenia stron HTML.
  • 43. Zaczynamy od tego, co mamy, czyli: <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1> <img src="http://berlinstartupjobs.com/wp-content/uploads/Bannerhomeondemand.png"> <h2>About us</h2> <p>Our product, homeondemand.co.uk, listens to your unique preferences and lifestyle choices. A wooden floor, a balcony, a park nearby or an easy commute just describe the features of the property & neighborhood you are after.</p> <p>Our algorithms crunch vast amounts of data about the real estate market and every aspect of living across the city to determine which properties match your wish list best. Every day you will receive a list of carefully selected properties with all the information you need to make a decision to rent or buy.</p>
  • 44. Każda strona powinna zaczynać się od tzw. doctype’a, czyli elementu mówiącego przeglądarce, jak powinna interpretować kod HTML. Dodajmy go!
  • 45. Dodajmy doctype <!DOCTYPE html> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1> <img src="http://berlinstartupjobs.com/wp-content/uploads/Bannerhomeondemand.png"> <h2>About us</h2> <p>Our product, homeondemand.co.uk, listens to your unique preferences and lifestyle choices. A wooden floor, a balcony, a park nearby or an easy commute just describe the features of the property & neighborhood you are after.</p> <p>Our algorithms crunch vast amounts of data about the real estate market and every aspect of living across the city to determine which properties match your wish list best. Every day you will receive a list of carefully selected properties with all the information you need to make a decision to rent or buy.</p>
  • 46. Dokumenty HTML powinny mieć też element <html>, w którym zawarty jest cały kod strony...
  • 47. Dodajmy <html> <!DOCTYPE html> <html lang="en"> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1> <img src="http://berlinstartupjobs.com/wp-content/uploads/Bannerhomeondemand.png"> <h2>About us</h2> <p>Our product, homeondemand.co.uk, listens to your unique preferences and lifestyle choices. A wooden floor, a balcony, a park nearby or an easy commute just describe the features of the property & neighborhood you are after.</p> <p>Our algorithms crunch vast amounts of data about the real estate market and every aspect of living across the city to determine which properties match your wish list best. Every day you will receive a list of carefully selected properties with all the information you need to make a decision to rent or buy.</p> </html>
  • 48. Zwróc uwagę na atrybut „lang” - oznacza on język w jakim napisany jest nasz dokument. Wartością atrybutu jest wszystko, co napiszemy w cudzysłowie po znaku równa się. W naszym wypadku jest to „en” - czyli angielski.
  • 49. Dodajmy atrybut „lang” <!DOCTYPE html> <html lang="en"> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1> <img src="http://berlinstartupjobs.com/wp-content/uploads/Bannerhomeondemand.png"> <h2>About us</h2> <p>Our product, homeondemand.co.uk, listens to your unique preferences and lifestyle choices. A wooden floor, a balcony, a park nearby or an easy commute just describe the features of the property & neighborhood you are after.</p> <p>Our algorithms crunch vast amounts of data about the real estate market and every aspect of living across the city to determine which properties match your wish list best. Every day you will receive a list of carefully selected properties with all the information you need to make a decision to rent or buy.</p> </html>
  • 50. Każdy element/znacznik w HTML ma zdefiniowaną listę atrybutów, które możemy użyć z nim w parze. Kilka przykładów: <div class="news">bla bla</div> <img src="obrazek.jpg" alt="moj obrazek" width="400"> <input type="text" name="firstname"> <p id="intro">bla bla</p>
  • 51. Nadal ulepszamy nasz dokument, aby nikt nie mógł się przyczepić. Każda strona musi mieć też znacznik <head>, w którym trzyma się różne informacje o dokumencie (tzw. metadane), na przykład jego tytuł. Umieszczamy go jako pierwszy element w obrębie <html>. Będzie on więc dzieckiem elementu <html>
  • 52. ! !! ! ! !! !! ! ! ! ! ! ! ! ! ! !!! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !! ! ! ! ! Jeśli dany znacznik x mieści się w innym y, mówimy wtedy, że jest x jest dzieckiem y. To dość zabawne, ale w przyszłości bardzo przyda Ci się ta nomenklatura.
  • 53. Dodajmy <head> <!DOCTYPE html> <html lang="en"> <head></head> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1> <img src="http://berlinstartupjobs.com/wp-content/uploads/Bannerhomeondemand.png"> <h2>About us</h2> <p>Our product, homeondemand.co.uk, listens to your unique preferences and lifestyle choices. A wooden floor, a balcony, a park nearby or an easy commute just describe the features of the property & neighborhood you are after.</p> <p>Our algorithms crunch vast amounts of data about the real estate market and every aspect of living across the city to determine which properties match your wish list best. Every day you will receive a list of carefully selected properties with all the information you need to make a decision to rent or buy.</p> </html>
  • 54. Mówiliśmy coś o tytule? Dodajmy go! Naturalnie w <head></head> Służy do tego znacznik... <title></title>
  • 55. Dodajmy <title> <!DOCTYPE html> <html lang="en"> <head> <title>My first article - myBlog.pl</title> </head> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1> <img src="http://berlinstartupjobs.com/wp-content/uploads/Bannerhomeondemand.png"> <h2>About us</h2> <p>Our product, homeondemand.co.uk, listens to your unique preferences and lifestyle choices. A wooden floor, a balcony, a park nearby or an easy commute just describe the features of the property & neighborhood you are after.</p> <p>Our algorithms crunch vast amounts of data about the real estate market and every aspect of living across the city to determine which properties match your wish list best. Every day you will receive a list of carefully selected properties with all the information you need to make a decision to rent or buy.</p> </html>
  • 56. Wartość w <title> ma wpływ na to, jak wyświetlana jest Twoja strona w kartach przeglądarki czy choćby w wynikach Google...
  • 57. bez <title> z <title>
  • 58. Wróćmy jednak do ulepszania naszej strony...
  • 59. Ostatnią rzeczą, jest dodanie tagu <body>. To w nim umieszczamy zawartość naszych stron.
  • 60. Dodajmy <body> <!DOCTYPE html> <html lang="en"> <head> <title>My first article - myBlog.pl</title> </head> <body> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1> <img src="http://berlinstartupjobs.com/wp-content/uploads/Bannerhomeondemand.png"> <h2>About us</h2> <p>Our product, homeondemand.co.uk, listens to your unique preferences and lifestyle choices. A wooden floor, a balcony, a park nearby or an easy commute - just describe the features of the property & neighborhood you are after.</p> <p>Our algorithms crunch vast amounts of data about the real estate market and every aspect of living across the city to determine which properties match your wish list best. Every day you will receive a list of carefully selected properties with all the information you need to make a decision to rent or buy.</p> </body> </html>
  • 61. Zauważ wcięcia pomiędzy kolejnymi sekcjami, zwiększają one przejrzystość i są dobrą praktyką w pisaniu kodu HTML <!DOCTYPE html> <html lang="en"> <head> <title>My first article - myBlog.pl</title> </head> <body> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1> Przyjęło się, że pojedyncze wcięcie to 4 spacje lub jeden znak tabulacji.
  • 62. Teoretycznie ulepszyliśmy naszą stronę i powinna ona być zgodna z wszelkimi standardami. Definiowaniem standardów dokumentów HTML zajmuje się grupa w3c.org. Wejdźmy na ich stronę i sprawdźmy, czy nasza strona jest z nimi zgodna. Odpowiednie narzędzie do tego znajduje się pod adresem: http://validator.w3.org/
  • 63. Aby sprawdzić, czy nasz kod jest prawidłowy, możemy po prostu wkleić kod naszej strony do formularza...
  • 64. Nie udało się...
  • 65. Co się stało? Na szczęście mamy listę błędów...
  • 66. Wychodzi na to, że należy dodać do elementu <img> atrybut „alt”, który jest wymagany...
  • 67. Zróbmy to!
  • 68. Dodajmy atrybut alt do obrazka <!DOCTYPE html> <html lang="en"> <head> <title>My first article - myBlog.pl</title> </head> <body> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1> <img src="http://berlinstartupjobs.com/wp-content/uploads/Bannerhomeondemand.png" alt="banner"> <h2>About us</h2> <p>Our product, homeondemand.co.uk, listens to your unique preferences and lifestyle choices. A wooden floor, a balcony, a park nearby or an easy commute - just describe the features of the property & neighborhood you are after.</p> <p>Our algorithms crunch vast amounts of data about the real estate market and every aspect of living across the city to determine which properties match your wish list best. Every day you will receive a list of carefully selected properties with all the information you need to make a decision to rent or buy.</p> </body> </html>
  • 69. Atrybut alt oznacza tekst, który wyświetl się, jeśli obrazek nie zostanie załadowany przez przeglądarkę (z powodu braku internetu, błędu, usunięcia obrazka z serwera itd.).
  • 70. Tak to wygląda w przeglądarce, gdy dodamy atrybut „alt”.
  • 71. Skąd wiem, że atrybut alt oznacza to, a nie co innego?
  • 72. w3c - organizacja stojąca za kształtowaniem języka HTML, tak zdecydowała. Znaczenie atrybutu alt, jak i innych, możesz sprawdzić na stronie specyfikacji, czyli dokumentu regulującego, jak powinny wyglądać dokumenty HTML i jakie znaczenie mają poszczególne znaczniki.
  • 73. Sprawdźmy ponownie naszą stronę...
  • 74. Nicolas nigdy jednak nie jest zadowolony do końca...
  • 75. Hahaha, dobre, Damian! Tłumaczysz prawie tak dobrze, jak ja gram.
  • 76. Spójrzmy na to, co jeszcze powiedział nam walidator...
  • 77. Wygląda na to, że zapomnieliśmy dać przeglądarce znać, jak mają być traktowane różne znaki narodowe, jak ąę. Tak że tego. Nie jest to błąd, tylko ostrzeżenie, ale dobre praktyki nakazują uzupełnienie tej informacji.
  • 78. Gdybyśmy jej nie podali, zamiast polskich znaków mielibyśmy krzaczki:
  • 79. Aby to naprawić, musimy uzupełnić nieco nasz dokument. Jak powiedzieliśmy sobie, wszystkie informacje o dokumencie zawarte są w <head></head>. Także informacje o kodowaniu znaków narodowych powinny się tam znaleźć.
  • 80. Dodajmy tag <meta> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My first article - myBlog.pl</title> </head> <body> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1> <img src="http://berlinstartupjobs.com/wp-content/uploads/Bannerhomeondemand.png" alt="banner"> <h2>About us</h2> <p>Our product, homeondemand.co.uk, listens to your unique preferences and lifestyle choices. A wooden floor, a balcony, a park nearby or an easy commute - just describe the features of the property & neighborhood you are after.</p> <p>Our algorithms crunch vast amounts of data about the real estate market and every aspect of living across the city to determine which properties match your wish list best. Every day you will receive a list of carefully selected properties with all the information you need to make a decision to rent or buy.</p> </body> </html>
  • 81. Informację tę podaliśmy dzięki tagowi <meta> z atrybutem „charset”. Wartość utf-8 to system kodowania, który pozwala przeglądarce obsługiwać różne znaki diaktryczne w obrębie jednego dokumentu.
  • 82. Finalny HTML wygląda tak! <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My first article - myBlog.pl</title> </head> <body> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1> <img src="http://berlinstartupjobs.com/wp-content/uploads/Bannerhomeondemand.png" alt="banner"> <h2>About us</h2> <p>Our product, homeondemand.co.uk, listens to your unique preferences and lifestyle choices. A wooden floor, a balcony, a park nearby or an easy commute - just describe the features of the property & neighborhood you are after.</p> <p>Our algorithms crunch vast amounts of data about the real estate market and every aspect of living across the city to determine which properties match your wish list best. Every day you will receive a list of carefully selected properties with all the information you need to make a decision to rent or buy.</p> </body> </html>
  • 83. Czas na zadanie!
  • 84. Stwórz kod HTML dla artykułu na bloga z obrazka, tak, by wyglądał podobnie. Nie zajmuj się szczegółami dotyczącymi wyglądu, skup się na tym, by podzielić treść tak, aby kod miał sens - akapit tekstu był osadzony w dobrym znaczniku, obrazek miał atrybut alt i tak dalej. Oto kilka porad, od których powinno się zacząć: #1 Zauważ, że mamy do czynienia z pojedynczą treścią, dokładniej - z postem na bloga. Pojedyncze artykuły zwykło umieszczać się w <article>. #2 Post ten na wstępie ma aż dwa główne nagłówki - tytuł posta i krótki lead. Są także dane autora. Bardzo dobrym pomysłem będzie zamieszczenie tych informacji w znaczniku <header>, który jest przeznaczony do przechowywania elementów wprowadzających do artykułu - jak właśnie tytuł czy lead. #3 Tekst blog posta: Justin Bieber wyznał coś, czego nie spodziewaliby się nawet najwięksi fani tego zdolnego muzyka i eseisty. Młody rockendrolowiec przyznał, że odkąd postawił pierwszy znacznik title, jego życie stało się łatwiejsze. Ponoć prywatnymi mentorami Biebera stali się, jak donoszą osoby z otoczenia Kanadyjczyka, Ryan Gosling i Nicolas Cage. Często spacerują po Los Angeles i rozmawiają godzinami o tym, jak fajnym narzędziem jest walidator HTML. Bieber stworzył już kilka stron i nie zamierza na tym poprzestać. Prawdopodobnie zaśpiewam o HTMLu na mojej następnej płycie - dodaje artysta. Link do kotka: Zauważ, że użyliśmy cytatu Justina. ;-) https://dl.dropboxusercontent.com/u/12592160/cat.jpg
  • 85. Chcesz więcej? Przyjdź na nasze szkolenie! http://functionite.pl/szkolenia/warszawa/html5-css3-23-24-listopada.html