HTML pdf - Appunti del Linguaggio HTML per esame di fondamenti dell\'informatica a Comunicazione PDF

Preview

Summary

Appunti del Linguaggio HTML per esame di fondamenti dell'informatica a Comunicazione e media...

Description

LINGUAGGIO HTML! Il linguaggio HTML è un linguaggio utilizzato per la creazione di pagine Web ed è stato sviluppano da Tim Berners Lee, l’inventore del World Wide Web. Lo sviluppo di tale linguaggio è iniziato alla fine degli anni 80, parallelamente alla definizione del protocollo HTTP, introdotto nella UD 07. Nel corso degli anni il linguaggio ha subito diverse modifiche e vari miglioramenti. In questo corso ci occupiamo della quinta versione di HTML, denotata anche con il nome di HTML5.! Come già descritto in precedenza, HTML è l’acronimo di Hyper-Text Markup Language, che tradotto significa Linguaggio di Annotazione per Ipertesti. I documenti scritti in HTML sono ipertesti multimediali. Un ipertesto è un documento con rimandi e punti di snodo, chiamati comunemente link. HTML è multimediale perché consente di creare pagine composte da diversi elementi (testo, immagini, video, …). Trattandosi di un linguaggio di annotazione, si basa sull’utilizzo di tag. I tag sono gli elementi utilizzati per definire la struttura di ogni pagina Web e sono gli ingredienti fondamentali e necessari per dare vita e forma a ogni pagina Web scritta in HTML. Esistono tag specifici per scopi diversi, tra i quali vale la pena elencare i seguenti.! "! - Formattare testi (titoli e paragrafi, grassetto e corsivo, …)! - Creare elenchi puntati e numerati! - Inserire immagini e file multimediali! - Creare link! - Creare tabelle! - Gestire l'interazione con gli utenti! ""! I tag sono identificati mediante i simboli < e > chiamati parentesi angolari. Per iniziare la parte di testo da scrivere dentro a un tag è necessario aprire il tag usando la sintassi , dove nome_tag è il nome del tag. Per terminare la parte di testo dentro al tag, è necessario chiudere il tag usando la sintassi inserendo uno slash (/) prima del nome del tag. È possibile utilizzare più di un tag per la stessa porzione di testo.! Per creare un documento HTML, si può usare un editor di testo e salvare il documento con estensione .html. Per modificare un documento è possibile aprirlo utilizzando lo stesso editor di testo. In alternativa, un documento HTML può essere aperto con un browser qualunque per vedere come appare graficamente la pagina Web corrispondente.! Ogni documento scritto nella versione 5 di HTML inizia con! "! ! "! Inoltre, ogni documento deve necessariamente essere suddiviso in due parti. La prima parte è l’intestazione (header) della pagina ed è compresa tra i tag e che indicano rispettivamente l’apertura e la chiusura del tag head. Si tratta di una parte indispensabile che però non appare esplicitamente quando si visualizza il documento tramite un browser, rimanendo invisibile all’utente. La seconda parte di un documento HTML è il corpo (body) della pagina, ed è compresa tra i tag e che indicano rispettivamente l’apertura e la chiusura del tag body. Contiene tutti gli elementi visibili all’utente, anche se sono scritti in modo diverso rispetto a come appaiono quando si visualizza il documento nel browser. Intestazione e corpo vanno entrambi inseriti all’interno del tag . Un documento html finisce sempre con cioè con la chiusura del primo tag aperto all’inizio. La struttura di un documento html può quindi essere indicata nel modo seguente. All’interno del tag appare il tag che definisce il nome che è associato alla finestra in cui si apre la pagina Web nel browser (in questo caso: Titolo). Inoltre sono indicati vari commenti, che in HTML iniziano con .! "!

! "! "! Esempio 8.1: Si consideri il seguente testo scritto in un file HTML.! "!

""""""

!

Il documento precedente, se aperto con il browser, consente di ottenere la seguente pagina Web. Come si può notare, la parola Commento non appare nella pagina Web visualizzata tramite browser, poiché è compresa tra , cioè tra i tag che identificano l’inizio e la fine di un

commento." " " " " "" "!

!

I tag possono essere utilizzati per definire la struttura del documento HTML, specificando come appare il documento una volta visualizzato nel browser. Anche HTML, così come LaTeX, si basa sull’approccio WYSIWYM. Infatti, come vedremo, il documento HTML visualizzato usando il browser appare diverso dallo stesso documento visualizzato usando un editor di testo. Ad

esempio, non è sufficiente andare a capo mentre si scrive il documento per fare in modo che il testo vada a capo quando si visualizza il documento nel browser. Il tag può essere utilizzato per forzare l’andata a capo e deve essere chiuso con . Poiché si tratta di un tag vuoto, cioè che non contiene testo al suo interno, il tag dovrebbe essere aperto e subito chiuso. In altre parole, bisognerebbe scrivere , ma di solito si usa con lo slash dopo il nome del tag. ha lo stesso significato di .! Nella parte rimanente di questa UD sono mostrati alcuni dei tag più usati per definire dimensione e struttura del testo e per introdurre elenchi puntati e numerati, immagini, tabelle e link.! "! Tag per paragrafi! Il tag può essere utilizzato per definire i paragrafi. La fine di un paragrafo è identificata da . Ad esempio, il testo seguente definisce due paragrafi.! "!

"""

!

Tag per titoli/dimensione testo! I tag , , , , , possono essere utilizzati per definire titoli di dimensioni diverse. Il tag corrisponde alla dimensione più grande e il tag a quella più piccola. Tali tag devono essere chiusi usando lo stesso nome del tag preceduto dallo slash (/). Ad esempio, il testo seguente mostra l’uso dei tag e per creare un titolo e un sottotitolo. Nell’esempio appare anche un paragrafo, identificato dal tag .!

" " ""

!

Formattazione del testo! Il tag può essere usato per mettere una parte di testo in grassetto e deve essere chiuso con .! Il tag può essere usato per mettere una parte di testo in corsivo e deve essere chiuso con .! Il tag può essere usato per sottolineare una parte di testo e deve essere chiuso con .! "! Esempio 8.2: Si consideri il seguente testo scritto in un file HTML. All’interno del tag c’è un titolo in seguito da un paragrafo. Successivamente, c’è un titolo in (più piccolo del precedente) seguito da tre paragrafi, contenenti lo stesso testo. La prima volta il testo nel paragrafo risulterà scritto in grassetto, poiché è contenuto nel tag . La seconda volta il testo

nel paragrafo risulterà scritto in corsivo, poiché è contenuto nel tag . La terza volta il testo nel paragrafo risulterà sottolineato, poiché è contenuto nel tag .! "! "

! "! Il documento precedente, se aperto con il browser, consente di ottenere la seguente pagina Web.! "!

"""

!

"! Elenchi! Il tag può essere usato per iniziare un elenco puntato. Ogni elemento dell’elenco deve iniziare con il tag . L’elenco puntato viene concluso dal tag !

Il tag può essere usato per iniziare un elenco numerato. Ogni elemento dell’elenco deve iniziare con il tag . L’elenco numerato viene concluso dal tag ! "! Esempio 8.3: Il seguente testo scritto in un file HTML mostra un elenco puntato e un elenco numerato. Ognuno dei due elenchi è definito all’interno di un paragrafo. Un titolo in precede ognuno dei due paragrafi.! "!

! Il documento precedente, se aperto con il browser, consente di ottenere la seguente pagina Web.! "!

! "! Tabelle! Il tag è usato per inserire una tabella. Ogni nuova riga della tabella inizia con il tag e si conclude con . Ogni nuova colonna definita all’interno di una riga inizia con il tag e si conclude con .! "! Immagini! Il tag è usato per iniziare l’inserimento di un’immagine, con la seguente sintassi, dove nome_file è il nome del file contenente l’immagine che si vuole inserire.! "! ! "! Link! Il tag è usato per iniziare l’inserimento di un link, con la seguente sintassi, dove url è la url di una pagina Web (ad esempio, http://it.wikipedia.org) e nome_link è il nome che apparirà come link nel documento.! "! nome_link ! "! Nell’esempio seguente viene mostrato come inserire un’immagine. In questo caso, il nome dell’immagine è london2.png. Nello stesso esempio, viene inoltre inserita una tabella con due colonne e cinque righe. Infine, viene inserito un link.! "! Esempio 8.4: Si consideri il seguente testo scritto in un file HTML.!

! Il documento precedente, se aperto con il browser, consente di ottenere la seguente pagina Web.! "!

! "! Commenti! Come già osservato in precedenza, è possibile inserire dei commenti in un file HTML. Tali commenti sono visibili a chi modifica la pagina usando un editor di testo, ma non sono visibili

aprendo il documento con il browser. Ogni commento inizia con i simboli .! Alcuni tag supportano degli attributi. Ad esempio, il tag e i tag per i titoli supportano l’attributo align, che consente di allineare il testo al centro, a sinistra, a destra oppure di rendere il testo giustificato. Se non viene specificato nulla l’allineamento è a sinistra.! "! Esempio 8.5: Si consideri il seguente testo scritto in un documento HTML. Nel seguente esempio si può vedere la sintassi per la definizione dell’allineamento. Nell’esempio viene applicato prima al tag (con allineamento al centro) e in seguito al tag (con allineamento a destra, giustificato e a sinistra, nell’ordine).! "!

! "! Il documento precedente, se aperto con il browser, consente di ottenere la seguente pagina Web. Come definito nell’intestazione, il nome che appare in alto nella finestra del browser è Titolo.! ""!

! "! Il tag , usato per le colonne, supporta un altro attributo, che definisce la larghezza di una colonna facendo riferimento al numero complessivo di colonne nella tabella. Tale attributo è colspan. Nell’esempio seguente, l’inserimento di colspan=2 all’interno del tag nella prima riga della colonna fa in modo che la colonna assuma la larghezza uguale a quella di due colonne della tabella. Nello stesso esempio vengono inoltre definiti diversi tipi di allineamento per le diverse righe e colonne della tabella.! "! Esempio 8.6: Si consideri il seguente testo scritto in un documento HTML. Ogni riga eccetto la prima è composta da due colonne. L’attributo colspan = 2 all’interno del tag usato per aprire la colonna della prima riga fa in modo che la larghezza di quella colonna sia uguale a quella di due colonne delle restanti righe della tabella, cioè uguale a quella della tabella stessa.!

"! Il documento precedente, se aperto con il browser, consente di ottenere la seguente pagina Web....