Mikä on HTML-kuvatunnisteet?
Seuraava artikkeli antaa yleiskuvan HTML-kuvatunnisteista. Tiedän sen väliseinän, mutta aloitan sanomalla, että kuva on tuhannen sanan arvoinen. Verkkosivujen kohdalla se on erityisen totta. Kuva voi myydä kävijän ideallasi, tehdä vaikutelman siitä, että joku ostaa tuotteesi, ja se voi auttaa verkkosivua näyttämään paljon paremmalta. Tässä oppaassa tarkastellaan kuinka voimme lisätä IMG: n verkkosivuille ja kohdistaa ne oikein rinnalla lisäämällä niihin linkkejä.
Kuvien lisääminen verkkosivuille
Voit lisätä IMG: n HTML-sivulle käyttämällä tunniste HTML-dokumentissa, tässä on syntaksi:
Tässä IMG kertoo selaimelle, että tunniste tarkoittaa IMG: n lisäämistä asiakirjaan ja ”src =” määrittää, mistä kuva ladataan.
Esimerkki sivusta, jolla on kuva
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Tässä on koodin lähtö:
Yksi mielenkiintoinen tosiasia näistä HTML-sivuista on, että kun käytät IMG-tunnistetta, kuvaa ei lisätä kyseiselle verkkosivulle, vaan se luo pitoajan, johon kuva laitetaan, kun se on ladattu.
Selaimen tuki ja yhteensopivuus määritteiden kanssa
Kuten voit odottaa, kaikki nykyaikaiset selaimet tukevat kuvia ja IMG-tunnisteiden käyttöä. Joskus mobiiliselaimet muuttavat kuvan kokoa niin, että se sopii näytölle, jos kuvaa ei ole määritetty reagoivana.
Kun kyse on ominaisuuksien yhteensopivuudesta HTML 4.01: n ja uudemman HTML5: n kanssa, suurin osa tunnisteista toimii, lukuun ottamatta kohdistamista, reunusta, hspacea ja vspacea, joita viimeksi mainitussa ei yksinkertaisesti tueta.
Kuvat linkkinä:
Toisinaan haluat kuvan toimivan linkkinä toiselle sivulle. Voit tehdä sen tekemällä lisäämällä IMG-tunnisteen tunnisteen sisään.
Kuvan asettaminen verkkosivun taustaksi
Voit määrittää kuvan verkkosivun taustakuvana käyttämällä sivun runko-elementin taustakuva-CSS-ominaisuutta.
Taustakuva
Kuvan asettaminen kelluvaksi selaimessa
Voimme käyttää CSS-ominaisuutta ”kellua” asettaaksesi kuvan kellua missä tahansa selainikkunassa. Katsotaanpa esimerkkiä, joka auttaa sinua ymmärtämään.
Täällä auton kuva kelluu tekstin oikealle puolelle.
Täällä auton kuva kelluu tekstin vasemmalle puolelle.
Image Tag -ominaisuudet
Seuraavat ovat kuvatunnisteen määritteet.
1) Kohdista
Mahdolliset arvot: Ylä, Pohja, Keski, Vasen tai Oikea.
Valaistusominaisuutta käytetään määrittämään kuvan kohdistus verkkosivulla.
2) Alt
Arvo tyyppi: Teksti
Altia käytetään määrittämään verkkosivun kuvan vaihtoehtoinen teksti. Tapauksissa, joissa IMG: n näyttäminen ei ole mahdollista, selain näyttää tämän tekstin käyttäjälle. Hakukoneet, kuten Google ja Bing, käyttävät tätä alt-tekstiä tulosten näyttämiseen kuvahaussa.
3) Border
Arvo tyyppi: pikseliä
Sitä käytetään käyttäjän määrittämän paksuuden reunan luomiseen kuvan ympärille. Se ei toimi HTML5: ssä.
4) Rajat alkuperä
Arvotyyppi: Anonyymi käyttö-käyttöoikeustiedot
Tätä ominaisuutta käytetään, kun haluamme määritellä, miten alkuperä alkuperävalokuvia tulisi käsitellä. Tätä käytetään enimmäkseen tapauksissa, joissa käytetään JavaScript-verkkosovellusten kangaselementtejä.
5) Korkeus
Arvotyyppi: Prosentit tai pikselit
Tätä tietysti käytetään kuvaamaan kuvan korkeutta HTML-verkkosivulla.
6) hspace
Arvo tyyppi: pikseliä
HTML5-muodossa ei tueta hspace-määritettä, jolla määritetään pikselinä, kuinka paljon valkoista tilaa lisättiin lisätyn kuvan vasemmalle ja oikealle.
7) Ismap
Arvotyyppi: sivun URL-osoite
ismap, jota määrittelimme mainitun kuvan palvelinpuolen kuvakarttaksi. Kun käyttäjä napsauttaa (tai napauttaa) kuvan sisällä, selaimet lähettävät napsautuksen (tai napautuksen) koordinaatit web-palvelimelle URL-osoitteena.
8) longdesc
Arvon tyyppi: URL
Longdesciä käytetään kuvaamaan yksityiskohtainen kuvaus kuvasta URL-osoitteen avulla. Attribuudissa käytettyä URL-osoitetta käytetään kuvan kuvauksena.
9) src
Arvon tyyppi: URL
src tarkoittaa lähdettä ja sitä käytetään osoitteen määrittämiseen, josta selain hakee kuvan. Tätä URL-osoitetta voidaan käyttää kuvaan saman palvelimen hakemiston sisällä ja se voi myös tallentaa kuvan kolmannen osapuolen palvelimelle eri verkkotunnuksen nimi.
10) usemap
Arvotyyppi: #kartan nimi
Usemap-määritettä käytetään kuvan määrittelemiseen asiakaspuolen kuvakartalle. Käyttökarttaa käytetään aina kartta- ja alue HTML-tunnisteiden kanssa.
11) vspace
Arvo tyyppi: pikseliä
HTML5: ssä ei tueta Vspace-määritettä, jotta asetetaan välilyönteinä käytettävien pikselien lukumäärä verkkosivun kuvan ylä- ja alaosassa.
12) leveys
Arvo tyyppi: pikseliä
Aivan kuten nimensä mukaan, leveysmääritteellä määritetään kuvan leveys HTML-verkkosivun sisällä.
Johtopäätös - HTML-kuvatunnisteet
Nyt kun olemme tarkastelleet, kuinka kuvat lisätään HTML-sivuille ja miten määritellä niiden määritteet, voimme luoda houkuttelevan näköisiä verkkosivuja verkkoprojektiin.
Sen lisäksi, että vain lisätään verkkosivulle visuaalista hohtoa, kuvat ovat arvokkaita, koska ne auttavat myös hakukoneiden optimoinnissa. Oikeiden alt-tunnisteiden ja kuvausten lisääminen kuviin auttaa hakukoneita ymmärtämään verkkosivun sisältöä paremmin ja parantamaan verkkosivun sijoitusta monissa tapauksissa.
Suositellut artikkelit
Tämä on opas HTML-kuvan tunnisteisiin. Tässä keskustellaan kuvatunnisteen ominaisuuksista sekä selaimen tuesta ja yhteensopivuudesta määritteiden kanssa. Saatat myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -
- Yksinkertainen opas HTML-komentoihin
- Johdanto mitä XHTML on?
- Oppaat HTML-määritteistä
- HTML-sovellukset ja suosituimmat käyttötavat
- Erilaiset HTML-luettelotyypit
- HTML-kehykset
- HTML-esteet