Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akci až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
discount 30 + hiring

Lekce 16 - Stylování tabulek a galerie fotek v HTML a CSS

V minulé lekci, Meta tagy, tvorba podstránek a kontaktní formulář, jsme si představili meta tagy a začali dokončovat jednotlivé podstránky.

Dnes v HTML/CSS tutoriálu dokončíme web kompletně.

Dovednosti

Stránku Dovednosti již máme z části připravenou z prvních dílů seriálu. Opět ji upravíme tak, aby v ní byl vložený celý layout, jako jsme to již udělali se stránkou kontakt.html.

Hlavička <head> stránky dovednosti.html bude vypadat takto:

<head>
    <meta charset="utf-8" />
    <meta name="description" content="Mé dovednosti, mezi které patří programování v Javě, Pascalu a HTML" />
    <meta name="keywords" content="programátor, hobi, dovednosti, java, html, pascal" />
    <meta name="author" content="HoBi" />
    <link rel="shortcut icon" href="obrazky/ikona.ico" />
    <link rel="stylesheet" href="styl.css" type="text/css" />
    <title>Dovednosti</title>
</head>

Dále na začátek elementu <body> přidáme <header> s logem a navigačním menu <nav>. V navigačním menu nezapomeneme přiřadit třídu aktivni tagu <li> s odkazem právě na dovednosti.html:

<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 class="aktivni"><a href="dovednosti.html">Dovednosti</a></li>
            <li><a href="reference.html">Reference</a></li>
            <li><a class="kontakt-tlacitko" href="kontakt.html">Kontakt</a></li>
        </ul>
    </nav>
</header>

Pod výše přidaný <header> vložíme článek <article>, jehož hlavním obsahem bude naše již vytvořená tabulka s dovednostmi. Tuto tabulku tedy převedeme do tagu <section> a článku ještě nastavíme nadpis <header>:

<article>
    <div id="centrovac">
        <header>
            <h1>Dovednosti</h1>
        </header>

        <section>
            <table>
                <tr>
                    <td>
                        <img src="obrazky/html.png" alt="HTML" />
                    </td>
                    <td>
                        <img src="obrazky/java.png" alt="Java" />
                    </td>
                    <td>
                        <img src="obrazky/pascal.png" alt="Pascal" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <h2>HTML</h2>
                        <p>S HTML začínám a umím vytvořit jednoduché webové stránky, jako jsou tyto.</p>
                    </td>
                    <td>
                        <h2>Java</h2>
                        <p>Javu se učím z tutoriálů na itnetwork.cz, dokáži tvořit jednoduché konzolové i okenní aplikace a programovat objektově.</p>
                    </td>
                    <td>
                        <h2>Pascal</h2>
                        <p>Pascal nás učí ve škole, ale raději se učím moderní jazyky z ITnetwork.</p>
                    </td>
                </tr>
            </table>
        </section>
    </div>
</article>

Pozor, <div> s ID centrovac nesmí obsahovat třídu domu-article, jako to má hlavní stránka index.html. Tato třída by nám z tohoto elementu <div> udělala mřížku, což nechceme.

Stránce na konec <body> ještě přidáme také <footer> stejně, jako ho již máme na stránkách předtím:

<footer>
    Vytvořil &copy;HoBi 2021 pro <a href="https://itnetwork.cz">itnetwork.cz</a>
</footer>

Stylování tabulky

Protože již známe CSS trochu lépe, tabulku si ostylujeme. Jako první ji dáme nějaké ID, abychom ji mohli v CSS jednoznačně vybrat. Nabízí se dovednosti:

<table id="dovednosti">

Hlavním problémem je, že nemáme sloupce (buňky) stejně široké. Že to tak vypadá je jen náhoda, jelikož text je ve všech buňkách podobně dlouhý. Připíšeme-li něco do jedné z buněk, buňky se rozšíří. Každé buňce proto nastavíme šířku na 33% a nějaký padding.

Do CSS souboru si tedy přidáme nový selektor:

#dovednosti td {
    width: 33%;
    padding: 10px;
}

Výsledek:

Dovednosti
dovednosti.html

Jak vidíte, obsah v buňce tabulky se ve výchozím nastavení centruje svisle. To se nám nehodí, protože bychom chtěli mít nadpisy ve stejné výšce, zarovnané shora. To nastavíme opět všem buňkám pomocí CSS vlastnosti vertical-align s hodnotou top:

#dovednosti td {
    width: 33%;
    padding: 10px;
    vertical-align: top;
}

Naše stránka nyní vypadá takto:

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

K zarovnání na střed použijeme hodnotu middle, k zarovnání dolů bottom. Tato vlastnost funguje pouze u tabulek, v ostatních elementech se bohužel takto jednoduše centrovat nedá. Opět narážíme na nechvalně proslulé centrování v CSS.

