Sådan indsættes et billede med HMTL

Hvis du opretter din egen webside eller personlige blog, er det normalt, at du vil tilpasse det med de billeder, der tjener til at definere dit websted eller for at illustrere det, du forklarer. På denne måde skal du vide, hvordan du indsætter et billede med HTML, noget, der er ret simpelt, hvis du følger trinvejledningen, som vi forklarer nedenfor.

HTML-sproget er det sprog, vi bruger, når vi opretter vores egen webside . Vi kan indtaste vores editor og fra det punkt, hvor vi ønsker at indsætte billedet, skal vi bruge koderne eller den nødvendige rute, så billedet kan ses, når vi kommer ind på nettet eller bloggen. For at gøre dette, guide dig selv som vi fortæller dig nu.

Trin til at indsætte et billede med HTML

  1. Det bedste for dig at vide, hvordan du indsætter et billede med HTML, er, at vi har et eksempel. For at gøre dette skal du tage et billede, du vil indsætte og gemme det på din computer. Vi har taget den af ​​en hvalp, og vi har kaldt det på denne måde "perro-divertido.jpg".
  2. Vi skal indsætte det pågældende billede i HTML med følgende kode:
  3. Dette er koden til at oprette et billedelement. Derefter bruges bogstaverne " src " som en attribut og repræsenterer "kilde". Dybest set vil det, vi gør, være at give webbrowseren en værdi for billedkilden. Naturligvis er værdien for kildeattributten "perro-divertido.jpg". Dette eksempel forudsætter, at din billedfil er placeret i samme mappe som din HTML-fil.
  4. Hvis du for eksempel havde din billedfil inde i en mappe kaldet "billeder", ville koden ændre sig, og det ville se ud:
  5. Som du kan se, har vi i begge kodeeksempler ikke medtaget en slutmærke hidtil , fordi billedkoden er et "automatisk lukningselement". Dette skyldes, at vi i modsætning til et afsnit ikke har en stor mængde indhold inden for vores element , men et enkelt billede. Faktisk tvinger HTML5 os ikke til aldrig at "lukke" vores elementer, men af ​​organisatoriske grunde er det altid tilrådeligt at forsøge at inkludere traditionelle lukkekoder for de fleste elementer.
  6. Endelig er der et ekstra element af kode, som vi skal tilføje, før vi er færdige med at uploade billedet i HTML. Det består i at tildele en egenskab og værdi "alt" til vores billede. Attributten "alt" betyder "alternativ" og bruges til at give et alternativ baseret på en beskrivelse af billedet i tekst til seere, hvis billedet ikke indlæses, eller hvis de har en visuel handicap. Sådan ser vores kode til sidst: