HTML e CSS Concetti base Comunicazione Multimediale.

HTML e CSSHTML e CSS

Concetti baseConcetti base

Comunicazione MultimedialeComunicazione Multimediale

Hyper Text Markup LanguageHyper Text Markup Language

Structured Generalized Markup Language Structured Generalized Markup Language (SGML)(SGML)

Nasce in ambiente editorialeNasce in ambiente editoriale Testo non formattato ma contrassegnato Testo non formattato ma contrassegnato

da coppie di marcatori <XX> </XX>da coppie di marcatori <XX> </XX> Document Type Definition (DTD) per ogni Document Type Definition (DTD) per ogni

categoria di documenticategoria di documenti

Com

un

icaz

ion

e M

ult

imed

iale

15\

03\2

006

Hyper Text Markup LanguageHyper Text Markup Language Serve per costruire una pagina web che ha estensione Serve per costruire una pagina web che ha estensione ..htmhtm

o .htmlo .html Può essere scritto con il semplice blocco notes o con Può essere scritto con il semplice blocco notes o con

diversi software (diversi software (editoreditor) che sono specializzati per ) che sono specializzati per favorire e controllare la sintassi del linguaggio (Front favorire e controllare la sintassi del linguaggio (Front Page, Dreamweaver, …)Page, Dreamweaver, …)

La pagina web può essere visualizzata solo grazie ad La pagina web può essere visualizzata solo grazie ad un particolare programma che interpreta i tags del un particolare programma che interpreta i tags del linguaggio html (browser) Internet Explorer, linguaggio html (browser) Internet Explorer, Netscape,eccNetscape,ecc

Com

un

icaz

ion

e M

ult

imed

iale

15\

03\2

006


I TAGS, o elementi, che compongono HTML I TAGS, o elementi, che compongono HTML devono essere racchiusi fra parentesi angolari devono essere racchiusi fra parentesi angolari <<cosìcosì>> Si tratta di parole chiave, termini in lingua Si tratta di parole chiave, termini in lingua inglese. inglese.

L'elemento (tag) smette di produrre il suo L'elemento (tag) smette di produrre il suo effetto nel momento in cui lo stesso viene effetto nel momento in cui lo stesso viene ripetuto facendolo precedere da una barra ripetuto facendolo precedere da una barra laterale laterale // contenuta sempre all'interno delle contenuta sempre all'interno delle parentesi angolari </così>. parentesi angolari </così>. C

omu

nic

azio

ne

Mu

ltim

edia

le 1

5\03

\200

6

Struttura di un documentoStruttura di un documento

<HEAD> ... </HEAD>

<HTML>

<BODY>....</BODY>

</HTML>

Com

un

icaz

ion

e M

ult

imed

iale

15\

03\2

006

HTML Es.1HTML Es.1è formato da definizioni, elementi, tags, marcatoriè formato da definizioni, elementi, tags, marcatori

<html><html>

<head><head>

<title> Primo esempio</title><title> Primo esempio</title>

</head></head>

<body><body>

 PRIMA RIGA PRIMA RIGA 

 SECONDA RIGA SECONDA RIGA 

</body></body>

</html></html>


HTML: tutto il documentoHTML: tutto il documentoHEAD: testata (metainformazione)HEAD: testata (metainformazione)TITLE = titolo TITLE = titolo BODY = corpo dell'informazioneBODY = corpo dell'informazioneP = paragrafoP = paragrafo

<html><head> <title> Secondo esempio</title></head><body> Riga a sinistra Riga a destra Riga al centro Riga in cui verifichiamo la struttura giustificata </body></html>

HTML Es.2HTML Es.2

Da notare in esecuzione che gli allineamenti sono rispettati qualsiasi dimensione abbia la finestra del browser

<html><head> <title> terzo esempio</title></head><body> Riga a sinistra Riga a destra Riga al centro Riga in cui verifichiamo la struttura giustificata </body></html>

HTML Es.3HTML Es.3