Neukazovali jsme si ještě, jak se styluje rámeček tabulky. Je to velmi podobné jako stylování rámečku ostatních elementů, avšak tabulka má rámeček dvojitý. Zkusme si opět v tom samém selektoru nastavit rámeček všech buněk na šedý, 1px tlustý:

#dovednosti td {
    width: 33%;
    padding: 10px;
    vertical-align: top;
    border: 1px solid gray;
}

Výsledek po nastavení rámečku vypadá takto:

Dovednosti
dovednosti.html

Vidíme, že to není úplně to, co bychom chtěli. Rámečky slijeme pomocí vlastnosti border-collapse, nastavené na hodnotu collapse. Tu však nenastavíme buňkám, ale celé tabulce:

#dovednosti {
    border-collapse: collapse;
}

Výsledek již vypadá dle očekávání:

Dovednosti
dovednosti.html

Poslední vadou na kráse naší tabulky jsou nevycentrované obrázky v prvním řádku. Budeme chtít vycentrovat obsah jen tohoto jednoho řádku a zbytek řádků nechat zarovnaný doleva (dlouhý vycentrovaný text je špatně čitelný). Možností je více, a tou nejjednodušší je dát řádku naši třídu centrovany:

...
<table id="dovednosti">
    <tr class="centrovany">
        ...

Dokončili jsme tedy další podstránku, celý její kód naleznete v příloze na konci článku.

Úprava index.html

Aby stránka index.html souhlasila s požadovaným designem, tak si z jejího článku ještě odebereme odkaz na nově upravenou stránku s dovednostmi. Element <section> upravíme do následující podoby:

<section>
    <p>
        Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.
    </p>

    <p>
        Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT.
        Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce</a>.
    </p>

    <p>
        Rád čtu a někdy (hlavně v létě) i sportuju.
    </p>

    <p>
        Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!
    </p>

    <p class="tlacitko-odstavec">
        <a href="reference.html" class="reference-tlacitko">Moje reference</a>
    </p>
</section>

Reference

Na stránce s referencemi si vytvoříme malou galerii obrázků s aplikacemi a weby, které jste vytvořili. Galerie obrázků se vám určitě hodí nejen na obrázky vašich prací, ale třeba i na fotky a podobně. Já si půjčím obrázek tohoto webu a místní ukázkové aplikace v Javě a Pascalu. Použiji tedy tyto 3 obrázky:

Kalkulačka v Javě
Miny v Pascalu
Web v HTML a CSS

Obrázky si uložíme do naší složky /obrazky.

Galerie obrázků

Začněme tím, že si ke každému obrázku vytvoříme miniaturu. Bylo by velkou chybou zobrazovat náhledy jako velké obrázky, jelikož se dlouho stahují. Proto si ve svém oblíbeném grafickém editoru (GIMPu, PhotoShopu, ...) zmenšete své obrázky, já jsem všem nastavil výšku na 128px a k jejich názvu jsem připojil _nahled. Zmenšené obrázky opět uložme do složky /obrazky.

Vytvoření podstránky reference.html

Vytvoříme si podstránku reference.html tak, jako všechny podstránky. Do hlavičky opět vložíme nějaké tagy s metadaty, odkaz na CSS soubor a definici ikony a titulku stránky:

<head>
    <meta charset="utf-8" />
    <meta name="description" content="Aplikace od HoBiho." />
    <meta name="keywords" content="aplikace, programátor, HoBi, reference" />
    <meta name="author" content="HoBi" />
    <link rel="shortcut icon" href="obrazky/ikona.ico" />
    <link rel="stylesheet" href="styl.css" type="text/css" />
    <title>Reference</title>
</head>

V <body> budeme opět mít <header>, <article> a <footer>. Část <header> si nakopírujeme např. z index.html a nezapomeneme položce stránky, na které se vyskytujeme (Reference) přiřadit třídu aktivni:

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

    <article>
    </article>

    <footer>
        Vytvořil &copy;HoBi 2021 pro <a href="https://itnetwork.cz">itnetwork.cz</a>
    </footer>
</body>

Část <article> bude mít taktéž stejnou strukturu jako zbylé stránky. Do <header> vložíme nadpis a do <section> hlavní obsah stránky:

<article>
    <div id="centrovac">
        <header>
            <h1>Reference</h1>
        </header>

        <section>
            <p>Níže naleznete ukázky mých dosavadních prací. Mohu vám nabídnout tvorbu podobného softwaru na zakázku.</p>

            <div id="reference">
                <a href="obrazky/kalkulacka_java.png" title="Kalkulačka v Javě">
                    <img src="obrazky/kalkulacka_java_nahled.png" alt="Kalkulačka v Javě" />
                </a>
                <a href="obrazky/miny_pascal.png" title="Miny v Pascalu">
                    <img src="obrazky/miny_pascal_nahled.png" alt="Miny v Pascalu" />
                </a>
                <a href="obrazky/hobi_web.jpg" title="Web v HTML a CSS">
                    <img src="obrazky/hobi_web_nahled.jpg" alt="Web v HTML a CSS" />
                </a>
            </div>
        </section>
    </div>
</article>

Dali jsme si pozor, aby <div> s ID centrovac neobsahoval třídu domu-article.

V kódu jsme si vytvořili <div>, ve kterém jsou poskládané za sebou jednotlivé náhledy. Každý náhled odkazuje na originální (velký) obrázek. U odkazu jsme nastavili atribut title, ten můžeme nastavit každému prvku v HTML. Jeho text se zobrazí jen tehdy, když na element najedeme kurzorem myši:

Reference
reference.html

Stylování galerie

Trochu naši galerii vylepšíme přes CSS. Určitě jste si všimli připraveného ID reference. Nastavíme obrázkům v galerii border, padding, margin a stín:

#reference img {
    border: 1px solid gray;
    padding: 6px;
    box-shadow: 3px 3px 6px #999999;
    margin-right: 6px;
}

Nic by nás zde nemělo překvapit. S těmito vlastnostmi jsem se již setkali.

Naše galerie nyní vypadá takto:

Reference
reference.html

Pokud na náhled klikneme, zobrazí se velký obrázek. Efekt je ale poněkud ošklivý, celá stránka zmizí a obrázek je nevzhledně umístěn v levém horním rohu, na prázdné stránce. Ukážeme si, jak to vyřešit lépe.

Lightbox

Lightbox je webový doplněk, napsaný v jazyce JavaScript. Právě JavaScript se používá na dynamické prvky moderních webů, jako je např. vyskakovací okno s galerií obrázků, kterou jistě dobře znáte z mnoha webů. Přes JavaScript je také např. řešeno navigační menu zde na ITnetwork.

Projekt je zadarmo a dostupný na adrese https://github.com/…h/lightbox2/. Stáhnout si ho můžeme přes zelené tlačítko s textem Code. Po kliknutí na tlačítko se nám rozbalí menu a úplně na konci seznamu je ke stažení archiv ZIP (Download ZIP). Soubory, které potřebujeme, jsou ve složce dist/. V ní jsou složky js/, images/ a css/, které rozbalíme a vložíme do složky s naším webem. Podobně, jako musíme CSS připojit k HTML, musíme k HTML připojit i tento skript, aby se na stránce spustil. Do hlavičky stránky <head> vložíme následující odkazy na potřebné skripty a i na CSS soubor lightboxu:

<link rel="stylesheet" href="styl.css" type="text/css" />
<link rel="stylesheet" href="css/lightbox.min.css" type="text/css" media="screen" />
<script src="js/lightbox-plus-jquery.min.js"></script>
<script src="js/lightbox.min.js"></script>

Nyní přidáme všem odkazům v galerii atribut rel s hodnotou lightbox[reference]:

<div id="reference">
    <a href="obrazky/kalkulacka_java.png" title="Kalkulačka v Javě" rel="lightbox[reference]">
        <img src="obrazky/kalkulacka_java_nahled.png" alt="Kalkulačka v Javě" />
    </a>
    <a href="obrazky/miny_pascal.png" title="Miny v Pascalu" rel="lightbox[reference]">
        <img src="obrazky/miny_pascal_nahled.png" alt="Miny v Pascalu" />
    </a>
    <a href="obrazky/hobi_web.jpg" title="Web v HTML a CSS" rel="lightbox[reference]">
        <img src="obrazky/hobi_web_nahled.jpg" alt="Web v HTML a CSS" />
    </a>
</div>

Stránku obnovte a klikněte na náhled. Výsledek je velmi působivý:

Pokud přidáte na kteroukoli stránku do hlavičky potřebné skripty a poté na nějaký odkaz na obrázek použijete rel="lightbox", zobrazí se v LightBoxu. Pokud navíc uvedete jméno galerie v hranatých závorkách, bude LightBox tyto obrázky chápat jako z jedné galerie a nechá vás mezi nimi přecházet pomocí myši nebo šipek.

Podstránku O mně si jistě již zvládneme dokončit sami. Můžeme si do ní napsat pár slov o tom, co nás k programování přivedlo 🙂 Tímto tedy máme web hotový. Dnešní výsledek máte jako vždy ke stažení v příloze článku.

V následujícím cvičení, Řešené úlohy k 14.-16. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.


 

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

 

