Ovvero la lingua di Internet TC-WEB Torino, 5 settembre 2012.

ovvero la lingua di Internet

TC-WEBTorino, 5 settembre 2012

Argomenti del corso

Cos'è l'html

I principali tag html

Le form e le pagine dinamiche

Lo scripting in html

Svantaggi dell'html 3 e l'introduzione dell'html 4

Cos'è l'HTML

Acronimo di Hyper Text Markup Language

Linguaggio standard di marcatori (detti tags) utilizzato per creare documenti Web ipertestuali

E' il linguaggio per la PUBBLICAZIONE di contenuti sul World Wide Web.

Pagine scritte in html sono leggibili e sviluppabili semplicemente con un editor

di testo.

File html o htm sono INTERPRETATI dal browser

Un documento HTML è generalmente costituito da più pagine collegate tra loro da link ipertestuali, secondo vari schemi strutturali, il più usuale dei quali è la struttura gerarchica.

Ogni pagina di un documento è un file .htm (o .html) separato e richiamato dal server Web solo a richiesta dell’utente.

Un po’ di storia

L’HTML è stato ideato nel 1992 da Tim Berners-Lee mentre lavorava al CERN di Ginevra ed è divenuto popolare grazie al primo browser, chiamato Mosaic, sviluppato al NCSA

Il W3C (World Wide Web Consortium) è l’organizzazione che si occupa della

“standardizzazione” del linguaggio HTML e di tutte le tecnologie che hanno a

che fare con il Web

http://www.w3.org/

La versione attuale di HTML è la 4.01.

La pagina html

www.corriere.itHome Page

....

Content

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

...

</BODY></HTML>

Markup+ = final rendition

Il fondamento di html: i TAG

Marcatori di apertura: <nome_tag>

Tutto ciò che si trova all'interno di una pagina HTML e che fornisce la struttura della pagina e i suoi comportamenti è compreso tra porzioni di codice chiamate TAG e che hanno questa forma:

Marcatori di chiusura: </nome_tag>

<html> </html>

Apertura Chiusura

Contenuto del tag

Un <tag> può avere degli attributi:<nome_tag attributo=“valore”>

minuscolotra “doppi

apici”

Annidamento e indentazione dei tag

Una caratteristica importante del codice HTML è che i tag possono essere annidati

l'uno dentro l'altro. Anzi molto spesso è necessario farlo.

<TAG1 attributi>

contenuto 1

<TAG2>

contenuto 2

</TAG2>

</TAG1>

I commenti in HTML

Un'altra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei

"commenti" nei punti più significativi

I tag per la struttura globale del documento

INTESTAZIONE DELLA PAGINA

CORPO DELLA PAGINA

Informazioni che riguardano il modo in cui il

documento deve essere letto e interpretato

meta-tag

script

fogli di stile

+

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

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Informazioni sulla versione HTML utilizzata

Intestazione 1/3

Contiene informazioni sul documento Titolo Meta informazioni

Keyword per i motori di ricerca Comandi da includere nell’intestazione di HTTP

Script (es. JavaScript, Jscript) Fogli di stile (CSS)

I browser non visualizzano direttamente nella pagine queste informazioni

Intestazione 2/3

Un tipico esempio di intestazione

<HEAD><TITLE>Il titolo che vuoi tu</TITLE><META name="author" content="Mario Rossi" /><META name="copyright" content="© 2001 Acme SPA" /><META name="keywords" lang="en" content="one,two,three" /><META name="keywords" lang="it" content="uno,due,tre" /><META name="date" content="2002-04-11T17:01:37+00:00" /><META http-equiv="Expires"content="Tue, 20 Aug 2003 14:25:27 GMT" />

</HEAD>

Intestazione 3/3

<HEAD><META http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /><LINK rel="stylesheet" type="text/css“ href="style.css" /><STYLE type="text/css">

body { background: white; color: black }a:link { color: red }a:visited { color: red }a:active { color: red }

</STYLE></HEAD>

Corpo: <body> </body>

<body> racchiude il contenuto del documentoGli attributi: background, text, link, vlink, alink sono deprecati, al loro posto occorre utilizzare i fogli di stile (CSS)Attributi non deprecati: id, class, lang, title, style, bgcolor<body lang="it" bgcolor="#ffffff">[...]</body>

