HTML5Łatwe

HTML5 – first step chapter #1

Łatwy

Czymże jest html? Co ten skrót wogóle oznacza? Czy warto znać ten język?

Na te i na inne pytania postaram się odpowiedzieć w tym wpisie oraz wytłumaczę ogólną strukturę Naszego pierwszego projektu, którym będzie… uwaga. 😀 Strona kwiaciarni. Omówię cały proces przez który Razem przebrniemy ! A zobaczycie jakie możliwości niosą za sobą nowe technologie webowe.

HTML5 is comming !

Nie będę wracał do starych technologii! Było mineło ! 😀 Tutaj pełną parą wchodzi HTML5 miażdżąc konkurencję zawierając współprace z językami, które dadzą mu poczucie funkcjonalności jak również nadadzą animuszu!

Nietuzinkowe podejście developerów sprawiło, że język HTML5 w swojej odświeżonej wersji razem z innymi językami webowymi staje się filarem ówczesnych stron www, ba… można rzec aplikacji ! Tak jak pisałem parę linijek wcześniej nie będę porównywał do HTML w wersji 4. Będziemy operować już na aktualnych tagach i znacznikach.
Zaczynajmy więc !

HTML – (Hyper Text Markup Language).  Jest to język znacznikowy.

CODING TIME ! 😀 

No dobra ale jak?! W czym?!  Co?! Gdzie?! aaaaaaaaaaaaaaaaaaa…….aaaaa….a…..

Ok zajmijmy się naszym  workspace (miejsce pracy). Warto czasem uprzątnąć biurko z zbędnych rzeczy 😀 Uzupełnić kubek z kawą. Jak już wszystko jest ok to zabieramy się do instalowania edytorów potrzebnych do praktycznej nauki.

TO PODSTAWA ! 😀

Tutaj macie 3 wg. mnie najlepsze edytory do web’u. Ja osobiście używam brackets (pozostałem dwa również używałem ale jak to bywa znalazłem swojego faworyta gdzie mi się dobrze pisze 🙂 ).

 

1. Notepad ++

2. Sublime Text 2

3. Brackets

 

CODING TIME ! 😀 

 

 

Ok. Zauważyliście może w kodzie takie cos?

Tak właśnie tworzymy w kodzie komentarze w html’u. Komentarze czyli takie linie w kodzie, które maszyna (kompilator) nie bierze pod uwagę. To jest tylko pomoc dla programisty, który czasem zapomni co dany kod robi ;p lub dla kolegów, żeby wiedzieli co i jak. ALBO… 😀

Ok. Przeanalizujmy teraz ten prosty kod linijka po linijce. Wylejmy mocne fundamenty 😀 

 

 

 

 

 

 

 

 

W tej linijce mówimy przeglądarce, że ma do czynienie ze standardową stroną html 🙂

Deklarujemy język w jakim strona będzie się wyświetlać. Stosujemy w tym celu atrybut lang oraz elementu html.

Nasza „głowa” dokumentu. Tam wstawiamy metadate czyli dane dla przeglądarki, które nie są wyświetlane. Definiują np <title>, <style>, <meta>, <link>, <script>.

Jednym z ważnych przykładów, które mamy w swoim kodzie jest

Innymi słowy mówimy przeglądarce w jakim systemie kodowania znaków ma wyświetlić stronę. Jest to nowy standard łatwy do zapamiętania 🙂

Tutaj natomiast deklarujemy ścieżkę która prowadzi nas do zewnętrznego pliku css 🙂 o tym języku już wkrótce.

Podobnie deklarujemy ścieżkę do skryptów (opcjonalnie jak na razie, ponieważ można a nawet lepiej deklarować je zaraz po zamknięciu </body> ale to potem).

Jak już mowa o body „ciało” dokumentu. Tutaj wstawiamy wszystko to co ma się wyświetlić na stronie.

To co pokazałem, cała ta struktura strony nazwana jest DOM (document object model).

 

dom

 

 

Innymi słowy odwrócone drzewko 🙂 Oczywiście to jest tylko przykład zazwyczaj jest o wiele bardziej rozgałęzione i większe. Nie ma co się przejmować 😀

Zamykamy </html> KONIEC mamy pusty dokument (sprawdźcie ! ) ;P znaczy się CDN.