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  Document Type Definition (DTD) per ogni categoria di documenti

Hyper Text Markup Language

  

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, …) La pagina web può essere visualizzata solo grazie ad un particolare programma che interpreta i tags del linguaggio html (browser) Internet Explorer, Netscape,ecc

Hyper Text Markup Language

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

Struttura di un documento

<

HEAD

>

... ....

HTML Es.1

è formato da definizioni, elementi, tags, marcatori

PRIMA RIGA

SECONDA RIGA

Hyper Text Markup Language



HTML: tutto il documento



HEAD: testata (metainformazione)



TITLE = titolo



BODY = corpo dell'informazione



P = paragrafo

HTML Es.2

align="left

"> Riga a sinistra

align="right

"> Riga a destra

align="center

"> Riga al centro

align="justify

"> Riga in cui verifichiamo la struttura giustificata

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

HTML Es.3

Riga a sinistra

Riga a destra

Riga al centro

Riga

in cui verifichiamo
la struttura
giustificata

HTML Es.4

ITALIA TERRA DI EMIGRANTI

HTML Es.5

ITALIA TERRA DI EMIGRANTI

HTML Es.6

bgcolor="red" topmargin="10" bottommargin="10" leftmargin="5" rightmargin="5" link="purple" vlink="fuchsia" text="white

">

ITALIA TERRA DI EMIGRANTI

ITALIA DI IMMIGRATI

www.cast.org/bobby

HTML Es.7

ITALIA TERRA DI EMIGRANTI

ITALIA DI IMMIGRATI

HTML Es.8

ITALIA TERRA DI EMIGRANTI

ITALIA DI IMMIGRATI

HTML-Ancore

ITALIA TERRA DI EMIGRANTI

ITALIA DI IMMIGRATI

HTML-Ancore

Fra le virgolette dell'attributo HREF oltre agli indirizzi URL validi come quello dell'esempio , è possibile specificare anche : Che servono rispettivamente per: Collegamento ad un sito FTP. Indirizzo di posta elettronica per la spedizione di una e-mail all'indirizzo specificato, facendo uso del proprio programma di posta elettronica. Collegamento ad un gruppo di discussione (newsgroup Usenet). Scaricamento (download) di un file in formato compresso. 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

" type="text/css">

Riga a sinistra

Riga a destra

Riga al centro

Riga
in cui verifichiamo
la struttura
giustificata

HTML-Foglio di stile

BODY{ A:LINK{ margin-left : .5cm; margin-right : .5cm; color : #000099; font-family : Verdana,Arial,Helvetica; font-size : 14pt; background-image: url('nuvole.gif'); } 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

<

Riga a sinistra

Riga a destra

Riga al centro

Riga
in cui verifichiamo

la struttura

giustificata

HTML-CLASSI CSS

SONO IL TITOLO DELLA TABELLA
PRIMA COLONNA	SECONDA COLONNA
II RIGA COLONNA UNICA

HTML-CLASSI CSS

" type="text/css">

ITALIA TERRA DI EMIGRANTI

D

ITALIA DI IMMIGRATI

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 : #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; } .firma { font-family : Verdana,Arial,Helvetica; color : #ff0000; font-size : 10pt; text-align : center; font-weight : lighter; font-style : italic; }

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

HTML-Foglio di stile

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:VISITED{ text-decoration : none; color : Gray; } A:HOVER{ Color : #ffff00; text-decoration : underline; } TD{ font-family : "MS Sans Serif"; font-size : 12pt; } p{ text-align: justify; text text-indent: 12px; transform:capitalize; } .titolo { font-family : Arial,Helvetica; font-style=italic; font-size : 24pt; font-weight:bold; text-decoration: underline; }

Hyper Text Markup Language



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