PROGRAMMAZIONE: HTML

Corso sul HTML di HTML.IT

Introduzione al HTML

 

Benvenuto in questa sezione della guida che intende seguirti ed aiutarti nella realizzazione della tua home page. Questa premessa serve a sottolineare pochi ma fondamentali concetti che reggono l'HTML e che, se compresi tempestivamente, consentono di far proprio un sistema di contrassegno tutt'altro che complesso, ma pur sempre retto da regole e principi inderogabili.

Creare un sito Internet non è difficile, ne' può essere messo a confronto con veri e propri sistemi di programmazione. Su quest'ultimo punto, in particolare, è bene fin d'ora sottolineare come HTML non sia un linguaggio di programmazione ma un semplice sistema di contrassegno, i cui tag vengono riconosciuti ed interpretati dai browser Web (Netscape, MsIe, Opera ecc). Questa peculiarità rende HTML un sistema facile da comprendere perchè non pressuppone alcuna conoscenza tecnica preesistente. Per questo motivo chiunque può avvicinarsi al Web Publishing senza prerequisiti di specializzazione e per questo in Internet esistono milioni di creatori di pagine Web.

Il mercato è gravido di decine di software speciliazzati nella creazione di pagine HTML: i cosiddetti editor HTML. La complessità di questi programmi ha raggiunto livelli molto alti ma ha seguito strade diverse. In buona sostanza il mercato propone due tipi di editor HTML:

Editor testuali
Si tratta di programmi che propongono modifiche dirette sul codice HTML puro con possibilità di preview del risultato. Per facilitare la scrittura del codice mettono a disposizione comandi preconfezionati attivabili con semplici click. L'utilità maggiore di questi strumenti è la padronanza del codice HTML puro che riescono a comunicare agli utilizzatori. Il difetto maggiore è nell'apprendimento più difficile rispetto agli editor WYSIWYG.

Editor WYSIWYG
L'acronimo sopraindicato sta per: What You See Is What You Get, ed italianizzando significa che ciò che si vede sullo schermo è ciò che si ottiene in un browser Web. In altre parole questi editor non visualizzano il codice HTML ma esclusivamente gli oggetti, le immagini ed il testo. In questo modo lo sviluppatore non si trova a lavorare su codice HTML ma sulla pagina così come verrà visualizzata dal browser: spostando oggetti con il semplice trascinamento del mouse, sfruttando layout predefiniti ecc.
Il vantaggio di questo tipo di editor è evidente: lo sforzo di comprensione delle specifiche HTML è ridotto al minimo e il tempo di apprendimento è brevissimo.
Secondo chi scrive, però, questo tipo di editor (un esempio concreto è Front Page) non dà la possibilità di comprendere l'HTML e personalizzarne l'uso. Si corre, infatti, il rischio di creare siti fotocopia con un layout identico agli altri e, in presenza di errori che l'editor non riesce a risolvere, di non riuscire ad andare oltre ciò che il programma prevede.

A prescindere da pareri soggettivi su programmi per l'HTML, la presente guida è concepita per far comprendere i rudimenti dell'HTML puro. Continuando questo corso non ti troverai di fronte un tutorial sui comandi degli editor più diffusi, ma davanti codice HTML puro ed universale. Solo in questo modo potrai comprendere le peculiarità dell'HTML e degli altri linguaggi che ne supportano e ampliano l'utilizzo.

Abbandona per tutto il corso di questo tutorial il tuo editor e concentrati sulle nozioni di codice che la guida ti presenta volta per volta. Comprese le basi dell'HTML potrai scegliere se usare editor WYSIWYG o editor testuali, in entrambi i casi avrai consapevolezza dei limiti e delle potezialità del sistema, potendo usare meglio tutti gli strumenti che il mercato mette a tua disposizione.

Alcuni consigli per comprendere pienamente questa guida:

1. I siti Web, prima della pubblicazione, vanno creati in locale, cioè sul tuo hard disk. Solo successivamente vengono spediti attraverso programmi appositi.
   

2. Per i nomi dei file e per le estensioni degli stessi usa caratteri sempre in minuscolo.
   

3. Ricorda che la modifica del tuo sito Web avviene tramite programmi FTP (File Trasfer Protocol) mediante password e UserId. Quindi nessun altro, oltre te, può modificare le pagine.
   

4. Per scrivere codice HTML puoi utilizzare qualsiasi editor HTML testuale (HomeSite, HotDog, DreamWeaver ecc.), ma anche solo Blocco Notes di Windows.

 

 

Prima di continuare è importante sottolineare una caratteristica dei tag HTML. Come più volte accennato, HTML è un sistema di contrassegno che produce i suoi effetti su testo e immagini. Perchè tali effetti si producano è necessario che elementi specifici (standardizzati in HTML) vengano assegnati ai vari elementi testuali o d'immagine della pagina. Il termine marcatura deriva proprio da questa caratteristica. Per una migliore comprensione di questo fondamentale concetto di HTML prendiamo in considerazione il testo seguente:

HTML è un sistema di contrassegno indipendente dalla piattaforma.

Come vedi si tratta di un normalissimo testo per il quale non abbiamo specificato alcun tag HTML. In linea con i concetti che reggono il sistema di markup, senza altre indicazioni, il browser formatta il testo come quello che lo precede (infatti si tratta di un font arial di dimensioni e colore identici a questo stesso testo).
Consideriamo, ora, l'ipotesi di voler dare un colore rosso al testo di esempio. Per fare questo marchiamo il testo con lo specifico tag HTML che determina il colore del testo:

<font color="red">HTML è un sistema di contrassegno indipendente dalla piattaforma.</font>

In seguito vedremo il funzionamento del tag FONT. Quello che interessa sottolineare in questa sede è l'uso generale dei marcatori HTML: come si nota agevolmente dall'esempio, il tag <font color="red"> è posto immediatamente prima e dopo la frase da formattare in rosso. L'unica differenza è che il tag prima della frase è <font color="red">, mentre quello che chiude è </font>. La barra posta in verticale verso destra indica al browser che il tag <font> precedentemente aperto, in questo caso va chiuso. Abbiamo così dato vita ad un piccola marcatura, comunque sintomatica del funzionamento del sistema HTML.

I tag HTML sono case insensitive, cioè assolutamente indipendenti dal maiuscolo e minuscolo. Per intenderci, il seguente codice:

<font size="red"></font>

ha gli stessi effetti del codice:

<FONT SIZE="RED"></font>

In HTML esistono TAG che non hanno bisogno di chiusura, perchè la loro funziona non è quella di marcare un elemento, ma di fornire informazioni di diverso tipo. Volta per volta indicheremo quali elementi hanno bisogno di chiusura e quali funzionano correttamente anche se ne sono privi.

 

Adesso che hai un'idea di cosa sia e come opera l'HTML sei pronto a seguire il corso (suddiviso in 16 lezioni più 2 punti di approfondimento) tenuto da Massimo Valenti di HTML.it. Questo corso è strutturato in maniera semplice e chiara adatto quindi ai principianti del linguaggio, ma offre anche spunti interessanti agli utenti più esperti. Clicca sull'argomento al quale sei più interessato, anche se, ti consiglio (se sei alle prime armi) di seguire il corso punto per punto data la correlazione tra una lezione e l'altra. Buona fortuna

 

 

 

Corso sul HTML di HTML.IT

 

1. <HEAD> intestare il documento
Come creare da zero un documento HTML; dare un titolo alla pagina e cosa sono e come impostare i meta tag

2. Scrivere correttamente i meta tag
Come scrivere correttamente i meta tag per risultare in buona posizione nei search engine

3. <BODY> Impostare lo sfondo del documento
Come inserire un'immagine o un colore di sfondo; il colore di tutti i link attivi e visitati e altre operazioni riguardanti lo sfondo del documento

4. Inserire suoni o musiche di sottofondo
Come inserire suoni e musiche di sottofondo compatibili con Netscape e MsIe.

5. <FONT> carattere e grandezza del testo
I tag fisici e logici; come formattare il testo o scegliere un font; come rendere il testo grassetto, corsivo e sottolineato

6. Paragrafi e giustificazione del testo
Come posizionare testo e immagini; centrare oggetti, creare linee orizzontali.

7. Creare elenchi puntati e numerati
Indicizzare risorse all'interno di elenchi puntati e numerati.

8. <IMG> inserire immagini nel documento
Come inserire immagini all'interno di un documento e usare gli attributi del tag IMG.

9. <HREF> link verso documenti o immagini
Come creare collegamenti tra documenti HTML con l'elemento e tutti i suoi attributi.

10. <TABLE> creare e gestire Tabelle HTML
Creare tabelle HTML per gestire dati e formattare il layout di pagina.

11. Un modo nuovo per formattare i documenti: i css
18 lezioni per scoprire ed imparare i fogli di stile

12. <FRAME> creare pagine con Frame
Come creare e gestire correttamente pagine HTML con frame

13. <FORM> creare e gestire moduli HTML
Tutorial in 6 lezioni per inserire moduli HTML nel tuo Website

14. <MAP> creare mappe cliccabili
Cosa sono, come si creano, quali programmi usare: tutto sulle image map

15. <APPLET> inserire Applet Java nel documento
Come inserire le applet Java che trovi in HTML.it o su altri siti Internet

16. Le nuove specifiche di HTML 4
Le maggiori novita' introdotte dalla quarta versione dello standard HTML

A. Risoluzione dei problemi più frequenti
Ora che hai imparato a conoscere HTML ti troverai di fronte a problemi molto diffusi. Questa sezione ti aiuta a risolververli agevolmente

B. Strumenti per gestire al meglio il tuo sito
Come creare facilmente forum di discussione, chat, password, banner a rotazione, mailing list e altri strumenti necessari a migliorare il tuo sito