HTML - Che cosa vi serve, La pagina HTML

informatica

ALTRI DOCUMENTI

passwd à cambiare la password

MICROSOFT WORD

MICROSOFT EXCEL

Impresa di raccolta e riciclaggio di materiali metallici e di rifiuti - Eliminazione delle ambiguità presenti

Arhitettura di Von Neumann - MEMORIA CENTRALE

La struttura modulare di un sistema operativo - Il Nucleo, Gestione della Memoria

I FILE TESTO - ISTRUZIONI

LA RETE INFORMATICA

ACM Association for Computing Machinery

Appunti sulla DCT - integrazione dei Lucidi del corso di Elaborazione Numerica dei Segnali

HTML

Che cosa vi serve

Per cominciare a disegnare le vostre pagine HTML vi serve prima di tutto un editor di testo. Se usate Windows avete sicuramente Blocco note (Notepad.exe), ma qualunque altro va bene lo stesso, purché possa salvare in formato testo (.txt).

Poi vi serve un browser WWW. Ce ne sono diversi tipi, simili tra loro ma con alcune caratteristiche in più o in meno. Il più usato è Netscape Navigator <https://home.netscape.com>, seguito da Microsoft Internet Explorer <https://www.microsoft.com>.

Quello che state usando in questo momento è Microsoft Internet Explorer. Se volete un consiglio, installateli tutti e due.

Con l'editor scriverete il codice HTML, con il browser vedrete il risultato.

La pagina HTML

Una pagina HTML è un semplice documento di testo di tipo .html o .htm.
Supponiamo di avere un file prova.html così strutturato:

Top of Form 1

