Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Strona kodowa i tytuł strony

Strona kodowa

Strona kodowa, to sposób w jaki będą kodowane znaki na naszej stronie WWW. Język HTML musi przecież obsługiwać różne języki świata w tym język polski z charakterystycznymi dla niego "ogonkami" - ąęść, itd. Dlatego zostały określone różne strony kodowe dla różnych języków i części świata. Dla naszego kraju odpowiednim standardem jest ISO 8859-2 lub UTF-8. Dzisiaj, standardem staje się bardziej praktyczne i uniwersalne kodowanie UTF-8. Jest to system kodowania Unicode, w którym unikatowy numer jest przypisany, każdemu znakowi, różnych alfabetów. Uwzględnione są również rożne symbole np. ® (zarejestrowany znak handlowy). W wykonywanych ćwiczeniach stosuj stronę kodową UTF-8
Stronę kodową umieszczamy w nagłówku dokumentu, mówiąc dokładniej w znaczniku meta. Ten znacznik nie występuje w parze, umieszczenie strony kodowej będzie wyglądało następująco:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
  </body>
</html>

Ćwiczenie 1_1_1_1

Wykonaj stronę WWW na której będzie pokazany napis "Ćwiczenie deklarowania strony kodowej. Sprawdzę wyświetlanie liter ąęśćółńżź". Jeżeli nie pamiętasz sposobu zapisywania ćwiczeń, to zajrzyj tutaj.

  1. W folderze html5, utwórz folder cwicz_1_1_1_1
  2. Otwórz Notepad++ i przepisz pokazany wyżej szkielet dokumentu uwzględniający definicję strony kodowej. Pamiętaj o wcięciu znacznika meta względem znacznika head
  3. W sekcji body napisz Ćwiczenie deklarowania strony kodowej. Sprawdzę wyświetlanie liter ąęśćółńżź. Pamiętaj aby zastosować wcięcie tego tekstu względem znaczników body
  4. Zapisz plik jako cwicz_1_1_1_1.html
  5. Otwórz ten plik za pomocą Firefoxa
  6. Zwróć uwagę, że dalej brakuje nam tytułu. Polskie znaki są poprawnie wyświetlane. Gdybyśmy jednak zdefiniowali stronę kodową jako Windows-1250, to inny system operacyjny jak Windows wyświetliłby różne "krzaczki" zamiast polskich "ogonków"

Tak powinna wyglądać poprawnie wykonana strona:

Tytuł strony

Jest wyświetlany na belce tytułowej karty przeglądarki. Umieszczamy go w sekcji head. Tytuł jest jedynym elementem nagłówka, który jest widoczny bez zaglądania do kodu strony. Umieszczenie tytułu wygląda następująco:

<!doctype html>
<html>
  <head>
    <title>Tutaj należy wpisać tytuł strony</title>
    <meta charset="UTF-8" />
  </head>
  <body>
  </body>
</html>

Zwróć uwagę, że stronę kodową omówiliśmy w pierwszej kolejności, natomiast w powyższym kodzie umieszczona jest za tytułem. Wynika to stąd, że kodowanie choć jest ważniejsze od tytułu, to otwiera grupę kilku znaczników meta.

Ćwiczenie 1_1_1_2

Wykonaj stronę WWW na której będzie pokazany napis "Ćwiczenie wstawiania tytułu strony"

  1. W folderze html5, utwórz folder cwicz_1_1_1_2
  2. W folderze html5, otwórz folder cwicz_1_1_1_1
  3. Za pomocą Notepad++ otwórz plik cwicz_1_1_1_1.html
  4. Uzupełnij szkielet dokumentu o tytuł następującej treści: Mój pierwszy tytuł strony. Zastosuj wcięcie znacznika title względem znacznika head
  5. W sekcji body napisz Ćwiczenie wstawiania tytułu strony. Pamiętaj aby zastosować wcięcie tego tekstu względem znaczników body
  6. Zapisz plik w folderze cwicz_1_1_1_2 jako cwicz_1_1_1_2.html
  7. Otwórz ten plik za pomocą Firefoxa
  8. Zwróć uwagę, że przeglądarka pokazała tytuł. Aby obejrzeć poprawnie wykonaną stronę kliknij link poprawnie wykonana strona

Tak powinnna wyglądać poprawnie wykonana strona:

Praca domowa

  1. Wykonaj ponownie Ćwiczenie 1_1_1_1.
  2. Wykonaj ponownie Ćwiczenie 1_1_1_2.
  3. Przepisz do zeszytu szkielet dokumenu i naucz się go na pamięć. Musisz umieć omówić znaczenie poszczególnych znaczników.

Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.