Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Vediamo i principali elementi di HTML, limitandoci ai primi due
livelli di compatibilità, che sono supportati da quasi tutti i browser
Web.
Un documento HTML consiste in testo e comandi o tag. Questi
ultimi sono parole o frasi racchiuse tra i simboli < e >, detti
marcatori di struttura.
I tag definiscono la struttura logica del documento, identificando
elementi quali titoli, intestazioni, paragrafi ed elenchi. Essi
possono essere scritti indifferentemente in lettere maiuscole o
minuscole.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Un tag facoltativo, che se usato deve essere il primo di un documento
HTML, è <!DOCTYPE>. Esso dice al browser quale specifica HTML
(o XHTML) il documento usa. La versione 4.01 di HTML specifica tre
tipi di documento (DTD): Strict, Transitional e Frameset.
<!DOCTYPE HTML public "-//W3C//DTD HTML 4.1 Transitional//EN“>
il documento
è pubblico
il tipo di HTML è
gestito dal W3C
la versione di HTML
supportata è la 4.1
la lingua del
documento è
l'inglese
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
La DTD Strict viene usata quando si vuole una marcatura pulita,
che dia luogo a una presentazione priva di confusioni. Va usata
insieme ai fogli di stile a cascata (CSS):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
La DTD Transitional comprende attributi di presentazione ed
elementi che il W3C si aspetta che siano messi in un foglio di stile. Va
usata quando si debbano usare le caratteristiche di presentazione di
HTML in quanto i lettori non dispongono di browser che supportino i
fogli di stile a cascata (CSS).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
La DTD frameset va usata in documenti con i frame. E’ uguale alla
DTD Transitional, tranne che per l’elemento frameset che
sostituisce l’elemento body:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Un documento HTML deve invece contenere obbligatoriamente i tag
indicati in Figura, nell’ordine con cui sono scritti
<html>
<head>
</head>
<body>
</body>
</html>
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Il tag <html>, inserito all’inizio del documento, indica al browser che
il documento è marcato in HTML.
Come la maggior parte dei tag, <html> deve essere seguito da un
tag di chiusura, che si ottiene aggiungendo una / dopo la parentesi
< iniziale, quindi </html>.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
I due tag
<head>
</head>
delimitano la sezione intestazione di un documento HTML, mentre
i tag
<body>
</body>
delimitano il corpo del documento.
Laboratorio di Applicazioni Informatiche II mod. A
HTML –Tag principali
L'intestazione contiene una serie di informazioni necessarie al
browser per una corretta interpretazione del documento, ma non
visualizzate all'interno dello stesso. L'intestazione quindi ha un
ruolo non apparente ma sicuramente fondamentale.
I principali elementi (tutti facoltativi) che essa contiene sono:
il titolo del documento;
i termini chiave per i motori di ricerca;
il tipo di HTML supportato;
i link base di riferimento.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Il titolo del documento, che va racchiuso tra i tag <title> e
</title>, viene visualizzato nella finestra del titolo, all’inizio di
ciascuna videata. Ad esempio, il tag:
<title>Punto Informatico – Quotidiano dal 1996</title>
produce la seguente visualizzazione:
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
I termini chiave per i motori di ricerca
Alcuni motori di ricerca usano gli attributi name e content del tag
meta per indicizzare le pagine trovate. Un elemento meta che
definisce una descrizione di una pagina potrebbe essere:
<meta name="descrizione" content=“Corsi Web
gratuiti su HTML, CSS, XML e XHTML">
Un elemento meta che definisce i termini chiave di una pagina
potrebbe essere:
<meta name=“parole chiave" content="HTML, DHTML,
CSS, XML, XHTML, JavaScript, VBScript">
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Scopo degli attributi name e content è quello di descrivere
il contenuto di una pagina.
Tuttavia, dato che molti Web master usano i tag meta a fini
di spamming, per esempio ripetendo i termini chiave per
fare attribuire alle pagine un punteggio più alto, alcuni
motori di ricerca hanno smesso completamente di usarli.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Il corpo di un documento HTML contiene il testo, le immagini e i
collegamenti che saranno poi visualizzati sulla relativa pagina Web.
Si potrebbe avere, per esempio:
<html>
<head>
<title>Documento di prova Ciao a tutti</title>
</head>
<body>
<h1>Ciao a tutti!</h1>
Questo è un documento HTML ridotto al minimo. Evidenzia
i due blocchi di base di un file HTML.
</body>
</html>
Laboratorio di Applicazioni Informatiche II mod. A
HTML - Tag principali
Il testo racchiuso tra i tag <h1> e </h1> viene considerato come un
titolo di primo livello e visualizzato nella dimensione massima
possibile.
Si possono definire titoli di sei livelli (e dimensioni) decrescenti usando
i tag da <h1> a <h6>.
I tag di chiusura </h1>...</h6> ripristinano la dimensione di testo
preimpostata e determinano una andata a capo.
Altre possibilità di formattazione del testo sono fornite dai seguenti
tag:
<b></b>
grassetto
<i></i>
corsivo
<u></u>
sottolineato
<em></em> enfatizzato
Il tag <body> può contenere i due attributi
leftmargin topmargin
che consentono di impostare i margini rispettivamente sinistro e
superiore della pagina Web, in termini di numero di pixel.
Esempio:
<body leftmargin=“40” topmargin=“60”>
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Colori
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Se non stabilito diversamente, il colore dello sfondo è bianco e quello
del testo è nero, valori preimpostati dai browser.
Per modificare il colore dello sfondo, si fa seguire al tag <body>
l’attributo bgcolor, seguito a sua volta da un valore, che
determina il colore dello sfondo delle pagine Web.
Esempio:
<body bgcolor=“aqua”>
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Per i colori sono possibili i seguenti 16 valori standard:
aqua
black
blue
fuchsia
navy
olive
purple
red
gray
silver
green
lime
maroon
teal
white
yellow
Essi corrispondono all'insieme standard VGA sui PC.
È possibile sostituire al nome in inglese un valore esadecimale
compreso tra "#000000" e "#FFFFFF". Per esempio, per il colore
rosso (red) si può scrivere anche :
<body bgcolor="#FF0000">
I codici esadecimali dei 16 colori standard sono indicati in Figura.
Laboratorio di Applicazioni Informatiche II mod. A
HTML - Tag principali
Laboratorio di Applicazioni Informatiche II mod. A
HTML - Tag principali
L'uso dei valori esadecimali consente di ottenere colori non standard,
contenenti diverse proporzioni dei tre colori fondamentali
red green blue.
In particolare, le prime due cifre dopo il # indicano la quantità di
red, le due successive la quantità di green e le ultime due la
quantità di blue.
I computer più recenti supportano migliaia o milioni di colori, ma
molti sistemi a colori più vecchi possono supportare solo 256 colori
per volta.
Laboratorio di Applicazioni Informatiche II mod. A
HTML - Tag principali
Anziché assegnare a una pagina un colore di sfondo, le si può
assegnare come sfondo una immagine, facendo seguire al tag
<body> l’attributo background, al quale si assegna come valore un
file di immagine.
Esempio:
<body background=“sfondomare.bmp”>
Se il contenuto di una pagina si estende oltre lo spazio di una videata,
è possibile farlo scorrere cliccando sulla barra di scorrimento
verticale che viene visualizzata automaticamente.
In tal caso, anche lo sfondo scorre insieme al contenuto della pagina,
a meno che non lo si voglia fissare, aggiungendo
bgproperties=“fixed” all’elemento <body>:
<body background=“sfondomare.bmp” bgproperties=“fixed”>
Laboratorio di Applicazioni Informatiche II mod. A
HTML - Tag principali
Il colore può essere assegnato anche a tutto il testo, tramite
l'attributo text:
<body text="red">
Inoltre, all'interno del documento è possibile marcare parte del testo
in colori differenti da quello impostato con text.
Ciò si ottiene usando il tag <font> seguito dall’attributo color, cui
si assegna uno dei valori di colore visti in precedenza. Esempio:
Questa frase ha una
<font color=”yellow”>
parola
</font>
in giallo
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Il tag <font> consente anche di selezionare un repertorio di
caratteri (font) e impostarne la dimensione (oltre che il colore).
Per selezionare il font si usa l’attributo face, che accetta una lista
di font in ordine di preferenza. Esempio:
<font face=”Garamond, Arial”>
Testo in Garamond
</font>
Per impostare la dimensione dei caratteri si usa l’attributo size,
che accetta valori da 1 a 6.
Se si pone un segno - o + prima del numero, esso viene
interpretato come un valore relativo, rispetto al valore impostato
in precedenza.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Quindi size=“+1” fa usare la successiva dimensione di font in
grandezza, mentre size=“-1” la precedente.
Esempio:
<font size=”+1” face=”Garamond, Times New Roman”>
Testo da visualizzare
</font>
.Si osservi che per impostare la dimensione dei caratteri nei titoli è
meglio usare i tag <h1>..<h6>, piuttosto che <font>.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
All'interno di un documento HTML possono essere inclusi dei
commenti, facendoli precedere da
e concludere da
Esempio:
<!--
-->
<!--questo è un commento-->
Il testo di commento può essere formato da qualsiasi carattere e può
prolungarsi anche dopo il termine della riga. I commenti sono utili per
effettuare dei controlli in fase di ricerca degli errori o per migliorare la
leggibilità del codice.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Un tag molto usato, privo di tag di chiusura, è:
<br>
che produce un’andata a capo.
Per definire un paragrafo, ossia un brano di testo preceduto e seguito
da una riga vuota, si usa il tag:
<p>
Esso può essere seguito o no dal tag di chiusura, e può contenere
l’attributo align, che può assumere uno degli attributi
left
center
right.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – Tag principali
Per esempio, si potrebbe avere:
<p align=“center”>paragrafo visualizzato centrato</p>
Un paragrafo può essere visualizzato rientrato racchiudendolo tra
i marcatori <blockquote> e </blockquote>:
<blockquote>Paragrafo rientrato</blockquote>
È possibile separare blocchi di testo o immagini con una linea
orizzontale, tramite il tag
<hr>
Scarica
HTML – Tag principali

generale

Scarica
