Mis on HTML-i pildisildid?
Järgmises artiklis antakse ülevaade HTML-i pildisiltide kohta. Ma tean selle klišeet, kuid lubage mul kõigepealt öelda, et pilt on tuhandet sõna väärt. Veebilehtede puhul on see eriti tõsi. Pilt võib külastaja müüa koos teie ideega, avaldada muljet, et keegi teie toote ostab. See võib aidata veebilehel palju paremini välja näha. Selles juhendis vaatleme, kuidas saaksime IMG-d veebisaitidele lisada ja neid õigesti joondada ning linke lisada.
Piltide lisamine veebilehtedele
IMG saate HTML-lehele lisada, kasutades nuppu HTML-dokumendis olev silt, siin on süntaks:
Siin teatab IMG brauserile, et silt on seotud IMG lisamisega dokumendile ja “src =” määrab, kust pildi alla laadida.
Näide pildiga lehel
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Siin on koodi väljund:
Üks huvitav fakt nende HTML-lehtede kohta on see, et IMG-sildi kasutamisel ei sisestata pilti nimetatud veebilehele, selle asemel loob see hoidmisruumi, kuhu pilt pärast allalaadimist pannakse.
Brauseri tugi ja atribuutidega ühilduvus
Nagu arvata võib, toetavad kõik kaasaegsed brauserid pilte ja IMG-siltide kasutamist. Mõnikord muudavad mobiilibrauserid pildi suurust, et see ekraanile mahuks, kui pilt pole reageeriv.
Atribuutide ühilduvuse osas HTML 4.01 ja uuema HTML5-ga töötab enamik silte, välja arvatud joondamine, ääris, hspace ja vspace, mida viimased lihtsalt ei toeta.
Pildid lingina:
Kunagi soovite, et pilt toimiks lingina teisele lehele. Selle saate teha, kui lisate sildi sisse IMG-sildi.
Kujutise määramine veebilehe taustaks
Kujutise saab veebilehe taustpildina määrata, kasutades lehe kehas olevas taustpildi CSS-i atribuuti.
Taustapilt
Kujutise määramine brauseris hõljumiseks
CSS-i atribuudi „float” abil saab pildi seada hõljuma brauseriaknas ükskõik kuhu. Vaatame näidet, mis aitab teil mõista.
Siin hõljub auto pilt teksti paremas servas.
Siin hõljub auto pilt teksti vasakus servas.
Pildisildi atribuudid
Järgmised on pildisildi atribuudid.
1) Joondage
Võimalikud väärtused: ülemine, alumine, keskmine, vasak või parem.
Atribuuti alight kasutatakse veebilehel pildi joondamise täpsustamiseks.
2) Alt
Väärtuse tüüp: tekst
Alt kasutatakse veebilehe pildi alternatiivse teksti määramiseks. Kui IMG kuvamine pole võimalik, kuvab brauser selle teksti kasutajale. Otsimootorid, näiteks Google ja Bing, kasutavad seda altteksti pildiotsingus tulemuste kuvamiseks.
3) piir
Väärtuse tüüp: pikslid
Seda kasutatakse kasutaja määratletud paksuse piiri loomiseks pildi ümber. See ei tööta HTML5-s.
4) ristpäritolu
Väärtuse tüüp: anonüümse kasutamise mandaadid
Seda atribuuti kasutatakse siis, kui soovime täpsustada, kuidas tuleks päritolu fotosid käsitleda. Seda kasutatakse enamasti juhtudel, kui kasutatakse JavaScripti veebirakenduste lõuendielemente.
5) kõrgus
Väärtuse tüüp: protsentides või pikslites
Ilmselt kasutatakse seda HTML-i veebilehel pildi kõrguse tähistamiseks.
6) hspace
Väärtuse tüüp: pikslid
HTML5-vormingus toetamata kasutatakse atribuuti hspace pikslites pikslites täpsustamiseks, kui palju ruumi tuli lisada sisestatud pildi vasakule ja paremale.
7) ismap
Väärtuse tüüp: lehe URL
ismap, mida me määratlesime nimetatud pildi serveripoolse pildikaardina. Kui kasutaja pildil klõpsab (või koputab), saadavad brauserid klõpsu (või koputage) koordinaadid veebiserverisse URL-na.
8) Longdesc
Väärtuse tüüp: URL
Longdesci kasutatakse pildi üksikasjalikuks kirjeldamiseks URL-i abil. Atribuudis kasutatud URL-i kasutatakse pildi kirjeldusena.
9) src
Väärtuse tüüp: URL
src tähistab lähteteksti ja seda kasutatakse aadressi täpsustamiseks, kust brauser pildi hangib, seda URL-i saab rakendada sama serveri kataloogis asuva pildi jaoks ja see võib ka pildi salvestada kolmanda osapoole serverisse koos erinev domeeninimi.
10) kasutuskaart
Väärtuse tüüp: #kaardi nimi
Atribuuti usemap kasutatakse kliendipoolsel pildikaardil pildi määratlemiseks. Kasutuskaarti kasutatakse alati kaardi ja piirkonna HTML-siltidega.
11) vspace
Väärtuse tüüp: pikslid
HTML5-vormingus toetamata kasutatakse atribuuti Vspace pikslite arvu määramiseks, mida veebilehe pildi üla- ja alaosas tühimärgina kasutatakse.
12) Laius
Väärtuse tüüp: pikslid
Nii nagu selle nimigi ütleb, kasutatakse atribuuti laius HTML-i veebilehel oleva pildi laiuse määramiseks.
Järeldus - HTML-i pildisildid
Nüüd, kui oleme vaadanud, kuidas pilte HTML-lehtedele lisatakse ja kuidas nende atribuute seada, saame veebiprojektis luua atraktiivse välimusega veebilehti.
Lisaks veebilehele visuaalse elegantsi lisamisele on pildid väärtuslikud ka seetõttu, et need aitavad optimeerida ka otsingumootorit. Kujutistele sobivate alt-siltide ja kirjelduste lisamine aitab otsingumootoritel paremini mõista veebilehe sisu ja parandada paljudel juhtudel veebilehe paremusjärjestust.
Soovitatavad artiklid
See on juhend HTML-piltide siltide jaoks. Siin käsitleme pildimärgise atribuute koos brauseri toega ja atribuutidega ühilduvust. Võite lisateabe saamiseks vaadata ka järgmisi artikleid -
- HTML-käskude lihtne juhend
- Mis on XHTML?
- Juhendid HTML-atribuutide kohta
- HTML-i rakendused ja peamised kasutusviisid
- HTML-i erinevad loendistiilid
- HTML-raamid
- HTML-plokid