Compendio per cominciare a scrivere in HTML

Indice

  1. Struttura base di un documento HTML
  2. Caratteri e loro trasformazioni
    1. Dimensioni
    2. Stili
    3. Colori
  3. Sequenze di escape, ovvero i caratteri speciali
  4. Andare a capo
  5. Rinvio ipertestuale locale
  6. Inserimento immagine
Torna alla home page - Vai all'inizio

Compendio

Struttura base di un documento HTML

Vediamo come si fa a scrivere un semplice documento.
Si comincia col dichiarare che quello che si scrive è in formato HTML, quindi si sicrive, per prima cosa,<html>.
Poi si deve intestare il documento col comando, o tag, <head>, qui si possono mettere dei riferimenti all'autore, al programma ed altre cose che al momento non interessano.
Si procede con un titolo (<title>) e poi col corpo del documento (<body>).
Il titolo andrà a definire la scritta che apparirà sulla barra che intesta la finestra, accanto alla scritta che definisce il browser (Nescape, M.Explorer, Opera, etc..). Da notare che tutti i tag che definiscono un ambiente vengono chiusi con </...


	<html>
	<head>
	<title>Titolo</title>
	</head>
	<body>
	....
	</body>
	</html>

Vai all'inizio


Caratteri e loro trasformazioni

Come in molti editori di testi, anche in HTML si possono ingrandire o rimpicciolire i caratteri. Vediamo qui di sequito le scritture che operano sulla grandezza del font.

Dimensioni

<big> <font size=+1> Prova </font>
<font size=+2>
d'ingradimento </font>
<font size=+3>
dei </font>
<font size=+4>
caratteri </font>
</big>

che produce

Prova d'ingradimento dei caratteri mentre la seguente sequenza

<small> <font size=-1> Prova </font>
<font size=-2>
d'impiccolimento</font>
<font size=-3>
dei </font>
<font size=-4>
caratteri </font>
</small>

che produce

Prova d'impiccolimento dei caratteri

Stili

Questo era quanto previsto per il cambiamento di grandezza del carattere. Ovviamente possiamo cambiare anche lo stile del carattere.Vediamo come. La sequenza

<B> Ciao mamma </B>

ha per risultato

Ciao mamma

in parole povere la b serve per lo stile bold, grassetto. Invece per fare il corsivo basta sostituire la B con la I. Vediamo

<I> Ciao mamma </I>

ha per risultato

Ciao mamma

La combinazione dei due, ovvero

<B><I>Ciao mamma </I></B>

risulta

Ciao mamma

Questo testo lampeggia? , se non lampeggia probabilmente state usando il programma i Bill per leggere questo documento.

Colori

Questo testo é verde? In genere questo è verde, indipendentemente dal browser che state usando. Vediamo qual è la sequenza che cambia il colore ad un testo:

<font color="green"> Questo testo é verde? </font>

Chiaramente il verde non è l'unico colore che si può utilizzare per i nostri testi, così come per lo sfondo del nostro documento, o per lo sfondo di singole caselle del nostro documento. Da notare che nella linae di comando che leggiamo qui sopra si vede come ci sia una bella parola inglese a determinare il colore scelto. Ovviamente se ne possono usare altre (black, white,...), però si sa che gli informatici vanno d'accordo coi numeri, allora si sono inventati un sistema ,detto RGB (red, green, blue), per identificare un colore. Si usa così una stringa di sei caratteri del codice esadecimale (0,..,9,A,...,F), per chiamare un colore particolare. Per farlo basta sostituire alla parola inglese il numero preceduto dal segno #. Ad ogni coppia di caratteri è assegnato un contenuto di quel colore. Per facilitare il compito di trovare un colore ho preparato una tabella che indica il numero esadecimale del colore in cui e stato scritto il numero, appunto.

