15. díl - Tvorba podstránek a kontaktní formulář

HTML a CSS Statický web Tvorba podstránek a kontaktní formulář American English version English version

V minulém dílu našeho seriálu tutoriálů o tvorbě webu v HTML a CSS jsme dokončili layout, tedy rozvržení stránky. V dnešním dí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.

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í devbook 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://devbook.cz">DEVBOOK.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

Příště dokončíme sekci reference a dovednosti. Web v aktuálním stádiu naleznete jako vždy ke stažení v příloze.


 

Stáhnout

Staženo 1302x (86.7 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

  Aktivity (2)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (12 hlasů) :
4.916674.916674.916674.916674.91667


 


Miniatura
Předchozí článek
Fixní menu a pozicování v CSS
Miniatura
Všechny články v sekci
Webové stránky krok za krokem

 

 

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

Avatar
IT Man
Redaktor
Avatar
Odpovědět  +2 17.2.2015 7:34
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Tad.MJ12
Člen
Avatar
Odpovídá na IT Man
Tad.MJ12:

Děkuji :-), jen jestli někdo narazil na ten samý problém... tak mi chvíli trvalo než jsem si uvědomil že se pixely počítají od okraje stránky a ne od obrázku (ikony)... třeba to někomu pomůže :-)

 
Odpovědět  +1 17.2.2015 11:16
Avatar
Tomáš123
Člen
Avatar
Tomáš123:

Buď mod_rewrite, alebo jednoduchšou cestou proste začneš menovať súbory index.pripona.
Každý súbor na webe sa tak môže volať.

Ak by si písal o webových technológiách, môžeš vytvoriť podobnú štruktúru:

html
->index.html
css
->index.html
php
->index.html
index.html

Ak potom do prehliadača zadáš "nazov-webu.sk/php", zobrazí sa ti stránka, index.html ktorá sa nachádza v adresári php. Ak by sa ale nevolala index.html, ale php.html nič by sa ti nezobrazilo a musel by si cestu upraviť na "nazov-webu.sk/php/php­.html"

Uvedené riešenie je o niečo zložitejšie na údržbu a hlavne, ak budeš mať viac podstránok, bude ťažšie orientovať sa, ktorú z nich práve upravuješ. Ale aj to je možnosť :)

Odpovědět 25.2.2015 13:29
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Jan Doskočil:

<p>

Editováno 18.10.2015 20:17
Odpovědět  -5 18.10.2015 20:16
"Existuje pouze 10 typů lidí, ti kteří strojovému kódu rozumí a ti kteří ne."
Avatar
Jan Doskočil:

Ahoj mám problém po úpravě CSS stylu zmizelo logo CSS styl mám určitě správně ale v indexu bude nejspíš chyba

<!DOCTYPE html>
<html lang="cs-cz">
  <head>
        <meta charset="UTF-8">
        <title>Dookovo portfolium</title>
        <link rel="stylesheet" href="/css/styl.css" type="text/css" />
  </head>
  <body>
        <header>
          <div id="logo"><h1>Dook</h1></div>
          <nav>
                <ul>
                  <li class="aktivni"><a href="/index.html">Domů</a></li>
                  <li><a href="/podstranky/navigace.html">Navigace</a></li>
                  <li><a href="/podstranky/kontakt.html">Kontakt</a></li>
                  <li><a href="/podstranky/dovednosti.html">Dovednosti</a></li>
                </ul>
          </nav>
        </header>
        <article class="pozadi">
          <div id="centrovac">
          <header>
                <h1>O mně</h1>
          </header>
          <section>
                <p>Ahoj,toto je můj první web, je stále ve vývoji ale už se to s ním lepší.<br />Pokud byjste našli chybu ve zdrojovém kódu který je k dispozici <a href="/podstranky/code.txt" target="blank">ZDE</a> okamžitě mě prosím informuje přes <a href="/podstranky/kontakt.html">kontaktní stránku.</a></p>
                <p class="centrovany"><img src="/png/human.png" alt="human" class="vlevo" />Jmenuji se Jan Doskočil a jsem 14tiletý začínající programátor.</p><div class="cistic"></div>
                <p>Nemám rád většinu sportů (což se ostatně odráží na mé kondici) ale to vyrovnávám svou láskou k počítačům.</p>
          </section>
          <div class="cistic"></div>
          </div>
        </article>
        <footer>
          <p>Vytvořil © Dook v roce 2015 pro <a href="http://www.itnetwork.cz/">ITNETWORK.CZ</a></p>
        </footer>
  </body>
</html>
Odpovědět 18.10.2015 21:48
"Existuje pouze 10 typů lidí, ti kteří strojovému kódu rozumí a ti kteří ne."
Avatar
Kryštof Henzl:

Zdravím :) U toho formuláře je v posledním řádku vidět jen půlka..Nevíte co s tím? :)

 
Odpovědět  -1 21. ledna 14:48
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na Kryštof Henzl
Tonda Kozák:

U iframe máš pevně danou výšku (height="220px"). Zadej tam větší číslo.

(Mimochodem, u HTML atributů, pokud jsou jednotkou pixely, tak se to píše bez toho „px“ - takže jenom height="230" nebo klidně bez uvozovek height=230.)

 
Odpovědět  +1 21. ledna 20:02
Avatar
Tomáš Raibr:

zdravím, u kontaktního formuláře mám stále položky "tvůj email: a Aktuální rok...."
vedle sebe a ne nad sebou jako v příkladu.

Upravoval jsem jak width, tak height a bez efektu, dík za radu

 
Odpovědět 10. června 18:22
Avatar
Bája
Člen
Avatar
Bája:

Dobrý den, chci se zeptat, šly by udělat podstránky podstránek? Děkuji za radu.

 
Odpovědět 30. června 19:08
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Tomáš Raibr
David Čápka:

Díky, byla tam rozhozená šablona, již je to v pořádku.

Odpovědět 7. září 15:26
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
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 20. Zobrazit vše