Kako vstaviti sliko v HTML brez težav

Če želite ustvariti spletne strani in celo celotna spletna mesta, je znano, da se uporablja poseben označevalni jezik HTML (Hypertext Markup Language), vendar brez fotografij in različnih slik, bi bilo vsako spletno mesto zgolj strukturirano in dolgočasno besedilo. Zato dodajte slike na spletno mesto s posebno kodo, ki je izjemno enostavna za uporabo in omogoča oboje vstavi sliko v HTML v

Kje začeti?

Če želite napisati kodo, se morate odločiti, kateri program bo to storil. Zdaj jih je veliko, eden najbolj znanih je NotebookPad ++. Ima številne funkcije, ki so zelo uporabne pri pisanju kode, omogoča identifikacijo napak in se ne zmedejo v oznakah. Če pa nimate priložnosti, da se zatečejo k specializiranim programom, lahko uporabite preprosto beležnico, se koda ne spremeni.

Katere oznake bomo potrebovali?

Po odločitvi s programom, da napišete kodo, morate razumeti, kako v njej napisati, kako vstaviti sliko v HTML v notepad ali kateri koli drug program. Začni z oznaka />. Ta oznaka, ki deklarira sliko v dokumentu HTML, je ena in ne zahteva zapiranja.

In kaj je naslednje?

V kodi smo napovedali, da bomo sliko uporabljali, vendar tega še nismo označili. Torej, kako vstavite sliko v HTML? Če želite to narediti, potrebujemo atribut src, ki ga uporabljamo z našo oznako. Ta atribut določa lokacijo naše slike, ne glede na to, ali je na neki spletni strani ali na našem računalniku.

• Če se slika nahaja na spletnem mestu tretje osebe, bo naša koda videti takole:

• Če najdemo sliko v isti mapi kot naša HTML datoteka, bo koda izgledala takole:

Alternativno besedilo

Oznaka obstaja še en atribut - alt. Uporabite to, da bo brskalnik lahko videl opis slike, če iz nekega razloga ni mogoče prenesti slike. Njena prisotnost je zaželena tudi zato, da lahko ljudje s slabovidnostjo vedo, kakšno sliko je prisotna na spletnem mestu, ker je besedilo, ki je v smislu tega atributa, objavljeno s programi za branje zaslona. Nastala koda z atributi src in alt bo videti tako:

Orodja

Med drugim je oznaka obstaja še en atribut naslova. Zaradi tega atributa, ko kazalec miškin kazalec miške premaknete nad sliko, se v orodni vrstici prikaže alternativno besedilo. Vendar pa to funkcijo podpira samo Internet Explorer, tako da se bodo takšni pozivi pojavili v drugih brskalnikih, bodo potrebni posebni vtičniki. Orodne vrstice se uporabljajo skupaj z atributom alt, so neobvezne, a če jih uporabljate, bo koda izgledala takole:

Velikost slike

S tem, kako vstaviti sliko v besedilo z HTML-jem, smo jo razvrstili. Kaj pa, če želimo narediti podobo malo večjo ali manjšo? Če želite to narediti, ima HTML posebne lastnosti: širino (širino) in višino (višino). Vrednosti teh atributov so lahko v odstotkih ali v pikslih. Če nastavite širino v slikovnih pikah in višino v odstotkih, bo koda izgledala takole:

Če podate samo en od velikosti atributov, se bo drugi izračunal samodejno, vendar tako, da bo ohranil razmerje slike. Pri določanju obeh parametrov je pomembno, da se spomnite, da če velikost presega prvotne, se bo slika raztegnila in če so manjše velikosti, se skrči.

Slika kot ozadje

In kaj, če želimo uporabiti sliko ne v besedilu, ampak vstaviti sliko v ozadju v HTML, kako to storiti? Za to potrebujemo oznako , brez katerega ni HTML dokumenta. Vsebuje vse vidne vsebine dokumenta, njeni atributi pa lahko določijo velikost, barvo pisave, vključno z ozadjem. Za vstavljanje slike v HTML kot ozadje je zelo preprosta, zato bomo morali uporabiti atribut ozadja. Ta koda je videti takole:

...

Pri oblikovanju ozadja spletne strani je bolje uporabiti takšne slike, s katerimi lahko dosežete zanimive vizualne učinke, vendar to ne bi motilo normalne percepcije besedila. Vendar pa je treba upoštevati, da boste morda morali spremeniti velikost in barvo vaše pisave, da boste olajšali branje.

Zaviti besedilo z besedilom

Včasih je potrebno, da je slika poleg besedila, ki bi jo ovirala tako ali drugače. Ampak, če vstavite sliko tik znotraj črte, potem bo grafično izgledala grdo, besedilo se bo nepravilno prekinilo. Torej, kako vstavite sliko v HTML, da se slika brez težav prilega oblikovanju strani? Za to potrebujemo atribut poravnave oznake . Ta atribut lahko traja dve vrednosti: levo in desno.

Če uporabite vrednost v levo, bo slika postavljena na levo od besedila, in če desno uporabite atribut desno. Ta koda je videti takole:

ali

Če želimo, da se besedilo nahaja med dvema slikama, bo koda izgledala takole:

In potem, ko bo ta koda postavljena na besedilo, ki ga je treba skleniti med tema dvema slikama.

Slike vam omogočajo raznolikost spletnega mesta, osvetlitev, privlačnost in bolj nepozabno, vendar ne pozabite, da bo preveč slik upočasnilo nalaganje strani in odvračalo od besedila.