JĘZYK HTML PODSTAWY
Publikowanie
dokumentów w WWW
Tworzenie
dokumentów w jezyku HTML
Podstawowe
elementy dokumentu
Podstawowy
szkielet dokumentu
Naglówki
Normalne
akapity
Listy
listy
uporzadkowane
listy
nieuporzadkowane
listy
zagniezdzane
listy
definicyjne
Typy
akapitów
Formatowanie
tekstu
Znaczniki
specjalne
Połączenia
Wstawianie
rysunków
Uzywanie
rysunków jako odnosników
HTML
dla zaawansowanych
Publikowanie
dokumentów w WWW
World
Wide Web (WWW) jest chyba najbardziej popularna usluga
w
sieci Internet. Zawdziecza to przede wszystkim latwemu sposobowi
dostepu
do informacji oraz polaczeniu danych tekstowych z grafika i
innymi
elementami multimedialnymi (dzwiek, wideo, animacje). Ponadto
informacje
w WWW moga zawierac odwolania do innych danych znajdujacych
sie
na dowolnym serwerze WWW. Z poziomu WWW mozna siegac do innych
uslug
sieciowych, takich jak Gopher, FTP, Telnet, WAIS.
Dostep
do danych w WWW zapewniaja specjalne programy zwane
przegladarkami
World Wide Web (Web Browsers). Do najpopularniejszych
naleza:
Mosaic, Netscape Navigator i WebSurfer (z pakietu Chameleon).
Dokumenty
World Wide Web sa zapisywane w jezyku HTML (HyperText Markup
Language).
Jest on oparty na standardzie SGML (Standard Generalized Markup
Language
) sluzacym do definiowania jezyków opisujacych strukture dokumentów.
Jezyk
HTML caly czas sie rozwija i jest stale wzbogacany w nowe
elementy.
Niniejszy artykul ma na celu zaprezentowanie podstaw tworzenia
dokumentów
w jezyku HTML, które mozna nastepnie udostepnic na jakims
serwerze
WWW lub wykorzystac lokalnie na wlasnym komputerze.
Tworzenie
dokumentów w jezyku HTML
Dokumenty
w jezyku HTML sa zapisywane w zwyklym formacie
tekstowym
i moga powstawac w dowolnym edytorze tekstów.
Dostepne
sa tez wyspecjalizowane programy wspomagajace tworzenie
dokumentów
w HTML, badz to jako samodzielne edytory (np. HoTMetaL
firmy
SoftQuad), badz jako nakladki na popularne procesory tekstów
(np.
Microsoft Internet Assistant dla Worda 6.0). Nawet uzywaja
tych
narzedzi dobrze jest jednak poznac zasady tworzenia
dokumentów
w jezyku HTML, aby móc wzbogacic generowane dokumenty w
dodatkowe
elementy czy tez wykorzystac pomysly zastosowane na
najlepszych
stronach WWW. Jezyk HTML definiuje strukture dokumentu,
tzn.
okresla, które fragmenty tekstu stanowia naglówki, które listy, a
które
normalne akapity. W mniejszym stopniu natomiast zajmuje sie
bezposrednim
formatowaniem dokumentu (np. okreslaniem typów i
wielkosci
czcionek). Sposób wyswietlania poszczególnych stylów
dokumentu
mozna skonfigurowac w swojej przegladarce WWW.
Podstawowe
elementy dokumentu
W
jezyku HTML wystepuja specjalne znaczniki (markup tags),
które
okreslaja styl poszczególnych elementów dokumentu. Znacznik jest
tekstem
ujetym w nawiasy ostre <>. W wiekszosci przypadków nie jest
istotne,
czy znaczniki beda pisane malymi czy duzymi literami.
Spacje,
tabulacje i znaki końca linii sa (z pewnymi wyjatkami)
ignorowane
w jezyku HTML.
Podstawowym
znacznikiem obecnym w kazdym dokumencie jest <html>.
Dokument
w jezyku HTML powinien sie rozpoczynac od znacznika <html> i
kończyc
znacznikiem </html>. Wiekszosc znaczników wystepuje wlasnie
parami:
znacznik poczatkowy majacy postac <znacznik> i
końcowy
postaci </znacznik>.
U
góry dokumentu (pod poleceniem <html>) powinien znalezc sie
naglówek
dokumentu.
Rozpoczyna sie on znacznikiem <head>, a kończy znacznikiem
</head>.
Elementem, który zawsze powinien wystapic w naglówku jest tytul
dokumentu
zawarty pomiedzy poleceniem <title> a poleceniem
</title>.
Tytul jest wyswietlany w przegladarkach WWW w tytule okna programu
lub
w specjalnie na to przeznaczonym miejscu. Sluzy tez do
identyfikowania
ostatnio
przegladanych dokumentów lub dokumentów zapamietanych jako
szczególnie
dla nas interesujace (hotlists). Dlatego tez tytul powinien w
mozliwie
jasny i zwiezly sposób opisywac zawartosc danego dokumentu.
Pod
naglówkiem dokumentu umieszczony jest wlasciwy tekst dokumentu
ograniczony
poleceniami <body> i </body>. Tekst ten jest wyswietlany
jako
strona WWW przez przegladarki WWW.
Podstawowy
szkielet dokumentu
wyglada zatem tak:
<html>
<head>
<title>Próbny
dokument</title>
</head>
<body>
...
</body>
</html>
Naglówki
Jezyk
HTML dobrze nadaje sie do definiowania dokumentów o
hierarchicznej
strukturze odzwierciedlanej przez naglówki, podnaglówki,
podpodnaglówki
itd. Zazwyczaj w dokumencie okresla sie jeden naglówek
glówny,
bedacy tytulem calego dokumentu (jest on zwykle powtórzeniem
tekstu
umieszczonego po poleceniu <title>). Naglówek glówny
definiuje sie
umieszczajac
jego tekst pomiedzy znacznikami <h1> a </h1>, zas dalsze
poziomy
naglówków - w analogiczny sposób - poprzez polecenia <hx> i
</hx>,
gdzie x jest poziomem naglówka.
Normalne
akapity
Pod
naglówkami mozemy normalnie wpisac tekst, który ma byc
wyswietlany.
W miejscu, gdzie chcemy zakończyc akapit wstawiamy znacznik
<p>.
Tekst znajdujacy sie pomiedzy kolejnymi znacznikami <p> bedzie
wyswietlany
w przegladarce jako jeden akapit niezaleznie od tego, w ilu
wierszach
go wpisalismy i jak te wiersze podzielilismy. Znacznik <p>
sluzy
jedynie jako separator akapitów. Rózni sie od dotychczas
poznanych
znaczników tym, ze nie wystepuje jako para znaczników obejmujaca
definiowany
tekst. (Jedna z propozycji w najnowszej wersji jezyka HTML
jest
definiowanie normalnych akapitów poprzez ujecie tekstu pomiedzy
znaczniki
<p> i </p>. Wiekszosc przegladarek juz obecnie poprawnie
interpretuje
oba sposoby zapisu akapitów.)
Poszerzmy
nasz przykladowy dokument o nowo poznane
elementy:
<html>
<head>
<title>Próbny
dokument</title>
</head>
<body>
<h1>Próbny
dokument</h1>
<h2>Czesc
pierwsza</h2>
To
jest tekst czesci pierwszej.
Tekst
ten jest wyswietlany jako jeden akapit.<p>
<h2>Czesc
druga</h2>
To
jest pierwszy akapit czesci drugiej.<p>
A
to jest drugi akapit czesci drugiej.<p>
</body>
</html>
Rysunek
1 przedstawia powyzszy dokument wyswietlany przez
przegladarke
WWW.
Listy
Jezyk
HTML umozliwia definiowanie trzech rodzajów list:
listy
uporzadkowane, nieuporzadkowane i definicyjne.
Elementy
list uporzadkowanych sa zwykle wyswietlane przez przegladarki
jako
numerowane kolejnymi liczbami. Lista uporzadkowana zaczyna sie od
znacznika
<ol>, a kończy znacznikiem </ol>. Poszczególne elementy
listy
sa
poprzedzane znacznikiem <li>. Ten znacznik nie ma swojego
odpowiednika
końcowego, wystepuje pojedynczo.
Oto
przyklad listy uporzadkowanej:
<ol>
<li>pierwszy
element
<li>drugi
element
<li>trzeci
element
</ol>
Elementy
list nieuporzadkowanych sa zwykle poprzedzane w
przegladarkach
duza kropka (lub innym znakiem typu "bullet"). Lista
nieuporzadkowana
rozpoczyna sie znacznikiem <ul>, a kończy znacznikiem
</ul>.
Poszczególne elementy listy sa równiez poprzedzane znacznikiem
<li>.
Oto
przyklad listy nieuporzadkowanej:
<ul>
<li>pierwszy
element
<li>drugi
element
<li>trzeci
element
</ul>
Listy
moga byc zagniezdzane, to znaczy mozna umiescic liste
wewnatrz
innej listy, np.:
<LISTING6>><ol>
<li>lwy
<li>slonie
(lista
zagniezdzona)
<ul>
<li>indyjskie
<li>afrykańskie
</ul>
<li>zyrafy
</ol>
Z
kolei lista definicyjna rozpoczyna sie od znacznika <dl>, a
kończy
znacznikiem </dl>. Kazdy element listy definicyjnej sklada sie
z
dwóch czesci: terminu i jego definicji. Termin poprzedzany jest
znacznikiem
<dt>, a definicja znacznikiem <dd>.
Oto
przyklad listy definicyjnej:
<dl>
<dt>pierwszy
termin
<dd>definicja
pierwszego terminu
<dt>drugi
termin
<dd>definicja
drugiego terminu
</dl>
Zmodyfikujmy
nasz przykladowy dokument, dodajac rózne
rodzaje
list:
<html>
<head>
<title>Próbny
dokument</title>
</head>
<body>
<h1>Próbny
dokument</h1>
<h2>Lista
zagniezdzona:</h2>
<ol>
<li>pierwszy
element
<ul>
<li>pierwszy
podelement
<li>drugi
podelement
</ul>
<li>drugi
element
<li>trzeci
element
</ol>
<h2>Slowniczek:</h2>
<dl>
<dt>WWW
<dd>World
Wide Web
<dt>FTP
<dd>File
Transfer Protocol
<dt>HTML
<dd>HyperText
Markup Language
</dl>
</body>
</html>
Rysunek
2 przedstawia powyzszy dokument wyswietlany przez
przegladarke
WWW.
Inne
typy akapitów
Jezyk
HTML wyszczególnia tez kilka innych znaczników formatujacych
cale
akapity. Czesto uzywanym elementem wstawianym na stronie WWW jest
informacja
o autorze umieszczana u dolu strony. Najczesciej informacje taka
formatuje
sie, wstawiajac ja miedzy poleceniami <address> i </address>.
Akapity
sformatowane jako <address> sa najczesciej wyswietlane kursywa
przez
przegladarki
WWW.
Przyklad:
<address>Opracowanie
i edycja: Jakub Niedzwiedz.</address>
Innym
uzywanym poleceniem formatujacym caly akapit jest
<blockquote>
i </blockquote>. Polecenia tego uzywa sie do umieszczania
dluzszych
cytatów w osobnym akapicie.
Gdy
zachodzi potrzeba wstawienia tekstu napisanego czcionka
nieproporcjonalna
i z zachowaniem spacji, tabulacji i znaków końca linii
(np.
przy wpisywaniu fragmentów kodów programów, tabel, itd.), to
nalezy
taki
tekst poprzedzic znacznikiem <pre> i zakończyc znacznikiem
</pre>.
Przyklad:
<pre>
#include
<stdio.h>
void
main(void)
<
printf("Hello
World!");
>
</pre>
Formatowanie
tekstu
Poszczególne
fragmenty tekstu mozna jeszcze wyróznic
stosujac
dodatkowe formatowanie. Mozna np. zawrzec dany fragment
pomiedzy
znacznikami <em> i </em> albo - by jeszcze mocniej go
wyróznic
- pomiedzy znacznikami <strong> i </strong>. Mozna tez
bezposrednio
zamienic wybrany tekst na kursywe ujmujac go pomiedzy
znaczniki
<i> oraz </i> lub zamienic go na tekst pogrubiony
stosujac
znaczniki
<b> i </b>. Polecenia <em> i <strong> maja
charakter
logiczny
i moga byc róznie interpretowane przez poszczególne przegladarki.
Znaczniki
specjalne
W
dowolnym miejscu dokumentu mozna wstawic komentarz, który
nie
bedzie wyswietlany przez przegladarke. Tekst, który ma byc
komentarzem
rozpoczyna sie od znaków <!--, a kończy znakami -->.
Przyklad:
<!--To
jest komentarz.-->
W
celu oddzielenia kilku fragmentów tekstu w dokumencie
wstawia
sie pozioma linie przy uzyciu znacznika <hr>.
Za
pomoca znacznika <br> mozna wymusic w dowolnym momencie
zlamanie
wiersza,
np.:
Ten
tekst <br>bedzie wyswietlony w dwóch wierszach.<p>
Zastosujmy
nowo poznane elementy jezyka HTML w naszym przykladowym
dokumencie:
<html>
<head>
<title>Próbny
dokument</title>
</head>
<body>
<!--Tytul
strony WWW-->
<h1>Próbny
dokument</h1>
<h2>Czesc
pierwsza</h2>
To
jest tekst <em>wyrózniony</em>.
To
jest tekst <strong>silnie wyrózniony</strong>.
To
jest <i>kursywa</i>.
To
jest tekst <b>pogrubiony</b>.
<blockquote>
To
jest cytat.<p>
Jest
on zapisany w dwóch akapitach.
</blockquote>
<h2>Czesc
druga</h2>
<pre>
t
e k s t
p
r e f o r m a t o w a n y
</pre>
<hr><!--pozioma
linia-->
<address>
Ostatnia
modyfikacja:<br>04.10.1995, Jakub
Niedzwiedz
</address>
</body>
</html>
Rysunek
3 przedstawia ten dokument wyswietlany przez
przegladarke
WWW.
Połączenia
Kazdy
dokument w World Wide Web moze byc polaczony w
strukture
hipertekstowa z innymi dokumentami i zasobami sieci. W
dowolnym
miejscu dokumentu mozna wstawic odwolanie do innego dokumentu
w
sieci. Po wybraniu odniesienia przez uzytkownika przegladarki
WWW,
zostanie zaladowany dokument polaczony z tym odniesieniem.
Odniesienie
takie jest najczesciej wyswietlane w przegladarce jako
tekst
wyrózniony innym kolorem, ale moze to byc tez wstawiony do
dokumentu
rysunek. Odniesienie moze byc równiez polaczone z konkretnym
miejscem
w dokumencie lub z innym miejscem w tym samym dokumencie,
co
umozliwia szybkie przemieszczanie sie pomiedzy róznymi czesciami
dlugiego
dokumentu.
Znacznik
HTML wstawiajacy polaczenie do dokumentu ma postac:
<a
href="adres">tekst odniesienia</a>
"adres"
jest adresem dokumentu lub zasobu, do którego polaczenie
chcemy
wstawic. Adres ten ma postac tzw. URL (Universal Resource Locator) i
wyglada
tak:
protokól://adreskomputera[:port]/sciezkadodokumentu
protokól
- oznacza protokól potrzebny do pobrania danego dokumentu
lub
zasobu. Dla dokumentów WWW jest to http (HyperText Transfer
Protocol),
dla innych zasobów m.in.: ftp, gopher, telnet, wais,
news.
adreskomputera
- oznacza adres komputera w sieci Internet, np.
www.microsoft.com
lub 122.12.35.24
port
- zwykle mozna pominac ten element adresu, o ile uzywany jest
standardowy
numer portu TCP dla danego typu zasobów.
sciezkadodokumentu
- pelna sciezka dostepu do dokumentu lub zasobu, np.
/www/home/index.html
Przykladowy
adres moze wiec wygladac nastepujaco:
http://library.microsoft.com/default.htm
lub
ftp://ftp.borland.com/pub/ftpmenu.htm
"tekst
odniesienia" oznacza tekst, który w przegladarce bedzie
wyrózniony
innym kolorem i którego wybranie spowoduje przejscie do
dokumentu
lub zasobu zwiazanego z danym polaczeniem.
Przykladowe
polaczenie do zewnetrznego dokumentu HTML moze miec
postac:
<a
href="http://library.microsoft.com/default.htm">Microsoft
Library</a>
Jesli
polaczenie odwoluje sie do lokalnego dokumentu, to
wystarczy
podac tylko jego adres wzgledem aktualnego dokumentu, np.:
<a
href="tutorial/intro.htm">Wstep</a>
lub
<a
href="../index.html">Powrót do indeksu</a>
A
oto nasz przykladowy dokument z dodanymi kilkoma
odniesieniami:
<html>
<head>
<title>Próbny
dokument</title>
</head>
<body>
<h1>Próbny
dokument</h1>
<hr>
<h2>Czesc
pierwsza</h2>
Kurs
wprowadzajacy do jezyka HTML:
<a
href="http://www.cwru.edu/help/introHTML/toc.html">
(Introduction
to HTML: Table of Contents)</a>
<hr>
Powrót
do <a href="index.htm">glównej
strony</a>
<hr>
<address>
Opracowal
<a href="mypage.htm">Jakub
Niedzwiedz</a>
</address>
</body>
</html>
Rysunek
4 przedstawia ten dokument wyswietlany przez
przegladarke
WWW.
Wstawianie
rysunków
Dokumenty
w WWW mozna urozmaicic grafika, ale nie nalezy
przesadzac
z jej iloscia, gdyz wydluza to znacznie czas zaladowania
dokumentu.
Jednakze niewielka ilosc niezbyt duzych rysunków moze
znacznie
polepszyc wyglad dokumentu. Rysunki wstawiane do dokumentów
WWW
powinny byc zapisane w formacie GIF lub JPEG. Polecenie jezyka
HTML
sluzace do wstawienia grafiki do dokumentu ma nastepujaca postac:
<img
src="adres">
gdzie
"adres" jest adresem pliku GIF lub JPEG, który chcemy
wstawic
do
dokumentu. Zazwyczaj jest to jedynie adres wzgledny, gdyz
najczesciej
wstawiane rysunki znajduja sie na tym samym komputerze co
dokument.
Oto
kilka przykladów poleceń wstawiajacych rysunki do dokumentu
HTML:
<img
src="rys1.gif">
<img
src="gifs/rys2.gif">
Polecenie
img moze miec kilka dodatkowych argumentów
wplywajacych
na sposób wyswietlania rysunku. Jednym z nich jest
dyrektywa
align. Okresla ona sposób ulozenia grafiki wzgledem tekstu
znajdujacego
sie w tym samym wierszu. Mozliwymi parametrami dla
dyrektywy
align sa "top" (tekst znajduje sie przy górnym brzegu
rysunku),
"middle" (tekst znajduje sie na wysokosci srodka rysunku) i
"bottom"
(tekst znajduje sie przy dolnym brzegu rysunku). Oto kilka
przykladów
zastosowania tej dyrektywy:
<img
src="rys1.gif" align="top">tekst u góry
grafiki
<img
align="bottom" src="gifs/rys2.gif">tekst u
dolu grafiki
Inna
opcja polecenia img jest dyrektywa alt. Okresla ona
tekst,
który ma byc pokazywany zamiast rysunku, jesli nie moze on
zostac
wyswietlony przez przegladarke. Oto kilka przykladów uzycia tej
dyrektywy:
<img
src="../home.gif" alt="Home Page">
<img
alt="[Could not display image]" src="rys1.gif">
Wzbogacmy
nasz przykladowy dokument o grafike:
<html>
<head>
<title>Próbny
dokument</title>
</head>
<body>
<h1><img
src="home.gif" alt="/nie moge wyswietlic
grafiki/">
Próbny
dokument</h1>
Wyrównywanie
rysunków i tekstu<p>
<img
src="home.gif" align="top">
top-aligned<br>
<img
src="home.gif" align="middle">
middle-aligned<br>
<img
src="home.gif" align="bottom">
bottom-aligned<br>
Tekst
parametru alt wyswietlany zamiast rysunku<p>
<img
src="index.gif" alt="[indeks]">
<hr>
<address>Opracowal:
Jakub Niedzwiedz</address>
</body>
</html>
Rysunek
5 pokazuje, jak bedzie wygladal ten dokument
wyswietlany
przez przegladarke WWW.
Używanie
rysunków jako odnosników
Wstawiany
rysunek mozna polaczyc z odniesieniem do innej
strony
w World Wide Web. Aby uzyc rysunku jako odnosnika, nalezy
umiescic
kod wstawiajacy rysunek pomiedzy znacznikami <a href=...> i
</a>.
Przyklad:
<a
href="intro.html"><img
src="pictures/intro.gif"></A>
Dodatkowo
mozna jeszcze przypisac rózne odniesienia róznym
fragmentom
rysunku. W tym celu definiuje sie mape rysunku. Jest to
bardziej
zaawansowana opcja i nie bedziemy sie nia zajmowac w tym
artykule.
HTML
dla zaawansowanych
Jedna
z bardziej zaawansowanych mozliwosci jezyka HTML jest
tworzenie
formularzy. Sluza one do zbierania informacji od
uzytkowników
sieci odwiedzajacych nasze strony w WWW. Uzytkownik
wypelnia
formularz i naciska specjalny przycisk (najczesciej oznaczony
tekstem
"Submit"). Dane sa przesylane do serwera, gdzie specjalny
program
zajmuje sie ich obróbka i wysyla odpowiedz z powrotem do
przegladarki.
W ten sposób formularze pozwalaja na dwustronna komunikacje
z
uzytkownikiem naszych stron w WWW.
Nowa
wersja HTML pozwala dodatkowo na wstawianie tabel, definiowanie
koloru
i wzoru tla, formatowanie wzorów matematycznych, modyfikowanie
czcionek
i wiele innych. Niektóre przegladarki WWW (Netscape,
Microsoft
Internet Explorer) definiuja dodatkowe wlasne rozszerzenia
jezyka
HTML, które nie sa rozpoznawane przez inne przegladarki.
Drogi czytelniku jeżeli chcesz dowiedzieć się więcej, zachęcam do przeczytania:
Jeżeli i to ci nie wystarczy, pytaj prowadzącego...............