In HTML 4.01 sono deprecated tutti gli attributi di presentazione definiti in HTML 3.2 al loro posto si usano i fogli di stile (CSS)

I principali tag html:

<BODY>

bgcolor background color", cioè "colore di sfondo"

background immagine come sfondo

lang specifica la lingua del documento

<body

background="imgs/sfondo00006.gif"

bgcolor="#66CCFF"

lang="it"

>

text colore per il testo di tutta la pagina

I Titoli

Nulla ci vieta di scrivere direttamente all’interno del tag body, come già abbiamo visto negli

esempi precedenti, senza utilizzare nessun tag.

A dire la verità è però più pratico racchiudere il testo in appositi tag a seconda della funzione

che il testo sta svolgendo.

I principali tag-contenitori da utilizzare per "racchiudere" il testo sono:

<h1>titolo 1 </h1>

<h2>titolo 2 </h2>

<h3>titolo 3 </h3>

<h4>titolo 4 </h4>

<h5>titolo 5 </h5>

<h6>titolo 6 </h6>

"H" sta per "heading", cioè titolo

le grandezze previste sono

sei

I ParagrafiIl paragrafo è l’unità di base entro cui suddividere un testo. Il tag <P> lascia una riga vuota prima della

sua apertura e dopo la sua chiusura.<p>paragrafo 1</p>

<p>paragrafo 2</p>

I Blocchi di testoIl blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua

apertura.<div>blocco 1</div>

<div>blocco 2</div>

Allineare il testoTutti i "tag-contenitori" che abbiamo appena visto permettono di allineare il testo

utilizzando semplicemente l’attributo align.

Andare a capo Per andare a capo è sufficiente un <br/>. Per saltare una riga ne occorrono due.

Il testo

Lo stile di un testo

<b>testo in grassetto</b>

<i>testo in corsivo</i>

<u>testo sottolineato</u>

<strike>testo barrato</strike>

<sup>testo in apice</sup>

<sub>testo in pedice

</sub>

<font face="Geneva, Arial, Helvetica, sans-serif">Geneva e caratteri simili</font>

Il font di un testo Deprecated

<font color="blue">testo blu</font>

Il colore di un testo Deprecated

<font size="1">testo di grandezza 1</font><br/>

La dimensione di un testo Deprecated

Esercizio 1 (da fare con css)

Creare una cartella sotto C: con il vostro nome

Creare nella cartella un documento HTML chiamato a piacere con i

seguenti elementi:

1. sfondo: arancio .

2. colore di base per il testo: blu (utilizzare il nome del colore).

3. dimensione di base del testo: 3.

4. titolo a piacere nell'intestazione

5. titolo H1 nel corpo del testo. Una ed una sola parola del titolo deve essere

rossa e in corsivo.

6. 1 paragrafo con il font di dimensione invariata.

7. 1 paragrafo con il font di dimensione maggiore, usando le dimensioni

relative (+1).

Gli ElenchiSe abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le "liste", che sono

sostanzialmente di 2 tipi:

Elenchi ordinati

Elenchi non ordinati

<elenco>

<elemento>nome del primo elemento

<elemento>nome del secondo elemento

</elenco>

Gli elenchi ordinati o numerati

<ol>

<li>primo elemento</li>

<li>secondo elemento</li>

<li>terzo elemento</li>

</ol>

type 1 : numeri arabi (default)

a : alfabeto minuscolo

A : alfabeto maiuscolo

i : num. romani minuscoli

I : num. romani maiuscoli

Gli elenchi non ordinati

<ul>

<li>primo elemento</li>

<li>secondo elemento</li>

<li>terzo elemento</li>

</ul>

disc : "pallino" pieno (default)

circle : cerchio vuoto

square : quadrato pieno

type

I link e l'ipertestualitàUna delle caratteristiche che ha fatto la fortuna del web è l’essere costituito non da testi ma da ipertesti (un’altra

delle caratteristiche che hanno fatto grande il web è senz’altro la possibilità di interagire, ma questo è un altro

discorso).

I link sono "il ponte" che consente di passare da un testo all’altro. In quanto tali, i link sono formati da due

componenti:

contenuto

risorsa

È la parte visibile del link

verso cui il collegamento punta

esterna al

documento

interna al

documento

<a href="http://www.html.it/">HTML.IT</a>.