(Se ci pasticciate, cliccate

Bottom of Form 1

Questa pagina apparirà sul browser grosso modo così:

Netscape - [La mia pagina]

Ciao! <html>...</html>

Il documento va compreso tutto tra i marcatori <html> </html>; questi indicano al browser dove comincia e dove finisce il testo da visualizzare. I marcatori, ovvero i comandi HTML, in genere vanno in coppia, e all'interno si trova il testo che "subisce" l'effetto di quel comando.

<title>...</title>

Dopo <html> viene <title>. Questo è il titolo della pagina e verrà visualizzato sulla barra in alto della finestra del browser. <title> va poi chiuso da </title>

<body>...</body>

Il vero "corpo" del testo è compreso tra <body> e </body>. Ciò che scriverete qui dentro (in questo caso la scritta "Ciao!") verrà visualizzato nella finestra del browser.

In <body> è possibile specificare alcune caratteristiche della pagina HTML, per esempio il colore dello sfondo e del testo:

Inserendo questo comando al posto del semplice <body> dell'esempio si otterrà questo risultato:

Ciao! L'HTML fornisce una vasta gamma di colori predefiniti, ottenibili inserendo direttamente il nome (appunto red o white. E' possibile comunque crearne di nuovi immettendo i valori RGB (Red, Green, Blue) in notazione esadecimale, con valori da a ff. E' consigliabile usare quest'ultima forma se si vuole che i colori siano leggibili anche da browser più vecchi.

Ciao! Il colore dei caratteri può anche essere cambiato con font <caratteri.html>.

I paragrafi

Se il testo che si sta visualizzando è più lungo dello schermo, il browser va a capo automaticamente. Per evitare che il browser vada a capo in una linea lunga si inserisce la linea stessa in <nobr>...</nobr>. Ma per farlo andare a capo con linee più corte della larghezza dlelo schermo non è sufficiente andare a capo nell'editor; bisogna inserire comandi appositi:

Top of Form 1

Bottom of Form 1

Questa è una linea. Questa è un'altra linea. Questa è un'altra linea ancora e questa è la stessa linea. <br>

Questo comando (break) dice al browser di andare a capo.

<p>

Questo comando (paragraph) dice al browser di andare a capo e lasciare una linea vuota.
Si usa <p> anche per allineare i paragrafi a sinistra, a destra o al centro:

Al posto di <p align="center"> si può usare semplicemente <center>...</center>

<hX>...</hX>

Il comando heading serve per identificare determinati paragrafi come titoli. Modifica la dimensione dei caratteri, va a capo automaticamente prima e dopo e lascia dello spazio aggiuntivo. Al posto di X si usano numeri da a a seconda della dimensione del titolo desiderata:

<center>
<h1>Titolo 1</h1>
<h2>Titolo 2</h2>
<h3>Titolo 3</h3>
<h4>Titolo 4</h4>
<h5>Titolo 5</h5>
<h6>Titolo 6</h6>
</center>

Titolo 1 Titolo 2 Titolo 3 Titolo 4 Titolo 5 Titolo 6 <pre>...</pre>

La formattazione del browser fa sì che più spazi vengano considerati come uno solo. Il marcatore <pre>...</pre> permette di preformattare un testo. In questo caso verranno contate anche le interruzioni di linea senza bisogno di inserire <br>

<pre>

colonna 1 colonna 2 colonna 3

0001 1123 455

4.555 455.55 0.0001

</pre>

colonna 1 colonna 2 colonna 3 0001 1123 455 4.555 455.55 0.0001

I caratteri

Come in un testo normale, anche in HTML è possibile cambiare colore, dimensione, tipo e altre caratteristiche dei caratteri che si stanno usando. Per esempio:

Top of Form 1

Bottom of Form 1

Ecco il risultato:

Questo testo è normale. Qui invece ci sono scritte in grassetto, corsivo e sottolineato. <b>...</b>

Questo comando trasforma il testo in grassetto (bold).

<i>...</i>

Questo comando trasforma il testo in corsivo (italic).

<u>...</u>

Questo comando trasforma il testo in sottolineato (underlined).

<blink>...</blink>

Questo comando fa lampeggiare il testo. Funziona solo con Netscape <https://home.netscape.com>.

<tt>...</tt>

Il marcatore TeleType mostra il testo con caratteri a larghezza sempre uguale courier, tipo macchina da scrivere.

<font>...</font>

Con <font> è possibile cambiare tipo, dimensione e colore dei caratteri. Per esempio

Ora <font face="arial" size="5" color="cyan">cambiamo</font>

produrrà:

Ora cambiamo Con face è possibile specificare il nome di qualunque carattere, basta che sia presente sul computer che si usa. Tenete presente che non tutti hanno gli stessi caratteri, anche se alcuni sono standard. E' possibile specificare più caratteri e il computer selezionerà i primi nell'elenco che corrispondono a quelli in dotazione: face="times,times new roman".
Per la dimensione si usa size, che può essere espresso in valori assoluti (da a ) o relativi ai caratteri usati (da a ).
Per color si usano le stesse regole di body <documento.html>.

<sup>...</sup> e <sub>...</sub>

Servono per inserire caratteri al di sopra o al di sotto della linea di scrittura:

5<sup>3</sup>=125; x<sub>centro</sub>=1

53=125; xcentro=1

Le tabelle

In HTML è possibile incasellare il testo in righe e colonne, per costruire vere e proprie tabelle.

Top of Form 1

Bottom of Form 1

Prima cella Seconda cella Prima cella della seconda fila Seconda cella della seconda fila <table>...</table>

Qui è racchiusa tutta la struttura di una tabella. In table si possono definire lo spessore del bordo (border="4"), la minima larghezza e altezza, in pixel o in percentuale sulle dimensioni della finestra (width="30%" height="150"), lo spazio tra le celle e tra il bordo della cella e il suo contenuto (cellspacing="10" cellpadding="4").
Inoltre, table accetta bgcolor e background, come body <documento.html>.

<tr>...</tr>

Indica l'inizio e la fine di una riga. Si possono specificare l'allineamento orizzontale (left center o right) e verticale (top middle o bottom) e il colore di sfondo (bgcolor="red"

<td>...</td>

Indica l'inizio e la fine di una cella. Si possono specificare la larghezza (width) e tutti i parametri di <tr>

I link

Uno dei punti di forza del linguaggio HTML è l'ipertestualità, ovvero il poter saltare da una pagina all'altra in maniera non necessariamente sequenziale. Cliccando su certe scritte o su certe immagini si provoca il caricamento di una nuova pagina, che può trovarsi sullo stesso computer o anche dall'altra parte del mondo.

Provate a cliccare <a href="altra.html">qui</a>.

Provate a cliccare qui <altra.html>. La parola qui rappresenta un link, un collegamento a un'altra pagina. Cliccandoci si carica il documento altra.html

<a href>...</a>

Con a href si specifica il nome del documento a cui si vuole saltare cliccando sul testo compreso tra <a> e </a>. Il documento puntato si può trovare nella stessa directory del file di origine, in un'altra directory o anche su un altro computer, su un altro sito Internet:

<a href="https://www.betarelease.com/index.html">Betarelease</a>

Si può anche creare un link a un'altra sezione della stessa pagina. Si definisce la sezione a cui si vuole saltare inserendovi all'inizio <a name="ilnome"> e poi si linka da un altro punto con <a href="#ilnome">altra sezione</a>.
Il link a body del paragrafo successivo porta alle sezione definita body della pagina documento.html ed è definito così:

Il colore dei link può essere definito in body <documento.html> con link vlink (link già visitati), alink (colore del link mentre ci si clicca sopra:

In <a href> si può anche specificare il target, ovvero il nome della finestra in cui si vuol fare apparire il nuovo documento.

<a href="altra.html" target="pippo">altra finestra</a>

altra finestra <altra.html> Cliccando si aprirà una nuova finestra di nome pippo contenente il file altra.html. Si possono dare i nomi che si vogliono alle nuove finestre, a parte alcuni che corrispondono a operazioni particolari: _blank _self _parent _top (rispettivamente finestra nuova, finestra in cui ci si trova ora, finestra di origine, finestra più in alto).

Le immagini

Nelle pagine HTML, oltre al testo, si possono inserire anche immagini in formato GIF e JPEG utilizzando il comando img

Questa linea dirà al browser di caricare il file indicato con src e di visualizzarlo.

A img si possono aggiungere vari parametri:

width e height indicano la larghezza e l'altezza dell'immagine. E' sempre meglio specificarli per velocizzare la visuoalizzazione della pagina. Il browser disporrà il testo tenendo conto delle dimensioni dell'immagine anche se questa non è stata ancora caricata.
Si possono anche specificare valori diversi: l'immagine verrà automaticamente ridimensionata.

hspace e vspace indicano lo spazio orizzontale e verticale da lasciare intorno all'immagine.

border mette intorno all'immagine una cornice.

align decide l'allineamento dell'immagine:

leftAllinea l'immagine a sinistrarightAllinea l'immagine a destratopAllinea l'immagine con la parte più alta della lineamiddleAllinea il centro dell'immagine con la base del testoabsmiddleAllinea il centro dell'immagine con il centro del testobottomAllinea il fondo dell'immagine con la linea di base del testoabsbottomAllinea il fondo dell'immagine con la base del testoalt specifica un testo che apparirà al posto dell'immagine se questa non viene caricata, oppure una didascalia che viene mostrata quando si sposta il mouse sull'immagine.

Anche una immagine può costituire un <link.html>:

<a href="link.html"><img src="figura1.jpg" align="absmiddle"></a> l'immagine a sinistra è un link

Si può utilizzare una immagine anche come sfondo della pagina aggiungendo il paramentro background="nomeimmagine" al comando body <documento.html>.

I suoni

E' possibile rendere più attraenti le pagine HTML inserendo musica e suoni. Il comando embed permette di inserire un file MIDI o AU (quelli più standard):

Aggiungendo autostart="true" il suono verrà eseguito automaticamente.
Con loop="n" si potrà ripetere n volte il suono.
hidden="true" permetterà di nascondere i pulsanti di controllo (ma in questo caso bisogna ricordarsi di attivare autostart o il suono non potrà essere ascoltato). Infine, con volume="n%" si potrà regolare il volume di inizio.

Esiste inoltre un metodo per mettere un suono di sottofondo che funziona per ora solo con Internet Explorer:

<bgsound="suono.mid">

I frame

L'uso dei frame permette di dividere l'area della finestra del browser in più spazi, gestibili autonomamente. Questo stesso manuale è strutturato con due frame: il menù a sinistra e la pagina a destra.

La sintassi dei comandi dei frame ha molte opzioni, ma qui ci limiteremo a considerare quelle principali.

</frameset>

Queste righe dicono al browser di dividere la pagina a metà in due colonne (cols), in ognuna delle quali verrà visualizzato un diverso file.
I comandi relativi ai frame vanno inseriti prima di <body>. In più, l'intero <body>...</body> va compreso tra <noframes>...</noframes>. In questo modo, i browser che non sono in grado di visualizzare i frame potranno caricare una pagina sostitutiva, inserita normalmente in body.
Analogamente, questi comandi divideranno la pagina in tre righe:

</frameset>

Le dimensioni di un frame possono essere specificate sia in percentuale che in pixel, o anche lasciate al giudizio del browser a seconda dello spazio disponibile:

</frameset>

In questo esempio, la prima colonna è lunga 150 pixel, mentre la seconda occupa tutto lo spazio rimasto.

E' possibile creare più frame annidati in colonne e righe:

</frameset>

In questo caso, il primo frame sarà una colonna a sinistra larga 100 pixel, mentre il restante spazio a destra verrà diviso in tre righe, la prima di 75 pixel e la terza di 60; a quella centrale verrà assegnato lo spazio lasciato libero dalle altre due.
Il risultato è simulato qui sotto usando una tabella:

sinistroaltocentrobassoE' possibile collegare un frame a un altro con dei <link.html>. Per esempio, cliccando su una scritta in un frame si aprirà il documento correlato in un altro frame; è quello che succede in queste pagine quando si clicca su una delle voci del menù a sinistra.
Per ottenere qysto effetto, bisogna aggiungere target al comando del link:

<a href="pagina.html" target="right">salta</a>

Quando si clicca su salta, viene caricato il file pagina.html nel frame denominato right.
Se non si specifica il target, il file linkato verrà caricato all'interno dello stesso frame.
Per evitare di specificare ogni volta il frame target, è possibile indicarlo una volta per tutte all'inizio del documento con il comando <base target="nomeframe">

Privacy

Articolo informazione

Hits: 1553
Apprezzato:

Commentare questo articolo:

Non sei registrato
Devi essere registrato per commentare
ISCRIVITI

E 'stato utile?

Copiare il codice
nella pagina web del tuo sito.