Html

Per realizzare un sito web, possiamo usare o un editor visuale, tipo Frontpage o Macromedia dreamweaver. Con questi software si opera in modo grafico e intuitivo, manipolando oggetti e pulsanti tramite il mouse e quindi non si deve scrivere a mano il codice HTML riga per riga e tag per tag. Oppure affidarci completamente al codice html, tra l'altro molto più sicuro e pulito.

L'html è il linguaggio con cui le pagine web vengono scritte e progettate. Sostanzialmente l'html possiamo definirlo un linguaggio di visualizzazione più' che di progettazione in quanto esso può essere mostrato in modo diverso a seconda dei diversi strumenti usati alla finalizzazione del nostro progetto. Cercherò di spiegarvi in modo essenziale e più comprensibile possibile le caratteristiche e i concetti base di questo linguaggio. Per riuscire a capire cosa si intende per file html basti pensare ad un file di testo di tipo TXT scritto con un comune editor di testo come il blocco note di win. Per funzionare come pagina web, il file di testo deve essere rinominato: HTML o .HTM e deve contenere, tutti i codici necessari per far sì che il browser lo riconosca e lo esegua correttamente. Questi codici sono chiamati Tag.

Un tag è un comando racchiuso tra i segni < (minore) e > (maggiore), chiamati anche parentesi angolari. Quando il browser incontra questi simboli capisce che si tratta d'istruzione da eseguire e non di testo da visualizzare sullo schermo. I Tag richiedono un codice di comando d'apertura ed uno di chiusura.

es) <TAG >GraficNika</TAG >

Grazie ai Tag possiamo personalizzare la nostra pagina, inserendo all'interno di essi dei valori, quali il testo, renderlo grassetto, sottolineato etcc...oppure inserire un immagine gif o jpg. Per fare questo la riga di comando sarà impostata in questo modo:

Nel caso si voglia inserire del testo:

Testo oppure: Testo

ma non: Testo

Nel caso si voglia inserire un immagine: <IMG SRC="immagine.jpg">

I tag piu' importanti per realizzare una pagina web sono:

I tag <HTML> e </HTML> all'inizio ed alla fine del documento; essi indicano al browser che tutto ciò che è compreso nel mezzo è una pagina web.

I tag <HEAD> e </HEAD> racchiudono l'intestazione del documento dove si possono inserire informazioni che non vengono visualizzate nella pagina, ma che ne descrivono caratteristiche come titolo, autore e parole-chiave.

I tag <BODY> e </BODY> racchiudono il corpo del documento dove si inserisce il contenuto da visualizzare nella pagina (testo, collegamenti, immagini e così via).

Tali tag devono seguire il seguente schema:

<HEAD> </HEAD>
<BODY> </BODY>
</HTML>

Poi ci sono i Tag di intestazione che sono :

<TITLE> con cui si definisce il titolo della pagina e <META> per inserire dei dati che serviranno al browser e ai motori di ricerca per gestirne i contenuti

es) per il titolo:

<HEAD>
<TITLE>Titolo della pagina</TITLE>
</HEAD>

es) per i dati aggiuntivi:

<META ATTRIBUTO1="VALORE" ATTRIBUTO2="VALORE">

dove 1 sta ad indicare il tipo di informazione, mentre 2 specifica il contenuto.
Per dare corpo al documento ci si serve del comando <BODY> all'interno del Tag verranno specificate alcune caratteristiche della pagina come lo sfondo, il colore del testo e dei links (collegamenti).

es) per impostare il colore di sfondo della pagina si dovrà' eseguire il seguente comando:

<BODY BGCOLOR="#000000"> specificato in esadecimale oppure potete scrivere direttamente il nome del colore, in questo caso "black".
Mentre se si vuole caratterizzare la propria pagina con un immagine jgg si procederà in questo modo:

<BODY BACKGROUND=">percorso e nome del file"> questo comando vale nel caso lo sfondo non si trovi nella stessa cartella web del sito, allora dovrete specificare il percorso del file.
Al contrario se lo sfondo in questione si trova nella stessa cartella sarà sufficiente specificare il nome del file ossia:

<BODY BACKGROUND="sfondo.jpg">

Poi attraverso i Tag e' possibile specificare i colori dei collegamenti ipertestuali in questo modo:

<BODY LINK="colore1" ALINK="colore2" VLINK="colore3">
dove Link si usa per i collegamenti attivi con il relativo colore.

ALINK per i collegamenti attivi al clik del mouse.
Mentre VLINK per i collegamenti gia visitati.

Come abbiamo detto prima all'interno dei Tag e' possibile specificare anche le caratteristiche che vogliamo dare al testo della nostra pagina. procediamo in questo modo:

 testo dove indica il colore del testo.

 testo e in fine il valore del testo ossia la grandezza del carattere.

Per allineare i paragrafi invece procederemo con i seguenti comandi:

paragrafo da allineare dove per allineare il paragrafo a sinistra scriveremo il comando Left, per allinearlo a destra scriveremo il comando RIGHT, CENTER per centrare il testo.

Per specificare gli attributi di un immagine della nostra pagina web all'interno dei tag andremo avanti cosi':

<IMG SRC="image.jpg" WIDTH="100" HEIGHT="50">

dove e' specificata l'altezza e la larghezza dell'immagine.

Mentre se si tratta di un bottone scriveremo cosi':

<IMG SRG="image.jpg" ALIGN="bottom">

Uno strumento essenziale per la struttura della nostra pagina web e' sicuramente la tabella. Per inserire una tabella di riferimento all'interno della nostra pagina web procederemo in questo modo:

<table border="0" width="80%">
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>

Dove tutti gli attributi racchiusi all'interno del Tag specificano la larghezza e l'altezza della tabella. Il tutto va inserito all'interno del TAG <BODY>.

Bene! la miniguida sul linguaggio html termina qui, spero di esservi stata utile e sopratutto spero di aver reso la mini guida più comprensibile possibile.Certo sull'html ci sarebbero tantissime altre cose da dire, ma il mio sito non ha lo scopo di insegnare tutto cio che lo riguarda, ma solo di sottolineare le fasi più salienti di questo linguaggio.Sono certa che in rete troverete guide più complete, che vi aiuteranno nella costruzione del vostro sito web.