HTML - BUDOWA

Wyobraź sobie, że kupujesz nową szafę, składasz ją i ustawiasz w wybranym miejscu. Na końcu przychodzi moment, w którym trzeba tą szafę wypełnić. Pewnie większość ludzi z przyzwyczajenia sortuje swoje rzeczy, tak aby w szafie był ład i porządek... Tak też jest w HTMLu. Nie jest to taki chaotyczny kod jak się może wydawać na pierwszy rzut oka. On też ma swoją budowę.

Każdy HTML musi zaczynać i kończyć się znacznikiem:

<html>

 </html>

Przypominam, że tag zamykający musi zawierać /.
Cały kod naszej strony znajduje się pomiędzy tymi tagami. Na bloggerze również tak jest, spójrz:


Następnie dwie najważniejsze sekcje, tj. head (z ang. głowa) oraz body (z ang. ciało).

<html>

<head>

</head>

<body>

</body>

</html>

Jak to najłatwiej zrozumieć? Nooo... przyrównaj kod do siebie. Spójrz! Na górze głowa, na dole ciało. W Twojej głowie znajdują się myśli, pomysły, czyli coś co wiemy, ale nie możemy tego zobaczyć.
I tak samo jest w HTMLu, w sekcji head wpisuje się informacje, których nie widać na stronie. One są, istnieją - są bardzo ważne dla działania tej strony, ale niewidoczne, np. język strony, czcionki, pliki CSS itd...
Natomiast ciało to wszystko to, co widać, Twoje ciało widać, widać jakie masz ubranie i tak samo działa to w HTMLu... Wszystko co będzie zawierać się w sekcji body będzie widoczne na stronie, np. tekst, zdjęcia, obrazki graficzne, przyciski (karty), linki i cała masa różnych gadżetów.

<html>
<head>
To czego nie widać: język,
czcionki, pliki CSS, tytuł i
opis strony widoczny w przeglądarce..
</head>

<body>
To co jest widoczne na stronie:
tekst, zdjęcia, obrazki, linki,
przyciski (strony.karty), odsyłacze itd..
</body>
</html>

Ale, to nie wszystko, wróćmy jeszcze na moment do naszego screen'a kodu. Oprócz znacznika html, kod zawiera również coś innego, co to jest?



<!DOCTYPE>  (z ang. Document Type - typ dokumentu) to taka deklaracja informująca przeglądarkę, w której wersji standardu HTML kodujemy nasz dokument, czyli

<!DOCTYPE html>

Oznacza to, że nasz kod będzie pisany w najnowszej (nadal rozwijanej) wersji HTML5. Oczywiście tych standardów jest więcej, możecie o nich przeczytać TU, TU i TU. Ja nie będę się na ich temat rozpisywać, gdyż sam blogger tego nie wymaga.

A co oznacza to <?xml version="1.0" encoding="UTF-8" ?> na pierwszej pozycji? To po prostu musi się tam znaleźć zgodnie z normą. Chodzi tu po prostu o standardy kodowania. UTF-8 jest najpopularniejszym systemem kodowania, który zawiera m.in. zmiękczenia.. Jeśli chcecie wiedzieć więcej to polecam przeszukać internety :)

Kiedy otworzysz na swoim blogu zawartość kodu HTML - zobaczysz regułę którą już wyjaśniłam.
Przejdźmy teraz do naszej "głowy", czyli sekcji head. U mnie zaczyna się ona na 4 miejscu. Jak widzisz w tej sekcji znajdują się inne kody. Na początku jest np. title, czyli tytuł. Kiedy zjedziemy niżej zobaczymy spory zestaw kodów. Spójrz, na pewno kilka z nich kojarzysz? Czemu? Bo to kody CSS. To kody, którymi wystylizowałaś/łeś swojego bloga. To te same kody, które zostały wpisane do rozszerzenia CSS w edycji szablonu, np. .main-inner .column-left-inner (kolumna lewa), h3.post-title (tytuł posta) itd. 


Kiedy zjedziemy jeszcze niżej, nasz znacznik head się zamyka </head> i otwiera się sekcja body <body>, w której zawarte jest wszystko to co widać. I tutaj pojawia się nasz stopień trudności. Ale nie zrażaj się, kilka ćwiczeń i nabierzesz wprawy. Grunt to poznać słowa. To tak samo jak w nauce języka obcego. Nie chodzi o zapamiętanie całego zdania, a o ilość pojedynczych słów. Im więcej słów znasz tym bardziej ten język pojmujesz. Tak samo jest i tutaj. Jeśli znasz więcej znaków (słów) tym lepiej jest Ci pojąć kody.
Pewnie zauważyłaś/łeś, że w sekcji body znajduje się masa kodów rozpoczynających od tagu <div>, ale o nich w następnej instrukcji :)

1 komentarz:

Subskrybuj: Posty (Atom)