introduzione al linguaggio html - altervistasardegna2007.altervista.org/html introduzione.pdf ·...
TRANSCRIPT
![Page 1: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/1.jpg)
Introduzione al linguaggio HTML
1
![Page 2: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/2.jpg)
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
![Page 3: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/3.jpg)
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
![Page 4: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/4.jpg)
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
![Page 5: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/5.jpg)
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
![Page 6: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/6.jpg)
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
![Page 7: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/7.jpg)
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)
![Page 8: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/8.jpg)
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
![Page 9: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/9.jpg)
Tag HTML
Struttura generale di un tag HTML
<codice> ……. </codice>
Per esempio:
<B> ………. </B>
inizio e fine delle parole evidenziate in grassetto
9
![Page 10: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/10.jpg)
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
![Page 11: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/11.jpg)
Tag singoli
• <P> paragrafo
• <BR> ritorno a capo
• <HR> linea orizzontale
11
![Page 12: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/12.jpg)
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
![Page 13: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/13.jpg)
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
![Page 14: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/14.jpg)
Visualizzazione nel browser
• Aprire il file htm dal browser :
14
![Page 15: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/15.jpg)
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
![Page 16: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/16.jpg)
Esportazione dai prodotti Office
Salva come HTML ...
Conversione automatica dei documenti Office in
testi HTML: da Word, PowerPoint, Excel,
Access.
16
![Page 17: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/17.jpg)
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
![Page 18: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/18.jpg)
Esempio di
link
18
![Page 19: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/19.jpg)
Le immagini
• <IMG SRC=“ nomeimmagine
• Per esempio
” parametri >
<IMG SRC="scuola.jpg" ALT="Liceo Muravera">
19
![Page 20: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/20.jpg)
Le immagini come
link
<A HREF=http://www.unibg.it><IMG SRC="univ.jpg"
alt="Università di Bergamo"></A>
20
![Page 21: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/21.jpg)
Lista puntata <UL>
<LI>Roma
<LI>Milano
<LI>Napoli
</UL>
Lista numerata
<OL>
<LI>Roma
<LI>Milano
<LI>Napoli
</OL>
Liste
21
![Page 22: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/22.jpg)
<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
![Page 23: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/23.jpg)
Frame
Frame
e Form
Form
23
![Page 24: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/24.jpg)
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
![Page 25: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/25.jpg)
agina di link ad altri siti Internet
• un modulo di posta elettronica per richieste
od osservazioni feedback )
![Page 26: Introduzione al linguaggio HTML - Altervistasardegna2007.altervista.org/Html Introduzione.pdf · 2017-09-26 · Richiami introduttivi (1) • sito Internet (sito Web o sito WWW) insieme](https://reader035.vdocuments.net/reader035/viewer/2022070913/5fb4b3b18aff3f19c74833b6/html5/thumbnails/26.jpg)
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