Realizzare un documento HTML

Per realizzare un documento HTML non c'è bisogno di un particolare programma, un semplice elaboratore testi, come il Blocco Note di Windows o il SimpleText del Mac, è più che sufficiente allo scopo.

Esiste tuttavia un altro sistema molto meno faticoso che ti consente di realizzare documenti HTML di buona fattura, i programmi detti HTML editor, tuttavia prima di imparare ad utilizzarli si dovrebbe conoscere il metodo originale, solo così si è in grado di impiegare al meglio questi software superandone i limiti intrinseci grazie alla conoscenza dell'HTML.

Un documento HTML è un file di testo composto da una serie di elementi, e relativi attributi. Attraverso queste istruzioni è possibile presentare testo, immagini, animazioni, suoni, così da creare un prodotto multimediale.

Il linguaggio HTML opera contrassegnando il testo per mezzo di alcuni elementi che ne identificano l'uso, che prendono il nome di tag attraverso questi elementi e relativi attributi è possibile formattare un testo e trasformarlo in ipertesto.

Ogni tag e racchiuso tra i segni di minore "<" e maggiore ">", per cui la sua sintassi è: <nome_del_tag> dove con nome_del_tag si intende il nome del comando che si impartisce.

Ad esempio si può adoperare la coppia di contrassegni <ADDRESS> e </ADDRESS> per marcare informazioni relative ad un indirizzo, la coppia di tag <CITE> e </CITE> viene impiegata per circoscrivere una definizione e cosi via.

Un'importante annotazione da fare è che generalmente i tag lavorano in coppia ma esistono tag che non hanno bisogno di chiusura, perché la loro funziona non è quella di marcare un elemento, ma di fornire informazioni di diverso tipo.

 I tag possono anche essere racchiusi l'uno dentro l'altro, in questo caso si dice che sono annidati.

 All'interno dei tag possiamo inserire degli attributi che forniscono ulteriori precisazioni sul risultato che si vuole ottenere.

 I tag HTML possono essere digitati indifferentemente in caratteri maiuscoli e minuscoli senza alcuna conseguenza.

 Alcuni tag, <HTML><HEAD><TITLE><BODY>, e i corrispondenti tag di chiusura, devono sempre essere presenti in un documento HTML.

Il tag <HTML> indica l'inizio del documento e il corrispondente tag di chiusura </HTML> ne indica la fine. Questo tag comunica al browser che il file prelevato è stato redatto secondo quel linguaggio di contrassegno che è l'HTML.

L'omissione di questa coppia di tag non comporta in genere alcun problema, tuttavia alcuni browser potrebbero alterarsi rifiutandosi di caricare la pagina o caricarla in modo... creativo.

La coppia di tag <HEAD> e </HEAD> contrassegnano rispettivamente l'inizio e la fine dell'intestazione di un documento HTML. In questa sezione del documento possono essere annidati altri tag che hanno compiti particolari.

La coppia di tag <TITLE> e </TITLE> delimitano il titolo. Tutto quanto digitato tra questi due tag appare nella barra del titolo (è la barra che si trova più in alto nella finestra del browser). Attenzione All'interno di questa coppia di tag non è possibile annidare nessun altro tag.

La coppia di tag <BODY> e </BODY> racchiude tutti gli altri tag che verranno utilizzati per realzzare il documento HTML.


Il tag <BODY> supporta 6 attributi: 

  1. bgcolor="valore" Assegnando un valore a questo attributo è possibile definire un colore di sfondo per la pagina che si intende creare. Esistono 2 modi per impostare questo valore:
  • Si inserisce il nome del colore in inglese, i colori disponibili sono sedici: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow. Sebbene questo sistema sia più intuitivo comporta un paio di difetti. Non tutti i browser sono in grado di interpretare questi valori e poi così facendo si ha un controllo limitato sulle sfumature riproducibili come colore di sfondo.
  • Si scrive una sequenza di questo tipo #RRGGBB dove:
  • al posto di RR si inseriscono due cifre esadecimali che definiscono la gradazione di rosso;
  • al posto di GG si inseriscono due cifre esadecimali che definisco la gradazione di verde;
  • al posto di BB si inseriscono due cifre esadecimali che definisco la gradazione di blu. Miscelando queste 3 gradazioni si ottiene il colore di sfondo.

Le cifre esadecimali sono: 0123456789ABCDEF.

Scrivendo il seguente tag:

<BODY bgcolor="#000000"> si ottiene uno sfondo nero. Tutti i colori sono stati impostati al minimo valore possibile.

Se invece si scrive:

<BODY bgcolor="#FFFFFF"> si ottiene uno sfondo bianco. Tutti i colori sono stati impostati al massimo valore possibile.

Nel mezzo c'è un'ampia gamma di colori. Potrebbe sembrare un sistema complesso in realtà non lo è affatto se si utilizza un'apposita la tavola dei colori (presente anche in Windows). 

  1. background="percorso/nome_immagine" Questo attributo è utilizzato per inserire un'immagine come sfondo della pagina che si intende creare. Non è affatto necessario che l'immagine che si vuole utilizzare riempia tutto lo spazio, il browser si preoccuperà di ripeterla tante volte quanto si renderà necessario per tappezzare tutto lo sfondo. Tra virgolette va inserito il percorso che consente al browser di stabilire dove si trova l'immagine per poterla usare come sfondo. Nel caso in cui questa immagine sia messa nella stessa directory (cartella) in cui si trova il documento HTML che si sta sviluppando sarà sufficiente inserire solo il nome dell'immagine e la sua estensione (che presumibilmente sarà GIF o JPG).
  1. text="valore" Dal momento che è possibile modificare il colore di sfondo e lecito, ed in diversi casi necessario intervenire sul colore che il testo può assumere così da impostare un contrasto tra sfondo e caratteri che non affatichi nella lettura. Anche in questo caso i sistemi per impostare questo elemento sono gli stessi menzionati per l'attributo bgcolor.
  1. link="valore" I link, in italiano collegamenti ipertestuali, sono quelle parole (ma possono essere anche immagini) che permettono di passare da una pagina ad un'altra, da un sito ad un altro ecc. In genere i link hanno il colore blu ma questo colore può essere modificato con i due metodi visti per l'attributo bgcolor.
  1. alink="valore" quando si attiva un link (cioè quando si pone il puntatore del mouse sul link) e si tiene premuto il tasto destro il link cambia colore, in genere assume il colore rosso. Anche su questo colore può essere modificato con i due metodi visti per l'attributo bgcolor.
  1. vlink="valore" Dopo aver usato un link questo assume un colore diverso per ricordare che è già stato usato. In genere i link visitati assumono colore viola. Sembra superfluo aggiungere che questo colore è modificabile con i due metodi visti per l'attributo bgcolor.

LA FORMATTAZIONE DEL TESTO

All'interno di un documento HTML la grandezza dei titoli viene definita attraverso sei tag H (che sta per HEADER che in inglese significa titolo).

 <H1>Titolo di primo livello </H1>

 <H2>Titolo di secondo livello </H2>

 <H3>Titolo di terzo livello </H3>

 <H4>Titolo di quarto livello </H4>

 <H5>Titolo di quinto livello </H5>

 <H6>Titolo di sesto livello </H6>

 Facendo leggere le istruzioni da un browser si ottiene questo risultato:

 Titolo di primo livello

 Titolo di secondo livello

 Titolo di terzo livello

 Titolo di quarto livello

 Titolo di quinto livello

 Titolo di sesto livello


All'interno di un documento HTML i paragrafi vengono formattati tramite il tag <P> (la P sta per paragraph; in italiano, paragrafo) il cui corrispondente tag di chiusura ha la solita forma </P>.

Questo tag di chiusura è opzionale per cui può essere omesso. Il browser capisce che un paragrafo è terminato quando incontrerà un nuovo tag di apertura (<P>).

Il tag <P> viene impiegato per segnare l'inizio di un nuovo paragrafo e produce una spaziatura di riga maggiore di quella normalmente adottata proprio per separare anche visivamente ogni paragrafo da quello che lo precede.

