Instytut Informatyki, Politechnika —lĄska, Gliwice
Laboratorium Sieci Rozlegˆych
WWW-HTML
opracowaˆa:mgr inź. Joanna Otremba, styczeä 1996
poprawki: mgr. inź. Jarosˆaw Flak, luty 1997


1. Tworzenie prostych dokument˘w HTML
Dokumenty HTML mogĄ by† tworzone przy pomocy prostych edytor˘w tekstu. SĄ
to teksty ASCII. Do formatowania tekstu wykorzystywane sĄ tagi w postaci:
tekst
tekst


1.1 Najprostszy dokument HTML

Pierwszy, duźy nagˆ˘wek

Pierwszy paragraf.

Kolejne paragrafy
oddzielone sĄ wolnĄ liniĄ.

Darmowy hosting zapewnia PRV.PL

Uwaga: Tagi moźna pisa† r˘wnieź maˆymi literami.

1.2 Tytuˆ dokumentu
Tytuˆ dokumentu pojawia siŠ jako tytuˆ okienka i moźe by† taki sam jak
pierwszy nagˆ˘wek. OgraniczajĄ go tagi

1.3 Nagˆ˘wki
HTML dopuszcza 6 poziom˘w nagˆ˘wk˘w. R˘źniĄ siŠ one wielko˜ciĄ czcionki
(pierwszy najwiŠkszy) i mogĄ by† wykorzystywane np.: do przedstawiania tytuˆ˘w
rozdziaˆ˘w.
tekst nagˆ˘wka, gdzie x=1..6.

1.4 Akapity
We wszystkich edytorach wci˜niŠcie klawisza powoduje przej˜cie do
nowej linii. Natomiast jŠzyk HTML ignoruje ten znak. Aby przej˜† do nastŠpnego
akapitu, naleźy uźy† tagu

(jak w pierwszym przykˆadzie), kt˘ry zazwyczaj wstawia
dodatkowo pusty wiersz.
Do oddzielenia akapit˘w moźna r˘wnieź uźy† tagu
, kt˘ry powoduje
przej˜cie do nastŠpnej linii.
Tag

---

powoduje wstawienie poziomej linii.
sˆuźy do centrowania tekstu (r˘wnieź tablic).
powoduje migotanie tekstu.

1.5 Ączenie dokument˘w
PoˆĄczenia miŠdzy dokumentami sĄ gˆ˘wnĄ zaletĄ HTML. We wˆasnym dokumencie
moźna zamie˜ci† poˆĄczenie do innego dokumentu. W ten spos˘b przedstawi† moźna
np.: dˆuźszy tekst podzieli† na rozdziaˆy.
Tekst, kt˘ry prowadzi do innego dokumentu jest pod˜wietlony lub zaznaczony innym
kolorem.
PoˆĄczenie ma zazwyczaj nastŠpujĄcĄ posta†:
tekst,
przy czym dokument moźe znajdowa† siŠ w bieźĄcej kartotece:
tekst,
bĄdŤ w dowolnej innej:
tekst.
W podanym przykˆadzie uźyte zostaˆo poˆĄczenie wzglŠdne. Wykorzystuje siŠ je dla
dokument˘w stanowiĄcych logicznĄ caˆo˜† (np. rozdziaˆy podrŠcznika).
W przeciwnym przypadku moźna stosowa† poˆĄczenia bezwzglŠdne tzn. uwzglŠdniajĄce
peˆny adres dokumentu:

tekst.

1.6 URL - Uniform Resource Locator
URL wykorzystywane sĄ w WWW do okre˜lania adresu r˘źnego typu dokument˘w.
Struktura URL:
typ_Ťr˘dˆa://host.domena[:port]/˜cieźka/nazwa_zbioru,
gdzie
Ťr˘dˆo:
http - zbi˘r na serwerze WWW
gopher - zbi˘r na serwerze gopher'owym
WAIS - zbi˘r na serwerze WAIS
news - grupa dyskusyjna
telnet - poˆĄczenie telnetowe
ftp - poˆĄczenie ftp

1.7 Odno˜niki
Odno˜niki pozwalajĄ na poˆĄczenie z konkretnym miejscem dokumentu i majĄ posta†:
tekst1 - miejsce, do kt˘rego bŠdziemy siŠ
odwoˆywa†,
tekst2 lub
tekst2 - poˆĄczenie do odno˜nika.
Po "klikniŠciu" na "tekst2" przeniesiemy siŠ do "tekstu1".


2. Listy

2.1 Listy nienumerowane
HTML:

