Hyper Text Markup Language HTML

Transcript

1 Operatore informatico giuridico A.A 2003/2004 I Semestre Hyper Text Markup Language HTML Dr. Raffaella Brighi HTML HTML è un linguaggio di marcatura (markup) per la creazione di ipertesti Le sezioni di testo e gli oggetti del documento sono contrassegnate (marcate) da codici (tag) che le identificano e specificano come devono essere trattate I Web Browser interpretano le istruzioni del linguaggio HTML e visualizzano il contenuto del documento

2 HTML come standard HTML non è un linguaggio di programmazione: non permette di compiere calcoli, iterazioni e gestire strutture dati HTML è uno standard promosso dal W3C World Wide Web Consortium L ultimo standard HTML è HTML 4.01 (W3C Reccomendation del 24 dicembre 1999) Agosto 2002, XHTML 1.0 riformulazione di HTML in XML Gli elementi Il linguaggio HTML prevede un insieme di elementi, ognuno dei quali ha un preciso significato. Ogni elemento è composto da un tag iniziale, da un contenuto e da un tag finale e da eventuali attributi Il tag è una stringa di caratteri (codice) delimitata dal segno < >, che riporta il nome dell elemento e i suoi attributi. Gli attributi sono informazioni sull elemento che non fanno parte del contenuto, sono scritti dentro al tag iniziale ed hanno la forma attributo= Valore. Ci sono attributi obbligatori ed attributi facoltativi

3 Gli elementi Elemento TITLE <TITLE>Curriculum Vitae</TITLE> Tag iniziale (apertura) Contenuto Elemento FONT Tag finale (chiusura) <FONT size= 8 >testo testo testo</font> Tag iniziale (apertura) Attributo Valore Contenuto Tag finale (chiusura) Gli elementi Gli elementi del documento hanno funzioni diverse: dichiarazioni, formattare, inserire oggetti, creare collegamenti, etc. Alcuni elementi non richiedono un tag di chiusura poiché non contengono testo, ma sono semplici istruzioni per il browser (es. <BR> testo a capo) I tag non sono case sensitive

4 Editor testuali vs WYSIWYG Gli editor HTML sono strumenti per la creazione di pagine HTML. Sono fondamentalmente di due tipi Editor testuali ed Editor WYSIYG. Editor testuali: sono normali editor di testo, in cui l utilizzatore scrive direttamente il codice HTML. Alcuni di essi possono agevolare la scrittura del codice fornendo comandi per l inserimento rapido degli elementi e colorando i tag in modo da evidenziarli rispetto al contenuto. Editor testuali vs WYSIWYG Editor WYSIWYG (What You See Is What You Get ). Questi editor visualizzano gli oggetti, le immagini e il testo della pagina così come verranno visualizzati dal browser. Lo sviluppatore può agire direttamente su tali oggetti, componendo a suo piacimento la pagina e l editor genera dinamicamente il codice HTML. Esempi sono Frontpage e Dreamwaver.

5 Documento HTML: creazione Un documento HTML è un file di testo, salvato con estensione.htm oppure.html Un documento contenente testo, salvato in formato.htm, senza alcun tag HTML viene comunque visualizzato dal browser Esercizio Avviare Blocco Note, digitare la frase Questo è il mio primo documento HTML e salvare il file con nome prova.htm; chiudere il file. Aprire il file con il Browser. Nota. Il codice HTML può essere modificato in due modi: (1) aprendo nuovamente il file con Blocco Note, (2) da IE - menu visualizza - voce HTML. Per vedere le modifiche è necessario fare il refresh della pagina Documento HTML: struttura Un documento HTML si compone di due parti: l'intestazione e il corpo del documento. Il corpo del documento contiene tutti gli elementi della pagina visualizzati dal browser. Sono elementi del corpo il testo, le immagini, le applet Java ecc.. L'intestazione contiene le informazioni necessarie al browser per una corretta interpretazione del documento, ma non visualizzate nella pagina. Sono elementi dell intestazione il titolo della pagina, i termini chiave per i motori di ricerca, le informazioni sull autore del documento ecc.

6 Elementi dell intestazione Gli elementi dell'intestazione che trattiamo in questo corso sono: DOCTYPE HTML HEAD TITLE META Elemento DOCTYPE DOCTYPE, secondo le indicazioni del W3C, deve essere il primo elemento ad aprire il documento. E un elemento che non prevede un tag di chiusura e fornisce informazioni al server Web che ospita la pagina. DOCTYPE viene scritto in una forma standard e fornisce alcune informazioni sul tipo di HTML utilizzato nel documento: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.1//EN"> L'uso di DOCTYPE non è obbligatorio e può essere omesso.

