Kako umetnuti sliku u HTML bez problema

Za izradu web stranice, pa čak i cijele web stranice, kao što znate, koristi poseban Markup Language HTML (Hypertext Markup Language), ali bez fotografija i raznih slika, svaka stranica će biti jednostavno strukturiran i dosadno tekst. Zato za dodavanje slika na web-lokaciju upotrebljava posebni kôd koji je izuzetno jednostavan za upotrebu i omogućuje oboje umetnite sliku u HTML u

Gdje početi?

Da biste napisali kôd, morate odlučiti koji program to radi. Sada ih ima mnogo, jedan od najpoznatijih je NotePad ++. Ima brojne funkcije, vrlo korisne prilikom pisanja koda, omogućuje prepoznavanje pogrešaka i ne zbunjuju se u oznakama. Međutim, ako nemate priliku pribjeći se specijaliziranim programima, možete upotrijebiti jednostavan notepad, kod se ne mijenja.

Koju ćemo oznaku trebati?

Nakon što ste odlučili s programom napisati kôd, trebate razumjeti da se u njemu piše, kako umetnuti sliku u HTML u notepad ili bilo koji drugi program. Počnite s oznaka />. To je ova oznaka koja deklarira sliku u HTML dokumentu, jedinstvena i ne zahtijeva zatvaranje.

A što je sljedeće?

U kodu smo rekli da ćemo upotrijebiti sliku, ali još nismo to naznačili. Kako možete umetnuti sliku u HTML? Da biste to učinili, potreban nam je src atribut koji se upotrebljava s našom oznakom. Ovaj atribut određuje mjesto naše slike, bez obzira je li na nekom web mjestu ili na našem računalu.

• Ako se slika nalazi na web mjestu treće strane, naš će kod izgledati ovako:

• U slučaju pronalaženja slike u istoj mapi kao i naša HTML datoteka, kôd će izgledati ovako:

Alternativni tekst

Oznaka postoji još jedan atribut - alt. Koristite ga kako biste osigurali da preglednik može vidjeti opis slike ako se iz nekog razloga sama slika ne može preuzeti. Njegova prisutnost također je poželjno kako bi se osiguralo da slabovidne osobe mogu znati što je prisutan na mjestu vrsta slike, jer je tekst na vrijednost ovog atributa se najavljuje čitači zaslona. Dobiveni kod s atributima src i alt izgledat će ovako:

opise

Između ostalog, oznaka postoji još jedan naslov atribut. Zbog ovog atributa, kada pokazivač miša držite iznad slike, u alatu će se prikazati alternativni tekst. Međutim, ovu funkciju podržava samo Internet Explorer, tako da se takvi upozorenja pojavljuju u drugim preglednicima, potrebni su posebni dodatke. Alatne točke upotrebljavaju se zajedno s alatom alt, one su opcionalne, ali ako ih koristite, kôd će izgledati ovako:

Veličina slike

S načinom umetanja slike u tekst s HTML-om, izdvojili smo je. Ali što ako želimo napraviti sliku malo veću ili manju? Da biste to učinili, HTML ima posebne atribute: širinu (širinu) i visinu (visinu). Vrijednosti tih atributa mogu biti u postocima ili u pikselima. Ako postavite širinu u pikselima i visinu u postocima, kôd će izgledati ovako:

Ako navedete samo jedan od atributa veličine, drugi će se automatski izračunati, ali na takav način da zadrži omjer slike. Kada pokazujući oba parametra je važno imati na umu da, ako su dimenzije veće od originala, slika je rastegnuta, a ako je veličina će biti manji - će se smanjiti.

Slika kao pozadina

A što ako želimo koristiti sliku koja nije u tekstu, ali umetnuti sliku na pozadinu u HTML-u, kako to učiniti? Da biste to učinili, potrebna nam je oznaka , bez kojih nema HTML dokumenta. Sadrži sve vidljive sadržaje dokumenta, a njegovi atributi mogu odrediti veličinu, boju fonta, uključujući pozadinu. Da biste umetnuli sliku u HTML kao pozadinsku sliku vrlo je jednostavna, za to ćemo morati koristiti pozadinsku atribut. Ovaj kôd izgleda ovako:

...

Kada formiranje web stranica pozadinu je bolje koristiti takve slike, s kojima možete postići zanimljive vizualne efekte, ali to ne bi ometalo normalno da vidim tekst. Međutim, treba imati na umu da ćete, možda, morati promijeniti veličinu i boju fonta kako biste lakše čitali.

Zamotajte tekst tekstom

Ponekad je neophodno da se slika nalazi pokraj teksta, koji će ga savijati na jedan ili drugi način. Ali ako umetnete sliku unutar crte, grafički će izgledati ružno, tekst će biti neispravan. Kako možete umetnuti sliku u HTML kako bi se slika besprijekorno uklopila u dizajn stranice? Za to nam je potreban atribut atributa oznake . Ovaj atribut može poduzeti dvije vrijednosti: lijevo i desno.

Ako koristite preostalu vrijednost, slika će biti postavljena s lijeve strane teksta i ako koristite atribut desno, odnosno desno. Ovaj kôd izgleda ovako:

ili

Ako želimo da tekst bude smješten između dvije slike, kod će izgledati ovako:

I nakon ovog koda postavit će se tekst koji bi trebao biti zaključen između ove dvije slike.

Slike dopustiti diverzificirati stranice, kako bi ona svjetlija, ljepši i više sjećanju, ali ne zaboravite da je puno slika presporo učitava stranica i da će odbiti od teksta.