• Europa
  
• Azja
  

WyglĄd:
ţ Europa
ţ Azja

2.2 Listy numerowane
HTML:

1. Europa
   
2. Azja
   

WyglĄd:
1. Europa
2. Azja

2.3 Definicje
HTML:

WWW

World Wide Web

HTML

HyperText Markup Language

WyglĄd:
WWW
World Wide Web
HTML
HyperText Markup Language


3. Formatowanie dokumentu
Nie zawsze poźĄdane jest, aby przeglĄdarka formatowaˆa dokument, czy jego
czŠ˜†. Tak jest w przypadku tekst˘w program˘w, czy innych tego typu tekst˘w.

tekst

- "tekst" zostaˆ juź sformatowany i ma by† wy˜wietlony bez zmian.
Dozwolone jest uźycie niekt˘rych tag˘w.
tekst - podobnie jak PRE, z tym, źe nie sĄ rozpoznawane źadne tagi.

tekst

- wskazuje, źe "tekst" zostaˆ zaczerpniŠty z
innego Ťr˘dˆa

3.1. Wprowadzenie kolor˘w i tˆa
BACKGROUND=rysunek, jako tˆo pojawi sie dany rysunek
BGCOLOR="#rrggbb" kolor tˆa hex.(duźe litery)
TEXT="#rrggbb" kolor tekstu
LINK="#rrggbb" kolor linku, w ktorym siŠ nie byˆo
VLINK="#rrggbb" kolor linku, w ktorym siŠ byˆo
ALINK="#rrggbb"> kolor linku do kt˘rego siŠ wchodzi


4. Formatowanie znak˘w
Formatowanie to pozwala na wyr˘źnienie fragment˘w tekstu. Dopuszczalne jest
stosowanie styl˘w logicznych, bĄdŤ fizycznych. Te pierwsze sĄ definiowane przez
przeglĄdarkŠ uźytkownika, drugie sĄ z g˘ry okre˜lone. Natomiat ich wyglĄd moźe by†
ten sam, np.: tekst i tekst spowodujĄ zwykle wy˜wietlenie
tekstu wytˆuszczonego. Wynik jest ten sam. Je˜li jednak uźytkownik zechce mie† ten
tekst wy˜wietlany na czerwono, przy stylu logicznym ma takĄ moźliwo˜†.
Poza tym ˆatwiej jest opisa† tag jednym sˆowem niź podawa† jak fizycznie wyglĄda†
ma tekst (np. courier 12cpi). Dlatego teź zalecane jest uźywanie styl˘w logicznych.

4.1 Style logiczne
- definiowane sˆowo, zazwyczaj wy˜wietlane w formie 'italic'
- podkre˜lenie, zazwyczaj wy˜wietlane w formie 'italics'
- cytaty, zazwyczaj wy˜wietlane w formie 'italics'
- kod komputerowy lub zlecenie HTML, zazwyczaj wy˜wietlane fontami o staˆej
szeroko˜ci
- klawisz, zazwyczaj wy˜wietlane fontami o staˆej szeroko˜ci, czasem
wytˆuszczonymi
- komunikaty komputerowe, zazwyczaj wy˜wietlane fontami o staˆej
szeroko˜ci
- mocniejsze podkre˜lenie, zazwyczaj wy˜wietlane wytˆuszczone
- zmienna, zazwyczaj wy˜wietlane italics

4.2 Style fizyczne
- bold
- italics
- podkre˜lenie
- fonty o staˆej szeroko˜ci


5. Entities
Poniewaź znaki takie jak '&' i '<' sĄ zarezerwowane, aby je wstawi† do tekstu,
naleźy posˆuźy† siŠ specjalnym zestawem znak˘w. SĄ to np:
< dla <
> dla >
& dla &


6. Wstawianie rysunk˘w
WiŠkszo˜† przeglĄdarek potrafi wy˜wietla† rysunki w formacie .xbm lub .gif.
Moźna jednak zamie˜ci† w dokumencie rysunki w dowolnym formacie. Zobaczy† je
jednak bŠdzie m˘gˆ tylko ten uźytkownik, kt˘ry posiada przeglĄdarkŠ do danego typu
rysunk˘w.

