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
Na początek poznamy podstawową strukturę dokumentu HTML
<html>
<head>
</head>
<body> z tych członów składa się dokument HTML
</body>
</html>
<HTML></HTML> - to jest początek i koniec
dokumentu HTML
<head></head> - to jest tzw. głowa dokumentu tu
znajdą się elementy nie wyś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 gogle.
<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”>….</div> to kontener, miejsce, pudełko
do którego wrzucimy tekst obrazek, logo, lub cokolwiek chcemy.
- <div class=”rectangle ”>…</div> 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 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.
Brak komentarzy:
Prześlij komentarz