7 Elemento HTML L elemento HTML apre e chiude il documento HTML. Tutto il contenuto del file HTML è racchiuso tra i tag <HTML> e</html> Questo elemento indica al browser che il documento è in formato HTML. Esempio: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.1//EN"> <HTML>. </HTML> Elemento HEAD L elemento HEAD, composto da un tag di apertura <HEAD> e da un tag di chiusura </HEAD>, è posto subito dopo l'apertura del tag <HTML>. HEAD racchiude l'intestazione vera e propria del documento; al suo interno viene inserito il titolo del documento (elemento TITLE), le informazioni necessarie ai browser, ai motori di ricerca o al server web (elementi META), blocchi di funzioni di linguaggi di script (elemento SCRIPT) e blocchi di stili (elemento STYLE) oppure link a risorse esterne di script o di stili (elemento LINK)

8 Elemento TITLE I tag <TITLE></TITLE> racchiudono il titolo della pagina. Il titolo viene solitamente visualizzato dai browser nella barra del titolo oppure, in caso di salvataggio dell'url con "Aggiungi a preferiti" (per MsIe), il tag TITLE dà il nome al collegamento. Il titolo è anche utilizzato da alcuni motori di ricerca per indicizzare la pagina e trovare parole chiave. Esempio <TITLE>Curriculum vitae di Mario Rossi</TITLE> Elemento META L elemento META consente di specificare informazioni, che non vengono direttamente presentate sulla pagina, per i motori di ricerca o per una qualsiasi applicazione che elabori il documento. L elemento META non necessita di tag di chiusura e segue la sintassi: <META name= nome dell elemento content= valore > Possiamo quindi definire elementi META, in base al nostro scopo. Ne esistono però alcuni predefiniti utilizzati da quasi tutti i motori di ricerca.

9 Elemento META I META elementi utilizzati generalmente sono i seguenti. Keywords: il cui contenuto riporta un elenco di termini che descrivono il contenuto della pagina. es. <META name="keywords" Content="curriculum vitae, consulente del lavoro"> Author: il cui contenuto riporta l autore del documento es. <META name="author" content="mario Rossi"> Description: il cui contenuto riporta una descrizione breve della pagina es. <META name="description" content="il mio curriculum in HTML"> Generator: il cui contenuto riporta informazioni relative al sw utilizzato per creare la pagina es. <meta name="generator" content="blocco note di win2000"> Esercizio - Step 1 File di esempio: home0.html <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.1//EN"> <HTML> <HEAD> <META name="keywords" Content="curriculum vitae, consulente del lavoro"> <META name="description" content="il mio curriculum in HTML"> <META name="generator" content="blocco note di Win2000"> <META name="author" content="mario Rossi"> <TITLE>Curriculum vitae di Mario Rossi</TITLE> </HEAD> </HTML>

10 Il corpo del documento: BODY L'elemento BODY è posto immediatamente dopo la chiusura del tag </HEAD>; prevede necessariamente un tag di apertura e uno di chiusura ed al suo interno si sviluppa il corpo del documento. La sintassi corretta per l'elemento <BODY> è la seguente: <BODY> Contenuto del documento </BODY> Il tag <BODY> è utilizzato anche per impostare alcuni attributi di visualizzazione per il documento, quali lo sfondo o le proprietà dei link. Lo sfondo: attributi BGCOLOR e BACKGROUND L attributo BGCOLOR imposta un colore di sfondo alla pagina. La sintassi è la seguente: <BODY BGCOLOR= red"> E' possibile sostituire al nome in inglese valori esadecimali che indicano le parti di rosso, di verde e di blu da cui il colore finale è composto. <BODY BGCOLOR="#ff0000"> L attributo BACKGROUND visualizza un immagine come sfondo della pagina. La sintassi è la seguente: <BODY BACKGROUND="sfondo.gif">

11 Altri attributi di BODY text: imposta il colore del testo del documento. Il valore predefinito è nero. link: imposta il colore dei link non ancora visitati. Il valore predefinito è blu. alink:imposta il colore dei link attivi (link che si stanno visitando). vlink: imposta il colore dei link visitati Esercizio - Step 2 Aggiungere nell esempio home0.htm la definizione del corpo del documento: <!-- impostazione del colore di sfondo--> <BODY BGCOLOR="#FFCC33">. </BODY> Nota. L elemento <!-- xxxxxx --> è un elemento commento e non viene interpretato dal browser

