2-I principali tag d.. - EINAUDI
annuncio pubblicitario
I PRINCIPALI TAG DEL LINGUAGGIO HTML Struttura generica di una pagina Web: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Titolo della pagina</TITLE> <META name="title" content="Home Page, ISIS Einaudi-Ceccherelli, Piombino"> <META name="description" content="Home Page, ISIS Einaudi-Ceccherelli, Piombino "> <META name="keywords" content=" ISIS Einaudi-Ceccherelli "> <META name="author" content="Matteo Gistri / ISIS Einaudi-Ceccherelli, Piombino "> <META name="copyright" content="2007-2011, ISIS Einaudi-Ceccherelli, Piombino "> <META http-equiv="Reply-to" content="[email protected]"> <META http-equiv="content-language" content="IT"> <META http-equiv="Content-Type" content="text/html; iso-8859-1"> <META name="ROBOTS" content="INDEX,FOLLOW"> <META name="creation_Date" content="11/11/2011"> <META name="revisit-after" content="7 days"> </HEAD> <BODY bgcolor=”#000000” text=”ffffff”> imposto colore sfondo e colore testo Oppure: <BODY background=”percorso e nome del file” text=”ffffff”> imposto immagine di sfondo e colore testo Contenuto della pagina </BODY> </HTML> Per Generare Meta Tag: http://www.tuttowebmaster.it/strumenti/meta_tag_generator.php I possibili attributi del tag Body sono: background bgcolor text link vlink alink Paragrafi (BR, P, DIV, SPAN) Il tag <BR> equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che segue va a capo mantenendo tutte le caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Il tag <BR> non richiede un corrispondente tag di chiusura, basta inserirlo nel punto in cui si vuole che la frase vada a capo. Esempio: <BR> Il tag <P> crea invece un'interruzione di paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e può essere formattato in maniera diversa rispetto al testo precedente. Il tag <P> d e v e essere usato con la rispettiva chiusura </P>. Esempio: <P>testo del paragrafo</P> Il tag <DIV> che si usa con la chiusura </DIV> serve a creare un blocco di testo che va a capo e può assumere caratteristiche di formattazione diverse dal testo precedente senza tuttavia creare spazio vuoto tra il nuovo testo e quello precedente. Il tag DIV definisce una porzione di documento. Il tag <SPAN> che si usa con la chiusura </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. Esempio: <span>contenitore 1</span><span>contenitore 2</span> Struttura generica di una pagina Web e principali Tag del Linguaggio HTML (ultima revisione 14/11/2011) Pag. 1 Riassumendo: le caratteristiche più evidenti di <p>, <div> e <span> sono quindi: <p> lascia spazio prima e dopo la propria chiusura <div> non lascia spazio prima e dopo la propria chiusura, ma - essendo un elemento di blocco - va a capo <span> - essendo un elemento inline - non va a capo Allineamenti di testo Per impostare gli allineamenti di testo che valgono paragrafo per paragrafo si usa l'attributo ALIGN del tag <P> secondo la sintassi: <P ALIGN=“valore“>paragrafo da allineare</p> dove il valore di ALIGN può essere: left per l'allineamento a sinistra, (allineamento predefinito) center per l'allineamento al centro, right per quello a destro justify per l'allineamento giustificato Allo stesso modo di <P ALIGN="valore">....</P> si può usare il tag <DIV ALIGN="valore">....</DIV> per identificare e formattare in modo omogeneo interi blocchi di testo anziché i singoli paragrafi. Formattazione I principali tag per la formattazione sono: <B>... </B> testo in grassetto; <I>... </I> testo in corsivo; <U>... </U> testo sottolineato; <STRIKE>... </STRIKE> testo barrato o depennato; testo apice; <SUP>... </SUP> <SUB>... </SUB> testo pedice. Scegliere il font del testo (Tag Font Face) Vediamo alcuni esempi di famiglie "sicure" di caratteri: <font face="Verdana, Arial, Helvetica, sansserif">Verdana e caratteri simili</font> Verdana e caratteri simili <font face="Arial, Helvetica, sans-serif">Arial e caratteri simili</font> Arial e caratteri simili <font face="Times New Roman, Times, serif">Times e caratteri simili</font> Times e caratteri simili <font face="Courier New, Courier, mono">Curier e caratteri simili</font> Curier e caratteri simili <font face="Georgia, Times New Roman, Times, Georgia e caratteri simili serif">Georgia e caratteri simili </font> <font face="Geneva, Arial, Helvetica, sansserif">Geneva e caratteri simili</font> Geneva e caratteri simili Struttura generica di una pagina Web e principali Tag del Linguaggio HTML (ultima revisione 14/11/2011) Pag. 2 Scegliere il colore del testo (Tag Font Color) Una volta scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, ecco il codice: <font color="blue">testo blu</font> oppure: <font color="#0000FF">testo blu</font> Una volta scelto il colore possiamo sempre decidere di cambiarlo: <font face="Verdana, Arial, Helvetica, sans-serif" color="blue"> testo blu in Verdana </font> <br > <font face="Verdana, Arial, Helvetica, sans-serif" color="red"> testo rosso </font> <br> o meglio ancora: <font face="Verdana, Arial, Helvetica, sans-serif" color="blue"> testo blu in Verdana <br/> <font color="red"> testo rosso </font> <br> </font> La seconda codifica è preferibile alla precedente, perché la scelta del tipo di carattere viene effettuata una sola volta, evitando così di scrivere del codice inutile. È importante notare che per evitare la ripetizione i due tag sono annidati l'uno dentro l'altro. Immagini(Tag IMG) Per inserire un'immagine in una pagina HTML basta inserire il tag: <IMG SRC="nome immagine">; questo tag non ha bisogno di chiusura. Affinché l'immagine venga visualizzata nella pagina web bisogna specificarne il nome, l'estensione e l'eventuale percorso. Usando il tag in questo modo l'immagine appare allineata alla base della riga di testo corrispondente, senza spazi aggiuntivi e mantiene le sue dimensioni assolute. Possiamo definire le dimensioni di visualizzazione di un'immagine specificando gli attributi WIDTH (larghezza in pixel) e HEIGHT (altezza in pixel). Ad esempio: <IMG SRC=”image.jpg” WIDTH=”100” HEIGHT=”50”> Quando si specificano le dimensioni di un'immagine è necessario conoscerne le dimensioni effettive per mantenere inalterato il rapporto larghezza/altezza evitando così di deformare l'immagine. Oltre alle dimensioni di visualizzazione possiamo definire anche l'allineamento dell'immagine rispetto al testo circostante mediante l'attributo ALIGN. I valori di ALIGN ammessi sono: Bottom: il lato inferiore dell'immagine appare allineato alla base della riga di testo (valore predefinito); Middle: il punto mediano dell'altezza dell'immagine si allinea alla base della riga di testo; il testo si spezza e prosegue sotto l'immagine; Left: l'immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato destro; Right: l'immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato sinistro. Nel caso in cui si voglia allontanare l'immagine dal testo si può aumentare lo spazio vuoto che circonda l'immagine attraverso gli attributi VSPACE (spazio verticale, in pixel) e HSPACE (spazio orizzontale, in pixel). Ad esempio Struttura generica di una pagina Web e principali Tag del Linguaggio HTML (ultima revisione 14/11/2011) Pag. 3 scrivendo: <IMG SRC=”image.jpg ” VSPACE=”10” HSPACE=”20”> Si può anche aggiungere un bordo intorno all'immagine tramite l'attributo BORDER che deve essere espresso in pixel secondo la sintassi: <IMG SRC=”image.jpg” BORDER=”5”> Un attributo fondamentale del tag <IMG> è ALT (testo alternativo). Grazie a tale attributo si può definire una didascalia associata all'immagine. La sintassi corretta è: <IMG SRC=”nome immagine” ALT=”breve descrizione testuale”> Questa didascalia associata all'immagine appare durante il caricamento della pagina o quando si passa con il mouse sopra l'immagine. I vantaggi principali dell'usare l'attributo ALT sono: i visitatori possono capire prima del caricamento completo il contenuto delle immagini; i browser speciali per non-vendenti sono in grado di interpretare correttamente la pagina; diversi motori di ricerca tengono conto del valore dell'attributo ALT delle immagini di una pagina per catalogarla con precisione. Ad ogni immagine si può associare un collegamento ipertestuale includendo il tag <IMG> all'interno della coppia di tag <A HREF> e </A> secondo la sintassi: <A HREF=”index.html”><IMG SRC=”index.gif”></A> Però quando un'immagine è cliccabile, appare generalmente circondata da un bordo di colore blu che risulta anti- estetico. In questo caso basta indicare all'interno del tag <IMG> l'attributo BORDER="0" per fare in modo che il bordo resti invisibile. Collegamenti Ipertestuali(Tag A HREF) I collegamenti ipertestuali si creano associando l'indirizzo (percorso/nome file) del nodo di destinazione ad un elemento visualizzato nella pagina corrente che può essere una stringa di testo o un'immagine. Per creare un collegamento verso un'altra pagina dello stesso sito la sintassi è: <A HREF=”pagina2.html”> Vai a pagina 2 </A Il tag <A HREF> permette a n c h e di puntare un collegamento anziché ad una pagina web ad un'immagine. La sintassi è: <A HREF=”foto.jpg”> Vai a foto </A> Se si vuole creare un collegamento ad un file da aprire o da scaricare come ad esempio un filmato o un pacchetto compresso la sintassi è: <A HREF=”file.zip”> Scarica il file in formato zip </A> Per creare un collegamento verso un'altro sito web è sufficiente inserire nel tag <A HREF> l'indirizzo completo del sito in questione: <A HREF=http://www.gdesign.it> Principi di Web Design by GDC </A> È consigliabile inserire nelle proprie pagine web un indirizzo di posta elettronica cui i visitatori possano rivolgersi. Allora si può inserire un indirizzo cliccabile, associato cioè alla casella e-mail corrispondente, in modo che l'invio del messaggio sia quasi automatizzato. La sintassi è: <A HREF=”mailto:[email protected]> Scrivimi per informazioni </A> Quando si clicca su un collegamento in una pagina web, viene caricata la nuova destinazione (immagine, pagina o sito) nella stessa finestra del browser. Seguendo i vari collegamenti ipertestuali, il lettore potrebbe non ricordarsi più il Struttura generica di una pagina Web e principali Tag del Linguaggio HTML (ultima revisione 14/11/2011) Pag. 4 punto di destinazione. Per prevenire questo inconveniente si può fare in modo che la destinazione del collegamento venga visualizzata in una nuova finestra del browser che si sovrappone a quella di partenza. Per ottenere questo risultato basta aggiungere al tag <A HREF> di partenza l'attributo TARGET. Ad esempio: <A HREF=”pagina2.html” TARGET=”_blank”> Vai a pagina 2 </A> Titoli(Tag H1…H6) Mediante l'inserimento di opportuni titoli il testo di una pagina HTML può essere suddivisa in capitoli e sottocapitoli. Per i titoli HTML sono previsti sei livelli gerarchici. Il tag per definire un titolo è <Hn>... </Hn> dove n è un valore che va da 1 a 6. Ciò significa che si possono avere sei livelli di titolazione, da <H1> (livello superiore) a<H6> (livello inferiore). Elenchi Puntati e Numerati(Tag UL, OL, LI) Il primo tipo di elenco che vedremo è quello puntato; le voci di questo elenco non hanno un ordine di successione ed ogni voce viene evidenziata da un simbolo. Il tag è <UL> (Unordered List) e funziona con il rispettivo </UL>. Nel mezzo del tag <UL>... </UL> ciascuna voce è identificata dal tag <LI>. Esempio: <UL> <LI> voce a <LI> voce b <LI> voce c </UL> Al tag <UL> si può aggiungere l'attributo TYPE="tipo di simbolo" che permette di scegliere un simbolo personalizzato. I valori previsti sono: disc punto pieno circle punto vuoto square quadrato nero. Un altro tipo di elenco è quello numerato; le voci di questo elenco hanno un preciso ordine di successione ed ogni voce viene evidenziata da un numero oppure opzionalmente, da una lettera. Il tag è <OL> (Ordered List) e funziona con il rispettivo </OL>. Nel mezzo del tag <OL>... </OL> ciascuna voce è identificata dal tag <LI>. Al tag <OL> si può aggiungere l'attributo TYPE="tipo di numerazione" che permette di scegliere numeri o lettere. I valori previsti sono: 1 I i A a numeri arabi, numeri romani maiuscoli, numeri romani minuscoli, lettere maiuscole, lettere minuscole. Si può anche usare l'attributo START="numero" per far iniziare il conteggio da un qualsiasi valore. Tag IFRAME L’iframe, ossia Inline Frame, viene utilizzato per inserire ed integrare una pagina web all’interno di un’altra pagina web, in questo modo è possibile far vedere una pagina o una parte di essa (che può anche risiedere su un altro server) all’interno di una cornice (frame). La sintassi di base per inserire un iframe all'interno di una pagina web è questa: <iframe src="pagina_esterna.html" width="400" height="110"></iframe> Oppure: <iframe src="pagina_esterna.html" Struttura generica di una pagina Web e principali Tag del Linguaggio HTML (ultima revisione 14/11/2011) Pag. 5 scrolling="no" frameborder="0" align=left marginheight="0px" marginwidth="0px" height="170" width="140"> <p>Il tuo browser non supporta gli iframe.</p> </iframe> src: corrisponde all'indirizzo della pagina da caricare nell'iframe. Scrolling: indica se ci devono essere barre di scorrimento. Può ricevere valori: yes-no-auto. Framenorder: indica se deve comparire un bordo intorno al frame. Come valore può ricevere 0-1. Align: indica l’allineamento che deve assumere l’iframe. Può essere left, right, top, middle, o bottom, rispetto al contenitore dove verrà inserito (es. tabella o div). Marginheight: specifica i margini superiore e inferiore che deve avere l’iframe. Marginwidth: specifica i margini destro e sinistro che deve avere l’iframe. height: imposta l'altezza in pixel. width: imposta la larghezza in pixel. <p> Il tuo….</>: è un commento che si visualizza nel remoto caso in cui il browser del visitatore non dovesse supportare gli iframe. Struttura generica di una pagina Web e principali Tag del Linguaggio HTML (ultima revisione 14/11/2011) Pag. 6
