L'HTML e i CSS - Istruzioni o elementi HTML - Cominciamo a utilizzare il CSS

  Acronimo di Hyper Text Markup Language;

  Come un documento ipermediale è costitutuito da: contenuto, struttura e presentazione;

Un documento html non è nient'altro che un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, ecc..

L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: World Wide Web Consortium) ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); e - da un certo punto in poi - l'HTML si è evoluto in XHTML (si tratta dell'HTML riformulato come linguaggio XML - ne sono già state rilasciate due versioni).

Anche se abbiamo detto che l'HTML si è evoluto in XHTML ci sono delle ottime ragioni per incominciare a studiare l'HTML e non l'XHTML:

  di fatto l'HTML verrà utilizzato ancora per diversi anni come linguaggio principe delle pagine web.

  alcuni concetti dell'XHTML richiedono già una certa comprensione dei problemi che si acquisisce solo con l'esperienza. L'HTML è più immediato e consente di incominciare subito a produrre documenti web .

  chi conosce l'XHTML non può non conoscere l'HTML. La conoscenza dell'HTML è infatti il prerequisito essenziale di ogni webmaster. Comunque le differenze tra i due linguaggi non sono così marcate e passare dall'uno all'altro non dovrebbe richiedere molta fatica.

Istruzioni o elementi HTML

Le istruzioni in HTML vengono espresse racchiuse in parentesi triangolari (< e >), che prendono il nome di tag o marcatori. La maggior parte istruzione possiede una coppia di tag, che serve per delimitare la parte di documento su cui il comando ha effetto. Esempio:

<title> inizio istruzione

National Geografic parte documento su cui ha effetto

</title> fine istruzione

L'HTML è un linguaggio formato, ovvero un linguaggio che serve a dichiarare la struttura che un documento ipermediale deve assumere. Infatti, è anche considerato un linguaggio dichiarativo, perché definisce cosa l'istruzione deve o non deve fare, ma non è un linguaggio case-sensitive (è indifferente scrivere il codice in maiuscolo o in minuscolo) ne un linguaggio di programmazione (come può essere C o C++). Ciò significa che l'HTML non ha meccanismi che consentono di prendere delle decisioni ("in questa situazione fai questo, in quest'altra fai quest'altro"), e non è in grado di compiere delle iterazioni ("ripeti questa cosa, finché non succede questo"), né ha altri costrutti propri della programmazione.

Il linguaggio HTML, pur essendo dotato di una sua sintassi, non presuppone la logica ferrea e inappuntabile dei linguaggi di programmazione: se vi dimenticate di chiudere un tag, non verranno prodotti dei messaggi di errore; se non rispettate la sintassi probabilmente non otterrete la visualizzazione della pagina che desiderate, ma nient'altro. A volte vi troverete persino a dover adottare dei "trucchetti", non proprio da manuale, pur di visualizzare la pagina correttamente con ogni browser.

È consigliabile utilizzare l'indentazione (allineare tutto il codice con i tab), e grazie ad essa il codice HTML risulta più leggibile (vedi esempio: elementi di base di un documento HTML).

Che cosa occorre per visualizzare documenti HTML?

Per visualizzare un documento in HTML basta aver installato sul proprio pc un browser, che interpreta e visualizza gli elementi del HTML. La visualizzazione di un file html da parte del browser prende il nome di rendering della pagina. Motore di rendering è dunque quella sezione del browser che si occupa di mostrare sul video la pagina.

Che cosa occorre per scrivere documenti HTML?

Per scrivere un documento HTML basta aprire un file di Blocco Note o qualunque programma di word processing. I file codificati in HTML hanno estensione .html o .htm (per il DOS). Tali documenti sono quindi dei normali file ASCII ai quali vengono aggiunte le istruzioni HTML per la struttura e per la presentazione di un documento. Per scrivere un documento HTML si possono utilizzare anche dei software come ISt Page (anche se si legge First Page).

