HTML avanzato | Aggiungere un tocco di stile
HTML avanzato |
Aggiungere un tocco di stile
Questo documento è la traduzione in italiano dell'unica versione ufficiale del documento che è la versione originale in inglese "Getting started with HTML" su http://www.w3.org/MarkUp/Guide/. I possibili errori dovuti alla traduzione sono di esclusiva responsabilità della traduttrice Chiara Minnucci e non sono in alcun modo imputabili al W3C. Questa traduzione è stata realizzata nell'Aprile del 2007. Per qualsiasi commento su questa traduzione rivolgersi a Chiara Minnucci.
Questa è una breve introduzione al linguaggio HTML. Che cos'è l'HTML? È uno speciale tipo di documento testuale che è usato dai visitatori Web per visualizzare testo e grafica. Il testo include tag come <p> che indica l'inizio di un paragrafo, e </p> per indicare la fine di un paragrafo. I documenti HTML sono spesso chiamati "Pagine Web". I visitatori riprendono le pagine Web dai Web servers, che grazie a Internet, possono essere praticamente in ogni luogo del mondo.
Molte persone scrivono ancora in HTML a mano usando strumenti come NotePad in Windows, o TextEdit sul Mac. Questa guida ti fornirà le informazioni base per iniziare. Anche se non intendi scrivere direttamente con l'HTML e intendi invece usare un HTML editor come Netscape Composer, o W3C's Amaya, questa guida ti permetterà di capire abbastanza per utilizzare nel miglior modo questi strumenti e di rendere accessibili i tuoi documenti HTML su un'ampia gamma di browsers. Una volta che sarai sicuro di scrivere in HTML, vorrai forse imparare come aggiungere un tocco di stile usando CSS, e continuare a provare alcune caratteristiche nella mia pagina HTML avanzato
P.S. un buon modo d'imparare è guardare come altre persone hanno codificato le loro pagine HTML. Per fare questo, clicca sul menu View e poi su Source. Su alcuni browsers, avrai bisogno di cliccare sul menu File e poi su View Source. Cerca questa pagina per vedere come ho applicato le idee spiegate qui sopra. Ti troverai a sviluppare un occhio critico dato che molte pagine sembrano confusionarie!
Per gli utilizzatori di Mac, prima di salvare un file con l'estensione .html, dovrai assicurarti che il tuo documento sia formattato come semplice testo. Per TextEdit, potrai impostare ciò con l'opzione Make Plain Text.
Questa pagina ti insegnerà come:
Se stai cercando qualcos'altro, cerca sulla pagina HTML avanzato.
Ogni documento HTML ha bisogno di un titolo. Ecco cosa devi scrivere:
<title>Il mio primo documento HTML</title>
Puoi cambiare il testo "Il mio primo documento HTML" per adattarlo ai tuoi bisogni. Il testo del titolo è preceduto dal tag d'inizio <title> e finisce con il relativo tag di fine </title>. Il titolo deve essere collocato all'inizio del documento.
Per provare tutto ciò, scrivi quanto sopra con un editor di testo e salva il documento come test.html, poi guarda il file in un Web browser. Se l'estensione è .html o .htm il browser lo riconoscerà come HTML. Molti browsers mostrano il titolo nella barra d'intestazione della finestra.
Se hai usato Microsoft Word, avrai familiarità con gli stili a disposizione per le intestazioni di varia importanza. In HTML ci sono sei livelli d'intestazione. H1 è il più importante, H2 è leggermente meno importante, e così via fino ad H6, il meno importante.
Ecco come si aggiunge un'intestazione importante:
<h1>Un'intestazione importante</h1>
E qui di seguito una leggermente meno importante:
<h2>Una leggermente meno importante</h2>
Ogni paragrafo che scrivi deve iniziare con il tag <p>. Il tag </p> è opzionale, a differenza dell'indicatore di chiusura per gli elementi d'intestazione. Per esempio:
<p>Questo è il primo paragrafo.</p> <p>Questo è il secondo paragrafo.</p>
Puoi evidenziare una o più parole con il tag <em>. Per esempio:
Questo è un argomento veramente <em>interessante</em>!
Le immagini possono essere usate per rendere uniche le tue pagine Web e per far arrivare il tuo messaggio. Il metodo più semplice per inserire un'immagine è usare il tag <img>. Mettiamo che tu abbia un documento immagine chiamato peter.jpg nella stessa cartella/directory del tuo documento HTML. È larga 200 pixel e alta 150 pixel.
<img src="peter.jpg" width="200" height="150">
L'attributo src fornisce il nome del documento immagine. La larghezza e l'altezza non sono strettamente necessari ma aiutano ad accelerare la visualizzazione della tua pagina Web. Manca ancora qualcosa! Le persone che non possono vedere la foto hanno bisogno di una descrizione che possano leggere in sua assenza. Puoi aggiungere una breve descrizione come segue:
<img src="peter.jpg" width="200" height="150" alt="Il mio amico Peter">
L'attributo alt è usato per dare una breve descrizione, in questo caso "Il mio amico Peter". Per immagini complesse, avrai bisogno magari di una descrizione più lunga. Ammettiamo che ciò sia stato scritto nel documento peter.html, puoi aggiungerne una come di seguito usando l'attributo longdesc:
<img src="peter.jpg" width="200" height="150" alt="Il mio amico Peter" longdesc="peter.html">
Puoi creare immagini in vari modi, per esempio con una macchina fotografica digitale, scannerizzando un'immagine o creandone una con un programma per dipingere o disegnare. Molti browsers comprendono i formati per immagini GIF o JPEG, browser più nuovi riconoscono inoltre il formato PNG. Per evitare lunghe attese quando l'immagine viene trasferita nella rete, dovresti evitare di usare documenti immagine molto grandi.
Generalmente parlando, JPEG è preferibile per le foto e altre immagini che variano leggermente, mentre GIF e PNG vanno bene per la grafica che include aree piatte di colore, linee e testo. Tutti e tre i formati supportano le opzioni di una resa progressiva dove una versione rozza è inviata per prima e poi rifinita progressivamente.
Ciò che rende il Web così efficace è la possibilità di stabilire collegamenti da una pagina all'altra, ed effettuare il collegamento ad un'altra pagina solo tramite un click su un punto. Un semplice click ti può portare in tutto il mondo!
I links sono definiti con il tag <a>. Andiamo a definire un link alla pagina definita nel documento peter.html:
Questo è un collegamento alla <a href="peter.html">pagina di Peter</a>.
Il testo tra <a> e </a> viene usato come intestazione del link. L'intestazione è di solito scritta in un testo sottolineato e di colore blu.
Per collegarsi ad una pagina in un altro sito Web, avrai bisogno di fornire l'indirizzo completo del sito (comunemente chiamato URL), per esempio per collegarsi a www.w3.org dovrai scrivere:
Questo è un collegamento a <a href="http://www.w3.org/">W3C</a>.
Potrai cambiare un'immagine in un collegamento ipertestuale, per esempio, ciò che segue ti permetterà di cliccare sul logo della compagnia per accedere alla loro home page:
<a href="/"><img src="logo.gif" alt="home page"></a>
HTML dispone di tre tipi di liste. Il primo tipo è una lista con richiami visivi, spesso chiamata lista non ordinata. Essa usa i tag <ul> e <li>, per esempio:
<ul> <li>Il primo elememto della lista</li> <li>Il secondo elemento della lista</li> <li>Il terzo elemento della lista</li> </ul>
Puoi notare che dovrai sempre terminare la lista con il tag finale </ul>, ma che il tag </li> è opzionale e può non essere inserito. Il secondo tipo di lista è la lista numerata, spesso chiamata lista ordinata. Essa usa i tag <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>
Come le liste con richiami visivi, dovrai sempre terminare la lista con il tag finale </ol>, ma il tag </li> è opzionale e si può non inserire.
La terza ed ultima lista è la lista di definizioni. Questa ti permette di fare una lista di termini e la loro definizione. Questa tipo di lista inizia con un tag <dl> e termina con il tag </dl>. Ogni termine inizia con il tag <dt> e ogni definizione inizia con un <dd>. Per esempio:
<dl> <dt>Primo termine</dt> <dd>Sua definizione</dd> <dt>Secondo termine</dt> <dd>Sua definizione</dd> <dt>Terzo termine</dt> <dd>Sua definizione</dd> </dl>
I tag finali </dt> e </dd> sono opzionali e possono essere non inseriti. Nota che le liste possono essere innestate una dentro l'altra. Per esempio:
<ol>
<li>Primo elemento della lista</li>
<li>
Secondo elemento della lista
<ul>
<li>Primo elemento inserito</li>
<li>Secondo elemento inserito</li>
</ul>
</li>
<li>Terzo elemento della lista</li>
</ol>
Si possono inoltre usare paragrafi e intestazioni ecc. ecc. per liste più lunghe.
Se usi le opzioni di ricerca View del sito Web (vedi il menu View o File menu), potrai vedere la struttura delle pagine in HTML. Il documento inizia generalmente con una dichiarazione di quale versione di HTML sia stata usata, ed è poi seguita dal tag <html> seguito da <head> ed in ultimo da </html>. I tag <html> ... </html> agiscono come un contenitore per il documento. La <head> ... </head> contiene il titolo e le informazioni sullo stile della scrittura, mentre il tag <body> ... </body> contiene la parte visibile. Ecco qui un esempio che puoi copiare ed incollare nel tuo editor di testo per creare la tua pagina Web:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Sostituisci con il titolo del tuo documento </title>
</head>
<body>
Sostituisci con il contenuto del tuo documento
</body>
</html>
Un modo conveniente per sistemare automaticamente errori di codifica è usare HTML Tidy, il quale oltre a sistemare i tag rende più facile leggere e scrivere. Vi raccomando di usare regolarmente Tidy su ogni tag che state scrivendo. Tidy è molto efficace per ripulire tag creati da strumenti di scrittura con abitudini trascurate. Tidy è disponibile per un'ampia gamma di sistemi operativi dal TidyLib Sourceforge site, ed è stato inoltre integrato in numerosi strumenti di scrittura HTML.
Se sei pronto ad imparare di più, ho preparato del materiale aggiuntivo su HTML avanzato e su come aggiungere un tocco di stile.
La raccomandazione di W3C per HTML 4.0 è la descrizione autorevole di HTML. Comunque, esse sono descrizioni tecniche. Per una fonte d'informazione meno tecnica, potrai comprare uno dei molti libri su HTML, per esempio "Raggett on HTML 4", pubblicato nel 1998 da Addison Wesley. XHTML 1.0 è una raccomandazione W3C.
Buona fortuna ed inizia a scrivere!