HTML. Alcuni contenuti di queste slides sono tratti dal testo:

Transcript

1 HTML Alcuni contenuti di queste slides sono tratti dal testo: Vito Roberto, Marco Frailis, Alessio Gugliotta, Paolo Omero Introduzione alle Tecnologie Web MCGraw Hill,

2 HTML HyperText Markup Language è il linguaggio di Markup usato per la visualizzazione delle pagine web sul sito della W3C (World Wide Web Consortium) è possibile studiarne le regole e come si è evoluto nel tempo (versioni 1.0, 2.0, 3.0, 3.2, 4.0, 4.01 fino ad arrivare al XHTML, unione dell XML ed HTML, con sintassi molto più rigorosa del html). Un documento HTML è composto da contenuto che viene visualizzato e da tag istruzioni che formattano i contenuti. I tag HTML indicano gli elementi, la struttura, la formattazione e i link ipertestuali con altre pagine, ed hanno il seguente aspetto: <NomeTag> testo su cui il tag ha effetto </NomeTag> HTML è case unsesitive: i tag possono essere scritti sia in maiuscolo che in minuscolo I tag possono essere annidati <table> </ table> <tr> </tr> <tr> </tr> <th>prima cella della prima riga</th>  <th>seconda cella della prima riga</th> <td>prima cella della seconda riga</td> <td>seconda cella della seconda riga</td> Questo segmento di html rappresenta la formattazione di una tabella, il significato dei tag usati è: <tr> = table row; <th> = table header; <td> = table data; nel frammento è presente anche un commento identificato con . guide per la scrittura di pagine html possono essere: 2

3 Struttura della pagina Una pagina Web è un file di testo con estensione.htm o.html. Può essere creato con un generico editor di testo come NodePad, WordPad, Textpad, o più specifico coma PSPad, o con editor grafici di HTML come Front Page di Microsoft, Dreamweaver, HTML Edit. Una volta completata la scrittura la visualizzazione della pagina avviene per mezzo del browser. Un documento html è diviso in una parte di intestazione e una di contenuto vero e proprio. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> informazioni non immediatamente percepibili, che riguardano il modo in cui il documento deve essere letto ed interpretato. Questo è il luogo dove scrivere: il titolo della pagina i meta-tag, script, fogli di stile, eccetera indica che stiamo utilizzando le specifiche del W3C riguardo al linguaggio HTML, che essa è pubblica e la versione del html usata è la 4.01 transitional scritta in lingua inglese. La DTD Document Type Definition Definizione del tipo di documento definisce le componenti ammesse nella costruzione di un documento nel linguaggio di Markup. La versione transitional è una versione temporanea, per consentire il passaggio da una specifica all'altra (strictframeset), in essa sono ammessi tag deprecati ed è la più usata attualmente. Spesso si trova anche il link al documento dove è la DTD. </head> <body> <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Strict//EN Contenuto della pagina <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 3

4 HTML: header Tra i tag <head> <\head> sono contenute le informazioni senza effetto nel layout della pagina ma utili per l interpretazione della pagina. Contiene il titolo che compare in alto sulla barra del browser <title>titolo del Documento</title> Contiene riferimenti a codice lato client: javascript VBscript. <script language= javascript > </script> Contiene riferimenti ai fogli di stile della pagina <link REL= STYLESHEET TYPE= text/css HREF= lib/style1.css /> o direttamente le definizioni degli stili: <style type="text/css"> </style> Contiene i Metatag, elementi utilizzati per fornire informazioni sulle pagine utili ad utenti e motori di ricerca. <meta http-equiv="content-type" content="text/html; charset=iso " /> Informazione riguardante il tipo di contenuto della pagina HTML e il formato di codifica dei caratteri. attributi del tag <meta> sono: name indica il tipo di informazione contenuta nel tag content invece il contenuto della informazioni <meta name= description content= La descrizione del sito o della pagina /> il metadato description contiene una breve descrizione dei contenuti della pagina, che può essere utile per l'indicizzazione della pagina da parte dei motori di ricerca. <meta name= keywords content= parole, chiave, separate, da, virgole /> Il metadato keywords contiene di solito una serie di parole chiave, rappresentative del contenuto della pagina, che servono ai motori di ricerca non per l'individuazione dell'argomento trattato nella pagina. 4

