Hvordan lager jeg et bildegalleri i HTML?

August 16

Et bildegalleri på bloggen eller nettsiden din side kan være et attraktivt tillegg til nettstedet. I tillegg til at du kan vise bilder av venner og familie, kan et bildegalleri tillate en person som eier et kommersielt nettsted for å vise bilder av produkter eller tjenester han tilbyr. Mens en god del av HTML ferdigheter er nødvendig for å skape et bildegalleri, du også bør være litt kjent med CSS programmeringsspråk.

Bruksanvisning

1 Logg inn på webserveren din eller blogg, og naviger til siden hvor du vil opprette bildegalleriet.

2 Klikk på stedet på siden der du vil sette inn bildegalleriet.

3 Lim inn følgende CSS-koden like under <html> -taggen på din side:

<Head>

div.img

{

margin: 2 piksler;

border: 1px solid # 0000ff;

height: auto;

width: auto;

float: left;

text-align: center;

}

div.img img

{

display: inline;

margin: 3px;

border: 1px solid # ffffff;

}

div.img a: hover img

{

border: 1px solid # 0000ff;

}

div.desc

{

text-align: center;

font-weight: normal;

width: 120px;

margin: 2 piksler;

}

</ Style>

</ Head>

4 Type <body> på neste linje etter at CSS-kode for å markere at kroppen din tekst vil følge.

5 Lim inn følgende HTML-kode:

</a>

<Div class = "desc"> Legg til en beskrivelse av bildet her </ div>

</ Div>

</a>

<Div class = "desc"> Legg til en beskrivelse av bildet her </ div>

</ Div>

</a>

<Div class = "desc"> Legg til en beskrivelse av bildet her </ div>

</ Div>

</a>

<Div class = "desc"> Legg til en beskrivelse av bildet her </ div>

</ Div>

6 Erstatt "http://www.link1here.com" eller "http://www.link2here.com" osv i trinn 5 med selve koblingen du vil åpne når det angitte bildet er klikket.

7 Erstatt "bilde1.jpg", "bilde2.jpg" osv med selve filen banen til bildet du ønsker å plassere i galleriet.

8 Erstatt "alt =" First Image "eller" alt = "Andre tjenester" osv med den alternative teksten du vil skal vises for synshemmede.

9 Erstatt "Legg til en beskrivelse av bildet her" med en bildetekst eller beskrivelse av bildet.

10 Lukk galleriet med lukking koder for kroppen og HTML-dokumentet. Kodene skal se slik ut:

</ Body>

</ Html>

11 Klikk "Publiser" på bloggen din eller web server.