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 -

  1. Yksinkertainen opas HTML-komentoihin
  2. Johdanto mitä XHTML on?
  3. Oppaat HTML-määritteistä
  4. HTML-sovellukset ja suosituimmat käyttötavat
  5. Erilaiset HTML-luettelotyypit
  6. HTML-kehykset
  7. HTML-esteet

Luokka:

Web-kehitystyökalut