Dokument HTML składa się z części nagłówkowe - head i ciała - body.
W części head podajemy informacje dotyczące dokumenty, jak tytuł, autora i, co bardzo ważne, kodowanie znaków.
Wzór dokumentu HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Tytuł strony</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Author" content="Jaś Kowlaski"> </head> <body> To jest treść strony </body> </html>
Jest wiele dostępnych kodowań znaków, ważne, aby podane kodowanie zgadzało się z faktycznym kodowaniem pliku.
Popularne kodowania dla języka polskiego:
utf-8iso-8859-2windows-1250Akapity oznacza się znacznikiem <p> (koniec akapitu </p>),
natomiast znacznik <br> oznacza koniec wiersza bez rozpoczynania akapitu.
Uwaga, należy wystrzegać się nadużywania znacznika <br>, jest on uzasadniony tylko w wyjątkowych
przypadkach. Natomiast podział na akapity jest (na stronach typu "artykuł") bardzo ważny.
<p>Tere fere kuku, to jest pierwszy akapit. Tere fere kuku, to jest pierwszy akapit. Tere fere kuku, to jest pierwszy akapit. Tere fere kuku, to jest pierwszy akapit. Tere fere kuku, to jest pierwszy akapit.</p> <p>Tere fere kuku, to jest drugi akapit. Tere fere kuku, to jest drugi akapit. Tere fere kuku, to jest drugi akapit.</p>
Zenon Kowalski<br> ul. Nieciekawa 3<br> 12-345 Trepy
Tere fere kuku, to jest pierwszy akapit. Tere fere kuku, to jest pierwszy akapit. Tere fere kuku, to jest pierwszy akapit. Tere fere kuku, to jest pierwszy akapit. Tere fere kuku, to jest pierwszy akapit.
Tere fere kuku, to jest drugi akapit. Tere fere kuku, to jest drugi akapit. Tere fere kuku, to jest drugi akapit.
Zenon KowalskiNagłówki (tytuły i tzw. śródtytuły) oznaczamy w HTML znacznikami od <h1> do <h6>.
Oznaczenie nagłówków jest bardzo ważne, gdyż nadaje strukturę dokumentowi.
Nagłówków nie wolno używać w celu wyróżnienia tekstu.
W HTML występują trzy rodzaje list: numerowane, nienumerowane i listy definicji. We wszystkich przypadkach element oznaczający cała listę zawiera elementy oznaczające pozycje listy.
Lista numerowana oznaczana jest elementem <ol>, a jej elementy <li>.
Lista nienumerowana oznaczana jest elementem <ul>, a jej elementy <li>.
Lista definicji oznaczana jest elementem <dl>, a jej elementy są dwojakiego rodzaju.
Pojęcia (hasła) oznaczamy <dt>, natomiast ich opisy <dd>.
<ol> <li>Punkt pierwszy.</li> <li>Punkt grugi</li> </ol>
<ul> <li>Nienumerowany</li> <li>Nienumerowany</li> </ul>
<dl> <dt>consecutive</dt> <dd>kolejny</dd> <dt>malicious</dt> <dd>złośliwy</dd> <dd>podstępny</dd> </dl>
<em> służy do wyróżnienia, a <strong> do silnego wyróżnienia
(zazwyczaj krótkiego) fragmentu tekstu.
<p>Amelia ma <strong>naprawdę</strong> piękne oczy. </p>
<p>Oznaczenie nagłówków jest bardzo ważne, gdyż nadaje strukturę dokumentowi. <em>Nagłówków nie wolno używać w celu wyróżnienia tekstu</em>. </p>
<body>
a </body> wpisz jakiś tekst, zapisz plik, a w przeglądarce odśwież widok - napis powinien się pojawić.
Otwórz plik index.html w programie Notepad++ lub Notatniku. Wybierz kodowanie UTF-8
(zauważ, że taka informacja znajduje się w sekcji head strony).
Używając znaczników HTML takich jak h1, h2, p,
br, strong,... utwórz własną wizytówkę.
(Na razie) nie chodzi o wygląd, tylko o znaczniki!
Otwórz plik mickiewicz.html w programie Notepad++ lub Notatniku. Zmień tytuł. Zapisz plik, zobacz stronę w przeglądarce.
Używając znaczników HTML poprawnie oznacz zawartość pliku. Nie chodzi o wygląd! Tylko o oznaczenie nagłówków, akapitów, cytatów i list. W komentarzach są podpowiedzi i prowadzący powinien podpowiadać.
Ustalmy, że h1 oznacza tytuł całego dokumentu, natomiast tytuły rozdziałów to h2, podrozdziałów h3 itd.
Pierwszą część listy utworów wykonaj jako listę definicji (dl),
natomiast drugą część jako zwykłą listę nienumerowaną (ul).
To niezbyt eleganckie, ale przećwiczymy dzięki temu oba rodzaj list.
colorbackground-colorborder-colorWartoś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 (np. rgb(0, 128, 255)) lub szesnastkowo (np. #0080FF).
font-familyserif, sans-serif, monospace, cursive, fantasyfont-sizelarger, 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-weightnormal, bold, bolderfont-stylenormal, italic, obliquebody {
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;
}marginpaddingWartością jest wielkość, np. w pikselach bądź milimetrach. Można podać jedną wartość dla wszystkich czterech stron lub cztery wartości w kolejności dla stron: góra, prawoe, dół, lewo.
Można też podawać margines tylko dla określonej strony, np. margin-top.
img {
margin: 5px 3px 5px 3px;
}
td, th {
padding: 3px;
}
Plik mojstyl.css zawiera definicję stylu. W obu dokumentach znacznik link mówi, że
przeglądarka ma użyć tego stylu. Tak więc zmiana stylu powinna skutkować zmianą wyglądu w obu dokumentach (i o to chodzi w arkuszach stylu).
Z pomocą prowadzącego sformatuj poszczególne elementy dokumentu. Do wykonania w miarę możliwości:
Pierwszy akapit dokumentu (Adam Bernard Mickiewicz ur. 24 grudnia 1798 w Zaosiu koło Nowogródka...
) oznacz jako
klasę streszczenie, a w stylu nadaj tej klasie jakiś szczególny wygląd (np. większe marginesy z lewej i prawej).
Więcej chyba nie zdążymy...