html5

Vložte svůj text...

HTML5 a CSS3 tvorba webu

1. díl - Úvod do HTML a váš první web

2. díl - Základní HTML tagy

3. díl - Obrázky a odkazy v HTML

Pokud chcete na webu použít své fotografie, kde velikost souborů s obrázky je zbytečně veliká pro zobrazení na webu, doporučuji převzorkování (změnu velikosti) na cca 1200 x 900 px. Výsledná velikost souboru s obrázkem je pak cca 100 kB. Některé programy na úpravu fotografií umí tzv.dávkovou konverzi např. program XnView, který je volně stažitelný. Tento program kromě dávkové konverze umí i dávkové přejmenování.

Pokud stahujete obrázky z internetu, neměl by být problém s jejich velikostí.

Cvičení k 1.-3. lekci HTML a CSS

4. díl - Tabulky v HTML

5. díl - Seznamy v HTML a zopakování tabulky
6. díl - Úvod do CSS (kaskádových stylů)
7. díl - Základní CSS selektory a vlastnosti
8. díl - Třídní selektor a stylování textu v CSS
9. díl - Layout a pozadí v HTML
10. díl - Plovoucí obsah v HTML
11. díl - Rámeček, stín a boxmodel v CSS
12. díl - Navigační menu, patička a HTML entity
13. díl - Stylování hlavičky HTML stránky
14. díl - Fixní menu a pozicování v CSS
15. díl - Tvorba podstránek a kontaktní formulář
16. díl - Stylování tabulek a galerie fotek v HTML a CSS

Lightbox - oprava

Projekt je zadarmo a dostupný na adrese https://lokeshdhakar.com/...ts/lightbox2. Použití je velmi jednoduché, stáhněte si archiv s projektem a rozbalte ho a ze složky dist si složky js, images a css zkopírujte do složky s vaší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 vložíme následující odkazy na potřebné skripty a i na CSS soubor lightboxu:

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

Pak přidejte za konec section toto:

<script src="js/lightbox-plus-jquery.min.js">
</script>

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

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

V souboru stylů *.css je nutno mít selektor:

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

Stránku obnovte a klikněte na náhled.

17. díl - Nahrání webu na internet

18. díl - Přidání favicon

19. díl: Rozbalovací menu pouze pomocí CSS (zdrojový kód)

18. díl - Přidání favicon

Favicon nebo také Favicon.ico je malý obrázek, který se zobrazuje v internetovém prohlížeči vedle titulku stránky. Napomáhá uživatelům rozpoznat stránky a pravidelní návštěvníci dokáží stránku rozpoznat už jen díky tomuto malému obrázku. Favicon tedy pomáhá s tvorbou značky a z toho vycházející důvěryhodnosti webu.

Proč byste měli na svůj web přidat favicon?
Jak jsme již zmínili dříve, favicon pomáhá návštěvníkovi identifikovat webové stránky. Jak může vidět na obrázku níže, v případě, že má uživatel otevřeno více oken v prohlížeči a nevidí celý titulek webu, pomůže mu favicon s identifikací webu.

Jak vytvořit favicon?

Favicon je malý obrázek ve tvaru čtverce. Ideální velikost je 32 x 32 px nebo 16 x 16 px. Vytvořit ho můžete například v programu Gimp, Photoshop nebo jakémkoliv jiném grafickém editoru. Pro snadnější tvorbu je dobré začít vytvářet obrázek ve větším rozlišení, například 128 x 128 px, a až poté ho zmenšit. Obrázek uložte jako PNG.

Ačkoliv většina moderních prohlížečů zobrazuje favicon jako .png soubor, tak starší verze Internet Exploreru to řeší jinak. V rámci kompatibility doporučuji udělat kopii favicony a zmenšit ji na velikost 16 x 16 px a uložit ji jako soubor ve formátu ICO. Celou práci zvládne online favicon generátor Dynamic Drive.

Přidání favicon na WordPress web

Na hosting pomocí FTP klienta nahrajte do základního adresáře WordPressu vytvořený obrázek. Poté běžte do složky vaší aktivní šablony a do souboru header.php vložte následující kód:

