Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Hledáme fulltime PHP programátora do ITnetwork týmu - 100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!
Slevový týden - Březen 30

Lekce 15 - 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.

Dnes se nebudeme učit nic nového, pouze dokončíme kontaktní stránku. Podstránky domů, dovednosti a kontakt máme již rozpracované.

Odkazy v layoutu

Otevřeme si naposledy soubor rozlozeni.html a do navigačního menu přidá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>

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 HTML 5 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.

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

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ůžete někomu říci: podívej se na mé dovednosti, tady je odkaz: http://adresa.cz/dovednosti.html. Musíte 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 tabulkou 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.

Z naší složky ze stránkou vymažeme soubor index.html. Soubor rozlozeni.html nyní přejmenujme na index.html. Tím máme první podstránku. 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 upravíme tak, aby v ní byl layout a uvnitř <section> obsah původní stránky kontakt.html. Nezapomeňte změnit i titulek v hlavičce stránky, nadpis v hlavičce článku a nastavit třídu aktivni položce kontakt v menu.

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. Po vytvoření formuláře získáte kód, který si do HTML vložíte.

Výsledná stránka kontakt.html může vypadat třeba 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šimněte si použití třídy vlevo k zarovnání obrázku emailu doleva a 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 umístíme adresu podstránky. Iframe (jako inline frame = řádkový rámec) není narozdíl od framesetu a frame nevalidní a můžeme ho používat.

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

Kontaktní formulář v 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.


 

Stáhnout

Staženo 2175x (86.7 kB)
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
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
45 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 (6)

 

 

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

Avatar
Reaktivní uživatel:18.7.2018 15:06

Ten odkaz na MailForm mi připadá "trochu" jako

Musíte mu říci: jdi na adresa.cz a klikni na dovednosti.

Odpovědět
18.7.2018 15:06
Kdo je připraven, toho zaskočí něco jiného
Avatar
Ahoj Nazdar
Člen
Avatar
Ahoj Nazdar:4.12.2018 15:04

Ahoj, mám problém, když přecházím z rozlozeni.html např. na další odkaz onás.html tak se mi to načte v pohodě, ale háčky a čárky na písmenku se zjeví jako "?" - mám linknutý stejný css soubrou, nevím, proč na úvodní stránce to je vše tak, jak má být a na druhým html se stejným css souborem se to zjevuje takto.

 
Odpovědět
4.12.2018 15:04
Avatar
Odpovídá na Ahoj Nazdar
Reaktivní uživatel:4.12.2018 18:37

Zkontroluj si, v jakém kódování to máš uložené a jaké tam máš napsané.

Odpovědět
4.12.2018 18:37
Kdo je připraven, toho zaskočí něco jiného
Avatar
Pavel Kubalík:7.11.2020 18:02

Dobrý den
Tak jsem se dostal až sem. A dočetl jsem se, že se stejně neobejdu bez PHP (což jsem už dříve věděl). To mně připomnělo, že před zahájeným tohoto kurzu jsem říkal, že budu paralelně studovat PHP, s těžištěm na PHP. A tak jsem se dostal na rozcestí v rozhodování.
Nechci se tady nějak rozepisovat, protože to asi nikoho moc nezajímá. Možná udělám ještě jednu lekci. Jedno je jisté, pokud bych něco dával na web tak v trochu jiné struktuře.
Každopádně co nejdříve přejdu na kurz PHP.
Bohužel mám ještě jeden problém. Na tento web jsem se dostal proto, že jsem potřeboval nějakou databázi. Objevil jsem však příjemně vytvořené kurzy, a byl jsem ztracen.
Databázi tedy mám, a strávím s ní hodně času a duševní energie. Ubírá mi to energii na studium. Takže ve vhodné chvíli to budu muset omezit. Je to složité, ale není to potřeba nějak rozebírat.
Závěr je jediný. Co nejdříve přejdu na PHP a pak uvidíme. Hlavně musí zvolnit tempo.
Děkuji PK

 
Odpovědět
7.11.2020 18:02
Avatar
Andrej
Člen
Avatar
Andrej :10. ledna 15:16

čaute, ako púrosím Vás docielim,aby po vyplnení formuláru a jeho poslaní vypísalo, že formulár bol úspešne odoslaný?

Ďakujem za Vaše nápady

 
Odpovědět
10. ledna 15:16
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jurajs
Člen
Avatar
Odpovídá na Andrej
Jurajs:10. ledna 15:26

Tak určitě by si měl použít PHP a JS nebo aspoň jedno z toho. Pro odesílání PHP a pro kontrolu jestli je vše ve formuláři vypsané správně tak Javascript. Uč se, vidím, že jsi na začátku... ;) Hodně štěstí! :)

 
Odpovědět
10. ledna 15:26
Avatar
Andrej
Člen
Avatar
Odpovídá na Jurajs
Andrej :10. ledna 17:05

Čiže tento tu čo je kontaktný formulár ak použijem, tak sa mi to nedá spraviť, iba ak by som si to celé nakódil sám áno ? :)

 
Odpovědět
10. ledna 17:05
Avatar
Jurajs
Člen
Avatar
Odpovídá na Andrej
Jurajs:10. ledna 22:22

Nevím jak si na tom s HTML a CSS, ale určitě je potřeba i znalost PHP, pokud chceš zprovoznit formulář.....A jestli chceš dělat dynamické a interaktivní weby tak bez PHP a JS se neobejdeš...Takže hodně zdaru při učení ;)
P.S. Všechno o formuláři je psané v sekci PHP, ale je lepší začít od začátku ;)

 
Odpovědět
10. ledna 22:22
Avatar
Andrej
Člen
Avatar
Odpovídá na Jurajs
Andrej :11. ledna 20:30

Jasné našiel som to už :) Díky. Idem postupne, dostanem sa aj na PHP určite :)

 
Odpovědět
11. ledna 20:30
Avatar
Marcel Sup
Člen
Avatar
Marcel Sup:12. února 21:06

Patlám si to v NetBeans a docela se to vztekalo, že za šířku rámečku 500 píšu to "px" u výšky 220 - to samé. Když jsem vykuchal ta "px", tak se mi to dokonce dařilo zobrazit i ve více prohlížečích.
Pak mě to ještě "radilo", ať ty údaje o rámečku narvu do CSS a nepočínám si tak "zastarale".

 
Odpovědět
12. února 21:06
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 40. Zobrazit vše