docCorso di Fondamenti di Informatica – Elementi di HTML
download 
Reclamo Transcript
Corso di Fondamenti di Informatica – Elementi di HTML
Corso di Fondamenti di Informatica – Elementi di HTML Struttura minima di una pagina <html> Apre la pagina comunicando che si tratta di un documento html <head> Apre la testata. Altre informazioni possono venir qui inserite. <title>titolo</title> Il titolo della pagina che compare in alto a sinistra sulla cornice del browser </head> Chiude la testata <body> Apre il corpo della pagina ..... Qui va il contenuto della pagina </body> Chiude il corpo della pagina </html> Chiude il documento html Attributi del tag <body> bgcolor="#rrggbb" Fissa il colore dello sfondo della pagina; default #FFFFFF bianco text="#rrggbb" Fissa il colore del testo; default #000000 nero background="url" Per usare l’immagine che si trova in url come sfondo link="#rrggbb" Fissa il colore dei link; default #0000FF blu alink="#rrggbb" Fissa il colore del link attivato; default #000000 nero vlink="#rrggbb" Fissa il colore dei link già visitati; default #FF00FF viola Intestazioni o titoli <h1..h6>titolo</h1../h6> align="left center right" Intestazione. Corpo del titolo massimo h1, minimo h6. L’attributo fissa l’allineamento del titolo rispetto alla pagina; default left Stili fisici del testo <b> testo </b> bold, testo in grassetto <i> testo </i> italic, testo in corsivo <tt> testo </tt> typewriter, testo monospaziato, come con la macchina da scrivere <i><b> testo </b></i> testo in corsivo grassetto <i><tt> testo </tt></i> testo in typewriter inclinato Attenzione all’annidamento dei tag: <stile1><stile2> ... </stile2></stile1> <u> testo </u> underline, sottolineato <q> testo </q> ”quoted”, tra ”virgolette” NON funziona con Internet Explorer <sup> testo </sup> Apice o esponente, piccolo e alzato <sub> testo </sub> Pedice o indice, piccolo e abbassato <big> testo </big> Piú grande del testo adiacente <small> testo </small> Piú piccolo del testo adiacente Forma, corpo, colore dei caratteri <font>testo</font> size="n" face="nome font" color="#rrggbb" Non ha significato se non accompagnato almeno uno degli attributi Corpo del carattere, minimo size="1", massimo size="7", default size="3" Forma del carattere, ad es. arial, verdana, courier, helvetica Colore del carattere: i valori ammessi per ogni colore rgb vanno da 00 a FF Impaginazione <p> left center right justify <br> <hr> size="p" width="p" "xx%" align="left center right" <div>blocco</div> align="left center right" <pre>blocco</pre> Apre un paragrafo, va a-capo e salta una riga; l’opzione align="." con i valori allinea il testo a sx, dx, lo centra o produce righe della stessa lunghezza. Va a-capo, divide il testo di un paragrafo senza iniziarne un altro Traccia una linea orizzontale di separazione; ammette gli attributi Spessore in pixel p, default size="2" Fissa la larghezza in pixel p o in % della lunghezza riga; default width="100%" Posiziona la linea a . . . ; default align="center" Lascia una riga sopra e sotto blocco (testo, immagine, tabella); l’attributo Posiziona il blocco a . . . ; default align="left" Riproduce il testo cosı́ com’è scritto, con gli spazi e gli a-capo 9 Liste semplici <ul> <li> ... </ul> Il segno disc circle square Apre una lista semplice Apre un argomento; non serve chiudere con </li> Altri argomenti vanno qui, ciascuno preceduto da <li> Chiude la lista che apre ogni argomento dipende dall’attributo type="." del tag <ul>, con i valori • Un grosso punto pieno (default) ◦ Un cerchietto vuoto Un quadratino pieno Liste ordinate <ol> Apre una lista ordinata <li> Apre un argomento; non serve chiudere con </li> ... Altri argomenti vanno qui, ciascuno preceduto da <li> </ol> Chiude la lista L’ordinamento dipende dall’attributo type="." del tag <ol>, con i valori 1 Numeri arabi 1, 2, 3, ecc. (default) A Lettere maiuscole A, B, C, .., Z a Lettere minuscole a, b, c, .., z I Numeri romani maiuscoli I, II, III, IV, ... i Numeri romani minuscoli i, ii, iii, iv, ... Accentate italiane, spazio non interrompibile, segni Si ottiene digitando Si ottiene digitando Si ottiene bontà bontà c’è c’è È può può piú piú perché < < > > ” c ◦ ° © † Immagini <img src="url"> width="p" height="p" align="left right" border="p" digitando È perché " † digitando cosí & ß Carica l’immagine da url. Ammette gli attributi Larghezza in pixel; fissato solo questo valore, l’altezza viene calcolata dal browser Altezza in pixel; fissato solo questo valore, la larghezza viene calcolata dal browser Posiziona l’immagine; il testo scorre a fianco Pone un bordo di p pixel intorno all’immagine; default border="0" Etichette <a name="label">testo</a> Assegna l’etichetta label al testo Links <a href="url">testo</a> Crea un riferimento (link) verso url url – Uniform Resource Locator "http:// ... " "[path]file.*" "[path]file.htm#label" #label Tabelle <table> <tr> <td> ... </td> ... </tr> ... </table> Si ottiene cosı́ [spazio] & ß Un sito remoto, una pagina web Un file .htm .gif, ecc. in una directory locale Un’etichetta in file.htm in una directory locale Un’etichetta nello stesso documento html Apre una tabella Apre una riga Apre/chiude una cella ordinaria Le altre eventuali celle della riga vanno descritte qui Chiude la riga Le altre eventuali righe della tabella vanno descritte qui Chiude la tabella 10 Attributi bgcolor="#rrggbb" width="p" "xx%" height="p" align="left center right" valign="top middle bottom" cellspacing="p" cellpadding="p" border="p" colspan="n" rowspan="n" Frames <frameset> <frame src=url> ... </frameset> Colore di sfondo; si applica ai tag <table> <tr> <td> Larghezza in pixel o %; si applica a <table> <td> Altezza in pixel; si applica a <table> <td> Allinea in orizzontale il contenuto della cella; si applica a <tr> <td> Allinea in verticale il contenuto della cella; si applica a <tr> <td> Spazio tra le celle in pixel; si applica a <table>; default 2 pixel Spazio tra contenuto e bordo-cella in pixel; si applica a <table> default 0 Spessore del bordo in pixel; border="0" lo elimina; si applica a <table> La cella si estende per n celle a destra; si applica a <td> La cella si estende per n celle in giú; si applica a <td> Dichiara un documento html a riquadri; sostituisce <body> Dichiara un frame che viene caricato da url Altri eventuali riquadri vanno elencati qui, ciascuno in un tag <frame> Chiude il documento a riquadri; sostituisce </body> Il layout dei riquadri è controllato dagli attributi di <frameset> cols="p,q,." "p%,q%,." Riquadri verticali in pixel o % della finestra del browser rows="p,q,." "p%,q%,." Riquadri orizzontali in pixel o % della finestra del browser Gli attributi di ciascun riquadro <frame> sono name="nome" Il riquadro viene identificato dall’etichetta nome Si accede al riquadro nome scrivendo <a href=url target="nome">testo</a>. Target predefiniti sono blank top self scrolling="yes no auto" frameborder="0" "1" Carica la pagina in una nuove finestra del browser Espande il frame a pieno schermo Carica la nuova pagina nello stesso riquadro (default) Controlla le barre di scorrimento del frame; default auto Pone un bordo intorno al riquadro; default frameborder="1" 11
