PODSTAWY HTML

POZIOM 1 – SZKOŁA PODSTAWOWA

SZABLON STRONY INTERNETOWEJ

<!DOCTYPE html>
<html lang="pl">
  <head>
    <title> Tytuł strony </title>
    <meta charset="utf-8">
  </head>
  <body>
    Treść
  </body>
</html>

Poniżej przedstawię szczegółową budowę szablonu.

a) Określa wersję HTML użytą na stronie. W tym przykładzie jest to HTML5.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <title> Tytuł strony </title>
    <meta charset="utf-8">
  </head>
  <body>
    Treść
  </body>
</html>

b) Informuje przeglądarkę, że dokument został zapisany w HTML.
Atrybut lang=”pl” określa język dokumentu, korzystają z tego wyszukiwarki internetowe.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <title> Tytuł strony </title>
    <meta charset="utf-8">
  </head>
  <body>
    Treść
  </body>
</html>

c) Jak łatwo zauważyć element html składa się z dwóch sekcji: nagłówek (head) i ciało (body).

<!DOCTYPE html>
<html lang="pl">
  <head>
    <title> Tytuł strony </title>
    <meta charset="utf-8">
  </head>
  <body>
    Treść
  </body>
</html>

d) Tytuł strony, pojawia się on na pasku tytułowym przeglądarki.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <title> Tytuł strony </title>
    <meta charset="utf-8">
  </head>
  <body>
    Treść
  </body>
</html>

e) Systemu kodowania znaków.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <title> Tytuł strony </title>
    <meta charset="utf-8">
  </head>
  <body>
    Treść
  </body>
</html>

f) Ciało strony czyli sekcja body zawiera wszystko to co widzimy w oknie przeglądarki.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <title> Tytuł strony </title>
    <meta charset="utf-8">
  </head>
  <body>
    Treść
  </body>
</html>

TWORZENIE STRONY W NOTATNIKU

a) Uruchom program notatnik i wpisz w nim następującą treść.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <title> Moja pierwsza strona internetowa </title>
    <meta charset="utf-8">
  </head>
  <body>
    Witaj w HTML5!
  </body>
</html>

b) Utwórz na pulpicie nowy folder o nazwie HTML i zapisz w nim plik.

Z menu wybierz Plik -> Zapisz jako i ustaw:
– nazwa pliku: index.html
– zapisz jako typ: wszystkie pliki (*.*)
– kodowanie: UTF-8