6.1 Rysunki wewnŠtrzne
Rysunki wewnŠtrzne to te, kt˘re towarzyszĄ przedstawianemu tekstowi. Naleźy
pamiŠta†, źe ich przesˆanie wymaga sporo czasu, wiŠc nie naleźy ich w tek˜cie
umieszcza† zbyt duźo.
Aby wstawi† wewnŠtrzny rysunek naleźy zapisa†:
,gdzie URL_rysunku - to ˜cieźka do niego.
Z zaˆoźenia tekst oblewa rysunek od doˆu. Moźliwe jest ustawienie tekstu w
˜rodku, bĄdŤ w g˘rze rysunku:
, gdzie:
poˆoźenie : TOP, MIDDLE, BOTTOM - rysunek poˆoźony centralnie, tekst opˆywa go
zgodnie z atrybutem;
poˆoźenie : LEFT, RIGHT - rysunek dosuniŠty do odpowiedniej strony, tekst opˆywa
go dookoˆa
Poniewaź niekt˘re przeglĄdarki nie potrafiĄ wy˜wietla† rysunk˘w, dobrze jest
umie˜ci† przy nich tekst zastŠpczy:
.
Rysunek moźna r˘wnieź otoczy† ramkĄ:
BORDER = n, gdzie n jest liczbĄ pikseli w ramce.
Do zmiany wymiar˘w rysunku sˆuźĄ atrybuty HEIGHT i WIDTH podane procentowo,
bĄdŤ konkretnymi liczbami.

6.2 Rysunki,animacje, nagrania
Rysunki moźna r˘wnieź wy˜wietla† jako osobne dokumenty:
tekst
W ten spos˘b moźna przedstawia† rysunki, animacje, nagrania.


7. Mapy
Opr˘cz zwykˆych rysunk˘w, w jŠzyku HTML moźna zaprojektowa† mapy, na kt˘rych
znajdujĄ siŠ wydzielone obszary. Obszary te sĄ linkami do innych dokument˘w.
Spos˘b tworzenia:
W zbiorze .html

Opis obszar˘w:
default p1.html
rectangle (25, 50) (100, 150) p2.html
circle (200, 40) p3.html
...
Mapy takie moźna r˘wnieź wykonywa† przy pomocy specjalnch program˘w takich
jak np. mapedit. Wystarczy wtedy na naszej stronie umie˜ci† rysunek, wczyta† tŠ
stronŠ do programu i zaznaczy† obszry.


8. Fonty
HTML pozwala na dobranie wielko˜ci font˘w (od 1 do 7). Warto˜† domy˜lna: 3.
Wielko˜† font˘w moźna okresla† przy pomocy liczb od 1 do 7 lub odno˜nie do
poprzedniej wielko˜ci (+ lub -).
tekst
tekst
Fonty bazowe - odnoszĄ siŠ do caˆego dokumentu i stanowiĄ podstawŠ do
relatywnego okre˜lania wielko˜ci font˘w.



9. Tablice
HTML pozwala na tworzenie r˘źnego rodzaju tablic. PoczĄtek opisu tablicy
zaznaczony jest tagiem .

9.1 Podstawe atrybuty
CELLPADDING - odlegˆo˜† (w pikselach) tekstu od ramki
CELLSPACING - szeroko˜† ramki wewnĄtrz tablicy
BORDER - szeroko˜† ramki na zewnĄtrz tablicy
WIDTH - szeroko˜† tablicy

9.2 Element TR i jego atrybuty
TR definiuje pojedynczy wiersz tablicy
Atrybuty:
ALIGN - wyr˘wnanie w poziomie ("left", "center", "right")
VALIGN - wyr˘wnanie w pionie ("top", "middle", "bottom")
Warto˜ci domy˜lne : ALIGN="left", VALIGN="bottom"

9.3 Elementy TD i TH
TD i TH definiujĄ pojedynczĄ kom˘rkŠ tablicy. Ich atrybuty (j.w.) majĄ wyźszy
priorytet niź atrybuty dla wierszy. TD opisuje zwykˆĄ kom˘rkŠ, natomiast TH
kom˘rkŠ z nagˆ˘wkiem (tekst pogrubiony).
Warto˜ci domy˜lne:
TD: ALIGN="left", VALIGN="middle"
TH: ALIGN="center", VALIGN="middle"
Przykˆad:



9.4 TD i TH - atrybuty COLSPAN i ROWSPAN
Czasami chcemy, by grupa pewnych kom˘rek tworzyˆa jednĄ caˆo˜†.
COLSPAN pozwala ˆĄczy† kom˘rki w poziomie, a ROWSPAN w pionie. Przy stosowaniu
tych atrybut˘w naleźy sprawdzi†, czy zgadza siŠ suma kom˘rek w pionie i w poziomie.

9.5 Tablice zawierajĄce tablice

