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.
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
Digitare l'inizio e la fine <table> </ table> tag tra l'inizio <body> e termina </ body> tag.
<Table>
</ Table>
3
Aggiungere la riga della tabella che iniziano e terminano tag. digitarli tra l'inizio e la fine <table> </ table> tag:
<Tr>
</ Tr>
4
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
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
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
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
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
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.
16
Digitare il tag inizio "centro" tra il tag di inizio "corpo" e il tag inizio "tavolo", come indicato:
<Body>
<Center>
<Table>
17
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
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
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
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
Salvare e caricare il file sul server. Galleria dovrebbe apparire come l'allegata.