il meccanismo del link funziona allo stesso modo

indipendentemente dal tipo di risorsa

1) creazione dell’ancora a cui puntare (<a

name="mioNome" />)

2) creazione del collegamento all’ancora

appena creata e riferimento (<a

href="#mioNome" />)

Collegamenti interni al documento

Sorgente:<a href="#sezione1">

Sezione 1</a>

Destinazione:<a name="sezione1">

Questa è la sezione 1…</a>

Utilizzando l’attributo id<a id="sezione1">

Questa è la sezione 1…</a>

Collegamenti Esterni al documento: URI, URL e URN

Ogni risorsa nel Web è identificata da un URIURI = URL + URN

URI: Uniform Resource Identifier URL: Uniform Resource Locator URN: Uniform Resource Name

Formato di un URLprotocollo + host + path + risorsa

ftp://ftp.ietf.org/rfc/rfc1808.txthttp://www.math.uio.no/faq/compression-faq/part1.htmlmailto:[email protected]://it.comp.javatelnet://melvyl.ucop.edu

Esempi di URL

URL assoluti http://www.html.it/ http://www.w3.org/TR/html401/

URL relativi al documento attuale images/logo.gif (sottocartella) ../images/logo.gif (cartella superiore) ../../images/logo.gif (2 cartelle superiori)

Link con indirizzi e-mail

<ahref="mailto:Nome Cognome<[email protected]>?subject=[html]&bcc=..."

> Possono essere specificati anche i campi cc (carbon copy), bcc

(blind carbon copy) e body , oltre a subject

Finora abbiamo visto come inserire e formattare il testo all’interno delle nostre pagine Web. Naturalmente possiamo

inserire anche delle immagini: diagrammi e grafici, fotografie, e in genere immagini create con un programma di

elaborazione grafica

I formati ammessi nel Web sono sostanzialmente tre: GIF,JPG,PNG

Inserire le immagini

<img src="http://html.it/guide/img/guida_html/miaImmagine.gif" />

Il tag <img> è un tag “vuoto”, che non ha la necessità di essere chiuso.

<img src="../img/logo.gif" />

Attributi del tag img:

width="224" height="69"

alt è utile per specificare il testo alternativo (alternative text), fintanto che l’immagine non

viene caricata o nel caso in cui non lo sia affatto

title: commento all'immagine che si sta visualizzando (tootltip)

align: disposizione dell'immagine rispetto alla pagina

Esercizio 2

1. Attraverso un motore di ricerca (ad es. Google) recuperate un'immagine di alcuni

pianeti del sistema solare (i siti di universita' italiane o straniere sono accessibili dal

laboratorio.

2. Creare una pagina HTML chiamata index.htm avente come sfondo una foto del cielo.

3. Nel corpo del testo inserire le immagini (con o senza immagini) dei pianeti allineandole

al centro, a destra e sinistra

4. Provate ad allineare il testo alle immagini in vario modi utilizzando gli attributi del tag

IMG

Le Tabelle: struttura di baseLe tabelle sono una delle parti più importanti di tutto il codice HTML: nate sin dagli inizi del Web per impaginare dati

aggregati, si sono poi trasformate in uno strumento indispensabile per gestire i layout grafici.

I tag necessari per creare una tabella sono:<table> apre la tabella<tr> “table row”: indica l’apertura di una riga<td> “table data”: indica una cella all’interno di una riga

Gli attributi più importanti del tag table: border

width

height

Gli attributi più importanti del tag td:colspan Per far occupare più colonne alla stessa riga

rawspan Per far occupare più celle alla stessa riga

cellspacing

cellpadding

specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo

indica la distanza tra il contenuto della cella e il bordo.

Gli attributi più importanti dei tag table, tr e td:

bgcolor, background, align, bordercolor

Tabelle e layout di una pagina

<table width="100%" height="100%" border="1">

<tr height="10%">

<td colspan="2">Intestazione</td>

</tr>

<tr height="80%">

<td width="20%">Menù</td>

<td width="80%">Contenuto</td>

</tr>

<tr height="10%">

<td colspan="2">Piè pagina</td>

</tr>

</table>

I Form

I form sono dei moduli che possono essere compilati dai visitatori di un sito permettendo così la

creazione di pagine HTML interattive e non solo di consultazione.

<FORM><FORM>DESCRIZIONE DEL MODULODESCRIZIONE DEL MODULO</FORM></FORM>

Non è possibile inserire un modulo all'interno di un altro. In altre parole i form non permettono

nidificazioni.

La sintassi usuale è la seguente:

<FORM name=“nomeform” action=“http://www.miosito.it/pagina.asp” method=“get|post” >

Identificativo del form

URL del programma o della pagina che processerà i datiModalità di invio dei dati

GET POST

A) Unico step. B) Parametri in query String

