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.
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ć
za
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:
<meta http-equiv="content-type"
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 – (
)
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
w
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.