Il linguaggio HTML

Corso IFTSInformatica, Modulo 3 – Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base (2) Dott. Chiara Braghinbraghin@dti.unimi.it

TAG strutturali visti fino ad ora • <HTML> - tag principale necessario per identificare il tipo di documento. Deve essere sempre definito. • <HEAD> - intestazione, contiene: • <title>…</title>: titolo da assegnare alla pagina • <base>: specifica la destinazione per tutti i link della pagina, qualora questa fosse strutturata in frame <base target=“nome_del_frame_sul_quale_aprire_i_links”/> • <link>: richiama fogli di stile esterni • <style>:definisce degli stili • <script>: permette l’inserimento di script per “animare” la pagina proprio • <meta> - contiene le meta-informazioni relative al documento • <BODY> - corpo, la parte principale del documento contenente tutto il contenuto, comprese immagini, link ad altre pagine HTML e tag che modificano il layout di testo ed immagini C. Braghin - HTML: nozioni di base

Attributi di <BODY> • BGCOLOR=“#rrggbb” • Attribuisce allo sfondo della pagina uno specifico colore RGB • TEXT=“#rrggbb” • Indica il colore di tutto il testo nella pagina • il colore di default è nero • BACKGROUND=“immagine.jpg” • inserisce un'immagine come sfondo della pagina (sono permesse immagini .gif .jpg o .png), indipendentemente dalle sue dimensioni • BGPROPERTIES=“fixed” • l'immagine adoperata a riempimento può essere tenuta ferma durante lo spostamento verticale (scrolling) sulla pagina (solo con Internet Explorer, o con CSS) • Esempio4: body3_bg_text.html C. Braghin - HTML: nozioni di base