Il tag <P> supporta l'attributo align=allineamento dove al posto di allineamento si può inserire uno dei tre paramentri consentiti e cioè:

  • right per un allineamento del paragrafo a destra;
  • center per un allineamento del paragrafo al centro;
  • left per un allineamento del paragrafo a sinistra; questa è la soluzione normalmente adottata, per cui tale allineamento viene adottato senza che sia espresso esplicitamente.

Supponiamo ora di voler introdurre un'interruzione di riga, per far ciò ricorriamo al tag <BR> (che è l'abbreviazione di break che in in italiano significa interruzione). Sinora tutti i tag incontrati lavoravano in coppia il tag <BR> è invece un tag solitario, non presenta dunque alcun tag di chiusura.

 Se si decide di intervenire sul modo in cui viene visualizzato il testo (tipo, dimensione e colore) si deve impiegare la coppia di tag <FONT> e </FONT>. Il tag di apertura deve contenere almeno uno dei tre attributi richiesti per produrre l'effetto o gli effetti desiderati. Così, se si intende modificare il tipo di carattere (ad esempio, comic sans ms) si deve scrivere:

 <FONT face="comic sans ms">testo di tipo comic sans</FONT>.

Se si vuole riprodurre il testo, o parte di esso, in un colore diverso si deve scrivere:

 <FONT color="valore">testo colorato</FONT>.

Se invece si vuole modificare la dimensione del testo si deve scrivere:

<FONT size="valore">testo di dimensione diversa</FONT>.

Il valore richiesto può essere un numero da 1 a 7 compresi. In alternativa si può ricorrere ai numeri relativi inserendo numeri da -6 a +6 compresi. Il valore predefinito per il font è 3.


ALTRI TAG DI FORMATTAZIONE


Se si vuole costringere un'insieme di parole su una stessa riga anche quando il browser non ne vuole sapere e si ostina a mandare il testo daccapo prima del dovuto, bisogna istruire esplicitamente il browser racchiudendo tutte le parole e/o i numeri che si intende mantenere sulla medesima riga nella coppia di tag <NOBR> e </NOBR>(abbreviazione di nobreak).

Con la coppia di tag <DIV> e </DIV> si può creare un blocco (contenente testo, immagini e qualunque altra serie di elementi che è possibile implementare) di cui è possibile gestire l'allineamento. Difatti il tag <DIV> supporta l'attributo align="allineamento"il cui funzionamento e spiegato più su a proposito del tag <P>.

Se si vuole sottolineare o barrare alcune parole dovrai ricorrere alle seguenti coppie di tag <U>testo sottolineato</U>. Questo tag va usato con parsimonia poiché anche i link (collegamenti ad altre risorse), sono generalmente sottolineati, per cui un uso frequente di questo tag potrebbe generare qualche confusione in chi sta visitando la tua pagina.

Per barrare un testo si deve usare l'apposita coppia di tag nel modo consueto:

<STRIKE>testo barrato</STRIKE>.

Due coppie di tag come <SUB> e </SUB> e poi, <SUP> e </SUP> si rivelano utili per far scrivere all'apice o al pedice.

Per spezzare un blocco di testo da una immagine o da un altro blocco di testo spesso si ricorre a righe orizzontali che è possibile inserire attraverso il tag <HR>. La lunghezza e la larghezza di questa linea sono rispettivamente definite attraverso i due attributi width="valore" e height="pixel". Al posto del termine valore si inserisce la larghezza in pixel o in percentuale della larghezza del documento; mentre per regolare lo spessore della linea orizzontale si ricorre all'attributo height="..." il cui valore può essere specificato solo ed esclusivamente in pixel.

Dopo aver creato la pagina desiderata questa deve essere salvata con l'estensione .htm o .html, sull'hard disk o su un altro supporto digitale locale, in attesa di essere inserita nel web, dandole un nome con caratteri minuscoli e unitario, vale a dire senza spazi o interruzioni, perché ne impedirebbero il funzionamento in internet.


Ultime modifiche: martedì, 3 marzo 2020, 11:04