HTML

HTML (ang. Hyper Text Markup Language, pl.

hipertekstowy język znaczników), to język składający

się ze znaczników (ang. tags) oraz reguł ich

poprawnego stosowania (gramatyki, syntaktyki),

stosowany do pisania stron WWW.

EDYTOR

Dokument HTML jest zwykłym plikiem tekstowym, w

którym znajdują się polecenia HTML. Wynika stąd, że

dokument

taki

można

utworzyć

pomocą

najprostszego edytora tekstów, ręcznie dodając

znaczniki. Metoda taka, choć skuteczna, byłaby jednak

zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele

specjalizowanych edytorów, które wydatnie ułatwiają

konstruowanie

dokumentu,

wspomagając

wprowadzanie poleceń. Są to zazwyczaj programy

klasy shareware, aczkolwiek znajdziemy też sporo

programów komercyjnych i całkowicie bezpłatnych

(freeware).

Struktura dokumentu

Dokument HTML jest zwykłym dokumentem tekstowym

o ustalonym kodowaniu znaków składającym się z

elementów/tagów/znaczników.
Element zwykle składa się z trzech części:
znacznika początkowego (w formie <znacznik>)
zawartości elementu (tekst lub inne elementy)
znacznika końcowego (w formie </znacznik>)
przy czym niektóre elementy nie wymagają znaczników

końcowych (np. <p> odpowiadający za nowy akapit)

lub ich nie mają (<img> wstawiający obrazek lub <br>

łamiący linię).
Elementy mogą też mieć przypisane atrybuty

precyzujące znaczenie danego elementu. Atrybuty wraz

z ich wartościami wpisuje się wewnątrz znacznika

początkowego

(<znacznik

atrybut="wartość"

atrybut2="wartość2" ... atrybutN="wartośćN">).

OSNOWA DOKUMENTU

Polecenie (znacznik, tag) HTML jest specjalnym ciągiem

znaków objętym nawiasami ostrymi. Gdybyśmy na

przykład chcieli zaznaczyć jakiś fragment tekstu jako

tytuł, moglibyśmy objąć go poleceniem <H1>treść

tytułu</H1>. Wielkość liter jest obojętna - znaczniki

wpisane małymi i wielkimi literami są interpretowane w

ten sam sposób. Staranniej wykonane edytory HTML

pozwalają nawet zdefiniować, czy polecenia HTML będą

wpisywane małymi, czy wielkimi literami.

OSNOWA DOKUMENTU

Wszystkie polecenia powinny się znaleźć w pewnych
standardowych ramach. Zostało przyjęte, że dokument
HTML zawiera szkielet, który stanowi osnowę dla
wszystkich innych poleceń. Spotyka się wprawdzie w
Internecie strony, które szkieletu nie zawierają (czasem
tylko jego część), ale odradzamy taką praktykę, gdyż w
pewnych okolicznościach może ona zaowocować
niespodziewanymi efektami.

OSNOWA DOKUMENTU

Cały dokument powinien być objęty parą znaczników

<HTML> </HTML>. Między nimi powinna zaś się
znaleźć para znaczników <HEAD> </HEAD>, która
stanowi ramy dla informacji nagłówkowych. Pozostałe
informacje powinny być objęte z kolei znacznikami
<BODY> </BODY>.

OSNOWA DOKUMENTU

Wygląda to następująco:

<HTML>
<HEAD>informacje nagłówkowe</HEAD>
<BODY>
właściwa treść (ciało) dokumentu
</BODY>
</HTML>

POLECENIE <TITLE>

Tak spreparowany szkielet jest już "bezpieczny" i nie

niesie ze sobą ryzyka jakichś niespodzianek.

Gdy już wiemy, jaka jest formalna osnowa dokumentu,

warto jeszcze dodać kilka użytecznych informacji.

Między znacznikami <HEAD> i </HEAD> powinno się

znaleźć polecenie <TITLE> </TITLE>.

POLECENIE <TITLE>