Modello di colori RGB • RGB è il nome di un modello di colori le cui specifiche sono state descritte nel 1931 dalla CIE (Commission Internationale dell'Enclairage). • Il modello è di tipo additivo e si basa sui tre colori Rosso (Red), Verde (Green) e Blu (Blue), - da cui il nome RGB- • da non confondere con i tre colori primari: Rosso, Blu e Giallo. • Questo modello viene usato nel digitale per trasmettere immagini a colori. • Un'immagine può infatti essere scomposta, attraverso filtri o altre tecniche, in questi colori base che, miscelati tra loro, danno quasi tutto lo spettro dei colori visibili, con l'eccezione delle porpore. • I 3 colori principali corrispondo a forme d'onda (radiazioni luminose) di periodo fissato. A una lunghezza d'onda di 700 nm corrisponde il rosso, a 546.1 nm il verde, a 435.8 nm il blu. • Additivo: unendo i tre colori con la loro intensità massima si ottiene il bianco (tutta la luce viene riflessa). La combinazione delle coppie di colori dà il cìano, il magenta e il giallo. C. Braghin - HTML: nozioni di base

Attributi di <BODY> - Margini • TOPMARGIN=“1”, BOTTOMMARGIN=“1”, LEFTMARGIN=“1”, RIGHTMARGIN=“1” • sono i quattro attributi per definire la distanza in pixel rispettivamente dal: • margine superiore • margine inferiore • margine sinistro • margine destro • Un margine uguale a zero farà si che il testo inizi praticamente sul bordo della finestra del browser • Esempio5: body4_bg_margin.html C. Braghin - HTML: nozioni di base

Formattazione del testo (1) • <P>…</P> • La lettera p sta per paragrafo. In questo modo si formano dei paragrafi simili a quelli di questa slide. • Tra un paragrafo e l’altro il browser inserisce uno spazio di interlinea. • Il tag di chiusura è opzionale, dato che un paragrafo viene automaticamente chiuso quando ne inizia un altro, oppure quando inizia un heading, una tabella, un'elenco, un form. • <BR> • All’interno dello stesso paragrafo è possibile andare a capo con il tag <BR>. • In questo caso lo spazio di interlinea non viene inserito. • All’interno del codice HTML si possono inserire dei commenti che non vengono visualizzati dal browser. È sufficiente inserirli tra i tag . C. Braghin - HTML: nozioni di base

Formattazione del testo (2) • Tutti i browser ignorano gli spazi aggiuntivi, le tabulazioni e gli a capo del file HTML di origine • La ripetizione del tag <BR> o del tag <P> non viene considerata • Come fare a lasciare più di uno spazio di interlinea? • Utilizzando il carattere speciale seguito da <BR> o da <P>, i due comandi ripetuti tante volte quanti sono gli spazi di interlinea desiderati • <BR> <BR> <BR> • Esempio6: formattazione1.html C. Braghin - HTML: nozioni di base

Formattazione del testo (3) • <HR> • inserisce una linea orizzontale • i browser più moderni supportano 4 attributi per l'elemento <HR> • SIZE="n" • specifica l'altezza della linea in pixel (n è un intero) • WIDTH="n", o WIDTH="n%" • specifica la larghezza della linea, in pixel o in percentuale della larghezza dello schermo (n è un intero) • ALIGN="left", "right", "center" • specifica l'allineamento della linea all'interno della pagina • il valore di default è “center” • NOSHADE • disegna la linea come una barra solida di colore -- di default la linea è una barra ombreggiata • Esempio7: formattazione2.html C. Braghin - HTML: nozioni di base

Formattazione del testo (3) • ALIGN = "left" | "center" | "right" | "justify" • il testo all’interno di un paragrafo <P>…</P> può essere allineato in diversi modi, a seconda di come specificato dall’attributo ALIGN • <p align="left">Questa è una riga allineata a sinistra</p> • <p align="right">Questa è una riga allineata a destra</p> • <p align="center">Questa è una riga allineata centrale</p> • <p align="justify">Questa è la mia prima pagina giustificata</p> • Esempio8: formattazione3.html C. Braghin - HTML: nozioni di base

Formattazione del testo (4) • <BLOCKQUOTE> • definisce un blocco di testo come citazione • il browser lo visualizzerà in modo appropriato, ad esempio spostando a destra il rientro del testo, o facendolo vedere in corsivo • causa anche un line break, cioè obbliga il browser a inserire una linea vuota prima e dopo di esso • può contenere paragrafi e la maggior parte delle istruzioni piu' comuni • <CENTER> • tutto ciò che si trova fra gli elementi <center> </center> sarà centrato nella finestra del browser • Esempio9: formattazione4.html C. Braghin - HTML: nozioni di base

Stilizzazione del testo (1) • Per rendere una pagina più leggibile si fa spesso ricorso ad una specie di cosmesi del testo, come la sottolineatura, i caratteri in corsivo, il ridimesionamento, ecc. • <B> • bold, grassetto • <U> • underline, sottolineato • <I> • italico, inclinato, corsivo • <TT> • font a spaziatura fissa tipo macchina da scrivere • <SUB> e <SUP> • Pedice e apice • <STRIKE> • testo barrato • Esempio10: font1.html C. Braghin - HTML: nozioni di base

Stilizzazione del testo (2) • <STRONG> • strong emphasis (enfasi forte - di solito in grassetto) • <EM> • emphasis (enfasi - di solito in corsivo) • <VAR> • una variabile • <CITE> • una citazione (di solito in corsivo) • <KBD> • testo definito come input da tastiera: ad esempio, in un istruzione manuale sarebbe il testo scritto dall'utente • <CODE> • codice linguaggio (di solito una font a spaziatura fissa) C. Braghin - HTML: nozioni di base

Stilizzazione del testo (3) • <SAMP> • sequenza di caratteri letterali • <DFN> • la definizione di un termine (di solito in grassetto o grassetto corsivo) • <PRE> • usato per racchiudere il testo che deve essere visualizzato con un font a spaziatura fissa (come la macchina da scrivere) • viene usato di solito per distinguere parti di testo che hanno il significato di codice computer • può avere un attributo, WIDTH • specifica il massimo numero di caratteri che possono essere visualizzati in una singola linea • il valore di default e' 80 caratteri, ma dipende dal browser • Inoltre potete inserire elementi di enfasi del testo (EM, STRONG, B, I, etc.) e anche link ipertestuali all'interno dell'elemento PRE • Esempio11: font2.html C. Braghin - HTML: nozioni di base

Stilizzazione del Testo (3) - I Font • Ogni browser ha un set di caratteri di default, colore e dimensione • Con i browser dell'ultima generazione è possibile cambiare il tipo di font • <FONT> • il tag font cambia il font utilizzato dal testo racchiuso nei tag • sono necessari gli attributi COLOR,FACE,SIZE, rispettivamente per colore, tipo di carattere e dimensioni dello stesso: <FONT COLOR=“#FFFFFF"> <FONT FACE=”Arial"> <fONT SIZE="3"> • FACE può non essere rispettato se il browser non dispone di quel particolare carattere • Esempio12: font3.html C. Braghin - HTML: nozioni di base

Stilizzazione del testo (4) -Intestazioni • Sono previsti 6 tipi di intestazioni (heading) identificati dal nome dell'elemento heading <H2> .. <H6> che possono essere usati come titoli delle diverse porzioni del testo • Per ottenerle basta scrivere i comandi di inizio e di fine ai relativi titoli • L'elemento <Hn> permette di usare l'attributo ALIGN per specificare il tipo di allineamento visuale dell'intestazione • i valori possibili sono: ALIGN="left" (valore di default) per allineare a sinistra l'intestazione • ALIGN="center" per centrare l'intestazione • ALIGN="right" per allineare a destra l'intestazione. • Quasi tutti i browser riconoscono l'allineamento a sinistra e centrato, mentre solo quelli piu' moderni riconoscono quello a destra. • Esempio13: intestazioni.html C. Braghin - HTML: nozioni di base

Altri Comandi (1) • <DIV> • permette di unire in un blocco altri elementi di tipo blocco di testo, e associarli tra loro • tutti gli attributi e le associazioni applicate al tag <DIV> saranno estese a tutto il blocco di codice interessato • puo’ assumere l'attributo ALIGN, e tutti i blocchi prenderanno le caratteristiche di allineamento specificate serve come contenitore per l'associazione con fogli di style e crea un nuovo blocco • Esempio14: formattazione5.html C. Braghin - HTML: nozioni di base

Altri comandi (2) • <ADDRESS> • per la parte che fa da "firma" del documento contenente il nome e/o indirizzo dell’autore della pagina • <SPAN> • l'elemento <SPAN> non ha alcuna caratteristica se non quella di fare da supporto per gli stili, come <DIV> si presta bene come contenitore per l'associazione di tutto quello che serve ad html dinamico. <SPAN style="color:green">Questa riga di testo è colorata di verde. </SPAN> C. Braghin - HTML: nozioni di base

Caratteri speciali • Dato che le parentesi <angolate> servono a distinguere i tag html dalle parole del testo, come faccio ad inserire una di queste nel testo della mia pagina? • Lo stesso problema si pone con tutta una serie di caratteri speciali come lo spazio o le vocali accentate, che vengono indicate con dei codici. • Esempio15: caratteriSpeciali.html C. Braghin - HTML: nozioni di base

Prologo • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> • Questa prima riga è chiamata prologo, e si trova prima del tag di apertura <HTML> • Solitamente viene generata in modo automatico dall'editor HTML specifico, non è obbligatoria ed ha il solo compito di informare il browser che si tratta di un documento html relativo alle specifiche (in questo caso) 4.0. • È necessaria quando si vuole validare la pagina web tramite un validatore, ad esempio: http://validator.w3.org/ C. Braghin - HTML: nozioni di base

Esercizi (1) • 1) Scrivere un file HTML con gli elementi di base: • Titolo (a piacere) in <HEAD> • Un paragrafo di testo • Linee di separazione di diverse dimensioni C. Braghin - HTML: nozioni di base

