15. diel - Tvorba podstránok a kontaktný formulár

V minulej lekcii, Fixné menu a pozicovanie v CSS , sme dokončili layout, teda rozloženie stránky. V dnešnom HTML / CSS tutoriálu začneme dokončovať jednotlivé podsekcie nášho webu tak, aby bol pripravený na nahranie na webhosting.

Dnes sa nebudeme učiť nič nové, len dokončíme kontaktnú stránku. Podstránky domov, zručnosti a kontakt máme už rozpracované.

Odkazy v layoutu

Otvoríme si naposledy súbor rozlozeni.html a do navigačného menu pridáme odkazy na jednotlivé podstránky:

<ul>
    <li class="aktivni"><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><a href="kontakt.html">Kontakt</a></li>
</ul>

Vytvorenie podstránok

Asi si kladiete otázku, akým spôsobom docielime to, aby sa všetky podstránky na našom webe zobrazovali v nami vytvorenom layoutu.

Rámca

V minulosti sa na tento účel využívali rámca (tag <frameset>), ktoré umožňovali layout definovať iba raz a podstránky sa zobrazovali v rámcoch. Tento spôsob však predstavoval veľa problémov najmä pre internetové vyhľadávače, preto boli rámca vo verzii HTML 5 odstránené a označené za nevalidný. V dnešnej dobe je veľkou chybou rámca používať.

Tabuľkový layout

Druhým spôsobom, bohužiaľ o nič šťastnejším, je použitie tabuľky k vytvoreniu layoutu. Tabuľka má totiž vo vykresľovaní buniek miernej odlišnosti a umožňuje vloženie riadkového rámu (

Týmito problémami je konkrétne to, že celé stránky bežia na jednej URL s rámom. Na podstránky sa nedá podľa adresy odkazovať a ak áno, zobrazí sa v zlej šírke a bez layoutu. S rámy teda nemôžete niekomu povedať: pozri sa na mojej zručnosti, tu je odkaz: http://adresa.cz/dovednosti.html. Musíte mu povedať: choď na adresa.cz a klikni na zručnosti. Asi si dokážete predstaviť, že pri väčšom počte podstránky je to trochu nepraktické. Taktiež vaše SEO (optimalizácia webu pre vyhľadávače) nebude nič moc.

Serverový jazyk

Správne riešenie je použitie ďalšieho programovacieho jazyka, ktorý beží na strane servera a ktorý nám obsah článku do podstránok sám vkladá. Alebo naopak do podstránok vkladá layout. Takým jazykom je napr. Veľmi používané PHP, na ktoré však zatiaľ nemáme skúsenosti. Môžete si o ňom prečítať v príslušnej sekcii až web dokončíme, ale teraz na neho ešte nie je ten pravý čas.

Dôvodom vysvetlenie tejto teórie sú zastarané tutoriály na internete, ktoré učia nováčikov používať rámca alebo tabuľkou pre layout. Teraz viete, že sa to už pár rokov nerobí

Kopírovanie

Asi ste si všimli, že ani jeden z vyššie spomenutých spôsobov zatiaľ nekorešponduje s layoutom, ktorý sme si vytvorili. Naše riešenie bude prosté, layout jednoducho nakopírujeme pre každú podstránku. Každá stránka nášho webu teda v sebe bude mať ten istý layout, ale v ňom iný obsah. Kopírovanie layoutu do viacerých súborov je trochu nepraktické, ale zatiaľ je to pre nás najschodnejšia cesta, ktorá je validný a na podstránky sa možno odkazovať.

Z našej zložky zo stránkou vymastíme súbor index.html. Súbor rozlozeni.html teraz premenujte na index.html. Tým máme prvé podstránku. Už vieme, že index.html sa volá stránka, ktorá sa zobrazí vo chvíli, keď na web prídeme. Teda stránka, domovská čiže úvodná.

Podstránky

Poďme teda upraviť existujúce podstránky webu tak, aby obsahovali layout. Začnime stránkou kontaktné.

Kontakt

Stránku kontakt.html upravíme tak, aby v nej bol layout a vnútri

obsah pôvodnej stránky kontakt.html. Nezabudnite zmeniť aj titulok v hlavičke stránky, nadpis v hlavičke článku a nastaviť triedu aktivny položke kontakt v menu.

Kontaktný formulár

Pre registrovaných členov ponúka ITnetwork jednoduchý kontaktný formulár, ktorý si môžete umiestniť na svoje stránky. Formulár funguje tak, že do neho návštevník zadá správu a on vám ju odošle na email. Službu nájdete v sekcii služby pod názvom Mailform, iste sa na vaše nové stránky bude hodiť. Po vytvorení formulára získate kód, ktorý si do HTML vložíte.

Výsledná stránka kontakt.html môže vyzerať napríklad takto:

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

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="styl.css" type="text/css" />
        <title>Kontaktujte mě</title>
    </head>

    <body>
        <header>
            <div id="logo"><h1>HoBi</h1></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 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>

                    <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>
                <div class="cistic"></div>
            </div>
        </article>


        <footer>
            Vytvořil &copy;HoBi 2013 pro <a href="http://itnetwork.cz">ITNETWORK.CZ</a>
        </footer>
    </body>
</html>

Všimnite si použitie triedy vľavo k zarovnanie obrázku emailu doľava a triedy centrovaná k vycentrovanie rámca so službou. Tag

Za výsledok sa určite nemusíme hanbiť:

V budúcej lekcii, Štýlovanie tabuliek a galérie fotiek v HTML a CSS , dokončíme sekciu referencie a zručnosti. Web v aktuálnom štádiu nájdete ako vždy k stiahnutiu v prílohe.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.