<HEAD>
<TITLE>Tytuł strony</TITLE>
</HEAD>
TITLE nie oznacza wcale tytułu na stronie. Zawarta

między tymi znacznikami treść ukaże się w pasku

tytułowym przeglądarki, a nie w dokumencie. Na

przykład:

<HEAD>
<TITLE>Kurs języka HTML - poradnik webmastera:

HTML dla bardzo początkujących</TITLE>

</HEAD>

ZADANIE 1

Skopiuj poniższy tekst do notatnika i zapisz go pod

nazwą zadanie1.html w folderze kurs HTML (folder

utwórz na swoim dysku i zapisuj w nim wszystkie

zadania, które będziesz wykonywał w czasie kursu)

Otwórz plik przy pomocy Internet Explorer i zaobserwuj

gdzie

pojawił

się

tekst

"Kurs języka HTML - poradnik webmastera: HTML dla

bardzo początkujących".

<HEAD>
<TITLE>Kurs języka HTML - poradnik webmastera:

HTML dla bardzo początkujących</TITLE>

</HEAD>

ZADANIE 1

Edytuj przy pomocy notatnika plik zadanie1.html i usuń

polecenie

<TITLE>Kurs języka HTML - poradnik webmastera:

HTML

dla

bardzo

początkujących</TITLE>.

Zmodyfikowany plik zapisz pod nazwą zadanie1a.html.
Zaobserwuj co pojawiło się na pasku tytułowym
przeglądarki.

INFORMACJA META

Drugim bardzo ważnym elementem jest informacja o
stronie kodowej dokumentu.
Zaleca się stosowanie strony kodowej ISO-8859-2 (czyli
ISO Latin 2). Jest to międzynarodowy standard, a "przy
okazji" także Polska Norma. Zapis informacji wygląda
następująco:

<meta

http-equiv="content-type"

content="text/html; charset=iso-8859-2">
Można

też

stosować

zapis:

<meta

http-

equiv="Content-Language" content="pl" />

INFORMACJA META

Ostatecznie więc, stosuj na początku standardową osnowę:

<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="pl" />
<TITLE>Tytuł strony</TITLE>
</HEAD>
<BODY>

właściwa treść (ciało) dokumentu
</BODY>
</HTML>

ZADANIE 2

Skopiuj osnowę z poprzedniego slajdu do

notatnika i zapisz pod nazwą zadanie2.html.

W treści strony wprowadź polskie znaki

diakrytyczne i sprawdź jak są wyświetlane w

przeglądarce. Następnie zmodyfikuj polecenie

<META> o zapis:

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

Sprawdź czy tekst jest wyświetlany

prawidłowo. Usuń całkowicie polecenie

<META> i zobacz efekt.

KOLOR TŁA DOKUMENTU

Gdy w dokumencie znajduje się para znaczników

<BODY> i </BODY>, możemy zdefiniować kolor tła

dokumentu. Gdybyśmy tego nie uczynili, tło będzie

miało taki kolor, jaki został domyślnie przyjęty w

przeglądarce WWW (zazwyczaj szary). Możemy

wstawić polecenie:
<BODY BGCOLOR="kolor">
przy czym "kolor" może być podany imiennie (np. red,

green, black, white) lub za pomocą wartości

heksadecymalnych (szesnastkowych), tak jak w

przypadku koloru czcionki - #FF0000, #008000,

#000000, #FFFFFF. Sugerujemy używanie wartości

heksadecymalnych, jako bardziej uniwersalnych – (

tabela kolorów

)

ZADANIE 3

Otwórz plik zadanie2.html i zapisz go

pod nazwą zadanie3.html. Pomiędzy
znacznikami

<BODY>

</BODY>

zdefiniuj kolor żółty tła strony i obejrzyj
efekt

przeglądarce.

Następnie

zdefiniuj dowolne dwa inne kolory –
najpierw przy pomocy nazwy barwy, a
następnie przy pomocy kodu RGB.
Skorzystaj z tabeli kolorów.

Document Outline

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15
Slide 16

kurs html rozdział I

Document Outline