20. diel - Meta tagy, tvorba podstránok a kontaktný formulár

V minulej lekcii, Fixné menu a pozíciovanie v CSS, sme dokončili layout, teda rozvrhnutie stránky.

V dnešnom HTML/CSS tutoriále začneme dokončovať jednotlivé podsekcie nášho webu tak, aby bol pripravený na nahranie na webhosting.

Najprv si predstavíme trochu bližšie meta tagy a dokončíme kontaktnú stránku. Podstránky Home, Skills a Contact máme už rozpracované.

Meta tagy

V hlavičke stránky nám chýba posledná vec. Keď bude web online, všimnú si ho internetové vyhľadávače a jeho podstránky si tzv. zaindexujú. Zjednodušene povedané si uložia, čo na nich je, aby ich potom mohli zobrazovať medzi výsledkami, keď niekto niečo hľadá. To je pre nás veľmi dôležité, pretože práve takto sa na náš web dostanú návštevníci.

Do každej podstránky vložíme 2 informácie pre vyhľadávače pomocou tagu <meta>. Prvá informácia je krátky popis toho, čo je na stránke. Ďalší je zoznam niekoľkých kľúčových slov, ktoré opäť súvisia s obsahom stránky. Tag <meta> už poznáme, používali sme ho na určenie kódovania stránky. Ešte raz zopakujem, že kód vkladáme do hlavičky <head>. Každá stránka má samozrejme v popise niečo iné, pre index.html by to mohlo vyzerať takto:

<meta name="description" content="HoBi's personal portfolio." />
<meta name="keywords" content="portfolio, programmer, HoBi" />

Tagu sme najskôr nastavili jeho názov atribútom name, pre popis description a pre kľúčové slová keywords. Obsah sme potom zadali do atribútu content.

Keď sme pri meta informácií, môžeme vložiť aj údaje o tom, kto stránku vytvoril:

<meta name="author" content="HoBi" />

Ikona prehliadača

V hlavičke zostaňme ešte na posledný okamih a nastavme našim webovým stránkam favicon. Ide o tú malú ikonku, ktorá sa zobrazí v záložke vášho webového prehliadača. Ikonku si môžeme stiahnuť na Iconfinder, vo veľkosti 16x16 pixelov vo formáte ico, a uložíme ju do zložky images/. Do hlavičky pridáme odkaz na ikonu:

<link rel="shortcut icon" href="images/icon.ico" />

Výsledok:

V niektorých verziách Google Chrome sa ikona na lokálnych stránkach nezobrazí.

V našom navigačnom menu máme už pripravené odkazy na podstránky. Teraz si ich začneme postupne pripravovať.

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ámce

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

Tabuľkový layout

Druhým spôsobom, bohužiaľ o nič šťastnejším, je použitie tabuľky na vytvorenie layoutu. Tabuľka má totiž vo vykresľovaní buniek mierne odlišnosti a umožňuje vloženie riadkového rámu (<iframe>) tak, aby sa jeho výška prispôsobovala výške okna. Do rámu je následne možné zobrazovať danú podstránku webu. Použitie tabuľky je však v layoutu veľmi nesprávne a nesémantické, pretože tabuľka slúži na označenie tabuľky, nie celej stránky. Navyše dochádza opäť k problémom s rámcom vo vyhľadávačoch.

Týmito problémami je konkrétne to, že celé stránky bežia na jednej URL s rámom. Na podstránky sa nemožno podľa adresy odkazovať a pokiaľ áno, zobrazí sa v zlej šírke a bez layoutu. S rámami teda nemôžeme niekomu povedať: pozri sa na moje zručnosti, tu je odkaz: http://address.com/skills.html. Musíme mu povedať: choď na address.com a klikni na Skills. Asi si dokážete predstaviť, že pri väčšom počte podstránok je to trochu nepraktické. Rovnako 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ň ešte nie je ten pravý čas.

Dôvodom vysvetlenia tejto teórie sú zastarané tutoriály na internete, ktoré učia nováčikov používať rámce alebo tabuľky 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 jednoduché, 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 dá odkazovať.

