I TAG HTML / XHTML
Introduzione al webdesign
I TAG (X)HTML // STRUTTURA
dei TAG
2/15
Una pagina web è sostanzialmente un semplice file di testo con estensione .html
o .htm che viene interpretato da un browser (Internet Explorer, Mozilla Firefox,
Opera, Netscape, Safari, ecc.) come una pagina web.
Il file è scritto secondo una precisa sintassi / struttura che è definita HyperText
Markup Language (HTML). Nella versione XHTML la sintassi è simile, ma vengono
adottate alcune regole aggiuntive.
Si tratta di linguaggi di marcatura: il contenuto testuale visibile della pagina web è
“marcato“ ovvero contrassegnato dalle istruzioni (TAG).
I tag prevedono un’apertura e una chiusura (per esempio <p> ... </p> che delimitano
una porzione di testo dandole un significatyo semantico (paragrafo, heading,
elemnto di lista, ecc.).
Nell’XHTML i tag che non prevedono aperture e chiusura (per esempio <br> break
Row = interruzione di riga) devono contenere apertura e chiusura nel singolo tag
(<br> diventa <br />).
La struttura dei tag è nidificata (un tag dentro l’altro, dentro un’altro, ecc.). La
struttura base di una pagine è la seguente
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional...
(continua)
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Titolo della pagina</title>
<meta http-equiv=”Content-Type” content=”text/html;
charset=iso-8859-1” />
</head>
<body>
<h1>Hi!</h1>
<p>Hello<br />World</p>
</body>
</html>
I TAG (X)HTML // TAG
e ATTRIBUTI
3/13
Alcuni tag posssono prevedere degli attributi che servono a determinare specifici
parametri dell’elemento costituito dal tag e dal suo contenuto.
Per esempio, il seguente tag
<img src=”foto.jpg” width=”18” height=”18” alt=”Panorama” />
ha come attributi: src, width, height e alt.
Gli attributi sono sempre scritti all’interno del tag di apertura, sono separati da uno
spazio e hanno sempre la sintassi attributo=”parametro”.
I TAG (X)HTML // TITOLO
della PAGINA <title>
4/15
<title> (titolo della pagina)
Tag molto rilevante (per i motori di ricerca).
Si trova nel tag <head> della pagina web: il suo non è un contenuto visibile dall’utente
nella pagina.
<head>
<title>Titolo della pagina</title>
</head>
Viene visualizzato nella barra della finestra del browser, come nome del bookmark,
e come titolo del record nella lista di risultati di un motore di ricerca..
I TAG (X)HTML // <p>
+ <br>
5/15
<p> (paragrafo) e <br /> (break row / interruzione di riga)
Per mandare a capo il contenuto testuale incluso in una pagina html, è necessario
indicare l’interruzione attraverso un marcatore.
Il tag <p> separa due porzioni di testo che vengono identificate come blocchi distinti
(paragrafi: possono avere diversi attributi).
Prevede sempre apertura <p> e chiusura </p>
<body>
<p align=”left”>Testo del primo paragrafo</p>
<p align=”right”>Testo del secondo paragrafo</p>
</body>
Di default, tra un paragrafo e l’altro, viene imposta una riga vuota (a capo di due
righe).
Il tag <br /> serve a mandare a capo il testo di una riga, senza definire un nuovo
paragrafo. Tra le due porzioni di testo non possono essere definiti diversi attributi.
<body>
<p align=”left”>Prima riga del primo paragrafo.<br />
Seconda riga del primo paragrafo</p>
<p align=”right”>Testo del secondo paragrafo</p>
</body>
I TAG (X)HTML // HEADING
<h1>, <h2>, ...
6/15
<h1>, <h2>, <h3>, <h4>, ... (heading)
Si possono definire come dei paragrafi speciali che hanno un ordine gerarchico di
importanza semantica.
Il contenuto di <h1> è più rilevante del contenuto di <h2> e così via.
<p> ha rilevanza inferiore a tutti gli <h_>.
<body>
<h1>La mia prima pagina web</h1>
<h2>Un semplice esperimento</h2>
<p>Il testo della pagina in un paragrafo</p>
</body>
<h1> andrebbe usato una sola volta per pagina
<h2>, <h3>, ecc. possono essere ripetuti più volte nella pagina
I TAG (X)HTML // LISTE
<ul> / <ol> + <li>
7/15
<ul> (unordered list), <ol> (ordered list) e <li> (list item)
Le liste sono porzioni di testo di una pagina html strutturate in una serie di
elementi (list item). La struttura è costituita dal tag lista (<ul> o <ol>) che
contiene uno o più tag elemento (<li>)
<ul>
<li>Primo elemento della lista</li>
<li>Altro elemento</li>
<li>Ultimo elemento</li>
</ul>
<ol>
<li>Primo elemento della lista</li>
<li>Altro elemento</li>
<li>Ultimo elemento</li>
</ol>
Le liste possono essere nidificate
<ul>
<li>Primo elemento della lista</li>
<li>Secondo elemento (con sottolista)
<ul>
<li>Primo elemento della sottolista</li>
<li>Altro elemento della sottolista</li>
<li>Ultimo elemento della sottolista</li>
</ul>
</li>
<li>Ultimo elemento</li>
</ul>
I TAG (X)HTML // LINK
<a href=”file”>
8/15
I link contenuti in una pagina HTML possono puntare a:
- pagina HTML > aperta ed interpretata dal browser;
- file immagine (.GIF o .JPG) > visualizzata dal browser;
- documenti di testo (.TXT, .RTF, .DOC) o Acrobat (.PDF)
> aperti ed interpretati (browser abilitati) o scaricati e
salvati in locale;
- file generico > scaricato e salvato in locale;
- email > apertura del client di posta predefinito sul pc locale
I link possono essere di tre tipi:
1) relativi > il percorso del file puntato fa riferimento alla posizione del file che
contiene il link
xEs: Esci, gira a sinistra, in fondo alla strada gira a destra.
<a href=”../folder/file.htm”>testo linkato</a>
2) assoluti > il percorso del file puntato è indicato con l’URL completo,
indipendentemente dalla posizione del file che contiene il link
xEs: Italia, Milano, viale Pirelli n.18, 4° piano, aula U6-09
<a href=”http://www.dominio.it/folder/file.htm”>testo linkato</a>
Anche il link ad un alias email è un link assoluto:
<a href=”mailto:[email protected]”>testo linkato</a>
3) interni > il link punta ad una particolare posizione interna alla pagina html stessa
in cui è contenuto il link.
<a href=”#obiettivo”>testo linkato</a>
nel codice, dovrà essere presente “l’àncora” (destinazione del link)
<a name=”obiettivo” id=”obiettivo”></a>
I TAG (X)HTML // IMMAGINI
<img src=”file”>
9/15
<img src=”...” /> Immagini inserite nelle pagine web
Il tag <img /> serve a caricare un file grafico esterno al documento XHTML e
collocarlo all’interno del flusso di contenuti della pagina web.
I formati grafici utilizzabili per le immagini caricate nelle pagine web sono: GIF e
JPG (ne esistono altri).
Il tag <img /> include apertura e chiusura in un unico marcatore.
Il tag <img /> prevede sempre degli attributi per fuzionare.
<img src=”../cartella/immagine.gif” width=”20” height=”70”
alt=”Logo aziendale” />
src (obbligatorio): specifica un file grafico da caricare. Funziona come un link:
specifica il percorso relativo o assoluto per caricare un dato file grafico (gif o jpg).
width e height (opzionali): impongono larghezza e altezza di visualizzazione (usare
immagini correttamente dimensionate)
alt (x accessibilità): attribuisce una descrizione alternativa all’immagine, usata da
browser vocali o in caso di mancato caricamento del file
I TAG (X)HTML // TABELLE
<table>
10/15
<table>, <tr>, <td> Le tabelle
Per strutturare dati tabellari in una pagina web, si usano essenzialmente tre tag
nidificati:
<table> definisce una tabella
<tr> definisce una riga della tabella (deve essere inserito in <table>)
<td> definisce un dato tabellare (cella di una riga, deve essere contenuto in un <tr>)
Le tabelle: struttura nidificata
di <table>, <tr>, <td>
<table border=”1”>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</table>
I TAG (X)HTML // TABELLE
<table>
Letabelle, raggruppamento
TD: attributo colspan=”...”
<table border=”1”>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
Nota: nella TR i TD relativi a
B2 e B3 sono incorporati nel
COLSPAN
<td>B1</td>
<td colspan=”2”>B2+B3</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</table>
Letabelle, raggruppamento
TD: attributo rowpan=”...”
<table border=”1”>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td rowspan=”2”>B2+C2</td>
<td>B3</td>
</tr>
Nota: nella TR manca il TD
relativo a C2 in quanto già
incorporato nel ROWSPAN
<tr>
<td>C1</td>
<td>C3</td>
</tr>
</table>
11/15
I TAG (X)HTML // TABELLE
<table>
12/15
Le tabelle, raggruppamento TD : attributo colspan e rowspan usati per raggruppare
celle di diverse righe e colonne
<table border=”1”>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td colspan=”2” rowspan=”2”>B2+B3+C2+C3</td>
</tr>
<tr>
<td>C1</td>
</tr>
</table>
Nota: le TR rimangono sempre invariate. I TD relativi a B2 e B3 e quelli relativi a C2 e C3 non ci
sono, in quanto incorporati nel COLSPAN e ROWSPAN dichiarati con il TD della seconda riga.
I TAG (X)HTML // ENFASI
e altri TAG
13/15
<strong>...</strong> rende il testo racchiuso in grassetto, attribuento un
valore semantico. Sostituisce il vecchio <b> che attribuiva solo un valore visivo
(grassetto).
<em>...</em> rende il testo racchiuso in corsivo, attribuento un valore semantico.
Sostituisce il vecchio <i> che attribuiva solo un valore visivo.
<blockquote>...</blockquote> per definire citazioni. Può contenere l’attributo
title.
<acronym>...</acronym> con l’attributo title, ha la funzionalità semantica di
aggiungere il significato esteso di un acronimo;
<abbr>...</abbr> idem, ma viene usato per le abbreviazioni;
<address>...</address> racchiude dati relativi ad un’indirizzo;
<code>...</code> per racchiudere porzioni di codice;
<dfn>...</dfn> per racchiudere definizioni.
<form>...</form> insieme ad altri tag specifici, può essere agganciato a
un’applicazione per consentire all’utente di inviare input
<span>...</span> marcatore privo di valore semantico.
In XHTML serve ad identificare una porzione di testo in linea da trattare con una
particolare resa visiva determinata con regole CSS*. In genere viene usato per
marcare piccole porzioni di testo.
<div>...</div> marcatore privo di valore semantico.
Identifica un blocco di altri tag da impostare visivamente secondo un particolare
stile determinato tramite i CSS*. A differenza di <span> (elemento in linea) è un
blocco: si posiziona sotto il tag precedente e sopra quello successivo e se non
diversamente specificato si allarga per tutta la larghezza resa disponibile dal suo
tag contenitore (se posizionato nel <body> si allarga per tutta la larghezza della
pagina.
* CSS: set di regole per il trattamento visivo dei tag html.
I TAG (X)HTML // META
TAG
14/13
Un file HTML è costituito di due tag principali: il tag <HEAD> ed il tag <BODY>.
Nel tag <BODY> sono contenute le informazioni che vengono interpretate e
visualizzate dal browser dell’utente.
Nel tag <HEAD> sono contenute informazioni che non vengono visualizzate
nella finestra del browser, ma che sono molto importanti per la sua corretta
interpretazione.
Tra queste informazioni ci sono:
<!DOCTYPE ... > che definisce il tipo di documento che il browser deve interpretare
(dichiara linguaggio, sintassi, ecc.;
<TITLE>...</TITLE> che definisce il titolo della pagina che sarà visualizzato nella
barra della finestra del browser e come link alla pagina nelle liste di risultati di
ricerche effettuate per esempio con Google;
e una serie di tag chiamati metatag, che forniscono informazioni metatestuali sui
contenuti della pagine e, se correttamente impostati, aumentano il valore semantico
della pagina relativamente ad alcune parole. In particolare:
DESCRIPTION
<meta name=”description” content=”Laboratorio di comunicazi...” />
include una descrizione, meglio se breve che viene interpretata dal motore di ricerca
per stimare il “peso“ semantico della pagina in relazione alle parole effettivamente
contenute nel teso della pagina stessa. Spesso viene visualizzato nelle liste di
risultati di una ricerca subito dopo il link alla pagina.
KEYWORDS
<meta name=”keywords” content=”comunicazione visiva, bicocca, ...” />
elenca una serie di parole chiave che vengono confrontate con i contenuti della
pagina e contribuiscono a determinare il valore (posizionamento) della pagina nei
risultati di un motore di ricerca.
I TAG (X)HTML // COMMENTI
AL CODICE
15/15
Nella compilazione del codice, anche se assistita da un compilatore WYSIWYG
(What You See Is What You Get) come Dreamweaver, è utile partizionare il codice
con opportuni commenti che consentono di capire dove finisce un blocco di istruzini
specifiche (per esempio quelle che definiscono l’intestazione grafica della pagina)
da un altro blocco con diversa funzione (per esempio quelle che definiscono il menu
di navigazione).
In questo modo si semplifica il lavoro di manutenzione quando si riprende un file
costruito precedentemente, ma soprattutto è possibil analizzare il codice a blocchi
in caso di errori o problemi di visualizzazione.
In HTML e XHTML per inserire un commento testuale nel codice è sufficiente
racchiuderlo nei tag <!-- commento -->
<h1>Labaoratorio di comunicazione visiva</h1>
<!-- Menu di navigazione - INIZIO -->
<ul>
<li><a href=”home.html”>Home page</a></li>
<li><a href=”chisiamo.html”>Chi siamo</a></li>
...