5 HTML: il tag <body> Tra i tag <body> <\body> viene scritto il corpo del documento. L'aspetto del testo e dello sfondo della pagina possono essere specificati attraverso attributi del tag body: background = path file grafico permette di indicare un file grafico (in formato GIF o JPEG) che viene inserito sullo sfondo della pagina; se l'immagine è più piccola rispetto alla pagina, essa viene automaticamente duplicata e affiancata alle sue copie bgcolor = #colore RGB : permette di assegnare un colore allo sfondo text = #colore RGB : indica il colore del testo all'interno della pagina Colore RGB è di 6 cifre (2 per R 2 per G e 2 per B) e ogni cifra è codificata in esadecimale: bgcolor = #FFFFFF indica il bianco text="#ff0000 indica il rosso Se non si vuole una sfumatura di colore particolare l attributo text può assumere come valore il nome del colore stesso (es. red, green, black, ). text= black link = #colore RGB : indica il colore dei link a riposo in genere è #0000FF vlink = #colore RGB : indica il colore dei link già visitati in genere violetto #80080 alink = #colore RGB : indica il colore dei link attivo (per evidenziare che il browser sta caricando la pagina) lang= it : consente di specificare la lingua in cui è scritta la pagina 5

6 Editing della pagina La pagina è strutturata in paragrafi e blocchi di testo, per formattare la pagina vengono usati per: Titoli: i tag <h n > dove n indica il livello del titolo <h1> è quello più alto <h6> il più basso <h1>titolo capitolo </h1> <h2> titolo paragrafo o sezione</h2> <h3> titolo sottosezione </h3> ecc dopo ogni <h n > il browser va a capo automaticamente Blocchi di testo: Il tag <p> identifica il paragrafo: lascia una riga vuota prima della sua apertura e dopo la sua chiusura. <p> paragrafo 1 </p> <div> che non lascia spazi prima della sua apertura e dopo la chiusura. <div>blocco di testo 1</div> <span> è un contenitore generico che può essere annidato (ad esempio) all'interno dei <div>. Si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include. In genere è usato insieme ai fogli di stile per definire aree di testo particolari. Oggi la W3C impone l uso dei fogli di stile per allineare il testo, le prime forme di allineamento venivano fatte con l attributo align: <p align="left">testo</p> <p align= justify">testo</p> per forzare l andata a capo all interno del paragrafo sono consentiti i tag: <br> (break) e <hr> ("horizontal rule"), che serve per tracciare una linea orizzontale. Il tag <blockquote> consente di aggiungere spazi (come fosse un tabulatore) supporta l attributo Align= ; 6

7 Lo stile del testo Gli stili del testo in HTML solitamente si suddividono i tag in grado di attribuire lo stile al testo in stili fisici e stili logici: vengono definiti come fisici quei tag che definiscono graficamente lo stile del carattere, indipendentemente dalla funzione del contenuto del tag, ne sono esempi: <b> </b> grassetto <u> </u> carattere sottolineato <i> </i> carattere italico o corsivo <big> </big> carattere più grande <small> </small> carattere più piccolo <strike>. </strike> testo barrato <sup>.. </sup> <sub> </sub> rispettivamente per apici e pedici vengono definiti come logici quei tag che forniscono anche informazioni sul ruolo svolto dal contenuto del tag, e in base a questo adottano uno stile grafico, ne sono esempi: <address>indirizzo</address> <blockquote>blocco di citazione</blockquote> e <cite>citazione</cite> per le citazioni in blocchi o brevi <em>enfasi</em> <strong>rafforzamento</strong Gli stili possono essere sommati: ad esempio, per ottenere un testo corsivo neretto si ha: <b><i>questa riga è in neretto e corsivo</i></b> Caratteri speciali per approfondimento: 7

8 HTML: elenchi Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le "liste", che sono sostanzialmente di tre tipi: Elenchi ordinati ordered list, sintassi per le liste numerate è : <ol> </ol> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> attributo opzionale del tag <ol> è type che di default è 1 ad indicare l elenco ecc, altrimenti può essere cabiato in: I (numeri romani maiuscole), i (numeri romani minuscoli), a (lettere minuscole), A (lettere maiuscole) Elenchi non ordinati unordered list, sintassi per le liste non numerate è: <ul> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> </ul> attributo opzionale del tag <ul> è type quando non esplitamente indicato è disc (fa un pallino), altrimenti: circle, square Elenchi di definizioni sono individuati dal tag <dl> e gli elementi dell elenco sono formati da un termine che indica la parte da definire <dt>e un termine di definizione vera e propria. * l attributo type è deprecato dal W3C perché come tutte le caratteristiche che riguardano la formattazione possono essere specificate nei fogli di stile. 8

9 HTML: link Per spiegare come è possibile realizzare un link può essere introdotta la metafora dell ancora: la testa dell ancora è all interno del documento e la coda in un punto dello spazio ipertestuale (anche interno al documento stesso). Per creare un link viene usato il tag a (anchor): <a href= title= descrizione link target= _blank > Il mio sito</a> possono essere individuate una parte di contenuto del tag che nasconde il collegamento, essa è la parte visibile all utente, e una parte che identifica la risorsa verso cui andare, identificata dal attributo href. Attributi del tag a sono: tiltle: consente di inserire la descrizione dell immagine che compare nell onmouseover target: permette di specificare dove verrà aperta per la visualizzazione la pagina linkata di default la pagina viene aperta all'interno del documento stesso, ma è possibile specificare che la pagina sia aperta in una nuova finestra: target = _blank indica al browser di visualizzare la pagina in una nuova finestra. hreflang: indica la lingua del documento a cui linkasi. È un attributo che migliora l'accessibilità del sito, oltre ad essere potenzialmente utile per i motori di ricerca <a href=" hreflang="eng" target="_blank">world Wide Web Consortium</a> href: specifica la risorsa esterna a cui far riferimento mediante URL. La destinazione dell ancora può essere indifferentemente una pagina HTML di un sito, un immagine, un file pdf, un file zip, o un file exe: il meccanismo del link funziona allo stesso modo indipendentemente dal tipo di risorsa è il browser che si comporterà in modo differente a seconda della risorsa. E possibile inserire collegamenti anche verso indirizzi <a href="mailto:dotting@unicas.it">scrivimi una !</a> 9

10 dopo un click L utente clicca su un oggetto (testo o immagine) che punta alla pagina il cui nome URL è Cosa Succede? Il browser chiede al DNS l indirizzo it.wikipedia.org; Il DNS risponde con ; Il browser istaura una connessione virtuale (TCP) alla porta 80 di ; Il Browser invia il comando GET/hypertext/wiki/Linguaggio_formale_(matematica).htm. Messaggio di richiesta Il server HTTP invia il file Linguaggio_formale_(matematica).htm con i contenuti (oggetti). Messaggio di risposta Si rilascia la connessione TCP; Una volta ottenuta la pagina, il browser ne interpreta il contenuto del file Linguaggio_formale_(matematica).htm Il file contiene codice html (HyperText Markup Language) anzi xhtml(extensible HyperText Markup Language) Questo linguaggio è definito in maniera tale da consentire la corretta visualizzazione grafica dell informazione contenuta nella pagina richiesta. 10

11 Ancore e link interni L attributo href del tag <a> specifica la risorsa a cui far riferimento mediante URL che può essere relativo o assoluto. Path relativi sono: href= /prima/interna/interna.htm href=../../index.htm Bisogna stare attenti al S.O. del server web!! È possibile includere nell header il tag : <base href= > per settare il percorso base da cui far partire tutti i riferimenti relativi della pagina. È possibile usare le ancore per creare un indice interno del documento: <a name= sezione_artec">arte contemporanea ha come massimi esponenti ecc.. </a> le ancore senza l attributo href= non sono viste come link e la loro formattazione è indistinguibile dal testo normale. In un altra parte del documento è possibile far riferimento all ancora appena scritta attraverso un link che punti ad essa: <a href="#sezione_artec ">Arte Contemporanea</a> link vuoti portano all inizio del documento: <a href="# ">torna su</a> 11

12 HTML: immagini I formati ammessi nel Web sono sostanzialmente tre: GIF (Graphic Interchange Format) sono immagini con non più di 256 colori (dunque con colori piatti e senza sfumature), come grafici o icone JPG: è l acronimo del gruppo di ricerca che ha ideato questo formato (il Joint Photographic Experts Group), idoneo per le immagini di qualità fotografica PNG (Portable Network Graphic). Il PNG è un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è appunto proprietario); tuttavia oggi il PNG è letto oramai da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno La sintassi per inserire una immagine è: <img src= img/bender.gif > il tag img è un tag vuoto e l attributo src specifica il percorso assoluto o relativo dove trovare l immagine Attributi del tag img: width e height: per modificare le dimensioni. alt consente di inserire una descrizione alternativa nel caso di problemi di caricamento dell immagine. tiltle consente di inserire la descrizione dell immagine che compare nell action onmouseover. longdesc serve per inserire descrizioni lunghe e viene utilizzato per mappare le immagini align per definire posizione dell immagine rispetto al testo può essere: right, center, left, bottom, middle, top hspace e vspace spaziatura orizzontale e verticale (in pixel). border: spessore bordo (in pixel). 12

13 Inclusione di elementi multimediali Quando si inseriscono elementi multimediali in una pagina web bisogna stare sempre attenti alle dimensioni dell oggetto da inserire. Più in generale quando si inserisce un elemento multimediale (immagini, grafici particolari, audio,video) viene usato il tag <object>, che secondo le indicazioni del W3C è il tag corretto per inserire elementi multimediali, tanto che nelle specifiche dell'xhtml 2 (l'evoluzione dell'html) persino le immagini devono essere inserite tramite questo tag. Un altro tag che spesso viene utilizzato per la multimedialità ma non inserito nelle specifiche W3C è il tag <embed>. Principali attributi di <object> sono: data questo attributo può essere utilizzato per specificare il percorso dell'oggetto da inserire nella pagina classid da indicazioni sul percorso dell'oggetto, ed è utile per identificare il tipo di plugin con cui eseguire l'oggetto codebase serve per indicare l'url di base, a cui il codice indicato in "data" o in "classid" fa riferimento type è il tipo di oggetto da inserire (più esattamente è il MIME type dell'oggetto) archive si può indicare una lista di URL, separati da virgola, contenti risorse relative all'oggetto inserito width, height se necessario, si possono indicare larghezza e altezza dell oggetto In molti casi il tag object si occupa di attivare un "plug-in" (componente aggiuntivo che integra le funzionalità per leggere l oggetto nel browser). All'interno del tag <object> è possibile specificare una sintassi alternativa per i browser che non leggono questo tag o parametri necessari all esecuzione dell oggetto. 13

14 Esempi inclusione multimedia Per impostare un suono di sottofondo si può fare in diversi modi: 1. Col tag <bgsound> ma funzionerà solo con internetexplorer <bgsound src="url del file audio" loop="numero di ripetizioni" /> loop di default è 1 imposta la un unica ripetizione loop= infinite imposta infinite volte. 2. In questo modo crossbrowser, col tag <embed> <embed src="url del file audio" autostart="true" /> 3. Seguendo lo standard HTML 4.01 quindi col tag <object> : <object data="url del file audio" type="audio/wav" autostart="true"> <embed src="url del file audio" autostart="true"> </object> Inclusione del audio sottofondo.mid <object data="audio\ sottofondo.mid " type="audio/mid" autostart="true"> <embed src="audio\ sottofondo.mid" autostart="true"> </object> Per includere un file video: <object data="filmato.mov" type="video/quicktime" width="164" height="140"> <embed src="filmato.mov" type="video/quicktime" width="164" height="140"> </object> Inclusione del video V.3gp <object data="video\v.3gp" type="video/quicktime" width="164" height="140"> <embed src="video\v.3gp" type="video/quicktime" width="164" height="140"> </object> 14