Il Linguaggio HTML Hyper Text Markup Language Corso “Il computer come forma di socializzazione e...

Il Linguaggio HTMLHyper Text Markup Language

Corso “Il computer come forma di socializzazione e integrazione”ITCG Einaudi Senorbì A.S.2008-2009

Docenti: Gabriella Deiana - Daniela Lecca

L’HTML è un linguaggio di codifica (markup) pensato per la creazione di ipertesti.

Che cosa è un ipertesto? È un sistema di organizzazione delle informazioni in una struttura non sequenziale, bensì reticolare ed è costituito da un insieme di unità informative (i nodi) e da un insieme di collegamenti (link) che da un nodo permettono di passare a più nodi.

L’HTML fa parte della famiglia dei linguaggi dichiarativi

Il concetto di markup

Markup non è altro che un insieme di codici, o “tag” inseriti nel testo, per istruire il programma utilizzato sulla struttura e sul modo di presentazione del testo.

L’uso più comune del markup elettronico stà nel cambio dell’aspetto del testo via formattazione, cioè “marcando” alcune parti di esso come grassetto o corsivo, cambiando le dimensioni delle lettere o dei margini, per menzionare solo alcuni esempi.

Ogni word processor utilizza un linguaggio di markup per il controllo della formattazione e dell’aspetto dei documenti, ma questo nella maggior parte dei casi non è visibile all’utente.

Limiti dell’HTML Linguaggio di rappresentazione non modificabile (perché set

di marcatori predefinito); linguaggio scarsamente strutturato, dotato di una sintassi

poco potente, incapace di descrivere fenomeni complessi o informazioni altamente organizzate;

predilezione per marcatori stilistici più che strutturali; solo link unidirezionale; impossibilità di un controllo elastico sull’aspetto del

documento (variabile in relazione alle tecnologie del visitatore del sito);

browser, che hanno iniziato l’infelice pratica dell’introduzione di loro proprie e individuali “extensions” al linguaggio HTML.

incominciamo….Per produrre un documento:

SCRITTURA DEL CODICEUso di un applicativo Windows (p.e. Blocco Note). L’importante è

lavorare in formato .txt cioè “solo testo” (solo uso sequenze ASCII), senza introdurre formattazioni “proprietarie”.

Modificare poi l’estenzione da .txt a .htm oppure .htmlVisualizzazione del risultato sul browser.

EDITORUso di un applicativo specifico (p.e. editor visuale con menù a

tendina e bottoni grafici tipo un word processor) in grado di manipolare l’HTML (conversione automatica delle operazioni di interfaccia in istruzioni di codice HTML).

Visualizzazione del risultato anche in locale.

GLI EDITOR

Editor di puro testo aiutano a creare file richiamando i tag e gestendo link.(Arachnophilia)

Editor WYSIWYG ( Frontpage -Dreamweaver)

WYSIWYGWhat you see is what you getCiò che si vede è ciò che si ottieneQuindi è la capacità di un programma grafico di visualizzare esattamente sullo schermo la pagina una volta stampata (pubblicata).

TAGS HTML

Istruzioni scritte all’interno dei simboli < e >

Istruzioni attive fino a quando non vengono disattivate ripetendo l’istruzione stessa preceduta dal simbolo / e cioè:

<istruzione> </istruzione>

Questo modo di scrivere le istruzioni prende il nome di tag.

Il tag <html><html> scritto all’inizio viene detto tag iniziale

Il tag </html></html> viene posto alla fine della pagina HTML

Tra <html><html> e </html></html> scrivere <head><head> e </head></head>

All’interno della sezione HEAD può essere inserito il paragrafo

<title> </title><title> </title>

Sotto la sezione HEAD viene inserita la sezione <body><body> con il relativo tag di chiusura </body>.</body>.

STRUTTURA BASE HTML

RISULTATO:

<html><html>

<head><head><title><title></title></title>

</head></head>

<body><body></body></body>

</html></html>

Sintassi per un commento (ovunque nel file):<!—commento-->

Utilizzati per segnalare delle sezioni di codice o altre informazioni utili a chiunque utilizzi la pagina HTML

NON interpretate da BROWSER

Utilizzare la scrittura indentata (soprattutto per programmi particolarmente lunghi)

USO PRINCIPALI TAG

FORMATTAZIONE STANDARD DI UN TESTOFORMATTAZIONE STANDARD DI UN TESTO

INTESTAZIONI DI SEZIONE:All’interno della sezione BODY inserire

<h1> </h1 ><h1> </h1 >

Intestazioni HTML: dal livello 1 (il più grande)

al livello 6 (il più piccolo): <h6> </h6><h6> </h6>

Permettono la scrittura in diverse forme di carattere (titolo1, titolo2, sottotitolo......)

USO PRINCIPALI TAGPARAGRAFI:Per strutturare il testo in paragrafi: <p><p>...chiudere poi con il tag </p></p>..Allineamento: attributo alignalign=“left|right|center|justify”

Il tag <br><br> inserito al termine della riga permette il ritorno a capo Non ha tag di chiusura. Fa ripartire il testo dal margine sinistro.

<b><b> grassetto </b></b><i><i> corsivo </i></i><u><u> sottolineato </u></u><s><s> barrato </s> </s> <em><em> enfasi </em> </em> <strong><strong> forte </strong> </strong>

Combinazione anche di più tag assieme importante creare codice nidificato

Il tag <blockquote><blockquote> consente di aggiungere degli spazi (come fosse un tabulatore)

USO PRINCIPALI TAGUTILIZZO DI COLORI E SFONDI:

Il tag <font><font> con i suoi attributi face, size, colorface, size, color

face face =“Arial | Times New Roman | Courier-new | Comic”

sizesize assume valori interi da 1 a 7

colorcolor espresso con colori tipo black, red, yellow oppure con una combinazione di 6 numeri o lettere (da A a F) preceduti da #... Esempio un azzurro è “#6473ef”, un rosa "#cc3677“

Tabella dei colori

Nel tag <body><body> per aggiungere colore allo sfondo<body bgcolor <body bgcolor = "silver">>Attribuire un colore anche al testo e personalizzare il colore dei collegamenti (link normali-visitati-attivi)<body bgcolor <body bgcolor = ”black” text text = ”white” link link = ”yellow” vlink vlink = ”magenta” alink alink = ”lime”>>

ALTRI COLORI:green, gray, olive, maroon, navy, red, blue, purple, teal, fuchsia, aqua

Tabella dei colori ai siti http://www.molly.com/molly/webdesign/136_colors.html

http://www.molly.com/molly/webdesign/colorchart.html

I file html sono ASCII puri. Vengono definiti un set di caratteri speciali chiamati entità per

aggirare il problema dei caratteri speciali. Possono avere due forme: Entità con nome ed iniziano con la & e terminano con il ; es : " « © Le entità con numero iniziano con la & aggiunte con il # e termina

con il ; es: õ Per scrivere la parola poiché : poiché oppure

poiché

CARATTERI SPECIALI:

USO PRINCIPALI TAG

APICE E PEDICE:<sup> <sup> </sup> </sup> <sub> <sub> </sub></sub>

<< >>> <≤≤ ≤≥≥ ≥°° °àà àéé éèè èìì ìòò òùù ù&& & spazio€€ €€

USO PRINCIPALI TAGELENCHI PUNTATI E NUMERATI: (molto utile il loro utilizzo in una pagina

web)

Elenco non ordinato due diversi tag: <ul><ul> che comunica al documento che sta cominciando una lista e <li><li> vicino ad ogni singolo elemento della lista stessa:

<body><body>

<p><p> I miei studenti preferiti

<ul><ul><li><li> pino <li><li> gino<li><li> lino

</ul></ul>

</body></body>

Elenco numerato <ol><ol> (al posto di <ul><ul>) e <li><li> vicino ad ogni singolo elemento della lista stessa

Attributotype type = “disc | circle | square” per <ul><ul>

typetype=“A | a | I | i | 1” per <ol><ol>

USO PRINCIPALI TAGInserimento di righe orizzontali: <hr><hr>Non ha tag di chiusura

Controllare la lunghezza della riga:attributo width: <hr width<hr width = ”50%”>>oppure espresso in pixel…Altri attributi: alignalign (left|right|center), noshade, sizenoshade, size (numero)

ALLINEAMENTO:Il tag <DIV><DIV> permette di “dividere” lo spazio disponibile

Attributo:align align = “center | left | justify | right”<DIV align<DIV align = “center”> > </DIV></DIV>

COLLEGAMENTO IPERTESTUALE:

Documenti HTML sono ipertesti il funzionamento è in massima parte dovuto agli HyperLink o ancoraggi, il cui tag specifico è <a><a> (Anchor) con chiusura </a></a>

Al suo interno è possibile inserire testo, immagini o altri elementi multimediali.

Perché funzioni, deve essere associato ad altri attributi:

Il più importante di questi è hrefhref (abbreviazione di Hypertext Reference) contenente l'URL o la pagina da raggiungere.

Sintassi : <a href <a href = ”nome file”>>testo del collegamento</A></A>

Altri collegamenti

E’ possibile creare link a qualsiasi risorsa (immagini, testi, audio, video, programmi) semplicemente usando l’estensione esatta del file (che farà aprire il programma necessario a leggere il file)

<A href=“mailto:[email protected]”>clicca qui per spedirmi un messaggio</A>: link ad un indirizzo di posta elettronica (il link attiva il software necessario all’invio di messaggi di posta)

Link interni al documento

Alla parte di testo che si vuole raggiungere tramite link deve essere assegnato un nome preciso (nome dell’ancora):

<A name=“pippo”>Questo è pippo</A>

Il link deve far riferimento a questa sezione:

<A href=“#pippo”>se clicchi qui vai alla sezione “Questo è pippo”</A>

Link a punti precisi

Il sistema delle ancora può anche essere utilizzato fra pagine diverse, sempre specificando tramite <A name=“nomeancora”> il nome dell’ancora e con <A href=“#nomeancora”> il link. Se però “nomeancora” è in un documento esterno rispetto al link avremo:

<A href=“nome_doc_esterno.html#nomeancora”>

Le Tabelle: creazione e strutturazione

si passa alla seconda riga con le relative celle avendo cura di usare il tag </tr></tr>

<table>…….</<table>…….</tabletable>>

all’interno dei quali si deve definire il contenuto della tabella.

si indicano le varie celle facendo uso:

del tag <th><th> per le intestazioni di cella </th></th> = table header

del tag <td><td> per i dati della cella </td></td> = table data

Per creare una tabella in HTML si usano i tag:

Per definire una tabella si procede nel modo seguente:

si realizza la prima riga facendo uso del tag <tr><tr> = table row

Righe e colonne

<TR> “table row” per ogni riga<TD> “table data” per ogni cella della rigaEsempio: tabella a 2 righe e 3 colonne:

<TABLE><TR><TD>testo della cella</TD><TD>testo della cella</TD><TD>testo della cella</TD></TR><TR><TD>testo della cella</TD><TD>testo della cella</TD><TD>testo della cella</TD></TR></TABLE>

Attributi della tabella BORDER per inserire un bordo BORDERCOLOR per il colore del bordo BGCOLOR per il colore di sfondo BACKGROUND per un immagine come sfondo ALIGN per l’orientamento CELLSPACING per lo spazio fra il bordo delle celle e il bordo

della tabella CELLPADDING per lo spazio fra il bordo della cella e gli

elementi al suo interno

<TABLE width=300 border=1 bordercolor=“red” bgcolor=“green” align=“center” cellspacing=10 cellpadding=10>

Dimensioni definite con widthwidth (larghezza) e heightheight (altezza); possono essere espresse in pixel o in percentuale della pagina, il bordo (borderborder) con un numero:

<table border<table border = 0 width width = 500>>

</table></table>

<table border <table border = 2 width width = 50%>>

</table></table>

Le Tabelle: formattazionePer aggiungere una didascalia alla tabella: <caption><caption> e </caption></caption> subito dopo il tag

<table><table> che può essere disposto sopra e/o sotto la tabella con l’attributoalign align = “top | bottom”

Osservazioni:Se larghezza tabella espressa in pixel a qualsiasi risoluzione, la misura rimane

invariata.Se larghezza tabella espressa in percentuale: <table<table width width = 50%> </table>> </table> risulta diversa a seconda della risoluzione video dell’utente

es.: risoluzione video di 640x480 tabella di circa 320 pixels risoluzione di 800x600 tabella di circa 400 pixel.

In generale e' meglio mantenere il controllo assoluto sulla grandezza delle tabelle adottando una misurazione in pixel piuttosto che in percentuali.

Altri attributi del tag <td><td>

align align = “left | center | right | justify” allineamento orizzontale

valign valign =“top | middle | bottom | baseline” allineamento verticale

Baseline esamina una sola cella per riga e ne allinea il contenuto rispetto ad una linea di base comune…

height height = espressa in pixel altezza

colspan colspan = numero per accorpare orizzontalmente più celle in un’unica cella

rowspan rowspan = numero per accorpare verticalmente più celle in un’unica cella

Le Tabelle: formattazione

Le immagini

I browser (Netscape, Internet Explorer, Opera ecc.) riconoscono molti formati grafici, anche se sono tre quelli più utilizzati:

1. GIF (Graphics Interchange Format)2. JPEG (Joint Photographics Experts Group) jpg3. PNG

Si utilizza il tag <img><img> (senza tag di chiusura): in questo tag staranno tutte le informazioni.

Attributo scr scr = permette di visualizzare l’immagine: <img scr<img scr=”immagine.gif”>>

SRC sta per Search ed è il percorso dal quale il browser ricava l'immagine (in questo caso "immagine.gif")

ATTENZIONE: accertarsi di scrivere il percorso corretto; in caso contrario il visitatore visualizzerebbe solo un’icona che indica l’impossibilità di scaricare l’immagine. E’ consigliabile utilizzare sempre elementi di ottima qualità grafica, altrimenti si potrebbe impiegare troppo tempo per scaricare l’immagine.

Le immaginiL'elemento <img><img> è corredato da diversi attributi:

per modificare le dimensioni (consigliati programmi di grafica) si può disporre degli attributi widthwidth e height height : <img scr<img scr=”immagine.gif” heightheight=“150” width width=“45”>>

Attributo altalt consente di inserire un testo accanto all’immagine: alt=alt=”testo alternativo”

Attributo alignalign per definire posizione dell'immagine rispetto al testo

alignalign =“top” testo allineato in alto

alignalign =“middle” testo allineato in centro

alignalign =“bottom” testo allineato in basso

Altri attibuti hspace hspace = spaziatura orizzontale (in pixel)

vspacevspace = spaziatura verticale (in pixel)

borderborder = in pixel

Un’immagine può essere usata anche come sfondo: <body background<body background=“percorso”>>

Immagini e link<IMG SCR=“immagine.jpg”>

Una immagine può funzionare come link <A HREF=“indice.html”><Img SRC=“imm.gif”></A>

Normalmente le immagini che richiedono link sono circondate da un bordo il cui spessore può essere cambiato con l’attributo BORDER nel tag IMG>

<IMG SRC=“IMG.gif” BORDER=5>

AUDIO

I tipi di file molto comuni sono i file AU ( di Sun Microsystem) usati in tutte le piattaforme, ma con una qualità scadente.

Quelli di qualità migliore , ma dedicati sono il formato AIFF per il macintosh e WAVE per il Windows.

Infine il formato RealAudio viene utilizzato per ascoltare direttamente dal server, senza dover scaricare direttamente tutto il brano.

Vedi esempio link nel file canzone1.html<a href="nonvita.wav">ascoltala</a>

Suoni e musiche di sottofondoI file audio supportati sono il MIDI e il MP3

Inserito all’interno di <HEAD>:

<BGSOUND src=“music.mid” loop=“INFINITE”> (solo con Explorer) fa partire il suono all’apertura della finestra.

TESTI SCORREVOLI (MARQUEE)

