Zaawansowana Pracownia Komputerowa - ´Cwiczenia

(1)

Zaawansowana Pracownia Komputerowa - Cwiczenia ´

Krzysztof Miernik

(2)

HTML - Podstawowe Informacje

• HTML to hipertekstowy j ˛ezyk znaczników (ang. HyperText Markup Language) słu˙z ˛acy do tworzenia stron internetowych

• HTML nie jest j ˛ezykiem programowania

• Jest to j ˛ezyk znaczników (tags) opisuj ˛acych wygl ˛ad dokumentu

• Dokument HTML (strona internetowa) zawiera znaczniki HTML i tekst

• Przegl ˛adarka internetowa wczytuje dokument HTML i wy´swietla jako stron ˛e interpretuj ˛ac znaczniki

• Poprawno´sć (zgodno´sć ze standardem) mo˙zna sprawdzić na stronie http://validator.w3.org/

(3)

HTML - Struktura dokumentu

Przykładowy dokument HTML:

<html>

<head>

</head>

<body>

Tekst

</body>

</html>

I wygl ˛ad w przegl ˛adarce:

(4)

HTML - elementy

• Elementami (ang. elements) HTML s ˛a fragmenty kodu zawarte pomi ˛edzy znacznikiem otwieraj ˛acym i zamykaj ˛acym np.

<h1>Nagłówek</h1>

• Ka˙zdy element HTML rozpoczyna si ˛e znaczkiem otwieraj ˛acym (start/opening tag)

• Ka˙zdy element HTML ko ´nczy si ˛e znaczkiem zamykaj ˛acym (end/closing tag)

• Niektóry elementy HTML zawieraj ˛a pust ˛a tre´s´c

• Puste elementy HTML s ˛a zamkni ˛ete w znaczniku otwieraj ˛acym np. <br />

• Taka składnia jest zgodna z XML, XHTML i HTML (w przyszłych wersjach), w HTML wersji przej´sciowej u˙zywa si ˛e składni bez zamkni ˛e´c( <br>)

• Składnia znaczników nie jest czuła na rozmiar liter (case sensitive), czyli <p> znaczy to samo co <P>, zalecane jest jednak pisanie małymi literami (w przyszło´sci — wymagane)

(5)

HTML - Znaczniki <hn>, <p>

• Znacznik <h1></h1> słu˙zy do tworzenia nagłówków (tytuły, itp.)

• Dost ˛epne jest 6 poziomów nagłówków (<h1>, ..., <h6>)

• Nagłówkiem jest tekst zawarty mi ˛edzy znacznikiem otwieraj ˛acym

<h1>, a zamykaj ˛acym </h1>

• Nie nale˙zy u˙zywa´c nagłówków do powi ˛ekszania ani pogrubiania tekstu

• Zwykły tekst nale˙zy umieszcza´c w paragrafach pomi ˛edzy znacznikami <p>...</p>

(6)

HTML - Znaczniki <hn>, <p>

<html>

<head>

</head>

<body>

<h1>Nagłówek 1</h1>

<p>Paragraf pierwszy</p>

<p>Paragraf drugi</p>

</body>

</html>

(7)

HTML - formatowanie kroju czcionki

Do formatowania kroju czcionek mo˙zna u˙zywa´c m.in. nast ˛epuj ˛acych znaczników:

• Znacznik <b></b> słu˙zy do pogrubiania tekstu (bold)

• Znacznik <i></i> słu˙zy do pochylania tekstu (italic)

• Znacznik <tt></tt> słu˙zy do składania tekstu krojem maszynowym (teletype)

• Znacznik <big></big> słu˙zy do zwi ˛ekszania czcionki

• Znacznik <small></small> słu˙zy do zmniejszania czcionki

• Znacznik <sub></sub> tworzy indeks dolny (np. H₂O)

• Znacznik <sup></sup> tworzy indeks górny (np.²³⁸U lub 14³⁰)

(8)

HTML - kroje tekstu

<html>

<head>

</head>

<body>

<p>Plain text</p>

<p><i>Italic text</i></p>

