v.1 progettazione multimediale – 1 progettazione multimediale html e i tag di base

Progettazione Multimediale – www.pinocappellano.it

1v.1

Progettazione multimedialeProgettazione multimediale

HTML e i tag di base


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!


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).


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


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.


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>


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)


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:


9v.1

HTML: <BODY>HTML: <BODY>

<BODY

BGCOLOR="red"

BGCOLOR="#00ffff"

TEXT="#eeeeee"

LINK="#ffffff"

BACKGROUND="sfondo.gif“

>


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


11v.1

HTML: RGB HTML: RGB (Red, Green, (Red, Green, Blu)Blu)


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


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>


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.


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>


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)


17v.1

AllineamentoAllineamento

<P ALIGN="center">

<P ALIGN="right">

<P ALIGN="left">

<P ALIGN="justify">

<CENTER>testo da centrare</CENTER> (in disuso)(in disuso)

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


19v.1

ElenchiElenchi

HTML supporta due tipi di elenchi:

Ordinati: Non ordinati:


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>


21v.1

Elenchi non ordinatiElenchi non ordinati

<ul>

<li>Cannelloni<li>Lasagna<li>Linguine<li>Manicotti<li>Ravioli<li>Spaghetti

<ul>


22v.1

Caratteri specialiCaratteri speciali

Spazio Copyright ( © ) ©E commerciale ( & ) &Trademark ( ™ ) &tradeN con tilde ( ñ ) ñ

v.1 progettazione multimediale – 1 progettazione multimediale html e i tag di base

Documents