Introduzione al linguaggio HTML A. Lorenzi - Università di Bergamo - Facoltà di Economia 1
Richiami introduttivi (1) sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate su un server Internet browser : programma che gli utenti Internet usano per visualizzare le pagine (per esempio, Explorer o Netscape) A. Lorenzi - Università di Bergamo - Facoltà di Economia 2
Richiami introduttivi (2) pagine Web: documenti pronti per essere registrati su un server Internet residenza delle pagine Web su un server (Internet provider): sottocartella (directory) di un sito già esistente, oppure nuovo sito URL (Uniform Resource Locator) (indirizzo Internet) : www.unibg.it oppure www.unibg.it/nuovo A. Lorenzi - Università di Bergamo - Facoltà di Economia 3
Attrezzi hw e sw PC, modem, periferiche multimediali editor di testo oppure Web editor (Dreamweaver, FrontPage) browser programma di grafica per trattare immagini e fotografie (GIF, JPG, PNG). programma per FTP (File Transfer Protocol): upload, download A. Lorenzi - Università di Bergamo - Facoltà di Economia 4
Il linguaggio HTML (HyperText Markup Language) Linguaggio per scrivere pagine Web non si tratta di un linguaggio di programmazione, ma piuttosto di un linguaggio di formazione della pagina. Testo + codici (Tag) il browser interpreta i codici contenuti nel testo HTML e li trasforma in comandi per la costruzione della pagina in forma grafica I testi scritti in HTML hanno l'estensione.html o.htm nel nome del file. A. Lorenzi - Università di Bergamo - Facoltà di Economia 5
Per vedere il codice HTML Tag = codici distribuiti all interno del testo e racchiusi tra una coppia di segni < >. Questi sono i codici che consentono al browser la formazione della pagina in formato grafico. Dal menu Visualizza del browser scegliere HTML A. Lorenzi - Università di Bergamo - Facoltà di Economia 6
Organizzazione ipertestuale ipertesto: un insieme di documenti che può essere consultato in modo non sequenziale passaggio da un documento all altro attraverso collegamenti (link) sui quali fare clic con il mouse (parole o immagini) link ad altri siti Internet utilizzando gli indirizzi (URL) navigazione nella rete (netsurfing) A. Lorenzi - Università di Bergamo - Facoltà di Economia 7
<HTML> Struttura del documento HTML <HEAD> informazioni sulle caratteristiche della pagina </HEAD> <BODY> il il testo della pagina con i i paragrafi e i i link </BODY> </HTML> A. Lorenzi - Università di Bergamo - Facoltà di Economia 8
Tag HTML Struttura generale di un tag HTML <codice>. </codice> Per esempio: <B>. </B> inizio e fine delle parole evidenziate in grassetto A. Lorenzi - Università di Bergamo - Facoltà di Economia 9
Titolo e caratteri della pagina <TITLE>...</TITLE> titolo della pagina <Hn>...</Hn> dimensione dei caratteri n da 1 a 6 (1 = grande, 6 = piccolo) <I>...</I> ; <B>...</B> ; <U>...</U> evidenziazioni in corsivo, neretto, sottolineato <CENTER>. </CENTER> riga o paragrafo centrato A. Lorenzi - Università di Bergamo - Facoltà di Economia 10
<P> paragrafo <BR> ritorno a capo Tag singoli <HR> linea orizzontale A. Lorenzi - Università di Bergamo - Facoltà di Economia 11
I colori RGB (Red( Red,, Green, Blue) Tonalità dei tre colori: da 0 a 255 in decimale, da 00 a FF in esadecimale Rosso 255,0,0 FF 00 00 Verde 0,255,0 00 FF 00 Blu 0,0,255 00 00 FF Nero 0,0,0 00 00 00 Bianco 255,255,255 FF FF FF Giallo 255,227,172 FF E3 AC Per esempio: <BODY BGCOLOR= #FFFFFF > colore di sfondo (bianco) A. Lorenzi - Università di Bergamo - Facoltà di Economia 12
Scrivere una pagina Web Aprire Blocco Note in Accessori, scrivere il testo con i tag Dal menu File, Salva con nome assegnare il nome Prova.htm <html> <head> <title>la mia home page</title> </head> <body bgcolor="#ffffff"> <H1>Benvenuto nel mio sito</h1> Dalla <b>home page</b> puoi visitare le altre pagine<br> in modo anche non sequenziale <p>segui i <i>link</i><br> <hr> </body> </html> A. Lorenzi - Università di Bergamo - Facoltà di Economia 13
Visualizzazione nel browser Aprire il file htm dal browser (non in linea): doppio clic sull icona del file A. Lorenzi - Università di Bergamo - Facoltà di Economia 14
Modifica della pagina Dal menu Visualizza oppure dal menu di scelta rapida, che si apre facendo clic con il pulsante destro del mouse in un punto qualsiasi della pagina: scegliere HTML. Si apre il programma Blocco Note per visualizzare il testo con i simboli e codici HTML; modificare il testo. Salvare la pagina modificata (menu File, Salva) Nel browser fare clic sull icona Aggiorna nella barra degli strumenti: la pagina viene visualizzata nella versione modificata. A. Lorenzi - Università di Bergamo - Facoltà di Economia 15
Esportazione dai prodotti Office Salva come HTML...... Conversione automatica dei documenti Office in testi HTML: da Word, PowerPoint, Excel, Access. A. Lorenzi - Università di Bergamo - Facoltà di Economia 16
I link <A HREF ="nomefile"> parola </A> per esempio: <A HREF = http://www.unibg.it"> fai clic qui per accedere al sito dell Università</A> Nella pagina Web la frase tra <A>. </A> compare in colore e sottolineata A. Lorenzi - Università di Bergamo - Facoltà di Economia 17
Esempio di link A. Lorenzi - Università di Bergamo - Facoltà di Economia 18
Le immagini <IMG SRC= nomeimmagine parametri> Per esempio <IMG SRC="univ.jpg" ALT="Università di Bergamo"> A. Lorenzi - Università di Bergamo - Facoltà di Economia 19
Le immagini come link <A HREF=http://www.unibg.it><IMG SRC="univ.jpg" alt="università di Bergamo"></A> A. Lorenzi - Università di Bergamo - Facoltà di Economia 20
Liste Lista puntata <UL> <LI>Roma <LI>Milano <LI>Napoli </UL> Lista numerata <OL> <LI>Roma <LI>Milano <LI>Napoli </OL> A. Lorenzi - Università di Bergamo - Facoltà di Economia 21
Tabelle <TABLE WIDTH="100%" BORDER="1"> <TR> <TD>a1</TD> <TD>b1</TD> <TD>c1</TD> </TR> <TR> <TD>a2</TD> <TD>b2</TD> <TD>c2</TD> </TR> </TABLE> A. Lorenzi - Università di Bergamo - Facoltà di Economia 22
Frame e Form Frame Form A. Lorenzi - Università di Bergamo - Facoltà di Economia 23
Elementi standard di un sito Web pagina di apertura di un sito Internet (Home Page): index.html il logo e l indice del sito nella Home Page un link alla Home Page nelle altre pagine un programma di ricerca all interno del sito una pagina di link ad altri siti Internet un modulo di posta elettronica per richieste od osservazioni (feedback) A. Lorenzi - Università di Bergamo - Facoltà di Economia 24
Link tra le pagine Index.html (home page) Index.html (home page) <a href= pagina2.htm >i nostri prodotti</a> i nostri prodotti pagina2.htm <a href= index.html >torna alla home page</a> pagina2.htm torna alla home page A. Lorenzi - Università di Bergamo - Facoltà di Economia 25