Specializovan² t²denφk o v²poΦetnφ technice
o Internetu
(CW 37/97)
Vytvß°φme si domovskou strßnku
BezejmΘna.html
Ji°φ Kosek ml.
NßÜ pon∞kud podivn² nadpis naznaΦuje, ₧e dneÜnφ pokraΦovßnφ serißlu nebude zam∞°eno na n∞jakou konkrΘtnφ oblast HTML. Mφsto toho doplnφme naÜe znalosti HTML o n∞kolik mßlo dosud neznßm²ch v∞domostφ. Tφm zßrove≥ uzav°eme celou velkou Φßst serißlu v∞novanou zßklad∙m jazyka HTML.
V nßsledujφcφch dφlech si ukß₧eme, jak naÜe znalosti zu₧itkovat p°i nßvrhu profesionßlnφch webov²ch strßnek. U tohoto tΘmatu samoz°ejm∞ nez∙staneme prov₧dy, ale budeme pokraΦovat dßl ve v²kladu tΘmat, kterß s HTML a Webem velice ·zce souvisφ.
Komentß°e
Do zdrojovΘho k≤du naÜich strßnek m∙₧eme umis¥ovat poznßmky, kterΘ se nijak neprojevφ ve v²slednΘm zobrazenφ strßnky. T∞mto poznßmkßm se °φkß komentß°e a jejich obecn² tvar je:
<!-- komentß° -->
Do komentß°e m∙₧eme ulo₧it vysv∞tlenφ, kterΘ nßm p°i pozd∞jÜφ editaci strßnky p°ipomene v²znam n∞kter²ch pou₧it²ch konstrukcφ. Komentß°e se vyu₧φvajφ rovn∞₧ pro p°edßvßnφ p°φkaz∙ program∙m, kterΘ automaticky zpracovßvajφ HTML dokumenty (o tΘto vlastnosti si povφme vφce p°i v²kladu dynamicky vytvß°en²ch dokument∙). Do komentß°e m∙₧eme rovn∞₧ uzav°φt Φßst strßnky, kterou chceme doΦasn∞ zneviditelnit pro b∞₧nΘho Φtenß°e. Nesmφme vÜak zapomenout na to, ₧e komentß° je souΦßstφ zdrojovΘho zßpisu strßnky a ₧e si jej m∙₧e prohlΘdnout kdokoliv. StaΦφ pouze zvolit p°φsluÜn² p°φkaz v menu prohlφ₧eΦe.
Pozadφ strßnky
Krom∞ toho, ₧e lze zm∞nit barvu pozadφ strßnky, lze urΦit i obrßzek, kter² se objevφ mφsto pozadφ. Strßnka m∙₧e b²t hodn∞ velkß a obrßzek pozadφ se proto podle pot°eby pod sebou a vedle sebe opakuje, aby pokryl celou plochu pod strßnkou. Z tohoto d∙vodu je dobrΘ jako obrßzek pozadφ volit n∞jak² vzor, kter² na sebe navazuje. Obrßzek pozadφ by (stejn∞ tak jako ostatnφ obrßzky) nem∞l b²t p°φliÜ velk². Rovn∞₧ musφme dßt pozor na to, aby byl text strßnky na pozadφ tvo°enΘm obrßzkem dostateΦn∞ Φiteln². UrΦenφ obrßzku pozadφ se provßdφ atributem BACKGROUND elementu BODY. Hodnotou je URL obrßzku:
<BODY BACKGROUND="skvrny.gif">
Zßkladnφ URL
V Φßsti v∞novanΘ odkaz∙m jsme si vyklßdali o relativnφm URL. V²slednΘ URL jsme zφskali v₧dy slo₧enφm URL strßnky s relativnφm URL. ObΦas se m∙₧e hodit zm∞nit zßkladnφ URL strßnky p°φmo v dokumentu. Slou₧φ k tomu tag <BASE> a jeho atribut HREF. Tag <BASE> musφ b²t uveden v zßhlavφ strßnky (mezi <HEAD> a </HEAD>). Pro objasn∞nφ uvedeme mal² p°φklad: dejme tomu, ₧e nßsledujφcφ strßnka mß URL http://www.ia.cz/info.html:
<HTML>
<HEAD>
<TITLE>Pokus</TITLE>
<BASE HREF="http://herkules.comp.cz/">
</HEAD>
<BODY>
<A HREF="servis.html">Servisnφ st°edisko</A>
</BODY>
</HTML>
Odkaz dφky zm∞n∞ zßkladnφho URL nepovede na strßnku http://www.ia.cz/servis.html, ale na strßnku http://herkules.comp.cz/servis.html.
Metainformace
V zßhlavφ ka₧dΘ strßnky mohou b²t uvedeny r∙znΘ metainformace. Slou₧φ k tomu nepßrov² element META. Pomocφ jeho atributu NAME urΦφme jmΘno metainformace a pomocφ atributu CONTENT urΦφme hodnotu tΘto metainformace. Metainformace m∙₧eme uvßd∞t jakΘ chceme, ale existujφ i n∞kterΘ standardizovanΘ. Mezi n∞ pat°φ klφΦovß slova popisujφcφ obsah dokumentu (keywords) a struΦn² obsah dokumentu (description). Praktickß ukßzka pou₧itφ:
....
<HEAD>
<TITLE>Bungee Jumping</TITLE>
<META NAME="keywords"
CONTENT="bungee jumping, extrΘmnφ sporty, voln² pßd">
<META NAME="description"
CONTENT="Oficißlnφ strßnka ╚eskΘho svazu Bungee-Jumpingu">
<META NAME="Author" CONTENT="Jan Novßk">
</HEAD>
....
Uvßd∞nφ klφΦov²ch slov a popisu strßnky je u₧iteΦnΘ pro r∙znΘ vyhledßvacφ stroje (podrobn∞ji viz WWW dφlna v CW 11/97).
Obrßzky
U obrßzk∙ za°azen²ch pomocφ tagu <IMG> lze pou₧φt mno₧stvφ atribut∙. My jsme se doposud o n∞kter²ch z nich nezmφnili.
Pokud pou₧ijeme obrßzek jako odkaz
<A HREF="URL1"><IMG SRC="URL2"></A>
nakreslφ se okolo n∞j modr² rßmeΦek. èφ°ku tohoto rßmeΦku m∙₧eme ovliv≥ovat pomocφ atributu BORDER. Pokud chceme, aby rßmeΦek kolem obrßzku nebyl, staΦφ pou₧φt BORDER="0":
<A HREF="URL1"><IMG SRC="URL2" BORDER="0"></A>
Pomocφ atribut∙ HSPACE a VSPACE m∙₧eme °φdit mezeru, kterß se vynechß mezi obrßzkem a okolnφm textem. Mezera se udßvß v pixelech, HSPACE urΦuje mezeru nalevo a napravo od obrßzku -- VSPACE nad a pod obrßzkem.
V²slednou velikost obrßzku m∙₧eme zm∞nit pomocφ atribut∙ WIDTH a HEIGHT. Pokud vÜak obrßzek zv∞tÜφme, nebude vypadat p°φliÜ p∞kn∞. Pokud atributy pou₧ijeme ke zmenÜenφ obrßzku, zase zbyteΦn∞ zat∞₧ujeme sφ¥ p°enosem dlouhΘho obrßzku. JedinΘ smysluplnΘ vyu₧itφ atribut∙ spoΦφvß v zadßnφ skuteΦn²ch rozm∞r∙ obrßzku. Celß strßnka pak m∙₧e b²t vykreslena rychleji (podrobn∞ji viz WWW dφlna v CW 11/97).
ZnakovΘ entity
Znakov²ch entit existuje mnohem vφce, ne₧ jsme si zatφm °ekli. Mezi ty dalÜφ u₧iteΦnΘ pat°φ:
-- ned∞litelnß mezera (m∙₧eme ji vklßdat ze neslabiΦnΘ p°edlo₧ky -- p°. v lese)
© -- znak copyrightu (c)
® -- registrovanß znßmka (r)
Na obrßzku 1 si m∙₧ete prohlΘdnout, jak vypadß pou₧itφ pozadφ strßnky. Strßnce odpovφdß nßsledujφcφ HTML-k≤d:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Ukßzka pozadφ a znakov²ch entit</TITLE>
<META NAME="Author" CONTENT="Ji°φ Kosek">
</HEAD>
<BODY BACKGROUND="firefall.gif">
<H1 ALIGN=CENTER>Ukßzka pozadφ a znakov²ch entit</H1>
<H1 ALIGN=CENTER>© ®</H1>
</BODY>
</HTML>
|