HTML HTML HTML lacronimo di Hyper Text Markup

  • Slides: 20
Download presentation
HTML

HTML

HTML � HTML è l’acronimo di Hyper. Text Markup Language. � È il linguaggio

HTML � HTML è l’acronimo di Hyper. Text Markup Language. � È il linguaggio utilizzato per descrivere le pagine che costituiscono i nodi dell’ipertesto. �Le istruzioni vengono date attraverso comandi denominati tag e racchiusi tra i segni di maggiore e minore (<tag>).

La struttura di un documento Un documento HTML è costituito da due parti: •

La struttura di un documento Un documento HTML è costituito da due parti: • HEAD, che è l’intestazione del documento: <head> … </head> • BODY, che è il corpo del documento: <body> … </body> Un documento HTML sarà quindi: <html> <head>… </ head > < body > …</body> </html> I tag possono essere nidificati ad eccezione di <head> e <body>. 3

<HEAD>: intestazione Nell’intestazione del documento (<HEAD>) può essere presente il seguente tag: • <title>…</title>

<HEAD>: intestazione Nell’intestazione del documento (<HEAD>) può essere presente il seguente tag: • <title>…</title> riferito al titolo che apparirà nella barra superiore del browser e verrà utilizzato dai motori di ricerca 4

5 <BODY>: il corpo Nel corpo del documento si trova tutto ciò che verrà

5 <BODY>: il corpo Nel corpo del documento si trova tutto ciò che verrà visualizzato dal browser. Il tag body ha attributi mediante i quali è possibile definire caratteri generali del documento: • il colore o l’immagine di sfondo da impostare nel background bgcolor=colore background= immagine. gif • il colore del testo text=colori • il colore dei collegamenti ipertestuali presenti nel documento link=colore alink=colore vlink=colore Esempio: <body bgcolor=yellow text=red link=green >… </body>

Come creare un documento HTML Per scrivere un documento html è sufficiente: • aprire

Come creare un documento HTML Per scrivere un documento html è sufficiente: • aprire un editore di testo qualsiasi (blocco note, word pad) • scrivere il codice • salvarlo con estensione htm o html • aprire il browser • aprire il documento 6

I tag di posizionamento Definiscono lo stile e il posizionamento del testo nella pagina:

I tag di posizionamento Definiscono lo stile e il posizionamento del testo nella pagina: • nuova linea (non richiede un tag di chiusura) • <p> nuovo paragrafo (non richiede un tag di chiusura) • <p align=center/right/left)> nuovo paragrafo con allineamento del testo • <center>. . . </center> testo allineato al centro • <div align=center>. . . </div> allineamento del testo al centro • <hr align=right width=80% size=2 color=red> inserisco una linea 7

8 I tag fisici Definiscono lo stile e il formato del testo: • <font

8 I tag fisici Definiscono lo stile e il formato del testo: • <font face="Garamond, Arial" size=5 color=red>. . . </font> specifica lo stile, il colore e la grandezza del testo • <i>. . . </i> <b>. . . </b> <u>. . . </u> <strike>. . . </strike> definiscono il testo corsivo, grassetto, sottolineato e barrato • <sup>. . . </sup> <sub>. . . </sub> permettono di scrivere il testo in posizione di apice e pedice

I colori, i font, le dimensioni E’ possibile indicare il colore usando il nome

I colori, i font, le dimensioni E’ possibile indicare il colore usando il nome inglese del colore (blue, yellow, …) oppure usando la notazione RGB = Red. Green. Blue e potendo così creare ogni tipo di colore. In HTML si usa la numerazione esadecimale per definire la notazione RGB. Per es. : bgcolor=#000000 Nella scelta del font è importante definirne più di un tipo, considerando che non tutti i sistemi operativi hanno la stessa dotazione di font. E’ buona regola prevedere almeno un font di sistema come può essere l’Arial. Gli oggetti (immagini, tabelle, livelli, …) vengono dimensionati in pixel o in percentuale relativamente al loro oggetto “contenitore”. 9

10 Le liste (1) Le liste ordinate sono elenchi indicizzati. In HTML sono strutturate

10 Le liste (1) Le liste ordinate sono elenchi indicizzati. In HTML sono strutturate con i seguenti tag: • <ol>…</ol> che definiscono l’inizio e la fine della lista. L’attributo Type definisce quale tipo di “indicizzazione” utilizza la lista stessa: Type = A (lettere maiuscole) Type = a (lettere minuscole) Type = I (numeri romani maiuscoli) Type = i (numeri romani minuscoli) Il type predefinito sono i numeri arabi. • <li> che individuano ogni elemento della lista

Le liste (2) Le liste non ordinate sono elenchi puntati ma non indicizzati. In

Le liste (2) Le liste non ordinate sono elenchi puntati ma non indicizzati. In HTML sono strutturate con i seguenti tag: • <ul>…</ul> che definiscono l’inizio e la fine della lista. L’attributo Type definisce quale tipo di “puntatura” utilizza la lista stessa: Type = disc (pallini) Type = circle (pallini vuoti) Type = square (quadratini) • <li> che individuano ogni elemento della lista 11

