Hoe maak je een HTML-galerie

Een HTML-galerie is een manier om te pronken met de foto's die u hebt genomen in nette, georganiseerde kolommen en rijen. U kunt elke foto of afbeelding die u bezit, delen, zolang hun bestandsextensies in .gif, .jpg, .png of .tff eindigen. Leer hoe het bouwen van een vier kolommen en twee rijen tabel met vier afbeeldingen en vier titels, midden in de tabel op de pagina en een titel toevoegen aan de galerie.

Instructies

Basic Gallery

1

Typ de volgende code als u wilt maken van de eenvoudige XHTML-webpagina:
<! DOCTYPE html publiek "-//W3C//DTD XHTML 1.0 Transitional / / nl"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "nl" lang = "nl" >
< head >
< titel >< / title >
< / head >
< body >
< / body >
< / html >

2

Typ het begin en einde < tabel >< / tabel > codes tussen de < body > van begin en einde < / body > u op tags.
< tabel >
< / table >

3Hoe maak je een HTML-galerie


De tabelrij begin en einde tags toevoegen. Typt u deze tussen het begin en einde < tabel >< / tabel > tags:
< tr >
< /tr >

4Hoe maak je een HTML-galerie


Voeg de tabel gegevens codes tussen de < tr >< /tr >-codes. Dit is de eerste cel in de tabel, en ook de eerste kolom van de tabel. De naam die we voor deze cel gebruiken zullen is één, rij een.
< td >< /td >

5Hoe maak je een HTML-galerie


Uw eerste afbeelding toevoegen met de < img / > tag, zoals:
< img alt = "Titel of File" width = "20%" / >
Uitleg:
De < img / > tag vereist twee attributen om te voldoen aan de huidige normen van het web-codering: het kenmerk src (source), die wijst direct naar waar het bestand is opgeslagen op uw server, en het kenmerk alt (alternatieve tekst), waarin graphics voor visueel gehandicapten. De < img / > tag heeft geen een eind-tag, dus het laatste teken te scheiden met een spatie, dan een slash en vervolgens hoe groter dan-teken.
Opmerking: Voor demonstratiedoeleinden, ik zal met behulp van een reeks van geometrische afbeeldingen.

6Hoe maak je een HTML-galerie


Na de laatste tabel gegevens tag, (< /td >), druk op "Enter" en een ander paar < td >< /td >-codes toe te voegen. Dit zal de kolom twee, rij 1.
< td >< /td >

7

Uw tweede afbeelding tussen de < td >< /td > codes, om ervoor te zorgen dat u niet de twee vereiste kenmerken, src en alt vergeet toevoegen.
< img alt = "Grafische Square" / >

8Hoe maak je een HTML-galerie


Voeg een derde paar < td >< /td > codes, langs met uw "< img / >" tag. Dit zal drie, rij een.
< td >< img alt = "Grafische driehoek" / >< /td >

9

Een vierde paar < td >< /td > codes, samen met uw image-tag toevoegen. Dit zal vier, rij een.
< td >< img alt = "Grafische rechthoek" / >< /td >

10

Opslaan en uploaden van uw document. Het moet lijken op de bijgevoegde afbeelding.

11

Typ een tweede paar < tr >< /tr >-codes na de eindcode van tabel rij en vóór de eindcode voor tabel, zoals:
< /tr >
< tr >
< /tr >
< / table >

12

Tussen het tweede paar van < tr >< /tr > tags, typt u vier paar < td >< /td >-codes, zoals:
< td >< /td >
< td >< /td >
< td >< /td >
< td >< /td >
Deze tags zullen kolommen één tot vier, rij twee.

13

Typ een paar vette codes tussen elk begin en einde "tabelgegevens" tags, zoals:
< td >< b >< /b >< /td >
< td >< b >< /b >< /td >
< td >< b >< /b >< /td >
< td >< b >< /b >< /td >

14

Typ de cursief codes (< i >< /i >) tussen de vet-codes, zoals:
< td >< b >< i >< /i >< /b >< /td >
< td >< b >< i >< /i >< /b >< /td >
< td >< b >< i >< /i >< /b >< /td >
< td >< b >< i >< /i >< /b >< /td >

15

Typ de titel van elke afbeelding tussen de tags cursief. Opslaan en uploaden van uw bestand.

Opmaakgalerie

16Hoe maak je een HTML-galerie


Typ het begin "center"-label tussen de begin "body" tag en de tag begin "tafel", zoals:
< body >
< center >
< tabel >

17

Typ de label van het einde "center" tussen de eindcode voor de "tafel" en de eindcode voor de "body", zoals:
< / table >
< / center >
< / body >
Uitleg:
De codes van het "centrum" zal de tabel op de pagina horizontaal centreren.

18

Typ het volgende kenmerk binnen de tag "tabel" begin maken grenzen rond de tafel en rond elke afzonderlijke cel in de tabel, zoals:
< tabelrand = "1" >
De tabel moet uitzien als de bijgevoegde afbeelding.

19

Typ het volgende tussen de < tabelrand = "1" tag en de tag begin tabel rij:
< tr >
< th colspan = "4" > mijn galerij < /th >
< /tr >
Uitleg:
De tabelkoptekst of < th >< /th >-tags, worden gebruikt voor het maken van een cel waar tekst gecentreerd en vet is. Het kenmerk "colspan" creëert een lange cel, die, in dit geval, vier kolommen lang, zoals aangegeven door het getal vier in aanhalingstekens.

20

Typ de < h1 >< / h1 > Koptags rond de woorden "Mijn galerij" om de titel van de galerij te maken onderscheiden:
< tr >
< th colspan = "4" >< mijn galerij h1 > < / h1 >< /th >
< /tr >

21

Opslaan en uw bestand uploaden naar uw server. Galerie moet uitzien als de aangesloten.

Tips & waarschuwingen

  • Meer < td >< /td > tags toevoegen voor extra kolommen naar rechts en meer < tr >< /tr >-codes voor meer rijen onder. Wees creatief: Voeg de "bgcolor"-kenmerk toe aan elke < td > begin-tag en het beslissen over een kleur om de achtergrond van elke cel te maken. Wilt u één uniforme kleur hebben, voeg het kenmerk toe aan het begin < tabel >-tag.