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:

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