<MARQUEE> QUESTO TESTO SCORRE </MARQUEE> L’attributo behavior può assumere i valori : scroll,slide e alternate scroll e standard, slide si ferma quando raggiunge il margine , alternate fa

rimbalzare il testo da sinistra verso destra. Direction : right o lest determina il verso. Scrollmount determinana la velocità di spostamento del testo e il valore

numerico ad esso assiciato corrisponde al numero di pixel per ogno movimento del testo.

Scrolldelay, determina la durata del passo espressa in millisecondi. Per cambiare l’aspetto del testo usare bgcolor. Heiht e width determina le dimensioni del riquadro che circonda il testo

scorrevole. Hspace e vspace, lo spazio compreso tra i bordi e il testo

Altri comandi di formattazione

<spacer> per rientro del testo (tag proprietario che funziona solo con Netscape)

<blink> testo che lampeggia (tag proprietario che funziona solo con Netscape)

<marquee> testo che scorre (tag proprietario che funziona solo con Explorer)

<multicol cols=“2”> per porre il testo in colonne (tag proprietario che funziona solo con Netscape)

I MODULI

Fino ad ora sono state illustrate le istruzione per la creazione di pagine on-line, senza possibilità di interazione da parte dell’utente.

I moduli, detti anche schede o form in inglese , trasformano le pagine web trasformandole in vere applicazioni interattive per gestire sondaggi o scelte in base ad un input a scelta.

Queste istruzioni sono diventate uno standard a partire dall’ HTML 2.0 e sono supportate da tutti i moderni browser.

CREAZIONE DI UNA SCHEDA

E’ costituita da due operazioni indipendenti: la creazione degli elementi della scheda la realizzazione del programma script che dovrà essere richiamato

dal server ( chiamato script CGI o script) e che si occupa di elaborare le informazioni che l’ utente invia utilizzando la scheda.

La scheda si crea con il tag <FORM> e chiusura </FORM> Il form include due argomenti:

METHOD ACTION

METHOD = a GET o POST e determinano il modo in cui le informazioni verranno inviate allo script (sul server) che si deve occupare della loro elaborazione.

ACTION : Indica lo script sul server che deve essere richiamato nel momento in cui viene inoltrata questa scheda.

ESEMPIO SCHEDA

ESEMPIO SCHEDA

< FORM METHOD= POST ACTION=“….”>

Bisogna definire successivamente il codice HTML che definisce l’area di testo:

Inserisci il tuo nome:<INPUT NAME=“Nome”> INPUT è il tag più utilizzato ed accetta due attributi:

TYPE E NAME Il type descrive il tipo di elemento : text, radio, e altri

pulsanti tipo checkbox per le caselle di selezione . Se omesso per default = ad una casella testo.

Il name indica il nome dell’ elemento che lo script riceve dalla scheda sotto forma di una serie di coppie nome=valore

Campi lunghi Il tag Input può includere i seguenti attributi: Size : indica la lunghezza dei caratteri, (lo standard è pari a 20 car.) maxlength: Indica il numero di caratteri che l’utente può immettere. AREE DI TESTO:

<Text area name=“commenti” rows=“20” cols=“30”>commenti. </texarea>

PULSANTI OPZIONE

L’attributo e: radio INPUT TYPE=“RADIO” NAME=“W LA SQUOLA”

L’attributo password evita di visualizzare quanto si scrive sul video.

Attributo radio consente una scelta fra tante L’attributo checkbox attiva una o più caselle Oltre che a definire un valore standard, è possibile includere un

pulsante di annullamento”Reset” <input type=“reset” value=“valori standard”>

ESEMPIO “controllo della risposta ad un quiz”

colore parola chiave notazione esadecimale

arancione orange #FFA500

blu blue #0000FF

bianco white #FFFFFF

giallo yellow #FFFF00

grigio gray #808080

marrone brown #A52A2A

nero black #000000

rosso red #FF0000

verde green #008000

viola violet #EE82EE

TABELLA COLORI

Il Linguaggio HTML Hyper Text Markup Language Corso “Il computer come forma di socializzazione e...

Documents

Transcript of Il Linguaggio HTML Hyper Text Markup Language Corso “Il computer come forma di socializzazione e...