Bok svima!!! U ovom ćete članku naučiti kako umetnuti sliku u HTML dokument. Nije uopće teško. Ali prvo bih vam želio dati neke preporuke u vezi sa slikama na web stranici.
Savjet: Kada postavljate slike na web stranicu, nemojte se zanositi animiranim slikama, jer će to odvratiti pažnju čitatelja od najvažnije stvari - teksta. Bolje je koristiti obične slike bez animacije.
Pokušajte koristiti jedinstvene slike na svojim web stranicama. Možete pročitati kako napraviti jedinstvenu sliku, a možete i napraviti prekrasne slike.
Započnimo.
Kako ubaciti sliku u html?
Dakle, kao što sam rekao, ovdje nema ništa komplicirano, dodajte ovaj html kod.
kartinka je naziv slike
jpg je ekstenzija slike. Ekstenzija može biti gif, png, bmp.
Ako se slika nalazi u mapi sa slikama, tada će put do slike biti ovakav:
slike - naziv mape u kojoj se nalazi slika "kartinka.jpg".
Ako je slika na drugom mjestu, kod će biti ovakav:
https://www.site je adresa stranice.
Primjer :
Da biste to učinili, jednostavno stavite sliku između elementa veze:
Atributi za slike
ALIGN - ovaj atribut dizajniran je za vodoravno prelamanje ili poravnavanje slike.
lijevo -
Lijevo poravnat, tekst će teći udesno.
pravo -
Poravnan udesno, tekst teče ulijevo.
Proizlaziti :
desno poravnanje
HSPACE - vodoravni razmak od slike (u pikselima).
VSPACE - okomiti razmak od slike (u pikselima).
Proizlaziti :
uvlake od slike
HEIGHT - visina slike (pikseli).
WIDTH - širina slike (pikseli).
Proizlaziti :
TITULA - Ovo je naslov slike. Naslov će se prikazati ako prijeđete mišem preko slike.
title=" Pozdrav svima - stranica!!!!}">
Proizlaziti :
naslov slike
BORDER - ovaj atribut je odgovoran za veličinu okvira oko slike. Okviri se pojavljuju u takvim slučajevima kada sliku napravite poveznicom. Ako atribut BORDER postavite na nulu, rub se neće prikazati.
Proizlaziti :
A ako promijenite vrijednost granice na 5:
Proizlaziti :
Bilo koja slika može se koristiti kao pozadina. Da biste to učinili, dodajte atribut pozadine oznaci tijela.
pozadina="vaša_pozadina.jpg">Tekst se može prikazati na pozadini slike.
Primjer :
Proizlaziti :
Slika kao pozadina
Na ovoj bilješci mogao bih završiti temu "Kako umetnuti sliku u HTML", ali znam da mnoge zanima pitanje kako centrirati sliku.
Da biste centrirali sliku, samo trebate upotrijebiti ovaj trik:
To je sada sve sigurno. Prijeđimo na sljedeću lekciju.
Rad sa slikama u HTML-u (kako umetnuti sliku, promijeniti joj veličinu, napraviti vezu od slike).Umetanje slike
Neuparena oznaka koristi se za umetanje slike u HTML dokument
, koji se postavlja na mjesto u dokumentu gdje treba umetnuti sliku. Ova oznaka ima obavezni parametar src, čija vrijednost određuje put do željene slike u direktoriju vaše stranice.
Na primjer, da postavite sliku na stranicu:
Sljedeći redak postavljen je na pravo mjesto u dokumentu:
Ovo pregledniku daje do znanja da je korijenski direktorij web mjesta www.mysite.com postoji poddirektorij img 1.png
Ovdje smo naveli puni put (ili apsolutna adresa) na sliku. Možete li navesti relativna adresa Slike:
Preglednik tumači ovaj redak na sljedeći način: u direktoriju u kojem se nalazi ovaj html dokument nalazi se poddirektorij img, sadrži sliku s imenom 1.png, koje treba staviti na stranicu.
Ovdje je primjer navođenja relativne adrese slike ako vaša web stranica ima složeniju strukturu i prethodni primjer nije prikladan:
Preglednik tumači ovaj redak na sljedeći način: kombinacija znakova ../ znači da se morate popeti jednu razinu gore iz direktorija u kojem se nalazi ovaj html dokument; a zatim kao u prethodnom primjeru: u imeniku u kojem se nalazimo nalazi se poddirektorij img, sadrži sliku s imenom 1.png, koje treba staviti na stranicu.
Iz sigurnosnih razloga, poželjno je navesti relativnu adresu slike, osim u slučajevima kada na svoju stranicu postavite sliku koja se nalazi na drugom mjestu.
Dimenzije slike
Veličinu svake slike određuju dva parametra: širina i visina. Na oznaci
Postoje odgovarajući parametri: širina I visina. Ovi parametri uzimaju vrijednosti u pikselima (px).
Možete postaviti stvarne dimenzije slike:
Ovo nije potrebno, ali je korisno jer... malo ubrzava proces učitavanja stranice od strane preglednika (preglednik ne mora samostalno izračunati ove vrijednosti). Ako su dimenzije slike odmah navedene u parametrima oznake
, tada će prostor na stranici biti dodijeljen za ovu sliku, a struktura stranice se više neće mijenjati prilikom učitavanja - tekst će npr. skakati.
Ili možete povećati ili smanjiti sliku dodjeljivanjem parametara širina I visina druga značenja. Štoviše, ako želite proporcionalno promijeniti oba parametra, dovoljno je naznačiti novu vrijednost samo jednom od njih, a drugi jednostavno izostaviti. Preglednik će to automatski izračunati.
Na primjer, da bismo povećali našu sliku 1,5 puta, možemo napisati:
ili
Rezultat će biti isti:
Više mogućnosti širina I visina može uzeti vrijednosti u postocima. Ali! Imajte na umu da su ovo postoci veličine prozora preglednika. U ovom slučaju također možete navesti samo jedan parametar i izostaviti drugi.
Na primjer, ako želimo da slika zauzima točno pola naše stranice po širini, trebamo napisati sljedeće:
I dobit ćemo:
Okvir oko slike
Na oznaci
postoji još jedan izborni parametar granica. Koristite ga za postavljanje debljine okvira oko slike. Prema zadanim postavkama, debljina okvira slike je nula, tj. bez okvira.
Na primjer, ovako možete dodati okvir debljine 3 piksela našoj slici:
Ovo će nam pokazati preglednik:
Boja obruba odgovara boji teksta na stranici navedenoj pomoću parametra tekst označiti (Pogledajte Lekciju 6. Svojstva stranice - parametri oznake tijela), zadana boja je crna.
A ako ne želite vidjeti okvir, forsirajte parametar granica nulta vrijednost:
Alternativni tekst
Alternativni tekst preglednik prikazuje umjesto slike dok se ne učita. Ili umjesto slike, ako iz nekog razloga nije prikazana.
Kada i ako se slika učita, alternativni tekst prikazat će se kada prijeđete mišem preko ove slike.
Za dodavanje alternativnog teksta upotrijebite opciju alt označiti
, kojoj je dodijeljena vrijednost niza, koja mora biti u navodnicima.
Možete stvoriti alternativni tekst u više redaka.
Da biste to učinili, samo umetnite prijelom retka u HTML dokument.
Poravnanje slike
Za sliku, kao i za odlomak, postoji koncept poravnanja s tekstom i drugim slikama na stranici. Također možete postaviti vrstu poravnanja pomoću parametra uskladiti označiti
.
Ispod je tablica mogućih vrijednosti parametara uskladiti:
Mogućnosti texttop, vrh, sredini, absmisddle, Osnovna linija, dno postavite okomito poravnanje slike. I parametri lijevo I pravo neka preglednik zna na kojoj strani treba biti tekst teći okolo slika.
Obloga oko slike
Da biste spriječili prelamanje teksta blizu slike, možete postaviti ispunu oko slike. To možete učiniti pomoću parametara hspace(lijevo i desno ispuna) i vspace(razmaci na vrhu i dnu) oznake
.
Sljedeći primjer prikazuje prelamanje teksta oko slike, sa slikom poravnatom ulijevo i s 5 piksela ispune oko nje:
Evo rezultata u pregledniku:
U gradu Stockholmu, u najobičnijoj ulici, u najobičnijoj kući, živi obična švedska obitelj Svanteson. Ovu obitelj čine sasvim običan tata, sasvim obična majka i troje sasvim obične djece - Bosse, Bethan i Baby.Rastavljanje slike na dijelove
Postoje trenuci kada trebate postaviti veliku sliku na stranicu. Ali tada će stranici trebati puno vremena da se učita. Što uraditi?
Jedan od mogućih
Najbolji izlaz je izrezati sliku na komade i postaviti je na stranicu pomoću tablice. Kako bi slika izgledala kao cjelina, potrebno je ukloniti obrub tablice i sve podloge unutar i između ćelija. Oni. dodijelite odgovarajućim parametrima oznakenulte vrijednosti: granica="0", razmak ćelija="0", cellpadding="0".
U sljedećem primjeru podijelili smo sliku na 4 dijela. Ovako će tablica izgledati:
I evo rezultata:
Dobar dan svima, dragi moji prijatelji, čitatelji i gosti mog bloga. Kao da ste na odmoru, ali nemate dovoljno vremena ni za što. Sve je nekako u žurbi. Ali ova pojava je privremena, sve će se uskoro smiriti. I danas ćemo nastaviti učiti osnove html-a. Prijatelji, što mislite bez čega će svaka Internet stranica biti bezlična, siva i dosadna? Tako je, bez grafičkog sadržaja, bilo da se radi o fotografijama, logotipima ili pozadinama.
Dakle, ubacivanje slike u html također je jedna od najvažnijih komponenti, pa bi to svatko tko će sam izrađivati web stranice trebao znati. Upravo to ćemo danas učiniti sa svom ovom bakanalijom)))
Pa, počnimo. Kao što ste već shvatili iz naslova, oznaka je odgovorna za umetanje slike
, ali ima dvije nijanse:
- Tag je jednostruk pa ga nema potrebe zatvarati
- Oznaka uvijek radi zajedno s atributom koji određuje put do slike.
Općenito, pogledajmo primjer za konsolidaciju svih ovih radnji. Jesam li u pravu? Preuzmite materijale lekcije i otvorite html datoteku u Notepadu. A sada prije glavnog teksta napišite sljedeće:
Svi. Ovaj kratki zapis pružit će nam sliku na našoj web stranici. Pokušajte to napisati u dokumentu.
Sada spremite datoteku i pokrenite je u svom pregledniku. Da vidimo što možemo učiniti. Napravio sam to ovako.
Atributi
Kao što sam rekao gore, oznaka img odmah dolazi zajedno s atributom src. Pa, mislim da ovo već razumijete, pa proučimo ostatak. Ovdje ima prostora za širenje. Ovdje postoji samo tona atributa. Pardon my French).
Alt
Ako se iznenada slika iz nekog razloga nije učitala ili je nedostupna, vidjet ćete tekst koji je napisan u vrijednosti atributa Alt. Obično ono što je ovdje napisano je ono što je prikazano na slici, tj. ako je prikazano nešto o nacionalnosti, onda je u alt najbolje napisati "Muškarci i žene različitih nacionalnosti." Na primjeru to izgleda ovako:
Kao rezultat toga, ako se slika iz nekog razloga ne može prikazati, pojavit će se naš natpis.
U principu, ne morate ništa unijeti kao alternativni tekst, ali bolje je ostaviti sam atribut, čak i ako je prazan.
Širina i visina
Za one koji znaju engleski nije teško pogoditi da su ova dva atributa odgovorna za širinu i visinu slike. Odlučila sam ove dvije stvari spojiti u jednu stavku, jer imaju slične funkcije, reklo bi se - braće (ili sestara).
Širina je odgovorna za širinu slike, a njene vrijednosti uključuju i samu veličinu. Općenito, ako imate sliku, na primjer, 640*480 piksela, a trebate je prikazati na web stranici 320*240, tada ćete jednostavno morati učiniti sljedeće:
Svi. Sada, kada spremite dokument i otvorite ga pomoću preglednika, vidjet ćete sličicu. Imajte na umu da smo promijenili samo parametar širine, a slika je proporcionalno smanjena, tj. visina se automatski smanjivala.
Visina je, kao što možda pretpostavljate, odgovorna za visinu slike. Ovdje sve radi potpuno isto, ali okomito. Uzmimo istu sliku, ali nećemo postaviti širinu, već samo visinu.
Spremite i idite na dokument. Kao što vidite, slika je smanjena na istu veličinu kao u prethodnom primjeru, iako smo ovaj put postavili samo visinu. Već znate da ovdje sve funkcionira u okviru proporcija, tako da u načelu nema smisla postavljati oba parametra.
Pokušajmo, samo zabave radi, postaviti atribute i širine i visine u isto vrijeme, ali samo ćemo im dati neproporcionalne parametre. Pa, onda ćemo vidjeti što možemo učiniti.
Štedimo i sad gledajte što nam je dano. Hmm, ovo je nešto neproporcionalno). Općenito, mislim da ste shvatili bit. Vježbajte malo sami kako biste konsolidirali rad s dimenzijama, a zatim prijeđite na sljedeći atribut.
Uskladiti
Pa, već ste upoznati s ovim atributom iz tog članka, kada smo ga zapravo prošli. I vjerojatno ste već pogodili da je on odgovoran za mjesto slike.
Postoji ukupno pet parametara za poravnanje:
- lijevo — lijevo poravnanje
- desno — desno poravnanje
- sredina — poravnajte sliku s osnovnom linijom crte (vidjet ćete što to znači u primjeru)
- vrh - gornji obrub ove slike poravnat je po visini s najvišim elementom u danom retku
- bottom — poravnajte donji rub slike s tekstom
Pa, nemojmo ih ovdje nabrajati, ali prema tradiciji, pokazat ću sve na primjeru. Skinite gotov html dokument odavde i otvorite ga. Tamo ćete vidjeti 5 identičnih odlomaka. Tamo umetnite slike s opisanim atributima:
Pa, sada spremamo naš dokument kao i obično i vidimo što smo dobili. Dobro? Vidite li razliku? Sada znate kako se ti parametri razlikuju).
Granica
Atribut obruba postavljen je tako da označava debljinu okvira na slici. I što je veći, to je deblji okvir u skladu s tim. Pokušajte dodati ovaj atribut na sliku, ali stalno mijenjajte njegovu vrijednost i sami ćete vidjeti koliko okvir postaje deblji.
Hspace i Vspace
Pa, pogledajmo najnovije atribute img oznake za danas. Space (engleski) se prevodi kao razmak, razmak, razmak (ključ) itd. Prefiksi H i V znače vodoravno i okomito. Ovdje ne bi trebalo biti nikakvih pitanja.
Pa čemu ovi atributi služe? Oni postavljaju okomite i vodoravne margine od slike do okolnog teksta (ili drugog sadržaja). Odnosno, ako vam se ne sviđa da je slika preblizu tekstu, možete povećati udaljenost između njih. Pogledajmo na primjeru kako to izgleda.
Vidiš li? Margine su porasle i okomito i vodoravno. Ovo smo htjeli.
Usput, te slike također možete umetnuti kao zaglavlje za web stranice, napraviti slike kao poveznice itd. O svemu tome sam govorio u.
Pa, općenito, čini mi se da imam sve. Rekao sam vam osnove umetanja slika, ali ako želite naučiti HTML i CSS kao profesionalac, toplo preporučujem da preuzmete nevjerojatan tečaj na ovu temu, gdje zahvaljujući ovom označnom jeziku i kaskadnim stilskim listovima možete jednostavno izraditi tri vrste web stranica: posjetnice, blogove, internetske trgovine. Sve je ispričano jednostavnim i razumljivim jezikom. To je samo bomba!
Pa, opraštam se od tebe za danas. U svega par lekcija planiram vam održati posljednju lekciju o osnovama HTML-a, nakon čega ćemo učvrstiti sva stečena znanja u praksi i napraviti jednostavnu web stranicu od tri stranice. Općenito, sve će biti cool)
Pa, kako ne biste propustili sve najzanimljivije stvari na mom blogu, svakako se pretplatite na ažuriranja članaka. I naravno, pogledajte ostale članke. Siguran sam da ćete pronaći mnogo korisnih informacija za sebe. Sretno ti. Vidimo se u drugim člancima. Doviđenja!
Srdačan pozdrav, Dmitry Kostin
Teško je pronaći web stranicu na internetu koja ne sadrži slike, što i ne čudi, jer one su glavni dio dizajna web stranice, što joj daje nezaboravan izgled. Dobar dizajn web stranice ključ je njezinog uspješnog razvoja. Za prikaz slika u html-u postoji samo jedna oznaka
.
1. Sintaksa oznake
Opis slike" src ="URL " [atributi ]>
Imajte na umu da je ova oznaka jednostruka i ne zahtijeva oznaka za zatvaranje .
Atribut src je obavezan. Koristi se za određivanje adrese prikazane slike. Možete navesti apsolutni ili relativni URL. Ako ne navedete adresu ili je napišete s greškom, slika se neće prikazati.
Atribut alt="opis" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}
Preostali atributi nisu obavezni; pogledat ćemo ih u nastavku. Najprije dajmo jednostavan primjer ispisa slike u HTML.
2. Kako ubaciti sliku u html
Za umetanje slike u html koristite oznaku
. Pogledali smo sintaksu malo više. Navedimo praktične primjere.
Primjer 2.1. Korištenje oznake
...Ovaj kod
U ovom smo primjeru naveli izravnu adresu slike sa slika na Yandex fotografijama. Najčešće se poveznice daju na slike koje se nalaze na istom URL-u. Na primjer, src="/img/kartinka.jpg", tj. naznačena je relativna adresa.
Moguće je postaviti više slika u nizu. Ako ne stanu u jednu liniju, automatski će prijeći na sljedeću.
Primjer 2.2. Prikazivanje nekoliko slika u html-u jedna za drugom
...Pretvara se u sljedeće na stranici:
Ako bismo postavili drugu sliku, ona bi bila u novom redu, jer više ne bi stala u ovaj.
Primjer 2.3. Korištenje alternativnog teksta (alt) u img
Preporuča se uključiti alternativni tekst (atribut alt) u oznaku
, kako biste se osigurali od slučaja da slika nije dostupna. Ispod je primjer korištenja zamjenskog teksta. U prvom slučaju nismo naveli veličinu slike, ali u drugom jesmo.
...Pretvara se u sljedeće na stranici:
Kad bismo postavili drugu sliku, bila bi u novom retku, jer više ne bi stala u ovaj red.
Sada pogledajmo pobliže sve atribute oznake
.
3. Atributi i svojstva oznake
1. Svojstvo align="parameter" - određuje poravnanje slike. Ova vrijednost također utječe na to kako će tekst teći oko slike. Može prihvatiti sljedeće parametre:
- lijevo - lijevo poravnanje
- sredina - poravnajte sredinu slike s osnovnom linijom trenutnog retka
- bottom - poravnajte donji rub slike s okolnim tekstom
- vrh - gornji obrub slike poravnat je s najvišim elementom tekućeg retka
- desno - desno poravnanje
Primjer 3.1. Poravnanje slike u html-u udesno
...Pretvara se u sljedeće na stranici:
2. Svojstvo alt="tekst" - подсказка/описание картинки. Выполняет сразу две важные функции:!}
- Prikazuje opis alata pri lebdenju
- Ako su slike onemogućene u pregledniku, prikazuje se ovaj tekst
Ovaj je atribut također vrlo važan pri rangiranju slika u Yandex slikama i Google slikama. Treba ga dodati svakoj slici jer je to jedan od čimbenika u algoritmima tražilica.
Primjer 3.2. Ispis slike u html s okvirom (obrubom)
...Pretvara se u sljedeće na stranici:
4. Svojstvo bordercolor="color" - postavlja boju obruba koji obavija sliku. Ima smisla samo ako je atribut granice veći od 0.
Primjer 3.3. Ispis slike u html s okvirom u boji
...Rezultat se može vidjeti odmah gore.
BilješkaAtributi granice i boje granice mogu se postaviti u CSS stilovima slike:
...5. Svojstvo height="NUMBER" - postavlja visinu slike: ili u pikselima ili kao postotak. Na primjer, ako je slika veličine 400x200, a mi navedemo visinu od 150 piksela, tada se komprimira na 300x150 (25% manje), tj. proporcionalno.
6. Svojstvo width="NUMBER" - postavlja širinu slike: ili u pikselima ili kao postotak. Na primjer, ako je slika veličine 1000x800, a širina je navedena kao 1200 piksela, tada se automatski proširuje za 20% na 1200x960.
7. Svojstvo hspace="NUMBER" - postavlja horizontalno uvlačenje slike u pikselima od drugih html objekata.
8. Svojstvo vspace="NUMBER" - postavlja okomiti razmak slike u pikselima od drugih html objekata.
BilješkaUmjesto hspace i vspace, savjetujem vam da koristite staru i provjerenu marginu (više o tome možete pročitati u lekciji o opisu html stilova). Da vas ukratko podsjetim:
- margin-top: X px; (X - gornja uvlaka)
- margina-dno: Y px; (Y - donja uvlaka)
- margina-lijevo: L px; (L - lijeva uvlaka)
- margina-desno: R px; (R - desna uvlaka)
Postavite uvlake od objekata u pikselima. Dopuštene su negativne vrijednosti. Prema zadanim postavkama, ili nasljeđuje vrijednost pretka ili ima vrijednost 0.
Na primjer. Lijeva margina je 50 piksela, a gornja margina je 10 piksela.
...Pretvara se u sljedeće na stranici:
U ovom primjeru, udubljenje na vrhu bilo je 10 piksela, na lijevoj strani 50 piksela.
9. Svojstvo class="class_name" - možete dodijeliti klasu slici kako biste postavili stil za sve slike ove klase.
4. Kako od slike napraviti vezu
Ovo se pitanje postavlja među mladim webmasterima. Zapravo je vrlo jednostavno. Da biste to učinili, samo uokvirite oznaku
oznaka (link).
Na primjer
...5. Kako zaokružiti kutove slike
Dragi čitatelju, sada ste naučili puno više o html img tagu. Sada vam savjetujem da prijeđete na sljedeću lekciju.
Sve što se zna o ovom čovjeku je
da nije bio u zatvoru, ali zašto nije bio u zatvoru, ne zna se.
Mark Twain.Ovo je lekcija o kako umetnuti sliku u HTML, kako ga dizajnirati, kako omotati tekst oko slike itd. Uostalom, poznato je da slike čine stranicu privlačnijom i drugačijom od ostalih izvora, pa je mogućnost korištenja oznake i njezinih atributa vrlo korisna na modernom Internetu. Ali glavna stvar ovdje je osjećaj proporcije!
Višak grafike otežat će html stranicu i time povećati vrijeme učitavanja. Osim toga, prisutnost velikog broja slika odvratit će posjetitelje od glavnog sadržaja stranice (osim ako, naravno, grafika nije glavni sadržaj stranice). Stoga ga držite umjereno i koristite ga samo tamo gdje je potrebno. I bit ćete sretni!
U lekciji o, već sam govorio o tome kako možete koristiti slike kao pozadinu HTML dokumenta. Razgovarajmo sada o tome kako se grafika koristi u “gornjem sloju” html stranice.
§ 1. Kako umetnuti sliku
Za umetanje slika u HTML koristite oznaku IMG S obvezno atribut SRC. Ovaj atribut govori pregledniku stazu do slikovne datoteke. Oni. za umetanje slike s nazivom logo.jpg na određeno mjesto na stranici (pod uvjetom da se nalaze i stranica i slika u jednoj mapi(direktorij)) trebate umetnuti sljedeći html kod na ovo mjesto:
src="logo.jpg">
Ako se slika i stranica nalaze u drugačiji direktorije (mape), tada trebate navesti put do slike relativno stranice. Na primjer, ako se html stranica nalazi u direktoriju (mapi) stranice, u istom direktoriju (mapi) postoji poddirektorij (mapa) images, u kojem se nalazi naša slika logo.jpg, a zatim da biste je umetnuli morate napiši ovako:
images/logo.jpg">
Ili se ne morate brinuti i isticati puna adresa slike. Na primjer, ovako:
http://www..png">
U potonjem slučaju, preglednik će prikazati kod ovako:
Bilješka. Ako se slika nalazi na vašem računalu, ali ga želite umetnuti na internetsku stranicu, onda od toga neće biti ništa. Da biste to učinili, prvo morate premjestiti sliku na neko mjesto na internetu(Na primjer, ). I navedite punu adresu u kodu stranice do ove točke sa slikom.
Pored potrebnog atributa SRC na oznaci IMG Postoji još nekoliko neobaveznih atributa. Pogledajmo ih pobliže.
§ 2. Određivanje veličine slike
Počnimo s atributima koji vam omogućuju postavljanje dimenzije slike(točnije iskolčiti prostor za te dimenzije na stranicama). Evo ih:
- širina- širina slike u pikselima ili postocima;
- visina- visina slike u pikselima ili postocima.
Ako se koriste ovi atributi, prvo će dodijeliti prostor za grafiku, pripremiti izgled dokumenta, prikazati tekst, a tek onda učitati sliku. Istovremeno će sliku smjestiti u pravokutnik odabrane veličine, čak i ako su stvarna širina i visina slike veće (sažimanje) ili manje (razvlačenje). U slučaju kada se ovi atributi ne koriste, preglednik će odmah učitati sliku, a prikaz teksta i ostalih elemenata koji slijede kasnit će.
Širina i visina slika mogu se odrediti u pikselima (veličina slike bit će konstantna bez obzira na razlučivost zaslona) i kao postotak (veličina slike ovisit će o razlučivosti zaslona korisnika). Na primjer:
širina="50" visina="20">
širina="10%" visina="5%">
§ 3. Zamjenski tekst
Ako je korisnik u postavkama preglednika onemogućio prikaz slika, tada se umjesto slike može prikazati alternativni tekst koji bi objasnio kakva bi grafika tu trebala biti. To se postiže korištenjem atributa ALT:
U tom slučaju preglednik će rezervirati prostor na stranici za sliku, ali će umjesto same slike prikazati tekst koji upisujete u vrijednost atributa ALT:
Ponavljam, to će se dogoditi ako je korisnik onemogućio prikaz grafike. Ako nije, slika će sakriti alternativni tekst.
§ 4. Usklađivanje slike
Korištenje atributa koji vam je već poznat uskladiti možete kontrolirati poravnanje slika u odnosu na druge elemente html stranice. At atribut uskladiti Postoji nekoliko značenja, ali nas trenutno najviše zanimaju dva:
- lijevo- slika se nalazi uz lijevi rub stranice, a tekst teče oko slike s desne strane;
- pravo- slika se nalazi na desnom rubu stranice, a tekst i drugi elementi teku oko slike s lijeve strane.
Na primjer, HTML kod
preglednik će prikazati ovako
I ovaj HTML kod:
izgledat će ovako:
Kako biste spriječili prelamanje teksta oko slike, možete upotrijebiti oznaku BR(poznato nam iz prethodnog odjeljka o). Na oznaci BR postoji atribut čisto, koji može imati tri vrijednosti:
- lijevo- zaustaviti prelamanje teksta oko lijevo poravnatih slika;
- pravo- zaustaviti prelamanje teksta oko desno poravnatih slika;
- svi- zaustaviti prelamanje teksta oko slika poravnatih lijevo i desno.
Najbolji članci na temu
