Guida tag per principianti

Questa Guida illustrerà i principali codici e regole dell'HTML.

+ I Commenti:

Codice HTML:
<!-- Commento -->Citazione:
I Commenti non sono visualizzati dal browser, ma sono utili soprattutto se si vogliono illustrare alcune particolarità in un codice HTML.

+ Titolo Heading:

Codice HTML:
<h1>testo</h1>

<h2>testo</h2>

<h3>testo</h3>

<h4>testo</h4>

<h5>testo</h5>

<h6>testo</h6>Citazione:
L'Heading, o titolo, è un TAG che racchiude testo, e permette di stabilire la sua grandezza. In base alla numerazione (h1, h2, h3, h4 ecc..) si và in ordine decrescente, cioè che l'1 è il più grande, il 2 di meno, il 3 ancor di meno ecc..+ Paragrafi, Blocco di testo e contenitori:

- Paragrafo:

Codice HTML:
<p>contenuto paragrafo</p>Citazione:
Il Paragrafo è il TAG che permette la suddivisione del testo. Lascia uno spazio prima della sua aperta e dopo la sua chiusura.- Blocco di testo:

Codice HTML:
<div>contenuto blocco di testo</div>Citazione:
Il Blocco testo ha la stessa funzione del Paragrafo, solo che non lascia spazi, ma và semplicemente a capo.- Contenitore:

Codice HTML:
<span>contenuto contenitore</span>Citazione:
Il Contenitore è il TAG che in generale permette la suddivisione degli elementi della pagina. A differenza dei TAG Paragrafo e Blocco di testo, non lascia spazi nè và a capo.+ Linee orizzontali e andare a capo:

- Linea Orizzontale:

Codice HTML:
<hr>Citazione:
Il TAG per la linea orizzontale permette appunto di creare una linea orizzontale, utile per suddividere la pagina.- Andare a capo:

Codice HTML:
<br>
<br><br>Citazione:
Il TAG per andare a capo è appunto il BR. Se invece, si vuole lasciare un rigo, basta usarlo due volte (come nell'esempio).

+ Formattazione del testo:

- Grassetto:

Codice HTML:
<b>testo in grassetto</b>Citazione:
Questo TAG formatta il tasto in grassetto.- Corsivo:

Codice HTML:
<i>testo in corsivo</i>Citazione:
Questo TAG formatta il testo in corsivo.

- Sottolineato:

Codice HTML:
<u>testo sottolineato</u>Citazione:
Questo TAG formatta il testo sottolineandolo.

- Testo barrato:

Codice HTML:
<strike>testo barrato</strike>Citazione:
Questo TAG formatta il testo barrandolo.

- Preformattazione:

Codice HTML:
<pre>testo preformattato</pre>Citazione:
Questo TAG permette la preformattazione del testo, cioè permette di visualizzare i TAG di formattazione utilizzati su una linea di testo senza attivarli.

- Superscript:

Codice HTML:
^{testo superscript}Citazione:
Questo TAG permette di usare del testo formattato in apice, utile per formule matematiche.

- Subscript:

Codice HTML:
_{testo subscript}Citazione:
Questo TAG permette di usare del testo formattato sotto la linea di scrittura, utile per formule chimiche.

- Marquee:

Codice HTML:
<marquee>testo o immagine in movimento</marquee>Citazione:
Questo TAG permette di dare un effetto di movimento al testo o immagine

- Blink:

Codice HTML:
<blink>testo o immagine</blink>Citazione:
Questo TAG permette di visualizzare testo o immagini in blink, cioè lampeggianti.

+ Formattazione - Colori, dimensioni e font di testo:

- Colore del testo:

Codice HTML:
<font color="nome colore (in inglese)">testo colorato</font>Citazione:
Questo TAG permette la ricolorazione del testo.

- Dimensione del testo:

Codice HTML:
<font size="dimensione">testo</font>Citazione:
Questo TAG permette di scegliere la dimensione del testo.- Font del testo:

Codice HTML:
<font face="nome font">testo</font>Citazione:
Questo TAG permette di scegliere il font del testo.

+ Immagini:

- Inserire Immagini:

Codice HTML:
<img src="indirizzo immagine">Citazione:
Questo TAG permette la visualizzazione di immagini.+ Collegamenti e Link:

- Collegamenti:

Codice HTML:
<a href="indirizzo di destinazione">Testo di collegamento</a>Citazione:
Questo TAG permette l'inserimento di un collegamento o link ad una pagina esterna.

+ Form:

- Lista:

Codice HTML:
<ul type="disc/circle/square">
<li>voce</li>
<li>voce</li>
<li>voce</li>
</ul>Citazione:
Questo TAG permette l'inserimento di una lista ordinata.

- Lista Numerata:

Codice HTML:
<ol>
<li>voce</li>
<li>voce</li>
<li>voce</li>
</ol>Citazione:
Questo TAG permette l'inserimento di una lista numerata.

- Menù a tendina:

Codice HTML:
<select>
<option value="1">opzione1</option>
<option value="2">opzione2</option>
<option value="3">opzione3</option>
</select>Citazione:
Questo TAG permette l'inserimento di un Menù a tendina con le varie opzioni.

- Pulsante:

Codice HTML:
<button>testo</button>Citazione:
Questo TAG permette di inserire un bottone.

- Pulsante con Link:

Codice HTML:
<a href="indirizzo di destinazione><button>testo</button></a>Citazione:
Questo TAG permette di inserire un bottone con un collegamento ad una pagine esterna.- Fieldset:

Codice HTML:
<fieldset><legend>titolo</legend>

Contenuto

</fieldset>Citazione:
Questo TAG permette l'inserimento di un divisore in categorie.

- Area di testo:

Codice HTML:
<textarea>testo all'interno dell'area di testo</textarea>Citazione:
Questo TAG permette l'inserimento di un'area di testo in cui è possibili scrivere liberamente.

- CheckBox:

Codice HTML:
<input type="checkbox" value="nome scelta"> scelta1
<br>
<input type="checkbox" value="nome scelta"> scelta2
<br>
<input type="checkbox" value="nome scelta"> scelta3Citazione:
Questo TAG permette di inserire scelte con i checkbox.

+ Tabelle:

- Tabella:

Codice HTML:
<table border="1">
<tr>
<td>Contenuto tabella</td>
</tr>
</table>Citazione:
Questo TAG permette di creare una semplice tabella.+ Frame:

- Frameset:

Codice HTML:
<frameset>
<frame src="indirizzo pagina">
</frameset>Citazione:
Questo TAG permette di visualizzare un pagina esterna nella propria interamente.- IFrame:

Codice HTML:
<iframe src="indirizzo pagina">testo alternativo per borwser non compatibili</iframe>Citazione:
Questo TAG permette di visualizzare una pagina esterna nella propria in diverse dimensioni.

+ File Multimediali:

- File Audio:

Codice HTML:
<object id="sound1" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="src" value="indirizzo file audio">
<param name="controls" value="All">
<param name="console" value="sound1">
<param name="autostart" value="false">

<embed src="indirizzo file audio" console="sound1" controls="All" autostart="false" name="sound1">

</object>Citazione:
Questo TAG permette di integrare file audio nella nostra pagina web.

- File Video:

Codice HTML:
<object id="video1" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="src" value="indirizzo file video">
<param name="controls" value="All">
<param name="console" value="video1">
<param name="autostart" value="false">

<embed src="indirizzo file audio" console="video1" controls="All" autostart="false" name="video1">

</object>Citazione:
Questo TAG permette di integrare file video nella nostra pagina web.

- File Flash:

Codice HTML:
<object type="application/x-shockwave-flash" data="indirizzo file flash">
<param name="movie" value="indirizzo file flash">
</object>Citazione:
Questo TAG permette di inserire file flash nella propria pagina web.- File Scripting:

Codice HTML:
<script type="text/javascript">

Script in JavaScript

</script>Citazione:
Questo TAG permette di inserire script in javascript nella nostra pagina web.- File CSS:

Codice HTML:
<style type="text/css">

Stile in CSS

</style>Citazione:
Questo TAG permette di inserire stili CSS nella propria pagina web.

+ Attributi:

- Align:

Codice HTML:
<div align="center/left/right"> contenuto centrato/a sinistra/a destra </div>Codice HTML:
<p align="center/left/right"> contenuto centrato/a sinistra/a destra </div>Citazione:
L'attributo Align, permette di scegliere la posizione del contenitore o paragrafo, cioè al centro, a sinistra o a destra.

- Width e Height:

Codice HTML:
<img src="indirizzo immagine" width="larghezza" height="altezza">Codice HTML:
<table width="larghezza" height="altezza">
<tr>
<td> Contenuto </td>
</tr>
</table>Citazione:
Gli attributi Width e Height permetteono di scegliere la larghezza e l'altezza degli elementi.- Target:

Codice HTML:
<a target="_blank/_self/_parent/_top" href="indirizzo di destinazioneCitazione:
L'attributo Target permette la scelta di dove si vuole far caricare o visualizzare la nuova pagina esterna collegata con il link. Con "_blank", la pagina viene caricata in una nuova finestra, con "_self" è possibile caricarlo in un frame (se contenuto nella pagina), con "_parent" viene caricata nel frameset in cui è inserito il link, con "_top" la pagina carica nella stessa finestra, senza contare alcun frame.

- Alt e title:

Codice HTML:
<img src="indirizzo immagine" alt="commento">Codice HTML:
<a href="indirizzo di destinazione" title="commento">Citazione:
L'attributo Alt o title, permette di inserire un commento su un elemento, che, al passaggio del mouse diventerà visibile.-------------------------------------------------------------------------

Buon lavoro con l'HTML!