Elenco TAG HTML 4

25 settembre 2010 |

Con questa semplice guida voglio inaugurare la sezione Programmazione Web. Questa sezione tratterà argomenti come ASP, PHP, JavaScript etc, che sono linguaggi di programmazione dedicati al mondo di internet. Questi linguaggi di programmazione si basano tutti sull’HTML, quindi le prime guide di Programmazione Web verteranno su quest’ultimo.

E’ molto difficile ricordarsi tutti i Tag HTML mentre si sta componendo una pagina Web, quindi si ricorre a google o a manuali cartacei e ci si ritrova spesso a sfogliare pagine e pagine di teoria sull’HTML cercando il Tag del quale non vi ricordate il nome. In questa prima guida (costruita basandomi sui miei appunti di informatica) vi propongo un elenco dei Tag con una minima descrizione, così da trovare subito il Tag che vi interessa.

Questa quindi non vuol essere una guida o manuale di HTML, ma un semplice aiuto per affrontare le guide successive. Se invece siete ancora alla base dell’HTML, vi rimando al sito html.it dove risiedono tutte le guide e i manuali che fanno al caso vostro!

PS: Il testo in corsivo all’interno dell’elenco sono i parametri dei Tag, quindi sono le informazioni dei tag che potete personalizzare.

Struttura logica di una Pagina Web:

Intestazione di una pagina Web:

- Assegnazione di un titolo alla pagina Web (Titolo della finestra del Browser)

<title> Titolo_Pagina </title>

Corpo della Pagina

- Margini
<body leftmargin=”0” topmargin=”0” marginwidth=”0” marginheight=”0“>

- Colore del testo
<body text=”red“>

- Colore dei link
<body link=”red“>

- Colore dei link visitati
<body vlink=”red“>

- Colore dei link selezionati
<body alink=”red“>

- Colore di sfondo
<body bgcolor=”red“>

Gestione del testo

- Ritorno a capo
<br>

- Nuovo paragrafo
<p> </p>

- Allineamento testo del paragrafo
<p allign=”left“>

- Carattere del testo
<font face=”Arial“> Testo </font>

- Grandezza del testo
<font size=”6“> Testo </font>

- Colore del testo
<font color=”red“> Testo </font>

- Testo in grassetto
<b> Testo </b>

- Testo in corsivo
<i> Testo </i>

- Testo sottolineato
<u> Testo </u>

- Testo in apice
<sup> Testo </sup>

- Testo in pedice
<sub> Testo </sub>

- Testo a spaziatura fissa
<tt> Testo </tt>

- Testo lampeggiante (solo su Browser Netscape)
<blink> Testo </blink>

- Testo scorrevole (solo su Browser InternetExplorer)
<marquee> Testo </marquee>

- Marcare un indirizzo
<address> Indirizzo </address>

- Testo rientrato
<blockquote> Testo </blockquote>

Gestione degli Elenchi

- Schema elenco Numerico
<ol>
<li> Primo elemento
<li> Secondo elemento
</ol>

- Schema elenco Letterale Maiuscolo
<ol type=”A”>
<li> Primo elemento
<li> Secondo elemento
</ol>

- Schema elenco Letterale Minuscolo
<ol type=”a”>
<li> Primo elemento
<li> Secondo elemento
</ol>

- Schema elenco Numerico Romano
<ol type=”i”>
<li> Primo elemento
<li> Secondo elemento
</ol>

- Schema elenco Numerico con partenza numero 5
<ol start=”5″>
<li> Primo elemento
<li> Secondo elemento
</ol>

- Schema elenco a Puntini, Cerchietti (circlet) e Quadratini (square)
<ul type=”circlet“>
<li> Primo elemento
<li> Secondo elemento
</ul>

- Lista di definizioni
<dl>
<dt> Primo punto
<dd> Descrizione del primo punto
<dt> Secondo punto
<dd> Descrizione del secondo punto
</dl>

Gestione delle Tabelle

- Schema base di una tabella
<Table>
<tr>
<th> Descrizione Colonna 1 </th>
<th> Descrizione Colonna 2 </th>
</tr>
<tr>
<td> Testo </td>
<td> Testo </td>
</tr>

Spiegazione:
La tabella si apre con il Tag <Table> e si chiude con il Tab </table>.
Ogni riga della tabella si dichiara con i Tag <tr></tr>. All’interno delle righe, ci sono le celle… quindi per creare delle celle bisogna usare i Tag <td></td>.
Per l’intestazione di colonna, bisogna creare una nuova riga e creare delle celle speciali con il Tag <th></th>.

- Impostare un Titolo alla tabella
<caption> Titolo </caption>

- Spessore del Bordo della tabella
<table border=”1“>

- Allineamento della tabella
<table align=”center“>

- Lunghezza della tabella
<table width=”300“>

- Altezza della tabella
<table height=”200“>

- Spazio tra le celle
<table cellspacing=”2“>

- Margini nelle celle
<table cellpadding=”2“>

- Colore della tabella
<table bgcolor=”red“>

- Immagine di sfondo della tabella
<table background=”immagine.gif“>

- Colore bordo della tabella
<table bordercolor=”red“>

- Colore dell’ombra della tebella
<table bordercolordark=”red“>

- Colore riferimento tabella
<table bordercolorlight=”red“>

- Allineamento orizzontale della cella
<td align=”left“>

- Allineamento verticale della cella
<td valign=”center“>

- Larghezza della cella
<td width=”50“>

- Colore di sfondo della cella
<td bgcolor=”red“>

- Immagine di sfondo della cella
<td background=”sfondo.gif“>

- Specificare il numero di colonne che occuperà la cella corrente
<td colspan=”2“>

- Specificare il numero di righe che occuperà la cella corrente
<td rowspan=”2“>

Gestione delle immagini

- Importare un immagine
<img src=”immagine.gif“>

- Altezza e larghezza dell’immagine
<img src=”immagine.gif” width=”150” height=”150“>

- Allineamento del testo rispetto all’immagine (top, bottom, midle, left, right)
<img src=”immagine.gif” align=”top“>

- Impostare lo spazio tra immagine e testo
<img src=”immagine.gif” hspace=”20” vspace=”20“>

- Bordo dell’immagine
<img src=”immagine.gif” border=”2“>

- Testo alternativo all’immagine (problemi di connessione all’immagine)
<img src=”immagine.gif” alt=”Testo“>

Gestione dei collegamenti ipertestuali

- Collegamento ad una pagina interna del sito
<a href=”pagina.html“> Testo </a>

- Link ad un sito esterno
<a href=”http://www.sito.it“> Testo </a>

- Link ad un indirizzo e-mail
<a href=”mailto:cronoluis@gmail.com“> Testo </a>

- Apertura del link in una nuova pagina del browser
<a href=”pagina.html” target=”_new“> Testo </a>

- Creazione di una nuova etichetta nella pagina
… Testo …
<a name=”etichetta1“>
… Testo …

- Link ad un etichetta della stessa pagina
<a href=”#etichetta1“> Testo </a>

- Link ad un etichetta di una pagina esterna
<a href=”pagina.html#etichetta2“> Testo </a>

Gestione dei Frame

- Struttura di una pagina Frame (non deve essere presente il <body> in questa pagina)

- Dichiarazione di un Frame Verticale
<frameset cols=”75% , 25%“>

- Dichiarazione di un Frame Orizzontale
<frameset rows=”50% , 50%“>

- Inserimento di una Pagina HTML in un Frame
<frame src=”frame1.html” name=”Pagina 1“>

- Definizione di un messaggio di errore in caso il Browser dell’utente non supporta i Frame
<noframes> Testo </noframes>

Gestione dei Form

- Struttura di un Form

- Casella di testo
<input type=”text” name=”nome_casella” maxlenght=”40“>

- Casella di testo per password
<input type=”text” name=”nome_casella_password” size=”15“>

- Casella di spunta a risposta multipla
<input type=”checkbox” name=”checkbox_1” valute=”1” checked> Testo label scelta 1
<input type=”checkbox” name=”checkbox_2” valute=”2“> Testo label scelta 2
<input type=”checkbox” name=”checkbox_3” valute=”3“> Testo label scelta 3

- Radio a risposta singola
<input type=”radio” name=”radio_1” valute=”1“> Testo label scelta 1
<input type=”radio” name=”radio_2” valute=”2“> Testo label scelta 2
<input type=”radio” name=”radio_3” valute=”3“> Testo label scelta 3

- Menu a tendina a scelta singola
<select name=”nome_tendina“>
<option value=”1“> Testo </option>
<option value=”2“> Testo </option>
<option valute=”3“> Testo </option>
</select>

- Menu a tendina a scelta multipla
<select multiple name=”nome_tendina“>
<option value=”1“> Testo </option>
<option value=”2“> Testo </option>
<option value=”3“> Testo </option>
</select>

- Area di testo
<textarea name=”nome_area” rows=”10” cols=”30“> Testo di default </textarea>

- Tasto di invio form
<input type=”submit” name=”button_submit” value=”invia“>

- Tasto di azzeramento del form
<input type=”reset” name=”button_reset” value=”annulla“>

Questo è tutto. Per dubbi o altro potete usare i commenti qui sotto oppure contattarmi tramite la sezione Contatti del sito.

Pubblicato in Develop Web