Nagˆ˘wek 1 Nagˆ˘wek 2 4.11 4.23

Tytuˆ tablicy
Nagˆ˘wek 1 Element 1 Element 2		Nagˆ˘wek 2 Element 3 Element 4

10. Okienka
Okienka pozwalajĄ podzieli† ekran przeglĄdarki na wiele czŠ˜ci. W kaźdym z nich
znajduje siŠ oddzielny dokument.
Atrybuty:
- tak jak . Tag ten musi zawiera† listŠ kolumn lub wierszy (udziaˆ
danej kolumny czy wiersza w okienku)
ROWS - opis wierszy
COLS - opis kolumn
Wiersze i kolumny moźna przedstawi† jako ich procentowy udziaˆ w okienku
przeglĄdarki. Moźna r˘wnieź nada† im warto˜† '*', wtedy przeglĄdarka sama nada im
warto˜†.
- definiuje zawarto˜† okienek
NAME - nazwa okienka
Przykˆad:








To jak nie ma ramek


Aby przenie˜† siŠ do konkretnego okienka uźywamy tagu TARGET. Np dla powyźszego
przykˆadu w dokumencie p2.htm moźemy umie˜ci† odno˜nik:
.
Wtedy dokument p3 pojawi siŠ w okienku window1.
Opr˘cz nazwy konkretnego okienka, jako cel moźna poda† nastŠpujĄce odno˜niki:
_self - domy˜lnie, zmiany dokonywane w bieźĄcym okienku.
_parent - dokument pojawi siŠ w okienku rodzicielskim w stosunku do danego
_top - dokument pojawi siŠ w peˆnym okienku


11. Formularze
Definicja formularza:

Atrybuty:
ACTION="URL" - ˜cieźka do programu obsˆugujĄcego formularz
METHOD=nazwa_metody metoda wymiany informacji miŠdzy klientem i programem (POST
lub GET)
Przykţad:

2. type="checkbox" - pola wyboru
3. type="radio" - pola pozwalajĄce wybra† tylko jedno z nich
4. type="submit" - przycisk wysyˆajĄcy formŠ do serwera
5. type="reset" - przycisk usuwajĄcy zapisane informacje
NAME="nazwa" - nazwa pola identyfikujĄca je
VALUE="wartosc" warto˜† pola, znaczenie zaleźne od typu:
typ 1 - domy˜lna warto˜† tekstowa,
typ 2 i typ3 - warto˜† wysyˆana do serwera je˜li dane pole zostaˆo zaznaczone,
typ 4 i typ 5 - nazwa, kt˘ra pojawi siŠ na odpowiednich przyciskach zamiast Submit
i Reset.
CHECKED - w przypadku Checkbox i Radio buttons, wskazuje wybranĄ domy˜lnie
warto˜†.
SIZE=liczba - dla typu 1 i typu 2 definiuje liczbŠ wy˜wietlanych znak˘w.
MAXLENGTH=liczba - dla typu 1 i typu 2 definiuje maksymalnĄ liczbŠ znak˘w dla tych
p˘l.

11.2 Pola wyboru

Definicja listy opcji, kt˘re mogĄ by† wybrane przez uźytkownika.
Atrybuty:
NAME="nazwa" - nazwa definiujĄca pole
SIZE=dlugosc_listy - liczba opcji
MULTIPLE - umoźliwia wyb˘r wiŠcej niź jednej opcji
Nazwa_opcji - Nazwy opcji do wyboru
Przykˆad:
Wybierz jedno z miast:

Gdynia
Gdaäsk
Sopot


11.3 Obszar tekstu
opcjonalny tekst - obszar, w kt˘rym uźytkownik moźe wpisa†
dowolny tekst. Je˜li zostaˆ podany 'opcjonalny tekst', pojawi siŠ on w danym
obszarze.
Atrybuty:
NAME="nazwa" - nazwa definiujĄca obszar
ROWS=liczba COLS=liczba - liczby opisujĄce wielko˜† obszaru


12. Bibliografia
http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html - "The HTML Quick Reference"
http://melmac.corp.harris.com/about_html.html "Introduction to HTML"
http://www.ncsa.uiuc.edu/demoweb/html-primer.html "A Beginner's Guide To HTML"
Ian Graham "Introduction to HTML"Skr˘cona instrukcja tworzenia stron HTML
opracowaˆ: mgr inź. Jarosˆaw Flak
Gliwice 1996 (ost.popr.6.12.1996)


dokument html

nagˆ˘wek
tytuˆ okienka



