Come creare una galleria HTML

March 19

Una galleria HTML è un modo per mostrare le foto scattate in pulito, colonne e righe organizzate. È possibile condividere qualsiasi immagine o elemento grafico che si possiede, a patto che le loro estensioni di file terminano con .gif, .jpg, .png o .tff. Imparare a costruire una a quattro colonne, tabella a due-fila con quattro grafiche e quattro titoli, centrare la tabella nella pagina e aggiungere un titolo alla galleria.

istruzione

Galleria di base

1 Come creare una galleria HTML

Digitare il seguente codice per creare la pagina web di base XHTML:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "it" lang = "it">
<Head>
<Title> </ title>
</ Head>
<Body>
</ Body>
</ Html>

2 Come creare una galleria HTML


Digitare l'inizio e la fine <table> </ table> tag tra l'inizio <body> e termina </ body> tag.
<Table>
</ Table>

3 Come creare una galleria HTML


Aggiungere la riga della tabella che iniziano e terminano tag. digitarli tra l'inizio e la fine <table> </ table> tag:
<Tr>
</ Tr>

4 Come creare una galleria HTML


Aggiungere i tag di dati tavolo tra tag <tr> </ tr>. Questa sarà la prima cella della tabella, e la prima colonna della tabella. Il nome che useremo per questa cella è prima colonna, riga uno.
<Td> </ td>

5 Come creare una galleria HTML


Aggiungi il tuo primo immagine utilizzando il tag <img />, come illustrato:
<Img alt = "Titolo del file" width = "20%" />
Spiegazione:
Il tag <img /> richiede due attributi per essere compatibile con le attuali standard web-codifica: il src (sorgente) attributo, che punta direttamente al punto in cui il file è memorizzato sul server, e l'attributo alt (testo alternativo), che descrive la grafica per i non vedenti. Il tag <img /> non ha un tag di chiusura, in modo da separare l'ultimo carattere con uno spazio, quindi una barra in avanti e poi il segno di maggiore.
Nota: A scopo dimostrativo, userò una serie di grafiche geometriche.

6 Come creare una galleria HTML


Dopo il tag di dati della tabella finale, (</ td>), premere "Invio" e aggiungere un altro paio di <td> </ td> tag. Questo sarà seconda colonna, riga uno.
<Td> </ td>

7 Come creare una galleria HTML


Aggiungi la tua seconda immagine tra tag <td> </ td>, facendo in modo che si ricorda il due attributi richiesti, src e alt.
<Img alt = "Square grafico" />

8 Come creare una galleria HTML


Aggiungere una terza coppia di tag <td> </ td>, insieme con il tag "<img />". Questo sarà terza colonna, riga uno.
<Td> <img alt = "Triangolo grafico" /> </ td>

9 Come creare una galleria HTML


Aggiungere una quarta coppia di tag <td> </ td>, insieme con il tag immagine. Questo sarà colonna quattro, fila uno.
<Td> <img alt = "Rettangolo grafico" /> </ td>

10 Salvare e caricare il documento. Dovrebbe apparire come l'immagine allegata.

11 Digitare una seconda coppia di <tr> </ tr> tag dopo il tag table fila finale e prima del tag di chiusura per la tavola, come indicato:
</ Tr>
<Tr>
</ Tr>
</ Table>

12 Tra la seconda coppia di <tr> </ tr> tag, tipo quattro coppie di <td> </ td> tag, come mostrato:
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
Questi tag saranno le colonne da uno a quattro, seconda fila.

13 Digitare una coppia di tag grassetto tra ogni inizio e la fine "i dati della tabella" tag, come indicato:
<Td> <b> </ b> </ td>
<Td> <b> </ b> </ td>
<Td> <b> </ b> </ td>
<Td> <b> </ b> </ td>

14 Immettere i simboli corsivo (<i> </ i>) tra i tag grassetto, come illustrato:
<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 Digitare il titolo di ogni grafico tra il corsivo tag. Salvare e caricare il file.

Raccolta formati

16 Come creare una galleria HTML


Digitare il tag inizio "centro" tra il tag di inizio "corpo" e il tag inizio "tavolo", come indicato:
<Body>
<Center>
<Table>

17 Come creare una galleria HTML


Digitare il tag di chiusura "centro" tra il tag di fine "tavolo" e il tag di chiusura "corpo", come indicato:
</ Table>
</ Center>
</ Body>
Spiegazione:
I tag "centro" sarà in orizzontale centrare la tabella nella pagina.

18 Come creare una galleria HTML


Digitare il seguente attributo all'interno del principio "tavolo" tag per creare i bordi intorno al tavolo e attorno ad ogni singola cellula all'interno della tabella, come indicato:
<Table border = "1">
La tabella dovrebbe essere simile alla grafica allegata.

19 Come creare una galleria HTML


Digitare il seguente tra i tag <table border = "1" tag e il tag riga della tabella inizio:
<Tr>
<Th colspan = "4"> My Gallery </ th>
</ Tr>
Spiegazione:
L'intestazione della tabella, o <th> </ th> tag, sono utilizzati per creare una cella in cui il testo è centrata e in grassetto. L'attributo "colspan" crea una cella lunga, che è, in questo caso particolare, lungo quattro colonne, come indicato dal numero quattro tra virgolette.

20 Come creare una galleria HTML


Digitare i <h1> </ h1> tag di titolo attorno alla parola "Galleria" per rendere il titolo della galleria spiccano:
<Tr>
<Th colspan = "4"> <h1> My Gallery </ h1> </ th>
</ Tr>

21 Come creare una galleria HTML


Salvare e caricare il file sul server. Galleria dovrebbe apparire come l'allegata.

Consigli e avvertenze

  • Aggiungere più <td> </ td> tag per ulteriori colonne a destra e più <tr> </ tr> tag per più righe below.Get creativo: Aggiungere il "bgcolor" attributo per ogni tag <td> inizio e decidere un colore per rendere lo sfondo di ogni cella. Se si desidera avere un colore unico, aggiungere l'attributo per l'inizio tag <table>.