HTML e CSS Concetti base Comunicazione Multimediale.

HTML e CSS Concetti base Comunicazione Multimediale

Hyper Text Markup Language
Structured Generalized Markup Language (SGML) Nasce in ambiente editoriale Testo non formattato ma contrassegnato da coppie di marcatori <XX> </XX> Document Type Definition (DTD) per ogni categoria di documenti Comunicazione Multimediale 15\03\2006

Serve per costruire una pagina web che ha estensione .htm o .html Può essere scritto con il semplice blocco notes o con diversi software (editor) che sono specializzati per favorire e controllare la sintassi del linguaggio (Front Page, Dreamweaver, …) Comunicazione Multimediale 15\03\2006 La pagina web può essere visualizzata solo grazie ad un particolare programma che interpreta i tags del linguaggio html (browser) Internet Explorer, Netscape,ecc

I TAGS, o elementi, che compongono HTML devono essere racchiusi fra parentesi angolari <così> Si tratta di parole chiave, termini in lingua inglese. L'elemento (tag) smette di produrre il suo effetto nel momento in cui lo stesso viene ripetuto facendolo precedere da una barra laterale / contenuta sempre all'interno delle parentesi angolari </così>. Comunicazione Multimediale 15\03\2006

Struttura di un documento
<HTML> <HEAD> ... </HEAD> Comunicazione Multimediale 15\03\2006 <BODY> .... </BODY> </HTML>

HTML Es.1 <html> <head>
è formato da definizioni, elementi, tags, marcatori <html> <head> <title> Primo esempio</title> </head> <body> PRIMA RIGA SECONDA RIGA </body> </html>

HTML: tutto il documento HEAD: testata (metainformazione) TITLE = titolo BODY = corpo dell'informazione P = paragrafo

HTML Es.2 <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> Da notare in esecuzione che gli allineamenti sono rispettati qualsiasi dimensione abbia la finestra del browser

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

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

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

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

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

<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-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=“ <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 Fra le virgolette dell'attributo HREF oltre agli indirizzi URL validi come quello dell'esempio <A HREF=" è 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: Indirizzo di posta elettronica per la spedizione di una 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- Pubblicare L'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> <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 stile BODY{ 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 : # ; A:VISITED{ color : Gray; A:HOVER{ Color : #ffff00; TD{ font-family : "MS Sans Serif"; font-size : 12pt; p{ text-align: justify; text-indent: 12px;

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> <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> <td colspan=2> II RIGA COLONNA UNICA</td> </table> </CENTER> </body> </html>

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=" href=" <div class=titolo>ITALIA DI IMMIGRATI</div> </center> </body></html>

HTML-Foglio di stile BODY{ 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 : # ; A:VISITED{ color : Gray; A:HOVER{ Color : #ffff00; TD{ font-family : "MS Sans Serif"; font-size : 12pt; p{ text-align: justify; text-indent: 12px; .firma { color : #ff0000; font-size : 10pt; text-align : center; font-weight : lighter; font-style : italic;

HTML-Foglio di stile TD{ font-family : "MS Sans Serif";
font-size : 12pt; text-align: center; border-style : solid; border-width : 2; border-color : white; } TABLE{ Color : #ffffff; background-COLOR: BLACK; border-color : red;} 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; } BODY{ 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 : # ; } A:VISITED{ text-decoration : none; color : Gray; } A:HOVER{ Color : #ffff00; text-decoration : none; } TH{ font-family : "ARIAL"; font-size : 18pt; text-align: center; color : #0000FF; width : 100%; }

HTML-Foglio di stile TD{ font-family : "MS Sans Serif";
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 : # ; A:VISITED{ color : Gray; A:HOVER{ Color : #ffff00; text-decoration : underline; 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;

due sono le categorie in cui si suddividono gli editor: visuali e testuali. Quelli visuali sono sicuramente molto più semplici da adoperare, assomigliano a dei programmi di grafica, è sufficiente trascinare al loro interno testi ed immagini per avere un'impaginazione più che soddisfacente Gli editors testuali richiedono invece da parte di chi li adopera una minima conoscenza di base, potrebbero sembrare più dispendiosi in termini di impegno, 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 controllo assoluto su ogni parte del codice

HTML e CSS Concetti base Comunicazione Multimediale.

Presentazioni simili

Presentazione sul tema: "HTML e CSS Concetti base Comunicazione Multimediale."— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back

Entrare

Autorizzarsi attraverso i social network:

HTML e CSS Concetti base Comunicazione Multimediale.

Presentazioni simili

Presentazione sul tema: "HTML e CSS Concetti base Comunicazione Multimediale."— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back