12 Formattare il testo FONT: l elemento FONT specifica alcune caratteristiche di formattazione del carattere che, in fase di visualizzazione, verranno applicate dal browser al testo racchiuso. <FONT face= arial size=3 color= red > testo testo testo </FONT> B: il testo racchiuso viene visualizzato in grassetto (bold) <B> testo in grassetto </B> I: il testo racchiuso viene visualizzato in corsivo (italic) <I> testo in corsivo </I> U: il testo racchiuso viene visualizzato sottolineato (underline) <U> testo sottolineato </U> Formattare titoli: da H1 ad H6 Gli elementi Hn (n è un numero da 1 a 6) vengono utilizzati per indicare i titoli delle diverse sezioni in cui la pagina può essere strutturata. Sono previsti 6 livelli gerarchici e H1 corrisponde al livello più alto. Questi elementi possono essere poi utilizzati da agenti sw per l elaborazione della pagina, ad esempio per creare un indice automatico. Gli elementi Hn forniscono comunque una formattazione al testo che racchiudono, evidenziando il diverso livello di importanza.

13 Creare paragrafi: elemento P L elemento P identifica un nuovo paragrafo del testo. Il testo racchiuso tra i tag <P> e </P> viene visualizzato su una nuova riga e posizionato a destra, a sinistra o al centro. Se non specificato il tag <P> allinea il testo di default sulla sinistra. <P ALIGN=left> definisce l inzio di un paragrafo e allinea sulla sinistra. <P ALIGN=right> definisce l inizio di un paragrafo e allinea sulla destra. <P ALIGN=center> definisce l inizio di un paragrafo ed allinea al centro. Andare a capo: elemento BR L elemento BR inserisce una interruzione di riga, il testo viene mandato a capo ma non cambiano le caratteristiche di allineamento. L elemento BR non prevede un tag di chiusura

14 Linee orizzontali: elemento HR L elemento HR inserisce una linea orizzontale nella pagina. Non prevede un tag di chiusura. esempio <HR align="center" size="2" width="400" color="red" > Esercizio - Step 3.1 File home1.htm, uso dei tag <P>,<H1>, <BR>, <FONT>, <B>, <I> <!-- paragrafo centrato--> <P align=center> <FONT face="courier new" size=10> Mario Rossi</FONT> </P> <!--linea orizzontale --> <HR color=brown> <!-- paragrafo allineato a sx, testo formattato in grassetto, uso del tag BR--> <P align=left> <FONT face="courier" size=4><b> Studente del corso di laurea per Consulente del lavoro<br> Facoltà di Giurisprudenza <BR> Università degli Studi di Bologna. </B> </FONT> </P>

15 Esercizio- Step 3.2 <H2>Dati personali</h2> <!-- paragrafo allineato a sx, testo in corsivo--> <P align=left> <FONT face="courier" size=4> <I>Address </I>Via Roma, Bologna - Italy<BR> <I>Tel </I> <BR> <I>Fax </I> <BR> <I> </I>rossi@libero.it<BR> </FONT></P> Elemento DIV L'elemento DIV viene utilizzato per allineare tutti gli elementi racchiusi (testo, immagini, ecc.) a sinistra, destra e centro della pagina. L allineamento viene specificato con l'attributo ALIGN.

16 Immagini: elemento IMG Le immagini vengono inserite in una pagina specificando un elemento IMG. L elemento IMG non ha bisogno di un tag chiusura e segue la seguente sintassi: <IMG SRC= imagine.gif WIDTH= 200 HEIGHT= 300 BORDER=2 VSPACE=3 HSPACE=3 ALT= Descrizione dell immagine > SRC: indica il nome del file ed il suo percorso (relativo o assoluto) ALT: riporta una descrizione che in visualizzazione viene mostrata quando ci si sofferma col puntatore del mouse sull immagine WIDTH: larghezza espressa in pixel HIGHT: altezza espressa in pixel BORDER: assegna un bordo all immagine, il valore predefinito è zero VSPACE, HSPACE: impostano le distanze del lati dell immagine (verticali ed orizzontali) dagli oggetti più vicini. Esercizio - Step 4 File home1.htm <!-- uso del tag DIV, inserimento di un'immagine--> <DIV align=center> <IMG SRC="foto.bmp" ALT="Foto di Mario Rossi"></IMG><BR> <FONT face="courier" size=2> <I>La mia foto </I></FONT> </DIV>