Už vieme, že index.html sa volá stránka, ktorá sa zobrazí vo chvíli, keď na web prídeme. Teda stránka, domovská alebo úvodná.

Podstránky

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

Kontakt

Stránku contact.html prepíšeme tak, aby v nej bol náš layout a vo vnútri <section> v jednom odseku poupravený obsah pôvodnej stránky contact.html:

<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="utf-8" />
     <meta name="description" content="Contact HoBi's programmer, custom programming." />
     <meta name="keywords" content="contact, programmer, HoBi, order, programming" />
     <meta name="author" content="HoBi" />
     <link rel="shortcut icon" href="images/icon.ico" />
     <link rel="stylesheet" href="style.css" type="text/css" />
    <title>Contact Me</title>
</head>

<body>
    <header>
        <div id="logo">
            <h1>Honza<span>Bittner</span></h1>
            <small>webdeveloper</small>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="aboutme.html">About&nbsp;Me</a></li>
                <li><a href="skills.html">Skills</a></li>
                <li><a href="references.html">References</a></li>
                <li class="active"><a class="contact-button" href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <article>
        <header>
            <h1>Contact</h1>
        </header>

        <section>
            <p>
                <img src="images/email.png" alt="email" class="left"/>
                If you want to tell me something, send me an email at <strong>hobi (at sign) hobi (dot) com.</strong>
            </p>
        </section>
        <div class="cleaner"></div>
    </article>

    <footer>
        Created by &copy;HoBi 2021 for <a href="https://itnetwork.sk">itnetwork.sk</a>
    </footer>
</body>
</html>

Zmenili sme titulok v hlavičke stránky, nadpis v hlavičke článku a nastavili triedu aktivni položke Kontakt v menu.

Obrázku vo vnútri článku sme ešte pridali triedu left pre jeho zarovnanie naľavo od textu. Toto správanie dosiahneme pomocou vlastnosti float, čím z obrázku urobíme plávajúci obsah. Na "vyčistenie" float používame <div> s triedou cleaner. To už poznáme z lekcie Štýlovanie hlavičky HTML stránky a flexbox.

Pripíšme si teda do CSS súboru nový selektor:

.left{
    float: left;
}

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ť.

Vytvorte si vlastný MailForm pomocou odkazu vyššie, aby vám správy chodili na email, ktorý máte vyplnený v profile. Nekopírujte kód MailFormu z riešenia k tejto lekcii, je to iba ukážka vloženia a správa tak nepríde na váš email!

Po vytvorení formulára získame kód, ktorý si vložíme do nášho HTML súboru contact.html na koniec elementu <section>:

<section>
    <p>
        <img src="images/email.png" alt="email" class="left"/>
        If you want to tell me something, send me an email at <strong>hobi (at sign) hobi (dot) com or use the form below.</strong>
    </p>
    <p class="centered">
        <iframe frameborder="0" scrolling="no" width="500px" height="220px" src="http://www.itnetwork.cz/service/mail_form.php?hash=kod-vaseho-mailformu">
               <!-- ZDE SE MUSÍ VYMĚNIT LINK!!!! -->
        </iframe>
    </p>
</section>

Všimnite si použitie našej triedy centered na vycentrovanie rámca so službou. Tag <iframe> je pre nás nový, umožňuje do stránky vložiť rámec s inou podstránkou. Dôležitý je najmä atribút src, kam umiestňujeme adresu podstránky. Tag <iframe> (ako inline frame - riadkový rámec) nie je na rozdiel od elementov <frameset> a <frame> nevalidný a môžeme ho používať.

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

Contact Me

contact.html

Web v aktuálnom štádiu nájdete ako vždy na stiahnutie v prílohe.

V budúcej lekcii, Štylovanie tabuliek v HTML a CSS, upravíme sekciu zručnosti a budeme štylovať tabuľku.

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š.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 3774x (2.28 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

2 hlasov

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

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity