HTML: Introduzione

1
HTML Introduzione

• Cosè HTML?
• HTML è lacronimo 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.

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
  allinterno 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 lelaborazione dei dati di input.
• Questo non significa che non si possano eseguire
  piccoli programmi allinterno 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.

3
HTML Introduzione

• TAGS
• HTML indica ai browser come disporre il testo
  attraverso luso 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
• lthtmlgtlt/htmlgt
• ltheadgtlt/headgt
• ltbodygtlt/bodygt
• lth1gtlt/h1gt
• I tag sono sempre racchiusi tra lt gt.
• 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!

4
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
  nellHTML.
• 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!

5
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
  nellordine con il quale gli oggetti della pagina
  vengono visualizzati.
• IE da la precedenza al testo e poi alle immagini,
  Netscape invece visualizza gli oggetti in modo
  sequenziale.

6
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.

7
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.

8
HTML Introduzione

• Struttura di una pagina HTML (1/3)

9
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 è ltheadgtlt/headgt
• Il tag per BODY è ltbodygtlt/bodygt
• HEAD rappresenta linsieme delle caratteristiche
  della pagina, come ad esempio il titolo. In BODY
  invece cè tutto il contenuto.

10
HTML Introduzione

• La sintassi dei Tag
• I tag come già detto vanno sempre racchiusi tra
  lt gt.
• I tag di chiusura vanno sempre preceduti da /.
• Il contenuto va inserito tra lapertura (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
• lttag attributovaloregt
• Contenuto
• lt/taggt
• Esistono anche tag senza attributi che sono
  chiamati tag vuoti o empty tag.
• Esempio
• ltbrgt

11
HTML Introduzione

• Struttura di una pagina HTML (3/3)
• Esempio esempio1.html
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetiso-8859-1" /gt
• lttitlegtTitolo del documentolt/titlegt
• lt/headgt
• ltbodygt
• lth1 align"left"gtTitolo del capitololt/h1gt
• lth2 align"left"gtTitolo della sezionelt/h2gt
• lth3 align"left"gtTitolo del paragrafolt/h3gt
• lt/bodygt
• lt/htmlgt

12
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. Allepoca 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
  sullaltro 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)

13
HTML Introduzione

• Tag per i frame in una pagina HTML
• Il tag per creare frames allinterno di una
  pagina è frameset, gli attributi di frameset sono
  riportati di seguito nella tabella

ATTRIBUTO VALORE
Rows Questo attributo specifica l'organizzazione dei frame orizzontali. È un elenco separato da virgole di pixel, percentuali e lunghezze relative. Il valore predefinito è 100 e significa una riga.
Cols Questo attributo specifica l'organizzazione dei frame verticali. È un elenco separato da virgole di pixel, percentuali e lunghezze relative. Il valore predefinito è 100 e significa una colonna.
ATTRIBUTO VALORE
Rows Questo attributo specifica l'organizzazione dei frame orizzontali. È un elenco separato da virgole di pixel, percentuali e lunghezze relative. Il valore predefinito è 100 e significa una riga.
Cols Questo attributo specifica l'organizzazione dei frame verticali. È un elenco separato da virgole di pixel, percentuali e lunghezze relative. Il valore predefinito è 100 e significa una colonna.
14
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).
• ltFRAMESET rows"50, 50"gt ...il resto della
  definizione... lt/FRAMESETgt
• Esempio 2
• L'esempio seguente crea una griglia 2x3 di
  sottospazi.
• ltFRAMESET rows"30,70" cols"33,34,33"gt
  ...il resto della definizione... lt/FRAMESETgt

15
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.
• ltFRAMESET cols"33, 33, 34"gt
• ...contenuto del primo frame...
• ltFRAMESET rows"40, 50"gt
• ...contenuto del secondo frame, prima riga...
• ...contenuto del secondo frame, seconda riga...
  
• lt/FRAMESETgt
• ...contenuto del terzo frame...
• lt/FRAMESETgt

16
HTML Introduzione

• Il tag ltframegt
• Una volta creata la nostra griglia con il tag
  ltframesetgt, incrociando le righe e le colonne,
  dobbiamo specificare dove si trova il file di
  origine di ciascun frame.
• Possiamo farlo con la sintassi
• ltframe src"prima.html"gt
• Come si può vedere lorigine di ciascun frame è
  un documento HTML standard (come quelli che
  abbiamo analizzato finora) avrà dunque la sua
  dichiarazione di documento, la sua ltheadgt e il
  suo ltbodygt.
• Per visualizzare il codice HTML di ciascun frame
  è sufficiente andare nel riquadro desiderato e
  poi digitare il tasto destro del mouse. Quindi
• Con Internet Explorerselezionare HTML
• Con Mozillaselezionare this frame gt view frame
  source
• È possibile anche individuare un frame in modo
  più preciso, assegnandogli un nome
• ltframe idprimoRiquadro nameprimoRiquadro
  src"prima.html"gt

17
HTML Introduzione

• Altri attributi del tag ltframegt

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 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.
Noresize Se presente tra gli attributi non permette il ridimensionamento dei frame
Scrolling 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.
18
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 allattributo 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.

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.
Targetnomedelframe Il documento viene caricato nel frame specificato dal valore di nomedelframe
19
HTML Introduzione

• Esercizi
• Creare un documento con due frame verticali di
  uguale larghezza
• Creare un documento con due frame verticali uno
  il doppio dellaltro
• Creare un documento con una griglia di frame 2x3
• Creare un documento con una struttura a frame
  come la seguente

FRAME 3
FRAME 1
FRAME 2