HTML avanzato | Aggiungere un tocco di stile

  Introduzione all'HTML

Dave Raggett, revisionato il 29 Agosto 2000.

Questa è una breve introduzione al linguaggio HTML. Molta gente scrive ancora l'HTML a mano, usando strumenti come Blocco Note su Windows o SimpleText su Mac. Questa guida vi metterà in condizione di cominciare. Anche se non avete intenzione per il futuro di lavorare direttamente sul codice HTML, e pianificate invece di usare un editor HTML come Netscape Composer o Amaya del W3C, questa guida vi consentirà di capirne abbastanza per fare miglior uso di tali strumenti e rendere accessibili i vostri documenti ad un'ampia gamma di browser. Una volta che vi sarete impadroniti dei fondamenti per scrivere codice HTML, potreste voler imparare come aggiungere un tocco di stile usando i CSS, e proseguire sperimentando le caratteristiche descritte nella mia pagina su HTML avanzato.

Un metodo conveniente per correggere automaticamente gli errori di marcatura è utilizzare il programma HTML Tidy, che, tra le altre cose, riordina il codice di marcatura rendendo più facile leggerlo e modificarlo. La mia raccomandazione è di lanciare regolarmente Tidy su qualsiasi codice voi stiate modificando. Tidy è molto efficace nel ripulire il codice di marcatura creato con strumenti di produzione dai comportamenti poco rigorosi.

p.s. un buon sistema per imparare è guardare come altre persone hanno scritto il codice delle loro pagine HTML. Per fare ciò, cliccate sul menu "Visualizza" del browser e poi su "Sorgente". Fatelo con questa pagina per verificare come io ho applicato le idee che spiego qui sotto. Vi accorgerete che state sviluppando un occhio critico non appena molte pagine cominceranno ad apparirvi disordinate!

Questa pagina vi insegnerà come:

• cominciare con un titolo
• aggiungere intestazioni e paragrafi
• aggiungere enfasi al vostro testo
• aggiungere immagini
• aggiungere collegamenti ad altre pagine
• usare vari tipi di liste

Se state cercando qualcos'altro, provate con la pagina HTML avanzato.

Cominciare con un titolo

Ogni documento HTML ha bisogno di un titolo. Ecco cosa occorre digitare:

<title>Il mio primo documento in HTML</title>

Cambiate il testo "Il mio primo documento in HTML" nel modo che più vi aggrada. Il testo del titolo è preceduto dal marcatore [tag] iniziale <title> ed è seguito dal corrispondente marcatore finale </title>. Il titolo dovrebbe essere piazzato all'inizio del documento.

Aggiungere intestazioni e paragrafi

Se siete utilizzatori di Microsoft Word, vi saranno familiari gli stili predefiniti per intestazioni di differente importanza. In HTML esistono sei livelli di intestazioni. H1 è il più importante, H2 è leggermente meno importante, e così via fino ad H6, il meno importante di tutti.

Ecco come aggiungere un'intestazione importante:

<h1>Un'intestazione importante</h1>

ed ecco un'intestazione leggermente meno importante:

<h2>Un'intestazione leggermente meno importante</h2>

Ogni paragrafo che scrivete dovrebbe cominciare con il marcatore <p>. Il </p> di chiusura è facoltativo, mentre i marcatori finali sono invece necessari per elementi come le intestazioni. Per esempio:

<p>Questo è il primo paragrafo.</p>

<p>Questo è il secondo paragrafo.</p>

Aggiungere un po' di enfasi

Potete enfatizzare una o più parole con il marcatore <em>, per esempio:

Questo è un argomento davvero <em>interessante</em>!

Rendere le vostre pagine più interessanti grazie alle immagini

Le immagini possono essere usate per rendere le vostre pagine Web più caratteristiche e per aiutarvi a veicolare il messaggio che intendete comunicare. Il modo più semplice di aggiungere un'immagine è usare il marcatore <img>. Poniamo che vi sia un file immagine chiamato "pietro.jpg" nella stessa cartella/directory del vostro file HTML. Esso misura 200 pixel di larghezza per 150 di altezza.

<img src="pietro.jpg" width="200" height="150">

L'attributo src richiama il file immagine. La larghezza e l'altezza non sono strettamente necessarie ma aiutano a velocizzare la visualizzazione della vostra pagina Web. Manca ancora qualcosa! Le persone che non possono vedere l'immagine hanno bisogno di una descrizione da leggere in sua assenza. Potete aggiungere una breve descrizione nel modo che segue:

<img src="pietro.jpg" width="200" height="150"
alt="Il mio amico Pietro">

L'attributo alt è adoperato per fornire una breve descrizione, in questo caso "Il mio amico Pietro". Per immagini complesse, può essere necessario fornire anche una descrizione più lunga. Assumendo che questa sia stata scritta nel file "pietro.html", potete inserirne il riferimento nel modo che segue usando l'attributo longdesc:

<img src="pietro.jpg" width="200" height="150"
alt="Il mio amico Pietro" longdesc="pietro.html">

Potete creare immagini in molti modi, per esempio con una fotocamera digitale, con la scansione di un'immagine, o creandone una da zero in un programma di grafica pittorica o di disegno. La maggior parte dei browser sono in grado di visualizzare i formati grafici GIF e JPEG, i browser più recenti supportano anche il formato grafico PNG. Per evitare lunghe attese durante lo scaricamento dell'immagine dalla Rete, dovreste evitare di usare file immagine di grandi dimensioni.

Parlando in senso generale, il JPEG è migliore per fotografie ed altre immagini con transizioni sfumate, mentre GIF e PNG sono adatti per l'arte grafica basata su aree di colore uniforme, linee e testo. Tutti e tre i formati supportano opzioni per la visualizzazione progressiva, in cui una versione grossolana dell'immagine è spedita per prima e progressivamente rifinita.

Aggiungere collegamenti verso altre pagine

Ciò che rende il Web così efficace è la capacità di definire collegamenti da una pagina ad un'altra, e di attivare i collegamenti per mezzo della semplice pressione di un pulsante. Un singolo clic può farvi attraversare il mondo intero!

I collegamenti sono definiti per mezzo del marcatore <a>. Creiamo ora un collegamento alla pagina descritta nel file "pietro.html":

Questo è un collegamento <a href="pietro.html">alla pagina di Pietro</a>.

Il testo tra <a> e </a> è usato come didascalia per il collegamento. La didascalia appare comunemente come un testo blu sottolineato.

Per fare un collegamento ad una pagina su un altro sito Web è necessario fornire l'indirizzo Internet completo (comunemente chiamato URL), per esempio per creare un collegamento a www.w3c.org dovete scrivere:

Questo è un link al <a href="http://www.w3.org/">W3C</a>.

Potete anche trasformare un'immagine in un collegamento ipertestuale, per esempio quello che segue vi consente di cliccare sul logo societario per andare alla home page.

<a href="/"><img src="logo.gif" alt="home page"></a>

Tre tipi di liste

L'HTML supporta tre tipi di liste. Il primo tipo è l'elenco puntato, definito spesso lista non ordinata. Esso usa i marcatori <ul> e <li>, per esempio:

<ul>
  <li>il primo elemento della lista</li>

  <li>il secondo elemento della lista</li>

  <li>il terzo elemento della lista</li>
</ul>

Notate che è necessario chiudere sempre la lista con il marcatore finale </ul>, mentre il </li> è facoltativo e può essere omesso. Il secondo tipo di lista è l'elenco numerato, detto anche lista ordinata. Usa i marcatori <ol> e <li>. Per esempio:

<ol>
  <li>il primo elemento della lista</li>

  <li>il secondo elemento della lista</li>

  <li>il terzo elemento della lista</li>
</ol>

Così come per gli elenchi puntati, occorre sempre chiudere la lista con il marcatore finale </ol>, mentre il </li> è facoltativo e può essere omesso.

Il terzo ed ultimo tipo di lista è l'elenco di definizioni, che vi consente di elencare dei termini e le relative definizioni. Questo tipo di lista è aperta con il marcatore <dl> ed è chiusa con </dl>. Ogni termine comincia con un marcatore <dt> ed ogni definizione con un <dd>. Per esempio:

<dl>
  <dt>il primo termine</dt>
  <dd>la sua definizione</dd>

  <dt>il secondo termine</dt>
  <dd>la sua definizione</dd>

  <dt>il terzo termine</dt>
  <dd>la sua definizione</dd>
</dl>

I marcatori finali </dt> e </dd> sono facoltativi e possono essere omessi. Notate che le liste possono essere annidate l'una dentro l'altra. Per esempio:

<ol>
  <li>il primo elemento della lista</li>

  <li>
    il secondo elemento della lista
    <ul>
      <li>primo elemento annidato</li>
      <li>secondo elemento annidato</li>
    </ul>
  </li>

  <li>il terzo elemento della lista</li>
</ol>

Potete anche utilizzare paragrafi e intestazioni, ecc., per elementi di lista più lunghi.

Ottenere ulteriori informazioni

Se siete pronti ad imparare di più, ho preparato del materiale supplementare su HTML avanzato e aggiungere un tocco di stile.

La Raccomandazione del W3C per l'HTML 4.0 è la fonte più autorevole sulle specifiche del linguaggio HTML. Si tratta tuttavia di un documento tecnico. Per avere una fonte di informazioni meno tecnica potete acquistare uno dei molti libri sull'HTML in commercio, per esempio "Raggett on HTML 4", pubblicato nel 1998 da Addison Wesley. Vedete anche "Beginning XHTML", pubblicato nel 2000 da Wrox Press, che introduce la riformulazione ad opera del W3C dell'HTML come un'applicazione di XML. XHTML 1.0 è ora una raccomandazione del W3C.

Buona fortuna e cominciate a scrivere!

Dave Raggett <dsr@w3.org>

Copyright  ©  2000 W3C ^® (MIT, INRIA, Keio ), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.

Leggi HTML avanzato
Vai alla prima pagina
Scrivi a info@diodati.org
Aggiornato Sunday, 08-Sep-2002 17:59:36 CEST
5783 visite dal 01/04/2001