Zßklady jazyka HTML

Obsah lekce:

Jazyk HTML

Zdrojov² k≤d dokumentu psanΘm v jazyce HTML je prost² text psan² v ASCII formßtu, kter² lze prohlφ₧et i upravovat v libovolnΘm textovΘm editoru. Jazyk HTML je jazykem typografick²m, co₧ znamenß, ₧e v²sledn² dokument pouze popisuje, ale jeho interpretace je p°enechßna a₧ na cφlov² browser (Φti brouzr = prohlφ₧eΦ HTML dokument∙ - nap°. Netscape Navigator, Internet Explorer nebo Mosaic).

Ukßzka zdrojovΘho textu.

Syntaxe p°φkaz∙

┌prava textu je realizovßna pomocφ p°φkaz∙, kterΘ jsou uzav°eny do ostr²ch zßvorek "<" a ">". V∞tÜina t∞chto p°φkaz∙ ohraniΦujφcφch urΦitou Φßst textu mß na zaΦßtku umφst∞no poΦßteΦnφ a na konci koncovΘ nßv∞Ütφ p°φkazu. KoncovΘ nßv∞Ütφ se od poΦßteΦnφho liÜφ pouze umφst∞nφm lomφtka "/" p°ed nßzev nßv∞Ütφ:

<H2> Obsah </H2>

P°φkaz, kter² je tvo°en poΦßteΦnφm a koncov²m nßv∞Ütφm, se naz²vß "kontejner". AvÜak ne vÜechny p°φkazy jsou ukonΦovßny koncov²m nßv∞Ütφm. Jako p°φklad m∙₧e slou₧it p°φkaz <BR>, kter² si v textu vynucuje p°echod na nov² °ßdek.

V∞tÜinu p°φkaz∙ lze up°esnit pomocφ r∙zn²ch atribut∙. Atributy jsou psßny hned za vlastnφ poΦßteΦnφ nßv∞Ütφ (dovnit° ostrΘ zßvorky). Hodnoty jsou atribut∙m p°i°azovßny pomocφ rovnφtka. P°φkladem m∙₧e b²t p°φkaz <IMG> zobrazujφcφ obrßzek, jeho₧ umφst∞nφ je ulo₧eno v atributu SRC:

<IMG SRC="image/fotka.gif">

Je b∞₧nΘ, ₧e p°φkazy HTML lze do sebe vklßdat - mezi poΦßteΦnφ a koncovΘ nßv∞Ütφ jednoho p°φkazu se vlo₧φ p°φkaz jin². Tφmto zp∙sobem je mo₧nΘ dosßhnout pozoruhodn²ch v²sledk∙ v koneΦnΘm vzhledu dokumentu.

Pokud prohlφ₧eΦ n∞kterΘ nßv∞Ütφ neznß, jednoduÜe jej ignoruje. Tedy starÜφ prohlφ₧eΦ, kter² neznß n∞kterß z nov²ch rozÜφ°enφ jazyka HTML neukonΦφ svou Φinnost chybov²m hlßÜenφm, ale p°ejde neznßmΘ nßv∞Ütφ bez povÜimnutφ.

URL adresa

Hlavnφm cφlem prohlφ₧eΦ∙ je zajistit p°φstup ke zdroj∙m, kterΘ se mohou nachßzet na libovolnΘm serveru p°ipojen²m na Internet. Zdrojem je mφn∞n objekt na Internetu a mohou jφm b²t HTML dokumenty, obrßzky, programy a mnoho dalÜφch. K jednoznaΦnΘ identifikaci t∞chto objekt∙ slou₧φ URL (Uniform Resource Locator) adresa.

Tyto URL adresy slou₧φ jednak p°i zadßvßnφ adres v prohlφ₧eΦφch, pokud si chcete prohlΘdnout n∞kter² konkrΘtnφ dokument nebo do prohlφ₧eΦe natßhnout n∞jak² jin² objekt, a jednak p°φmo v HTML dokumentech, kde slou₧φ k realizaci hyperlink∙ a vklßdßnφ obrßzk∙.

╚ßsti kompletnφ URL adresy:

p°enosov² protokol (nap°. http:, ftp:, news:, telnet:)
jmΘno serveru, port
p°φstupovß cesta
jmΘno souboru

http://dione.zcu.cz/~indy/index.html

V tomto p°φpad∞ prohlφ₧eΦ zobrazφ HTML dokument index.html, kter² je ulo₧en na serveru dione.zcu.cz v adresß°i ~indy.

