Na vaše přání vás dnes blíže seznámíme s jedním z tzv. WYSIWYG editorů. Zkratka znamená What-You-See-Is-What-You-Get, jinými slovy - jak vidíte dokument v editoru, tak bude vypadat i konečná internetová stránka. V těchto editorech píšete text, vkládáte obrázky, odkazy a formátujete podobně jako například ve Wordu. Program si vámi vytvořený dokument sám přeloží do HTML kódu.
Editorů webových stránek existuje mnoho. Některé jsou volně ke stažení na internetu, jiné je třeba si koupit. Jedním z nejznámějších je MS FrontPage. Tento program můžete nalézt například jako součást MS Office 2000. Jednodušší bezplatnou verzí je FrontPage Express, který je součástí instalačního balíku prohlížeče Internet Explorer.
Editor
Editor FrontPage Express není složitý nástroj. Ukážeme vám vložení některých prvků na stránku. Spusťte program a v otevřeném okně můžete ihned vepsat název stránky. Napíšete například nadpis a nyní si budoucí stránku musíte uložit: nabídka Soubor - Uložit jako. Dále vyplníte dva údaje - název stránky a umístění souboru. Pokud chcete stránku uložit jinam, než program nabízí, kliknete na tlačítko Jako soubor a uložíte ji do adresáře, který jsme si pro umístění stránek určili.
Teď už pracujete jako v textovém editoru. Píšete text, jednotlivé úseky nebo vše si můžete myší označit a změnit velikost, font i barvu písma. Označené písmo najednou zformátujete v menu Formát - Písmo. Ve stejné nabídce je také volba pro úpravu pozadí stránky. Když máte část stránky hotovu, podíváte se, jak vypadá výsledek v HTML kódu - Zobrazit - HTML. V samostatném okně se ukáže vaše stránka v barevném kódování pro lepší přehlednost. FrontPage Express doplnil hlavičku a ukončení stránky:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>První stránka</title>
</head>
<body bgcolor="#000000">
<p><font color="#FF8080" size="3" face="Tahoma"><strong>První stránka ve FrontPage Express</strong></font></p>
<p>&nbsp;</p>
</body>
</html>
Z příkladu je vidět, že program pečlivě uzavírá všechny tagy, například <p> a </p>. Barvu písma nastavíte buď v již zmíněné nabídce Formát, nebo použijete ikonku palety v ovládacích tlačítkách, tam je větší škála barev. Barva je pak určena v RGB, v okně s HTML kódem lze ještě barvu upravit nebo změnit. Problém může být s fontem písma. Ne všechny prohlížeče jsou schopny správně určit, jaké písmo zvolit, název fontu by měl být proto ještě doplněn například o definici v tomto případě bezpatkového písma (sans serif) apod.
Odkazy
Dále budete potřebovat odkazy. Zatím máte jen jednu stránku, proto vložte absolutní odkaz na nějaký jiný server. Použijte nabídku Vložit, kde je volba Hypertextový odkaz nebo klávesovou zkratku Ctrl+K. Nyní vybíráte typ odkazu. Nejčastěji budete potřebovat http:// pro odkaz na jiné stránky, nebo mailto: pro e-mailový odkaz. V našem příkladu to bude samozřejmě http:// a do druhého políčka napíšete URL stránek, pak může kód vypadat takto: <p><font color="#FFFF00" size="2" face="Tahoma"> vložíme odkaz: </font><a href="http://edu.iol.cz"><font color="#FFFF00" size="2" face="Tahoma">http://edu.iol.cz</font></a><font color="#FFFF00" size="2" face="Tahoma"> - i u odkazu můžete nastavit, jak by měl vypadat, tedy barvu, font, velikost písma a podobně, tento formát se ukáže až u výsledku, tedy po uložení souboru</p> Pokud nechcete, aby odkazem byla přímo adresa serveru, nahraďte v příkazu adresu požadovaným textem takto: </font><a href="http://edu.iol.cz"><font color="#FFFF00" size="2" face="Tahoma ">Planeta Internetu</font></a>. Příště budeme pokračovat obrázky, tabulkami a dalšími možnostmi programu FrontPage Express.
