MACROSTRUTTURA DEL DOCUMENTO HTML. Il documento HTML si divide in due parti: l INTESTAZIONE e il CORPO DEL DOCUMENTO

Transcript

1 MACROSTRUTTURA DEL DOCUMENTO HTML Il documento HTML si divide in due parti: l INTESTAZIONE e il CORPO DEL DOCUMENTO Denominazione Nome del marcatore Descrizione Documento <HTML></HTML> All'inizio e alla fine del documento Intestazione <HEAD></HEAD> Contiene informazioni descrittive, come il titolo. I dati che sono inseriti all interno dell intestazione non vengono visualizzati dal browser come elementi del corpo del documento. L intestazione è anche il luogo di inserimento dei metadati HTML (parole chiave, autore della pagina, descrizione del contenuto del documento, programma utilizzato per la realizzazione del file) utili al reperimento dell informazione Titolo <TITLE></TITLE> Deve essere inserito nell intestazione (tra i due tag apertura e chiusura) e viene visualizzato sulla barra del browser Corpo <BODY></BODY> Contenuto della pagina, all interno del quale andranno inseriti tutti gli altri marcatori HTML. Possiede anche degli attributi, che vedremo in seguito Codifica nel file HTML tramite marcatore tutto il documento <head> <head> <META name= keywords content= HTML, web, motori di ricerca > <META name= author content= Nome Cognome > <META name= description content= La mia pagina web > <META name= generator content= Blocco Note di Windows 98 > <title>testo del titolo</title> <head> <title>titolo</title> <body> testo del documento </body> STRUTTURA E FORMATO DEL DOCUMENTO Sappiamo che i marcatori possono avere attributi. Alcuni attributi (come align ) sono utilizzabili all interno di diversi elementi Titoli <H*></H*> <H* ALIGN=LEFT CENTER RIGHT> </H*> Sono definiti 6 livelli da <H1> a <H6> che, in ordine decrescente, definiscono le dimensioni del testo e hanno come effetto l andata a capo del testo che segue Tramite l attributo align, il titolo può essere allineato a sinistra, al cento o a destra <head>intestazione <title>titolo</title> <body> <h1>titolo di primo livello</h1> <h2>titolo di secondo livello</h2> <h3 align= center >titolo di

2 Paragrafo Interruzione riga Riga orizzontale spessore larghezza Sezioni Citazione <P></P> <P ALIGN=LEFT CENTER RIGHT> </P> <BR> <HR> <HR ALIGN = LEFT RIGHT CENTER> <HR SIZE=?> <HR WIDTH=? %> <DIV></DIV> <DIV ALIGN=LEFT RIGHT CENTER></DIV> <BLOCKQUOTE> </BLOCKQUOTE> Il paragrafo consente di dividere il documento in capoversi ed aumentarne quindi la leggibilità. Ottiene come effetto l andata a capo del testo che segue e l inserimento di una spaziatura Inserimento di una andata a capo del testo che segue il marcatore (corrisponde all invio da tastiera). Tanti <br> ottengono tante andate a capo e quindi spaziature verticali Inserimento di una riga orizzontale Allineamento della riga Spessore della riga, espresso in pixel Lunghezza della riga espressa in pixel o come percentuale rispetto alla larghezza della pagina Utile a raggruppare più elementi che appartengono alla medesima sezione testuale, come contenitore strutturale. Allineamento della sezione Visualizzato come blocco di testo rientrato rispetto al testo che precede e che segue. Richiede l inserimento del marcatore <p> </body> terzo livello allineato al centro</h3> <p>testo del paragrafo</p> <p align= center >testo del paragrafo, allineato al centro</p> questo il testo che segue in fase di layout testo del documento<br>questo testo andrà a capo <br><br> questo il testo che segue in fase di layout testo del documento <hr> <hr size= 2 > <hr width= 400 >riga lunga 400 pixel <hr width= 80% > riga che occupa l 80% della lunghezza della pagina <div> <h1>titolo della sezione</h1> <p>paragrafo della sezione</p> <p>paragrafo della sezione</p> </div> <blockquote> <p>testo rientrante</p> </blockquote> STILI CARATTERE (stili fisici) Oltre agli stili fisici esistono anche stili logici che hanno il compito di assegnare un valore di enfasi ad una porzione di testo, e che hanno come riscontro in layout una diversa formattazione (grassetto o corsivo). Si rimanda al sito Web per l elenco completo Denominazione Marcatore Esempio Resa in layout Grassetto <B></B> <b>testo in grassetto</b> Corsivo <I></I> <i>testo in corsivo</i> grassetto corsivo

3 Sottolineato <U></U> <u>testo sottolineato</u> Barrato <STRIKE></STRIKE> <strike>testo barrato</strike> Pedice <SUB></SUB> <sub>pedice</sub> Apice <SUP></SUP> Centrato Non fa parte delle specifiche HTML ufficiali Font molto grande Font molto piccolo <sup>apice</sup> <CENTER></CENTER> <center>testo centrato</center> <BIG></BIG> <big>testo più grande rispetto a quello di default</big> <SMALL></SMALL> <small>testo più piccolo rispetto a quello di default </small> sottolineato barrato testo e pedice testo e apice testo centrato testo e testo più grande testo e testo più piccolo INSERIRE IMMAGINI Per ogni file che intendiamo usare, vale a dire per ogni immagine che intendiamo inserire nel corpo del documento, dobbiamo specificarne l URL, cioè l indirizzo (che rimanda ad una zona dell hard disk o ad un luogo esterno). Le immagini che possiamo inserire nel documento devono avere estensione di formato JPEG o GIF (le estensioni supportate dai browser Web). Se il file immagine è inserito nella stessa cartella del file HTML di partenza è sufficiente specificare il nomedefile.estensione. Se invece il file si trova in un altra zona dell hard disk dovremmo specificare il percorso delle directory. Alcuni esempi: o pippo.jpg; il file che richiamiamo è nella stessa cartella del file HTML di partenza (URL relativo) o immagini/sfondo.jpg; il file che intendiamo inserire è situato la cartella immagini all interno della cartella corrente (cioè è una sotto directory del file HTML) (URL relativo) o../immagini/immagine.gif; il file che intendiamo inserire è situato la cartella immagini, che è la directory gerarchicamente superiore rispetto a quella del file HTML di partenza (URL relativo). Tanti../ significano tante risalite nell albero gerarchico delle directory o il file è un indirizzo Web (URL assoluto) Inserimento dell immagine <IMG SRC="URL"> <IMG SRC="URL" ALIGN= TOP BOTTOM MIDDLE LEFT RIGHT> Elemento che non necessita di chiusura, in quanto segnala solo il posizionamento dell oggetto Attributo che definisce il posizionamento dell immagine rispetto al testo circostante (che precede e che segue) ma non il > testo <p align= center > <img src= immagine.gif

4 testo in alternativa <IMG SRC="URL" ALT="***"> posizionamento dell immagine rispetto alla pagina. Se volessimo per esempio centrare l immagine dovremmo inserirla fra tag <p> Testo che ha la funzione di inserire una descrizione dell immagine (che compare al passaggio del puntatore del mouse sopra l immagine stessa) dimensioni <IMG SRC="URL" WIDTH=? HEIGHT=?> Dimensioni dell immagine (larghezza e lunghezza). Il valore è espresso in pixel. Per conoscere le dimensioni dell immagine è sufficiente visualizzarne le proprietà bordo <IMG SRC="URL" BORDER=?> Quando un immagine diventa un link (come vedremo nella sezione dedicata ai collegamenti ipertestuali) compare attorno ad essa un bordo. Il valore è espresso in pixel distanza dal testo <IMG SRC="URL" HSPACE=? VSPACE=?> Con align possiamo spostare l immagine a sinistra o a destra del testo; con hspace e vspace (con valore in pixel) possiamo definire la distanza dell immagine dal testo (orizzontalmente e verticalmente) align= bottom > </p> alt= questa è la descrizione dell immagine > testo width= 200 height= 400 > testo border= 0 > testo hspace= 10 vspace= 5 > testo COLLEGAMENTI (LINK) I link sono aree del testo che permettono, con un click del mouse, di saltare ad un documento collegato o di aprirlo. Il discorso fatto per le immagini, vale anche per i link; è cioè necessario, per ogni file che vogliamo attivare tramite link ipertestuale, specificare l indirizzo. Collegamento a un documento (A sta per ANCHOR; HREF sta per riferimento ipertestuale) Definizione di un riferimento interno al testo (ancora) riferimento interno al documento <A HREF="URL"></A> Una volta quindi decisa la parte del testo che vogliamo rendere attiva possiamo inserire il marcatore che la definisce come tale. Il marcatore conterrà l indirizzo del documento di destinazione <A NAME="***"></A> Per inserire un link ad un punto preciso di un documento (lo stesso documento o uno differente) è per prima cosa necessario definire il punto che si intende rendere raggiungibile tramite link, cioè assegnare un nome alla porzione. <A HREF="#***"></A> Per linkare quindi ad uno specifico punto del documento, <a href= file.estensione >testo linkabile</a> <a name= ancora >porzione di testo</a> <a href= #ancora >cliccando qui

5 corrente un riferimento preciso in un altro documento indirizzo Immagine linkabile <A HREF="URL#***"> </A> <A </A> <A HREF="URL"><IMG SRC= URL ></A> nel link dobbiamo esplicitare il nome che abbiamo assegnato al riferimento di cui sopra (preceduto dal simbolo #) Possiamo anche linkare ad un punto specifico di un documento esterno (all interno del quale dovremmo aver assegnato alla porzione che vogliamo raggiungere un <a name= *** ></a>) Questo consente ai visitatori di spedire una all indirizzo specificato (il sistema attiverà il sofware di gestione della posta elettronica del visitatore) Non solo il testo, ma tutto ciò che è inserito fra <A href= *** > di apertura e </A> di chiusura può essere linkabile. Quindi anche un immagine (cliccando la quale viene attivato il file specificato nel collegamento) si salta alla porzione chiamata ancora </a> che è interna al documento <a href= pippo.htm#ancora >cliccan do qui si salta alla porzione chiamata ancora </a> che è nel documento chiamato pippo.htm che si trova nella stessa cartella del documento corrente <a href= malto:ftomasi@classics.un ibo.it >clicca qui per scrivermi</a> <a href= pippo.htm ><img src= immagine.jpg ></a> SFONDI E COLORI Gli attributi del corpo del documento Il <body> ha una serie di attributi utili a specificare: se si intende utilizzare un immagine come sfondo, il colore di sfondo del documento, il colore del testo e il colore dei link (gli attributi possono essere tutti inseriti all interno dell elemento <body>, separati da uno spazio). La scelta dei colori in HTML avviene in due modi: 1. tramite riferimento alla tripla RGB. RGB sta per Red, Green e Blue, i tre colori fondamentali, che miscelati, producono tutti i colori dello spettro. Ad ogni colore viene associato un valore che va da 0 a 255. La notazione RGB avviene però in notazione numerica esadecimale (notazione base 16, che utilizza le dieci cifre della notazione decimale e le lettere fino alla F: A B C D E F). Ad esempio essendo Rosso, Verde e Blu equivalenti a FF (255) la loro somma, da il colore bianco, quindi FFFFFF equivale al bianco , sottrazione di tutti i colori, è il nero. Moltissimi sono comunque i software che offrono la possibilità di estrapolare la tripletta esadecimale dai tre colori fondamentali e moltissimi sono i siti che mettono a disposizione tavole di colori (basti ad esempio fare un interrogazione, tramite un qualsiasi motore di ricerca, di Tavole codici colori HTML oppure consultare il sito Web del manuale). 2. Un modo più semplice, ma più limitato, di usare i colori è ricorrere alla denominazione (i 16 colori base sono: Aqua, Black, Blue, fucsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow). immagine di sfondo colore di sfondo del testo dei collegamenti dei collegamenti visitati del collegamento sul quale <BODY BACKGROUND="URL" BGCOLOR="#$$$$$$" TEXT="#$$$$$$" LINK="#$$$$$$" VLINK="#$$$$$$" ALINK="#$$$$$$"> Il riferimento ad un file immagine da inserire come sfondo del documento. Del file che si richiama deve essere specificato l indirizzo (come per tutte le.. <body background= sfondo.jpg bgcolor= #FF0000 red text= #0000FF blue link= #FFFF00 yellow vlink= #00FFFF aqua

6 si clicca immagini). I colori sono espressi tramite tripla RGB alink= #00FF00 green > documento con sfondo immagine, sfondo di colore rosso, testo di colore blu, link di colore giallo, link visitati di colore celeste, link di colore verde quando li si clicca </body> GESTIONE DEI CARATTERI È possibile lavorare su alcuni attributi dei caratteri utilizzati all interno del testo (marcatore <font> che necessariamente deve avere almeno uno degli attributi relativi a: dimensione, colore, tipo). Si può utilizzare un solo attributo oppure utilizzarli anche tutti, separati da uno spazio, a seconda delle esigenze di formattazione (è possibile cioè specificare contemporaneamente colore, dimensione e aspetto della porzione di testo compresa fra i due marcatori di apertura e chiusura) Dimensioni <FONT SIZE=?></FONT> I valori vanno da 1 a 7. Il valore del testo di default è 3 Modifica misura Colore Tipo i caratteri comunemente usati sono: Arial, Verdana, Georgia, Times New Roman, Courier New, Helvetica <FONT SIZE="+ -?"> </FONT> <FONT COLOR="#$$$$$$"> </FONT> <FONT FACE="***"></FONT> Si può esprimere il valore del font in termini relativi, cioè più piccolo o più grande rispetto al testo circostante (ed ottenere così effetti grafici speciali) Il colore del font si esprime tramite tripla RGB, così come per il <body> Il valore di face è relativo al tipo di font. Per esprimerne il valore è necessario utilizzare la denominazione ufficiale. È possibile comunque usare ogni tipo di font. Se non è un font ufficiale affinché sia visibile è necessario che il visitatore scarichi il file *.ttf sul proprio computer. Il font di default è Times New Roman. <font size= 4 >testo cui applico la formattazione</font> <font size= -2 >testo più piccolo</font><font size= +3 >testo più grande</font> <font color= #CCCCCC >porzione di testo di colore grigio chiaro (silver)</font> <font face= Verdana >testo di face Verdana</font>