HTML (HyperText Markup Language) to język znaczników pozwalających opisać strukturę strony internetowejstrona internetowastrony internetowej oraz zależności między nimi. Umożliwia także zdefiniowanie wyglądu strony. Implementacja języka jest ułatwiona, bo jest on standaryzowany. Aktualnym standardem jest HTML5, który obsługuje większość współczesnych przeglądarek.
Czy potrzebuję specjalnego programu, by pisać kod HTML?
Kod źródłowy HTML ma postać tekstową, więc można go pisać w dowolnym edytorze tekstu. Na początek nie potrzebujesz żadnego płatnego oprogramowania. Wystarczy Notatnik, który jest wbudowany w każdy system Windows lub jego odpowiednik na innych systemach operacyjnych. Przy prostych stronach w zupełności wystarcza, jednak istnieją bardziej zaawansowane rozwiązania. Alternatywą jest Notepad++, który ma kilka dodatkowych funkcji, między innymi kolorowanie słów kluczowych oraz obsługę wielu plików naraz.
Warto poszukać zintegrowanego środowiska programistycznego, które jeszcze bardziej ułatwia pracę. Przykładem takiego programu jest darmowy Microsoft Visual Studio Cod. Zawiera on mnóstwo dodatków, obsługuje większość współczesnych języków programowania (w tym HTML), ma wbudowane inteligentne podpowiadanie składni oraz ułatwia organizację większego projektu.
Edytorów jest więcej, warto poszukać takiego, który będzie nam odpowiadał.
Co w sekcji BODY, a co w HEAD?
Ogólna zasada mówi, że ustawienia trafiają do sekcji, którą wyznacza element head, a to, co wyświetla się na stronie – do sekcji body.
Przykładowe znaczniki w sekcji head
Elementy, które powinny zostać umieszczone w sekcji head:
Linia 1. otwórz nawias ostrokątny title zamknij nawias ostrokątny tytuł strony otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny.
Linia 3. otwórz nawias ostrokątny meta name znak równości cudzysłów Description cudzysłów content znak równości cudzysłów Opis zawartości strony cudzysłów prawy ukośnik zamknij nawias ostrokątny.
Linia 5. otwórz nawias ostrokątny meta name znak równości cudzysłów Keywords cudzysłów content znak równości cudzysłów Słowa kluczowe oddzielone przecinkami cudzysłów prawy ukośnik zamknij nawias ostrokątny.
Linia 7. otwórz nawias ostrokątny meta http minus equiv znak równości cudzysłów Content minus Type cudzysłów content znak równości cudzysłów System kodowania znaków cudzysłów prawy ukośnik zamknij nawias ostrokątny.
Linia 9. otwórz nawias ostrokątny meta http minus equiv znak równości cudzysłów Content minus Language cudzysłów content znak równości cudzysłów Język strony cudzysłów prawy ukośnik zamknij nawias ostrokątny.
Linia 11. otwórz nawias ostrokątny meta name znak równości cudzysłów Author cudzysłów content znak równości cudzysłów Autor strony cudzysłów prawy ukośnik zamknij nawias ostrokątny.
Linia 13. otwórz nawias ostrokątny meta http minus equiv znak równości cudzysłów Reply minus To cudzysłów content znak równości cudzysłów Adres e minus mail do kontaktu cudzysłów prawy ukośnik zamknij nawias ostrokątny.
Elementy, które powinny zostać umieszczone w sekcji body:
Linia 1. otwórz nawias ostrokątny body bgcolor znak równości cudzysłów kod koloru RGB cudzysłów zamknij nawias ostrokątny.
Linia 3. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny otwórz nawias ostrokątny wykrzyknik minus minus znacznik przejścia do nowej linijki minus minus zamknij nawias ostrokątny.
Linia 5. otwórz nawias ostrokątny ol zamknij nawias ostrokątny lista uporządkowana otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny.
Linia 6. otwórz nawias ostrokątny li zamknij nawias ostrokątny znacznik elementu listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 8. otwórz nawias ostrokątny wykrzyknik minus minus przykład listy uporządkowanej minus minus zamknij nawias ostrokątny.
Linia 9. otwórz nawias ostrokątny ol zamknij nawias ostrokątny Epoki literackie.
Linia 10. otwórz nawias ostrokątny li zamknij nawias ostrokątny antyk otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 11. otwórz nawias ostrokątny li zamknij nawias ostrokątny średniowiecze otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 12. otwórz nawias ostrokątny li zamknij nawias ostrokątny renesans otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 13. otwórz nawias ostrokątny li zamknij nawias ostrokątny barok otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 14. otwórz nawias ostrokątny li zamknij nawias ostrokątny oświecenie otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 15. otwórz nawias ostrokątny li zamknij nawias ostrokątny romantyzm otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 16. otwórz nawias ostrokątny li zamknij nawias ostrokątny pozytywizm otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 17. otwórz nawias ostrokątny li zamknij nawias ostrokątny Młoda Polska otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 18. otwórz nawias ostrokątny li zamknij nawias ostrokątny dwudziestolecie międzywojenne otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 19. otwórz nawias ostrokątny li zamknij nawias ostrokątny modernizm otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 20. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny.
Linia 22. otwórz nawias ostrokątny ul zamknij nawias ostrokątny lista wypunktowana otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny.
Linia 23. otwórz nawias ostrokątny li zamknij nawias ostrokątny znacznik elementu listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 25. otwórz nawias ostrokątny wykrzyknik minus minus przykład listy wypunktowanej minus minus zamknij nawias ostrokątny.
Linia 26. otwórz nawias ostrokątny ul zamknij nawias ostrokątny Polskie pisarki.
Linia 27. otwórz nawias ostrokątny li zamknij nawias ostrokątny Maria Konopnicka otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 28. otwórz nawias ostrokątny li zamknij nawias ostrokątny Maria Dąbrowska otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 29. otwórz nawias ostrokątny li zamknij nawias ostrokątny Zofia Nałkowska otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny.
Linia 30. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny.
<body bgcolor="kod koloru RGB">
<br/> <!--znacznik przejścia do nowej linijki-->
<ol>lista uporządkowana</ol>
<li>znacznik elementu listy</li>
<!--przykład listy uporządkowanej-->
<ol>Epoki literackie
<li>antyk</li>
<li>średniowiecze</li>
<li>renesans</li>
<li>barok</li>
<li>oświecenie</li>
<li>romantyzm</li>
<li>pozytywizm</li>
<li>Młoda Polska</li>
<li>dwudziestolecie międzywojenne</li>
<li>modernizm</li>
</ol>
<ul>lista wypunktowana</ul>
<li>znacznik elementu listy</li>
<!--przykład listy wypunktowanej-->
<ul>Polskie pisarki
<li>Maria Konopnicka</li>
<li>Maria Dąbrowska</li>
<li>Zofia Nałkowska</li>
</ul>
W sekcji body umieszczamy również wszystkie znaczniki manipulujące wyglądem tekstu.
Polecenie 1
Poszukaj informacji na temat innych znaczników, które pojawiają się w sekcjach.
Słownik
adres URL
adres URL
usługa pozwalająca na publikowanie treści (stron, witryn, serwisów) w sieci internetowej
certyfikat SSL
certyfikat SSL
szyfrowanie, które zabezpiecza dane pozostawiane na stronie WWW, np. w formularzach kontaktowych, podczas logowania; certyfikat ten podnosi pozycję strony w wyszukiwarkach oraz zwiększa jej wiarygodność
CMS
CMS
oprogramowanie do zarządzania treścią strony (ang. Content Management System)
dokument HTML
dokument HTML
dokument (strona WWW) czytany przez przeglądarki internetowe, widoczny pod konkretnym adresem URL; zawiera tekst, odnośniki (linki), informacje o multimediach i zdjęciach
domena
domena
adres strony internetowej, np. www.zlompol.pl
home page (strona główna)
home page (strona główna)
strona, na którą kieruje domyślnie adres witryny internetowej
hosting
hosting
przestrzeń na zdalnym serwerze, gdzie przechowywana jest zawartość strony
kreator stron WWW
kreator stron WWW
narzędzie to tworzenia stron internetowych; znajdziesz tam gotowe szablony
link
link
zwany także odnośnikiem, jest aktywnym fragmentem tekstu albo obrazkiem; pozwala przejść na inny adres URL albo wykonać inną czynność, np. przesłać zapytanie przez formularz kontaktowy
post
post
wpis na stronie
responsywność
responsywność
automatyczne dostosowanie rozmiaru strony do urządzeń, na których będzie wyświetlana; responsywna strona to taka, która poprawnie wyświetla się na wszystkich monitorach i wyświetlaczach
serwer internetowy
serwer internetowy
urządzenia do obsługi technicznej stron WWW (przechowywanie plików strony WWW, poczty, multimediów itp.)
zbiór dokumentów HTML; połączone są ze sobą linkami URL (odnośnikami); dokumenty te znajdują się w obrębie jednej domeny internetowej (serwisu internetowego albo witryny internetowej)
witryna internetowa/serwis internetowy
witryna internetowa/serwis internetowy
zbiór połączonych ze sobą pojedynczych stron internetowych