Kuvan lisääminen HMTL: llä

Jos luot oman Web-sivun tai henkilökohtaisen blogin, on normaalia, että haluat mukauttaa sen niihin kuviin, joiden avulla voit määritellä sivustosi tai kuvata, mitä selität. Tällä tavoin sinun on tiedettävä, miten voit lisätä kuvan HTML: llä, mikä on aivan yksinkertaista, jos noudatat alla olevaa selostusta.

HTML-kieli on kieli, jota käytämme omaa verkkosivua luodessamme . Voimme syöttää editorimme ja siitä kohdasta, jossa haluamme lisätä kuvan, meidän on käytettävä koodeja tai tarvittavaa reittiä, jotta kuva voidaan nähdä, kun pääsemme verkkoon tai blogiin. Voit tehdä tämän opastamalla itseäsi nyt.

Vaiheet, joissa kuva lisätään HTML-koodiin

  1. Paras asia, jolla voit tietää, miten lisätä kuva HTML: llä, on se, että meillä on esimerkki. Voit tehdä tämän ottamalla valokuvan, jonka haluat lisätä ja tallentaa sen tietokoneeseen. Olemme ottaneet yhden pennun ja olemme kutsuneet sitä tällä tavalla "perro-divertido.jpg".
  2. Meidän on lisättävä tämä kuva HTML-koodiin seuraavasti:
  3. Tämä on koodi, jolla luodaan kuvaelementti. Seuraavaksi kirjaimia " src " käytetään attribuuttina ja ne edustavat "lähdettä". Pohjimmiltaan se, mitä teemme, on tarjota Web-selaimelle kuvan lähde. Luonnollisesti lähde-attribuutin arvo on "perro-divertido.jpg". Tässä esimerkissä oletetaan, että kuvatiedosto sijaitsee samassa hakemistossa kuin HTML-tiedosto.
  4. Jos esimerkiksi kuvasi oli "kuvien" kansion sisällä, koodi muuttuisi ja se näyttää siltä:
  5. Kuten näette, molemmissa koodiesimerkkeissä emme ole vielä liittäneet lopputunnistetta , koska kuvan koodi on "automaattinen sulkeminen" -elementti. Tämä johtuu siitä, että toisin kuin kappaleessa, meillä ei ole paljon sisältöä elementtimme sisällä , mutta yksi kuva. Itse asiassa HTML5 ei pakota meitä koskaan "sulkemaan" elementtejä, mutta organisatorisista syistä on aina suositeltavaa yrittää sisällyttää perinteiset sulkemistunnisteet useimmille elementeille.
  6. Lopuksi on olemassa lisäkoodi, joka meidän on lisättävä ennen kuvan lataamista HTML-muodossa. Se koostuu määritteestä ja arvosta "alt" meidän kuvallemme. "Alt" -määrite tarkoittaa "vaihtoehtoa" ja sitä käytetään tarjoamaan vaihtoehto, joka perustuu kuvan kuvaukseen katsojille tekstissä, jos kuva ei lataudu tai jos heillä on visuaalinen vamma. Näin koodimme näyttää lopulta: