Hvordan lage bilder side om side i HTML

December 8

Ved hjelp av HTML, kan du plassere bilder ved siden av hverandre i en webside i minst tre ulike måter: ved hjelp av tabeller, med Cascading Style Sheets, eller ved å plassere bildekoder ved siden av hverandre uten andre HTML-koder mellom dem. Å vite hvordan man skal bruke minst en av disse metodene kan du presentere nettsidens grafisk innhold på en organisert måte. Vær oppmerksom på at å plassere bilder ved siden av hverandre ikke garantere alle bildene vil være synlig på en gang. Beskjære bildene til dimensjoner som fungerer med resten av innholdet på siden din.

Bruksanvisning

Plain IMG Tag

1 Åpne en ny fil i et tekstbehandlingsprogram eller tekstredigeringsprogram som Notisblokk.

2 Skriv eller lim inn følgende blank HTML-dokumentet inn i tekstbehandlingsprogrammet. Dette dokumentet har ingen bilde koder ennå. Du vil legge til de neste.

<Html>

<Body>

</ Body>

</ Html>

3 Skriv inn følgende HTML-koder etter "<body>" tag. Disse kodene fortelle nettleseren til å laste inn bilder på websiden. Siden det er ingen avsnitt, linjeskift eller andre HTML-koden i mellom de to bilde-koder, vil bilde kodene vises side om side på websiden. Dette vil ikke være sant hvis du endrer størrelsen på nettleseren din til mindre enn full bredde på skjermen, eller hvis bildene er svært bredt.

<Img eller ".html", og som type "ren tekst". Dette sikrer din nettleser kan tolke HTML-koder i filen.

5 Åpne Windows Utforsker, og naviger til en mappe som inneholder to eller flere JPEG-filer.

6 Kopiere to JPEG-filer til mappen som inneholder HTML-dokumentet, som du lagret i trinn 4.

7 Gi nytt navn til en av JPEG-filer som "imageLeft.jpg," og den andre som "imageRight.jpg.

8 Klikk på filen du lagret i trinn 4, og trykk "Enter" for å åpne filen i din standard nettleser. Nettleseren vil vise to bilder ved siden av hverandre.

tabeller

9 Lim inn følgende blank HTML-dokument til et tekstbehandlingsprogram eller tekstredigeringsprogram.

<Html>

<Body>

</ Body>

</ Html>

10 Lim inn følgende HTML-koder for å definere en tabell etter "<body>" tag. Tabellens to celler er ved siden av hverandre. Når man setter inn bilder i disse cellene, vil bildene også være ved siden av hverandre.

<Tr>

<Td>

</ Td>

<! - Kolonne to ->

<Td>

</ Td>

</ Tr>

</ Table>

11 Skriver følgende etter den første "<td>", som begynner den første celle i tabellen. Denne HTML-koden laster inn et bilde i tabellen celle.

<Img tag etter den andre "<td>" tag, og endre "imageleft.jpg" streng til "imageright.jpg"

1. 3 Lagre dokumentet som type "tekst", og skriv noen filnavn som slutter med "htm" eller ".html".

14 Åpne Windows Utforsker, og naviger til en mappe som inneholder minst to JPEG-filer. Du kan finne slike filer ved å klikke på "Pictures" linken øverst til venstre ruten i Windows Utforsker.

15 Kopiere to JPEG-filer i mappen som inneholder tekstfilen du lagret i trinn 5.

16 Gi nytt navn til en av JPEG-filer som "imageLeft.jpg," og den andre som "imageRight.jpg."

17 Dobbeltklikk eller trykk "Enter" på filen for å åpne den i nettleseren din. Du vil se en tabell der cellene inneholder ett bilde til høyre for et annet bilde.