Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akci až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 15 - Meta tagy, tvorba podstránek a kontaktní formulář

V minulé lekci, Fixní menu a pozicování v CSS, jsme dokončili layout, tedy rozvržení stránky.

V dnešním HTML/CSS tutoriálu začneme dokončovat jednotlivé podsekce našeho webu tak, aby byl připravený na nahrání na webhosting.

Prvně si představíme trochu blíže meta tagy a dokončíme kontaktní stránku. Podstránky domů, dovednosti a kontakt máme již rozpracované.

Meta tagy

V hlavičce stránky nám chybí poslední věc. Až bude web online, všimnou si ho internetové vyhledávače a jeho podstránky si tzv. zaindexují. Zjednodušeně řečeno si uloží, co na nich je, aby je pak mohli zobrazovat mezi výsledky, když někdo něco hledá. To je pro nás velmi důležité, protože právě takhle se na náš web dostanou návštěvníci.

Do každé podstránky vložíme 2 informace pro vyhledávače pomocí tagu <meta>. První informací je krátký popisek toho, co je na stránce. Další je seznam několika klíčových slov, které opět souvisí s obsahem stránky. Tag <meta> již známe, používali jsme ho k určení kódování stránky. Ještě jednou zopakuji, že kód vkládáme do hlavičky <head>. Každá stránka má samozřejmě v popisu něco jiného, pro index.html by to mohlo vypadat takto:

<meta name="description" content="Osobní portfolio programátora HoBiho." />
<meta name="keywords" content="portfolio, programátor, HoBi" />

Tagu jsme nejprve nastavili jeho název atributem name, pro popisek description a pro klíčová slova keywords. Obsah jsme pak zadali do atributu content.

Když jsme u meta informací, můžeme vložit i údaje o tom, kdo stránku vytvořil:

<meta name="author" content="HoBi" />

Ikona prohlížeče

V hlavičce zůstaňme ještě na poslední okamžik a nastavme našim webovým stránkám favicon. Jedná se o tu malou ikonku, která se zobrazí v záložce vašeho webového prohlížeče. Ikonku si můžeme stáhnout na Iconfinder, ve velikosti 16x16 pixelů ve formátu ico, a uložíme ji do složky obrazky/. Do hlavičky přidáme odkaz na ikonu:

<link rel="shortcut icon" href="obrazky/ikona.ico" />

Výsledek:

Web s ikonou v záložce webového prohlížeče

V některých verzích Google Chrome se ikona na lokálních stránkách nezobrazí.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

V našem navigačním menu máme již připravené odkazy na podstránky. Nyní si je začneme postupně připravovat.

Vytvoření podstránek

Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu.

Rámce

V minulosti se k tomuto účelu využívaly rámce (tag <frameset>), které umožňovaly layout definovat pouze jednou a podstránky se zobrazovaly v rámcích. Tento způsob však představoval mnoho problémů zejména pro internetové vyhledávače, proto byly rámce ve verzi HTML5 odstraněny a označeny za nevalidní. V dnešní době je velkou chybou rámce používat.

Tabulkový layout

Druhým způsobem, bohužel o nic šťastnějším, je použití tabulky k vytvoření layoutu. Tabulka má totiž ve vykreslování buněk mírné odlišnosti a umožňuje vložení řádkového rámu (<iframe>) tak, aby se jeho výška přizpůsobovala výšce okna. Do rámu je následně možné zobrazovat danou podstránku webu. Použití tabulky je však v layoutu velmi nesprávné a nesémantické, protože tabulka slouží pro označení tabulky, nikoli celé stránky. Navíc dochází opět k problémům s rámcem ve vyhledávačích.

Těmito problémy je konkrétně to, že celé stránky běží na jedné URL s rámem. Na podstránky se nelze podle adresy odkazovat a pokud ano, zobrazí se ve špatné šířce a bez layoutu. S rámy tedy nemůžeme někomu říci: podívej se na mé dovednosti, tady je odkaz: http://adresa.cz/dovednosti.html. Musíme mu říci: jdi na adresa.cz a klikni na dovednosti. Asi si dokážete představit, že při větším počtu podstránek je to poněkud nepraktické. Rovněž vaše SEO (optimalizace webu pro vyhledávače) nebude nic moc.

Serverový jazyk

Správné řešení je použití dalšího programovacího jazyka, který běží na straně serveru a který nám obsah článku do podstránek sám vkládá. Nebo naopak do podstránek vkládá layout. Takovým jazykem je např. velmi používané PHP, na které však zatím nemáme zkušenosti. Můžete si o něm přečíst v příslušné sekci až web dokončíme, ale nyní na něj ještě není ten pravý čas.

Důvodem vysvětlení této teorie jsou zastaralé tutoriály na internetu, které učí nováčky používat rámce nebo tabulky pro layout. Nyní víte, že se to už pár let nedělá :)

