Introduzione al linguaggio HTML

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Introduzione al linguaggio HTML"

Carlo Pasini
6 anni fa
Visualizzazioni

1 Introduzione al linguaggio HTML 1

2 Richiami introduttivi (1) sito Internet (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 Web (per esempio: Explorer, Mozilla Firefox, Opera, ecc.) 2

3 Richiami introduttivi (2) pagine Web: documenti pronti per essere registrati su un server Internet residenza delle pagine Web su un server ( Internet provider ) di un sito già esistente, oppure nuovo sito URL ( Uniform Resource Locator ) (indirizzo Internet) : 3

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

5 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 formattazione della pagina. 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. 5

Questi sono i codici che consentono al browser la formazione

6 Per vedere il codice HTML Tag = codici distribuiti al interno del testo e racchiusi tra una coppia di segni < >. Questi sono i codici che consentono al browser la formazione del a pagina in formato grafico. Dal menu Visualizza del browser scegliere HTML 6

7 Organizzazione ipertestuale ipertesto : un insieme di documenti che può essere consultato in modo non sequenziale passaggio da un documento all altro attraverso collegamenti (link) link ad altri siti Internet utilizzando gli indirizzi ( URL ) navigazione nella rete (netsurfing)

8 <HTML> <HEAD> Struttura del documento HTML informazioni sulle caratteristiche della pagina </HEAD> <BODY> il testo della pagina con i paragrafi e i link </BODY> </HTML> 8

9 Tag HTML Struttura generale di un tag HTML <codice>. </codice> Per esempio: . inizio e fine delle parole evidenziate in grassetto 9

10 Titolo e caratteri della pagina <TITLE>...</TITLE> titolo della pagina <H n >...</H n > dimensione dei caratteri n da 1 a 6 (1 = grande, 6 = piccolo) ... ; ... ; ... evidenziazioni in corsivo, neretto, sottolineato <CENTER>. </CENTER> riga o paragrafo centrato 10

11 Tag singoli paragrafo ritorno a capo <HR> linea orizzontale 11

12 I colori RGB ( Red, Green, Blue) Tonalità dei tre colori: da 0 a 255 in decimale, da 00 a FF in esadecimale red 255,0,0 FF green blue black white yellow 0,255,0 0,0,255 0,0,0 255,255, ,227, FF FF FF FF FF FF E3 AC Per esempio: <BODY BGCOLOR= #0000FF > colore di sfondo (blu) Altri colori: cyan, pink, orange, ecc 12

13 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> Dal a home page puoi visitare le altre pagine in modo anche non sequenziale segui i link <hr> </body> </html> 13

14 Visualizzazione nel browser Aprire il file htm dal browser : 14

15 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 del a 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 sul icona Aggiorna nel a barra degli strumenti: la pagina viene visualizzata nel a versione modificata. 15

16 Esportazione dai prodotti Office Salva come HTML... Conversione automatica dei documenti Office in testi HTML: da Word, PowerPoint, Excel, Access. 16

17 I link <A HREF =" nomelink"> testo </A> per esempio: <A HREF = > fai clic qui per accedere a Google</A> Nella pagina Web la frase tra <A>. </A> compare in colore e sottolineata 17

18 Esempio di link 18

19 Le immagini <IMG SRC= nomeimmagine parametri > Per esempio <IMG SRC="scuola.jpg" ALT="Liceo Muravera"> 19

Le immagini come link <A HREF=http://www.unibg.

20 Le immagini come link <A HREF= SRC="univ.jpg" alt="università di Bergamo"></A> 20

21 Liste Lista puntata <UL> <LI>Roma <LI>Milano <LI>Napoli </UL> Lista numerata <OL> <LI>Roma <LI>Milano <LI>Napoli </OL> 21

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

23 Frame e Form Frame Form 23

24 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

25 agina di link ad altri siti Internet un modulo di posta elettronica per richieste od osservazioni feedback )

26 Index.html (home page) Link tra le pagine <a href= pagina2.htm >i nostri prodotti</a> pagina2.htm <a href= index.html >torna alla home page</a> 25

Documenti analoghi

Introduzione al linguaggio HTML. A. Lorenzi - Università di Bergamo - Facoltà di Economia 1

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