Avtor: -primož-
23.08.09
| HTML - Slike |
| HTML vodiči |
 Vse o slikah v HTMLju!
Slike so pomemben del vsake spletne strani. Spletno stran polepšajo in imajo velik vpliv na obiskovalce vaše spletne strani.
HTML - Slike po poglavjih:
- Kako vstaviti sliko v HTML dokument
- Določitev velikosti slike - Optimizacija slike (title, alt) - Obroba - hspace, vspace - hover efekt Priporočam:
1. Vstavljanje slike
V HTML dokument vstavimo sliko z značko <img> v kateri je atribut src="/ ". (POZOR: slika je v isti mapi, kot HTML datoteka. O absolutnem in relativnem naslavljanju si preberite tukaj: naslavljanje.) HTML primer 1: 2. Velikost slike
Neglede na to ali je slika, ki jo boste uporabili majhna ali velika, lahko sami določite velikost slike. To vam sicer odsvetujem, toda včasih drugače ne gre. To lahko določite z atributoma height=" " in width=" ". Vrednost se največkrat poda v pikslih (px). HTML primer 2: <html>
<head> </head> <body> <img src="/moje_mesto_logo.png" height="500px" width="700px"> </body> </html> Prikaz uporabe atributa height=" " in width=" " 3. Optimizacija slike
Za optimizacijo slike sta pomembna atributa title=" " in pa alt=" ". Z atributom title=" " določite ime slike, v atribut alt=" " pa vstavite ključne besede, ki opisujejo sliko. HTML primer 3:
<html>
<head> </head> <body> <img src="/moje_mesto_logo.png" title="Moje-Mesto.com - logo" alt="mesto,moje-mesto.com, logo, stolpnice"> </body> </html> Prikaz optimizirane slike! Če ste šli z miško čez sliko ste lahko opazili, da se je pojavil okvirček v katerem je prikazano ime slike. 4. Obroba a.k.a. border
Z obrobami poudarimo sliko in dopolnimo izgled naše spletne strani. Za določitev obrobe vam bom pokazal atribut style=" ", ki v bistvu spada v CSS kategorijo toda tako boste imeli več možnosti, da do potankosti določite obrobo. Izgled: style="border: a b c;" Pojasnilo: a – velikost obrobe (npr. 1px, 3px)
b – stil obrobe (npr. solid, double) c – barva obrobe (npr. #FF0000) Ne pozabite na podpičje ( ; ) ! HTML primer 4:
<html>
<head> </head> <body> <img src="/moje_mesto_logo.png" style="border: 5px dotted #FF0000;"> </body> </html> Prikaz obrobe! *Seznam oblik obrob si lahko pogledate tukaj: seznam obrob. 5. Hspace in Vspace
Ta dva atributa nimata nič opraviti z vesoljem  . Nadzirata odmik od slike in sicer horizontalni in vertikalni odmik. hspace = odmik levo in desno vspace = odmik zgoraj in spodaj HTML primer 5:
6. Hover efekt
S tem mislim CSS kodo, ki stori to, da ena slika zamenja drugo, ko greste z miško čez. Kako se to stori si oglejte tukaj: CSS hover S tem lahko izdelujete lepše in bolj dinamične menije. Zaključek:
Vodič vam je pokazal, kako vstaviti sliko v HTML dokument (<img src="/ ">. Nato ste se naučili, kako določiti višino in širino slike z atributoma height=" " in width=" ". Naučili ste se tudi, kako sliki določiti atribute kot so hspace, vspace, title in alt. Upam, da ste si dobro ogledali kodo za obrobo, saj obroba mnogokrat pripomore k lepšemu izgledu strani. Uživajte! *Spremljajoče .html datoteke lahko najdete med Prenosi.
|
| Sorodni vodiči | |
Moje-Mesto.com
Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.
