Kod źródłowy strony WWW

Strony WWW prawie wszystkie są napisane w formacie HTML (lub XHTML). Dokument HTML jest tak naprawdę zwykłym plikiem tekstowym, który możemy otworzyć i edytować w Notatniku lub innym prosty edytorze tekstu.

Oczywiście istnieją wyspecjalizowane programy służące do edycji HTML, ale do nauki HTML zdecydowanie polecam stosowanie jak najprostszych narzędzi.

Kod HTML, który „opisuje” strukturę, treść i wygląd strony WWW, nazywa się często kodem źródłowym strony. Przeglądarki umożliwiają obejrzenie kodu źródłowego każdej strony.

Zadanie 1. Kod źródłowy strony

Obejrzyj kod źródłowy tej strony.

Znaczniki

Dokument HTML to tekst, w którym znacznikami zaznaczamy fragmenty tekstu o specjalnym znaczeniu. Ponadto za pomocą znaczników zapisuje się strukturę dokumentu (rozdziały, akapity, listy, tabele) i odnośniki (do innych dokumentów, grafiki itp.).

Przykład 1.

<h1>Rozdział 5</h1>
<p>
	Tego dnia było <em>bardzo</em> gorąco.
</p>
<p>
	Andrzej powiedział: <q>Ale mi gorąco</q>.
</p>

W powyższym fragmecie HTML znaczniki <h1> (otwierający) i </h1> (zamykający) służą do oznaczenia tytułu rozdziału.

Znaczniki p oznaczają akapity. Znaczniki em i q oznaczają odpowiednio wyróżnienie i krótki cytat.

Oto powyższy fragment HTML sformatowany przez przeglądarkę:

Rozdział 5

Tego dnia było bardzo gorąco.

Andrzej powiedział: Ale mi gorąco.

Struktura dokumentu HTML

Oto bardzo prosty dokument HTML:

Przykład 2.

<html>
	<head>
		<title>Bardzo prosta strona WWW</title>
	</head>
	<body>
		<p>Witaj świecie!</p>
	</body>
</html>

Aby strona była w pełni poprawna, powinna posiadać jeszcze nagłówek, mówiący jaka jest wersja HTML itp. Oraz nagłówek określający typ zawartości i standard kodowania znaków.

Przykład 3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=windows-1250">
		<title>Bardzo prosta strona WWW</title>
	</head>
	<body>
		<p>Witaj świecie!</p>
	</body>
</html>

Zadanie 2.

W Notatniku lub Wordpadzie utwórz nowy dokument, zapisz jako pierwsza.html.

Skopiuj treść "bardzo prostej strony" i zapisz.

W Internet Explorerze otwórz nowe okno i otwórz w nim plik pierwsza.html.

Różne znaczniki

Wewnątrz body umieszcza się treść dokumentu. Można użyć odpowiednich znaczników do oznaczenia różnych rodzajów tekstu i tworzenia konstrukcji takich jak listy czy tabele.

Nagłówki i akapity

Elementy h1 - h5, p.

Fragmenty tekstu o specjalnym znaczeniu

Elementy em, strong, cite, dfn, code, samp, kbd, var, abbr, acronym.

Listy

Elementy ol, ul, li, dl, dt, dd.

Tabele

(Nie było na zajęciach).

Elementy table, tr, td, th. Dodatkowo thead, tbody, tfoot.

Hiperlinki

Element a z atrybutem href.

Grafika

Element img z atrybutem src.

Warsztaty komputerowe – ćwiczenia 5: HTML.