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.
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 ++
3. Brackets
CODING TIME ! 😀
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <!-- Opis --> <html lang="pl"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <script src="skrypt.js"></script> <title>Document</title> </head> <body> </body> </html> |
Ok. Zauważyliście może w kodzie takie cos?
|
1 2 |
<!-- Opis --> |
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… 😀
|
1 2 |
<!-- Fix me... please... :( --> |
Ok. Przeanalizujmy teraz ten prosty kod linijka po linijce. Wylejmy mocne fundamenty 😀 
|
1 2 |
<!DOCTYPE html> |
W tej linijce mówimy przeglądarce, że ma do czynienie ze standardową stroną html 🙂
|
1 2 |
<html lang="pl"> |
Deklarujemy język w jakim strona będzie się wyświetlać. Stosujemy w tym celu atrybut lang oraz elementu html.
|
1 2 |
<head> |
|
1 2 |
</head> |
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
|
1 2 |
<meta charset="UTF-8"> |
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 🙂
|
1 2 |
<link rel="stylesheet" href="style.css"> |
Tutaj natomiast deklarujemy ścieżkę która prowadzi nas do zewnętrznego pliku css 🙂 o tym języku już wkrótce.
|
1 2 |
<script src="skrypt.js"></script> |
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).
|
1 2 |
<body> |
|
1 2 |
</body> |
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).
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.