I riassunti , gli appunti i testi contenuti nel nostro sito sono messi a disposizione gratuitamente con finalità illustrative didattiche, scientifiche, a carattere sociale, civile e culturale a tutti i possibili interessati secondo il concetto del fair use e con l' obiettivo del rispetto della direttiva europea 2001/29/CE e dell' art. 70 della legge 633/1941 sul diritto d'autore
Le informazioni di medicina e salute contenute nel sito sono di natura generale ed a scopo puramente divulgativo e per questo motivo non possono sostituire in alcun caso il consiglio di un medico (ovvero un soggetto abilitato legalmente alla professione).
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="einaudiceccherelli@virgilio.it">
<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:
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> deve 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>
Riassumendo: le caratteristiche più evidenti di <p>, <div> e <span> sono quindi:
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:
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;
<SUP>... </SUP> testo apice;
<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, sans-serif">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, serif">Georgia e caratteri simili </font> |
Georgia e caratteri simili |
<font face="Geneva, Arial, Helvetica, sans-serif">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:
<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:
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”>
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:
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 anche 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:info@gdesign.it> 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 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 numeri arabi,
I numeri romani maiuscoli,
i numeri romani minuscoli,
A lettere maiuscole,
a 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"
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.
Fonte: http://www.einaudiceccherelli.it/appunti/itc/informatica/source/2-I%20principali%20tag%20del%20linguaggio%20html.docx
Sito web da visitare: http://www.einaudiceccherelli.it
Autore del testo: non indicato nel documento di origine
Il testo è di proprietà dei rispettivi autori che ringraziamo per l'opportunità che ci danno di far conoscere gratuitamente i loro testi per finalità illustrative e didattiche. Se siete gli autori del testo e siete interessati a richiedere la rimozione del testo o l'inserimento di altre informazioni inviateci un e-mail dopo le opportune verifiche soddisferemo la vostra richiesta nel più breve tempo possibile.
I riassunti , gli appunti i testi contenuti nel nostro sito sono messi a disposizione gratuitamente con finalità illustrative didattiche, scientifiche, a carattere sociale, civile e culturale a tutti i possibili interessati secondo il concetto del fair use e con l' obiettivo del rispetto della direttiva europea 2001/29/CE e dell' art. 70 della legge 633/1941 sul diritto d'autore
Le informazioni di medicina e salute contenute nel sito sono di natura generale ed a scopo puramente divulgativo e per questo motivo non possono sostituire in alcun caso il consiglio di un medico (ovvero un soggetto abilitato legalmente alla professione).
"Ciò che sappiamo è una goccia, ciò che ignoriamo un oceano!" Isaac Newton. Essendo impossibile tenere a mente l'enorme quantità di informazioni, l'importante è sapere dove ritrovare l'informazione quando questa serve. U. Eco
www.riassuntini.com dove ritrovare l'informazione quando questa serve