Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò INTRODUZIONE HTML L HTML è un...

Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò

INTRODUZIONE HTML

L’ HTML è un linguaggio (non di programmazione) che consente di realizzare ipertesti.

Un ipertesto è un documento che può essere consultato anche in

modo non sequenziale, ma con collegamenti (link) che

consentono di passare velocemente da una parte all’altra del

documento, o in altri documenti.


Pagine WEB

Le pagine web sono documenti ipertestuali scritti con il linguaggio HTML.

In una pagina web è possibile consultare documenti, immagini,

video e suoni, anche memorizzati in computer (server) differenti,

attraverso gli indirizzi dei vari siti (URL) associati ai link.

La Navigazione è l’attività di consultazione delle pagine web.


Html

HTML (HyperText Markup Language) non è un linguaggio di programmazione, non fornisce istruzioni per interagire con i sistemi operativi dei computer.

L’Html è un insieme di istruzioni (TAG) che consente di applicare,

ad un normale testo ASCII, particolari stili, formattare paragrafi,

titoli, liste, realizzare link.


Browser

L’interpretazione dei codici Html (tag) è riservata ai browser: programmi utilizzati per navigare su internet (Internet Explorer, Netscape, Firefox, Safari, ecc.).

Ciò a volte è causa di problemi legati a come i singoli browser interpretano alcuni TAG.


Html Standard

Esistono TAG che non sono riconosciuti da tutti i browser. Si costruiscono quindi versioni Standard (ufficiali) di Html che includano istruzioni che vengano correttamente interpretate dal maggior numero di browser possibile. Le principali versioni Standard sono:

HTML 2.0 – HTML 3.5 – HTML 4.0 (da realizzare HTML 5.0)


Pagine web

Per scrivere una pagina web con l’Html si può utilizzare un qualunque programma text editor (Block Notes, Word, ecc.) che consenta di salvare il documento in formato ASCII.

Un file scritto con l’Html deve avere estensione .html (o .htm) e non .txt

(e, evidentemente, nemmeno doc).


Struttura di una pagina web

Un documento web (standard) inizia con il TAG <HTML> e finisce (si chiude) con </HTML>

Un TAG è sempre costituito da un termine delimitato dai simboli < e >, senza distinzione tra minuscolo e maiuscolo e, solitamente, presenta un marcatore iniziale (ad esempio <html>) ed un marcatore finale che si esplicita inserendo come prefisso il simbolo / (ad esempio </html>).


Head e Body

Un documento Html ha la seguente struttura:<HTML>

</HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

Intestazione(le istruzioni vanno inserite tra i due tag)

Corpo del documento(le istruzioni vanno inserite tra i due tag)

<!DOCTYPE HTML …>Doctype(Opzionale)


Doctype

Il tag doctype, praticamente ignorato dai vecchi browser, attualmente è sfruttato per ottimizzare la visualizzazione della pagina.

Fornisce informazioni sul documento: il tipo di linguaggio utilizzato (solitamente HTML), se il documento è pubblico, se fa riferimento alle specifiche W3C, …)


Head

L’intestazione contiene solitamente dei tag che non influiscono sulla formattazione della pagina, ma che permettono di assegnare un titolo al documento, di associare risorse esterne come fogli di stile e javascript e consentire ai motori di ricerca (google, altavista, …) di ottenere informazioni generiche sulla pagina stessa.


Il titolo della pagina web

Foglio di Stile associato

Istruzioni Javascript

Reindirizzare verso una nuova pagina

Descrizione del contenuto della pagina (Mot. Ricerca)

Termini associati alla pagina (Mot. Ricerca)

Head

<TITLE>Bla bla bla … </TITLE>

<HEAD>

<LINK REL=stylesheet type=text/css href=miofile.css>

<SCRIPT type=text/javascript src=miofile.js>

<META HTTP-EQUIV=refresh CONTENT=“2;url=index1.html”>

<META NAME=description CONTENT="La descrizione del sito">

<META NAME=keywords CONTENT=“scuola, didattica, lezioni">

</HEAD>


Body

Il body è la sezione principale del documento. È in questo spazio che si

inseriscono tutti gli elementi specifici della pagina: titoli, paragrafi,

liste, immagini, link, tabelle e contenuti multimediali.


Titoli

Un titolo di un paragrafo si realizza con i TAG

<H1>Titolo … </H1> Titolo …






L’eventuale attributo align=center/right/left permette l’allineamento centrato/a destra/a sinistra (predefinito) <h1 align=center> ….


Paragrafi

Un paragrafo si specifica con

<p> … </p>

Il TAG <p> potrebbe essere utilizzato senza chiusura </p>, ma è

sempre consigliabile terminare il paragrafo con tale marcatore, specie

quando tale paragrafo è caratterizzato da una formattazione particolare

(colore del testo, tipo di font, ecc.) che non si vuole ripetere nella frase

successiva.

Il tag <p> fa iniziare un nuovo paragrafo sempre su una nuova riga

(implica cioè un “ritorno a capo”).


<BR> Il testo va “a capo” senza lasciare una riga vuota e senza cambiare gli attributi dell’attuale paragrafo.

<HR width=x size=y align=left|right noshade> Permette di inserire una riga di separazione li lunghezza x (valore percentuale o numero di pixel), spessore y, allineata a sinistra o a destra (e non centrata), noshade, se presente, permette di ottenere una linea senza ombra tridimensionale.

<PRE> … </PRE> Il testo delimitato tra questi tag rimane “preformattato” cioè mantiene la struttura preimpostata durante la scrittura (spazi tra parole, ritorni a capo, ecc.)


<EM> … </EM> Il testo è scritto in modo enfatizzato (corsivo).

<STRONG> … </STRONG> Testo in grassetto e di dimensione relativamente maggiore.

<SUB> … </SUB> Il testo è scritto come pedice

<SUP> … </SUP> Il testo è scritto come apice.


<B> … </B> Testo in grassetto.

<I> … </I> Testo in corsivo.

<U> … </U> Testo sottolineato.

<S> … </S> Testo con una riga sopra.

<SMALL> … </SMALL> Il testo è scritto in una dimensione relativamente minore.

<BIG> … </BIG> Il testo è scritto in una dimensione relativamente maggiore.


Immagini

I browser permettono di visualizzare immagini di diversi formati grafici.

I più comuni sono:

•GIF (Graphics Interchange Format)

•JPEG (Joint Photographic Experts Group)

•PNG (Portable Network Graphics)


Il formato GIF è utilizzato principalmente per immagini che contengono

fino a 256 colori (più che sufficiente per pulsanti, sfondi ed icone) ed

offre una buona compressione del file. Permette di realizzare:

•Effetti di trasparenza

•Immagini interlacciate (visualizzate in modo graduale)

•Animazioni (“gif animate”)

Questo formato non è indicato per foto che, solitamente, contengono

milioni di colori.


Il formato JPEG è invece utilizzato per immagine fotografiche con una

varietà di milioni di colori e permette di ottenere una buona compressione

del file (dimensione del file minore, in termini di byte, ma con

conseguente perdita di qualità dell’immagine).

A differenza del formato gif, però, non permette di ottenere effetti di

trasparenza né immagini interlacciate.


Il formato PNG, infine, permette di ottenere effetti di trasparenza e di

interlacciamento, e supporta immagini con milioni di colori (come il jpeg).

A differenza del formato gif (proprietario), il metodo di compressione è

pubblico quindi liberamente utilizzabile (senza dover pagare diritti di

utilizzo).

L’unico inconveniente è che, ancora, non è pienamente supportato da

tutti i browser.


Per inserire una immagine in un documento HTML si utilizza il tag

<IMG align=top|middle|bottom|left|right alt=“bla bla” height=x width=y

hspace=h vspace=v border=b src=“file.gif”>

Align: allineare l’immagine rispetto al testo

Alt: visualizzare una descrizione (o una frase alternativa all’immagine)

Height e width: dimensioni in pixel (o in percentuale)

Hspace e Vspace: margine da lasciare tra testo (eventuale) e immagine

Border: spessore dell’eventuale bordo

Src: percorso specifico del file.

Tranne src, tutti gli altri attributi sono opzionali e possono

tranquillamente essere omessi.


Link (o ancore)

Mediante i link è possibile realizzare collegamenti ipertestuali con altre

pagine html o file che si trovano nello stesso server o in altri (esterni).

<A href=“file.html”>bla bla</A>

oppure

<A href=“http://www.sito.it”>bla bla</A>


Il testo racchiuso tra i tag <a> … </a> è visualizzato, solitamente,

sottolineato e di un colore diverso (per default blu) ad esempio:

bla bla

Cliccando sul termine linkato ci si collega alla pagina specificata dal

parametro href (o viene proposto di visualizzare il file relativo).

N.B.

È possibile realizzare link con immagini utilizzando il tag <img>:

<A href=“file.html”><IMG src=immagine.gif></A>


ListeLe liste (elenchi), puntate o numerate, si realizzano, rispettivamente, con

i seguenti tag:

<UL><LI> uno </LI><LI> due </LI><LI> tre </LI>

</UL>

•uno

•due

•tre

•uno

•due

•tre

<OL><LI> uno </LI><LI> due </LI><LI> tre </LI>

</OL>

1) uno

2) due

3) tre

1) uno

2) due

3) tre


Opzioni per gli elenchi numerati <OL start=n type=h>:

Start: definisce il valore iniziale dell’elenco;

Type: può assumere i valori 1, A, a, I, i.

Opzioni per gli elenchi puntati <UL type=h>:

Type: disc, square, circle.


Tabelle

Una tabella permette di strutturare il testo in righe e colonne. I tag per definire una tabella sono: <table> per la struttura, <tr> per ciascuna riga, <th> per una cella di intestazione e, infine, <td> per una comune cella.

