rrogacz.pl
ikony programów
STRONY INTERNETOWE

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.
Całość ujmujemy w znaczniki 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: html podstawowy kod
Korzystając z VSC (Visual Studio Code - aplikacja, której będziemy używali przy pisaniu kodu) wystarczy wpisać: ! [Enter] lub html:5 (jest to tzw. rozszerzenie Emmet), aby automatycznie został dodany powyższy kod.
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">

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.
Przykładowy kod całej strony wygląda następująco: html podstawowy kod
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.

Polecana strona ćwiczeniowa:
https://www.w3schools.com/html/default.asp
Projekt i wykonanie: Ryszard Rogacz© 1999−2025