Hvordan legge inn bilder i HTML

Hvordan legge inn bilder i HTML


En av de beste måtene å tiltrekke interesse for og holde oppmerksomheten på et nettsted er å inkludere visuelt tiltalende elementer som farger og bilder. Få mennesker ønsker å lese en webside som inneholder ingenting annet enn tekst; bilder gir en visuell referanse som knytter den skriftlige innholdet med en kunstnerisk representasjon av sidens formål. Bildene er vanligvis inkludert som en del av websiden HTML-kode, og er inkludert og stylet med attributter som følger med HTML "<img>" tag.

Bruksanvisning

1 Velg et lokalt bilde eller laste ned en, noe som gjør at det er avgiftsfri og lovlig å bruke. Bildet må være i JPEG-format, som har filtypen JPG eller JPEG. Noter bildets bredde og høyde, for eksempel 737 piksler (W) av 1050 piksler (H).

2 Lagre det valgte bildet i stedet på webserveren, eller på harddisken, inneholder som vanligvis websider. Plassere bildet på samme sted som siden sikrer at siden vil være i stand til å få tilgang til bildefilen når den laster.

3 Opprett en ny fil som heter "postPicture.html" og legge til noen grunnleggende HTML-kode som inneholder en "<html>" tag, en "<head>" tag, et "</ head>" tag, en "<body>" tag en "</ body>" tag og en "</ html>" tag.

<Html>

<Head> </ head>

<Body> </ body>

</ Html>

4 Legg til et bilde tag ( "<img>") mellom filen "<body>" og "</ body>" koder. Sett "<img>" tag er "src" -attributtet til "myImage.jpg", eller hva bildets filnavn er.

<Html>

<Head> </ head>

<Body>

<Img attributt til "<img>" tag og sette attributtet tekst til "Graphic navn". Den "alt" tekst vises hvis bildet ikke skal laste.

<Html>

<Head> </ head>

<Body>

<Img alt = "Graphic navn">

</ Body>

</ Html>

6 Legg en "width" attributt og en "høyde" attributt til "<img>" tag. Still "width" attributt til myImage.jpg bredde og "height" attributt til myImage.jpg høyde (for eksempel 737px ved 1050px). Lagre og lukk postPicture.html.

<Html>

<Head> </ head>

<Body>

<Img alt = "Graphic navn" width = "737px" height = "1050px">

</ Body>

</ Html>

7 Åpne postPicture.html i en nettleser. Kontroller at bildet "myImage.jpg" vises med riktig bredde og høyde, og har riktig alt-tekst.

Hint

  • Integrering bildene godt inn i eksisterende websider er en av de viktigste, og ofte, en av de mest tidkrevende, aspekter av web-side design. Det er mange nettsteder tilgjengelig for å hjelpe med denne ferdigheten, samt mange HTML-koder for å støtte sidens design utvikling. Se avsnittet for informasjon og opplæring på disse kodene.
  • Den "<img>" tag kan bli stylet bruker gjennomgripende stilark. Stiler som kan endres ved hjelp av CSS inkluderer bildets høyde, bredde, grensen, og plassering i web siden.
  • Den "<img>" HTML-koden er en singleton tag. Lukk tag med en fremtidsstrek "/" for å gjøre websiden XHTML-kompatibel.
  • Bilder tatt med i nettsider skal alltid legge noe til websiden. Hvis et bilde ikke gir opplysninger eller forbedre siden, mener at det ikke skal være med.
  • Den "<img>" tag kan inngå i andre HTML-koder, slik som "<center>" eller "<div>" tags.
  • Bilder på websider vises bare hvis plasseringen angitt i "src" attributtet er riktig. Hvis et bilde ikke lastes riktig, er dette vanligvis den første attributt for å sjekke.
  • Bruk aldri en grafikk på en webside som fører til brudd på opphavsretten. Enten betale for retten til å bruke bildet eller lage og bruke originale grafikk.