4#Hodina – Obrázky a boostrap

Budeme potřebovat HTML s připojeným Boostrapem, CSS a JS (opět vše propojené).

Obrázky

Na začátek budeme potřebovat obrázek. S ohledem na to, že nechci, aby jsme ztráceli čas hodím jeden sem. S tím můžete pracovat:

pic

Důležité je si ohlídat název souborů. Stejně jako všechny soubory, i u obrázků nesmí být v názvu mezera, háčky ani čárky. Velká písmena sice budou fungovat, ale zbytečně si tím budete komplikovat kód. Takže bych nepoužíval ani velká písmena.

Když máte obrázek stažený musíme ho uložit na správné místo. Jedno důležité pravidlo na začátek k organizaci při vytváření stránky. Všechny HTML soubory by měly být na jedné úrovni (v jedné složce) jinak se vám bude komplikovaně cestovat mezi jednotlivými soubory (hlavně při cestě o úroveň výše). Samozřejmě nic není nemožné, ale muselo použít jiné adresování. Adresování jsou naštěstí jen dva druhy a to:

Absolutní adresování:

Toto se nepoužívá tak často, ale je to asi jedné řešení jak se dostat o úroveň výše v adresářové struktuře. V tomto způsobu adresování musíte psát celou cestu k souboru. V počítači by taková cesta vypadala třeba takto:

C:\Users\MrSenpai\Desktop\uploads\2016\11\dafox.jpg

Tento způsob adresování je samozřejmě velmi nepraktický. V momentě si dáte svůj projekt na flash disk a otevřete jej na jiném pc nebude vám fungovat jedný obrázek/odkaz a nepřipojí se vám CSS/JS. Jediné místo, kdy takovýto způsob adresování můžete použít, jsou weby, které jsou již online. Takže máte přidělenou adresu a můžete vytvořit něco takového:

https://senpai.cz/wp-content/uploads/2016/11/pic.jpg

Tímto způsobem se skutečně dá vytvořit webová stránka, však v momentě, kdy změníte doménu, budete muset změnit i celý systém odkazů, obrázků a všeho. Naštěstí máme druhý způsob adresování

Relativní adresování:

Toto je adresování, na které narazíte na každé rozumné webové stránce. Jedná se o adresování, kde výchozím bodem je soubor, ze kterého odkazujeme (na obrázek nebo třeba další stránku). Takže když budeme chtít udělat odkaz ze souboru index.html na odkaz o-nas.html , které jsou spolu v jedné složce bude odkaz obsahovat pouze jméno druhého souboru:

001

002

Obrázky ale většinou chceme mít roztříděné ve složkách, stejně tak například naše JS soubory a CSS soubory. Tak si může vytvořit složkovou strukturu, tak aby jsme měli ve všem později pořádek. Vytvoříme si složku na JS s názvem “javascript”, složku na CSS s názvem “styles” a složku na obrázky s názvem “img” ve které bude složka roku a v té bude složka měsíce (číslo). Například img -> 2016 -> 11. V případě prvních 9 měsíců doporučuji zápis s nulou na začátku kvůli řazení (01, 02, 03, …). Takže naše vzorová složková struktura může vypadat třeba takto:

003

004

Když budete nyní vytvářet propojení na náš “main.js”, který máme uložený ve složce javascipt, bude to vypadat takto:

<script src=”javascript/main.js”></script>

Podobně upravíme i CSS link

<link rel=”stylesheet” type=”text/css” href=”styles/main.css”>

V obou těchto případech bereme jako výchozí bod soubor index.html a pouze zapisujeme složky, skrz které procházíme. O něco komplikovanější to bude u našeho obrázku. První věc, kterou si u každého obrázku musíte ověřit je jeho formát a tvar jakým má zapsanou příponu. Nejběžněji se na webu stále setkáte s formátem jpg, ale zápis přípony se může lišit. Může to být .jpg, .jpeg, .JPG. V každém případě vy musíte vědět jak je to u vašeho obrázku. Nejsnadnější je, pokud si ve svém pc zapnete zobrazení přípony souborů.

Jak zobrazit koncovky souborů

W10

005

W7

  1. Spusťte Průzkumníka Windows. To provedete otevřením libovolné složky.
  2. Klikněte na možnost Uspořádat.
  3. Klikněte na položku Možnosti složky a hledání.
  4. Klikněte na kartu Zobrazení.
  5. Přejděte dolů na položku Skrýt příponu souborů známých typů a zrušte zaškrtnutí tohoto řádku.Poznámka: Chcete-li přípony názvů souborů zase skrýt, tento řádek znovu zaškrtněte.
  6. Klikněte na tlačítko OK.

