Szkielet Dokumentu HTML
Co to jest HTML?
HTML to nic innego jak skrót wyrazów z języka angielskiego
H – hyper
T – text
M – markup
L – language
Wszystkie znaczniki wpisujemy w <...> takich oto nawiasach one czytane są przez przegladarkę jako kod który wyświetlany jest nam jako strona internetowa.
Na początek poznamy podstawową strukturę dokumentu HTML
<!DOCTYPE>
<html>
<head>
</head>
<body> z tych członów składa się dokument HTML
</body>
</html>
<!DOCTYPE> Deklaracja zgodności strony zgodnie z HTML5
<html>...... </html>- to jest początek i koniec dokumentu HTML
<head>......</head> - to jest tzw. głowa dokumentu tu znajdą się elementy niewyświetlane na stronie tzn. słowa kluczowe, autor, link do dokumentu CSS, oznaczenia kompatybilności dla przeglądarek, kodowanie koniecznie utf-8(polskie ogonki) itp.
body..../body - to ciało naszego dokumentu, czyli to, co zobaczymy na stronce teksty, obrazki, linki, menu, itp.
Stwórzmy teraz swój pierwszy dokument HTML. Otwórzmy notatnik lub notepad++ i wpiszmy ten oto zapis.
<html>
<head>
<meta charset="utf-8">
<meta name="description" content,=„Jeśli interesuje cię historia powstania państwa polskiego to dobrze trafiłeś. u nas znajdziesz to czego szukasz"/>
<meta name="keywords" content="historia polski, II wojna światowa w polsce, powstanie państwa polskiego, średniowiecze w polsce, PRL, "/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
</head>
<body>
<div id=”container”>
<div class=”rectangle”>
Twojahistoria.pl to jest materiał, którego szukasz!
</div>
</div>
</body>
</html>
Potestujcie sami!
A tym czasem możecie również poczytać, co wpisałem w kolejnych liniach kodu.
Najpierw znacznik <head></head>
- <meta charset=”utf-8”> przystosowanie strony do wyświetlania polskich znaków
<meta name="description" content="…” /> tzw. Dyskrypcja, czyli opis, czego dotyczy nasza strona będzie ona widoczna w wyszukiwarce
- <meta name="keywords" content="…” /> słowa kluczowe dla wyszukiwarki. Kiedyś miały większe znaczenie teraz są tylko symboliczne, lecz cóż się nie robi dla zwiększenia swojej pozycji w google.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
Ten znacznik powiadamia nas o kompatybilności strony według najpopularniejszej IE oraz chrome.
To teraz czas na: <body> </body>
Tak, więc:
- <div id=”container”> to kontener, miejsce, pudełko do którego wrzucimy tekst obrazek, logo, lub cokolwiek chcemy.
- <div class=”rectangle”>to również kontener lecz takich kontenerów możemy zrobić dwa lub trzy zależy od potrzeby. Akurat ja w swoim divie zamieściłem tekst
ZAPAMIĘTAJ!
Aby plik zadziałał musi być zapisany jako index.html bo do tego pliku będziemy podczepiać inne pliki.
Warto segregować stronę internetową jest ona wtedy przejrzysta i ładniej wygląda.
Tu jeszcze nie ma CSS Więc wygląda to byle jak ale zobaczycie sami że po kilku rozdziałach dojdziecie do mistrzostwa w tworzeniu stron!
Gwarantuję !
Jak zauważyliście w oknie przeglądarki pojawił się jeden napis a tyle się natrudziliśmy aby to napisać i co wszystko na marne? Nie, oczywiście że nie słowa które wpisaliśmy w "głowie dokumentu " przegladarka odczytuje to fakt ale nie są one wyświetlane.
Podsumujmy I rozdział:
- wiesz z jakich części składa się dokument html
- wiesz co to są klasy dokumentu html i jak je tworzyć
-wiesz jak taki dokument poprawnie zapisać i otworzyć.
To dużo jak na pierwszy raz. Do zobaczenia w dalszych rozdziałach.