Il linguaggio HTML - Nozioni di base (2)

Transcript

1 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base (2) Dott. Chiara Braghin braghin@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 2 1

2 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 3 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 nm il verde, a 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 4 2

3 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 5 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 6 3

4 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 7 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 8 4

5 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 9 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 10 5

6 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 11 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 12 6

7 Stilizzazione del testo (3) <SAMP> sequenza di caratteri letterali <DFN> <PRE> la definizione di un termine (di solito in grassetto o grassetto corsivo) 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 13 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 14 7

8 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 15 <DIV> Altri Comandi (1) 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 16 8

9 <ADDRESS> Altri comandi (2) 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 17 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 spazio à è < à è " < > C. Braghin - HTML: nozioni di base 18 ò ù ì & > &ograve: ù ì & 9

10 Prologo <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN > 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: C. Braghin - HTML: nozioni di base 19 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 20 10

11 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 21 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 22 11

12 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 23 Bibliografia Specifiche W3C (World Wide Web Consortium) Tutorial in Italiano (di base) Validatore Manuale HTML e CSS AA. VV. HTML Apogeo 2001 C. Braghin - HTML: nozioni di base 24 12