Le immagini (1) I formati di immagini supportati dal browser sono: • JPG a

Le immagini (1) I formati di immagini supportati dal browser sono: • JPG a 16 milioni di colori ed è un formato compresso • GIF a 256 colori L’inserimento di immagini avviene utilizzando il tag <img> Gli attributi sono: • src che specifica l’indirizzo relativo o assoluto dell’immagine • alt definisce il testo che appare quando il mouse passa sopra l’immagine • width=n height=n definiscono la dimensione align=(top, bottom, middle, right, left) indica il posizionamento del testo rispetto all’immagine • border=n la dimensione del bordo 12

Le immagini (2) Le mappe cliccabili si creano da un’unica immagine allo scopo di

Le immagini (2) Le mappe cliccabili si creano da un’unica immagine allo scopo di creare più link su un solo oggetto, dividendolo in zone. In HTML sono strutturate con i seguenti tag: <map name=nomemappa> <area> … </map> Il tag area definisce forma, coordinate e url del link: <area shape=circle/rect/poly) coords=(. . . ) href=url> Il riferimento alla mappa è inserito come attributo nel tag <img>: <img src=immagine. gif usemap=#nomemappa> 13

I collegamenti ipertestuali (1) Sono lo strumento tecnico che consente una fruibilità reticolare dei

I collegamenti ipertestuali (1) Sono lo strumento tecnico che consente una fruibilità reticolare dei contenuti, la personalizzazione dei percorsi e l’immediatezza nel reperimento delle informazioni. Il tag utilizzato: <a>…</a> I suoi attributi: • href che definisce l’url della pagina collegata usando l’indirizzamento relativo o assoluto • title definisce il testo che appare quando il mouse passa sopra il link • target che definisce dove verrà caricata la pagina <a href=… target=_top/_parent/_self/_blank/nomeframe>…</a> (_top: nella finestra competa; _parent: nel frame genitore di quello corrente; _self: nel frame che conteneva il collegamento; _blank: apre una nuova finestra; nomeframe: nel frame che ha name=nomeframe) 14

I collegamenti ipertestuali (2) 15 Un link può linkare: • un indirizzo esterno <a

I collegamenti ipertestuali (2) 15 Un link può linkare: • un indirizzo esterno <a href=”http: //www. google. it”> Google </a> • un indirizzo interno <a href=”. . /pagina 2. html”> pagina 2 <a> • un paragrafo interno al documento <a href=#segnalibro> vai a segnalibro </a> dovrà essere creato il punto (segnalibro)in cui inserire il tag <a name=segnalibro> questo è il punto segnalibro </a> • un indirizzo e-mail <a href=mailto: bordieris@tiscali. it? subject=oggetto? body=corpo> . . . </a>

Le tabelle (1) Sono uno degli strumenti più usati in quanto consentono la definizione

Le tabelle (1) Sono uno degli strumenti più usati in quanto consentono la definizione dei layout della pagine. In HTML sono strutturate con i seguenti tag: <table>…</table> I suoi attributi: • background inserisce un’immagine di background • border=1, 2, 3. . definisce la dimensione del bordo • width e height definiscono la dimensione della tabella • cellpadding=1, 2, 3… definisce la distanza del testo dal bordo della tabella • cellspacing=1, 2, 3…definisce la distanza delle celle dal bordo della tabella e dal bordo delle altre celle 16

Le tabelle (2) Vanno definite le righe e le colonne secondo l’orientamento dall’alto a

Le tabelle (2) Vanno definite le righe e le colonne secondo l’orientamento dall’alto a sinistra fino al basso a destra. Ogni riga conterrà la definizione delle “sue” colonne: • le righe sono strutturate con i tag <tr>…</tr> • le colonne con i tag <td>…</td> • l’intestazione della tabella <th>. . . </th> che sostituisce il tag <td> Esempio: <table> <tr> <td>. . . </td> </tr> < table > 17

Le tabelle (3) Gli attributi del tag <td>: • align=center/right/left definisce l’allineamento orizzontale •

Le tabelle (3) Gli attributi del tag <td>: • align=center/right/left definisce l’allineamento orizzontale • valign=top/bottom/center definisce l’allineamento verticale • bgcolor definisce il colore di background • width e height definiscono la dimensione • background inserisce un’immagine di background • colspan e rowspan definiscono il numero di righe o colonne che deve occupare la cella 18

Inserimento di un file audio I formati supportati dal web più utilizzati sono: .

Inserimento di un file audio I formati supportati dal web più utilizzati sono: . mid, . wav, . mp 3 E’ possibile inserire una musica di sottofondo che parte all’apertura della pagina con il tag <EMBED> <EMBED SRC="imagine. mid" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0" HEIGHT="0"> Se si desidera creare un link che permetta di sentire un file audio, è possibile creare una pagina html che contenga il tag <EMBED SRC=. . . . > che apra il file MID. Se si crea un link che punta direttamente al file . mid, verrà aperto dal browser l’applicativo che permette di ascoltare i file audio. 19

FINE

FINE