Jdeme tvořit webové stránky!

Transkript

1 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. <title>první stránka</title> <body> <p>ahoj</p> 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 <p> nám určuje odstavcový text. (Pokud zapíšem bez <p> 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 <body> zadáme <body bgcolor="blue">, 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.

2 Odkaz V prezentaci jsme se setkali již s použitím tagu <a>, 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: <a href=" škola</a> 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: <a href="dalsi.html">další stránka</a> 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 <img>. Jak mnozí tuší, jedná se o vkládání obrázku. Pomocí atributu src určíme jeho cestu obdobně, jako jsme u <a> 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ě: <img src="dum.jpg"> Tento tag je nepárový, což znamená, že nevyžaduje ukončovací tag </img>, pokud bychom ovšem chtěli být xhtml korektní (viz. prezentace), můžeme napsat: <img src="dum.jpg" /> 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í <img src="obrazky\dum.jpg" /> K <img> můžeme zadat ještě spoustu dalších atributů jako je: atribut význam Hodnota width šířka délka nebo procento height výška délka nebo procento border tloušťka rámečku Délka align zarovnání obrázku left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom

3 Pokud bychom tedy zadali: <img src="dum.jpg" width="400" height="300" border="2" align="right" /> 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 <p>. Ovšem co kdybychom chtěli užít nějaký nadpis? Máme podobné možnosti jako se styly ve Wordu. Pokud místo <p> zadáme <h1>text nadpisu</h1>, 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ů: <i>, <b> nebo <u>, 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ě: <title>první stránka</title> <body bgcolor= blue" text="red"> <p>ahoj</p> <a href=" škola</a> <img src="dum.jpg" width="400" height="300" border="2" align="right" /> <h1>základní škola</h1> <p>studium na základní škole mne <b>moc</b> baví.</p> <p>ovšem písemky z <i>informatiky</i> by mohly být lehčí.</p> Pokud bychom text neuzavřely do <p> a </p>, 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 <br>, případně jeho xhtml verze <br /> Máme, obdobně jako v dokumentech ve Wordu měnit písmo. Toho docílíme tagem <font>, který může mít atributy color, size nebo face. Color obdobně jako u <body text= XXX > 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 <center>, který nám vycentruje (zarovná ke středu) text v něm uzavřený.

4 Odrážkový seznam Pokud chceme použít odrážky či číslování, můžeme použít tagy <ul> nebo <ol>. Přičemž každou položku v seznamu určujeme pomocí tagu <li>. Zmatené? Ukážeme si: <h1>odrážky</h1> <ul> <li>první</li> <li>druhá</li> <li>třetí</li> </ul> Odrážky První Druhá Třetí Případně: <h1>číslování</h1> <ol start="2"> <li>první</li> <li>druhá</li> <li value="8">třetí</li> </ol> Čí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 <table> a ukončujeme samozřejmě </table>. Abychom určili nový řádek tabulky, musíme použít tag <tr> a pro každou buňku v řádku používáme tag <td> (s ukončeními </tr> a </td>). Následujícím kódem vytvoříme následující tabulku: <table> <tr><td>první buňka vlevo nahoře</td><td>druhá buňka</td><td>třetí buňka</td></tr> <tr><td>druhý řádek</td><td>prostřední buňka</td><td>buňka vpravo</td></tr> <tr><td>poslední řádek</td><td>druhá buňka</td><td>poslední buňka vpravo dole</td></tr> </table> 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

5 Jak si můžete tedy všimnout, každý řádek začneme pomocí <tr> a do něj vkládáme každou novou buňku pomocí <td>. 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 Tyto rámy ohraničujeme tagy <iframe> a </iframe>. 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=" width="800" height="800" name="ram"></iframe> 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ě: <a href=" target="ram">informatika</a> 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 <p> například tag <b> musím nejprve ukončit tag </b> a až poté tag </p>. 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 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.

6 Soubor index.html <title>vítejte na mých webových stránkách!</title> <body> <table width="100%" border="1"> <tr><td colspan="2"><img src="logo.jpg" width="700" height="200" /></td></tr> <tr><td width="10%"> <ul> <li><a href="uvod.html" target="ram">úvod</a></li> <li><a href="informace.html" target="ram">informace</a></li> <li><a href="zaver.html" target="ram">závěr</a></li> <br /><br /><br /> <li><a href=" target="ram">informatika</a></li> </ul></td><td width="90%"> <iframe src="uvod.html" width="100%" height="500" name="ram"></iframe></td></tr> <tr><td colspan="2" align="center">vytvořeno Martinem Holým</td></tr> </table> Soubor uvod.html <title>úvodní stránka</title> <body> <h1>vítejte na webových stránkách</h1> <h6>věnovaným mému největšímu koníčku</h6> <p>tak si o tom něco přečtěte, jestli chcete</p> 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 holyma@zs-hp.cz nebo Facebooku Pančitel Holý.