Elementi di base di un documento HTML

Le istruzioni di base indispensabili per la visualizzazione di un browser di semplici documenti HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

</body>

</html>

<html> è un elemento contenitore, cioè che può contiene altri elementi al suo interno.

Altri elementi fondamentali dell'HTML sono: HEAD e BODY (che comunque possono anche essere omessi).

  HEAD, contiene le informazioni dichiarative, o informative o di impostazione globale del documento (es. <title>, fogli di stile).

  BODY, contiene il documento vero e proprio, ovvero informazioni testuali, immagini e altri oggetti multimediali, visualizzabili con un browser (es. <p>).

Commenti

I commenti devono essere scritti come quanto riportato in seguito: <!-commento -->.

Contenuto, struttura e presentazione di un documento

L'HTML è un linguaggio per la descrizione della struttura di un documento, composto da elementi. Più formalmente, possiamo considerare un documento HTML come un contenitore di elementi, dove un elemento può essere:

  Un elemento semplice (es. <br>);

  Un contenitore di elementi (es. <table>);

  Un link (es. <href>);

  Un oggetto multimediale (es. <object>).

Ogni elemento ha degli attributi o proprietà e da un eventuale contenuto. La presentazione degli elementi, cioè una rappresentazione grafica, viene fatta con un altro linguaggio, CSS (Cascading Style Sheets).

I CSS sono linguaggi di formato di tipo dichiarativo, che serve per definire lo stile di presentazione di un documento HTML.

Cominciamo a utilizzare il CSS

Premettiamo che la presentazione degli elementi viene genericamente chiamata stile e viene implementata da una delle più importanti proprietà degli elementi: la proprietà STYLE.

I comandi CSS possono essere inseriti:

  Fogli di stile in linea quando è contenuto nel BODY;

  Fogli di stile incorporati quando è contenuto nella HEAD e BODY;

  Fogli di stile esterni quando non è contenuto in qualsiasi elemento fondamentale, come HEAD e BODY.

Fogli di stile in linea

Sono contenuti nel BODY con la seguente scrittura:

<P STYLE="COLOR: RGB(0,0,255); FONT-SIZE: 24pt"> testo </P>

Un altra struttura particolare è il titolo, identificato da una lettera H e un numero progressivo, da 1 a 6 (<H1>..</H1>). Aumentando il numero progressivo il titolo diminuisce di grandezza.

Inserendo in quest'ultimo un foglio di stile possiamo evidenziare il testo, cambiare colore del testo, ecc., come nell'esempio:

<H1 STYLE = " COLOR:RGB(0,0,255); BACKGROUND: magenta"> testo </H1>

Le tabelle

Una tabella viene costruita come nell'esempio:

<html>

Sono contenitori, come <html>.

<head>

</head>

<body>

<table>

<tr>

<td> testo </td>

......

</tr>

<tr>

<td> testo </td>

......

</tr>

</table>

</body>

</html>

È possibile inserire un codice per la visualizzazione grafica della tabella, quest'ultima deve essere inserita nella <head>.

<head>

<STYLE TYPE = "TEXT/CSS">

table.risultati

</STYLE>

</head>

Bisogna in seguito richiamare nella <table CLASS="risultati">, questo collega il foglio di stile con la tabella.

Si può inserire il nome della tabella, inserendo all'interno della <table> il codice:

<table CLASS= "risultati">

<captin style = "align:top"> nome tabella </captin>

</table>

Come definire un area

Per definire un'area si utilizzano gli elementi DIV o SPAN, infatti, il testo inserito in uno di questi elementi subisce lo stile, senza intaccare quello della pagina. Esempio codice:

<DIV STYLE= "font-size: 18pt; font-family: arial; color: red"> testo </DIV>

Gli elenchi

