Wstęp do HTML5

Wstęp do HTML5/CSS

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell

javascript.plmeet.js

Falsy Values

@varjsotwartasiec.pl

Functionite founder

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell


Falsy Values


JavaScript programmer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell


Falsy Values


event organizer

Damian Wielgosik

Nokia

Roche

ferrante.pl

Front-Trends

SiteSell


Falsy Values


Open Web activist

Czym jest strona internetowa?

Gdyby tak porównać stronę internetową do klocków?

Przeanalizujmy na przykład wycinek z ofertami pracy...

Załóżmy na chwilę, że każdy element będzie oddzielnym klockiem i oznaczmy je.

Klocki Lego jednak różnią się od siebie.Każdy pełni inną funkcję.

Nie ma uniwersalnego klocka, który pasuje do wszystkiego.

Podobnie jest w HTMLu, z którego zbudowane są strony internetowe.Jest wiele elementów, których używasz wedle ich przeznaczenia.

kategoria posta

nagłówek tytułowy

data

treść oferty

link do pełnej oferty

treść oferty

treść oferty

Przeglądarka internetowa chce wiedzieć, jaką funkcję pełni dany element strony, inaczej traktuje go jako zwykły tekst.

Dlatego wymyślono HTML.

HTML pomaga opisać dokumenty tekstowe i wyróżnić każdy z jego elementów, jeśli tylko pełni on jakąś funkcję.

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

Przeanalizujmy krótki przykład...

nagłówek pierwszego stopnia

obrazek

nagłówek drugiego stopnia

akapity tekstu

Jakby wyglądał taki dokument w zwykłym notatniku?

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono


A jak wyświetli go przeglądarka?


Nie wygląda to za dobrze.


Dlatego jest HTML, który pozwoli oznaczyć poszczególne części tekstu według ich przeznaczenia.


Wykorzystując HTML, „powiemy” przeglądarce, co jest tytułem, co zwykłym akapitem tekstu, a co obrazkiem.


Dokonajmy więc małego tłumaczenia, by dogadać się z przeglądarką.


<h1>Front-end developer with strong JavaScript skills // Home on Demand</h1>

<img src=”http://berlinstartupjobs.com/wp-content/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>

http://berlinstartupjobs.com/wp-content/uploads/Banner-homeondemand.png




Zapiszmy wszystko w pliku z rozszerzeniem .html


Zapiszmy wszystko w pliku z rozszerzeniem .html


Jak teraz to wygląda w przeglądarce?



Różnice?


Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzonoZwykły tekst HTML

HTML to inaczej HyperText Markup Language.


A więc język znaczników.


Są jak słowa w komunikacji werbalnej - niezbędne, a każdy znaczy coś innego.


Znaczniki?


<h1><h2>

<h3>

<h4>

<h5>

<h6>

<div> <span>

<p><table>

<img>

<strong> <ul>

<ol>

<ul><ul>

<li>

<article>

<header>

<section>

<input><footer>

<aside><form>

Znaczniki?


<h1><h2>

<h3>

<h4>

<h5>

<h6>

<div> <span>

<p><table>

<img>

<strong> <ul>

<ol>

<ul><ul>

<li>

<article>

<header>

<section>

<input><footer>

<aside><form>

(blok z pojedynczą treścią np. postem na bloga)

(lista uporządkowana)

(lista nieuporządkowana)

(obrazki)

(dane tabelaryczne)

(nagłówek 6. stopnia)





(akapit tekstu)

(stopka)

(blok, nieposiadający znaczenia semantycznego)

(blok nagłówkowy)

(fragment tekstu, bez znaczenia semantycznego)

(element formularza)

(ważny fragment tekstu)(blok z treścią poboczną)


(element listy)

(cała sekcja z treśćmi o danej tematyce np. komentarze do postu)

(formularz)

I wiele więcejhttp://www.w3.org/TR/html-markup/elements.html


<h1><h2>

<h3>

<h4>

<h5>

<h6>

<div> <span>

<p><table>

<img>

<strong> <ul>

<ol>

<ul><ul>

<li>

<article>

<header>

<section>

<input><footer>

<aside><form>

http://www.w3.org/TR/html-markup/elements.html



