Jdeme tvořit webové stránky! Díky prezentaci jsme se již dozvěděli, že na tvorbu základních webových stránek v podstatě nepotřebujeme žádné speciální programy a stačí nám obyčejný poznámkový blok, který je součástí Příslušenství všech Microsoft Windows. Pro vytvoření základních webových stránek si tedy otevřeme poznámkový blok a ze všeho nejdříve si soubor uložíme, abychom nezapomněli, že tvoříme webovou stránku. Přes Soubor – Uložit si nalezneme složku, kam chceme soubor uložit, ale ještě před uložením si ve spodním „rozbalovátku“ vybereme „Všechny soubory (*.*)“, a za námi pojmenovanou webovou stránku nesmíme zapomenout dodat příponu, kterou řekneme všem, že jde o webovou stránku „.html“. Pro úvodní stránku se obvykle užívá název „index“, tudíž všem doporučuji pojmenovat první webovou stránku „index.html“. Takto pojmenovaný soubor uložíme a teď jej ještě něčím naplnit. Zkuste si nejprve do souboru vepsat následující řádky a poté si je vysvětlíme: Doporučuji odřádkovávat tak, jak jsem to naznačil v tomto případě. Lehce toho docílíte pomocí jednoho zmáčknutí Tab a docílíte tím vysoké přehlednosti kódu.

Ahoj

Když toto uložíte a otevřete soubor „index.html“ v prohlížeči, zobrazí se vám webová stránka s nápisem vlevo nahoře Ahoj a v titulku budete mít nápis První stránka. Pojďme si teď vysvětlit, co jsme naprogramovali. Pro webové prohlížeče je nutné specifikovat, že vše co píšeme, bude v jazyku html, proto je celý obsah uzavřen do tagu a uzavřen . Dále zde máme dvě „podsekce“: hlavu a tělo. Do hlavy (head) zapisujeme pouze pár elementů. V této části se ve webové stránce nic nezobrazuje, ale do této části se udává například titulek stránky, pomocná klíčová slova pro vyhledávání apod. Tělo (body) je poměrně zajímavější a v podstatě vše, co do něj napíšeme, se nám nějakým způsobem zobrazí. Zde jsme do těla nechali zapsat pouze Ahoj. Tag

nám určuje odstavcový text. (Pokud zapíšem bez

nic hrozného se neděje, ale doporučuji vše si určovat, aby v tom byl pořádek) Tag body může mít ještě dodatečné užitečné atributy, např. bgcolor="blue" (barva pozadí = modrá). Tudíž pokud místo zadáme , budeme mít modré pozadí celé stránky. Případně pomocí text="red" můžeme určit, že veškerý text na stránce bude červený. Pojďme se vrhnout do dalších tagů, abychom neměli pouze stránky s textem.

Odkaz V prezentaci jsme se setkali již s použitím tagu , konkrétně v kombinaci s atributem href, který nám vytvoří hypertextový odkaz na jiný soubor či stránku. Můžeme si tedy zkusit vložit do těla vložit: Základní škola Když soubor uložíme a otevřeme jej opět v prohlížeči, můžeme si všimnout, že pod Ahoj se nám objevil nápis Základní škola a poté, co na nápis klikneme, budeme posláni na stránku Základní školy Ratibořické. Pokud si vytvoříme další html soubor obdobně jako tento a uložíme jej do stejné složky jako „index.html“ a pojmenujeme jej například „dalsi.html“ a zadáme: Další stránka Vytvoříme přepínání mezi našimi stránkami. Je důležité, aby stránky byly ve stejné složce, jinak bychom k nim museli uvést cestu v počítači.