zdroj

Druhou možností je podívat se do vlastností obrázku (pravé tlačítko a úplně dole “Vlastnosti”)

006

Když už máme zjištěný formát obrázku můžeme postupně začít plnit TAG img. Jedná se o nepárový tag, takže neexistuje něco jako </img>. Základem je atribut SRC ve kterém budeme odkazovat na zdroj daného obrázku. Další povinnou položkou je atribut ALT. ALT slouží jako alternativní popisek v případě pokud se obrázek nenačte, nebo pokud s webem bude pracovat nevidomý (počítač mu bude číst právě tag ALT). Proto by měl tag popis toho co na obrázku je. V případě obrázku, který je na začátku tohoto příspěvku by byl vhodný alt třeba “Kreslená liška”. V altu není problém mít háčky, čárky a mezery. Tento text se vám i ukáže napsaný pokud se na obrázku na chvíli zastavíte kurzorem. Takže nejjednodušší způsob jak zobrazit obrázek na stránce je:

007

Další atributy, které můžeme přidat je width a height. Pomocí nich můžeme měnit velikost daného obrázku. Zde však může nastat jeden problém a to v momentě když nedodržíme poměr stran, který obrázek původně měl. Prohlížeč totiž obrázek dokáže zobrazit obrázek v takovém rozlišení jaké si budete přát. Problém se špatným poměrem stran vyřeší roztažením nebo protažením obrázku. To si můžete celkem snadno vyzkoušet. S ohledem na to, že naše vzorová liška je přibližně čtverec můžeme si nastavit hodnotu width na 300 a height na 500. Pokud tam nenastavíme žádnou jednotku bude to bráno jako px. Už víme, že PX není nejvhodnější jednotka, ale pro tento příklad to bude dostačující 🙂

008

O něco použitelnější je způsob, kdy definujeme pouze width nebo pouze height. V tom případě si prohlížeč druhé číslo dopočítá tak, aby nedošlo k deformaci obrázku.

Když už máme připojený bootstrap, tak můžeme rovnou přidat nějaké ty class.

Kulaté okraje – .img-rounded

Kruh – .img-circle

Thumbnail – .img-thumbnail

Galerie

Pokud chcete vytvořit něco jako “Galerii obrázků s popisky” tak budete potřebovat pár divů, nějaké ty odkazy a hlavně class thumbnail.

První co budeme potřebovat je uklidit si v našem HTML souborů, ideálně něco jako toto:

009

Prostě v body nic 😉 Důležité je aby nám zůstal bootstrap 🙂

Začneme dělat galerii. To znamená, že si přidáme do body kontejner. Je to základní Bootstrap div do kterého budeme všechno skládat 🙂

<div class=”container”>

</div>

Na začátek si zvolíme kolik sloupců budeme v galerii chtít.  3 Je takové normální číslo. Takže si založíme řádek … další div s class “row” a v něm si uděláme div s class “col-md-4” to je to samotné dělení na 3 sloupce. Náš postup teď vypadá nějak takto:

010

Nyní doplníme do cal-md-4 náš obrázek. S ohledem na to, že nechci se zdržovat stahováním hromady obrázků, použijeme v celé galerie jen jeden. Rovnou si pod obrázek můžeme přidat popisek. Ten se dává do divu caption, ve kterém to musíme mít zabalené v odstavci (p). Výsledek vypadá nějak takto:

011

Když už máme ale náhledové obrázky měli by jsme dovolit uživateli aby mohl obrázek zvětšit. Dnes uděláme jen z obrázku odkaz na obrázek. Not so hard! Stejně jako když děláme z textu odkaz. můžeme i z obrázku udělat odkaz. Stačí nám, když zabalíme obrázek do <a> a jako cíl odkazu dáme obrázek samotný:

012

Také jsem do <a> přidal pro vás novou věc a to “target”. Tím určíme kde se nám má daný obrázek otevřít. Pokud tam doplníte “_blank” otevře se nám obrázek v nové stránce. Nyní máme hotový první obrázek. Aby galerie nějak vypadala, uděláme ještě dvě kopie tohoto obrázku (vše s začátkem divu s class “col-md-4” i s jeho koncem) a pak dvě kopie celé řádky (vše s začátkem divu s class “row” i s jeho koncem).

Nyní máme pěknou galerii 😀

013

Toto budu opět kontrolovat před další hodinou, tedy DATE UNKNOWN ve 22:00!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Share This