Strona WWW

Karta pracy 2017/2018

Adres:
http://plotkarka.eu/KP/strona.html
Autor:
Radosław Kowaluk

Czynności wstępne

Utwórz folder np. WWW do przechowywania plików ćwiczeniowych. W folderze WWW utwórz folder szablony. W oknie folderu z menu Narzędzia wybierz Opcje folderów... a następnie kartę Widok. Odznacz właściwość Ukryj rozszerzenia znanych typów plików i zatwierdź przyciskiem OK

Podstawowa struktura strony

Struktura strony: element główny1, nagłówek2 i zawartość dokumentu3

W edytorze kodu (np. Notepad++ lub Notatniku) wpisz następującą strukturę strony WWW:

<html>
 <head>

 </head>
 <body>

 </body>
</html>

Zapisz dokument w następujący sposób4:

Wersja dla Notepad++

  1. Kliknij menu Format i wybierz Koduj w UTF-8 (bez BOM)
  2. Kliknij menu Plik i wybierz Zapisz jako…
  3. Z listy Zapisz w: wybierz folder szablony
  4. W polu Nazwa pliku wpisz szablonstrony1.html
  5. Naciśnij przycisk Zapisz

Wersja dla Notatnika

  1. Kliknij menu Plik i wybierz Zapisz jako…
  2. Z listy Zapisz w: wybierz folder szablony
  3. W polu Nazwa pliku wpisz szablonstrony1.html
  4. Z listy Zapisz jako typ: wybierz Wszystkie pliki
  5. Z listy Kodowanie: wybierz UTF-8 i naciśnij przycisk Zapisz

Typ dokumentu5

W pliku szablonstrony1.html przed elementem html dopisz kod: 

<!DOCTYPE html>
<html>

Tytuł strony6

W pliku szablonstrony1.html w elemencie head wpisz kod:

 <head>
  <title>Tytuł strony</title>
 </head>

Język strony7

W pliku szablonstrony1.html w znaczniku html wpisz kod:

 <html lang="pl">

Zawartość strony

W pliku szablonstrony1.html w elemencie body wpisz kod:

 <body>
  Zawartość strony
 </body>

Podgląd strony

Otwórz plik szablonstrony1.html za pomocą przeglądarki internetowej. Tekst Tytuł strony, zawarty w elemencie title, jest widoczny na zakłdce lub pasku tytułowym przeglądarki, a tekst Zawartość strony zawarty w elemencie body, w oknie przeglądarki.

Źródło strony

Z menu Widok wybierz polecenie Źródło strony (Widok źródła strony można uzyskać w menu podręcznym wybierając funkcję Pokaż źródło). Otworzy się okno z następującym kodem strony: 

<!DOCTYPE html>
<html lang="pl" >
 <head>
  <title>Tytuł strony</title>
 </head>
 <body>
  Zawartość strony
 </body>
</html>

Zmiana zawartości elementów

Zmień teksty: Tytuł strony na Tu wpisz tytuł strony oraz Zawartość strony na Tu wpisz zawartość strony. Zamknij okno edytora potwierdzając zmiany w dokumencie a następnie naciśnij przycisk Odśwież na pasku przeglądarki. Sprawdź czy zmiany są widoczne na stronie.

Sprawdzanie poprawności strony

  1. Otwórz otwórz plik szablonstrony1.html przeglądarce internetowej Firefox.
  2. Wybierz z menu podręcznego Pokaż źródło strony.
  3. Błędy są wyróżnione czerwonym kolorem (wskazanie kodu z błędem wyświetli komunikat).
  4. Popraw błędy (jeśli występują).

Tworzenie pliku index.htm

Skopiuj plik szablonstrony1.html do folderu WWW. Zmień nazwę otrzymanego pliku na index.html. Zmień tytuł i zawarość.

Wgrywanie plików na serwer (opcjonalnie)

  1. W oknie systemowym wpisz adres serwera FTP.
  2. W oknie dialogowym wpisz login i hasło.
  3. Po zalogowaniu otwórz folder przeznaczony na publikację stron. Usuń pliki (jeśli istnieją).
  4. Umieść plik index.html na serwerze metodą kopiuj-wklej lub przeciągnij-upuść.
  5. Wyloguj się i sprawdź poprawność wczytywania strony wpisując w przeglądarce adres domeny (plik index.html). Aby zobaczyć inne pliki wpisz pełny adres.
  1. Element <html> - zawiera dokument (obowiązkowy).
  2. Element <head> - zawiera nagłówek dokumentu (obowiązkowy).
  3. Element <body> - zawiera zawartość dokumentu (obowiązkowy).
  4. Wszystkie pliki stron internetowych zapisuj w ten sposób używając nazw jednowyrazowych, bez polskich znaków i wielkich liter. Pamiętaj o wpisaniu rozszerzenia .html (lub .htm) po nazwie pliku. Jeśli rozszerzenia nie są widoczne zmień ustawienia systemu.
  5. Deklaracja DOCTYPE - definiuje typ dokumentu (zalecana).
  6. Element <title> - zawiera tytuł dokument (obowiązkowy).
  7. Atrybut lang w kodzie <html lang="pl"> - definiuje język polski w całym dokumencie. Wartością jest kod języka (zalecany). Warrtości atrybutu umieszczamy w cudzysłowiu " " lub ' '.

Metadane

Informacje o stronie1 - kodowanie strony2

W źródle pliku szablonstrony1.html w elemencie head dodaj kod:

  <title>Tytuł strony</title>
  <meta charset="utf-8"/>
 </head>

Wykonaj kopię pliku szablonstrony1.html i nazwij go szablonstrony2.html w folderze szablony.

Słowa kluczowe - nazwa3 i wartość4

W źródle pliku szablonstrony2.html w elemencie head dodaj kod:

  <meta charset="utf-8"/>
  <meta name="keywords" content="wyraz1, wyraz2, "/>
 </head>

Opis zawartości strony

W źródle pliku szablonstrony2.html w elemencie head dodaj kod:

  <meta name="keywords" content="wyraz1, wyraz2, "/>
  <meta name="description" content="opis strony"/>
 </head>

Informacje o autorach strony

W źródle pliku szablonstrony2.html w elemencie head dodaj kod:

  <meta name="description" content="opis strony"/>
  <meta name="author" content="imię i nazwisko"/>
 </head>

Sposób wyświetlania na urządzeniach mobilnych

W źródle pliku szablonstrony2.html w elemencie head dodaj kod:

  <meta name="author" content="imię i nazwisko"/>
  <meta name="viewport" content="width=device-width"/>
 </head>

Informacje własne

W źródle pliku index.html zmień tytuł strony, dodaj wyrazy kluczowe, opis strony, autora - wpisując własne dane.

 <head>
  <title>Ćwiczenia z HTML</title>
  <meta charset="utf-8"/>
  <meta name="keywords" content="HTML, WWW"/>
  <meta name="description" content="Ćwiczenia z HTML"/>
  <meta name="author" content="imię nazwisko"/>
  <meta name="viewport" content="width=device-width"/>
 </head>

Wykonaj kopię pliku szablonstrony2.html i nazwij go szablonstrony3.html w folderze szablony.

Kontrola robotów indeksujących

W źródle pliku szablonstrony3.html w elemencie head dodaj kod:

  <meta name="viewport" content="width=device-width"/>
  <meta name="robots" content="wybór"/>
 </head>

wybór: noindex|index, nofollow|follow

Odświeżanie strony

W źródle pliku szablonstrony3.html w elemencie head dodaj kod:

  <meta name="robots" content="wybór"/>
  <meta http-equiv="Refresh" content="liczba sekund"/>
 </head>

Generator strony

W źródle pliku szablonstrony3.html w elemencie head dodaj kod:

  <meta http-equiv="Refresh" content="liczba sekund"/>
  <meta name="generator" content="nazwa aplikacji"/>
 </head>

Właściwości strony

Adres bazowy5, wartość adresu6

W źródle pliku szablonstrony3.html w elemencie head dodaj kod:

  <meta name="generator" content="nazwa aplikacji"/>
  <base href="tu wpisz adres swojej domeny"/>
 </head>

Styl strony6

W źródle pliku szablonstrony3.html w elemencie head dodaj kod:

  <base href="tu wpisz adres swojej domeny"/>
  <style>
body {
color: blue;
}
  </style>
 </head>

Sprawdzanie poprawności strony

  1. W przeglądarce internetowej wpisz adres validator.w3.org
  2. Wybierz zakładkę Validate by File Upload
  3. Za pomocą przycisku Przeglądaj... otwórz plik index.html
  4. Naciśnij przycisk Check
  5. Sprawdź poprawność plików szablonów

Wgrywanie plików na serwer (opcjonalnie)

Umieść plik index.html na serwerze (aktualizacja),

 Utwórz folder szablony na serwerze i umieść w nim pliki szablonów.

Wyloguj się i sprawdź poprawność wczytywania strony głównej.

Aby zobaczyć inne pliki wpisz pełny adres (subdomena.xyz/szablony/szablon1.html).

  1. Element <meta> - opis zawartości strony internetowej.
  2. Aby uzyskać polskie znaki na stronach internetowych można zamiast kodowania UTF-8 (zalecany format przez W3C) można użyć iso-8859-2 (zalecane przez PKN i ISO Polską Normę PN-93 T-42118 lecz nie obsługiwane przez Notatnik) lub windows-1250 (standardowo wprowadzone przez Microsoft i stosowane przy eksporcie dokumentów w pakiecie biurowym).
    Zastosowany zapis, wprowadzony w HTML 5, jest skróconą formą kodu: <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  3. Atrybut name - definiuje nazwę właściwości. Wartością są dane znakowe.
  4. Atrybut content - definiuje wartość właściwości. Wartością jest tekst.
  5. Element <base> - adres bazowy strony internetowej.
  6. Atrybut href - definiuje wartość adresu. Wartością jest uniwersalny identyfikator zasobów.
  7. Element <style> - definicje CSS strony. Częściej stosowanym sposobem formatowania jest zastosowanie elementu <link>, króry określa plik z definicjami CSS strony.