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 800 x 600 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 http://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 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>
...

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)