FFFFFF 000000 999999 99CCFF 666666
FF3333 3333FF 33CCFF 99FF99 33FF33
FFFF33 FF00FF 99CC66 3399CC FFCC99
CCCCFF 99FFFF CCCCCC 66CCCC CCCC00
0000CC FF9999 FFFFCC 996633 33CC99
CC66FF 00CCCC CC00CC 9900CC CCCC99
CC9933 9999FF 339933 CC3366 009999

Vai all'inizio


Sequenze di escape, ovvero i caratteri speciali

Per scrivere un documento HTML devo usare i TAG, ovvero comandi che vengono racchiusi tra i segni di minore e maggiore. In HTML si usano spesso dei caratteri speciali per definire delle operazioni sul testo. Ma come si fa a far scrivere proprio uno di quei caratteri speciali? Si usano delle sequenze dette di escape. Questi hanno il formato &nome; oppure &codice;. Dove il codice è un numero. Per esempio &amp; è la sequenza di escape per scrivere la 'e' commerciale, &lt; è la sequenza di escape per il segno di minore.

Vai all'inizio


Andare a capo

Il broweser manda a capo il testo in modo automatico in modo che occupi le dimensioni della finestra del broweser, appunto. Per mandare a capo un testo forzatamente in un punto bisogna utilizzare il comando (tag) <br>.
Se invece si desidera andare a capo lasciando una linea vuota di spazio si deve utilizzare il tag <p>.

La seguente scrittura

Ciao <br> mamma.<p> Ciao mamma.

Produce

Ciao
mamma.

Ciao mamma.

Vai all'inizio


Rinvio ipertestuale locale

Inizio

Traduzione: come fare in modo che una parola del testo scritto in della pagina che si vuol fare, rimandi automaticamente, cliccandovi sopra col mouse, ad un altro luogo del testo. Questa funzione è utile per i documenti grandi che possono avere un indice all'inizio, o per documenti frammentati che rimandano uno all'altro. Distinguiamo due momenti nella produzione di questo salto. Il primo è la definizione di un punto di arrivo, il secondo è la definizione del punto di partenza.
Per definire il punto di arrivo bisogna utilizzare questa scrittura

<a name="etichetta"> Destinazione </a>

dove etichetta è il nome a cui ci si riferirà nel punto di partenza per rinviare al punto di arrivo. "Destinazione" è il testo che si è ancorato al riferimento. In pratica si salterà dal punto di partenza alla "etichetta" ancorata al testo "Destinazione".

Per definire il punto di partenza si deve usare la seguente scrittura

<a ref="#etichetta"> Si arriva a destinazione </a>

La scrittura è molto simile a quella precedente. Facciamo attenzione alle differenze. L'etichetta è preceduta dal segno # e "Si arriva a destinazione" sarà evidenziato in modo speciale nel browser. Infatti, passandovi sopra col puntatore del mouse, quensti muterà foggia.

Facciamo un esempio. Definiamo un salto alla fine di questo paragrafo, che rimandi all'inizio del paragrafo, la dove ho scritto quel bizzarro "inizio".

Definiamo il punto di arrivo in Inizio

<a name="01saltoinizio"> Inizio </a>

e ora definiamo il punto di partenza con

<a href="#01saltoinizio"> Si salta qui sopra, ad inizio </a>

Che produce

Si salta qui sopra, ad Inizio

Si voglia notare che, a causa della brevità del salto, questi è evidente solo se la finestra del browser è piuttosto piccina, quindi, se nel cliccare su "Si salta qui sopra, ad inizio" non si nota nulla, è perché il salto porta il riferimento alla prima linea visualizzabile, quindi, se questa è già visibile, il salto non è sensibile.

Vai all'inizio


Inserimento immagine

Il codice che serve per inserire un'immaigine (contenuta nella cartella corrente) è:

	<IMG SRC="NomeImmagine.estensione">
	

Ovviamente potrebbe essere opportuno centrare le proprie immagini, utilizzando l'apposito comando.

Vai all'inizio



Torna alla home page - Vai all'inizio di questo documento

Mandami un messaggio via e-mail che risponderò quanto prima