Gli elenchi possono essere ordinate o non ordinate:

  Gli elenchi non ordinati sono utilizzati per rappresentare un insieme di voci, legate in qualche modo tra di loro, ma che non richiedono di seguire un ordine specifico. Questo è caratterizzato dall'elemento contenitore UL, che può contenere più elementi semplici LI. Esempio di codice:

<html>

<head>

</head>

<body>

<UL>

<LI> Puglia

......

</UL>

</body>

</html>

  Gli elenchi ordinati sono utilizzati per rappresentare un insieme di voci, legate tra di loro da priorità o azioni da seguire in un ordine specifico. L'elemento contenitore è OL, che contiene elementi più semplici come LI. Esempio codice:

<html>

<head>

<STYLE TYPE = "TEXT/CSS">

UL

OL

</STYLE>

</head>

<body>

<UL>

<LI> Italia

<OL>

<LI> Lombardia

<LI> Lazio

</OL>

<LI>.......

</UL>

</body>

</html>

Link

I collegamenti ipertestuali o link sono riferimenti ad altri documenti o ad altri elementi HTML. Con i tag <A> e </A> si può realizzare un link. Possiamo avere due tipi di link: link esterni e link interni.

I link esterni sono collegamenti ad altri documenti HTML o oggetti multimediali; esempio codice:

<LI><A HREF = "https://www.google.it> testo </A>

<LI><A HREF = "News.html"> testo </A>

Se il file da richiamare è un documento che si trova in un'altra cartella occorre specificare il path-name, se devo aprire una pagina internet devo specificare l'URL.

I link interni è un collegamento ad una determinata posizione dello stesso documento HTML. Il codice di un link interno è uguale a quello dei link esterni.

Non tutti però sanno che i link testuali hanno diversi stati:

Immagini

Per inserire delle immagini nella pagina HTML basta inserire il seguente codice nel Body:

<IMG SRC = "URL" id="69" vspace="20>

Vspace= altezza immagine Hspace= larghezza immagine

Specificare anche l'estensione dell'immagine.

È possibile allineare l'immagine: a destra, a sinistra e al centro.

TABELLA BASILARE HTML

I frame

In un documento HTML è possibile dividere la finestra del browser in più parti dette frame. Il contenuto di ogni frame può essere modificato in modo indipendente, come si può bloccare le aree dello schermo. Il codice di un frame è:

<html>

<head>

</head>

<frameset rows = "30%, 70%">

<frame name = "nome parte" SRC = "nomefile.html">

<frameset cols = "30%, 70%">

<frame name = "nome parte" SRC = "nomefile.html">

<frame name = "nome parte" SRC = "nomefile.html">

</frameset>

</frameset>

</html>

Ad ogni frame bisogna dare un nome, infatti i link di questo file hanno un nuovo elemento chiamato TARGET, che indica il nome del frame in cui va mostrato il documento destinazione. Conosciamo solo il BASE TARGET all'interno della <head>, come nel codice seguente:

<html>

<head>

<base target = "nome parte">

</head>

</html>

Si può definire se visualizzare le barre di scorrimento orizzontali e verticali, infatti, imputando SCROLLING=YES saranno sempre visualizzate, al contrario con NO non verranno mai utilizzate. Se non specifichiamo il suo valore (yes or no) l'HTML riconosce un valore di default, cioè quando serve verrà visualizzato, altrimenti no.

Con l'attributo NORESIZE si rende impossibile modificare la dimensione del frame.

Questi ultimi attributi devono essere specificati nel <frame name...>

I bordi possono essere nascosti, infatti, basta assegnare all'atributo FRAMEBORDER  il valore yes o no; al contrario con l'attributo BORDERCOLOR posso modificare il colore del bordo del frame, infatti, basta uguagliarlo al nome in inglese di un colore contenuto tra virgolette. Con l'attributo BORDER posso modificare la dimensione del bordo del frame, basta uguagliarlo ad un valore numerico.

Questi ultimi attributi devono essere specificati nel <frame set...>