Obrázek Dalším asi velmi populárním tagem bude tag . Jak mnozí tuší, jedná se o vkládání obrázku. Pomocí atributu src určíme jeho cestu obdobně, jako jsme u určovali adresu odkazu. Pokud máme ve stejné složce „index.html“ a například obrázek „dum.jpg“, můžeme jej vložit do naší webové stránky následovně: Tento tag je nepárový, což znamená, že nevyžaduje ukončovací tag , pokud bychom ovšem chtěli být xHTML korektní (viz. prezentace), můžeme napsat: Rád bych teď upozornil na to, že je určitě obrázky vhodné nějakým způsobem zkomprimovat (zmenšit velikost), protože uživatel, který prohlíží webové stránky, není povětšinou moc trpělivý a pokud by se mu měli načítat nějaké obrovské obrázky, tak radši z vaší webové stránky odejde. A pokud si chcete uchovat pořádek v souborech doporučuju ve složce se stránkami vytvořit složku například „obrazky“ a do ní ukládat všechny obrázky, které poté vyvoláte pomocí K můžeme zadat ještě spoustu dalších atributů jako je: atribut width height border align

význam šířka výška tloušťka rámečku zarovnání obrázku

Hodnota délka nebo procento délka nebo procento Délka left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom

Pokud bychom tedy zadali: Vložíme tím do naší stránky obrázek „dum.jpg“, který zmenšíme na rozměry 400x300, obrázek bude mít okraj široký 2 a celý obrázek bude zarovnán doprava.

Text Teď se opět trochu vrátíme ke psaní textu. Řekli jsme si tedy již, že pokud chceme zadávat nějaký delší text, budeme používat tag

. Ovšem co kdybychom chtěli užít nějaký nadpis? Máme podobné možnosti jako se styly ve Wordu. Pokud místo

zadáme

Text nadpisu

, pak se nám na stránkách objeví velkým nadpisem text „Text nadpisu“, ovšem nemusíme se omezovat pouze na jeden nadpis. Máme tagy h1, h2, h3, h4, h5 a h6, přičemž čím větší číslo, tím menší nadpis to bude. !Nezapomínejme na uzavírání uzavíracím tagem stejným číslem! Pokud chceme pouze zvýraznit nějaký text, nemusíme ihned používat h1 a podobně, které jsou určené pouze pro nadpisy, ale můžeme užít tagů: , nebo , kde i znamená, že text bude kurzívou, b nám udělá tučný text a u nám vytvoří podtržený text. Pokud zrekapituluji námi vytvořenou webovou stránku i s novým textem, mohlo by to vypadat následovně:

Ahoj

Základní škola

Základní škola

Studium na základní škole mne moc baví.

Ovšem písemky z Informatiky by mohly být lehčí.

Pokud bychom text neuzavřely do

a

, pak by nám nevznikl nový řádek na webových stránkách. Ani kdybychom udělali jakkoliv velkou mezeru Entery, žádný nový řádek by nevznikl, pro to musíme využít tagu
, případně jeho xHTML verze
Máme, obdobně jako v dokumentech ve Wordu měnit písmo. Toho docílíme tagem , který může mít atributy color, size nebo face. Color obdobně jako u mění barvu písma, size nám určuje velikost písma (1-7) a face nám udává, jaký font bude použit (například Arial nebo Times New Roman, přičemž nedoporučuje se moc experimentovat, protože né všichni majitelé počítačů mají všechny fonty a pokud je nemají, nezobrazí se jim stránky tak, jak chcete vy). Na závěr si ještě můžeme zmínit tag , který nám vycentruje (zarovná ke středu) text v něm uzavřený.

Odrážkový seznam Pokud chceme použít odrážky či číslování, můžeme použít tagy