<html><head> <title> Quarto esempio</title></head><body> ITALIA TERRA DI EMIGRANTI <center> <img src="immagini/immigrazioneitaliani2.jpg" width="340" height="219" border="2" alt="Italiani partono per l'America" ></center> </body></html>

HTML Es.4HTML Es.4

<html><head> <title> Sesto esempio</title></head><body> ITALIA TERRA DI EMIGRANTI <center> <img src="immagini/immigrazioneitaliani2.jpg" width="340"

height="219" border="2" alt="Italiani partono per l'America"

></center> </body></html>

HTML Es.5HTML Es.5

<html><head> <title> Quarto esempio</title><META NAME="description" CONTENT="L'Italia come terra di emigranti e di immigrati"><META NAME="keywords" CONTENT="Italia, emigranti, immigrati, immigrazione, clandestini"></head><body bgcolor="red" topmargin="10" bottommargin="10" leftmargin="5" rightmargin="5" link="purple" vlink="fuchsia" text="white"> ITALIA TERRA DI EMIGRANTI <center> <img src="immagini/immigrazioneitaliani2.jpg" width="340" height="219" border="2" alt="Italiani partono per l'America" > ITALIA DI IMMIGRATI</center> </body></html>

HTML Es.6HTML Es.6

www.cast.org/bobby

<html><head> <title> Quarto esempio</title><META NAME="description" CONTENT="L'Italia come terra di emigranti e di immigrati"><META NAME="keywords" CONTENT="Italia, emigranti, immigrati,immigrazione, clandestini"></head><body bgcolor="red" topmargin="10" bottommargin="10" leftmargin="5" rightmargin="5" link="purple" vlink="fuchsia" text="white"><EMBED src="troto.mid" WIDTH="145" HEIGHT="35" AUTOSTART="true" LOOP="true"> ITALIA TERRA DI EMIGRANTI <center> <img src="immagini/immigrazioneitaliani2.jpg" width="340" height="219" border="2" alt="Italiani partono per l'America" > ITALIA DI IMMIGRATI</center> </body>

HTML Es.7HTML Es.7

<html><head> <title> Quarto esempio</title><META NAME="description" CONTENT="L'Italia come terra di emigranti e di immigrati"><META NAME="keywords" CONTENT="Italia, emigranti, immigrati,immigrazione, clandestini"><bgsound src="troto.mid" loop="-1"></head><body bgcolor="red" topmargin="10" bottommargin="10" leftmargin="5" rightmargin="5" link="purple" vlink="fuchsia" text="white"> ITALIA TERRA DI EMIGRANTI <center> <img src="immagini/immigrazioneitaliani2.jpg" width="340" height="219" border="2" alt="Italiani partono per l'America" > ITALIA DI IMMIGRATI</center> </body>

HTML Es.8HTML Es.8

HTML-Ancore HTML-Ancore <html><head> <title> Quarto esempio</title><META NAME="description" CONTENT="L'Italia come terra di emigranti e di immigrati"><META NAME="keywords" CONTENT="Italia, emigranti, immigrati, immigrazione, clandestini"><bgsound src="troto.mid" loop="-1"></head><body bgcolor="red" topmargin="10" bottommargin="10" leftmargin="5" rightmargin="5" link="purple" vlink="fuchsia" text="white"> ITALIA TERRA DI EMIGRANTI <center><a href=“http://www.emigranti.rai.it/"> <img src="immagini/immigrazioneitaliani2.jpg" width="340" height="219" border="2" alt="Italiani partono per l'America" > </a>ITALIA DI IMMIGRATI</center> </body></html>

HTML-Ancore HTML-Ancore Fra le virgolette dell'attributo HREF oltre agli indirizzi URL validi come quello dell'esempio <A HREF="http://...">, è possibile specificare anche :<A HREF="ftp://..."><A HREF="mailto:..."><A HREF="news:..."><A HREF="nomefile.zip"><A HREF="nomepagina.html">Che servono rispettivamente per:<A HREF="ftp://...">Collegamento ad un sito FTP. <A HREF="mailto: nome@server">Indirizzo di posta elettronica per la spedizione di una e-mail all'indirizzo specificato, facendo uso del proprio programma di posta elettronica. <A HREF="news:...">Collegamento ad un gruppo di discussione (newsgroup Usenet). <A HREF="nomefile.zip">Scaricamento (download) di un file in formato compresso. <A HREF="nomepagina.html">Collegamento ad altra pagina all'interno della stessa cartella.

