Sei sulla pagina 1di 53

Laspetto del tag: apertura e chiusura:

<TAG>contenuto</TAG> <TAG attributi> contenuto </TAG>

Struttura di un tag:

attributo=valore
Esempio di sintassi che serve a disporre un testo giustificato a destra:

<P align="right">testo </P>


esempio di tag vuoto senza chiusura:

<IMG widht="20" height="20" src="miaImmagine.gif">


esempio di attributo separato dal contenuto:

<p class="formattaTitoli">titolo 1</p>

Struttura di un tag annidato:

<TAG1 attributi> contenuto 1 <TAG2 attributi> contenuto 2 </TAG2> </TAG1>


Non annidato:

<P align="right"> testo 1 <P align="left">testo 2 </P> </P>


Commento:

<!-- questo un commento -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">


1) Specifiche del World Wide Web Consortium

<html>
2) Apertura file html

<head>
3) Apertura della testa del documento (meta-tag, fogli di stile, javascript, titolo)

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


Indicazione al browser di apertura del set di caratteri occidentali

<title>prima lezione</title> </head>


3) Chiusura della testa del documento

<body>
4) Apertura del corpo del documento

Testo di prova </body>


4) Chiusura del corpo del documento

</html>
2) Chiusura file html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>prima lezione</title> </head> <body> Testo di prova </body> </html>

Esempio di attributo di colore o sfondo della pagina:

<body bgcolor="blue"> <body background="imgSfondo.gif">


Codici esadecimali:
colore arancione blu bianco giallo grigio marrone nero rosso verde viola parola chiave orange blue white yellow gray brown black red green violet notazione esadecimale #FFA500 #0000FF #FFFFFF #FFFF00 #808080 #A52A2A #000000 #FF0000 #008000 #EE82EE

Esempio di attributo dei margini di pagina:

<body leftmargin="0" topmargin="0">

Esempio di attributo di colore del testo e dei collegamenti:

<body text="#008000">

Esempio di formattazione tag-dopo-tag: <p> <font color="red"> <b>titolo 1</b> </font> <font color="red"> <b>titolo 2</b> </font> </p>

Esempio di formattazione con css: <p class="formattaTitoli"> titolo 1 titolo2 </p>

Esempio di formattazione dei collegamenti: <body link="red" alink="yellow" vlink="green">

Le intestazioni:

<h1>titolo 1 </h1> <h2>titolo 2 </h2> <h3>titolo 3 </h3> <h4>titolo 4 </h4> <h5>titolo 5 </h5> <h6>titolo 6 </h6>
la grandezza del carattere varia a seconda delle impostazioni che lutente ha sul proprio computer

<p>paragrafo </p>
lascia una riga vuota prima della sua apertura e dopo la sua chiusura

<div>Blocco di testo</div>
non lascia spazi prima e dopo la sua apertura

<span>contenitore</span>
non va a capo e continua sulla stessa linea del tag che lo include

Allineamenti:

<p align="left">testo</p>
Testo allineato a sinistra

<p align="right">testo</p>
Testo allineato a destra

<p align="justify">testo</p>
Testo giustificato

Interruzioni:

<br>
Interruzione semplice

<hr>
Linea orizzontale

<hr noshade size="1" width="50%" align="center">


Impostazioni linea orizzontale

Stili fisici:

<b>testo in grassetto</b> <i>testo in corsivo</i> <pre>testo preformattato</pre> <u>testo sottolineato</u> <strike>testo barrato</strike> <sup>testo in apice</sup> <sub>testo in apice</sub>

Stili logici:
<abbr>abbreviazione</<abbr> Esempio: <abbr>C/A</abbr> HTML.it <acronym>acronimo</acronym> Esempio: <acronym>HTML</acronym> <address>indirizzo</address> Esempio: <address>HTML.it - via dei Castani 183/185 00172 Roma</address> <blockquote>blocco di citazione</blockquote> Esempio: <blockquote> Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ch la diritta via era smarrita </blockquote> <cite>citazione</cite> C/A HTML.it Indica un abbreviazione. Nessun rendering del testo particolare.

