Walidacja

Walidacja oznacza sprawdzenie poprawności składniowej i strukturalnej dokumentu. Nie sprawdzany jest oczywiście właściwy dobór znaczników.

Zadanie 1.

Sprawdź poprawność swojej strony o pociągach i popraw jeśli to konieczne.

Zmień DOCTYPE na HTML 4.01 STRICT i sprawdź ponownie.

Przypisanie stylu do dokumentu

Jak wiemy, największy wpływ na sposób wyświetlenia naszej strony ma czytelnik i jego przeglądarka. Możemy jednak podać pewne własne propozycje co do formatowania poszczególnych elementów strony, najlepiej robić to za pomocą arkusza stylu, a najlepszym standardem do zapisywania arkuszy stylu jest CSS.

Arkusz stylu może być wpisany w całości w dokumencie HTML (w elemencie <style> w sekcji <head>), może też być umieszczony w zewnętrznym pliku z rozszerzeniem css, wtedy informację o nim w dokumencie podaje się w elemencie <link> w sekcji <head>. Bardziej zalecany jest drugi sposób, dzięki niemu wiele stron może używać tego samego stylu.

Pamiętajmy, że podany przez nas styl jest tylko propozycją, i czytelnik może go zupełnie zignorować albo zmienić niektóre jego elementy.

Przykład 1. Dokument HTML ze stylem wpisanym do strony (niezalecane)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Tytuł  strony</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="Author" content="Jaś Kowlaski">
  <style>
    body   {background-color:yellow;}
    strong {color: red; font-weight: bold;}
    dt     {font-weight: bold;}
  </style>
</head>
<body>
  Treść strony
</body>
</html>

Przykład 2. Dokument HTML ze stylem w zewnętrznym pliku (zalecane)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Tytuł  strony</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="Author" content="Jaś Kowlaski">
  <link rel="stylesheet" type="text/css" href="mojstyl.css">
</head>
<body>
  Treść strony
</body>
</html>

Można również podać arkusz stylu dostepny gdzieś w internecie, np. jeden z tych. Wtedy link będzie miał postać: <link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Modernist" type="text/css">

Zadanie 2. Zadanie na zajęcia

Do strony o lokomotywach (zadanie z poprzednich zajęć) dodaj informację o zewnętrznym arkuszu stylu, jednym z W3CCoreStyles.

Kolory

color: kolor pierwszoplanowy (zwykle kolor tekstu)
background-color: kolor tła
border-color: kolor obramowania

Wartością może być nazwa koloru (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow)

Może też być określenie koloru w sklali RGB: procentowo (np. rgb(0%,50%,100%)), liczbowo od 0 do 255 (np. rgb(0, 128, 255)) lub szesnastkowo (np. #0080FF).

Czcionki

font-family: krój (rodzina) czcionki; można tu podać nazwę konkretnej czcionki, istnieją też ogólne rodziny: serif, sans-serif, monospace, cursive, fantasy
font-size: rozmiar czcionki; względny (larger, smaller), użytkownika (np. small, medium, large, x-large, xx-large, lub podany bezpośrednio w pikselach (15px), punktach (12pt), wielokrotności domyślnego w danym miejscu rozmiaru czcionki (1.1em) itp.
font-weight: "grubość" czcionki: normal, bold, bolder
font-style: "styl" czcionki: normal, italic, oblique

Przykład 3.

body {
	font-family: 'Tahoma', 'Times New Roman', serif;
	font-size: 12pt;
}

h1 {
	font-family: 'Arial', 'Verdana', sans-serif;
	font-size: 2em;
	font-weight: bold;
	font-style: normal;
}

h2 {
	font-family: 'Arial', 'Verdana', sans-serif;
	font-size: larger;
	font-weight: bold;
	font-style: italic;
}

Zadanie 3. Zadanie na zajęcia

Do strony o lokomotywach (zadanie z poprzednich zajęć) dodaj własny arkusz stylu.

Zadanie 4. Zadanie domowe

Popraw i uzupełnij stronę o historii HTML, zgodnie z uwagami prowadzącego ćwiczenia.
Spraw, aby strona była poprawna składniowo (tzn. „walidowała się”).
Dodaj element link przypisujący stronie jeden z gotowych arkuszy stylu W3CCoreStyles.

UO HTML – ćwiczenia 3 – Style CSS