12 <link rel="icon" href="https://www.wplama.cz/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="https://www.wplama.cz/favicon.ico" type="image/x-icon" />

Nezapomeňte změnit URL webu.

Pokud nechcete zasahovat do souborů šablony webu nebo jste daný soubor nenašli, můžete využít plugin Insert Headers and Footers. Tento plugin umožňuje vložení kódu do hlavičky webu z administračního prostředí WordPressu.

Plugin nainstalujte a aktivujte. Poté běžte do Nastavení -> Insert Headers and Footers a do sekce pro hlavičku vložte zde kód zobrazený výše.

Jestliže nechcete vůbec pracovat s FTP, můžete vše udělat pomocí pluginu Custom Favicon.

19. díl: Rozbalovací menu pouze pomocí CSS (zdrojový kód)

Dnešní "užitečný kód" vám ukáže jak za pomoci HTML a CSS vytvořit jednoduché rozbalovací menu. Uvedený příklad je jen základ kódování, doporučuji ještě upravit vzhled, nebo přidat další grafické prvky. Rozbalovací menu jen za pomoci CSS je ideálním způsobem jak vytvořit kvalitní menu bez použití dalšího scriptování.

Nejdříve vytvořte základní strukturu HTML elementů. Celé menu je uvnitř tagu nav. Jednotlivé záložky jsou tvořené jako seznam (ul) a položky seznamu (li). V položce, která se má rozbalovat je další vnořený seznam. Celý HTML kód vypadá následovně:

<!DOCTYPE html>
<html lang='cs'>
 <head>
 <title></title>
 <meta charset='utf-8'>
 <link rel="stylesheet" href="styl.css" type="text/css" />
 </head> 

 <body>
 <nav>
<ul>
<li> <a href="#">Odkaz 1</a> </li>
<li> <a href="#">Odkaz 2</a>
<ul>
<li> <a href="#">Pododkaz 1</a> </li>
<li> <a href="#">Pododkaz 2</a> </li>
<li> <a href="#">Pododkaz 3</a> </li>
</ul>
</li>
<li> <a href="#">Odkaz 3</a> </li>
<li> <a href="#">Odkaz 4</a>
<ul>
 <li> <a href="#">Pododkaz 1</a> </li>
 <li> <a href="#">Pododkaz 2</a> </li>
 <li> <a href="#">Pododkaz 3</a> </li>
 </ul>
</li>
<li> <a href="#">Odkaz 5</a> </li>
</ul>
</nav>
</body>
</html>

Dalším krokem je vytvoření stylu pro menu. Popis jednotlivých CSS vlastností najdete v předchozích článcích zaměřených na CSS. Styly budou vypadat takto:

nav ul li ul { 
        display:none;
                  }
nav ul li {
        float:left;
        list-style:none;
        width:150px;
        height:30px;  
        background:#02517F;
        text-align:center;
        padding-top:12px;
        border-right:2px solid white;
               }

nav ul li:hover {
        background: #466A7F;
        text-align:center;
                         }
nav ul ul {
        margin-top:10px;
                }
nav ul li ul li {
        margin-left:-40px;
                     }
nav ul li:hover > ul {display:block;}
nav ul li ul li {background: #49BBFF;}
nav ul li ul li:hover {background: #466A7F;}

Ukázka výsledku

Zásady pro tvorbu webových stránek

Doporučené zásady pro tvorbu www stránek:

1. názvy všech souborů a složek malými písmeny bez diakritiky a mezer

2. všechny soubory www stránek (*.html, *.css...) ukládám do jedné složky

3. všechny soubory s obrázky ukládám do podsložky této složky např. obr, img...(dopředu upravím velikost obrázků na cca 100 kB)

4. všechny ostatní soubory (např. *.doc, *.xls, *.ppt, *.avi...) ukládám do jiné podsložky této složky např. ostatni

5. hlavní soubor stránek pojmenuji index.html

6. všechny tagy píši malými písmeny

7. při tvorbě nového souboru nejdřív uložím soubor, pak vkládám obrázky a tvořím odkazy (kontroluji relativní cestu)

Nadpis textu

Váš text začíná právě zde. Klikněte a můžete začít psát. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem.