Corso di HTML

Introduzione e tag di base

 

L’HTML ci risulterà indispensabile se vogliamo costruire un sito di qualsiasi tipo: dalla nostra pagina personale alla nostra vetrina commerciale virtuale; in tutti i casi vi assicuro che vedere crescere e migliorare il proprio sito è molto emozionante e gratificante.

Iniziamo però questa nuova rubrica dicendo cos’è l’HTML e a cosa serve.

L’HTML (HyperText Markup Language) è nato come forma espressiva degli ipertesti e si è sviluppato grazie alla sua linearità e semplicità di utilizzo con Internet. Un ipertesto è un documento con possibilità di lettura in modo ‘non lineare’ ciò saltando da un argomento all’altro e con la possibilità di richiedere la visualizzazione di immagini, suoni o animazioni semplicemente selezionando alcuni collegamenti. È questo che ha decretato la nascita e la crescita del WWW ed è per questo che ora vogliamo capire come si può fare in modo che qualsiasi interprete (browser come Explorer o Netscape) riesca a capire il linguaggio che stiamo per andare ad imparare ( l’HTML, no??).

Non inoltriamoci in questa sede nella comprensione dei delicati meccanismi che stanno alla sua base come l’SGML, DTD, URI, URL ecc., ma iniziamo subito a metterci al lavoro, accennando ad essi solo se ce ne sarà il bisogno e nel momento opportuno.

Prima però una piccola precisazione: per poter scrivere pagine HTML non abbiamo bisogno di alcuno strumento particolare, ci servirà semplicemente il Notepad del Windows o qualsiasi altro programma di videoscrittura capace di salvare i file in formato ASCII; una volta poi che avremo preso padronanza del linguaggio potremo cominciare ad utilizzare editor specializzati.

Di questi in commercio ce ne sono a decine, i più famosi sono Microsoft Frontpage, Macromedia Dreamweaver, HotDog, PageMill, Netscape Composer, HomeSite ecc. ecc. e molti di essi sono anche WYSIWYG (what you see is what you get), cioè permettono di creare la pagina disponendo tutti gli elementi proprio come essi appariranno una volta avviato il browser.

Utilizzarli però, senza capire cosa sono i tag e come funzionano, può a volte diventare frustrante quando si vuole aggiungere qualche effetto particolare o non si riesce a capire perché una data immagine non la si riesce a posizionare in un punto esatto.

Quindi iniziamo dalle fondamenta: i Tag.

I tag sono i comandi HTML che definiscono la struttura della pagina e che istruiscono il browser sul da farsi: visualizzare il titolo della pagina, impostare il colore dei caratteri e dello sfondo, visualizzare testo o immagini e tutto quello che si vede in Internet ( o quasi..., parleremo più in la degli Script, CGI e tante belle altre cose).

I tag sono racchiusi tra parentesi angolari ( "<" e ">" ) e possono essere digitati indifferentemente sia in minuscolo che in maiuscolo; quasi tutti i tag hanno un tag correlato che ne indica il termine e si indica anteponendo al nome del tag il simbolo slash "/". Mi spiego meglio con un esempio: il tag <HTML> contrassegna l’inizio di una pagina, mentre il tag correlato </HTML> ne contrassegna la fine, al loro interno saranno contenuti tutti gli altri tag che andremo man mano a descrivere.

Il secondo elemento di contrassegno ( tag ) che possiamo trovare è l’elemento HEAD che ha questa struttura:

<HEAD>

contenuto intestazione

</HEAD>

Qui contenuto intestazione indica la combinazione di alcuni tag che possono essere utilizzati solo in questa sezione come: TITLE, META... e quindi anche l’intestazione del documento che può essere utilizzata dai motori di ricerca. Può essere inoltre utilizzato per definire funzioni script.

Il tag TITLE ha la struttura seguente:

<TITLE>

contenuto

</TITLE>

Dove contenuto indica il testo che vorremmo il browser visualizzasse nella barra del titolo della sua finestra.

Altro tag (non propedeutico) che vedremo spesso nelle pagine Web è META, ma non ci interesseremo molto di lui perché serve solo per passare informazioni aggiuntive al server Web (il computer che ci manda le pagine che visualizza il nostro browser). Queste informazioni sono spesso utilizzate dai motori di ricerca per recuperare informazioni sul documento in modo da poterlo classificare senza caricarlo completamente.

Ecco che si presenta la prima eccezione: il tag <META> non ha il suo corrispettivo di chiusura </META> e presenta anche degli attributi: HTTP-EQUIV, NAME e CONTENT; qui non entreremo nel dettaglio sul loro significato, ma aspettatevi di vedere nelle pagine Web righe come queste:

<html>

<head>

<title>Titolo del mio documento</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

</html>

Certo questo codice non è che visualizzi molto sullo schermo, ma se saprete aspettare la prossima puntata vedrete qualcosa di molto più concreto che vi permetterà di mettervi al lavoro con la vostra prima pagina Web.

Ciao e alla prossima!

 

Torna all'indice Generale del corso di Corso di HTML di Software Planet