Lekce 20 - 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 - Webové stránky krok za krokem

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

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>
            <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>
    </article>

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

Změnili jsme titulek v hlavičce stránky, nadpis v hlavičce článku a nastavili 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 <div> se třídou cistic. To již známe z lekce Stylování hlavičky HTML stránky a flexbox.

Připišme si tedy do CSS souboru nový selektor:

.vlevo {
    float: left;
}

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 v HTML a CSS, upravíme sekci dovednosti a budeme stylovat tabulku.

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 3716x (2.28 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

Článek pro vás napsal David Hartinger

Uživatelské hodnocení:

1655 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity