Text
Velikost písma - jazyk HTML nedefinuje velikost písma podle boldů, ale podle velikosti „size“ (např. size=3) nebo přesně nadefinovanou velikostí udávanou v pixelech (např. size=12px). Nadpisy - nadpis se tvoří párovým tagemtext
) Vodorovná čára| Text |
| Radek 1 Text 1 | Radek 1 Text 2 | Radek 1 Text 3 |
| Radek 2 Text 10 | Radek 2 Text 11 | Redek 2 Text 12 |
| ). Jejich šířku si můžeme zvolit jakou potřebujeme, ale musí nám vždy dát součet 90. To znamená že si šířku buněk můžeme určit 30+30+30=90, nebo 10+50+30=90 apod. Stejné pravidlo platí i pro šířku buněk v tabulce, kde velikost zadáváme v pixelech. (šířka buněk = šířka sloupce za předpokladu, že máme stejně široké řádky v celé tabulce) Tabulka zadaná přes procenta - do celkové definice tabulky 14 Tabulka zadaná přes pixely - do celkové definice tabulky se zapíše požadovaná šířka tabulky udávaná v pixelech 15 Vytvořte si stránku podle této předlohy a uložte ji jako „Tabulka_pixely.html“
16 id - každý by jistě řekl identifikační číslo. Ano, id může mít hodnotu identifikačního čísla, ale slouží podobně jako parametr „name“ (o něm se zmíním až ve formulářích) a může nabývat veškerých hodnot. U tabulek bych mu nepřikládal velkou hodnotu, ale je lepší si jednotlivé tabulky pojmenovat – zabráníte tím zbytečné nepřehlednosti. style - tahle vlastnost určuje ohraničení tabulky (jaký druh čáry se má zvolit) Přestože se tabulka skládá ze tří čar, určujeme ohraničení jen jedné, tudíž této hlavní čáry. Pokud budeme chtít použít jiné druhy čar, změníme tím i ostatní údaje (Pozn. wysiwyg editory jsou na tuhle práci nejlépe stavěné, protože dokážou za Vás zpracovat tyhle veškeré údaje do HTML kódu, zatímco vy si jen vyberete vše přes průvodce tabulkou) Protože ve stylech existuje mnoho druhů ohraničení a mnoho knížek je ani neuvádějí (dají se nalézt na internetu, ale wysiwyg editory za Vás vytvoří HTML kód), já se zmíním jen o základní plné čáře, se kterou jste se doposud setkávali a navíc připíši další dvě definice navíc. Vlastní definice zápisu buňky a tabulky v tagu
Další příklad: vnořená tabulka + ukázky s barvami:
| Konkrétní případ: | Párový tag - tento tag hraje velkou úlohu v HTML jazyku a zejména v tabulkách. Tento tag se předřazuje (píše se před konkrétní událost) před veškerý HTML kód, kterého se bude týkat. Ukončení tagu se provádí pomocí lomítka, protože se jedná o párový tag. Tento tag zapsaný bez definic nemá žádný význam, ale pokud ho nedefinujeme, bude se týkat „všeho“ co je uzavřeno mezi tímhle tagem. Pokud chceme vložit jinou definici v tomhle tagu, nemusíme ho ukončovat, ale stačí ho pouze přerušit. Nejlepší bude vysvětlit to na příkladu. V tomhle případě nám vlastnost vycentruje na střed vše, co bude uzavřeno mezi tímto tagem.
a znovu ho začínat, tak ho přerušíme. Přerušení = nadřazení definice před textem. Nastane-li situace, že se např. setkají tři různá umístění u textu, bude primárně bráno to, které je mu nejdříve přiřazeno. 19 Např.: Text | - text bude vpravo.
Seskupování řádků lze uplatnit u každé tabulky tzn. u tabulek které jsou zadávány v procentech i pixelech (Pozn. v příkladech budu uplatňovat tabulky zadávané v procentech, protože jsou pro vysvětlování přehlednější) Při seskupování řádků se definuje vlastnost colspan=“číslo“ kde číslo znamená počet seskupených buněk. Tahle definice se zapisuje přímo do definice tagu . Vlastnost colspan nám odebírá počet zapsání řádků ve sloupci. Ukažme si teoretický zápis a pak si zkusme udělat tabulku která je zobrazena nahoře. Abychom si to neulehčili, přidáme ji navíc barevný nádech. Většinou se tahle vlastnost zadává spolu s ostatními vlastnosti, takže do definice přiřadím ještě definici šířky buňky. Příklad na zapsání definice Obecně: | | Konkrétní případ: | 20 Vytvořte si stránku podle této předlohy a uložte ji jako „Tabulka_colspan.html“ Stejně jako seskupování buněk v řádcích lze seskupování buněk uplatnit v tabulkách, kterým se zadává šířka v procentech nebo v pixelech. Při seskupování sloupců se definuje vlastnost rowspan=“číslo“ kde za číslo se dosadí počet sloučených buněk. Další vlastností která se běžně nedefinuje, ale je v téhle věci je podle mého názoru velmi užitečná je heigh, nebo-li výška řádku. Zápis vypadá obdobně height=“číslo“ kde číslo znamená výšku řádku. Pokud budeme chtít používat klasickou výšku řádku, nemusíme tuhle vlastnost uvádět, ale pokud ji uvedeme můžeme ji přiřadit i nulu. Zvolíme-li nízké číslo, nemusí se výška vůbec projevit – znatelnost závisí na výšce udaného čísla (Poznámka: ze zkušenosti uvádím místo nuly malá čísla např. 1,2 aj.) 21 Zkusme si na to obdobný příklad jako byl předtím na colspan. Příklad na zapsání definice Obecně: Konkrétní případ: | | Vytvořte si stránku podle této předlohy a uložte ji jako „Tabulka_rowspan.html“ 23 6. kapitola – Grafika WWW Grafika a grafické prvky na internetu? Úplná samozřejmost. Je tomu ovšem tak? Umístit obrázky není vůbec těžké (stačil by i papír velikosti A4 na vysvětlení tagů a příklad), ale nejtěžší je zřejmě uvědomit si okolní skutečnosti, které většinou každý běžný uživatel přehlíží. K čemu by nám byla stránka která bude designově velmi krásná, ale doba načítání by byla 30 minut? V téhle kapitole se naučíte základní parametry obrázků, které Vám pomohou při rozhodování jaké grafické prvky umístit a v jaké míře.Ale začněme od začátku. Budeme-li chtít umístit na internet grafické prvky, musíme znát alespoň jejich základní vlastnosti. Grafické prvky rozdělíme do 2 skupin – pozadí a obrázky, které se dále dělí podle formátu. Já se budu zabývat pouze dvěma formáty. Pozadí - s pozadím jsme se jíž setkali v minulých kapitolách, ale používali jsme jako pozadí pouze jednu barvu. Jako pozadí můžeme použít jakýkoliv obrázek jakéhokoliv typu (*.jpg, *.gif, *.bmp aj.), ale pozor na důležitou událost. Pozadí stránky se musí stahovat svižně, takže nemá cenu na stránky použít obrázek s velikostí 500kb (přestože bude nádherný) kde budeme stránku otevírat min. 3 minuty, ale stačí použít také originální obrázek s velikostí pár kb které se načtou téměř okamžitě. Pokud uvážíte tahle dvě hlediska, stojí proti Vám: 1) krásné pozadí s velkou velikostí (např.500kb) x dlouhá doba stahování obrázku 2) krásné pozadí s malou velikostí (např. 20kb) x krátká doba stahování obrázku Pozadí stránky se skládá buď z plné barvy, nebo obrázků které se skládají vedle sebe (proto jsou vytvořeny speciální druhy obrázků které mají malou velikost) a vzájemně na sebe navazují. Takže uvažte která možnost se Vám více zamlouvá (Pozn. pokud je to možné, doporučuji používat co nejmenší velikosti. Některé stránky se bohužel této zásadě vyhnout nemůžou kvůli celkovému zpracování, proto je dobré upozornit na tuhle skutečnost ještě před otevřením téhle stránky) A teďka je na řadě lehký HTML kód, který srovnám s jednobarevným pozadím pro lepší pochopení. Pokud bych to mněl zapsat, jedná se o vložení nové definice do tagu . Příklad na zapsání definice, kde je použita barva jako pozadí: Obecné zapsání jednobarevného pozadí: Konkrétní zapsání jednobarevného pozadí: Příklad na zapsání definice, kde je použitobrázek jako pozadí: Obecné zapsání pozadí, kde je použit obrázek: Konkrétní zapsání pozadí, kde je použit obrázek: 24 Obrázky ve formátu *.gif - tenhle formát obrázků slouží pro nejkvalitnější grafiku kterou lze vytvořit. Tenhle formát nelze kompresovat (snížit velikost) a podporuje animované sekvence tzv. gify, dále se používá pro ukládání animovaných bannerů. Co dodat závěrem? Používejte tento formát jen tam kde je to nezbytné, protože kvůli své dokonalé kvalitě hrozně moc ovlivňuje dobu načítání stránky (prodlužuje dobu) Obrázky ve formátu *.jpg a *.jpeg - tyhle formáty jsou nejrozšířenější na internetu zejména pro své vlastnosti. Nemohou se sice srovnávat s úplně dokonalou grafikou jako mají formáty *.gif a nepodporují animované sekvence, ale jejich kvalita je na hodně vysoké úrovni. Převážnou většinu fotek naleznete na internetu (dokonce i digitální fotoaparáty ukládají jako formáty *.jpg) právě v tomhle formátu. Na závěr snad jen dodat, že používáním těchto formátů dosáhnete dokonalých výsledků a kvalitu stránky nehorší. Teďka jsem zde popsal základní dva druhy formátů a pouštím se do vysvětlení vložení obrázku na stránku. Jelikož předpokládám že minulé kapitoly jste zvládli, vynechám dopodrobna psané události. Vložení obrázku - se provádí přes nepárový tag  Poznámka: ohledně umístění relativních a absolutních adres se dozvíte v kapitole hyperlinky. Doposud zadávejte absolutní adresy tzn. adresu tam, kde se obrázek nachází (např.: C:/Document a Setting/Obrazky/muj_obrazek.jpg) Další formátování obrázků se provádí stejně jako formátování textu. Vzhledem k větší přehlednosti a lepšího zápisu doporučuji uzavírat obrázky do párového tagu , protože do něho můžete napsat přímé definice. Můžete také využít párového tagu , ale nezapomeňte že se týká veškerého textu i obrázků které jsou umístěny mezi tímto tagem. Budete-li např. chtít vycentrovat obrázek, napíšete:
25 Pro obrázky platí také více vlastností než je u uváděno u textu. Pokud se budeme zabývat umístěním na stránce, můžeme použít následující definice tagy: Zarovnání obrázku - se aplikuje úplně stejně, jako jsme se doposud setkali, ale u obrázků existuje více vlastností. Rozeznáváme tyhle druhy zarovnání: top = horní okraj grafiky na horní okraj řádku middle = střed grafiky na účaří řádku bottom = dolní okraj grafiky na dolní okraj řádku left = umístění na levý okraj s obtékáním textu zprava right = umístění na levý okraj s obtékáním textu zleva texttop = horní okraj grafiky na horní okraj řádku absmiddle = střed grafiky na střed řádku baseline = dolní okraj grafiky na účaří řádku absbottom = dolní okraj grafiky na spodní okraj řádku Alternativní text: „alt“ a „title“ - alternativní text se může definovat 2-mi vlastnostmi, které se uvádějí do definice tagů. Mezi těmito dvěmi vlastnostmi alt=““ a title=““ není velký rozdíl, ale title se používá především u textů a alt u obrázků. Jak to funguje? Pokud přidržíte myš nad textem resp. obrázkem, zobrazí se popiska. Pokud bude popiska příliš dlouhá, sama se zalomí na následující řádky. Zejména možnost alt je velmi praktická, protože když má uživatel vyplé načítání obrázků nebo se mu obrázek špatně načte, zobrazí se mu namísto obrázku text. Ukažme si to na příkladu. Poznámka: Popiska se odborně nazývá tooltip text Poznámka autora: Tooltip text se může občas chovat velni podivně – může a nemusí se zobrazovat, přestože máme vše správně zapsané. Tahle chyba se dá opravit většinou restartováním. Příklad na zapsání definice u textu Obecně: Text Konkrétní případ:Úvod Příklad na zapsání definice obrázku Obecně:26 Vytvořte si stránku podle této předlohy a uložte ji jako „alt_a_title.html“ Popisek na text č.1 (krátký popis) Popisek na text č.1 (dlouhý popis) Špatné načtení obrázkuDobré načtení obrázku  Než se začnu zabývat dalšími parametry, vytvořme si jeden lehký příklad, kde uplatníme výše zmíněné definice a parametry.27 Vytvořte si stránku podle této předlohy a uložte ji jako „grafika_zaklady.html“ Ukažme si nejdříve ohraničení... zleva je border="0", uprostřed border="1" a zprava border="5" Vlastnost lowsrc nemá cenu zkoušet offline, protože obrázek je načten téměř okamžitě teďka si trochu pohrajeme s výškou a šířkou
28 7. kapitola – Formuláře Každý z vás na stránce viděl rozvírací seznamy, internetový obchod, dotazníky nebo jiné stránky, do kterých jste zadali nebo vybrali informace a poté je odeslali ke zpracování. V téhle lekci si ukážeme jak toho docílit. Formulář si představme jako souhrn několika různých políček, tlačítek aj. věcí, které jsou uzavřeny v jednom celku. Veškeré události které chceme zpracovávat musí být v tomhle celku uzavřeny. K tomu nám slouží párový tag - do tohohle tagu vkládáme veškeré možnosti formuláře (např.: tlačítka, vstupní pole) Mezi tento tag zapisujeme také klasický HTML kód (chceme-li udělat ve formuláři tabulku, zapíšeme ji mezi tyhle tagy). Párový tag sám o sobě nic neznamená, proto se mu přiřazují následující hodnoty a definice jsou zapsány přímo v těchto tagech. Příklad na zapsání hodnot (nebo-li definic, či odborněji atribut) Obecně: Konkrétní příklad: Do tagu moc velkou důležitost, protože se užívá převážně u skriptovacích stránek. 29 Enctype může nabývat tyhle hodnoty: a) enctype=“text/plain“ – pro posílání jednoduché pošty b) enctype=“multipart/form-data“ – pro posílání souborů, přesné kódování češtiny c) další hodnoty: application/x-www-form-urlencoded, libovolná mime deklarace Příklad použití: Obecně: Konkrétní případ: Tag - jedná se o nepárový tag, který do stránky vloží obyčejné textové pole. Do tohohle tagu lze zapsat následující hodnoty: a) size=“číslo“ – šířka pole ve znacích b) maxlength=“číslo“ – nejvyšší počet zadaných znaků c) name=“název“ – kde název je pojmenování pole. Používá se převážně při předávání údajů mezi stránkami, kde název slouží jako proměnná. d) value=“text“ – počáteční hodnota e) disabled – text bude šedý bude mi přiřazená hodnota jakou mu přiřadíte a nelze jej měnit. Tohle políčko s textem se v Internet Explorer neodesílá. Tahle pravidla neplatí vždy – záleží na druhu použitého prohlížeče. f) readonly – text bude viděn, normálně bude mu přiřazená hodnota jakou mu přiřadíte ale nelze jej měnit. Tahle hodnota pracuje opět jen v některých prohlížečích. Příklad použití: Obecně: Konkrétní případ: Tag - jedná se o nepárový tag, který do stránky vloží textové pole které slouží pro zadávání hesla (místo písma se jeví hvězdičky). Může nabývat stejných hodnot jako Tag - jedná se taktéž o nepárový tag, který vloží do stránky skryté pole. Můžete do něj zadávat stejné hodnoty jako v minulých případech, ale polem nebude na stránce vidět (slouží pro přenos tzv. skrytých hodnot) Tag - jedná se o nepárový tag, který vloží do formuláře zaškrtávací pole. Pokud budete vkládat více zaškrkávacích polí a pojmenujete je stejně (pomocí vlastnosti name) s různými hodnotami (value), vytvoří se tak skupina. 30 Do tohoto tagu lze zapsat následující hodnoty: a) name=“název“ – kde název je pojmenování pole. Používá se převážně při předávání údajů mezi stránkami, kde název slouží jako proměnná. b) value=“text“ – hodnota checkboxu, je nutné ho vždy vyplnit. c) checked – tento příkaz slouží pro zaškrtnuté políčko d) disabled – zaškrtnuté pole bude šedé, bude mi přiřazená hodnota jakou mu přiřadíte (zaškrtnuté/nezaškrtnuté) a nelze jej měnit. Tohle políčko se v Internet Explorer neodesílá. Tohle pravidla neplatí vždy – záleží na druhu použitého prohlížeče. Příklad použití při 3 kombinacích: Obecně: Konkrétní případy: Tag - jedná se o nepárový tag, který vloží do formuláře přepínací pole. Pokud budete vkládat více přepínacích polí a pojmenujete je stejně (pomocí vlastnosti name) s různými hodnotami (value), vytvoří se skupina přepínačů. Do tohoto tagu lze zapsat následující hodnoty: a) name=“název“ – kde název je pojmenování pole. Používá se převážně při předávání údajů mezi stránkami, kde název slouží jako proměnná. b) value=“text“ – pojmenování radiobuttonu. c) checked – tento příkaz slouží pro zaškrtnuté políčko d) disabled – přepínací pole bude šedé, bude mi přiřazená hodnota jakou mu přiřadíte (vybráno/nevybráno) a nelze jej měnit. Tohle políčko se v Internet Explorer neodesílá. Tohle pravidla neplatí vždy – záleží na druhu použitého prohlížeče. Příklad použití při 3 kombinacích: Obecně: Konkrétní případy: Párový tag - tenhle tag nám slouží pro přidání skupinového rámečku. 31 Do tohoto tagu lze zapsat následující hodnoty: a) style=“padding: číslo“ – odsazení legendy od levého horního okraje b) vnořený párový tag - vloží do ohraničení legendu tzn. popisek skupinového rámečku. Legenda může nabírat jakékoliv hodnoty zarovnání (pomocí již dříve zmíněného příkazu align) c) okraj - pomocí kombinací speciálních příkazů pro čáry upravujeme ohraničení skupinového rámečku. Grafické úpravy se v praxi uplatňují především přes CSS. d) Ostatní – např.: width, height se zapisují společně do style tzn. style=“width: 50; hight: 20... “ a veškeré údaje jsou od sebe odděleny středníkem. Příklad použití: Obecně: Konkrétní případ: Párový tag <select> - tenhle párový tag nám slouží buď pro přidání rozvíracího seznamu nebo seznamu pro výběr položek. Bez ostatních vložených tagů nemá tenhle tag žádný smysl. Hodnoty uzavírané do tagu <select>: a) size=“číslo“ – určuje druh seznamu. Pokud zvolíte-li číslo 1, bude se jednat o rozvírací seznam, zvolíte-li číslo vyšší než jedna, bude se jednat o seznam pro výběr položek. Size nesmí nabírat hodnoty nižší než 1. b) name=“název“ – kde název je pojmenování pole. Používá se převážně při předávání údajů mezi stránkami, kde název slouží jako proměnná. c) multiple – tahle hodnota je funkční jen u seznamu pro výběr položek a dovoluje vybírat více možností naráz (podržíte Ctrl a myší vybíráte položky) Do tohoto tagu lze zapsat následující hodnoty a tagy: a) - Tento tag se zapisuje mezi párový tag <select> a říká nám, že se do seznamu vloží položka. b) - V první řadě je potřeba zmínit, že pětkové a nižší verze Internet Explorer tenhle tag nepodporují. Mezi tento tag uzavíráme skupinu tagů Konkrétní případ: <select size=“1“ name=“RS1“> Příklad použití pro seznam výběru položek: Obecně: <select size=“počet řádků“ name=“RS2“ multiple> Konkrétní případ: <select size=“6“ name=“RS2“ multiple> Tag - obrázek vložený přes formulář - klasický image, platí veškeré paramtry jako u klasického obrázku. Liší se jen ve způsobu zapsaní. Obrázek vložený do formuláře se kombinuje s několika jinými hodnotami. Jedná se o nepárový tag. 33 Základní hodnoty které obrázek nabírá: b) border=“číslo“ – ohraničení obrázku c) src=“umístění obrázku“ – umístění obrázku d) name=“název“ – název je pojmenování obrázku. Používá se převážně při předávání obrázků mezi stránkami, kde název slouží jako proměnná. f) ostatní paramtry – width, height, lowsrc atd. Příklad použití: Obecně: Konkrétní případ: Tag - tenhle tag je nepárový a slouží nám pro přidávání souborů na server či jejich odesílání. Jeho využití je z velké části závislé na databázi a v praxi má využití např. v E-Mailu přes webové rozhraní pro přidávání souborů, nebo různé FTP servery atd. Textové pole se automaticky přidá s tlačítkem procházet. Do tohoto tagu lze zapsat následující hodnoty: a) size=“číslo“ – velikost textového pole b) name=“název“ – název je pojmenování textového pole. Používá se převážně při předávání obrázků mezi stránkami, kde název slouží jako proměnná c) value=“Text“ – Počáteční hodnota Příklad použití: Obecně: Konkrétní případ: Tag - jedná se o nepárový tag, který do formuláře vloží tlačítko. Tlačítko je ovládáno pomocí hodnot, které nabývá formulář nebo jinými skriptovými událostmi. Do tohoto tagu lze zapsat následující hodnoty: a) value=“Text“ – kde value je text, který se zobrazí na tlačítku b) name=“název“ – název je pojmenování tlačítka. U tlačítek nemá hodnota name velký význam pokud nebudu pracovat s tlačítkem dále, ale je dobré ji uvádět. Příklad použití: Obecně: Konkrétní případ: Tag - jedná se o nepárový tag, který do formuláře vloží tlačítko pro odesílání. Tlačítko je ovládáno pomocí hodnot, které nabývá formulář nebo jinými skriptovými událostmi. Do tohoto tagu lze zapsat následující hodnoty: a) value=“Text“ – kde value je text, který se zobrazí na tlačítku b) name=“název“ – název je pojmenování tlačítka. U tlačítek nemá hodnota name velký význam pokud nebudu pracovat s tlačítkem dále, ale je dobré ji uvádět. 34 Příklad použití: Obecně: Konkrétní případ: Tag - jedná se o nepárový tag, který do formuláře vloží tlačítko pro vymazání všech změn a údajů, které se ve formuláři změnily. Tlačítko není ovládáno pomocí hodnot, které nabývá formulář nebo jinými skriptovými událostmi. Do tohoto tagu lze zapsat následující hodnoty: a) value=“Text“ – kde value je text, který se zobrazí na tlačítku b) name=“název“ – název je pojmenování tlačítka. U tlačítek nemá hodnota name velký význam pokud nebudu pracovat s tlačítkem dále, ale je dobré ji uvádět. Příklad použití: Obecně: Konkrétní případ: Tag - jedná se o párový tag, který do formuláře vloží textové pole. Je nutné do něj zadat dvě hodnoty tj. rows a cols, jinak se automaticky nastaví jejich počet. Do tohoto tagu lze zapsat následující hodnoty: a) rows=“číslo“ – počet řádků, pokud nezadáte tuhle hodnotu, automaticky se nastaví na 1 řádek. b) cols=“číslo“ – počet znaků na jeden řádek. pokud nezadáte tuhle hodnotu, automaticky se nastaví na 20 znaků. c) name=“název“ - kde název je pojmenování pole. Používá se převážně při předávání údajů mezi stránkami, kde název slouží jako proměnná. Příklad použití: Obecně: Tímhle složitějším příkladem bych rád uzavřel kapitolu o formulářích. Poznámka: soubor „formular.asp“ zpracová údaje. Tento soubor je vytvořen pomocí jazyku ASP (Active Server Pages) a lze si ho stáhnout, nebo si ho můžete podle svých potřeb napsat. 37 8. kapitola – Framy Pro framy existuje i český název – rámce. V terminologii i v praxi se můžete setkat s oběma výrazy, proto je zde záměrně uvádím. Pojďme si definovat co to fram je. Jedná se o několik samostatných stránek, které se v prohlížeči (tedy ve výsledném díle) zobrazují jako jediná stránka. Při tvorbě framové stránky nutně potřebujete znát následující pravidlo. Každou stránku vytváříte samostatně a nakonec vytvoříte úplně novou stránku, kde všechny doposud vytvořené stránky pospojujete v určitém poměru (zadávaný přes procenta nebo přes pixely, dovolíte měnit velikost apod.). V tuhle chvíli to zní strašně, ale ukažme si to na příkladu. Potřebuji vytvořit stránku, kde bude potřeba vytvořit záhlaví, boční menu a stránku pro text. Každou stránku si vytvořím prvně samostatně. Získám 3 na sobě nezávislé stránky (zahlavi.html, menu.html a text.html). Nyní vytvořím stránku, která tyhle tři stránky pospojuje a nazvu ji např. index3.html. V téhle situaci nastane ta situace, že když spustím index3.html, spustím zároveň všechny tři stránky dohromady a v prohlížeči se budou jevit jako jediná stránka. Teď si možná říkáte, proč se to má dělat tak složitě, když tahle situace lze řešit způsobem, že stránky vytvoříme samostatně a propojíme je pomocí hyperlinků (viz. kapitola dále) Budete například tvořit do framu menu.html seznam CD které máte doma a po kliknutí na příslušné CD vám se ve framu text.html zobrazí informace o CD. Z tohohle plyne, že boční menu nemusíme dělat do každé stránky, ale stačí ho vytvořit jen jedenkrát. Je zde velká praktičnost při aktualizaci, protože seznam CD nemusíte upravovat na každé stránce, ale upravíte jen menu.html. Poznámka: v praxi se někteří webový tvůrci framům vyhýbají a řeší situaci pomocí vloženého skriptu. Tzn. že vytvoří soubor do kterého napíší celé menu.html (včetně umístění apod.) a ve stránce ho propojí přes příkaz. Tahle metoda sice je o něco lepší než framová verze (framy mají nedostatky, ale lze je odstranit, viz. ke konci lekce) ale je o hodně pracnější a pro běžné použití framy bohatě postačí. Pojďme si nejdříve vytvořit 3 kombinace které mohou nastat (ve skutečnosti můžou nastat stovky kombinací, ale nám jde jen o tři základní kombinace) Jedná se o framy, které budou rozděleny na stránce horizontálně, vertikálně a kombinovaně. 38 Příklad použití pro fram, který bude mít 2 horizontální stránky: Obecně: Konkrétní případ: 39 Příklad použití pro fram, který bude mít 2 vertikální stránky: Obecně: Konkrétní případ: 40 Příklad použití pro fram, který bude kombinovaný (záhlaví=horizontální fram + menu=vertikální fram + úvod=vertikální fram): Obecně: Konkrétní případ: 41 42 9. kapitola – Hypertextový odkaz (hyperlink) Úplnou samozřejmostí na internetových stránkách je přecházení na jiné stránky. K tomuto účelu nám slouží hypertextový odkaz, který pracuje na základě předání alternativní či relativní adresy URL po kliknutí na odkaz. Hypertextovým odkazem můžeme udělat téměř cokoliv – text, obrázek, tlačítko aj. Párový tag - vše co je obsaženo mezi tímto tagem (tzn. text, obrázek apod.) je hypertextovým odkazem. do tohle tagu se nesmí zapisovat další párový tag , párový tag tabulka do rozisernmych moznosti: automaticke miniatury, maruqe 43 Dodatek č.1 – PrintScreeny stránek Výsledný příklad index.html“ Výsledný příklad „formátování_textu.html“ 44 Výsledný příklad „formatovani_slozitejsiho_textu.html“ Výsledný příklad „vyuziti_formatovani.html“ 45 Výsledný příklad „seznamy.html“ Výsledný příklad „tabulka_procenta.html“ 46 Výsledný příklad „tabulka_pixely.html“ Výsledný příklad „tabulka_zaklady.jtml“ 47 Výsledný příklad „tabulka_colspan.html“ Výsledný příklad „tabulka_rowspan.html“ 48 Výsledný příklad „tabulka_absolutni_ulozeni.html“ Výsledný příklad „alt_a_title.html“ 49 Výsledný příklad „grafika_zaklady.html“ 50 Výsledný příklad „formular.html“ 51 Sign In
Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close
| |
