Alla scoperta della "programmazione" HTML

Sabato 13 Dicembre 2008 14:31 Scritto da Administrator

html intro

Questo breve articolo tratterà i principi base per poter iniziare a destreggiarci con pagine HTML elementari. Verranno esaminati i principali aspetti di tale linguaggio visuale, trattando a grandi linee le potenzialità che è in grado di offrire per creare da zero un sito web statico molto molto semplice.

Cos'è l'HTML? Non usiamo definizioni complicate ma veniamo al sodo: l'’HTML (HyperText Marker Language) è un linguaggio di presentazione visuale, non di programmazione, che ci dice come le scritte devono essere visualizzate sullo schermo: il browser è l’interprete del linguaggio HTML (e di altri).

Oggi più che ipertesto, si parla di ipermedia, un ipertesto evoluto che contiene dei media (video, suoni, animazioni, immagini,…).

All'interno di ogni pagina HTML è presente una serie di marcatori (i TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate (<TAG>), la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi: </TAG>). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma: <nome_TAG attributi>contenuto</nome_TAG>
Spesso i tag hanno degli attributi, e non tutti i tag si chiudono necessariamente.

L'HTML è "case unsensitive", cioè indipendente dal formato. Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo.

I tre tag fondamentali di una pagina HTML sono:

<HTML>…</HTML> : comprende tutti gli altri tag;

testa <HEAD>…</HEAD> : contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere - ad esempio - i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, eccetera.

corpo <BODY>…</BODY> : qui è racchiuso il contenuto vero e proprio del documento

I tag principali sono i seguenti, da inserire tutti nel BODY a meno che non diversamente specificato:

La struttura base per creare un link è la seguente:
<a href="http://www.sito.com">vai al sito</a>
Nel parametro href="/ " viene inserito il link che si vuole raggiungere al click sulla scritta "vai al sito".
Fra i tag <a> e </a> si inserisce il testo che diverrà cliccabile.
Per creare il link su un'immagine, la sintassi è simile: <a href="/ "><img src="/cerchio.jpg"></a>
E' infine possibile creare un link che permetta di inviare una mail al click: <a href="mailto: nome@casellamail"> contattami </a>

<BR> serve per andare a capo e non necessita di chiusura;

<P> e </P> serve ad aprire e chiudere un paragrafo. Riaprendo un <P> viene creato automaticamente, a capo, un nuovo paragrafo; il tag può anche non essere chiuso;

Tag per la realizzazione delle tabelle: per ottimizzare il contenuto di una pagina HTML, si crea una tabella, quindi una struttura di celle, righe e colonne, in cui predisporre tutti gli elementi, in modo che, quando si ridimensiona la finestra del browser, anche la tabella si ridimensiona automaticamente. La tabella è delimitata dal tag <TABLE> e </TABLE> ; questo tag può avere parametri aggiuntivi che ad esempio servono a specificare il colore dei bordi della tabella. All’interno di questa struttura, per aprire una riga si usa il tag <TR> e si richiude il tag con </TR>. Tra i tag riga, è possibile specificare le varie colonne con i tag <TD> e </TD>.

Ad esempio:

          <TABLE>
       <TR>
            <TD>
                 Mucca
            </TD>

            <TD>
                 Topo
          </TD>
   </TR>

   <TR>
          <TD>
                 Elefante
            </TD>

            <TD>
                 Cavallo
          </TD>
       </TR>
          </TABLE>

Il risultato prodotto sarà il seguente:

Mucca	Topo
Elefante	Cavallo

E’ anche possibile unire delle celle usando l’attributo COLSPAN, con la sintassi

<TD COLSPAN=“numero:_celle_unite”>

oppure unire celle anche in verticale, usando invece la sintassi

<TR COLSPAN=“numero:_celle_unite”>

Per scrivere del testo in corsivo (italico) si usa il tag <I>…</I>; per scrivere del testo in grassetto si usa il tag <B>…</B>; per scrivere del testo sottolineato si usa il tag <U>…</U>;

Per far sì che venga visualizzato, come titolo della finestra del browser, uno specifico, si usa il tag <TITLE>…</TITLE> da inserire nell’HEAD e non nel BODY;

Per inserire un commento, la sintassi è la seguente:

Il tag che indica uno stile o una colorazione del contenuto è il segnuente: <font color="red">testo</font>

Per impostare lo sfondo di una pagina web (<body bgcolor="blue">), è preferibile in molti casi utilizzare la corrispondente codifica esadecimale del colore, che ci permette – tra le altre cose – di scegliere anche tonalità di colore non standard. Con la notazione esadecimale il nostro esempio diventa: <body bgcolor="#0000FF">. Il numero di colori che l’utente ha a disposizione dipende dalla scheda video. Ecco una tabella con la notazione di alcuni colori (molti di essi sono disponibili anche nelle varianti "dark" e "light", ad esempio: "darkblue", "lightblue"):

colore	parola chiave	notazione esadecimale
arancione	orange	#FFA500
blu	blue	#0000FF
bianco	white	#FFFFFF
giallo	yellow	#FFFF00
grigio	gray	#808080
marrone	brown	#A52A2A
nero	black	#000000
rosso	red	#FF0000
verde	green	#008000
viola	violet	#EE82

In conclusione, la struttura base di una pagina HTML è la seguente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Titolo della pagina web</title>
</head>

<body>

Qui il nostro contenuto
</body>

</html>

Questa è solamente una piccolissima introduzione all'HTML: è possibile scendere molto più nel dettaglio. Ad esempio, è possibile creare pulsanti, campi, form e addirittura effettuare il controllo sulla correttezza delle informazioni immesse dall'utente in una pagina HTML: in questo caso interviene JavaScript a complicare le cose. E' infine possibile integrare l'HTML in pagine dinamiche PHP.

Commenti (0) add comment

Scrivi commento

	Oggi	689
	Ieri	2080
	Questa settimana	10396
	Scorsa settimana	13053
	Questo mese	6429
	Scorso mese	61539
	Globali	2930614

Translate!

Menu Principale

Newsletter: iscriviti!

Visits counters

Siti Amici

Alla scoperta della "programmazione" HTML