A) Due stepdistinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. B) I parametri non compaiono nella query string

I principali tag del Form

Per quel che riguarda i campi dei form il tag più utilizzato è <input /> che è senza chiusura.

Per specificare un determinato tipo di campo è sufficiente indicare il tipo di input.

I vari <INPUT /> sono dotati di attributi che consentono di indicare il tipo di campo, il nome, e il valore (per lo più il testo visualizzato).

<input type="text" name="tuoTesto" value="qui il tuo testo" />

Text

submit

reset

button

textarea

Password

checkbox

radio

select

hidden

file

Bottoni

Tag indipendenti

Lo scripting in html

È la possibilità d’inserire in pagine Web piccoli programmi, detti script, per manipolare elementi della pagina, controllare dati inseriti dall’utente o gestire eventi come il clic del mouse.

I linguaggi di scripting estendono il linguaggio HTML per offrire maggiore interattività. Aumentano le possibilità di controllo sulla pagina e permettono di rispondere agli eventi generati dall’utente, come operazioni con il mouse o

compilazione di questionari, senza richiedere ulteriori interazioni con il Server Web o con uno script CGI. In conseguenza, le operazioni sono più veloci e il Server ha meno carico.

Ci sono diversi modi per incorporare uno script in un documento HTML. Quelli principali sono i seguenti :

1) Chiamando lo script direttamente nel corpo del documento HTML mediante il tag <SCRIPT>, </SCRIPT>.

2) Definendo funzioni nella sezione HEAD e richiamandole nella sezione BODY.

3) Utilizzando un evento che richiama uno script realizzando così un Event Handler (gestore di evento).

4) Richiamando l’HREF “javascript:” per operare nella finestra di comandi JavaScript.

Svantaggi dell'html 3 Mescolare Struttura e Presentazione:

pregiudica l’indipendenza delle figure professionali associate ai vari

aspetti delle pagine

rende difficile la modifica dei singoli aspetti delle pagine successivamente

alla loro creazione, complicando, tra le altre cose:

l'aggiornamento del contenuto

il restyling dei siti

il miglioramento dell'usabilità

costringe a duplicare il contenuto e la struttura qualora se ne volessero

realizzare presentazioni alternative

per esempio per la visualizzazione su diversi dispositivi

diminuisce l'accessibilità

rende difficile l'estrazione del contenuto da parte di procedure

automatiche

L'html 4

HTML 4 propone un nuovo approccio un'architettura in cui i vari aspetti caratteristici delle pagine sono

nettamente separati dal punto di vista logico e fisico

ad ognuno di essi corrisponde uno strato (layer) o livello indipendente

Suggerimenti per la creazione di pagine html

Ecco qui sotto qualche utile suggerimento:

E’ sempre bene dare un nome in lettere minuscole ai file delle tue pagine.

Per esempio: "PAGINA.htm" è sbagliato, mentre "pagina.htm" è giusto. Cerchiamo di non inserire nella pagina immagini e foto superiori a 30 Kb

di peso. Le dimensioni del testo non devono essere troppo piccole nè troppo

grandi. Meglio una dimensione media, che permetta la lettura senza

problemi. Il colore del testo della pagina non deve essere simile a quello di sfondo,

altrimenti il testo si leggerà con troppa difficoltà. E’ meglio non utilizzare tipi di font troppo particolari, perchè rischiamo che

altri, che non li hanno nel loro computer, non riescano a vederli. Possiamo utilizzare GIF animate per abbellire il sito, stando attenti a non

metterne troppe, altrimenti la pagina diventerà troppo lenta da caricare.

Ovvero la lingua di Internet TC-WEB Torino, 5 settembre 2012.

Documents

Transcript of Ovvero la lingua di Internet TC-WEB Torino, 5 settembre 2012.