BACKGROUND="obrazek.gif" tˆo z obrazka
BGCOLOR="#rrggbb" kolor tˆa hex.(duźe litery)
TEXT="#rrggbb" kolor tekstu
LINK="#rrggbb" kolor linku
VLINK="#rrggbb" kolor odwiedzonego linku
ALINK="#rrggbb"> kolor aktywnego linku


komentarz

tekst nagˆ˘wek, x=(1-6) (1=najwiŠksze)

tekst centrowanie

font gˆ˘wny, x=(1-7)

SIZE=x | +-x> rozmiar fontu, x=(1-7)
COLOR="#rrggbb"> kolor



przej˜cie do nowej linii

ALIGN=CENTER | LEFT | RIGHT> justowanie
tekst

---

SIZE=x grubo˜† linii
WIDTH=x | % dˆugo˜† linii
ALIGN=CENTER | LEFT | RIGHT poˆoźenie na stronie
NOSHADE> bez cienia

tekst (moźna uźy† tag˘w)            tekst wy˜wietlany tak,

jak jest sformatowany

style fizyczne
tekst bold
tekst italic
tekst underline
tekst fonty o staˆej szeroko˜ci
_tekst indeks dolny
^tekst indeks g˘rny
miganie
zwiŠkszenie czcionki o 1 stopieä
zmniejszenie czcionki o 1 stopieä
przekre˜lenie

style logiczne
tekst definiowane sˆowo (italic)
tekst podkre˜lenie (italic)
tekst cytat (italic)
tekst kod (fonty o staˆej szeroko˜ci)
tekst klawisz (fonty o staˆej szeroko˜ci)
tekst komunikaty (fonty o staˆej szeroko˜ci)
tekst mocniejsze podkre˜lenie (bold)
tekst zmienna (italic)

listy

START=x> pozycja poczĄtkowa

1. tekst
   
2. tekst
   

lista nienumerowana

• tekst
  
• tekst
  

lista definicji

tekst

tekst

tabele
BORDER=x szeroko˜† ramek zewnŠtrznych
CELLPADDING=x odlegˆo˜† zawarto˜ci kom˘rki od ramek
CELLSPACING=x grubo˜† ramki
WIDTH=x | % szeroko˜† tabeli
HEIGHT=x | %> wysoko˜† tabeli

ALIGN=LEFT | RIGHT | CENTER poˆoźenie tekstu w wierszu tabeli
VALIGN=TOP | BOTTOM | MIDDLE | BASELINE> poˆoźenie w pionie

ALIGN=TOP | BOTTOM> podpis tabeli

ALIGN=LEFT | RIGHT | CENTER poˆoźenie tekstu w kom˘rce VALIGN=TOP | BOTTOM | MIDDLE | BASELINE> poˆoźenie zawarto˜ci kom˘rki w pionie WIDTH=x | % szeroko˜† kom˘rki HEIGHT=x | % wysoko˜† kom˘rki NOWRAP tekst w jednej linii COLSPAN=x poˆĄcz x kolumn tabeli w jednĄ kom˘rkŠ ROWSPAN=x> poˆĄcz x wierszy tabeli w jednĄ kom˘rkŠ tekst

ramki
ramka
nazwa






To jak nie ma ramek




obrazki
SRC="obrazek.gif" adres obrazka
ALT="tekst" tekst zastŠpczy
ALIGN=TOP | MIDDLE | BOTTOM | LEFT | RIGHT poˆoźenie obrazka
w stosunku do linii tekstu
BORDER=x szeroko˜† ramki
VSPACE=x puste miejsce u g˘ry i doˆu
HSPACE=x puste miejsce po bokach
HEIGHT=x | % zmiana wysoko˜ci obrazka
WIDTH=x | %> zmiana szeroko˜ci obrazka


linki
HREF="adres_url_linku"> link link (tekst lub obrazek)
HREF="#nazwa"> tekst link do miejsca "nazwa" w dokumencie
NAME="nazwa"> zdefiniowanie miejsca "nazwa"






dodatek
- adres url: http | ftp | mailto | gopher | WAIS | news | file |
telnet://host.domeny/˜cieźka/zbi˘r (moźe to by† dokument, obrazek, animacja,
skrypt CGI).
- entities: aby do tekstu wstawi† znaki '&' i '<' naleźy posˆuźy† siŠ: < dla <,
> dla >, & dla &, " dla ".


zanotowane.pl

doc.pisz.pl

pdf.pisz.pl

qualintaka.pev.pl