HTML IMG-tunniste säätelee kuvien ja muiden staattisten graafisten objektien lisäämistä verkkosivulle. Tämä yhteinen tunniste tukee useita pakollisia ja valinnaisia määritteitä, jotka lisäävät kykyäsi suunnitella kiinnostava, kuviin keskittyvä verkkosivusto.
Esimerkki täysin muodostetusta HTML IMG -tagista näyttää tältä:
Vaaditut IMG-tunnisteiden attribuutit
src = "/ polku / kohteeseen / kuva.jpg"
Ainoa attribuutti, jonka tarvitset kuvan saamiseksi verkkosivulle, on src määritteen. Tämä attribuutti identifioi näytettävän kuvatiedoston nimen ja sijainnin.
alt = "Kuvan kuvaus"
Jos haluat kirjoittaa kelvollisen XHTML: n ja HTML4: n, alt attribuutti vaaditaan myös. Tätä määritettä käytetään tarjoamaan ei-visuaalisille selaimille teksti, joka kuvaa kuvaa. Selaimet näyttävät vaihtoehtoisen tekstin eri tavoin. Jotkut näyttävät sen ponnahdusikkunana, kun viet hiiren kuvan päälle, toiset näyttävät sen ominaisuuksissa, kun napsautat kuvaa hiiren kakkospainikkeella, ja jotkut eivät näytä sitä ollenkaan.
Käytä vaihtoehtoinen teksti antaa kuvasta lisätietoja, jotka eivät ole merkityksellisiä tai tärkeitä verkkosivun tekstille. Muista kuitenkin, että näytönlukuohjelmissa ja muissa vain tekstiä sisältävissä selaimissa teksti luetaan yhdessä sivun muun tekstin kanssa. Sekaannusten välttämiseksi käytä kuvaavaa vaihtoehtoista tekstiä, joka sanoo (esimerkiksi) "Tietoja verkkosuunnittelusta ja HTML: stä" pelkän "logon" sijaan.
alt teksti on myös välttämätöntä hakukoneoptimoinnille. Botit, joita hakukoneet, kuten Google, käyttävät sivustojen sisällön tutkimiseen, eivät "näe" kuvia. He luottavat alt tekstin avulla voit määrittää, mitä sivulla on.
Sisään HTML5, alt määritettä ei aina vaadita, koska voit käyttää a kuvateksti lisätäksesi siihen lisää kuvausta. Voit käyttää tätä määritettä myös osoittamaan tunnuksen, joka sisältää täydellisen kuvauksen:
aria-kirjeldatudby = "Kuvan kuvaus"
Vaihtoehtoista tekstiä ei myöskään vaadita, jos kuva on puhtaasti koristeellinen, kuten grafiikka verkkosivun yläosassa tai kuvakkeet. Mutta jos et ole varma, lisää vaihtoehtoinen teksti joka tapauksessa.
Määritteiden mitoitus
leveys = "500"ja.
korkeus = "500"Suunnittelustasi riippuen. korkeus ja. leveys
Yleensä haluat, että kuvan koko määritetään CSS: ssä. Useimmiten se johtuu kuvan ylätason säilön mitoista. Tämä lähestymistapa antaa eniten joustavuutta sopeutumalla erilaisiin näytön kooihin. On kuitenkin edelleen tapauksia, joissa haluat ehkä määrittää kuvan mitat HTML-määritteinä.
Muut hyödylliset IMG-määritteet
title = "Kuvaileva kuvan nimi"Attribuutti on yleinen attribuutti, jota voidaan käyttää mihin tahansa. HTML-elementti. Lisäksi. otsikko
Useimmat selaimet tukevat otsikko määritettä, mutta he tekevät sen eri tavoin. Jotkut näyttävät tekstin ponnahdusikkunana, kun taas toiset näyttävät sen tietonäytöissä, kun käyttäjä napsauttaa kuvaa hiiren kakkospainikkeella. Voit käyttää otsikko attribuutti kirjoittaa lisätietoja kuvasta, mutta älä luota siihen, että nämä tiedot ovat piilossa tai näkyvä. Älä ehdottomasti käytä tätä piilottaaksesi hakukoneiden avainsanat. Tätä käytäntöä rangaistaan nyt useimmissa hakukoneissa.
usemap = ""ja.
ismap = ""Nämä kaksi määritettä asettavat asiakaspuolen () ja palvelinpuolen (ISMAP) kuvakartat
longdesc = "Tarkempi kuvaus kuvastasi". pitkädesc
Vanhentuneet ja vanhentuneet IMG-attribuutit
Useat määritteet ovat nyt vanhentuneita HTML5: ssä tai vanhentuneita HTML4: ssä. Parhaan HTML-koodin saamiseksi sinun pitäisi löytää muita ratkaisuja näiden attribuuttien käyttämisen sijaan.
reunus = "3"
tasaa = "vasen"Tämän määritteen avulla voit sijoittaa kuvan tekstin sisään ja saada tekstin virtaamaan sen ympärille. Voit kohdistaa kuvan oikealle tai vasemmalle. Se on vanhentunut. kelluva CSS-ominaisuus
hspcace = "10"ja.
vspace = "10". hspace ja. vspace määritteet lisäävät välilyönnin vaakasuoraan ( hspace) ja pystysuunnassa ( vspace
lowsrc = "/ polku / kohteeseen / lowres.jpg". matala attribute tarjoaa vaihtoehtoisen kuvan, kun kuvalähteesi on niin suuri, että se latautuu erittäin hitaasti. Esimerkiksi sinulla voi olla kuva, jonka koko on 500 kt, jonka haluat näyttää verkkosivullasi, mutta 500 kt: n lataaminen kestää kauan. Joten luot paljon pienemmän kopion kuvasta, ehkä mustavalkoisena tai vain erittäin optimoituna, ja laitat sen kuvaan. matala
matala attribuutti lisättiin Netscape Navigator 2.0 -tagiin. Se oli osa DOM-tasoa 1, mutta poistettiin sitten DOM-tasosta 2. Selaimen tuki on ollut hieno tämän attribuutin kohdalla, vaikka monet sivustot väittävät, että kaikki modernit selaimet tukevat sitä. Se ei ole vanhentunut HTML4: ssä eikä vanhentunut HTML5: ssä, koska se ei koskaan ollut virallinen osa kummassakaan määrityksessä.
Vältä tämän attribuutin käyttöä ja optimoi kuvasi sen sijaan, että ne latautuvat nopeasti. Sivun latausnopeus on kriittinen osa hyvää web-suunnittelua, ja suuret kuvat hidastavat sivuja valtavasti - vaikka käytät matala määritteen.