Kopírování

Asi jste si všimli, že ani jeden z výše zmíněných způsobů zatím nekoresponduje s layoutem, který jsme si vytvořili. Naše řešení bude prosté, layout jednoduše nakopírujeme pro každou podstránku. Každá stránka našeho webu tedy v sobě bude mít ten samý layout, ale v něm jiný obsah. Kopírování layoutu do více souborů je poněkud nepraktické, ale zatím je to pro nás nejschůdnější cesta, která je validní a na podstránky se lze odkazovat.

Již víme, že index.html se jmenuje stránka, která se zobrazí ve chvíli, když na web přijdeme. Tedy stránka, domovská neboli úvodní.

Podstránky

Pojďme tedy upravit stávající podstránky webu tak, aby obsahovaly layout. Začněme stránkou kontaktní.

Kontakt

Stránku kontakt.html přepíšeme tak, aby v ní byl náš layout a uvnitř <section> v jednom odstavci poupravený obsah původní stránky kontakt.html:

<!DOCTYPE html>
<html lang="cs-cz">

<head>
    <meta charset="utf-8" />
    <meta name="description" content="Kontakt na programátora HoBiho, programování na zakázku." />
    <meta name="keywords" content="kontakt, programátor, HoBi, zakázka, programování" />
    <meta name="author" content="HoBi" />
    <link rel="shortcut icon" href="obrazky/ikona.ico" />
    <link rel="stylesheet" href="styl.css" type="text/css" />
    <title>Kontaktujte mě</title>
</head>

<body>
    <header>
        <div id="logo"><h1>Honza<span>Bittner</span></h1><small>webdeveloper</small></div>
        <nav>
            <ul>
                <li><a href="index.html">Domů</a></li>
                <li><a href="omne.html">O mně</a></li>
                <li><a href="dovednosti.html">Dovednosti</a></li>
                <li><a href="reference.html">Reference</a></li>
                <li class="aktivni"><a class="kontakt-tlacitko" href="kontakt.html">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <article>
        <div id="centrovac">
            <header>
                <h1>Kontakt</h1>
            </header>

            <section>
                <p>
                    <img src="obrazky/email.png" alt="email" class="vlevo" />
                    Pokud mi chcete něco sdělit, napište mi email na <strong>hobi (zavináč) hobi (tečka) cz nebo využijte formuláře níže</strong>.
                </p>
            </section>
            <div class="cistic"></div>
        </div>
    </article>

    <footer>
        Vytvořil &copy;HoBi 2021 pro <a href="https://itnetwork.cz">itnetwork.cz</a>
    </footer>
</body>
</html>

Elementu <div> s ID centrovac jsme odebrali třídu domu-article, pomocí které na úvodní stránce nastavujeme zobrazení obsahu do mřížky. Na této stránce mřížku nevyužijeme. Dále jsme nezapomněli změnit titulek v hlavičce stránky, nadpis v hlavičce článku a nastavit třídu aktivni položce Kontakt v menu.

Obrázku uvnitř článku jsme ještě přidali třídu vlevo pro jeho zarovnání nalevo od textu. Tohoto chování dosáhneme pomocí vlastnosti float, čímž z obrázku uděláme plovoucí obsah. K "vyčištění" float používáme nově přidaný <div> se třídou cistic. Připišme si pro tyto třídy do CSS souboru dva nové selektory:

.vlevo {
    float: left;
}

.cistic {
    clear: both;
}

Kontaktní formulář

Pro registrované členy nabízí ITnetwork jednoduchý kontaktní formulář, který si můžete umístit na své stránky. Formulář funguje tak, že do něj návštěvník zadá zprávu a on vám ji odešle na email. Službu najdete v sekci služby pod názvem MailForm. Jistě se na vaše nové stránky bude hodit.

Vytvořte si vlastní MailForm pomocí odkazu výše, aby vám zprávy chodily na email, který máte vyplněný v profilu. Nekopírujte kód MailFormu z řešení k této lekci, je to pouze ukázka vložení a zpráva tak nepřijde na váš email!

Po vytvoření formuláře získáme kód, který si vložíme do našeho HTML souboru kontakt.html na konec elementu <section>:

<section>
    <p>
        <img src="obrazky/email.png" alt="email" class="vlevo" />
        Pokud mi chcete něco sdělit, napište mi email na <strong>hobi (zavináč) hobi (tečka) cz nebo využijte formuláře níže</strong>.
    </p>
    <p class="centrovany">
        <iframe frameborder="0" scrolling="no" width="500px" height="220px"
            src="http://www.itnetwork.cz/service/mail_form.php?hash=kod-vaseho-mailformu">
        </iframe>
    </p>
</section>

Všimněte si použití naší třídy centrovany k vycentrování rámce se službou. Tag <iframe> je pro nás nový, umožňuje do stránky vložit rámec s jinou podstránkou. Důležitý je zejména atribut src, kam umisťujeme adresu podstránky. Tag <iframe> (jako inline frame - řádkový rámec) není na rozdíl od elementů <frameset> a <frame> nevalidní a můžeme ho používat.

Za výsledek se určitě nemusíme stydět:

Kontaktujte mě
kontakt.html

Web v aktuálním stádiu naleznete jako vždy ke stažení v příloze.

V příští lekci, Stylování tabulek a galerie fotek v HTML a CSS, dokončíme sekci reference a dovednosti na naší webové stránce.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 2735x (2.28 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Fixní menu a pozicování v CSS
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Stylování tabulek a galerie fotek v HTML a CSS
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
281 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (50)

Avatar
Lubor Pešek
Člen
Avatar
Lubor Pešek:8. června 14:53

Vzorové řešení je v jiném stavu, než k jakému lze docílit v tutoriálu (a nejedná se o barvičky či stylování, ale jsou zde další tagy, o kterých v tutoriálu není ani zmínka viz předešlé komentáře, kde na to poukazují i jiní).

Rozhodně by stálo za to, aby autor této lekce o HTML prošel všechny články jeden za druhým a aktualizoval to. Takové nepřesnosti kazí dobrou pověst ITnetworku. Stačí si pročíst komentáře a hned člověk i vidí, v čem konkrétně jsou lidé zmatení nebo co je nepřesně.

Odpovědět
8. června 14:53
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Avatar
Lubor Pešek
Člen
Avatar
Lubor Pešek:8. června 15:09

Mimochodem, opravdu je žádoucí kopírování?
Jen tak namátko - zkoušel jsem si "super úpravu" a v menu hlavičce přidat mezeru u jména. Už teď jsem musel procházet 5 filů a hledat přesné místo, kde to změnit. Byl to opruz sám o sobě, nedovedu si představit, kdyby se takto měl měnit web o velikosti třeba konkrétně itnetworku, to by dotyčného developera z toho jeblo.
Opravdu je to kopírování trendem? (nebo řešením je právě implementace frameworku jiného jazyka?)

Odpovědět
8. června 15:09
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Avatar
Blanka Svobodová:14. června 23:03

musela jsem se pohrabat v templátu indexu, protože jsem si do kontaktů nahrála k div ID navíc class="domu-article" a pak se mi ikonka mailu pořád zobrazovala obří a šedá.....to byla hodina vzteků

Odpovědět
14. června 23:03
Kdy, když né teď. Kdo, když né já?
Avatar
Stanislav Krajči:16. června 21:50

komentáře lidí mluví za vše...připadá mi, že vám (IT network) chybí vzájemná komunikace k návaznosti...­..slušný zmatek a lidi z toho nemají radost. Přeji více jasnosti, pořádku a hlavně...rozepsat téma!! Pár paragrafů jednoduše pro začátečníky opravdu nestačí.

 
Odpovědět
16. června 21:50
Avatar
Petr Mašek
Člen
Avatar
Petr Mašek:20. června 15:12

Ahoj, mám dotaz. Postupoval jsem přesně podle návodu a dopadl jsem tak jak jsem dopadl. Neví někdo v čem bude problém? Ta lišta mi cestuje jak vzteklá ale když maximalizuji okno, tak mi zakryje půl stránky. Děkuji za odpověď.

 
Odpovědět
20. června 15:12
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Martin Šedivý:19. července 17:06

Od lekce 9 se neustále vracím, snažím se to všechno pochopit. Dám tomu ještě chvíli a pak přesně na radu "mentora a lektora" z IT network si budu vše dohledávat jinde a učit se úplně sám. Bohužel tohle je tragédie, že vzory nesedí a v kódech jsou chyby. Vaši lektoři na prezenční výuce ani tyto tutoriály a návody v životě neviděli podle svých slov. No comment.

 
Odpovědět
19. července 17:06
Avatar
Martin Šedivý:19. července 17:07

"Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš."

Najít chybu v kodéch, kde to už pět lekcí člověk musí složitě dohledávat vůbec nedává smysl.

 
Odpovědět
19. července 17:07
Avatar
Dominika Matějíčková:5. srpna 23:54

Není vysvětlen atribut -cistic- a i přes kontrolu ze zipu, která je naprosto totožná (až na výplň <p>) se mi kontaktní formulář nezobrazuje.

 
Odpovědět
5. srpna 23:54
Avatar
Miroslav Švarc:16. srpna 9:47

Nevím, k čemu je tam ten

.cistic {
clear: both;
}

Když ten cistic vymažu, funguje to stejně.

 
Odpovědět
16. srpna 9:47
Avatar
Miroslav Švarc:16. srpna 9:48

Tu třídu .vlevo si tam nově přidáš. Píšou to tam.

 
Odpovědět
16. srpna 9:48
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 60. Zobrazit vše