nebo
. Přičemž každou položku v seznamu určujeme pomocí tagu
1. . Zmatené? Ukážeme si:
   
   

   Odrážky

   • První
   • Druhá
   • Třetí
   
   
   Odrážky   
   
   První Druhá Třetí
   
   Případně:

   Číslování

   2. První
   3. Druhá
   8. Třetí
   
   
   Číslování 2. První 3. Druhá 8. Třetí
   
   Už chápete, proč vás učím odřádkovávat, aby v tom byl pořádek? Každopádně vpravo vždy vidíte, co získáte, když tam zadáte tento kód. K odrážkám věřím, že není co vysvětlovat. U číslování si můžete všimnout, že jsem dodal nepovinné atributy, které určily nejprve, že celý seznam nebude začínat od čísla 1, ale až od 2 a u třetí hodnoty jsem „natvrdo“ určil, že bude číslo 8, nikoliv 4.
   
   Tabulky Asi nejtěžší pro napsání v textovém editoru je tabulka, ale je to velmi mocný nástroj, i když si to možná ani nemusíte uvědomovat. Tabulku otevíráme tagem a ukončujeme samozřejmě . Abychom určili nový řádek tabulky, musíme použít tag a pro každou buňku v řádku používáme tag (s ukončeními a ). Následujícím kódem vytvoříme následující tabulku:

   První buňka vlevo nahoře	Druhá buňka	Třetí buňka
   Druhý řádek	Prostřední buňka	Buňka vpravo
   Poslední řádek	Druhá buňka	Poslední buňka vpravo dole

   
   
   První buňka vlevo nahoře Druhý řádek Poslední řádek
   
   Druhá buňka Prostřední buňka Druhá buňka
   
   Třetí buňka Buňka vpravo Poslední buňka vpravo dole
   
   Jak si můžete tedy všimnout, každý řádek začneme pomocí a do něj vkládáme každou novou buňku pomocí . Samozřejmostí je možnost použití atributů jako border=“1“, čímž určíme ohraničení čárou velikosti 1, width a height, čímž určíme maximální šířku a výšku, bgcolor na určení barvy pozadí případně bordercolor na určení barvy ohraničujícího rámečku.
   
   Rámy Poslední tag, který si vysvětlíme, budou rámy. Tento nástroj nám slouží k tomu, abychom do webové stránky vložili jinou webovou stránku, což se například využívá, pokud máte jednu stránku s navigačním menu a uvnitř tohoto menu chcete zobrazovat obsah stránek, jako to mám já na http://itzshp.wz.cz. Tyto rámy ohraničujeme tagy <iframe> a . Pomocí atributu src určíme, jakou stránku chceme v rámu zobrazovat. Samozřejmě velmi užitečné je určit velikost pomoci atributů width a height. Pokud chceme stránky měnit, je nutné jej pomocí atributu name pojmenovat. Pokud tedy vložíme například následující kód: <iframe src="http://www.zs-hp.cz" width="800" height="800" name="ram"> Dostaneme rám s webovou stránkou Základní školy. Nyní pokud k hypertextovému odkazu doplníme atribut target=“ram“, tak se nám nová stránka neotevře přes celou stránku, ale pouze v našem rámu, následovně: Informatika
   
   Závěr Jak jste si již jistě všimli, jednotlivé tagy do sebe lze vnořovat, ale je důležité dbát na to, abychom je ve správném pořadí také ukončovali. Pokud vnořím do tagu

   například tag musím nejprve ukončit tag a až poté tag

   . Je mi jasné, že jsem vás teď zahltil spoustou slov, kterým možná né vždy rozumíte, proto vám doporučuji zkoušet, zkoušet, zkoušet. Žádný učený z nebe nespadl, proto se nebojte vyzkoušet, cokoliv vás napadne. Každopádně jsem vám tu chtěl dát ucelený přehled, který vám postačí k vytvoření poměrně obsáhlých stránek. Pokud chcete obsáhlejší informace, doporučuji vám http://www.jakpsatweb.cz, kde můžete nalézt spoustu příkladů, obsáhlejší výčet všech atributů a mnoho rad. Na závěr vám tu předkládám menší návod jak třeba začít.
   
   Soubor index.html

   Úvod Informace Závěr Informatika	<iframe src="uvod.html" width="100%" height="500" name="ram">
   Vytvořeno Martinem Holým

   
   
   Soubor uvod.html

   Vítejte na webových stránkách

   věnovaným mému největšímu koníčku

   Tak si o tom něco přečtěte, jestli chcete

   
   
   Další soubory již dělat nebudu. Doufám, že jste pochopili základní rámec, jak by to například mohlo vypadat, samozřejmě si kódy jakkoliv upravte a pozměňte, jak se vám zlíbí. Jakékoliv problémy se mnou neváhejte konzultovat na mailu [email protected] nebo Facebooku „Pančitel Holý“.