I PRINCIPALI TAG DEL LINGUAGGIO HTML Struttura generica di una pagina Web: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Titolo della pagina</TITLE> <META <META <META <META <META <META <META <META <META name="title" content="Home Page, ISIS Einaudi-Ceccherelli, Piombino"> name="description" content="Home Page, ISIS Einaudi-Ceccherelli, Piombino "> name="keywords" content=" ISIS Einaudi-Ceccherelli "> name="author" content="Paolo Rossi / ISIS Einaudi-Ceccherelli, Piombino "> name="copyright" content="2007-2014, ISIS Einaudi-Ceccherelli, Piombino "> http-equiv="Reply-to" content="[email protected]"> http-equiv="content-language" content="IT"> http-equiv="content-type" content="text/html; charset=iso-8859-1"> name="creation_Date" content="11/11/2011"> </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) 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> de v e essere usato con la rispettiva chiusura </P>. Esempio: <P>testo del paragrafo</P> 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 Principali Tag del Linguaggio HTML (ultima revisione 24/10/2014) Pag. 1 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. <CITE>…….</CITE>: il testo viene visualizzato in corsivo 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 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: Principali Tag del Linguaggio HTML (ultima revisione 24/10/2014) Pag. 2 <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. Le dimensioni del testo Le dimensioni del testo si attribuisco mediante l'attributo 'size' del tag <font>. Ci sono due modi per dare attribuire le dimensioni al testo tramite il tag <font>: valori interi da 1 a 7 valori relativi alla dimensione di base del tag font (di default "3") 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 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”> Principali Tag del Linguaggio HTML (ultima revisione 24/10/2014) Pag. 3 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> Quando una pagina è molto lunga e suddivisa in sezioni distinte si possono creare dei collegamenti all'interno della stessa pagina che permettono al lettore di saltare facilmente da un punto all'altro del testo. Per creare i collegamenti interni bisogna innanzitutto definire le destinazioni (ancore) nei vari punti prescelti mediante il tag <A NAME="nome scelto dal webmaster">. Supponiamo di aver definito due destinazioni all'interno della nostra pagina: <A NAME=”sezione1”>Sezione 1 </A> <A NAME=”sezione2”>Sezione 2 </A> adesso possiamo creare i collegamenti che ci portano alle due destinazioni secondo la sintassi: <A HREF=”#sezione1”> Vai alla sezione 1 </A> <A HREF=”#sezione2”> Vai alla sezione 2 </A> Principali Tag del Linguaggio HTML (ultima revisione 24/10/2014) Pag. 4 Si possono anche combinare collegamenti esterni ed interni, cioè definire un collegamento ipertestuale che punta ad un'ancora specifica all'interno di un'altra pagina web. <A HREF=”pagina2.html#sezione1”>Vai alla sezione 1 della pagina 2</A> Naturalmente anche in questo caso bisogna aver definito in precedenza l'ancora di destinazione nella pagina2.html. È 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 corrispondent e, in modo che l'invio del messaggio sia quasi automatizzato Principali Tag del Linguaggio HTML (ultima revisione 24/10/2014) Pag. 5 <DL> <DT>Voce a</DT> <DD>Definizione della voce a</DD> <DT>Voce b</DT> <DD>Definizione della voce a</DD> </DL> Darà come risultato: Voce A Definizione della voce a Voce B Definizione della voce b 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. Principali Tag del Linguaggio HTML (ultima revisione 24/10/2014) Pag. 6
Scarica
