HTML 4.01

HTML 4.01HTML 4.01ApogeoApogeo

I tag di baseI tag di baseCapitolo 1Capitolo 1

I tagI tagSintassiSintassi

<nome_tag><nome_tag></nome_tag></nome_tag>

Esempi:Esempi:<strong><strong><cite><cite><b><b><em><em>

AttributiAttributiAttributiAttributi

nome_attributo = “valore”nome_attributo = “valore”

Gli attributi del tag <html>Gli attributi del tag <html>lang = “codice lingua”lang = “codice lingua”

lang = “it”lang = “it”dir = “direzione testo”dir = “direzione testo”

dir = “LTR”dir = “LTR”

I tag <head> e <body>I tag <head> e <body>

Attributi del tag Attributi del tag <body><body>

bgcolor = “colore” bgcolor = “colore” Appendice A per nomi e codici dei coloriAppendice A per nomi e codici dei colori

background = “file_immagine”background = “file_immagine”

text = “colore_testo”text = “colore_testo”

link alink vlinklink alink vlink

Esempio javascript onLoad …Esempio javascript onLoad …

Formattazione del testoFormattazione del testoCapitolo 2Capitolo 2

Header e Header e paragrafiparagrafi

Tag header <h1> … <h6>Tag header <h1> … <h6>

Tag <p>Tag <p>attributo align = “posizione”attributo align = “posizione”

Il tag <font> con attributiIl tag <font> con attributiface = “font”face = “font” color = “colore”color = “colore”size = “dimensione”size = “dimensione”

CaratteristicheCaratteristicheCaratteri speciali Caratteri speciali

Appendice DAppendice D

Accenno a <div>Accenno a <div>Caratteristiche del testoCaratteristiche del testo

<tt><tt><u><u><strike><strike><sub><sub><sup><sup>

Tag <hr> con attributo heightTag <hr> con attributo height

Elenchi ordinati, non ordinati Elenchi ordinati, non ordinati ed elenchi di definizionied elenchi di definizioni

Capitolo 3Capitolo 3

Elenchi ordinatiElenchi ordinatitag <ol>tag <ol>

attributo type = “valore” (1 i I a A)attributo type = “valore” (1 i I a A)attributo start = “valore”attributo start = “valore”

tag <li>tag <li>

Elenchi all’interno di altri elenchiElenchi all’interno di altri elenchi

Elenchi non Elenchi non ordinatiordinati

tag <ul>tag <ul>attributo type = “valore” (disc circle attributo type = “valore” (disc circle square)square)

tag <li>tag <li>

Elenchi di definizioneElenchi di definizionetag <dt> <dd>tag <dt> <dd>

Inserimento di un’immagineInserimento di un’immagineCapitolo 4Capitolo 4

Il tag <img>Il tag <img>Attributo srcAttributo src

<img src = “percorso_immagine”><img src = “percorso_immagine”>

Percorsi relativi e percorsi assolutiPercorsi relativi e percorsi assoluti

Attributo altAttributo altalt = “descrizione immagine”alt = “descrizione immagine”

Attributi width e heightAttributi width e height

Attributo align = “valore” (top bottom left Attributo align = “valore” (top bottom left … )… )

I formati delle I formati delle immaginiimmagini

jpg (Joint Photographic Experts Group)jpg (Joint Photographic Experts Group)buona compressionebuona compressioneampia gamma cromaticaampia gamma cromaticascelta della qualitàscelta della qualità

gif (Graphics Interchange Format)gif (Graphics Interchange Format)animazioneanimazionetrasparenzatrasparenza

png (Portable Network Graphics)png (Portable Network Graphics)formato “libero”formato “libero”più livelli di trasparenzapiù livelli di trasparenza

I linkI linkCapitolo 5Capitolo 5

Il tag <a>Il tag <a>Link a una pagina dello stesso sito o di un sito Link a una pagina dello stesso sito o di un sito diversodiversoAttributo href = “percorso_pagina”Attributo href = “percorso_pagina”

<a href=“paginalocale.html”> link locale</a><a href=“paginalocale.html”> link locale</a><a <a href=“http://www.altrosito.it/pagina_altro_sito.href=“http://www.altrosito.it/pagina_altro_sito.html”> link esterno</a>html”> link esterno</a>

Attributo target = “valore” (_blank)Attributo target = “valore” (_blank)Attributo alt = “testo alternativo”Attributo alt = “testo alternativo”Attributo title=“testo tooltip”Attributo title=“testo tooltip”

Immagine come Immagine come linklink

Inserimento del tag Inserimento del tag <img> all’interno del <img> all’interno del tag <a>tag <a>

Attributo border = Attributo border = “valore”“valore”

border = “0” per border = “0” per eliminare il bordoeliminare il bordo

Link interni alla Link interni alla paginapagina

attributo name per definire un punto di attributo name per definire un punto di destinazione interno a un documento destinazione interno a un documento (àncora)(àncora)

<a name = “capitolo1”><a name = “capitolo1”>

href = “#capitolo1” href = “#capitolo1” (riferimento interno)(riferimento interno)

href = “pagina.html#capitolo1” href = “pagina.html#capitolo1” (interno ad altra pagina)(interno ad altra pagina)

Link mailtoLink mailtohref = mailto:utente@sitohref = mailto:utente@sito

per inviare un messaggio di posta per inviare un messaggio di posta elettronica utilizzando il client e-mail elettronica utilizzando il client e-mail predefinito sul computerpredefinito sul computer

<a href = mailto:utente@sito?<a href = mailto:utente@sito?CC=utente2@sito2&Subject=soggettoCC=utente2@sito2&Subject=soggetto%20messaggio>%20messaggio>

Mappe sensibiliMappe sensibiliCapitolo 6Capitolo 6

TabelleTabelleCapitolo 7Capitolo 7

<table><table>Il tag <table> con attributo border = Il tag <table> con attributo border = “valore”“valore”

all’interno di <table> vari tag <tr> all’interno di <table> vari tag <tr> (table row), uno per ogni riga(table row), uno per ogni riga

All’interno del tag <tr> tanti tag <td> All’interno del tag <tr> tanti tag <td> (table data) quante sono le colonne(table data) quante sono le colonne

Opzionalmente il tag <th> come Opzionalmente il tag <th> come intestazione di colonnaintestazione di colonna

Un esempioUn esempio<table border="1"><table border="1"> <tr><tr> <th>Mese</th><th>Mese</th> <th>Importo</th><th>Importo</th> </tr></tr> <tr><tr> <td>Gennaio</td><td>Gennaio</td> <td>200</td><td>200</td> </tr></tr> <tr><tr> <td>Febbraio</td><td>Febbraio</td> <td>350</td><td>350</td> </tr></tr></table></table>

Attributi di Attributi di <table><table>

align = “valore” (left center right)align = “valore” (left center right)

width = “valore” (in pixel o in width = “valore” (in pixel o in percentuale)percentuale)

border = “valore” (0 bordo invisibile)border = “valore” (0 bordo invisibile)

……

Frames e IframesFrames e IframesCapitolo 8Capitolo 8

FormFormCapitolo 9Capitolo 9

Alberto FerrariAlberto Ferrari

Altri usi del formAltri usi del form


Esempio input Esempio input texttext


<form action="http://myhost.com/myscript.cgi" method="post"><br />State: <input type="text" name="state" value="IT" size="2"

maxlength="2" /><br />Password: <input type="password" name="password" /><br /><input type="checkbox" name="moreinfo" value="yes"

checked="checked" />Send me more info.<br />Select your gender below:<br /><input type="radio" name="gender" value="F" />Female<br /><input type="radio" name="gender" value="M" />Male<br /><input type="submit" name="okbutton" value="OK,

submit!" /><br /><input type="reset" value="Whoops - erase that" /><input type="image" src="hand.gif" /><input type="hidden" name="totalsofar" value="1290.65" /></form>



Choose your favorite color: <select name="favcolor">

<option>green</option><option>aquamarine</option><option selected="selected">emerald</option><option>turquoise</option><option>aqua</option><option value="green2">green</option><option value="green3">green</option>

</select>


<textarea name="stuff" rows="5" cols="10">Enter stuff here</textarea>

Cenni sui fogli di stileCenni sui fogli di stileCapitolo 10Capitolo 10

HTML 4.01

Documents

Transcript of HTML 4.01