Guida HTML

Prefazione:

Html è il linguaggio per realizzare pagine web più semplice e facile da apprendere. Per realizzare documenti html non è necessario utilizzare programmi particolare, basta infatti utilizzare il semplice blocco notes o un editor di testo qualsiasi ed alla fine cambiare l’estensione del file in “.htm” o “.html” che è totalmente indifferente.

Come iniziare:

Innanzitutto prima di iniziare a programmare in html bisogna sapere come indicare un comando in un foglio html. Infatti ogni comando deve essere racchiuso tra < e > ovvero i simboli matematici minore e maggiore. Ogni pagina html inizia sempre con il tag <html> e finisce con il tag </html>. E’ facile quindi dedurre che il simbolo / sta a indicare la chiusura del suddetto tag. Una nota molto importante da sapere è quella che tra i simboli di apertura e chiusura del tag non ci devono essere spazi, in tal caso il tag non è valido e cosa ancora più importante ricordatevi sempre di chiudere un tag una volta aperto poiché potrebbero riscontrarsi problemi nella visualizzazione della pagina, come nel caso delle tabelle.

I primi comandi:

Per creare una pagina html completa è chiaro che non basta usare il comando html, ma altresì bisogna utilizzare molti comandi in un'unica pagina. Qui sotto elencati troverete alcuni dei principali tag html per cominciare a creare le prime pagine html.

Comando

Descrizione

<hr>

<br>

<b></b>

Indica l’apertura e la chiusura della pagina html

È l’intestazione della pagina che può contenere altri tag

All’interno va inserito il titolo che viene visualizzato nella barra superiore del browser

All’interno si inseriscono altri tag per definire ad esempio le colorazioni dei link, il formato e il font

E’ il corpo della pagina

Serve per aprire una tabella e chiuderla ma servono altri tag che vedremo più avanti

Crea una linea divisoria

Manda il testo a capo

Testo in grassetto

Serve per definire il tipo di font ma necessita di altri tag

Più da vicino:

Il tag head comprende al suo interno il tag title ed alcuni meta tags che vi saranno di aiuto per l’inserimento nei motori di ricerca. Vediamo allora quali sono questi meta tags:

Quest’ultimo è molto importante se il vostro sito presenta anche scripts asp o java, oppure è in continuo aggiornamento. Infatti questo meta tags fa si che la pagina html non venga inserita in cache e quindi quando il vostro utente entrerà nel sito vedrà gli aggiornamenti senza dover sempre aggiornare la pagina, anche se il caricamento della pagina sarà un po’ più lento.

Questo tag permette di far visualizzare il titolo della vostra pagina web nella barra superiore del browser e va inserito in questo modo nella pagina html.

<Title>

Nome – slogan o piccola descrizione

</Title>

Questo tag, molto importante, permette di personalizzare un po’ l’interfaccia grafica della vostra pagina scegliendo i colori delle scritte, dei link, del link quando il puntatore del muose è sopra e altre piccole cose. Vediamo un esempio di piccola pagina web…

<Html>

<head>

<title>AZ Informatica</title>

<style>

A:hover {COLOR: #000000; TEXT-DECORATION: underline}

A:link {COLOR: ##33D402; TEXT-DECORATION: none}

A:visited {COLOR: #FF0000; TEXT-DECORATION: none}

</style>

</head>

<tr>

Ciao a tutti<br>

<a href=”prova.htm”>Clicca!</a>

</font>

</td>

</tr>

</table>

</body>

</html>

Come vedete in questa pagina abbiamo introdotto altri tag all’interno del comando principale, ma adesso analizzeremo solo quelli che riguardano il comando <style>.

Come vedete all’interno del comando abbiamo inserito altri tag;

A:hover {COLOR: #000000; TEXT-DECORATION: underline}

A:link {COLOR: ##33D402; TEXT-DECORATION: none}

A:visited {COLOR: #FF0000; TEXT-DECORATION: none}

A:hover serve per stabilire il colore del link ci siamo sopra con il puntatore del mouse, oltre a stabilire la decorazione del testo, in questo caso sottolineato, ma possiamo anche scegliere di trasformarlo in corsivo o grassetto.

A:link serve per personalizzare il formato del testo del link

A:visited serve per personalizzare il formato del testo di un link già visitato

Se copiato il codice html dell’esempio precedente in una pagina html vedrete gli effetti.

Questo tag da solo a ben poco serve, ma assieme ad altri comandi ci permette di creare tabelle con varie colonne e righe, oltre a scegliere i colori dello sfondo della tabella e molto altro, ma vediamo un esempio di tabella completo:

<tr>

</td>

</tr>

</table>

Analizziamo ora i vari comandi:

width : indica la lunghezza della tabella mentre height l’altezza

align : allineamento orrizzontale (right=destra center=centrato left=sinistra)

valign : allineamento verticale (top=alto bottom=basso middle=centrato)

bgcolor : colore dello sfondo mentre

background=”directory immagine” : imposta un’immagine di sfondo

<tr> : crea una riga

<td> : crea una colonna

<table cellpadding="1"> Imposta lo spazio all'interno di ciascuna cella

<table cellspacing="1"> Imposta la distanza tra le celle

E’ importante sapere che gli allineamenti standard sono a sinistra per quello orizzontale e in alto per quello verticale. Inoltre l’allineamento della tabella si riferisce rispetto alla posizione all’interno della pagina, mentre quello del td rispetto alla tabella. E’ possibile inoltre creare più tabelle all’interno di una tabella, aprendo altre tabelle all’interno del td della tabella principale.

Creare collegamenti ipertestuali:

Ogni sito web è creato da più pagine html che devono essere in qualche modo correlate tra di loro e raggiungibile, ed è per questo che nasce la necessità di creare un comando per i collegamenti ipertestuali, molto semplice da utilizzare.

<a href=”prova.asp”>Testo da visualizzare</a>

<a href=”http://go.to/ethernely>Ethernely</a>

Come potete notare i due collegamenti sono diversi tra di loro, infatti nel primo il collegamento si rifersice ad una pagina che si trova nella stessa posizione di quella che stiamo creando ed è un collegamento relativo. Il secondo è invece un collegamento assoluto poiché possiamo accederci indipendentemente da che pagina stiamo visitando al momento.

I font:

I font sono tag creati per personalizzare l’interfaccia grafica del nostro testo. Qui sotto riportiamo alcuni esempi pratici con il quale potrete capire meglio.

Visita AZ informatica

</font>

come vedete abbiamo utilizzato altri comandi come “face” che sta a indicare il tipo di carattere, “color” che indica il colore, in questo caso bianco e “size” che indica la grandezza del carattere.

Inserire un’immagine:

Possiamo anche inserire immagini con l’apposito tag , ovvero il tag img. Qui sotto troverete il modo per inserirle nella pagina html, la parte tra apici (“) è il percorso su cui si trova l’immagine di cui potete anche impostare la misura dei bordi.