Lezioni di Informatica
"Una volta che abbiate conosciuto il volo, camminerete sulla terra guardando il cielo" [ L. da Vinci ]
Informazioni sul Sito
N. visitatori  000059263  dal 21/01/2007  |   e-mail: ksoft64camera@gmail.com   
Cerca nel sito
Documenti collegati alla pagina
Generalità

Cos' è HTML?

HTML è acronimo di Hyper-Text Markup Language.
Non può essere considerato un linguaggio di programmazione tradizionale in quanto non possiede strutture elaborative o funzioni e neanche costrutti iterativi.
E' nato per costruire gli ipertesti da collocare sul web in modo standard. Un ipertesto è un insieme di documenti che riguardano una certa tematica e sono collegati secondo una mappa concettuale. Tutti i browser devono saper interpretare la scrittura HTML.

Regole fondamentali

Per scrivere un documento HTML può essere utilizzato un qualsiasi editor di base (es. notepad di Windows o gedit di Linux).
Per facilitare il compito del programmatore ci vengono incontro dei software applicativi specifici, gli editor HTML.
Tra questi io consiglio di utilizzare bluefish, un editor HTML open source e gratuito che funziona su tutti i sistemi operativi.
E' completo, rispetta le regole sintattiche del W3C (www Consortium).e gestisce anche i fogli di stile e i linguaggi di script client-side e server-side.
Ogni documento deve essere salvato con estensione .htm o .html (es. index.htm, home.htm, index.html. home.html, ... )

Struttura del documento

Ogni documento HTML deve avere sempre la seguente struttura:
<html>
<head>
...
</head>
<body>
...
...
</body>
</html>
Come si può notare vi sono due parti distinte: la head (intestazione) e il body (corpo).
La sezione head
La sezione head contiene la parte descrittiva del documento: il titolo (<title>), i tag <meta> che consentono di inserire informazioni utlii per i motori di ricerca, il tag <link> che collega il documento ad eventuali fogli di stile.

Esempio di sezione head:
...
<head>
<title>Lezione su HTML</title>
<meta name="keywords" content="Rocco Camera, Informatica, HTML" />
<link rel="stylesheet" type="text/css" href="mio_stile.css" />
</head>
...
La sezione body
La sezione body racchiude il contenuto vero e proprio del documento.
Il testo normale sarà arricchito dai tag fondamentali relativi ai paragrafi (<p>), alle sezioni (<div>), alle liste ordinate (<ol>) e puntate (<ul>). alle tabelle (<table>), ai collegamenti ipertestuali (<a>), alle immagini (<img>)
Molti di questi argomenti sono trattati in modo dettagliato in altre parti del presente ipertesto quindi si rimanda alla mappa

Qui è invece opportuno parlare di quei tag fondamentali per la formattazione del testo.
Paragrafi e formattazione del testo
Un paragrafo è una porzione di testo che si distingue e si stacca con un a capo all'inizio ed uno alla fine. Il tag per il paragrafo è p.
Esempio:
Immaginiamo il seguente testo del nostro documento web
Qui c'è testo normale e 
questo è un paragrafo 
qui continua il testo normale
Nel browser apparirebbe così:

Qui c'è testo normale e questo è un paragrafo qui continua il testo normale

anche se nella scrittura del documento siamo andati a capo due volte ciò non viene visualizzato nel browser.
Adesso scriviamo:
Qui c'è testo normale e 
<p>questo è un paragrafo</p> 
qui continua il testo normale
stavolta otterremo:
Qui c'è testo normale e 

questo è un paragrafo

qui continua il testo normale
I tag br e hr
Per andare a capo senza creare paragrafi si usa il tag br (break = rompere la riga): Si scrive così: <br />
Per creare un righello orizzontale si usa il tag hr (horizontal rule) e si scrive così: <hr />
Grassetto, corsivo ...
Per contrassegnare una parte di testo in grassetto si utilizza il tag b (bold = grassetto), per il corsivo il tag i (italic = italico o corsivo), per la sottolineature il tag u (underlined = sottolineato).
Un esempio completo:
Per ottenere nel browser
Oggi è il mio compleanno e lo voglio festeggiare con i miei amici divorando una grande torta 
scriverò:
Oggi è il <b>mio compleanno</b> e lo voglio <i>festeggiare</i> con i miei amici divorando una <u>grande torta</u>