HTML

Indica un acronimo. Nessun rendering del testo particolare.

HTML.it - via dei Serve per indicare gli Castani 183/185 - 00172 indirizzi: siano essi e-mail, Roma o indirizzi fisici. Il testo viene visualizzato in corsivo.

Nel mezzo del cammin Sono blocchi di citazione. di nostra vita mi ritrovai per una selva oscura ch Il testo viene rientrato la diritta via era smarrita verso destra.

Nel mezzo del cammin Per citazioni brevi: il testo visualizzato in corsivo. di nostra vita mi Esempio: ritrovai per una selva oscura ch la diritta <cite>Nel mezzo del cammin di via era smarrita nostra vita mi ritrovai per una selva oscura ch la
diritta via era smarrita</cite> <code>codice</code> Esempio: <code>if (document.all) alert (&quot;ciao&quot;);</code>

if (document.all) alert ("ciao");

Indica un blocco di codice in linguaggio di programmazione. Nessun rendering del testo particolare.

<dfn>definizione</dfn> Esempio: <dfn>LHTML un linguaggio di contrassegno</dfn> <em>enfasi</em> Esempio: Ti ho detto <em>questo!</em> <kbd>keyboard</kbd> Esempio: <kbd>digitazione da tastiera</kbd> <q>citazione allinterno della frase</q> Esempio: Come diceva Don Abbondio: <q>&quot;Il coraggio, uno non se lo pu dare&quot;</q>. L'HTML un linguaggio Indica una definizione: il di contrassegno testo visualizzato in corsivo.

Ti ho detto questo!

Serve per porre lenfasi su unespressione: il testo visualizzato in corsivo.

digitazione da tastiera

Indica una digitazione da tastiera: il testo viene visualizzato a spaziatura fissa.

Come diceva Don Indica una citazione breve Abbondio: "Il coraggio, allinterno del testo. uno non se lo pu dare" Nessun rendering del testo particolare.

<samp>esempio</samp> Esempio: <samp>ecco un esempio di &quot;samp&quot;</samp>.

ecco un esempio di "samp"

Indica un esempio. Il testo viene visualizzato a spaziatura fissa.

<strong>rafforzamento</strong>

Ecco un testo rafforzato Evidenzia una parola. Il testo viene reso in grassetto

Esempio: Ecco un <strong>testo rafforzato</strong>

<var>variabile</var> Esempio: Inseriamo i dati nella variabile temporanea <var>temp</var>

Inseriamo i dati nella variabile temporanea temp ...

La variabile viene visualizzata in corsivo.

Definire un font:

<font face="Arial">testo in Arial</font>


Caratteri sicuri: famiglie <font face="Verdana, Arial, Helvetica, sans- Verdana e caratteri simili serif">Verdana e caratteri simili</font> <font face="Arial, Helvetica, sansserif">Arial e caratteri simili</font> <font face="Times New Roman, Times, serif">Times e caratteri simili</font> <font face="Courier New, Courier, mono">Curier e caratteri simili</font> <font face="Georgia, Times New Roman, Times, serif">Georgia e caratteri simili </font> Arial e caratteri simili

Times e caratteri simili Curier e caratteri simili Georgia e caratteri simili

<font face="Geneva, Arial, Helvetica, sans- Geneva e caratteri simili serif">Geneva e caratteri simili</font>

Colore del testo:

<font face="Verdana, Arial, Helvetica, sans-serif" color="blue"> <font color="#0000FF">testo blu</font> <font face="Verdana, Arial, Helvetica, sans-serif" color="blue"> testo blu in Verdana<br> <font color="red"> testo rosso </font> </font>

Valori interi e relativi: la dimensione del testo:

<font size="1">testo di grandezza 1</font><br> <font size="+2"> Testo di grandezza +2 rispetto al font di base 3 = grandezza 5. </font>

Esempio classico di elenco

<elenco> <elemento>nome del primo elemento <elemento>nome del secondo elemento </elenco>
Elenco ordinato:

<ol> <li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> </ol>


Elenco non ordinato:

<ul> <li>primo elemento <li>secondo elemento <li>terzo elemento </ul>


Elenco di definizione:

<dt>termine</dt> <dd>definizione</dd>
Esempio di elenco annidato (non ordinato)

<ul> <li>primo della 1a lista <li>secondo della 1a lista <ul> <li>primo della 2a lista <li>secondo della 2a lista </ul> </ul>

I valori dellattributo type negli elenchi ordinati:


Valore dell'attributo type type="1" numeri arabi ( cos di default)

Stile di enumerazione <ol type="1"> <li>primo</li> <li>secondo</li> <li>terzo</li> </ol> <ol type="a"> <li>primo</li> <li>secondo</li> <li>terzo</li> </ol> <ol type="A"> <li>primo</li> <li>secondo</li> <li>terzo</li> </ol> <ol type="i"> <li>primo</li> <li>secondo</li> <li>terzo</li> </ol> <ol type="I"> <li>primo</li> <li>secondo</li> <li>terzo</li> </ol> 1. primo 2. secondo 3. terzo a. primo b. secondo c. terzo A. primo B. secondo C. terzo i. ii. iii. I. II. III. primo secondo terzo primo secondo terzo

type="a"

alfabeto minuscolo

type="A"

alfabeto maiuscolo

type="i"

numeri romani minuscoli

type="I"

numeri romani maiuscoli

I valori dellattributo type negli elenchi non ordinati:


Valore dell'attributo type visualizza un "pallino" type="disc" pieno. ( cos di default) la visualizzazione di default Stile di enumerazione <ul type="disc"> <li>primo</li> <li>secondo</li> <li>terzo</li> </ul> <ul type="circle"> <li>primo</li> visualizza un cerchio <li>secondo</li> vuoto al proprio interno <li>terzo</li> </ul> <ul type="square"> <li>primo Visualizza un quadrato <li>secondo pieno al proprio interno <li>terzo </ul>
o o o

primo secondo terzo primo secondo terzo primo secondo terzo

type="circle"

type="square"

I collegamenti ipertestuali:

<a href="http://www.google.it/">VAI A GOOGLE</a> <a href="mailto:mail@nomesito.it">e-mail</a> <a href="prima/interna/interna.html">pag_interna</a> <a href="../../index.html">pag_interna</a>


Immagine .gif, .jpg, .png Documento .html, .pdf, .doc Viene visualizzata nel browser

La pagina visualizzata nel browser. Nel caso dei documenti .doc e .pdf l'utente deve avere installato sul proprio pc l'apposito plugin (nella maggior parte dei casi sufficiente che abbia installato rispettivamente Microsoft Word e Adobe Acrobat Reader). Se non installato il plugin il sistema chieder all'utente se salvare il file.

File .zip, file .exe Viene chiesto allutente di scaricare il file NOTA bene: per motivi di sicurezza non possibile eseguire un file ".exe" direttamente dal web; lutente dovr sempre prima scaricarlo sul proprio PC.

<a href="file:///C|percorsonomeFile.html">testo</A> <body link="red">


normale

<body vlink="green">
visitato

<body alink="yellow">
attivo

Segnalibro:

<a name="nome_ancoraggio">testo</a> <a href="# nome_ancoraggio ">vai al testo</a>

Target, title, accesskey:

<a target="_blank" href="http://www. google.it">visita GOOGLE </a> <a title="con GOOGLE puoi trovare ci che cerchi!" href="http:// www.google.it /" target="_blank" > Visita GOOGLE </a> <a href="http://www.google.it/" accesskey="h" target="_blank" >Torna all'home page di GOOGLE</a>
Alt+h+Invio

Formati grafici:

GIF
(Graphic Interchange Format) 256 colori

JPG
(Joint Photographic Experts Group) immagini di qualit fotografica

PNG
(Portable Network Graphic) GIF - canale alfa

<img src="logo.gif"> <img src="logo.gif" width="300" height="300"> <img src="logo.gif" alt="GOOGLE" width="300" height="300"> <img src="logo.gif" border="3" width="300" height="300">
Il colore del bordo coincide con quello specificato nel body per I link

Specificare un collegamento per unimmagine

<a href="http://www.google.it" target="_blank"> <img src="logo.gif" border="0" width="300" height="300"> </a>

Allineamenti delle immagini rispetto al paragrafo di testo:

align="left" align="right" <p><img src="logo.gif" width="300" height="300" border="1" align="left">testo testo testo testo testo</p> align="top" align="middle align="bottom" hspace="valore" vspace="valore"

Le tabelle:

<table>
apre la tabella

<tr>
table row: indica lapertura di una riga

<td>
table data: indica una cella allinterno di una riga

<table border=2>
Bordo della tabella

<table border="1"> <tr> <td>prima cella</td> <td>seconda cella</td> </tr> <tr> <td>terza cella</td> <td>quarta cella</td> </tr> </table> <table width="300" height="200" border="1"> <table width="75%" border="1"> <td width="25%">prima cella</td>

Tag opzionali:

<caption> <thead> <tfoot> <tbody>

il titolo con un commento esplicativo sulla tabella l'intestazione, la parte iniziale della tabella, quella che contiene ad esempio indicazioni sul contenuto delle celle il piede, la conclusione della tabella, quella che consente ad esempio di tirare le somme

il corpo, la parte centrale con il contenuto vero e proprio della tabella

<table width="75%" border="1"> <caption><div align="center"><b>Fatturato dell'azienda XYZ</b></div></caption> <thead> <tr> <th width="20%">Mesi di attivit&agrave; aligncenter</th> <th width="40%">Fatturato da attivit&agrave; 1 (in euro)</th> <th width="40%">Fatturato da attivit&agrave; 2 (in euro)</th> </tr> </thead> <tfoot> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td ><b>Totale</b></td> <td >450.000</td> <td >45.000</td> </tr> </tfoot> <tbody> <tr> <td >gen</td> <td >10.000</td> <td >1.000</td> </tr> </tbody> </table>

Allineamento e colore:

align
pu essere riferito sia a <tr>, sia a <td> definisce lallineamento dei contenuti a sinistra, a destra o al centro

valign
allineamento verticale celle

bgcolor
pu essere riferito tanto a <table>, <tr>, o <td> consente di impostare un colore di sfondo

background
immagine di sfondo

<table width="75%" border="1" align="center" bgcolor="#00FF00"> <tr> <td width="50%" bgcolor="#FF0000"> <font color="#FFFFFF">prova</font> </td> <td width="50%">&nbsp; </td> </tr> </table>

I tag opzionali:

<colgroup>
raggruppa le caratteristiche delle colonne

<span >
definisce il numero delle colonne

<colspan>
divide una cella

<rowspan>
divide una colonna

Esempio colgroup e span:

<table width="75%" border="1"> <colgroup bgcolor="#00FFCC" width="20%" align="right"></colgroup> <colgroup span="2" bgcolor="#33CCFF" width="40%" align="center"> <caption> <div align="center"><b>Fatturato dell'azienda XYZ</b></div> </caption> <thead> <tr> <th>Mesi di attivit&agrave;</th> <th>Fatturato da attivit&agrave; 1 (in euro)</th> <th>Fatturato da attivit&agrave; 2 (in euro)</th> </tr> </thead> <tfoot> <tr> <td><b>Totale</b></td> <td>30.000</td> <td>3.000</td> </tr> </tfoot> <tbody> <tr> <td>gen</td> <td>10.000</td> <td>1.000</td> </tr> <tr> <td>feb</td> <td>20.000</td> <td>2.000</td> </tr> </tbody>

</table>

Esempio colspan:

<table width="430" border="1" bordercolor="#000000"> <tr> <td width="30%">&nbsp;</td> <td width="30%">&nbsp;</td> <td width="30%">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td colspan="2" align="center" valign="middle"> <b>&lt;td colspan=&quot;2&quot;&gt;</b> </td> </tr> </table>

Esempio rowspan: <table width="430" border="1" bordercolor="#000000"> <tr> <td width="30%">&nbsp;</td> <td width="30%" rowspan="2" align="center" valign="middle"> <b>&lt;tdrowspan=&quot;2&quot;&gt;</b> </td> <td width="30%">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>

Esempio tabella annidata: <table width="430" border="1"> <tr> <td width="50%">&nbsp;</td> <td width="50%">&nbsp;</td> </tr> <tr> <td width="50%">&nbsp;</td> <td> <table width="100%" border="1"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </table> </td> </tr> </table> </tr>

Attributi del tag TABLE:

border cellspacing

specifica la larghezza dei bordi di una tabella (in pixel)

specifica la distanza (in pixel) tra una cella e laltra, oppure tra una cella e il bordo. Di default un pixel, dunque occorrer sempre azzerarlo esplicitamente, quando non lo si desideri

cellpadding

indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza espressa in pixel; il cellpadding tuttavia pu anche essere espresso in percentuale. Di default la distanza nulla

esempio spiegazione <table border="1" frame="above"> Il bordo della tabella presente:


void: in nessun lato. il valore di default above: solo nel lato superiore below: solo nel lato inferiore hsides: solo nei lati superiore e inferiore vsides: solo a sinistra e a destra lhs: solo nel lato sinistro (left-hand side) rhs:solo nel lato destro (right hand side). box: in tutti e quattro i lati

<table border="1" rules="rows">

border: in tutti e quattro i lati Le righe interne alle celle sono presenti:

none: da nessuna parte. il valore di default groups: le righe separano i gruppi (siano essi gruppi di righe: <thead>, <tfoot>, <tbody> - o gruppi di colonne: <colgroup>) rows:le righe separano i vari <tr> cols:le righe separano le colonne all:le righe separano tanto i <tr>, quanto le colonne

Iframe

<iframe src="http://pro.html.it" width="300" height="300"></iframe>

Form

<form name="datiUtenti"action="paginaRisposta.php"> ... </form>


"name" serve per indicare il nome del form "action" indica l'URL del programma o della pagina di risposta che processer i dati

<form name="datiUtenti" action="paginaRisposta.php"method="GET">


La pagina di risposta viene contattata e i dati vengono inviati in un unico step. Nell'URL della pagina di risposta potremo vedere tutti i parametri nella barra degli indirizzi Esempio: paginaRisposta.php?nome=Wolfgang&cognome=Cecchin&datiInviati=prova+invio

<form name="datiUtenti" action="paginaRisposta.php"method="POST">


L'invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. I parametri non compaiono nella barra degli indirizzi.

<form name="datiUtenti" action="paginaRisposta.php" method="get" target="_blank">

Enctype

<form name="datiUtenti" action="paginaRisposta.php"enctype="text/plain">

<form name="datiUtenti" action="paginaRisposta.php"enctype="multipart/formdata">

Separazione dei campi tramite il fieldset

<form> <fieldset> <legend>Datianagrafici</legend> <br><br><br> </fieldset>

<fieldset> <legend>Residenza</legend> <br><br><br> </fieldset>

</form>

Indicatore dei campi con label

<form> <fieldset> <legend>Datianagrafici</legend> <label>Anno di nascita: <input type="text"></label> </fieldset> </form>

(Invertendo la posizione del testo)

<fieldset> <legend>Dati anagrafici</legend> <label><input type="text">: anno di nascita</label> </fieldset>

Campi dei form: input

<input>
I vari <input> sono dotati di attributi che consentono di indicare il tipo di campo, il nome e il valore (per lo pi il testo visualizzato).

<input type="text">

<input type="text" name="testo" value="scrivi qui il tuo testo"> <input type="button">


crea un bottone.

Esempio tasto submit:

<input type="button" value="invia i dati">

Inserito in un form:

<form action=http://www.html.it target="_blank"> <input type="submit"value="visita HTML.it"> </form>

