Hvordan legge til et bilde til din HTML5 Web Page

November 17  by Eliza

Nettsider er i stand til langt mer enn tekst, og hvis du bygge din nettside med HTML5, kan du legge til bilder i en rekke filtyper, inkludert JPG, GIF, og PNG. Figuren viser en nettside med et innebygd bilde; koden som følger viser deg sidens kode.

Hvordan legge til et bilde til din HTML5 Web Page

<! DOCTYPE HTML>
<Html lang = "no">
<Head>
<Title> imageDemo.html </ title>
<Meta charset = "UTF-8" />
</ Head>
<Body>
<H1> Bilde Demo </ h1>
<P>
<Img src = "monkey.png"
alt = "Bilde av en glad ape" />
</ P>
<H2> Denne siden har et bilde av en ape </ h2>
<P>
Denne apen kalles "Suzanne". Det er en standard
objekt i en utrolig gratis 3D-modelleringsverktøy
kalt 'Blender.
</ P>
</ Body>
</ Html>

Legge til et bilde er relativt enkelt; Følg disse trinnene:

  1. Identifisere bildet du vil bruke.

    Pass på at du har tillatelse til å bruke bildet på ditt nettsted.

  2. Endre bildet hvis det er nødvendig.

    Det er best å endre størrelsen på bildene før du bruker dem på nettet. Du kan bruke kommersielle bilde-manipulasjon programvare eller gratis programmer som IrfanView og Gimp.

  3. Velg ditt bildetype.

    Hvis bildet er i et annet land enn web-vennlig .jpg, .gif eller .png-format, kan du bruke et verktøy som IrfanView eller Gimp å endre den til en av disse formatene.

  4. Sette ditt bilde på rett sted.

    Sette bildefilen i samme katalog som HTML-fil. På den måten når du legger siden din til serveren, kan du flytte bildet også.

  5. Bygg din side som normalt.

    Bildet vil bli plassert med en kode innebygd i kroppen.

  6. Bruke <img> -taggen for å indikere bildet.

    Bygge inn denne koden i en <p> </ p> (avsnitt) eller <div> </ div> (divisjon) pair slik at siden validerer korrekt.

  7. Bruk src attributt for å indikere filen med bildet.

    Hvis bildefilen er i samme katalog som web-siden, er alt du trenger navnet på bildet. Hvis bildefilen er andre steder på Internett, kan du bruke en fullstendig URL.

  8. Inkluderer alt attributt som beskriver bildet.

    En alt-koden er viktig for besøkende som ikke kan se ditt bilde - brukere med synshemming, mennesker som har slått av bilder for å øke surfing hastighet, og søkemotor roboter, som ikke kan se bildene, men leser alt koder.

  9. Avslutt bildekode med en /.

    Img tag er en spesiell one-shot tag som ikke krever (eller tillate) en slutt tag. Den strek ved slutten av koden angir dette.