i principali tag del linguaggio html - isis einaudi

by user

on 06 июля 2016

Category: Documents

>> Downloads: 1

views

Report

Comments

Description

Download i principali tag del linguaggio html - isis einaudi

Transcript

i principali tag del linguaggio html - isis einaudi

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 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 non
richiede un corrispondente tag di chiusura, basta inserirlo nel punto in cui si vuole che la frase vada a capo.
Esempio: 
Il tag 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 de v e essere usato con la rispettiva
chiusura .
Esempio: testo del paragrafo
Allineamenti di testo
Per impostare gli allineamenti di testo che valgono paragrafo per paragrafo si usa l'attributo ALIGN del tag secondo
la sintassi: paragrafo da allineare
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 .... 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:
... 
testo in grassetto;
... 
testo in corsivo;
... 
testo sottolineato;
<STRIKE>... </STRIKE>
testo barrato o depennato;
testo apice;
... 
... 
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:
Verdana e caratteri simili
Verdana e caratteri simili
Arial e
caratteri simili
Arial e caratteri simili
Times e caratteri simili
Times e caratteri simili
Curier e caratteri simili
Curier e caratteri simili
Georgia e caratteri simili 
Geneva e caratteri simili
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:
testo blu oppure: testo blu
Una volta scelto il colore possiamo sempre decidere di cambiarlo:

testo blu in Verdana

 

testo rosso

 
o meglio ancora:
Principali Tag del Linguaggio HTML (ultima revisione 24/10/2014)
Pag. 2

testo blu in Verdana
 

testo rosso

 

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 . Ci sono due modi per dare attribuire le
dimensioni al testo tramite il tag :
 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