Wyróżniamy znaczniki, które trzeba „zamknąć”, poprzez dopisanie ukośnika przed jego nazwą np.:


<div>treść</div>

Są też takie, których nie trzeba „domykać”:


<img src=”obrazek.jpg”>

W kilka minut powstała prosta strona z artykułem.Ulepszmy ją, by była zgodna ze standardami tworzenia stron HTML.

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/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>


Każda strona powinna zaczynać się od tzw. doctype’a, czyli elementu mówiącego przeglądarce, jak powinna interpretować kod HTML.

Dodajmy go!

Dodajmy doctype

<!DOCTYPE html><h1>Front-end developer with strong JavaScript skills // Home on Demand</h1>


<h2>About us</h2>







Dokumenty HTML powinny mieć też element <html>, w którym zawarty jest cały kod strony...

Dodajmy <html>

<!DOCTYPE html><html lang="en"> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1>


<h2>About us</h2>


<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>





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.

Dodajmy atrybut „lang”

<!DOCTYPE html><html lang="en"> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1>


<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>






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>

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>

! !!!

!

!

! !

!

! !!

!

!! !!

!

!

!

!! !!

!!

! !!

!! !

!

!

!!

!

! ! !!

!

!! !

!

!

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.

Dodajmy <head><!DOCTYPE html><html lang="en"> <head></head> <h1>Front-end developer with strong JavaScript skills // Home on Demand</h1>


<h2>About us</h2>







Mówiliśmy coś o tytule? Dodajmy go!

Naturalnie w <head></head>

Służy do tego znacznik... <title></title>

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>


<h2>About us</h2>







Wartość w <title> ma wpływ na to, jak wyświetlana jest Twoja strona w kartach przeglądarki czy choćby w wynikach Google...

bez <title> z <title>

Wróćmy jednak do ulepszania naszej strony...

Ostatnią rzeczą, jest dodanie tagu <body>.

To w nim umieszczamy zawartość naszych stron.

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>


<h2>About us</h2>


<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>





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.

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/

Aby sprawdzić, czy nasz kod jest prawidłowy, możemy po prostu wkleić kod naszej strony do formularza...

Nie udało się...

Co się stało? Na szczęście mamy listę błędów...

Wychodzi na to, że należy dodać do elementu <img> atrybut „alt”, który jest wymagany...

Zróbmy to!

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/Banner-homeondemand.png" alt="banner">

<h2>About us</h2>







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.).

Tak to wygląda w przeglądarce, gdy dodamy atrybut „alt”.

Skąd wiem, że atrybut alt oznacza to, a nie co innego?

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.

Sprawdźmy ponownie naszą stronę...

Nicolas nigdy jednak nie jest zadowolony do końca...

Hahaha, dobre, Damian!

Tłumaczysz prawie tak dobrze, jak ja

gram.

Spójrzmy na to, co jeszcze powiedział nam walidator...

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.

Gdybyśmy jej nie podali, zamiast polskich znaków mielibyśmy krzaczki:

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źć.

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>


<h2>About us</h2>



http://berlinstartupjobs.com/wp-content/uploads/Banner-homeondemand.pn




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.

<!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>


<h2>About us</h2>



Finalny HTML wygląda tak!





Czas na zadanie!

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ąć:

Zauważ, że mamy do czynienia z pojedynczą treścią, dokładniej - z postem na bloga. Pojedyncze artykuły zwykło umieszczać się w <article>.

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.

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.

Tekst blog posta:

Bieber stworzył już kilka stron i nie zamierza na tym poprzestać. Prawdopodobnie zaśpiewam o HTMLu na mojej następnej płycie - dodaje artysta.

Zauważ, że użyliśmy cytatu Justina. ;-)

#1

#2

#3Link do kotka: https://dl.dropboxusercontent.com/u/12592160/cat.jpg

https://dl.dropboxusercontent.com/u/12592160/cat.jpg

https://dl.dropboxusercontent.com/u/12592160/cat.jpg

Chcesz więcej?Przyjdź na nasze szkolenie!

http://functionite.pl/szkolenia/warszawa/html5-css3-23-24-listopada.html



Education

Wstęp do HTML5