V minulých dílech našeho výukového seriálu jsme si postupně vytvořili základ internetové prezentace. Nyní budeme pokračovat prací na vytváření jednotlivých dalších stránek a na jejich úpravách.
Dostali jsme se při tvorbě stránek tedy do fáze, kdy „internetová prezentace" zatím obsahuje pouhé dva soubory: index.html a styly.css. Soubor index.html zpracováváme pomocí HTML editoru Yugie. Tento soubor zatím nemá informativní obsah - v podstatě obsahuje pouze navigační prvky a záhlaví stránky (upoutávku).
Nyní provedeme důležitý krok - soubor otevřeme pomocí HTML editoru Yugie. Použijeme nabídku Soubor, kde potvrdíme příkaz Uložit jako. Stránku si uložíme pod názvem vzorova_stranka.html. Tato stránka pro nás bude důležitá v tom, že ji budeme využívat jako jakousi šablonu pro vytváření dalších stránek.
Soubor vzorová stránka nyní zavřeme. Znovu otevřeme stránku index.html. To je hlavní stránka našeho webu. Znamená to, že právě tato stránka se načte jako první, až bude naše webová prezentace umístěna na internetu. Měly by se zde tedy zobrazovat základní informace o tom, co našim návštěvníkům nabízíme. Text, který zadáme, by tedy měl být stručný a výstižný, aby zákazníka upoutal, ale nenudil. Budeme se zde snažit co nejvíce využívat slova, která jsou pro naši prezentaci klíčová. Tím se rozumí slova, podle kterých nás budou zákazníci na internetu vyhledávat.
Text budeme zapisovat na místo, kde je vložen „prozatímní" text. Označíme tedy tento text tak, jak vidíme na obrázku a rovnou začneme zapisovat z klávesnice náš vlastní text.
Zadáme tedy například tento text: Počítačové kurzy. Tento text si označíme myší a zformátujeme jej jako nadpis 1. úrovně (ikona s číslem 1 v pracovním panelu nahoře). Stiskneme klávesu ENTER, abychom se dostali na začátek dalšího řádku. Zde vložíme HTML značku odstavce pomocí ikony:
V textu se tedy zobrazila značka <p>. Pokračujeme zadáváním textu z klávesnice. Pro vytvoření nového odstavce vždy odřádkujeme a vložíme značku odstavce pomocí označené ikony.
Pokud jste texty zapsali a prohlížíte nyní obsah stránky pomocí prohlížeče, je vidět, že oblast s textem je příliš široká. Potřebovali bychom text omezit tak, aby končil vpravo maximálně v šíři, kde vidíme animovaný obrázek v záhlaví. To můžeme snadno docílit pomocí úpravy v souboru styly.css. Spustíme tedy program TopStyle a otevřeme si tento soubor. Náš text, který jsme zapsali…
