ovvero la lingua di Internet TC-WEB Torino, 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 dellutente.
Un po di storia LHTML è 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) è lorganizzazione che si occupa della standardizzazione del linguaggio HTML e di tutte le tecnologie che hanno a che fare con il Web La versione attuale di HTML è la 4.01.
La pagina html
Il fondamento di html: i TAG Marcatori di apertura: 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: Apertura Chiusura Contenuto del tag Un può avere degli attributi: minuscolo tra 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. contenuto 1 contenuto 2
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" " Informazioni sulla versione HTML utilizzata
Intestazione 1/3 Contiene informazioni sul documento Titolo Meta informazioni Keyword per i motori di ricerca Comandi da includere nellintestazione 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 Il titolo che vuoi tu <META http-equiv="Expires" content="Tue, 20 Aug :25:27 GMT" />
Intestazione 3/3 <META http-equiv="Content-Type" content="text/html; charset=iso " /> body { background: white; color: black } a:link { color: red } a:visited { color: red } a:active { color: red }
Corpo: racchiude il contenuto del documento Gli 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 [...] 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: 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 allinterno 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: titolo 1 titolo 2 titolo 3 titolo 4 titolo 5 titolo 6 "H" sta per "heading", cioè titolo le grandezze previste sono sei
I Paragrafi Il paragrafo è lunità di base entro cui suddividere un testo. Il tag lascia una riga vuota prima della sua apertura e dopo la sua chiusura. paragrafo 1 paragrafo 2 I Blocchi di testo Il blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura. blocco 1 blocco 2 Allineare il testo Tutti i "tag-contenitori" che abbiamo appena visto permettono di allineare il testo utilizzando semplicemente lattributo align. Andare a capo Per andare a capo è sufficiente un. Per saltare una riga ne occorrono due.
Il testo Lo stile di un testo testo in grassetto testo in corsivo testo sottolineato testo barrato testo in apice testo in pedice Geneva e caratteri simili Il font di un testo Deprecated testo blu Il colore di un testo Deprecated testo di grandezza 1 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: 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 paragrafo con il font di dimensione invariata paragrafo con il font di dimensione maggiore, usando le dimensioni relative (+1).
Gli Elenchi Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le "liste", che sono sostanzialmente di 2 tipi: Elenchi ordinati Elenchi non ordinati nome del primo elemento nome del secondo elemento Gli elenchi ordinati o numerati primo elemento secondo elemento terzo elemento type 1 : numeri arabi (default) a : alfabeto minuscolo A : alfabeto maiuscolo i : num. romani minuscoli I : num. romani maiuscoli Gli elenchi non ordinati primo elemento secondo elemento terzo elemento 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 è lessere costituito non da testi ma da ipertesti (unaltra delle caratteristiche che hanno fatto grande il web è senzaltro la possibilità di interagire, ma questo è un altro discorso). I link sono "il ponte" che consente di passare da un testo allaltro. 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 HTML.IT. il meccanismo del link funziona allo stesso modo indipendentemente dal tipo di risorsa 1) creazione dellancora a cui puntare ( ) 2) creazione del collegamento allancora appena creata e riferimento ( )
Collegamenti interni al documento Sorgente: Sezione 1 Destinazione: Questa è la sezione 1… Utilizzando lattributo id Questa è la sezione 1…
Collegamenti Esterni al documento: URI, URL e URN Ogni risorsa nel Web è identificata da un URI URI = URL + URN URI: Uniform Resource Identifier URL: Uniform Resource Locator URN: Uniform Resource Name Formato di un URL protocollo + host + path + risorsa ftp://ftp.ietf.org/rfc/rfc1808.txt news://it.comp.java telnet://melvyl.ucop.edu
Esempi di URL URL assoluti URL relativi al documento attuale images/logo.gif (sottocartella)../images/logo.gif (cartella superiore)../../images/logo.gif (2 cartelle superiori)
Link con indirizzi <a href="mailto:Nome Cognome ?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 allinterno 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 Il tag è un tag vuoto, che non ha la necessità di essere chiuso. Attributi del tag img: width="224" height="69" alt è utile per specificare il testo alternativo (alternative text), fintanto che limmagine 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 base Le 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: apre la tabella table row: indica lapertura di una riga table data: indica una cella allinterno 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 laltra, 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 Intestazione Menù Contenuto Piè pagina
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. DESCRIZIONE DEL MODULO DESCRIZIONE DEL MODULO 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= method=get|post > Identificativo del form URL del programma o della pagina che processerà i dati Modalità di invio dei dati GETPOST 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 è che è senza chiusura. Per specificare un determinato tipo di campo è sufficiente indicare il tipo di input. I vari sono dotati di attributi che consentono di indicare il tipo di campo, il nome, e il valore (per lo più il testo visualizzato). Text submit reset button textarea Password checkbox radio select hidden file Bottoni Tag indipendenti
Lo scripting in html È la possibilità dinserire in pagine Web piccoli programmi, detti script, per manipolare elementi della pagina, controllare dati inseriti dallutente 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 dallutente, 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,. 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 lHREF javascript: per operare nella finestra di comandi JavaScript.
Svantaggi dell'html 3 Mescolare Struttura e Presentazione: pregiudica lindipendenza 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.