17 Creare link a risorse esterne L elemento specifico per creare nella propria pagina link (collegamenti ipertestuali) a risorse esterne o interne è l elemento A. L elemento A prevede necessariamente un tag di apertura e un tag di chiusura. Può racchiudere testo, immagini o elementi multimediali. <A HREF =" target ="new"> Università degli Studi di Bologna</A> L attributo HREF contiene l URL della pagina da raggiungere. Il testo o gli oggetti racchiusi dai tag diventano navigabili, vale a dire cliccando sopra di essi il browser apre l URL indicato da HREF. L URL può essere assoluto o relativo. L attributo target si utilizza solitamente nelle pagine divise in frame (aree) ed indica in quale frame deve essere caricata la pagina a cui si rimanda. Nell esempio riportato il valore new significa che la pagina deve essere mostrata in una nuova finestra del browser. Creare link a risorse esterne E' possibile inserire collegamenti che aprono automaticamente il programma di posta predefinito con il campo TO già impostato. Esempio <A HREF="mailto:mario.rossi@libero.it">mario.rossi@libero.it</A>

18 Esercizio - Step 5 File di esempio home2.html <!--linea orizzontale --> <HR color="brown"> <!-- paragrafo allineato a sx, testo formattato in grassetto, uso del tag BR--> <P align=left> <FONT face="courier" size=4><b> Studente del corso di laurea per Consulente del lavoro<br>facoltà di Giurisprudenza<BR> <A HREF=" target="new"> Università degli Studi di Bologna</A></B> </FONT></P>. <I> </I><A HREF="mailto:rossi@libero.it">rossi@libero.it</A><BR> Creare link interni al documento Per creare link a punti interni al documento stesso occorre: inserire il tag <A name= nome_ancora > nel punto del documento da raggiungere impostare il link, seguendo la sintassi <A href= #nome_ancora > testo </A>

19 Gli elenchi: elementi OL e UL L elemento OL consente di inserire nella pagina un elenco ordinato di voci. Sintassi: <OL type=.. > <LI>prima voce <LI> seconda voce </OL> type=a lettere minuscole type=a lettere maiuscole type=i numeri romani minuscoli type=i numeri romani maiuscoli valore predefinito: numeri arabi Gli elenchi: elementi OL e UL L elemento UL consente di inserire nella pagina un elenco non ordinato di voci. Sintassi: <UL type=.. > <LI>prima voce</li> <LI> seconda voce </LI> </UL> type=circle, pallini vuoti type=disc, pallini pieni type=square, quadratini pieni

20 Esercizio - Step 6 File di esempio home3.html <!-- esempio di liste--> <FONT face="courier new" size=4> <UL type=square> <LI><I>1998</I> - Corso di francese presso...</li> <LI><I>1999</I> - Corso di ingelse presso...</li> <LI><I>2000</I> - Corso di informatica presso...</li> <LI><I>2001</I> - Diploma di maturità scientifica, conseguita presso il liceo..., con votazione 98/100 </LI> <LI><I>2002</I> - Iscritto al primo anno del cdl Consulente del Lavoro presso l'univeristà degli Studi di Bologna, Facoltà di Giurisprudenza </LI> </FONT> Le tabelle Per inserire una tabella in una pagina HTML si utilizza l elemento TABLE La sintassi del tag di apertura è la seguente: <TABLE width=200 height=300 border=1> l attributo width ed height, non obbligatorie, indicano la larghezza e l altezza della tabella e possono essere espresse in pixel (come nell esempio) o come percentuale della pagina l attributo border permette di indicare lo spessore del bordo della tabella All interno dell elemento TABLE devono essere specificati inizio e chiusura di righe e colonne. A questo scopo si utilizzano gli elementi TR e TD

21 Le tabelle L elemento TR delimita le righe della tabella. Ogni riga inizia quindi con il tag <TR> e termina con il tag </TR>. All interno della riga, l elemento TD delimita le singole celle, ogni cella inizia con <TD> e termina con </TD> Esempio: <TABLE> <TR> <TD>cella 1</TD> <TD>cella 2</TD> PRIMA RIGA </TR> <TR> <TD>cella 1</TD> SECONDA RIGA <TD>cella 2</TD> </TR> </TABLE> Esercizio Step 7 File di esempio home3.html <!-- esempio di tabelle --> <DIV align=center> <TABLE> <!-- prima riga--> <TR BGCOLOR="gray"> <TD><FONT face="arial" size=3><b>periodo</b></font></td> <TD><FONT face="arial" size=3><b>descrizione</font></td> </TR> <TR BGCOLOR="white"> <TD><FONT face="arial" size=3><b>estate 1997</B></FONT></TD> <TD><FONT face="arial" size=3>barista presso Caffè de Paris di Rimini</FONT></TD> </TR> <TR BGCOLOR="white"> <TD><FONT face="arial" size=3><b>estate 1998</B></FONT></TD> <TD><FONT face="arial" size=3>cameriere presso pizzeria Bella Napoli di Rimini</FONT></TD> </TR>... </TABLE> </DIV>

22 Riferimenti Alcune risorse in rete: Guide di base: Guida HTML su HTML.it HTML 4.01 Specification W3C Recommendation 24 December