101 - 054. Chief (HTML - obrazek)
Aby listing nebyl jen o textu (i kdyz ted uz i samotny text muze vypadat uhlazene, viz
HTML - text), urcite driv nebo pozdeji budeme chtit vlozit do listingu obrazek. A jeste pred tim, nez tak budeme moct ucinit, musime tento obrazek umistit nekam na web. A to bud primo na stranku prave vytvareneho listingu (pomoci volby "nahrat obrazky"), nebo na jakekoliv jine pristupne misto z webu (napr. vlastni webove stranky, fotoalba apod.). Timto krokem ziskame adresu obrazku (tzv. URL), kterou nasledne vyplnime do jedineho povinneho parametru neparoveho tagu pro vlozeni obrazku
<img>.
Timto povinnym parametrem je prave adresa zdroje obrazku (jeho URL), ktera se zapisuje nasledujicim zpusobem:
<img src="http://img.geocaching.com/cache/ba72c8ef-1894-44e6-9ba7-c8851f85f18a.jpg" />
Krome jednoho povinneho parametru muzeme obrazku nastavit i spoustu jinych vlastnosti (a opet si zde vypomuzeme CSS stylem), napr. pri teto konstrukci HTML kodu:
<img src="http://www.locusmap.eu/app/extra/Dalmatin.jpg" style="border: 5px solid red; border-top: 5px double blue; width: 150px;" />
Obalenim celeho obrazku do konstrukce odkazu (
<a href=""> </a> viz
HTML - odkaz),
bude vysledny obrazek vypadat takto (navic se po kliknuti otevre obrazek v puvodni velikosti):
Pomoci jednotlivych atributu obrazku jsme tak schopni nastavit napr. velikost, barvu a styl oramovani, definovat jeho sirku a vysku (bud v % nebo v px), zarovnani a nasledne obtekani okolnim textem atd. Vyse uvedene je jen zlomek toho, co nam dovoluji CSS styly provadet nejen s obrazky, ale obecne s jakymkoliv elementem HTML (viz
www.jakpsatweb.cz - Prehled vlastností CSS).
Jak na kes:
Obrazek nejen ze rekne vice nez tisic slov, ale navic nam umoznuje sdelit i na prvni pohled neviditelne informace.
