26
Introduzione al linguaggio HTML 1
Introduzione al linguaggio HTML
1
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
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) : http://www.tiscali.it
http://www.google.it
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 (
upload, download
File Transfer Protocol) :
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 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
nel nome del file.
.html o .htm
5
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
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)
Struttura del documento HTML
<HTML>
<HEAD>
informazioni sulle caratteristiche della pagina
</HEAD>
<BODY>
il testo della pagina con i paragrafi e i link
</BODY>
</HTML>
8
Tag HTML
Struttura generale di un tag HTML
<codice> ……. </codice>
Per esempio:
<B> ………. </B>
inizio e fine delle parole evidenziate in grassetto
9
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)
• <I>...</I> ; <B>...</B> ; <U>...</U>
evidenziazioni in corsivo, neretto, sottolineato
• <CENTER>…. </CENTER>
riga o paragrafo centrato
10
Tag singoli
• <P> paragrafo
• <BR> ritorno a capo
• <HR> linea orizzontale
11
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 00 00
• green
• blue
• black
• white
• yellow
Per esempio:
0,255,0
0,0,255
0,0,0
255,255,255
255,227,172
00 FF 00
00 00 FF
00 00 00
FF FF FF
FF E3 AC
<BODY BGCOLOR=”#0000FF ”> colore di sfondo (blu)
12
Altri colori: cyan, pink, orange, ecc
Scrivere una pagina Web
• Aprire Blocco Note
in Accessori , <html>
scrivere il testo con i
tag
• Dal menu File , Salva
con nome…
assegnare il nome
Prova.htm
<head>
<title>La mia home page</title>
</head>
<body bgcolor="#FFFFFF">
<H1>Benvenuto nel mio sito</H1>
Dal a <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>
13
Visualizzazione nel browser
• Aprire il file htm dal browser :
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 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
Esportazione dai prodotti Office
Salva come HTML ...
Conversione automatica dei documenti Office in
testi HTML: da Word, PowerPoint, Excel,
Access.
16
I link
• <A HREF =" nomelink"> testo </A>
per esempio:
<A HREF =”http://www.google.it”> fai clic qui
per accedere a Google</A>
• Nella pagina Web la frase tra <A> …. </A>
compare in colore e sottolineata
17
Esempio di
link
18
Le immagini
• <IMG SRC=“ nomeimmagine
• Per esempio
” parametri >
<IMG SRC="scuola.jpg" ALT="Liceo Muravera">
19
Le immagini come
link
<A HREF=http://www.unibg.it><IMG SRC="univ.jpg"
alt="Università di Bergamo"></A>
20
Lista puntata <UL>
<LI>Roma
<LI>Milano
<LI>Napoli
</UL>
Lista numerata
<OL>
<LI>Roma
<LI>Milano
<LI>Napoli
</OL>
Liste
21
<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>
Tabelle
22
Frame
Frame
e Form
Form
23
Elementi standard
di un sito Web
• pagina di apertura di un sito Internet (
Page ): index.html
Home
• il logo e l’indice del sito nella Home Page
• un link alla Home Page nelle altre pagine
agina di link ad altri siti Internet
• un modulo di posta elettronica per richieste
od osservazioni feedback )
Link tra le pagine
Index.html (home page)
<a href=“pagina2.htm”>i
nostri prodotti</a>
pagina2.htm
<a href=“index.html”>torna
alla home page</a>
25
