SOŠ OTROKOVICE, TŘ. T. BATI 1266, OTROKOVICE 765 02 Jazyk HTML Pomocný text pro výuku výpočetní techniky PaedDr. Pavel Kovář 2009 S O Š O T R O K O V I C E
A. Základní struktura HTML dokumentu Zkratkou HTML rozumíme Hypertext Markup Language hypertextový jazyk se značkami. Jazyk se skládá s příkazů, kterým se říká značky. 1. 2. 3. obr.1 4. 1. Na začátku každého dokumentu musí být umístěna značka <HTML>, závorku < získáme Alt+60, závorku > obrdžíme po dvojhmatualt + 62. Na konci dokumentu je třeba značky </HTML>. Značkami oznamujeme internetovému prohlížeči, že jde o zdrojový kód v jazyce HTML. 2. Blok textu označený značkami <HEAD> a </HEAD> slouží k popisu obsahu vytvářené stránky. Text uvnitř značek by se neměl na výsledném dokumentu zobrazit. 3. značky <BODY> a </BODY> ohraničují vlastní tělo HTML dokumentu. Tato část bývá největším úsekem HTML dokumentu. 4. Uvnitř značek <HEAD> a </HEAD> bývají ještě značky <TITLE> a </TITLE>, mezi nimiž je umístěn text, která je zobrazován na horní liště prohlížeče. B. Nadpisy Obrázek 2 na následující stránce nám ukáže nastavení nejpoužívanějších velikostí textu v nadpisech dokumentů HTML. V běžné praxi používáme asi šesti uvedených velikostí. Programový kód určuje velikosti písma jednotlivých řáků, které mají představovat nadpisy. Tyto řádky je třeba ohraničit značkou <H číslo > zleva a </H číslo > zprava. Povšimněme dvou řádků, které jsou v HTML kódu zapsány bez <H číslo > ohraničení. 2
Obr. 2 Výsledný efekt je patrný z vyobrazení přes prohlížeč, které nám poskytuje následující obrázek Obr.3 Zajímavou vlastností textu v internetovém prohlížeči ( narozdíl od bežných textových editorů pracujících pod MS Windows ) je, že text máme na daném řádku zobrazen celý i ve zúženém okně. V našem případě jsme použili jako prohlížeče Internet Explorer 5. Modifikovaný vzhled 3
naší stránky je zřejmý z obrázku 4 (vlevo) a obrázku 5 (vpravo). Zužuje-li se okno prohlížeče, HTML text se přelévá tak, aby byl daný nadpis zobrazen celý. Právě na tuto vlastnost HTML textu, která úzce souvisí s vnějšími parametry - např. zvolenou rozlišovací schopností monitorů či s nastavením velikosti písma, které zobrazuje prohlížeč, si musí budoucí tvůrce webových stránek zvyknout a zohlednit ji také i v celkovém designu. Nám zobrazovaný dokument řádkuje nezávisle na zdrojovém textu. řádkuje v závislosti na rozlišení monitoru (např. 800x600 pixelů) a v závislosti na velikosti písma, které si uživatel volí přímo na svém prohlížeči pomocí rutiny :Zobrazit Písma. Nastavení rozlišení monitoru a nastavení velikosti písma zobrazovaného prohlížečem vidíme na obrázku 6. Obr.6 4
C. Atributy V úvodu skripta bylo sděleno, že v jazyce HTML používáme značky, tagy, z nichž má každá určitou funkci. Příkaz však může obsahovat také několik atributů upřesňujících parametrů, které se vztahují k upravení výsledné funkce určitého příkazu. Atribut ALIGN nám v ukázce na obrázku 7 umožní zarovnání písma zvolené velikosti vlevo, vpravo, na střed a do bloku. V posledním textovém řádku Obr. 7 <H5 ALIGN ="JUSTIFY">Pátým řádkem je ukázka bloku textu, který představuje jeden velmi dlouhý řádek v textovém editoru "Poznámkový blok", a který bude atributem JUSTIFY zarovnáván k oběma okrajům internetového prohlížeče při zachování zvolené velikosti písma. V našem případě byla zvolena velikost 5.</H5> je dlouhý text, který interpret webového kódu přepíše do prohlížeče jako souvislý text zarovnaný vždy do bloku. Vzhled různě zarovnaných fragmentů textu je na ploše Internet Exploreru v. 5 na obrázku 8. Obr. 8 5
Atribut ALIGN použijeme v případě, když chceme určitý objekt ( Nadpis, text, obrázek ) Zarovnat jinak, než vlevo. Shrnutí použití atributu ALIGN : <H3 ALIGN ="CENTER">-nadpis s písmem o velikosti 3 zarovnaný na střed </H3> Hodnota atributu Atribut Ukončovací příkaz ( tag, značka ) Zahajovací příkaz ( tag, značka ) D. Formátování textu Obrázek č.9 je ukázkou výpisu pro základní formáty textu v programovacím jazyce HTML. Obr. 9 Přestože jsme se snažili v programu na obrázku 9 psát každý z příkazů na zvláštní řádek, bude řádky i mezery každý internetový prohlížeč ignorovat. Lze si to snadno ověřit na již existujícím jednoduchém HTML programu, kde úmyslně ponecháme mezeru mezi znaky v proslulém Einsteinově vztahu pro energii a hmotnost. Mezera se neprojeví. Obrázek 10 na následující straně nám ukáže výsledek naší práce ve stále stejné podobě. 6
Obr. 10 Jestliže napíšeme slovo JAN na jednu řádku a slovo MARKÉTA na druhou řádku, internetový prohlížeč je ve shodě se zkušeností z programu na obrázku 9 zobrazí do jednoho řádku viz obr. 10 nahoře. K vytvoření odstavců, řádků a mezer slouží další příkazy. S nimi nás seznámí vyobrazení programu HTML na obrázku 11 v další kapitole. E. Strukturování textu Obr. 11 Text umístěný mezi příkazy <P>.. </P> tvoří jeden odstavec. Výsledek své práce můžeme spatřit opět v internetovém prohlížeči, jehož šířku můžeme vhodně měnit, viz 7
obr. 12 (vlevo ) a obr. 13 ( vpravo ). Text se nám stále zachovává v podobě odstavce. Nyní použijeme dalšího příkazu. Je to příkaz <BR>, který ukončí aktuální řádek a přeskočí na řádek nový. Příkazu <BR> lze použít i několikrát za sebou. Dosáhneme tak v textu uživatelem požadovaných několikařádkových mezer. Velikost vynechaných řádků řídí počet příkazů <BR>. Následující program v jazyce HTML si klade za cíl funkci příkazu <BR> ozřejmit na jednoduchém příkladě, který je vyobrazen na obr. 14, kde si zopakujeme výpis základních formátů textů. S použitím <BR> však již nebudou umístěny v jednom řádku, jak je tomu v případě programu na obr. 9, či zobrazení na prohlížeči viz obr. 10, ale každý formát bude mít určen svůj vlatní řádek. Obr.14 8
Zmodifikovaný program se zobrazí v prohlížeči v souladu s obrázkem 15. Úvodní řádek je oproti obr.10 nezměněn, avšak následující text je oddělen dvěma mezerami. Pokračující hesla mají každé svůj řádek Obr.15 Další možnost jak zlepšit vzhled testu na své webové stránce je oddělit jednotlivé partie čarou. K tomu nám slouží příkaz <HR>, který vytvoří vodorovnou čáru. Vlastnosti takové čáry lze modifikovat pomocí atributů. Atribut SIZE mění tloušťku čáry a atribut NOSHADE (Shade=stín) vytvoří jednoduchou čáru bez stínování. Obr.16 9
Internet Explorer zobrazí program z obr. 16 čáry k rozdělení stránky na požadované části. F. Řezy písma, odstavce, řádky a čáry Obr. 17 Odstavec ohraničený <P> </P> může být doplněn atributem ALIGN Text v příslušném odstavci může být zarovnán vlevo, vpravo, na střed nebo do bloku. Praktické použití a výsledný vzhled nalezneme na obr. 18 a obr. 19. Obr. 18 10
Vzhled programu z obr. 18 v internetovém prohlížeči. Obr. 19 V minulé kapitole jsme se seznámili s možností vytvořit vodorovnou čáru. Používali jsme k tomu příkazu <HR>, který je možno doplnit atributy. Známe již použití atributu SIZE, který nastavuje tloušťku čáry a atributu NOSHADE, který odstranil stínování viz obr. 16 a 17. Následující obrázky nám ukážou možnost měnit také délku čáry a to pomocí atributu WIDTH, jehož zadáváme obvykle v procentech viz obr. 20. Atribut ALIGN zajistí zarovnání čáry vlevo, (LEFT) vpravo, (RIGHT) nebo na střed (CENTER). Jiné hodnoty atributu ALIGN nejsou přípustné. Barvu čáry nastavíme atributem COLOR. Nabývá hodnot BLACK, BLUE, GRAY, GREEN, RED, WHITE a YELLOW. Obr. 20 11
Zarovnání několika odstavců najednou příkaz DIV Odstavec dokážeme zarovnat pomocí atributu ALIGN u příkazu <P>. Bude-li však naše WWW stránka obsahovat deset odstavců, bylo by neobratné a hlavně pracné zarovnávat množství odstavců jednotlivě. Potřebný blok odstavců ohraničíme v našem textu příkazem <DIV ALIGN= typ zarovnání >..</DIV>. Více nám situaci ozřejmí obr. 21 a obr. 22. Obr. 21 Obr. 22 Pokud bychom u každého z odstavců využili atribut ALIGN zvlášť, šlo by o pracnější postup zejména při velkém množství odstavců. Vzhled programu v prohlížeči je totožný s obr. 22. Příkaz PRE přesný vzhled v dokumentu Naším úkolem je zapsat do WWW stránek přehled sportovních výkonů. Do tabulky ve zdrojovém textu zapíšeme potřebné údaje viz obr. 23 Obr. 23 12
Načteme-li tento program internetovým prohlížečem, nebudeme spokojeni obr. 24. Internetový prohlížeč ignoruje všechny mezery a to je jeho vlastnost. Obr. 24 Chceme-li, aby rozvržení textu odpovídalo zápisu v HTML souboru, použijeme součinnou dvojici příkazů <PRE> a </PRE>. Na obrázku 25 vidíme poopravený zdrojový text. Obr. 25 Prohlížeč zobrazí zapsaná data k naší větší spokojenosti viz následující obrázek obr. 26 Obr. 26 13
Text se na WWW stránce zobrazí v takovém rozvržení, jaké bylo použito v HTML souboru. G. Vložení obrázku do WWW stránky Pro vkládání obrázků do WWW stránky se používá příkaz IMG (Image) s atributem SRC (Source). Syntaxe příkazu je zřejmá z obrázku 27. Obr. 27 Pro WWW stránky doporučuji zatím nejrozšířenější formát obrázků a tím jsou JPG a GIF. Výsledek je patrný z následujícího vyobrazení - tak interpretuje příkaz prohlížeč- obr. 28 Obr. 28 14
Obrázek je pro uvedený příkaz např. <IMG SRC="Stonehenge.jpg"> zapotřebí nakopírovat do téže složky jako zdrojový HTML program. Úprava velikosti obrázku Obrázek vložený v našem programu je však zapotřebí zmenšit. Pro splnění tohoto požadavku zavádíme dva nové atributy WIDTH a HEIGHT. WIDTH určuje šířku obrázku a HEIGHT nastavuje výšku obrázku. Rozměry obrázku se zadávají v pixelech bodech. Posazení obrázku na střed, levý či pravý okraj stránky řeší atribut ALIGN. Další je zřejmé z programu HTML na obrázku 29. Obr. 29 Samotný efekt vzhled upraveného obrázku na prohlížeči Internet Explorer je patrný z obr. 30. Umístíme-li na WWW stránkách obrázek, mějme na zřeteli dobu, po kterou se obrázek bude načítat. Není proto vhodné umísťovat na své stránky obrázky velkokapacitní, které se načítají neúměrně dlouhý čas. Publikovaný obrázek na Vašich stránkách bude vždy kompromisem mezi jeho kvalitou a rychlou zobrazitelnoustí na prohlížeči. Obrázek šak nemusí mít vždy tmavé okraje dané jeho vzhledem. Pak se může stát, že nevhodně splývá Obr. 30 s pozadím. Tehdy je třeba obrázek orámovat. Orámování dosáhneme zavedením atributu BORDER. Komentář k obrázku, který se zobrazí po přiložení myši na jeho plochu zapíšeme za atribut ALT do uvozovek. Použití atributů BORDER a ALT je předvedeno na obr. 31 Obr. 31 15
Přiložíme-li nyní na obrázek myš, objeví se zakrátko stručný popisek snímku Eclipse. V případě, že se na našich stránkách z jakéhokoli důvodu požadovaný obrázek nezobrazí, bude se na jeho místě zobrazovat popisek, který zavádíme do atributu ALT. Popisek zapisujeme v uvozovkách. Další jeho výbornou funkcí je zobrazení se při kratším podržení myši na ploše obrázku. Tuto situaci nám zobrazují obrázky z prohlížeče obr. 32 a 33. Zdrojový HTML text pro obr. 33 nalezneme na obr. 34. Všimněme si zde příkazu <BR>, který u obou Obr. 32 obrázků vynecháním řádku lépe odděluje nadpis od od plochy. Obr. 33 H. Hypertextový odkaz Obr. 34 Hypertextový odkaz je slovo, ěkolik slov, věta nebo obrázek, které jsou umístěny na WWW stránce a na které lze kliknout. Po kliknutí se vám obrazí nová stránka. Pomocí hypertextových odkazů lze provázat několik stránek. Na WWW stránkách bývaji hypertextové odkazy zobrazeny většinou modrým a podtrženým písmem. Pokud na tento odkaz najedeme kurzorem, změní se kurzor v ručičkuů. Jakmile se ručička objeví, můžeme kliknout. Po kliknutí bude načtena WWW stránka, na kterou příslušný hypertextový odkaz ukazuje. Pro vytvoření hypertextového odkazu použijeme příkazu <A>, který může obsahovat několik atributů. Zde použijeme atribut HREF. Strategie tvorby takových provázaných stránek je graficky znázorněna na obr. 35 Mesic.htm Saturn.htm Astronaut.htm Raketoplan.htm Hypertext_index.htm Obr. 35 Kometa.htm 16
Hlavní dokument je ten, z něhož vedou hypertextové odkazy na další stránky viz obr. 36 Obr. 36 Obr. 37 Obr. 38 Obr.39 Obr. 40 Obr. 41 Na obrázcích 36 41 vidíme jednotlivé stránky, které jsou provázány hypertextovými odkazy v souladu se schématem na obr. 35. Zde je již zcela funkční model skutečné sestavy vhodné pro publikaci na internetu. 17
I. Jednoduchá tabulka Umíme již vytvořit základní strukturu WWW stránky, formátovat text, vkládat obrázky a vzájemně propojovat stránky pomocí hypertextových odkazů. V této kapitole se budeme věnovat tvorbě tabulky. Každá tabulka musí začínat příkazem <TABLE> a končit příkazem </TABLE>. Každý řádek tabulky je ohraničen příkazy<tr> a </TR>. Obsah každé buňky v tabulce je ohraničen příkazy <TD> a </TD>. Každý z uvedených příkazů může obsahovat několik atributů. V ukázkovém programu bylo použito u příkazu TABLE atributu BORDER, který udává tloušťku ohraničení tabulky ( my máme zadáno <TABLE BORDER=1> Struktura HTML tabulky <TABLE BORDER=1> 4. <TR> <TD>První buňka v prvním řádku</td> <TD>Druhá buňka v prvním řádku</td> 1. </TR> 2. <TR> <TD>První buňka v druhém řádku</td> <TD>Druhá buňka v druhém řádku</td> </TR> </TABLE> 3. 1. Každá tabulka začíná příkazem <TABLE> a končí </TABLE> 2. Řádek tabulky žačíná <TR> a končí </TR> 3. Buňka tabulky začíná<td> a končí</td> 4. Atribut BORDER udává, jak tlustá má být čára ohraničující tabulku. Obr. 42 Obr. 43 18
Barevná tabulka U příkazů <TR> a <TD> připíšeme nový atribut BGCOLOR. Tento atribut nastavuje pozadí. Ihned za atributem následuje barva pozadí. Barvu píšeme v agličtině (BLUE, RED, YELLOW atd). Atribut BGCOLOR můžeme vložit do příkazu <TR>,<TD> nebo <TABLE>. Umístíme-li tento atribut do příkazu TABLE, změníme pozadí celé tabulky všechny buňky v tabulce budou mít stejnou barvu. Umístíme-li atribut do příkazu TR, změníme barvu pouze v jednom řádku. Aplikujeme-li tentýž atribut do příkazu TD, nastavíme konkrétní barvu pouze u jediné buňky. Aplikace daných atributů do řádků i jednotlivých buněk předvádí tabulka, jejíž zdrojový HTML program je na obr. 44. Obr. 44 Výsledný obraz tabulky nevystihne černobílá laserová tiskárna :o), ale pro ilustraci lze alespoň v odstínech šedi postřehnout, že prohlížeč barevnou změnu zaznamenal obr. 45. Obr. 45 19
Složitější tabulka Rozměry tabulky se dají měnit. Změnit můžeme i její umístění na stránce. Text uvnitř buněk lze zarovnávat. O těchto problémech pojednává následující kapitola. Obrázek 46 ukáže celkový zdrojový kód HTML tabulky. Zde nyní budeme konetovat jednotlivé kroky postupně. <TABLE BORDER=1 WIDTH="500" ALIGN="LEFT">Atribut WIDTH nastaví šířku tabulky na 500 pixelů (obrazových bodů). Atribut ALIGN zarovná celou tabulku na levou (popř. pravou) část stránky. <TR BGCOLOR="BLUE" ALIGN="CENTER"> Obsah buněk v prvním řádku bude zarovnán na střed. <TD HEIGH="50">První buňka v prvním řádku</td> Atribut HEIGH nastaví výšku prvního řádku na 50 pixelů. <TD BGCOLOR="RED" HEIGHT="100">První buňka v druhém řádku</td> Výška druhého řádku je 100 pixelů. <TD BGCOLOR="YELLOW" ALIGN="RIGHT">Druhá buňka v druhém řádku</td> Obsah buňky zarovnán vlevo. Obr. 46 Obr.47 20
J. Obrázek na pozadí Pro vložení obrázku na pozadí stránky se používá atribut BACKGROUND.Naším cílem bude, aby se na pozadí stránky neustále zobrazoval malý obrázek např. logo firmy. Obrázek je malý, a proto se na stránce bude neustále opakovat jako dlaždičky. Obr. 48 Klíčový povel k tvorbě pozadí je v příkazovém řádku <BODY BACKGROUND="STRUKTURA.JPG">, kde v aktuálním adresáři je uložen soubor STRUKTURA.JPG. Obr. 49 21
Efektní je také použití atributu BGPROPERTIES, který se projeví pouze tehdy, jestliže na pozadí použijeme atribut BACKGROUND. Atribut BGPROPERTIES musí nabývat hodnoty FIXED. Abychom vliv atributu snadno pochopili je třeba, mít na stránce dlouhý text, po kterém při četbě rolujeme. Při prohlížení pozadí stojí za rolujícím textem. Za textový zdroj byl použit seznam římských císařů. Výpis programu je z důvodu rozsáhlosti seznamu uveden na pěti obrázcích Obr. 50 až 54. Obr.50 Obr. 51 Obr. 52 22
Obr. 53 Obr. 54 Klíčový příkaz je <BODY BACKGROUND="STRUKTURA.JPG" BGPROPERTIES="FIXED"> V jeho důsledku se pozadí zastaví a text se pohybuje reakcí na myš, či na rolovací šipky nad ním. Barevné pozadí a barevný text Mezi často používané atributy příkazu <BODY> jsou BGCOLOR a TEXT. Atribut BGCOLOR udává barvu pozadí a atribut text barvu textu na WWW stránce. Užití obr. 55. Obr. 55 23
Barevné řešení pozadí a textu není v možnostech tiskárny :o). Levý a horní okraj WWW stránky Obr. 56 Někdy se nám mohou hodit atributy LEFTMARGIN a TOPMARGIN. LEFTMARGIN je atribut, který nastavuje vzdálenost textu od levého okraje. Atribut TOPMARGIN vzdálenost textu od horního okraje WWW stránky. Jejich hodnoty se zadávají v pixelech- obrazových bodech. V příkladu na obr. 57 je použita hodnota 30 pixelů. Hodnoty lze v individuálních pokusech s atributem měnit. Klíčový řádek na obr.57 zní: <BODY BGCOLOR="AQUA" TEXT="BLUE" LEFTMARGIN="30" TOPMARGIN="30"> Obr. 57 24
Měníme-li hodnoty TOPMARGIN a LEFTMARGIN, text se prohlížeči po stisku klávesy F5 (znovunačtení) umísťuje na nové pozice v souladu s hodnotami u atributů TOPMARGIN a LEFTMARGIN. H. Tvorba stránky s použitím tabulkových příkazů Příkazy pro tvorbu tabulek se často používají k formátování a rozvržení textu na WWW stránce. Na stránkách, které budou v kapitole H. tvořeny, uplatníme dvě efektní techniky. a) hypertextový odkaz se mění na černý text v případě, že se nacházíme na příslušné stránce. b) V horní a levé částo stránky umístíme pruhy s příkazy. Na obrázku 58 na další najdeme zdrojový HTML kód. 1.) <BODY LINK="RED" ALINK= RED VLINK="RED">Atributy za příkazem BODY =>jsou LINK, VLINK a ALINK. Nastavují barvy hypertextových odkazů. Standartně se hypertextové odkazy zobrazují v modré barvě a po kliknutí se mění ve fialovou. Uvedenými atributy lze barevné nastavení měnit. LINK nastavuje barvu odkazů, které ještě nebyly vybrány na které jěště nebylo kliknuto. Atribut ALINK nastavuje barvu odkazů, na které právě klikáme. Atribut VLINK udává barvu odkazů, na které již bylo kliknuto. Barva všech hypartextových odkazů zůstává v našem programu vždy červená. 2.) <TABLE WIDTH="100%" BGCOLOR="AQUA"> Tato tabulka má pouze jeden řádek o jedné buňce. Atribut WIDTH nastavuje šířku tabulky. Ta je 100%. Tabulka se tedy roztáhne po celé stránce. Atribut BGCOLOR nastaví barvu pozadí na AQUA = světle modrou barvu. 3.) <TR ALIGN="CENTER"> Příkaz TR definuje první a jediný <TD><FONT SIZE="+3"> Webová stránka firmy M.O.C.</FONT></TD> řádek v tabulce. Příkaz TD definuje </TR> </TABLE> první a jedinou buňku v prvním řádku Atribut ALIGN je nastaven na hodnotu CENTER, což způsobí zarovnání celého obsahu řádku na střed. Příkaz FONT se používá pro změnu velikosti a barvy písma, jehož velikost SIZE byla nastavena na +3. 4.) <TABLE WIDTH="100%" HEIGHT="100%"> Ze začíná druhá tabulka, která obsahuje jeden řádek o dvou buňkách. V levé buňce budou hypertextové odkazy a v pravé buňce bude text. Atribut WIDTH nastavuje šířku tabulky 100% roztáhne se po celé stránce zleva doprava. Atribut HEIGHT nastavuje výšku tabulky (100%) roztáhne se odshora dolů. 5.) <TR VALIGN="TOP"> Zde začíná první a jediný řádek druhé tabulky. U příkatu TR nalezneme atribut VALIGN, který je nastaven na hodnotu TOP. Atribut VALIGN slouží k zarovnání textu nahoru k horníhu okraji buňky. 6.) <TD WIDTH="150" BGCOLOR="AQUA" ALIGN%"CENTER"> Zde začíná první buňka v prvním řádku. Atribut WIDTH nastavuje šířku celé buňky na 150 pixelů. Jde ošířku levého světle modrého pruhu. Atribut BGCOLOR dává pruhu barvu. Vzpomeňme si na základní pravidla hypertextového odkazu. Záměrně si připomeňme již použitý hypertextový odkaz <A HREF="Mesic.htm">Měsíc</A> Nyní bude hypertextový odkaz použit znovu. Mesic.htm je stránka, na kterou se po kliknutí máme přepojit a Měsíc 25
je slovo, na které je na výchozí stránce hypertext vázán. Na stránce naší firmy mají hypertextové odkazy tento tvar: Úvod <BR><BR> <A HREF="24.htm">Naše nabídka</a><br><br> <A HREF="25.htm">Kontakty</A><BR><BR> </TD> Druhá buňka prvního řádku je pravou čístí naší WWW stránky. <TD ALIGN="CENTER"> <BR><BR> <H2> Vítejte na firemní stránce s obchodní značkou M.O.C....!</H2> Na levé straně naleznete odkazy, na které stačí pouze kliknout... </TD> Obsah této buňky je pomocí atributu ALIGN zarovnán na střed. Celkový vzhled HTML kódu je na obrázku 58: Obr. 58 Aby bylo možné realizovat hypertextové odkazy, zkopírujeme dohotovený dokument na dvě kopie - 24.htm a 25.htm. Na obrázcích 59 a 60 si povšimneme změn odkazů a aktualizace stručných textů na jednotlivých stránkách, které usnadní orientaci pro pozdější editaci těchto stránek na provozní podobu. 26
Obr. 59 Obr. 60 27
Výsledný vzhled provázaných stránek nám ukážou obrázky 61,62 a a 63. Obr. 61 Obr. 62 Obr. 63 28
I. Rámy Rámy nebo tzv. rámce ( anglicky FRAMES). Jde o zvláštní skupinu příkazů, které rozdělí okno prohlížeče na několik částí, z nichž se každá chová jako samostatná internetová stránka. Použití si můžeme popsat na příkladu. Okno prohlížeče je rozděleno na dvě části. Levá je úzká a jsou na ní umístěny hypertextové odkazy nabídky. Klikneme-li na některý z odkazů v levé části, zobrazí se požadovaný obsah na pravé straně. První pomocná stránka Obr. 64 <FRAMESET COLS="150,*"> Příkazy pro vytváření rámů jsou ohraničeny příkazy FRAMSET </FRAMESET> Atributem COLS internetovému prohlížeči říkáme, že vytvoříme dva rámy-dva sloupce. První sloupec rám bude mít šířku 150 pixelů. Druhý sloupec zaplní zbylou šířku stránky. (proto hvězdička). <FRAME NAME="menu" SRC="menu.htm"> Popisujeme jednotlivé rámy. Poněvadž jsme atributem COLS stanovili, že chceme dva rámy, proto zde nalézáme také dva příkazy FRAME. Jméno prvního rámce jsme stanovili na menu. Atributem SRC říkáme, že se má v tomto rámu zobrazit HTML stránka menu.htm. <FRAME NAME="hlavni" SRC="uvod.htm"> Druhým příkazem FRAME popisujeme druhý rámec (pravý sloupec) atributem NAME jsme stanovili jméno tohoto rámce jako hlavni. Atributem SRC říkáme, že se zde má zobrazit stránka uvod.htm. Kód z obrázku 64 uložíme pod názvem index.htm. Máme tak pomocnou stránku, která se nám zatím v internetovém prohlížeči nijak nezobrazí. Internetovému prohlížeči pouze oznamuje, jak má stránku rozdělit. a které HTML stránky budou v jednotlivých rámech zobrazeny. Soubory menu.htm a uvod.htm Obrázky 65 a 66 nám ukazují zdrojové kódy HTML programů, které budou vsazeny do definovaných rámů. V menu nabízíme hypertextové odkazy kapitola 1, kapitola 2, kapitola 3 a kapitola 4 v podobě HTML souborů 01.htm, 02.htm, 03.htm a 04.htm. Tyto soubory je třeba ještě dotvořit viz obrázky 67 70. 29
Obr. 65 Obr. 66 Obr. 67 Obr. 68 Obr. 69 Obr. 70 30
Výsledek naší práce je zřejmý z obrázku 71. Přeji si aby Vám toto skriptum přineslo radost a zájem o tvorbu internetových stránek. Skriptum je přirozeně kompilátem řady již dříve publikovaných rutin, pouze shrnuje do stručného celku základy problematiky tvorby statických webových stránek. V Otrokovicích, únor 2001 Text neprošel jazykovou úpravou určeno jako pomůcka pro výuku IVT, jen pro vnitřní potřebu školy. Gymnázium, Otrokovice, Spojenců 905 765 13 OTROKOVICE : 762 61 92 792 60 14 31
Obsah A. Základní struktura HTML dokumentu... 2 B. Nadpisy... 2 C. Atributy... 5 D. Formátování textu... 6 E. Strukturování textu... 7 F. Řezy písma, odstavce, řádky a čáry... 10 G. Vložení obrázku do WWW stránky... 14 Doplněno a revidováno pro potřeby SOŠ Otrokovice 2009 -pk- 32