HTML5 - podstawy
Język HTML5 jest rozwinięciem HTML4 i XHTML1.
Został skonstruaowny tak, że starsze przeglądarki mogą bez problemu ignorować jego nowe polecenia.
Pojawiła się obsługa audio i video oraz dodano wiele znaczników poprawiających przejrzystość kodu i układ logiczny strony.
Standard HTML5 upraszcza zapis deklaracji podstawowych elementów:
-
Deklaracja typu dokumentu:
<!DOCTYPE html>Informujemy przeglądarkę, iż niniejszy dokument należy potraktować jako zapisany w standardzie HTML 5. Oczywiście przeglądarka posiada wiele mechanizmów kompatybilności wstecznej ze standardami HTML 4.01 i XHTML (więc jeżeli zapiszemy coś wg starszej metody nie będzie wielkiego problemu), niemniej jednak taka deklaracja powinna się znaleźć jako pierwsza w kodzie Twojej strony. Starsze deklaracje były dużo dłuższe, bo zawierały tzw. wpis DTD (ang. document type definition). -
Sposób kodowania znaków:
<meta charset="UTF-8"> -
Dołączenie arkusza stylu nie wymaga atrybutu
type:<link rel="stylesheet" href="styl.css"> -
Deklaracja JavaScript również nie wymaga atrybutu
type:<script src="plik.js"></script>
Dokument HTML składa się z dwóch głównych bloków:
- nagłówka
head- zawiera opis i właściwości strony, - ciała strony
body- zawiera treść strony.
html z określeniem języka strony <html lang="pl">.Pominięcie atrybutu
lang="pl" spowoduje wyświetlnie, przez przeglądarki, monitu o tłumaczenie strony.
Na podstwie powyższych podstawowy kod strony przedstawia się nastepująco:
! [Enter] lub html:5
nagłówek strony
W nagłówku <head> wprowadzamy informacje opisujące stronę:
-
Kodowanie znaków (strona kodowa UTF-8):
<meta charset="UTF-8"> -
Skalowanie strony w urządzeniach mobilnych z wartością 100%:
<meta name="viewport" content="width=device-width, initial-scale=1"> -
Autor strony:
<meta name="author" content="Ryszard Rogacz"> -
Opis strony
Wyszukiwarki, wyszukując strony o podanej tematyce, informacje zawarte w tym znaczniku wyświetlają jako opis zawartości strony.
Treść nie powinna przekraczać 230 znaków.
<meta name="description" content="strona zawierająca ciekawe informacje"> -
Wyrazy kluczowe
Ułatwiają wyszukiwanie strony.
Aktualnie roboty google częściej "zwracają uwagę" na słowa zapisane w tytule strony, znacznikach<h1>, i... przede wszystkim poprawność kodu strony.
<meta name="keywords" content="słowo1, słowo2, słowo3"> -
Odświeżanie strony
<meta http-equiv="refresh" content="x">
spowoduje odświeżenie strony co x sekund.
<meta http-equiv="refresh" content="x; url=adres">
spowoduje przekierowanie użytkownika po upływie x sekund do podanego adresu. -
Tytuł strony
<meta name="title" content="tytuł strony">
lub
<title>tytuł strony</title>
-
Znacznik
<link>wykorzystywany jest do dołączania do strony zewnętrznych plików-
plik stylu CSS:
<link rel="stylesheet" href="styl.css"> -
ikony pomagającej w identyfikacji strony (pojawia się na zakładce w przeglądarce):
<link rel="icon" href="ikona.ico">
-
plik stylu CSS:
podstawowy układ strony
Zasadnicza treść naszej strony musi być umieszczona między znacznikami <body>...</body>.
To, co tutaj wpiszemy pojawi się w oknie gółwnym przeglądarki. Umieszczamy tu zwykły tekst (zostanie on wyświetlony),
osadzamy obrazki właściwymi znacznikami, definiujemy tabele, obszary, itp.
Układ stron buduje się za pomocą specjalnych pojemników (znacznik <div> dostępny w wersji HTML4),
pojemników semantycznych (znaczniki: <header>, <nav>, <section>,
<article>, <aside>, <footer>).
Znaczniki te formatowane są przy użyciu stylu CSS.
Dzięki nim strona staje się bardziej zrozumiała i logiczna, jednocześnie treści zapisane w tych znacznikach
mogą być wykorzystane przez różnego rodzaju usługi i narzędzia (wyszukiwarki, walidatory stron, pozycjonowanie stron).
-
Nagłówek
<header>...</header>.
Umieszczamy tu nazwę instytucji, logo, krótką informację, elementy nawigacyjne (np. odnośnik do formularza kontaktowego). -
Znacznik
<nav>...</nav>.
Umieszczamy tu menu strony i inne elementy nawigacyjne. -
Znacznik
<section>...</section>.
Podział dokumentu na sekcje. -
Znaczniki
<article>...</article>,<aside>...</aside>.
Treśc artykułów w zakresie sekcji. -
Stopka
<footer>...</footer>.
Umieszczamy tu datę powstania, dane firmy, właściciela, informacje o autorze strony.
Po utworzeniu głównej struktury dokumentu należy go bezwzględnie zapisać.
Najpierw tworzymy na dysku lokalnym komputera folder, w którym zapiszemy cały projekt (może się on składać z wielu plików).
Następnie zapisujemy dokument stosując rozszerzenie: html.
W nazwie pliku staramy się stosować jedynie małe litery (wielkość liter w nazwach ma znaczenie), cyfry, znak podkreślenia.
Jedna nazwa ma szczególne znaczenie. Jeśli plik nasz nazwiemy index.html - przez serwer zostanie on potraktowany jako dokument główny i w momencie połączenia się z serwerem i wybranym katalogiem wysłany zostanie do przeglądarki użytkownika.