HTML: Introduzione Cos’è HTML? HTML è l’acronimo di Hyper text markup language. È il linguaggio con il quale vengono realizzate le pagine web. Tradotto significa linguaggio di marcatura ipertestuale. Che significa? Per capirlo dobbiamo sapere cos’è un ipertesto e cosa sono i marcatori. Un “ipertesto” è più di un semplice documento testuale. Infatti al suo interno contiene collegamenti tra informazioni che sono correlate tra loro. Sappiamo fare qualche esempio di informazioni correlate in un testo? HTML serve a disporre in un certo modo un documento ipertestuale. 1 Lezione 2 HTML: Introduzione Differenze tra HTML e i linguaggi di programmazione (1/2) Un documento ipertestuale che usa HTML per disporre il testo in esso contenuto non è altro che un testo che contiene “parole chiave” che indicano come il contenuto deve essere disposto all’interno della pagina, quali sono le caratteristiche degli oggetti che contiene (immagini, testo, audio…), posizione e colore di testo e collegamenti… HTML non è un vero e proprio linguaggio di programmazione. Infatti non possiede meccanismi per l’elaborazione dei dati di input. Questo non significa che non si possano eseguire piccoli programmi all’interno di una pagina web. HTML infatti può “ospitare” codice scritto in un linguaggio di programmazione interpretabile dal browser che si sta utilizzando. HTML in sostanza si limita a specificare “come visualizzare” la pagina web nel nostro browser. 2 Lezione 2 HTML: Introduzione TAGS HTML indica ai browser come disporre il testo attraverso l’uso di TAGS o marcatori. Un tag è una “parola chiave” che in HTML da indicazioni su come disporre gli elementi della pagina stessa. Esempi di tags: <html></html> <head></head> <body></body> <h1></h1> I tag sono sempre racchiusi tra “< >”. Si deve sempre specificare il tag di apertura e il tag di chiusura. Il tag di chiusura deve essere sempre preceduto da “/”, altrimenti il browser interpreterà il tag come un nuovo tag aperto! 3 Lezione 2 HTML: Introduzione Differenze tra HTML e i linguaggi di programmazione (2/2) A differenza dei linguaggi di programmazione, quando commettiamo un errore nella sintassi di un qualche tag HTML, non compariranno messaggi di errore nella pagina. I messaggi di errore in una pagina HTML possono provenire da piccoli programmi (script) inclusi nell’HTML. Ciò che può accadere è che la pagina non venga visualizzata, oppure non viene visualizzata come noi immaginiamo. Questo non significa che possiamo commettere errori nella scrittura del codice! 4 Lezione 2 HTML: Introduzione Browser web Sono i programmi utente utilizzati per la visualizzazione delle pagine web. Sono chiamati anche “user-agent”. Tra i principali browser utilizzati oggi per la visualizzazione delle pagine questi 3 sono i più conosciuti: Internet Explorer Netscape navigator (Mozilla/Firefox) Opera La principale differenza (ma ne esistono molte altre!) tra Internet Explorer e Netscape sta nell’ordine con il quale gli oggetti della pagina vengono visualizzati. IE da la precedenza al testo e poi alle immagini, Netscape invece visualizza gli 5 Lezione 2 oggetti in modo sequenziale. HTML: Introduzione Pagine web multi-browser compatibili La parte del browser che si occupa della visualizzazione della pagina è detto motore di rendering (motore di interpretazione). Un bravo webmaster dovrebbe realizzare siti web che sono multi-browser compatibili, ovvero che visualizzino allo stesso modo la medesima pagina web. Per fare ciò deve conoscere non tanto tutto il codice HTML alla perfezione, ma piuttosto il modo in cui questo codice è interpretato dal motore di rendering del browser. 6 Lezione 2 HTML: Introduzione Il W3C Esiste uno standard che descrive il modo in cui le istruzioni HTML devono essere scritte per ottenere un certo risultato. Lo scopo di definire uno standard è quello di forzare i webmaster nella creazione di pagine web multi-browser. Infatti più si aderisce allo standard, più le pagine web saranno correttamente visualizzate su qualunque browser. Le specifiche (regole) dello standard HTML sono disponibili presso il sito del World Wide Web Consortium, detto anche W3C (http://www.w3c.org). Utilizzeremo molto spesso tale sito per “validare” le nostre pagine HTML. 7 Lezione 2 HTML: Introduzione Struttura di una pagina HTML (1/3) Documento Intestazione Paragrafo 1 8 Corpo Titolo Capitolo 1 Sez 1 Sez 2 Paragrafo 2 Capitolo n Sez n Paragrafo 1 Lezione 2 Sez 1 Sez n Paragrafo 1 Paragrafo 2 HTML: Introduzione Struttura di una pagina HTML (2/3) Una pagina HTML possiede una struttura gerarchica come nella figura precedente. Le parti principali sono due denominate HEAD e BODY. Il tag per HEAD è <head></head> Il tag per BODY è <body></body> HEAD rappresenta l’insieme delle caratteristiche della pagina, come ad esempio il titolo. In BODY invece c’è tutto il contenuto. 9 Lezione 2 HTML: Introduzione La sintassi dei Tag I tag come già detto vanno sempre racchiusi tra “< >”. I tag di chiusura vanno sempre preceduti da “/”. Il contenuto va inserito tra l’apertura (start tag) e la chiusura (end tag). Si usano i tag di apertura per indicare al browser dove cominciare ad applicare una certa proprietà. Similmente quelli di chiusura per indicare dove la proprietà finisce I tag possono avere degli attributi o proprietà. Esempio: <tag attributo=“valore”> Contenuto </tag> Esistono anche tag senza attributi che sono chiamati tag vuoti o empty tag. Esempio: <br> 10 Lezione 2 HTML: Introduzione Struttura di una pagina HTML (3/3) Esempio: esempio1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Titolo del documento</title> </head> <body> <h1 align="left">Titolo del capitolo</h1> <h2 align="left">Titolo della sezione</h2> <h3 align="left">Titolo del paragrafo</h3> </body> </html> 11 Lezione 2 HTML: Introduzione I FRAME I frame o “riquadri” comparvero con le prime versioni del browser Netscape Navigator. Strutturare una pagina in frame permette di suddividere la pagina web in più riquadri indipendenti tra loro. All’epoca questo comportava notevoli vantaggi perché: •Quando le velocità di navigazione non erano elevate poter ricaricare solo una parte della pagina web consentiva sia al server che al client di risparmiare banda. •I webmaster non erano costretti a ripetere il contenuto comune di una pagina •Il fatto di poter mantenere fisso su un lato del monitor il menu di navigazione e far scorrere sull’altro lato il contenuto piace a molti utenti, soprattutto quando la risoluzione del monitor è bassa (800 x 600 o 640x480, magari su un monitor da 15’’) 12 Lezione 2 HTML: Introduzione Tag per i frame in una pagina HTML Il tag per creare frames all’interno di una pagina è frameset, gli attributi di frameset sono riportati di seguito nella tabella: 13 ATTRIBUTO ATTRIBUTO VALORE VALORE Rows Rows Questo Questoattributo attributospecifica specifical'organizzazione l'organizzazionedei deiframe frameorizzontali. orizzontali.È Èununelenco elenco separato separatoda davirgole virgoledidipixel, pixel,percentuali percentualieelunghezze lunghezzerelative. relative.Il Ilvalore valore predefinito predefinitoèè100% 100%eesignifica significauna unariga. riga. Cols Cols Questo Questoattributo attributospecifica specifical'organizzazione l'organizzazionedei deiframe frameverticali. verticali.È Èununelenco elenco separato separatoda davirgole virgoledidipixel, pixel,percentuali percentualieelunghezze lunghezzerelative. relative.Il Ilvalore valore predefinito predefinitoèè100% 100%eesignifica significauna unacolonna. colonna. Lezione 2 HTML: Introduzione Tag per i frame in una pagina HTML: esempi di codice Esempio 1: Questo primo esempio divide lo schermo verticalmente in due (crea cioè una metà alta ed una metà bassa). <FRAMESET rows="50%, 50%"> ...il resto della definizione... </FRAMESET> Esempio 2: L'esempio seguente crea una griglia 2x3 di sottospazi. <FRAMESET rows="30%,70%" cols="33%,34%,33%"> ...il resto della definizione... </FRAMESET> 14 Lezione 2 HTML: Introduzione Tag per i frame in una pagina HTML: esempi di codice Esempio 3: I frameset possono essere annidati a qualsiasi livello. Nell'esempio successivo, il FRAMESET esterno divide lo spazio disponibile in tre colonne uguali. Il FRAMESET interno divide poi la seconda area in due righe di altezza diseguale. <FRAMESET cols="33%, 33%, 34%"> ...contenuto del primo frame... <FRAMESET rows="40%, 50%"> ...contenuto del secondo frame, prima riga... ...contenuto del secondo frame, seconda riga... </FRAMESET> ...contenuto del terzo frame... </FRAMESET> 15 Lezione 2 HTML: Introduzione Il tag <frame> Una volta creata la nostra griglia con il tag <frameset>, incrociando le righe e le colonne, dobbiamo specificare dove si trova il file di origine di ciascun frame. Possiamo farlo con la sintassi: <frame src="prima.html"> Come si può vedere l’origine di ciascun frame è un documento HTML standard (come quelli che abbiamo analizzato finora): avrà dunque la sua dichiarazione di documento, la sua <head> e il suo <body>. Per visualizzare il codice HTML di ciascun frame è sufficiente andare nel riquadro desiderato e poi digitare il tasto destro del mouse. Quindi: •Con Internet Explorer: selezionare HTML •Con Mozilla: selezionare this frame > view frame source È possibile anche individuare un frame in modo più preciso, assegnandogli un nome: <frame id=”primoRiquadro” name=”primoRiquadro” src="prima.html"> 16 Lezione 2 HTML: Introduzione Altri attributi del tag <frame> ATTRIBUTO VALORE Name Specifica il nome di un riquadro. Il valore è una stringa Src Specifica la pagina di origine di ciascun frame. Il valore è il nome della pagina origine. Frameborder Noresize Scrolling 17 Questo attributo dà informazioni al programma utente circa il bordo del frame. Valori possibili: 1: Questo valore dice al programma utente di tracciare un separatore tra questo frame e qualsiasi frame adiacente. È il valore predefinito. 0: Questo valore dice al programma utente di non tracciare un separatore tra questo frame e qualsiasi frame adiacente. Si noti che malgrado ciò dei separatori possono essere tracciati accanto a questo frame, se specificati da altri frame. Se presente tra gli attributi non permette il ridimensionamento dei frame Questo attributo specifica informazioni sullo scorrimento della finestra del frame. Possibili valori •auto: Questo valore dice al programma utente di fornire dispositivi di scorrimento per la finestra del frame quando necessario. Questo è il valore predefinito. •yes: Questo valore dice al programma utente di fornire sempre dispositivi di scorrimento per la finestra del frame. •no: Questo valore dice al programma utente di non fornire dispositivi di scorrimento per la finestra del frame. Lezione 2 HTML: Introduzione Il “target” (bersaglio) dei link in un frameset In una struttura a frames può apparire difficile caricare il contenuto di un link nella sezione appropriata. Grazie all’attributo target possiamo specificare qual'è la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno. I valori degli attributi sono schematizzati nella tabella di seguito. 18 Target=“_blank” Apre il link in una nuova finestra, senza nome Target=“_self” Apre il link nel frame stesso (è così di default) Target=“_parent” Il documento viene caricato nel frameset precedente a quello corrente (più esattamente nel frame genitore) Target=“_top” Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame. Target=“nomedelframe” Il documento viene caricato nel frame specificato dal valore di nomedelframe Lezione 2 HTML: Introduzione Esercizi 1. 2. 3. 4. Creare un documento con due frame verticali di uguale larghezza Creare un documento con due frame verticali uno il doppio dell’altro Creare un documento con una griglia di frame 2x3 Creare un documento con una struttura a frame come la seguente FRAME 1 FRAME 2 19 FRAME 3 Lezione 2
Scarica