<p><tt>Teletype text</tt></p>

<p><small>Small text</small></p>

</body>

</html>

(9)

HTML - wypunktowanie i numerowanie

Do tworzenia list wypunktowanych (nieuporz ˛adkowanych) i numerowanych u˙zywane s ˛a znaczniki:

• Lista nieuporz ˛adkowana <ul></ul> (unordered list)

• Lista numerowana <ol></ol> (ordered list)

• W obu listach ka˙zdy element musi by´c zawarty mi ˛edzy znacznikami <li></li>

• Listy mo˙zna zagnie˙zd˙za´c jedne w drugich (tworzy´c kolejne poziomy–podpunkty)

(10)

HTML - wypunktowanie i numerowanie

<html>

<head>

</head>

<body>

<ol>

</ol></li>

</ul></li>

</ol>

</body>

</html>

(11)

HTML - atrybuty

• Znaczniki HTML mog ˛a zwykle posiada´c atrybuty

• Atrybuty opisuj ˛a dodatkowe własno´sci elementu

• Atrybuty definiowane s ˛a w znaczniku otwieraj ˛acym

• Atrybuty definiowane s ˛a jako para nazwa–warto´s´c name="value"

• Przykładowym znacznikiem z atrybutem jest znacznik odsyłacza

<a> (anchor)

• Chc ˛ac utworzy´c "kotwic ˛e" w pewnym miejscu strony, a w innym na tej samej stronie odsyłacz piszemy:

<a name="a1">Miejsce A1</a>

<a href="#a1">Id´z do miejsca A1</a>

(12)

HTML - znacznik odsyłacza

<html>

<head>

</head>

<body>

<p> Odsyłacze:

<a href="page1.html">do podstrony</a>,

<a href="http://www.fuw.edu.pl">do strony internetowej</a>

oraz <a href="mailto:kmiernik@fuw.edu.pl">pocztowy</a>.

</p>

</body>

</html>

(13)

HTML - element <head>

• Przed elementem <head> powinna pojawi´c si ˛e deklaracja typu dokumentu <!DOCTYPE>

• Element <head> zawiera meta–informacje o dokumencie

• Dozwolone s ˛a jedynie znaczniki:

• <title> definiuje tytuł strony (<title>Tytuł</title>)

• <base> definiuje podstawowy adres url linków o wzgl ˛ednej ´scie˙zce

• <link> opisuje zewn ˛etrzne zasoby strony (np. CSS)

• <meta> definiuje ró˙zne informacje (autor, kodowanie strony, ...)

• Je˙zeli w nagłówku znajd ˛a si ˛e inne znaczniki wi ˛ekszo´s´c przegl ˛adarek wy´swietli je, pomimo i˙z jest to bł ˛ad

(14)

HTML - typy dokumentów

Za pomoc ˛a znacznika <!DOCTYPE> okre´sla si ˛e typ dokumentu

• HTML 4.01 Strict - zawiera wszystkie elementy HTML, ale bez przestarzałych (np. font), ramki s ˛a niedozwolone

• HTML 4.01 Transitional - zawiera wszystkie elementy HTML, równie˙z przestarzałe, ramki s ˛a niedozwolone

• HTML 4.01 Frameset - jak wy˙zej, z tym, ˙ze ramki s ˛a dozwolone Deklaracja typu wygl ˛ada nast ˛epuj ˛aco (transitional):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

(15)

HTML - znacznik <meta>

Za pomoc ˛a znacznika <meta> mo˙zna okre´sli´c nast ˛epuj ˛ace informacje:

• Opis strony <meta name="description" content="opis" />

• Słowa kluczowe <meta name="keywords" content="słowa" />

• Autora <meta name="author" content="Imi ˛e i nazwisko" />

• Informacje dla przegl ˛adarki <meta http-equiv="Content-Type"

content="text/html;charset=ISO-8859-2" />

• Kodowania znaków z polskimi literami to m.in. ISO-8859-2, UTF-8, windows-1250

(16)

HTML - przykładowy dokument z nagłówkiem

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Test polskich znaków</title>

</head>

<body>

</body>

</html>