Reset e disable:

<form> <input type="text"><br> <input type="reset" value="cancella"> </form> <form> <input disabled="disabled" type="submit" value="invia">

Esempio di inserimento button in un form:

<form action=http://www.html.it target="_blank"> <input type="text"><br> <button type="button"> bottone generico </button> <button type="reset"> cancella </button> <button type="submit"> invia </button> </form>

Esempio di inserimento immagine in un form:

<form action=http://www.html.it target=_blank> <input name="invia il modulo" type="image" src="invia.gif" alt="invia il modulo" width="50" height="50"> </form>

Campo testo con limitazione:

<input name="Testo" type="text" value="inserisci qui il tuo testo" size="40">


Campo testo con grande quantit di testo:

<textarea name="testo" rows="5" cols="40"> qui puoi scrivere il tuo testo </textarea>
Campo password:

<input type="password" maxlength="8" size="18" value="password" name="Testo">


Campi testi accessibili in sola lettura:

<input readonly="readonly" maxlength="8" size="25" value="leggere l'informativa" name="mioTesto" >


Campi testi accessibili in sola lettura disabilitati:

<input disabled="disabled" maxLength="8" size="25" value="leggere l'informativa" name="mioTesto" >

Impostare un valore di default

<form> <input name="html" type="checkbox" value="html" checked="checked"> </form>

<form> <input name="html" type="checkbox" value="html" disabled="disabled"> </form>

Checkbox (scelte multiple):

<form> <fieldset> <legend>Lingue conosciute</legend><br> <input type="checkbox" name="html" value="html"/> html <br> <input type="checkbox" name="css" value="css"/> css <br> <input type="checkbox" name="javascript" value="javascript"/> JavaScript </fieldset> </form>

Rabio button (scelta singola):

<form> <fieldset> <legend>Linguaggi conosciuti</legend> HTML<input type="radio" name="linguaggio" value="html"/> CSS <input type="radio" name="linguaggio" value="css"/> JavaScript <input type="radio" name="linguaggio" value="javascript"/> </fieldset> </form>

Select (men a discesa):

<form> <fieldset> <legend>Siti per webmaster</legend> <select name="siti" > <option value="http://www.html.it" selected="selected">www.html.it </option> <option value="http://freephp.html.it">frephp.html.it </option> <option value="http://freasp.html.it">freasp.html.it </option> </select> </fieldset> </form>

Select (men a discesa) con organizzazione:

<form> <select name="siti" > <optgroup label="siti per webmaster"> <option value="http://www.html.it">www.html.it </option> <option value="http://freephp.html.it">frephp.html.it </option> <option value="http://freasp.html.it">freasp.html.it </option> </optgroup> <optgroup label="risorse per webmaster"> <option value="http://font.html.it">font.html.it </option> <option value="http://cgipoint.html.it">cgipoint.html.it </option> </optgroup> </select> </form>

Select (men a discesa) con scelta multipla:

<form> <label>Quale siti visiti?<br> <select name="siti" size="5" multiple="multiple"> <option value="http://www.html.it">www.html.it </option> <option value="http://freephp.html.it">frephp.html.it </option> <option value="http://freasp.html.it">freasp.html.it </option> <option value="http://font.html.it">font.html.it </option> <option value="http://cgipoint.html.it" >cgipoint.html.it </option> </select> </label> </form>

Meta-Tag

<title>HTML.it - sito italiano sul webpublishing</title>

<meta name="description" content="HTML.it - il sito italiano sul Web publishing">

<meta name="keywords" content="html wml xml smil javascript js dhtml dynamic xhtml vbscript coldfusion photoshop paint shop pro risorse webmaster webdesigner flash grafica css applet java asp cgi perl guida free corso php mysql tutorial lezioni sql database realizzazione siti web leggi mailing list newsletter gif jpg publishing editor iis webserver apache linux raccolte script news chat forum fogli di stile hdml wap linux mac apple palmari computer c++ delphi visual basic vb vbasic">