P°i zadßvßnφ cest je nutno si dßt pozor na to, ₧e v jazyce HTML se k odd∞lenφ nßzv∙ adresß°∙ pou₧φvß mφsto obrßcenΘho lomφtka ("\") lomφtko normßlnφ ("/").

Adresa objektu se nemusφ v₧dy zadßvat jako kompletnφ URL adresa, ale je mo₧nΘ pou₧φvat i relativnφ adresy. Relativnφ adresovßnφ se obvykle pou₧φvß v p°φpadech, kdy odkazujete na zdroje ulo₧enΘ p°φmo na vaÜem serveru. Zßkladnφm adresß°em je pak adresß°, v n∞m₧ je ulo₧en aktußlnφ dokument.

P°φklad.
V rßmci dokumentu:

http://dione.zcu.cz/~indy/index.html

mß b²t zobrazena grafika:

http://dione.zcu.cz/~indy/Images/pinknet.gif

Potom v nßv∞Ütφ IMG staΦφ zadat cestu:

<IMG SRC="Images/pinknet.gif">

P°φkazy ka₧dΘho HTML dokumentu

N∞kterß nßv∞Ütφ jsou povinnß a tvo°φ zßkladnφ kostru ka₧dΘho HTML dokumentu. Cel² dokument musφ b²t uzav°en mezi nßv∞Ütφ <HTML> a </HTML>. Krom∞ toho musφ ka₧d² dokument mφt svou hlaviΦku, kterß se oznaΦuje nßv∞Ütφm <HEAD> a </HEAD>. V hlaviΦkovΘ Φßsti dokumentu je nutnΘ pomocφ nßv∞Ütφ <TITLE> a </TITLE> zadat nßzev dokumentu. Vlastnφ obsah dokumetu je pak zadßvßn do oblasti omezenΘ nßv∞Ütφmi <BODY> a </BODY>.

Dßle by m∞l dokument, podle standardu verze 3.2 jazyka HTML, obsahovat oficißlnφ identifikaci HTML dokumentu, kterß je specifikovßna v prvku komentß°e uvozenΘho znakem "!" - vyk°iΦnφk (viz. prvnφ °ßdka zdrojovΘho souboru nßsledujφcφho p°φkazu).

P°φklad (nejjednoduÜÜφ ·plnß definice strßnky).

<!DOCTYPE HTML PUBLIC "-//IETF/DTD HTML v.m//EN">
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

<! [--text_komentß°e_1--] [--text_komentß°e_2--] ... >

komentß° je text, kter² p°φmo s obsahem HTML dokumentu nesouvisφ a p°i zpracovßnφ prohlφ₧eΦem je ignorovßn; krom∞ kometovßnφ Φßstφ dokumentu m∙₧e mφt i jin² specifick² ·Φel, jako nap°.:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML v.m//EN"> - oficißlnφ identifikace HTML dokumentu
 - p°φkaz pro server (serverem vklßdanΘ vsuvky - server nahradφ tyto p°φkazy v t∞le dokumentu Φßstmi HTML textu):
#echo var="prom∞nnß" - nahradφ vsuvku hodnotou prom∞nnΘ (LAST_MODIFIED, DOCUMENT_NAME, DOCUMENT_URL, QUERY_STRING_UNESCAPED, DATE_LOCAL, DATE_GMT, ...)
#exec cgi="program" - nahradφ vsuvku v²stupem spuÜt∞nΘho programu nebo scriptu
#exec cmd="p°φkaz" - nahradφ vsuvku v²stupem p°φkazu standardnφho interpretu p°φkaz∙ (shellu)
#size file="soubor" - nahradφ vsuvku ·dajem o velikosti zadanΘho souboru
#flastmod file="soubor" - nahradφ vsuvku dobou poslednφ modifikace zadanΘho souboru
#include file="soubor" - nahradφ vsuvku obsahem souboru
#include virtual="url" - nahradφ vsuvku obecn²m URL

<HTML> ... </HTML>

pßrovß znaΦka, kterß slou₧φ k ohraniΦenφ ka₧dΘho dokumetu

<HEAD> ...prvky zßhlavφ... </HEAD>

pßrovß znaΦka, kterß vymezuje zßhlavφ dokumentu; obsahuje uspo°ßdanou kolekci informacφ o dokumentu, kterß slou₧φ v²luΦn∞ pro prohlφ₧ecφ program; do zßhlavφ dokumentu nßle₧φ prvky: <TITLE>, <BASE>, <ISINDEX>, <META>, <LINK>, <STYLE>, <SCRIPT>

<TITLE> ...text titulku... </TITLE>

pßrovß znaΦka, kterß definuje titulek dokumentu, ka₧d² HTML dokument musφ obsahovat titulek TITLE (m∞l by obsahovat struΦnou a v²sti₧nou charakteristiku; pou₧ije se nap°φklad v seznamu zßlo₧ek, zobrazφ se na hornφ liÜt∞ okna prohlφ₧ecφho programu a zachovßvß jej v∞tÜina vyhledßvacφch program∙; poΦet znak∙ by nem∞l p°ekroΦit 64 znak∙

<BODY background="url" bgcolor=" barva" text="barva" link=" barva" alink="barva" vlink=" barva">

...t∞lo dokumentu...

</BODY>

pßrovß znaΦka ohraniΦujφcφ celou hlavnφ Φßst dokumentu

`background`	URL obrßzku pou₧itΘho jako podklad
`bgcolor`	barva podkladu dokumentu
`text`	barva normßlnφho textu
`link`	barva hypertextov²ch odkaz∙
`alink`	barva aktivnφch (prßv∞ vybran²ch) odkaz∙
`vlink`	barva ji₧ pou₧it²ch odkaz∙