Předchozí článek
Meta tagy, tvorba podstránek a kontaktní formulář
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Řešené úlohy k 14.-16. lekci HTML a CSS
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
282 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

 

 

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

Avatar
Jaroslav Drobek:28. března 7:20

Takže jsem věnoval hodinu (a jak se ukázalo později, věnoval jsem ji ITnetwork, potažmo autorovi těchto lekcí) a našel jsem důvod špatného rozložení - viz můj předchozí komentář.

Našel jsem ho v 15. lekci -> "Vytvoření podstránek" -> "Kopírování" -> "layout jednoduše nakopírujeme pro každou podstránku" - tím se dostanete do problému, protože hlavní stránka používá v layoutu class="domu-article", což podstránky používat nemají. Upozorňoval jsem na to již v hodnocení 15. lekce.

 
Odpovědět
28. března 7:20
Avatar
Adam Ingr
Člen
Avatar
Adam Ingr:27. května 14:11

Příklady uvedené v textu neodpovídají zdrojovému kódu

 
Odpovědět
27. května 14:11
Avatar
Blanka Svobodová:16. června 19:21

půlka věcí nevysvětlená, koukám na to jako blázen...a rozhodně nebudu schopná vytvořit tento kód z hlavy s tím, že vím, co která položka znamená a proč tam musí být....a teď nemyslím samotné JS

Odpovědět
16. června 19:21
Kdy, když né teď. Kdo, když né já?
Avatar
Stanislav Krajči:16. června 22:02

do footer (nejlépe vytvořit třídu) :

width: 100%
position: absolute
bottom: 0

..mělo by ti přilepit footer ke dnu. Hele tady je to v celém projektu s dírami, ale je fajn si udělat odstup a juknout někam jinam, zdrojů jsou stovky. Good luck!

 
Odpovědět
16. června 22:02
Avatar
Ondřej Raška:24. června 19:40

Tak jsem se opět po pár minutách vytočil, aplikuji přídavky do kódu. Můj výsledek ale neodpovídá výsledku zdejšímu. Tak opět trávím doslova hodiny hledáním chyb, abych nakonec zjistil, že jsem žádne neudělal.

Problém je, když mezi lekcemi učitel udělá jak v HTML tak CSS kódu změny, ale studentovi o nich neřekne!!!

Při backtrakování změn výsledky starších lekcí, jsem pak zjistil, že některé změny prezentované v lekci 16 jasou již v kódu lekcí 15 a 14. atd. atd.

 
Odpovědět
24. června 19:40
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Daniel Vajdík:7. července 21:04

i když od desáté lekce, to vlastně jen kopíruji tak ani tak ta stránka nevypadá tak jak je tu ukázaná a to to dělám krůček po krůčku a čtu každý článek i 3x a jsem z toho totalní jelen... jestli je tohle pro úplné lamy, bylo by dobry opravdu třeba video protože tohle je šílený... no nevím rekvalifikace....

 
Odpovědět
7. července 21:04
Avatar
Odpovídá na Daniel Vajdík
Dominik Paulík:20. července 18:02

Též jsem na to hodně zvědavý co rekvalifikace ... Tahle lekce je opravdu špatně vysvětlena a přeskakuje se.

 
Odpovědět
20. července 18:02
Avatar
Anna Lorencová:4. srpna 22:51

Nedostatečně vysvětlené návaznosti. Pro začátečníka jako jsem já je to časově velmi náročné-polovinu věcí musím dohledávat externě, abych vlastně pochopila, co znamená to, co se snažím vlastně dělat. Plus teda pro člověka jako já v posledním kroku, kdy je řečeno vložit do hlavičky lighbox defakto vyplynulo do indexové hlavičky, pak mi teprve došlo, že je to blbost, že je myšlený soubor reference. Chápu, že to má být účelné,k zamyšlení.Pro začátečníka je ale to matoucí.

 
Odpovědět
4. srpna 22:51
Avatar
Dominika Matějíčková:6. srpna 1:01

Jakožto začátečnice v programátorském kurzu na PYTHON nevidím smysl zapletení jazyku JavaScript.

 
Odpovědět
6. srpna 1:01
Avatar
Jaroslav Toninger:17. srpna 12:11

Tohle mě bavilo, s odstupem zpětně na předchozí lekce se člověk v tom lépe a lépe orientuje, ale musíte prostě zkoušet a trochu experimentovat, je to taková trochu experimentální grafika, jak to asi bude vypadat když tam přidám tenhle prvek. Pořád mi tu ale chybí dost věcí, jako v předešlých lekcích, které člověka zmatou a musí nad nimi přemýšlet, proč to asi tak autor myslel. I tak moc děkuji.

 
Odpovědět
17. srpna 12:11
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 111. Zobrazit vše