Děláme www stránky v HTML editoru - 1. část

Otvíráme cyklus, jehož účelem je naučit tvořit jednoduché stránky v HTML editoru. Dle našich zkušeností se to lze naučit velmi rychle, i když lidé, kteří tvoří stránky přímo v HTML jazyku se na tyto stránky možná dívají skepticky.

     Účelem tohoto našeho cyklu je, naučit dělat internetové stránky i uživatele, kteří nemají čas se učit HTML jazyk a nebo tvoří internetové stránky pouze příležitostně a nemělo by to pro ně dostatečnou efektivitu.

     Popisovat budeme jednoduchý HTML editor Front Page Express, který je volně šiřitelný a na Internetu je například ke stažení zde. Jinak jej jsme schopni na vyžádání z redakce za úhradu režijních nákladů vypálit na CD a zaslat zájemcům nebo si jej mohou po domluvě vyzvednout u nás v pražské redakci.

     Pokud stránky vytvoříme, je třeba je umístit na Internet. I to v našem cyklu popíšeme a budeme používat FTP klienta AceXFTP, který je na ovládání velice jednoduchý, je rovněž volně šiřitelný, patrně jej půjde najít také na Internetu a jsme schopni jej zájemcům dodat spolu s Front Page Expressem..

     Dalším důležitým faktorem je, kde hostovat, kam své stránky umístit? Protože však o tomto téma pojednával článek Internet a oddíl, popisující přednášky Petra Molky - Besta na CVVZ 2002. Z tohoto důvodu nebudeme tuto záležitost dále rozebírat. V článku byly základní rozdíly mezi neplaceným a placeným webhostingem včetně jeho výhod a nevýhod. My budeme naši cvičnou prezentaci umísťovat do adresáře html.ekamarad.cz.

     Dnes začneme založením stránky a popisem základních funkcí Front Page Express, které jsou k založení třeba. Po svém spuštění vypadá takto:

     Jako první krok doporučujeme stránku pojmenovat a uložit. Vyvarujeme se tím dalším problémům, které by mohly nastat a o kterých se zmíníme později. Nyní snad zmíním jediný, ale dosti pádný. Stačí, aby se vám zasekl počítač nebo vypnuli proud, a vše, co nemáte uložené, už definitivně nemáte. Proto doporučujeme průběžně ukládat, zejména pracujete-li pod Windows, které se zasekávají zcela běžně a pravidelně.

     Klikněte myší v levém sloupci na "Soubor" a pak na 5. položku od shora "Uložit jako". Otevře se vám okno, do kterého pojmenujete stránku. Jméno stránky pište s diakritikou, je to text, který používají vyhledávače k vyhledávání.

     Stránku pojmenujeme Cvičná školní stránka a všimněte si, že tato adresa, ovšem bez písmen s diakritikou a bez mezer se vám nabízí i pro název souboru v druhém řádku.

     Nyní klikněte vpravo dole na Jako soubor a tam napište jméno souboru, který vaší stránku tvoří. To již musí být bez diakritiky, přesto, že Windows diakritiku povolují. Na Internetu by se vám stránka, která by měla v názvu diakritiku či mezery nezobrazovala. To mějte vždy na paměti!

     Protože jde o úvodní stránku, pojmenujeme ji "index". Front Page Express jí dá automaticky příponu HTM, takže plný název souboru bude "index.htm". Všimněte si, že v jménu souboru používáme pouze malá písmena. To je další důležitá zásada. Název s velkými písmeny na některém serveru může fungovat, ale na jiném ne. Některé setvery dělají to, že název "Index.htm" by vám po nahrátí změnili na "INDEX.HTM" a odkaz, který by volal "Index.htm", by pak soubor nenašel. Budete-li používat v názvu pouze malá písmena, bude vaše stránka fungovat na všech hostujících serverech. Nenechte se zmást tím, že na vašem současném serveru to funguje, protože nikdy, a to ani na placeném webhostingu, nevíte, kdy ho budete měnit a pak je to velmi nepříjemná práce, muset vše opravovat.

     Máte-li soubor pojmenovaný, ještě musíte najít adresář, kam ho uložit. Nedoporučujeme jej ukládat do nabídnutého adresáře "Dokumenty". Je lepší si pro něj vytvořit samostatný adresář, v kterém budete mít vaši celou internetovou prezentaci. Kliknete-li na šipku vedle nabídnutého adresáře "Dokumenty", rozevře se vám nabídka, kam můžete soubor uložit.

     Až najdete vhodné místo, můžete si v něm založit i další adresář. Nám se hodí místo v adresáři "ekamarad", v kterém si založíme nový podadresář "html", tak jak to odpovídá systému domény 3. řádu html.ekamarad.cz.

     Adresář založíme, když klikneme pravým tlačítkem myši a zvolíme "Nový objekt" (předposlední možnost) a "Adresář". Vznikne nám nový adresář se jménem "Nová složka", který rovnou pojmenujeme "html" a kliknutím na něj otevřeme.

     Nyní klikneme na "Uložit" a soubor "index.htm" máme v tomto adresáři uložen. Nyní s ním můžeme mez obav pracovat a zkusíme jej nadepsat "Cvičná školní stránka". Nejdříve si ale popíšeme horní lištu. Seznam položek vlevo, nadepsaný "není" nedoporučujeme zatím používat. V dalším seznamu máte "Times New Roman", což je typ písma, který také zatím měnit nebudeme. Doporučujeme používat buď tento typ nebo Arial, případně z ozdobnějších Comic Sans MS. U ostatních druhů písma, které sice vypadají pěkně, není záruka, že je korektně zobrazí prohlížeče všech uživatelů, kteří se budou dívat na vaše stránky. Ozdobné nadpisy, které většinou vídáte na různých stránkách nejsou totiž textové řetězce, ale obrázky.

     Dále v pořadí je velké a malé A, které slouží ke zvětšování a zmenšování písma. Kliknutím na písmeno B, které následuje dále, přejdeme na tučné písmo, kliknutím na I, přejdete do stylu kurzívy, kliknutím na podtržené U, budete psát podtržená písmena. To je stejné jako ve Wordu. Sami vidíte, že podobnost tohoto HTML editoru s Wordem je veliká.

     Následuje paleta, v které je možno volit barvy písma.

     Další symboly, které následují, jsou opět stejné jako ve Wordu a umožní vám zarovnávání textu doleva, na střed nebo doprava. Word umí navíc zarovnávat doprava i doleva současně, což Front Page Express neumí. Většinou tedy zarovnáváme doleva a nadpisy na střed.

      Dalšími symboly se pak nastavuje řádkování, odstavce a další funkce a zatím je rovněž používat nebudeme.

     Sami ale vidíte, že nadpis by měl být výraznější. Dáme tedy text myší do bloku a budeme s ním dále pracovat.

     Nejprve jej klikáním na velké A budeme zvětšovat. Celkem jsme klikli čtyřikrár a dostali jsme největší velikost písma. Můžete si vyzkoušet, že další klikání na A již nemá vliv, písmo se už dále nezvětšuje.

     Nyní jej vybarvíme. Klikneme na barevnou paletu a zvolíme tmavě modrou barvu a klikneme na OK. Barvu uvidíme, až když odklikneme myší kamkoli do prostoru a tím zrušíme blok.

     Nyní máme stránku založenu, pojmenovánu a nadepsánu. Klikneme v horním menu na "Soubor" a na čtvrtou nabídku odshora "Uložit". Dále budeme pokračovat příště. Ryze z praktických důvodů adresář "html" přejmenujeme na "html1" a stránku ve stavu po 1. lekci najdete na adrese http://www.html1.ekamarad.cz .