PODSTAWY HTML

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


c) Otwórz folder z zapisanym plikiem i uruchom go (kliknij 2x). Strona otworzy się w przeglądarce internetowej.



TWORZENIE STRONY W EDYTORZE ONLINE -> CODEPEN.IO

a) Wejdź na stronę https://codepen.io


b) Wybierz Start Coding


c) Po prawej stronie kliknij Change View i wybierz pierwszy widok z lewej.


d) Wpisz w zakładce HTML kod strony. Prawa strona okna pełni rolę przeglądarki internetowej.


TWORZENIE STRONY W NOTEPAD++

a) Zainstaluj darmowy program Notepad++ i wpisz w nim kod źródłowy.

b) Wybierz z menu Plik -> Zapisz jako i ustaw:
– nazwa pliku: index.html
– zapisz jako typ: All types


c) Otwórz folder z zapisanym plikiem i kliknij w niego dwukrotnie. Strona otworzy się w przeglądarce.

Zauważyłeś błąd na stronie?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.