Esercizi (2) • 2) Creare una cartella in temp con il nome del vostro sito: • creare nella cartella un documento HTML chiamato a piacere con i seguenti elementi: • 1. sfondo: arancio (trovare il codice esadecimale corrispondente) • 2. colore di base per il testo: blu (utilizzare il nome del colore) • 3. dimensione di base del testo: 3 • 4. titolo • 5. titolo H1 nel corpo del testo. Una ed una sola parola del titolo deve essere rossa e corsivo • 6. un paragrafo con il font di dimensione invariata • 7. un paragrafo con il font di dimensione maggiore • 8. un paragrafo con il font di dimensione minore di colore verde scuro (trovare il codice esadecimale corrispondente) C. Braghin - HTML: nozioni di base

Esercizi (3) • 3) Creare un documento HTML chiamato miocognome.html all'interno della vostra cartella. In tale file creare una pagina web con il proprio cv simile a quanto segue: Luigi Rossi Nato il A Indirizzo: Via Numero CAP Città Titoli di studio: 2000 – Maturità classica 2003 – Laurea in Informatica C. Braghin - HTML: nozioni di base

Esercizi (4) • 4) Creare un documento HTML chiamato index2.html all'interno della vostra cartella: • 1. Creare un paragrafo allineato a sinistra usando il tag <P> • 2. Creare un paragrafo allineato al centro usando il tag <DIV> • 3. Creare un paragrafo allineato a destra che contenga almeno 5 righe di testo, con ciascua riga scritta con un font ed un colore diverso C. Braghin - HTML: nozioni di base

Bibliografia • Specifiche W3C (World Wide Web Consortium) • http://www.w3.org/MarkUp/ • Tutorial in Italiano • http://www.html.it/guida/ (di base) • Validatore • http://validator.w3.org/ • Manuale HTML e CSS • AA. VV. HTML 4.01. Apogeo 2001 C. Braghin - HTML: nozioni di base

Il linguaggio HTML - Nozioni di base (2)