![Page 1: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/1.jpg)
Progettazione Multimediale – www.pinocappellano.it
1v.1
Progettazione multimedialeProgettazione multimediale
HTML e i tag di base
![Page 2: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/2.jpg)
Progettazione Multimediale – www.pinocappellano.it
2v.1
HTML: Il linguaggio del WebHTML: Il linguaggio del Web
Le pagine Web sono file di testo, scritte in HTML (Hypertext Markup Language).
HTML è un linguaggio di formattazione e permette di descrivere la disposizione e le caratteristiche di tutti gli elementi presenti all’interno di un documento.
HTML NON è un linguaggio di programmazione!
![Page 3: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/3.jpg)
Progettazione Multimediale – www.pinocappellano.it
3v.1
Strumenti per creare documenti Strumenti per creare documenti HTMLHTML
I documenti HTML sono file di testo che possono essere creati con:
• un Editor di testi come NotePad (Blocco Note) o WordPad.
• Editor orientati al codice come Arachnophilia.• programmi che convertono in HTML come Microsoft
Word.• programmi WYSIWYG (What you see is what you get
= Ciò che vedi è ciò che otterrai) come Dreamweaver (o Front Page).
![Page 4: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/4.jpg)
Progettazione Multimediale – www.pinocappellano.it
4v.1
immagini
elenco
E’ buona cosa pianificare sempre in anticipo l’aspetto della pagina Web prima di iniziare a scrivere il codice.
Creare un documento HTMLCreare un documento HTML
titolo 1
titolo 3
testo in corsivo
http://www.comune.torino.it/olimpiadi/torinoyou/
paragrafi
testo in grassetto
links
![Page 5: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/5.jpg)
Progettazione Multimediale – www.pinocappellano.it
5v.1
HTML - SintassiHTML - Sintassi
Il contenuto del Documento è ciò che il navigatore vede, come testo, titoli, immagini, ecc.
I Tag (o comandi) sono il codice HTML che controllano l’aspetto del contenuto del documento.
![Page 6: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/6.jpg)
Progettazione Multimediale – www.pinocappellano.it
6v.1
Formato dei tag HTMLFormato dei tag HTML
I Tag sono identificati da parentesi angolari < >
1. I Tag di apertura < > indicano al browser di applicare delle caratteristiche e contengono:
• Il Nome del Tag – caratteristica generale
• Le Proprietà – indicano eventuali ulteriori informazioni
2. I Tag di chiusura </ > indicano al browser di smettere di applicare quelle caratteristiche
<Nome del Tag Proprietà=“Valore”> Contenuto del documento </Nome del Tag>
Esempio: <h1>Liceo Alfieri</h1>
![Page 7: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/7.jpg)
Progettazione Multimediale – www.pinocappellano.it
7v.1
Tag HTML strutturaliTag HTML strutturali
<html>
<head>
<title> Nome della pagina Web </title>… … altre meta informazioni (non visibili)altre meta informazioni (non visibili)
</head>
<body>
Contenuto del Documento (visibile)
</body>
</html>• un documento HTML inizia sempre con il tag <HTML> e termina sempre con il tag </HTML>• il linguaggio HTML è case-insensitive e quindi <HTML>, <html>, <Html> sono tutti tag leciti (lo stesso vale per gli altri tag)
![Page 8: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/8.jpg)
Progettazione Multimediale – www.pinocappellano.it
8v.1
HTML: <BODY>HTML: <BODY>
<BODY
BGCOLOR="colore sfondo"
BACKGROUND="nome file dell’immagine"
TEXT="colore testo"
LINK="colore link da visitare"
VLINK="colore link visitato"
ALINK="colore link selezionato"
>
NB: l’ordine con cui si scrivono le proprietà non è importante
Alcune proprietà del tag body:
![Page 9: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/9.jpg)
Progettazione Multimediale – www.pinocappellano.it
9v.1
HTML: <BODY>HTML: <BODY>
<BODY
BGCOLOR="red"
BGCOLOR="#00ffff"
TEXT="#eeeeee"
LINK="#ffffff"
BACKGROUND="sfondo.gif“
>
![Page 10: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/10.jpg)
Progettazione Multimediale – www.pinocappellano.it
10v.1
HTML: RGB HTML: RGB (Red, Green, (Red, Green, Blu)Blu)
ogni colore può essere codificato mediante tre numeri compresi tra 0 e 255 che rappresentano le quantità di ROSSO VERDE e BLU presenti nel colore stesso
ogni numero compreso tra 0 e 255 deve essere trasformato nella rappresentazione esadecimale corrispondente (base 16)
con questa codifica si possono rappresentare più di 16.000.000 di colori diversi
![Page 11: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/11.jpg)
Progettazione Multimediale – www.pinocappellano.it
11v.1
HTML: RGB HTML: RGB (Red, Green, (Red, Green, Blu)Blu)
![Page 12: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/12.jpg)
Progettazione Multimediale – www.pinocappellano.it
12v.1
HTML: colori Web SafeHTML: colori Web Safe
16 colori – detti Web Safe - sono riconosciuti universalmente da tutti i browser e possono essere indicati con il loro nome
![Page 13: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/13.jpg)
Progettazione Multimediale – www.pinocappellano.it
13v.1
I caratteri (Font)I caratteri (Font)
<FONT Face=“Arial”>testo testo</FONT>
<FONT Color=“#FF0000”>testo</FONT>
<FONT Size=“3”>testo testo</FONT>
<FONT Face=“Arial” Size=“3” color=“#FF0000”>testo testo</FONT>
Per definire il carattere si usa il tag <FONT>
![Page 14: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/14.jpg)
Progettazione Multimediale – www.pinocappellano.it
14v.1
Il Tag Titolo <hIl Tag Titolo <hnn>>
HTML prevede sei livelli di titoli, numerati da <h1> a <h6>, dove <h1> è quello più “grande” e <h6> è quello più “piccolo”.
I Titoli sono sempre in grassetto ma NON sono centrati automaticamente.
![Page 15: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/15.jpg)
Progettazione Multimediale – www.pinocappellano.it
15v.1
Liceo Classico Statale "Vittorio Alfieri"
corso Dante, 80 - 10126 Torino
Classi:I ginnasio
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
II ginnasio
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
L’aspetto dei Titoli (<hL’aspetto dei Titoli (<hnn>)>)
<h1>
<h2>
<h4>
![Page 16: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/16.jpg)
Progettazione Multimediale – www.pinocappellano.it
16v.1
Altri Tag di baseAltri Tag di base
Tag di “a capo”: <BR> Non inizia un nuovo paragrafo <P> Inizia un nuovo paragrafo
Tag di stile del testo: <strong> Grassetto </strong>
<b> Grassetto </b> (in disuso)(in disuso)
<em> Corsivo o Italico </em> <i> Corsivo o Italico </i> (in disuso)(in disuso)
![Page 17: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/17.jpg)
Progettazione Multimediale – www.pinocappellano.it
17v.1
AllineamentoAllineamento
<P ALIGN="center">
<P ALIGN="right">
<P ALIGN="left">
<P ALIGN="justify">
<CENTER>testo da centrare</CENTER> (in disuso)(in disuso)
![Page 18: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/18.jpg)
Progettazione Multimediale – www.pinocappellano.it
18v.1
HTML – Altri TagHTML – Altri Tag
linee orizzontali
<HR WIDTH=“75%" SIZE="3"> testo lampeggiante (solo per Netscape)(solo per Netscape)
<BLINK> questo testo lampeggia </BLINK> testo scorrevole (solo per Explorer)(solo per Explorer)
<MARQUEE> questo testo scorre </MARQUEE> commenti
<!-- questo testo non viene visualizzato -->
![Page 19: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/19.jpg)
Progettazione Multimediale – www.pinocappellano.it
19v.1
ElenchiElenchi
HTML supporta due tipi di elenchi:
Ordinati: Non ordinati:
![Page 20: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/20.jpg)
Progettazione Multimediale – www.pinocappellano.it
20v.1
Elenchi ordinati (numerati)Elenchi ordinati (numerati)
<ol><li>Un computer<li>Una connessione a internet<li>Tanti appunti da scambiare<li>Le ultime info di cui parlare<li>Tanti amici chiusi in casa a studiare<li>Il tutto amalgamato dalla possibilità di continuare a comunicare
</ol>
![Page 21: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/21.jpg)
Progettazione Multimediale – www.pinocappellano.it
21v.1
Elenchi non ordinatiElenchi non ordinati
<ul>
<li>Cannelloni<li>Lasagna<li>Linguine<li>Manicotti<li>Ravioli<li>Spaghetti
<ul>
![Page 22: V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base](https://reader036.vdocuments.pub/reader036/viewer/2022081504/5542eb65497959361e8d069b/html5/thumbnails/22.jpg)
Progettazione Multimediale – www.pinocappellano.it
22v.1
Caratteri specialiCaratteri speciali
Spazio Copyright ( © ) ©E commerciale ( & ) &Trademark ( ™ ) &tradeN con tilde ( ñ ) ñ