<table border =x cellpadding=y cellspacing=z>

<tr>

<th>colonna A</th><th>colonna B</th>

</tr> <tr> <td>aaaa</td><td>bbbb</td> </tr>

</table>


Parametri di <table>

Cellpadding=x permette di specificare lo spazio x (distanza) da lasciare tra il contenuto della cella ed i suoi bordi;

Cellspacing=y consente di settare la distanza y, in pixel, tra celle adiacenti;

Bgcolor=color consente di assegnare un colore di sfondo per l’intera tabella;

Background=file.jpg/png/gif imposta come sfondo l’immagine contenuta nel file specificato (nella stessa cartella della pagina html);

width=n stabilisce, se specificato, la larghezza complessiva della tabella: n può assumere un valore intero (pixel) o percentuale rispetto la larghezza del browser. Se questo parametro non è specificato la tabella si adatta al contenuto;


I principali parametri di <tr> sono:

align=center/left/right (allineamento orizzontale)

valign=baseline/bottom/middle/top (allineamento verticale)

bgcolor=color (colore di sfondo)

I principali parametri di <td> e <th>, invece:

align=center/left/right

valign=baseline/bottom/middle/top

bgcolor=color

colspan=n (raggruppamento di n colonne)

rowspan=n (raggruppamento di n righe)

N.B. <th>, a differenza di <td>, centra il testo nella cella e gli applica lo stile grassetto.


ColoriI colori, in HTML, possono essere definiti esplicitandoli con il nome inglese (red, green, lightblue, black, …) oppure in RGB.

RGB sta per Red Green Blue e costituisce la via principale per definire un colore. In pratica RGB esprime la combinazione dei tre colori fondamentali rosso, verde e blu, rispettivamente, espressi da tre numeri variabili da 00 a FF (notazione esadecimale) preceduti dal simbolo #. Esempi:

#FF0000 (red) #FF00FF (fuchsia)

#0000FF (blue) #800000 (maroon)

#00FFFF (aqua) #000080 (navy)

#008800 (green) #FFFF00 (yellow)


FormMediante i form è possibile interagire (scambiare dati) con gli utenti che visitano una pagina web. Ciò è possibile inserendo nella pagina elementi quali Pulsanti, Caselle di testo, Caselle di spunta a scelta multipla (Checkbox) o esclusiva (Radio).

La seguente costituisce la sintassi essenziale del tag <FORM>:

<FORM action=script method=get|post>

…

…

</FORM>

L’attributo action specifica o la pagina dove “inviare” i dati o un indirizzo email al quale spedire i dati del form (action=mailto:[email protected]). Se tale attributo non fosse specificato, i dati del form verrebbero “inviati” alla stessa pagina.

L’attributo method, invece, permette di specificare come deve avvenire l’invio dei dati. I valori possibili sono due: get oppure post. Con get i “dati inviati” sono visibili a tutti in quanto inseriti nell’URL della pagina specificata nell’action; con post, invece, i dati non vengono accodati all’URL, non sono quindi visibili e non vi è un limite alla loro quantità (questo è particolarmente conveniente quando transitano password o “enormi” quantità di dati).


InputIl tag <INPUT> è utilizzato all’interno dei tag <FORM> </FORM>per realizzare i suoi elementi (pulsanti, caselle, …). La sua sintassi essenziale è:

<INPUT type=… name=… value=…>

Gli attributi type, name e value sono solo alcuni dei possibili, oltre quelli specifici del particolare tipo di oggetto realizzato (ad esempio se type fosse uguale a checkbox, potremmo avere anche l’attributo checked, altrimente non presente).

name rappresenta il nome associato allo specifico elemento, utile per leggere il relativo valore inviato;

value è il valore preimpostato che quell’elemento contiene;

type, invece, identifica il tipo di elemento che si vuole ottenere (pulsante, casella di testo, ecc.). I possibili valori di type sono:

button, checkbox, file, password, radio, reset, submit e text.


type=button (pulsante generico)

type=submit (pulsante di invio dei dati del modulo)

type=reset (pulsante di azzeramento dei dati, senza invio)

Input type

ok

type=checkbox (casella di spunta, per selezionare una o più voci. Con

L’opzione checked l’elemento appare selezionato.)

type=radio (radio pulsante, usato per scegliere tra valori alternativi: V o F,

Si, No. Con l’opzione checked l’elemento appare selezionato.)

type=text (casella di testo)

type=password (casella con testo sostituito da asterischi)

Sfoglia ... type=file (permette di selezionare un file)


Select e Textarea

I tag Select e Textarea permettono, rispettivamente, di realizzare dei menù a tendina o dei campi di input a più righe.

<select name=“bla bla”>

<option>Voce 1</option>



</select>

<textarea cols=x rows=y>Bla bla</textarea>

Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò INTRODUZIONE HTML L HTML è un...

Documents

Transcript of Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò INTRODUZIONE HTML L HTML è un...