Scambio di informazioni tramite Internet Tramite Intenet è possibile accedere e scambiare informazioni (file di testo, audio, video, …) presenti su computer disseminati in tutto il mondo ipertesto (ipermedia) Università di Napoli Partecipano al progetto • l’Università di Napoli • l’Università di Pisa • il Politecnico di Milano Università di Pisa Politecnico di Milano Le informazioni disponibili su un computer sono organizzate come pagine, contenenti link ad altre pagine, in generale memorizzate su altri computer di Internet Le pagine possono contenere anche immagini, tracce sonore, filmati,… 2 Come sono scritte le pagine? Una pagina web è scritta utilizzando il linguaggio HTML HTML = HyperText Markup Language linguaggio per la formattazione di documenti utilizza un insieme di simboli (markup tag) per indicare in che modo un testo deve essere formattato e visualizzato Inventato da Tim Berners Lee (CERN) Versione attuale: HTML 4.0 3 Come sono visualizzate le pagine? Utilizzando un programma browser o navigator (es.: Netscape, Explorer, …) un browser recupera la pagina corrispondente ad un certo indirizzo (es: http://www.dimat.unina.it) interpreta visualizza il testo e lo formatta la pagina sullo schermo in generale un browser è in grado di richiamare software per trasferire file, visualizzare filmati, ascoltare musica, … 4 Un primo esempio di documento HTML <HTML> <HEAD> <TITLE>Esempio 1</TITLE> </HEAD> <BODY> <H1>Primi passi in HTML</H1> <P>Sto scrivendo la mia prima pagina web.<BR> E’ molto semplice, ma per iniziare va bene.</P> <P>Imparerò a realizzare pagine più complesse.</P> </BODY> </HTML> esempio1.htm Documento HTML: un testo in cui compaiono dei tag del linguaggio HTML Tag o markup: una stringa di caratteri racchiusa tra < >; fornisce al browser indicazioni su struttura e formattazione del testo Un documento HTML è scritto, mediante un editor, in un file con estensione .html o .htm 5 I primi tag <HTML> </HTML> - indicano al browser che il file contiene un documento HTML <HEAD> </HEAD> - delimitano la parte del documento HTML che contiene il titolo <TITLE> </TITLE> - delimitano il titolo del documento HTML il titolo è una sorta di identificativo del documento (compare nelle liste di bookmark, è ustato dai motori di ricerca, …) è visualizzato nella barra superiore della finestra del browser e non all’interno della finestra stessa 6 I primi tag (cont.) <BODY> </BODY> - delimitano il contenuto del documento (ciò che è mostrato all’interno della finestra del browser) <H1> </H1> - delimitano un heading (ad es. un titolo), cioè un testo che deve essere mostrato usando caratteri più grandi e/o in grassetto esistono vari livelli di heading (H1, H2, …, H6 – grandezza decrescente) <P> </P> - delimitano un paragrafo un browser ignora qualsiasi indentazione o linea bianca nel testo; senza <P> </P> il documento diventa un unico paragrafo, senza andate a capo, etc. il tag </P> può essere omesso <BR> - genera una interruzione di linea NOTA: in HTML non si fa distinzione tra maiuscole e minuscole 7 Il testo Per default il testo è scritto in Times New Romans <FONT> </FONT> - permette di cambiare il tipo di carattere <FONT FACE=verdana SIZE=2>Prova testo.</FONT> <FONT FACE=“comic sans ms, arial” SIZE=2>Prova testo.</FONT> <FONT FACE=“comic sans ms, arial” SIZE=2 COLOR=blue> Prova testo.</FONT> SIZE varia tra 1 e 7 8 Formattazione dei caratteri <I> </I> - corsivo <B> </B> - grassetto <TT> </TT> - typewriter <U> </U> - sottolineato <Small> </Small> - riduce le dimensioni del carattere <BIG> </BIG> - aumenta le dimensioni del carattere 9 Struttura di un documento HTML Un documento HTML consta di due parti fondamentali: intestazione: contiene informazioni necessarie al browser per una corretta interpretazione del documento, ma non visualizzate nella finestra del browser (delimitata da <HEAD> </HEAD>) corpo : contiene tutti gli elementi che devono essere visualizzati dal browser (testo, immagini, applet Java, …) (delimitato da <BODY> </BODY>) 10 Doctype e meta tag <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//IT"> <HTML> <HEAD> <META name="keywords" content="HTML, realizzazione pagine Web"> <META name="description" content="La mia prima pagina web"> <META name="generator" content="Blocco note di Win2000"> <META name="author" content="Mario Rossi"> <TITLE>Esempio 2</TITLE> </HEAD> <BODY> <H1>Primi passi in HTML</H1> <P>Sto scrivendo la mia prima pagina web.<BR> E’ molto semplice, ma per iniziare va bene.</P> <P>Imparerò a realizzare pagine più complesse.</P> </BODY> </HTML> esempio2.htm 11 Doctype e meta tag (cont.) <DOCTYPE …> - fornisce informazioni al server web che ospita la pagina; è opzionale, se c'è è il primo elemento del documento HTML PUBLIC – il documento è pubblico IETF - il tipo HTML pubblico è gestito dalla Internet Engineering Task Force DTD HTML 4.0 - versione di HTML supportata: 4.0 IT - lingua del documento: italiano <META name="xxx" content="yyy"> - fornisce informazioni sul documento, utilizzate, ad esempio, dai motori di ricerca; va scritta all'interno dell'intestazione del documento xxx indica quale tipo di informazione è fornito da yyy (parole chiave, descrizione del documento, editor usato per scriverlo, autore, …) 12 Corpo: tag e attributi <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//IT"> <HTML> <HEAD> …………… </HEAD> <BODY BGCOLOR="yellow" BACKGROUND="sfondo2.gif" TEXT="blue"> <BODY TEXT="blue"> <CENTER><H1>Primi passi in HTML</H1></CENTER> <DIV ALIGN="center"><H1>Primi passi in HTML</H1></DIV> <P>Sto scrivendo la mia prima pagina web.<BR> E’ molto semplice, ma per iniziare va bene.</P> <P ALIGN="RIGHT">Imparerò a realizzare pagine più complesse.</P> <HR COLOR="#000000" SIZE="6" WIDTH="50%"> </BODY> esempio3a.htm </HTML> esempio3b.htm 13 Corpo: tag e attributi (cont.) Il tag <BODY> può avere attributi che definiscono impostazioni generali per la visualizzazione del documento. Esempio: BGCOLOR="yellow" - imposta il giallo come colore di sfondo E' possibile sostituire al nome in inglese un valore esadecimale BGCOLOR="#FFFF00" (yellow ="#FFFF00") TEXT="blue" - imposta il blu come colore del testo BACKGROUND="sfondo2.gif" - imposta come sfondo l'immagine sfondo.gif 14 Corpo: tag e attributi (cont.) Analogamente: <DIV ALIGN="xxx">, <P ALIGN="xxx"> - indicano che il testo o il paragrafo delimitato deve avere l'allineamento specificato (xxx = left, right, center) <HR …> - produce una linea orizzontale; la linea può essere modificata definendo i suoi attributi (COLOR, SIZE, WIDTH, …) <CENTER> è equivalente a <DIV ALIGN="center"> 15 Formattazione dei caratteri …………… <CENTER><H1>Un altro passo con HTML</H1></CENTER> <H2>Formattazione dei caratteri</H2> <P> <I>Questa frase è visualizzata in corsivo.</I> <BR> <B>Questa, invece, in grassetto.</B> <TT>E questa?</TT> <P ALIGN="center"> <FONT FACE="Arial, Courier" SIZE="4" COLOR="#FF0000"> Ho scelto font, grandezza, colore</FONT> …………… esempio4.htm 16 Elenchi …………… <H2>Elenco numerato</H2> <P> <OL> <LI> prima voce <LI> seconda voce <LI> terza voce </OL> <H2>Elenco non numerato</H2> <P> <UL> <LI> prima voce <LI> seconda voce <LI> terza voce </UL> …………… esempio5.htm 17 Elenchi (cont.) <OL> </OL> - delimita un elenco numerato <UL> </UL> - delimita un elenco non numerato <LI> - individua una voce di un elenco (numerato o non numerato) Il tipo di numerazione o di punto elenco può essere definito con l'attributo TYPE="x" Elenco numerato: x = A, a, I, i Elenco non numerato: x = disc, circle, square esempio6.htm 18 Elenchi (cont.) …………… <DL> <DT> intestazione: <DD> contiene informazioni necessarie al browser per una corretta interpretazione del documento, ma non visualizzate nella finestra del browser <DT> corpo: <DD> contiene tutti gli elementi che devono essere visualizzati dal browser (testo, immagini, applet Java, …) </DL> esempio7.htm …………… <DL> </DL> - delimita un elenco di definizioni <DT> - specifica il "termine da definire" <DD> - specifica la definizione 19 Inserimento di immagini …………… <P> Bla bla bla bla <IMG SRC="faraglioni.jpg"> Una nota immagine di Capri: i faraglioni. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla. <P> Bla bla bla bla <IMG SRC="faraglioni.jpg" ALT="Capri: i faraglioni" WIDTH=150 HEIGHT=200 BORDER=2 VSPACE=20 HSPACE=20 ALIGN=right> Una nota immagine di Capri: i faraglioni. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla. ……………… esempio8.htm 20 Inserimento di immagini (cont.) <IMG SRC="faraglioni.gif"> - inserisce l'immagine faraglioni.gif Alcuni attributi di IMG: ALT – commento all'immagine, didascalia WIDTH, HEIGHT – larghezza e altezza del'immagine (pt) BORDER – spessore del contorno dell'immagine VSPACE, HSPACE – distanza del testo dall'immagine (verticale, orizzontale) ALIGN – posizione dell'immagine rispetto al testo (top, middle, bottom, left, right) I browser riconoscono numerosi formati grafici. Tra i più diffusi: GIF e JPEG 21 Link …………… <A HREF="http://www.dimat.unina2.it">Dipartimento di Matematica, Seconda Università di Napoli</A> ……………… "Clicca" su<A HREF="esempio8.htm">Esempio 8</A> ……………… "Clicca" <A HREF="mailto:[email protected]">qui</A> per inviare un messaggio esempio9a.htm <A HREF="ancora"> </A> - inserisce un collegamento (hyperlink o ancoraggio) ad ancora Possibili valori di ancora: un indirizzo http un file locale un indirizzo di email (preceduto dalla stringa mailto:) 22 Link (cont.) ……………… <A HREF="#sez2">Vai alla sezione 2</A> ……………… <A NAME="sez2"><H1>Sezione2</H1> <P> Bla bla bla bla ……………… esempio9b.htm E' possibile inserire un link ad un punto della medesima pagina (link interno): il link <A HREF="#ancora"> rimanda al punto della pagina contrassegnato da <A NAME="ancora"> 23 Link e colori <BODY BGCOLOR="FFFFDF" TEXT="003399" LINK="red" ALINK="green" VLINK="brown"> ……………… <A HREF="http://www.dimat.unina2.it">Dipartimento di Matematica, Seconda Università di Napoli</A> ……………… "Clicca" su<A HREF="esempio8.htm">Esempio 8</A> ……………… "Clicca" <A HREF="mailto:[email protected]">qui</A> per inviare un messaggio ……………… esempio9c.htm E' possibile modificare i colori di default dei link: LINK – colore di un link non ancora visitato ALINK – colore di in link attivo VLINK – colore di un link visitato 24 Tabelle ………… <TABLE BORDER=1> <TR> <TD>riga 1, col 1</TD> <TD>riga 1, col 2</TD> </TR> <TR> <TD>riga 2, col 1</TD> <TD>riga 2, col 2</TD> </TR> <TABLE> </TABLE> delimita una tabella BORDER – definisce il bordo esterno (BORDER=0 – nessun bordo) <TR> </TR> - delimita una riga <TD> </TD> - delimita un campo </TABLE> ………… esempio10.htm 25 Tabelle: alcuni attributi ………… <TABLE BORDER=5 WIDTH=500 HEIGHT=200 CELLSPACING=5 CELLPADDING=5> <TR HEIGHT=110> <TD WIDTH=200 VALIGN=top ALIGN=right>riga 1, col. 1</TD> <TD WIDTH=200 VALIGN=bottom ALIGN=left>riga 1, col. 2</TD> </TR> <TR> <TD WIDTH=200 VALIGN=middle ALIGN=center>riga 2, col. 1</TD> <TD WIDTH=200 VALIGN=middle ALIGN=center>riga 2, col. 2</TD> </TR> </TABLE> esempio10a.htm ………… <TABLE> WIDTH, HEIGHT – larghezza, altezza complessiva (pt o % della pagina) CELLSPACING, CELLPADDING – distanza tra i campi (pt) <TR> HEIGHT –altezza riga (pt o %) <TD> WIDTH – larghezza (pt o %) VALIGN, ALIGN – posizione del testo in direzione vertic. e orizz. 26 Frame ………… <FRAMESET COLS="20%,*"> <FRAME NAME="sx" SRC="frame1.htm"> <FRAME NAME="dx" SRC="frame2.htm"> </FRAMESET> ………… esempio11.htm ………… <CENTER><B>Questo è il frame denominato <I>sx</I>, in cui è caricato il file <I>frame1.htm</I></B></CENTER> ………… frame1.htm ………… <CENTER><B>Questo è il frame denominato <I>dx</I>, in cui è caricato il file <I>frame2.htm</I></B></CENTER> ………… frame2.htm 27 Frame (cont.) Per creare una pagina divisa in frame sono necessari più file HTML: un file per ogni frame (frame1.htm, frame2.htm) un file principale, che gestisce i precedenti (esempio11.htm) File principale: <FRAMESET> </FRAMESET> - racchiude il codice che richiama e gestisce i frame ROWS – numero di frame orizzontali e loro grandezza (pt o %; * = spazio rimanente) COLS – numero di frame verticali e loro grandezza (pt o %; * = spazio rimanente) <FRAME> </FRAME> - individua il frame NAME – nome del frame SRC – file da caricare nel frame I file da caricare nei frame sono usuali file HTML 28 Frame: alcuni esempi ………… <frameset rows="100,*"> <frame name="alto" src="alto.htm"> <frameset cols="150,*"> <frame name="sx" src="sx.htm"> <frame name="dx" src="dx.htm"> </frameset> </frameset> ………… ………… <frameset cols="120,*"> <frame name="sx" src="frame1.htm"> <frameset rows="20%,60%,20%"> <frame name="alto" src="alto.htm"> <frame name="centr" src="centr.htm"> <frame name="basso" src="basso.htm"> </frameset> </frameset> ………… 29 Frame: alcuni attributi <FRAMESET … BORDER=0> – elimina il bordo del frame <FRAME … NORESIZE> – impedisce il ridimensionamento del frame da parte del visitatore della pagina web <FRAME … SCROLLING="yes" ("no", "auto") > – rende le barre di scorrimento dei frame sempre visibili (mai visibili, visibili solo se servono) <FRAME MARGINHEIGHT=x > – specifica la distanza, x, del contenuto del frame dai margini superiore e inferiore del farme stesso <FRAME MARGINWIDTH=y > – specifica la distanza, y, del contenuto del frame dai margini laterali del frame stesso 30 Frame e link ………… <FRAMESET COLS="20%,*"> <FRAME NAME="sx" SRC="framesx.htm"> <FRAME NAME="dx" SRC="framedx.htm"> </FRAMESET> ………… esempio12.htm ………… <A HREF="newpage.htm">"Clicca" qui</A> per caricare una nuova pagina in questo frame. <BR> <A HREF="newpage.htm" TARGET="sx">"Clicca" qui</A> per caricare una nuova pagina nell'altro frame. framedx.htm ………… <A HREF="newpage.htm"> </A> - carica newpage.htm nello stesso frame <A HREF="newpage.htm" TARGET="nome"> </A> - carica newpage.htm nel frame denominato dx 31 Editor HTML Editor HTML = un programma per la creazione e la gestione di pagine web, dotato di una interfaccia "user-friendly" che rende più agevole o "nasconde" l'inserimento di comandi HTML Alcuni esempi 1st Page 2000 (Envsoft) Front Page (Microsoft) Dreamweaver (Macromedia) 32 Alcuni riferimenti http://www.html.it http://www.ncsa.uiuc.edu/General/Internet/WWW/ HTMLPrimer.html http://www.w3.org/MarkUp 33
Scarica