HTML- PubblicareHTML- PubblicareL'accesso al server che ospita la nostra pagina web avviene di solito con programmi FTP (file transfer protocol).

Parametri da fornire al programma

•nome del server ftp

•user ID

•Password

HTML-CSS HTML-CSS <html><head> <title> Decimo esempio</title><link rel=stylesheet href="esempio.css" type="text/css">

</head><body> Riga a sinistra Riga a destra Riga al centro Riga <a href="primo.htm">in cui verifichiamo </a> la struttura giustificata </body></html>

HTML-Foglio di stileHTML-Foglio di stileBODY{

margin-left : .5cm;margin-right : .5cm;color : #000099;font-family : Verdana,Arial,Helvetica;font-size : 14pt;

background-image: url('nuvole.gif'); }A:LINK{

text-decoration : none;color : #009900 ; }

A:VISITED{text-decoration : none;color : Gray; }

A:HOVER{Color : #ffff00;text-decoration : none; }

TD{font-family : "MS Sans Serif";font-size : 12pt;

}p{

text-align: justify;text-indent: 12px;

}

HTML-CLASSI CSS HTML-CLASSI CSS <<html><head> <title> Undici esempio</title><link rel=stylesheet href="esempioclassi.css"

type="text/css">

</head><body> Riga a sinistra Riga a destra Riga al centro Riga <a href="primo.htm">in cui

verifichiamo </a> la struttura

 giustificata </body></html>

HTML-CLASSI CSS HTML-CLASSI CSS <html><head> <title> Dodici esempio</title><link rel=stylesheet href="esempioclassi.css" type="text/css">

</head><body><CENTER> <table><TH colspan=2>SONO IL TITOLO DELLA TABELLA</th><tr> <td> PRIMA COLONNA </td> <td> SECONDA COLONNA</td></tr><tr> <td colspan=2> II RIGA COLONNA UNICA</td></tr></table></CENTER></body></html>

HTML-CLASSI CSS HTML-CLASSI CSS <!DOCTYPE HTML PUBLIC "DTD HTML 4.01 Transitional"><html lang="it"><head> <title> Sesto esempio</title><META NAME="doctype" CONTENT="html 4.01"><META NAME="author" CONTENT="LETIZIA"><META NAME="description" CONTENT="L'Italia come terra di emigranti e di immigrati"><META NAME="keywords" CONTENT="Italia, emigranti, immigrati, immigrazione, clandestini"><link rel=stylesheet href="stile.css" type="text/css"></head><body><center><div class=titolo>ITALIA TERRA DI EMIGRANTI </div> <img src="immagini/immigrazioneitaliani2.jpg" width="340" height="219" border="2" alt="Italiani partono per l'America" longdesc="http://www.itcmc-gentili.it/sesto.txt"><a href="http://www.itcmc-gentili.it/sesto.txt">D</a> <div class=titolo>ITALIA DI IMMIGRATI</div></center></body></html>

HTML-Foglio di stileHTML-Foglio di stileBODY{

margin-left : .5cm;margin-right : .5cm;color : #000099;font-family : Verdana,Arial,Helvetica;font-size : 14pt;

background-image: url('nuvole.gif'); background-repeat : repeat-x; background-position : 50% 50%;

}

A:LINK{text-decoration : none;color : #009900 ; }


A:HOVER{Color : #ffff00;text-decoration : none; }

TD{font-family : "MS Sans Serif";font-size : 12pt;

}

p{text-align: justify;text-indent: 12px;

}.firma {font-family : Verdana,Arial,Helvetica; color : #ff0000; font-size : 10pt; text-align : center;font-weight : lighter; font-style : italic; }

HTML-Foglio di stileHTML-Foglio di stile

BODY{BODY{ margin-left : .5cm;margin-left : .5cm;

margin-right : .5cm;margin-right : .5cm;

color : #000099;color : #000099;

font-family : Verdana,Arial,Helvetica;font-family : Verdana,Arial,Helvetica;

font-size : 14pt;font-size : 14pt;

background-image: url('nuvole.gif'); background-image: url('nuvole.gif');

background-repeat : repeat-x;background-repeat : repeat-x;

background-position : 50% 50%;background-position : 50% 50%; }}

A:LINK{A:LINK{ text-decoration : none;text-decoration : none;

color : #009900 ;color : #009900 ; } }

A:VISITED{A:VISITED{ text-decoration : none;text-decoration : none;

color : Gray;color : Gray; } }

A:HOVER{A:HOVER{ Color : #ffff00;Color : #ffff00;

text-decoration : none;text-decoration : none; } }

TH{TH{

font-family : "ARIAL";font-family : "ARIAL";


text-align: center;text-align: center;

color : #0000FF;color : #0000FF;

width : 100%; width : 100%;

}}

TD{TD{ font-family : "MS Sans font-family : "MS Sans Serif";Serif";


text-align: center;text-align: center;

border-style : solid; border-style : solid;

border-width : 2;border-width : 2;

border-color : white;border-color : white;

}}

TABLE{TABLE{ Color : #ffffff; Color : #ffffff;

background-COLOR: BLACK; background-COLOR: BLACK;

border-style : solid; border-style : solid;

border-width : 2;border-width : 2;

border-color : red;}border-color : red;}

p{p{ text-align: justify;text-align: justify;

text-indent: 12px; text-indent: 12px;

}}

.firma {.firma {

font-family : Verdana,Arial,Helvetica;font-family : Verdana,Arial,Helvetica;

color : #ff0000;color : #ff0000;


text-align : center;text-align : center;

font-weight : lighter;font-weight : lighter;

font-style : italic; }font-style : italic; }

HTML-Foglio di stileHTML-Foglio di stile

TD{font-family : "MS

Sans Serif";font-size : 12pt;

}

p{text-align: justify;text-indent: 12px;

text-transform:capitalize; }.titolo {

font-family : Arial,Helvetica; font-style=italic;font-size : 24pt;font-weight:bold;text-decoration: underline;

}

BODY{margin-left : .5cm;margin-right : .5cm;color : #000000;font-family :

Verdana,Arial,Helvetica;font-size : 14pt;

background-color: #FFFFFF;

}

A:LINK{text-decoration : none;color : #009900 ; }


A:HOVER{Color : #ffff00;text-decoration : underline; }


due sono le categorie in cui si suddividono gli due sono le categorie in cui si suddividono gli editor: visuali e testuali.editor: visuali e testuali.

Quelli visuali sono sicuramente molto più semplici da adoperare, Quelli visuali sono sicuramente molto più semplici da adoperare, assomigliano a dei programmi di grafica, è sufficiente trascinare al loro assomigliano a dei programmi di grafica, è sufficiente trascinare al loro interno testi ed immagini per avere un'impaginazione più che interno testi ed immagini per avere un'impaginazione più che soddisfacentesoddisfacente

Gli editors testuali richiedono invece da parte di chi li adopera una minima Gli editors testuali richiedono invece da parte di chi li adopera una minima conoscenza di base, potrebbero sembrare più dispendiosi in termini di impegno, conoscenza di base, potrebbero sembrare più dispendiosi in termini di impegno, ma alla lunga si rivelano invece un autentico investimento. Consentono di fare ma alla lunga si rivelano invece un autentico investimento. Consentono di fare cose che editors visuali non permetterebbero mai e danno la possibilità di avere il cose che editors visuali non permetterebbero mai e danno la possibilità di avere il

controllo assoluto su ogni parte del codicecontrollo assoluto su ogni parte del codice

Date post:	01-May-2015
Category:	Documents
Upload:	ciro-masini
View:	227 times
Download:	2 times

HTML e CSS Concetti base Comunicazione Multimediale.

Documents