Progettazione Multimediale – www.pinocappellano.it
1v.1
Progettazione multimedialeProgettazione multimediale
HTML e i tag di base
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!
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).
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
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.
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>
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)
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:
Progettazione Multimediale – www.pinocappellano.it
9v.1
HTML: <BODY>HTML: <BODY>
<BODY
BGCOLOR="red"
BGCOLOR="#00ffff"
TEXT="#eeeeee"
LINK="#ffffff"
BACKGROUND="sfondo.gif“
>
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
Progettazione Multimediale – www.pinocappellano.it
11v.1
HTML: RGB HTML: RGB (Red, Green, (Red, Green, Blu)Blu)
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
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>
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.
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>
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)
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)
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 -->
Progettazione Multimediale – www.pinocappellano.it
19v.1
ElenchiElenchi
HTML supporta due tipi di elenchi:
Ordinati: Non ordinati:
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>
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>
Progettazione Multimediale – www.pinocappellano.it
22v.1
Caratteri specialiCaratteri speciali
Spazio Copyright ( © ) ©E commerciale ( & ) &Trademark ( ™ ) &tradeN con tilde ( ñ ) ñ