Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede...

1 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore

Internet


Richiami sul modello Client/Server

(per il servizio WWW – World Wide Web – WEB versione 2.0)


Modello Client/Server per il servizio WWW

Programma Browser (sfogliatore) (esempi: Microsoft Explorer,

Mozilla Firefox, Opera, Chrome,…)

Richiesta di una pagina

CLIENT (di solito, un Personal Computer)

SERVER (calcolatore connesso alla rete)


Modello Client/Server per il servizio WWW

Pagina HTML

CLIENT (di solito, un Personal Computer)

SERVER (calcolatore connesso alla rete)

Programma Server (esempi: Microsoft IIS,

Apache,

Netscape Enterprise)


URL (Uniform Resource Locator)

protocollo (servizio)

servizio

dominio

directory/file

Hyper Text Transefr Protocol

World Wide Web

http://www.unitus.it/ingegneria/index.html


URL (Uniform Resource Locator)

dominio

http://www.unitus.it/ingegneria/index.html

Estensione Descrizione

.com organizzazione commerciale

.edu education e indica Scuole o Università;

.it Italia

.uk Regno Unito

.fr Francia

.de Germania


Linguaggio HTML


HTML

HTML è un acronimo:

Hyper

Text

Markup

Language Linguaggio di marcatura per ipertesti


HTML

IPERTESTO: Complesso strutturato e organicamente articolato di informazioni, note, illustrazioni e talvolta inserti audiovisivi, connessi secondo un sistema di collegamenti che ne permettono l'esplorazione a mezzo di elaboratore elettronico, secondo percorsi non sequenziali (DIZIONARIO HOEPLI)

Segui questo link

html html


HTML

HTML é un linguaggio che utilizza contrassegni (markup), chiamati TAG (etichetta), per la formattazione di ipertesti.

Esempio: tag <H1> … </H1> per i titoli di primo livello Quasi tutti i tag hanno un’apertura (es. <H1>) ed una

chiusura (es. </H1>), contraddistinta dalla barra “/” HTML non fa differenza tra maiuscole e minuscole

(“case-insensitive”): anche <h1> … </h1> va bene


Attributi dei TAG

I TAG possono avere degli attributi

Gli attributi aggiungono/specificano delle caratteristiche del TAG

Per esempio, i TAG di struttura <p>, <h1>, <h2>, <h3>, ecc. possono avere l’attributo ALIGN=“center” per centrare il testo.


Struttura Fondamentale di una pagina HTML

<!DOCTYPE html> <HTML lang="it"> <HEAD> ………… ………… </HEAD> <BODY> ……… ……… </BODY> </HTML>


Titolo della pagina HTML

<!DOCTYPE html> <HTML lang="it"> <HEAD> <TITLE>Pagina di prova</TITLE> </HEAD> <BODY> ……… ……… </BODY> </HTML>


I metadata o metatag

<!DOCTYPE html> <HTML lang="it"> <HEAD> <TITLE>…………</TITLE> <META charset="UTF-8" /> <META name="author" content= "Università di Bari" /> <META name="keywords" content= " HTML,CSS,XML" /> </HEAD> <BODY> ……… </BODY> </HTML>

I metatag forniscono informazioni sulla pagina WEB, non sono visibili all’utente ma utili per i

motori di ricerca


Attributi di <BODY>

<!DOCTYPE html> <HTML lang="it"> <HEAD> …………… </HEAD> <BODY bgcolor= "black" text= "white" background= "…" > ……… </BODY> </HTML>


Attributi di <BODY>

<BODY bgcolor=“blue” text=“silver”> ………………… ………………… </BODY>


Attributi di <BODY> - Colori RGB

Tonalità dei tre colori: da 0 a 255 in decimale, da 00 a FF in esadecimale

Rosso 255,0,0 FF 00 00

Verde 0,255,0 00 FF 00

Blu 0,0,255 00 00 FF

Nero 0,0,0 00 00 00

Bianco 255,255,255 FF FF FF

Giallo 255,227,172 FF E3 AC

I Colori Red, Green, Blue


Attributi di <BODY> - Colori RGB

I Colori Red, Green, Blue

Per esempio:

<BODY BGCOLOR="#FFFFFF"> colore di sfondo bianco

<BODY BGCOLOR="white"> colore di sfondo bianco

Tag HTML (1- Effetti tipografici)

<EM> enfatizzato </EM>

<STRONG> testo forte</STRONG>

<B> grassetto </B>

<I> corsivo </I>

<U> sottolineato </U>

<STRIKE> barrato </STRIKE>

<MARK> evidenziato </MARK>



Emphasized

Boldface

Italic

Underlined



<BIG> Più grande </BIG> testo normale

<SMALL> Più piccolo </SMALL> testo normale

<SUB> Pedice </SUB> testo normale

<SUP> Apice </SUP> testo normale

Più grande testo

normale

Più piccolo testo

normale

Pedice testo normale

Apice testo normale



<B> <I> Grassetto Corsivo </I> </B>

Grassetto Corsivo


Tag HTML (1 - le entità carattere)

Caratteri particolari o simboli


Tag HTML (2 - le entità carattere)

Caratteri particolari o simboli

spazio (non breaking space)

< <

> >

& &

€ €

è è

È È

à à


Tag HTML (Struttura del testo)

<H1> titolo primo livello </H1> <H2> titolo secondo livello </H2> <H3> titolo terzo livello </H3> <H4> titolo quarto livello </H4> <H5> titolo quinto livello </H5> <H6> titolo sesto livello </H6>

<P> paragrafo con spaziatura prima e dopo </P> <DIV> paragrafo senza spaziatura prima e dopo </DIV> <BR/> a capo <HR/> linea orizzontale (linea separatrice)

Senza Chiusura!

Senza Chiusura!


Tag HTML (allineamento del testo)

<H1 align=“left/right/center/justify”> …..</H1> <H2 align=“left/right/center/justify”> …… </H2> …………………… <H6 align=“left/right/center/justify”> ……… </H6> <P align=“left/right/center/justify”> …. </P>

<DIV align=“left/right/center/justify”> …. </DIV>


Tag HTML (font del testo e dimensione)

<FONT FACE=“Arial” SIZE=“1/2/3/4/5/6/7” COLOR=“RED”> ………………… ………………… </FONT>


Tag HTML (elenchi puntati/numerati)

<P align=“left”> <FONT FACE=“Comic sans MS” size=“4”> <OL TYPE=“1/A/a/I/i” START=“valore iniziale”> <LI> Latte </LI> <LI> Caffè </LI> <LI> Zucchero </LI> </OL> </FONT> </P>

Per gli elenchi numerati si utilizza il TAG <OL> (Ordered List). Ogni elemento della lista viene identificato con il TAG <LI> (List Item)



<P align=“left”> <FONT FACE=“Comic sans MS” size=“4”> <UL TYPE=“circle/square/disc” > <LI> Latte </LI> <LI> Caffè </LI> <LI> Zucchero </LI> </UL> </FONT> </P>

Per gli elenchi puntati si utilizza il TAG <UL> (Unordered List). Ogni elemento della lista viene identificato con il TAG <LI> (List Item)



<P align=“left”> <FONT FACE=“Comic sans MS” size=“4”> <UL TYPE=“circle” > <LI> Latte </LI> <OL TYPE=“I”> <LI> Parmalat </LI> <LI> Sole </LI> </OL> <LI> Caffè </LI> <LI> Zucchero </LI> </UL> </FONT> </P>

È possibile definire un elenco numerato dentro un elenco puntato e viceversa.


Tag HTML (1- tabelle)

<TABLE> <CAPTION> titolo tabella </CAPTION> <TR> <TH> intestazione </TH> </TR>

<TR>

<TD> dato </TD>

</TR>

</TABLE>

(inizio tabella)

Nome della tabella

Table Row (inizio riga)

Table Header

(fine riga)

cella normale

(fine tabella)



<TABLE border=“0/1/2/…” bgcolor=“red” align=“left/right/center”> ………… </TABLE>

Bordo, Colore di sfondo e Allineamento della tabella



<TABLE width=“50%”> ………… </TABLE>

Larghezza della tabella

Crea una tabella che occupa metà pagina orizzontale

50% 50%



<TABLE border="1" align="left" width="50%">

<CAPTION> Tabella 2x2 </CAPTION>

<TR><TD>Prima Riga Prima Cella</TD>

<TD>Prima Riga Seconda Cella</TD>

</TR>

<TR><TD>Seconda Riga Prima Cella</TD>

<TD>Seconda Riga Seconda Cella</TD>

</TR>

</TABLE>

ESEMPIO



Allineamento verticale, orizzontale e Colore di sfondo della riga

<TR align=“left/right/center/justify” valign=“top/middle/bottom” bgcolor=“…” > ………… </TR>



Allineamento verticale, orizzontale e Colore di sfondo della riga



<TD align=“left/right/center/justify” valign=“top/middle/bottom” bgcolor=“…” > ………… </TD>

Allineamento verticale, orizzontale e Colore di sfondo della cella

<TH align=“left/right/center/justify” valign=“top/middle/bottom” bgcolor=“…” > ………… </TH>



Allineamento verticale, orizzontale e Colore di sfondo della cella



<TH width=“130px”> ………… </TH>

Larghezza della cella (in pixel e percentuale)

<TD width=“130px”> ………… </TD>



<TH height=“130px”> ………… </TH>

Altezza della cella (solo in pixel)

<TD height=“130px”> ………… </TD>


Tag HTML (11- tabelle) unione

Attributo COLSPAN (ROWSPAN per le righe)

<table width="200px" border="1">

<tr>

<th colspan="3">Primo trimestre</th>

</tr>

<tr>

<td>Gennaio</td>

<td>Febbraio</td>

<td>Marzo</td>

</tr>

</table>


Tag HTML (12- tabelle) unione

Attributo COLSPAN (ROWSPAN per le righe) <table width="200px" border="1">

<tr>

<th rowspan=“4">Primo trimestre</th>

</tr>

<tr>

<td>Gennaio</td>

</tr>

<tr>

<td>Febbraio</td>

</tr>

<tr>

<td>Marzo</td>

</tr>

</table>


Tag HTML (13- tabelle) stile bordo

Attributo style (per modificare lo stile e il colore del bordo)

<table width="200px" border="1“ style=“border-collapse:collapse; border-color:red;”>

<tr>

<th rowspan=“4">Primo trimestre</th>

</tr>

<tr>

<td>Gennaio</td>

</tr>

<tr>

<td>Febbraio</td>

</tr>

<tr>

<td>Marzo</td>

</tr>

</table>


Tag per i link

<A HREF=“…”> collegamento </A>

HREF è un attributo obbligatorio per i riferimenti

Il valore di HREF è un URL di un’altra pagina

L’URL può essere assoluto (http://www.miosito.it/) o relativo (./index.html)

In HREF è possibile inserire il link ad una mail (mailto:) o ad un dispositivo mobile (tel:)


Tag per i link

Esempio:

<a href="seconda.html">Vai alla seconda pagina</a>

Cliccando sulla scritta "Vai alla seconda pagina"

(hotword-parola calda)

Il browser aprirà la pagina

"seconda.html"


Tag per i link

Differenza tra URL assoluto e relativo:

L’URL seconda.html è di tipo relativo perché si specifica solo il nome di un file o di una cartella. Vengono utilizzati per creare collegamenti a diverse pagine del sito

(LINK INTERNI).

L’URL http://www.miosito.com/seconda.html è di tipo assoluto perché si specifica l’intero percorso. Vengono utilizzati per raggiungere risorse presenti all'interno di altri siti web

(LINK ESTERNI).


Tag per i link

Esempio:

<a href="seconda.html" target="_blank">Vai alla seconda pagina </a>

L’attributo target specifica dove deve essere aperta la nuova pagina, col valore _blank apre il collegamento in una nuova finestra. Se si usa il valore _self, il collegamento si apre nella stessa finestra.


Tag per i link

Attributo title:

<a href= "http://www.google.it" title="motore di ricerca">Vai su google</a>

L’attributo title visualizza il messaggio indicato (tooltip) quando il mouse passa sopra l’hotword

(parola calda).


Tag per i link

pagina2.htm

<a href="index.html">torna alla home page</a>

index.html (home page)

i nostri prodotti

pagina2.htm

torna alla home page

index.html (home page)

<a href="pagina2.htm">i nostri prodotti</a>


Tag per i link a una sezione (segnalibro)

Àncora: <A NAME="parte2">……….</A>

Link alla parte:

<A HREF="#parte2">parola</A>

Link da un documento diverso:

<A HREF="docy.htm#parte2">parola</A>


Tag per i link a una sezione (segnalibro)

Il segnalibro può essere creato con qualsiasi TAG e con l’utilizzo dell’attributo id (abbreviazione di identification)

Esempio con un titolo di livello 2: <H1 id="parte2">……..</H1>

Link alla parte:

<A HREF="#parte2">parola</A>

Link da un documento diverso:

<A HREF="docy.htm#parte2">parola</A>


Incorporamento di un’immagine

Formati immagini per il WEB (GIF,JPG,PNG)

<img src="MIAIMMAGINE.JPG">

Il tag <img> è un tag che non prevede chiusura (TAG VUOTO)

L‘attributo SRC è obbligatorio per i riferimenti e può includere sia URL relativi che assoluti

Il tag <IMG> include altri attributi come:

ALT(etichetta);BORDER(bordo);

Width(larghezza in pixel);

Height(altezza in pixel);Align(allineamento del testo)


Incorportamento di un’immagine

Creazione di un’immagine cliccabile

<a href="sito.html"> <img src="URL IMMAGINE" alt="ETICHETTA IMMAGINE"/> </a>

ESEMPIO:

Inserendo il seguente URL : http://www.tradingmatica.com/Images/cliccaqui.gif

al posto di "URL IMMAGINE" nel codice, al click dell’immagine apriremo il sito "sito.html"


Incorportamento di un’immagine

<img src="immagine.jpg" align="top" alt="descrizione alternativa"

width="150" height="93"/> ALT visualizza un testo al posto dell’immagine (tooltip) WIDTH larghezza dell’immagine in pixel HEIGHT altezza dell’immagine in pixel

Allineamento del testo

ALIGN = "TOP" (vicino al bordo superiore dell’immagine)

ALIGN = "MIDDLE" (al centro dell’immagine)

ALIGN = "BOTTOM" (vicino al bordo inferiore)


Le immagini come link

Le immagini come link <a href="http://www.mondoviaggi.it">

<img src="mare.jpg" alt="catalogo mare"

width="699" height="433" />

</a>


Audio

<audio controls>

<source src="canzone.mp3" type="audio/mpeg" />

</audio>


Audio di sottofondo

<embed src="tenerezza.mp3" autostart="true" loop="false" volume="80" hidden="true">

</embed>


Video

<video width="580" height="240" controls>

<source src="corso.mp4" type="video/mp4" />

</video>


Moduli (FORM)

<FORM METHOD=“post” ACTION=“…”>

… </FORM>

Il valore di ACTION è (di solito) una pagina WWW che elabora i dati immessi nel modulo

Ci possono essere delle azioni da compiere al verificarsi di EVENTI


Elementi di un modulo

<INPUT • TYPE=“SUBMIT”

• NAME=“…”

• VALUE=“visualizzato”>

Visualizza un “Bottone” cliccabile, A cui possono essere associate delle azioni


I Fogli di Stile CSS


I CSS

Il foglio CSS (Cascading Style Sheet, foglio di stile a cascata) è un documento in formato testuale che definisce il controllo sulla visualizzazione della pagina HTML e sul suo layout, cioè la disposizione degli elementi nella pagina, con le caratteristiche di stile riguardanti i font, i colori, gli allineamenti e le spaziature.


Fogli di stile in linea

le proprietà di stile in linea vengono innestate direttamente in corrispondenza del TAG con l’attributo STYLE:

<P STYLE="font-family: Arial; font-size: 22pt; color: red; background-color:yellow"> Le Regioni italiane </P>


Fogli di stile incorporati

Stile definito, attraverso il TAG <STYLE> all’interno dell’intestazione del documento

<HTML> <HEAD> <STYLE TYPE="text/css"> H1 { font-family: Arial; font-size: 23px; color: red; } </STYLE > </HEAD>


Fogli di stile collegati

Definizione di un foglio di stile separato dal documento e registrato in un file esterno avente estensione .css.

Questo file viene collegato alla pagina attraverso il TAG <LINK>.

<HTML> <HEAD> <LINK REL="stylesheet" HREF="stile.css" TYPE="text/css“/> </HEAD>


Sintassi CSS

Per ogni selettore si dichiara una o più proprietà di stile: ogni proprietà di stile va separata da un punto e virgola. L’insieme delle proprietà è raggruppato da una coppia di parentesi graffe.

selettore { proprietà: valore; proprietà: valore; proprietà: valore; ...; }


Sintassi CSS

Un selettore può essere: un TAG predefinito del linguaggio HTML (<H1>,

<P>, <TD>, ecc.) una classe definita dall’utente; lo stile viene poi

richiamato nella pagina HTML con l’attributo CLASS="nomeclasse"

un identificatore definito dall’utente che individua le caratteristiche di una parte del documento; lo stile viene richiamato nella pagina HTML con l’attributo

ID="identificatore"


Sintassi CSS

La classe definisce le caratteristiche di paragrafi e singole parti di una pagina HTML

L’identificatore è utilizzato per definire i contenitori (o sezioni) di una pagina , identificati con i tag <DIV> … <DIV>.

<DIV ID="identificatore"> ... <P CLASS="nomeclasse"> ... </P> ... </DIV>


Sintassi CSS

Esempio di classe

... <STYLE type="text/css"> .testoblu {color:blue;} </STYLE> ... <P CLASS="testoblu"> Testo colore blu </P> ...


Sintassi CSS

Esempio di identificativo

... <STYLE type="text/css"> #testorosso {color:red;} </STYLE> ... <DIV ID="testorosso"> Testo colore rosso </DIV> ...


Formattare un documento con i CSS

font-family

... <STYLE type="text/css"> p {font-family: Arial, Verdana, sans-serif;} </STYLE>

La proprietà font-family serve a impostare il tipo di carattere tipografico per una qualunque porzione di testo.

Vengono usati i font Arial e Verdana senza grazie (sans-serif).



font-size

<STYLE type="text/css"> P {font-size: 12px;}

DIV {font-size: 50%;}

H2 {font-size: 1.2em;}

</STYLE>

Definisce la dimensione del carattere

Sono valori assoluti:

le sette parole chiave xx-small, x-small, small, medium, large, x-large, xx-large;

quelli espressi con le seguenti unità di misura: pixel (px), centimetri (cm),

millimetri (mm), punti (pt), picas (pc), pollici (in), x-height (ex).



font-weight

... <STYLE type="text/css"> div {font-weight: 900;} </STYLE>

Serve a definire la consistenza o "peso" visivo del testo


Il "peso" visivo di un carattere può essere espresso con una scala numerica o con parole chiave. Valori numerici: 100 – 200 – 300 – 400 – 500 – 600 – 700 – 800 – 900 ordinati in senso crescente (dal più leggero al più pesante);

normal: valore di default, è l’aspetto normale del font ed equivale al valore 400;

bold: il carattere acquista l’aspetto che definiamo in genere ‘grassetto’, equivale a 700;


font-weight



font-style

... <STYLE type="text/css"> p {font-style: italic;}

</STYLE>

Imposta le caratteristiche del testo in base ad uno di questi tre valori:

normal: il testo mantiene il suo aspetto normale; italic: formatta il testo in corsivo; oblique: praticamente simile a italic.



line-height

... <STYLE type="text/css"> p {line-height: 1.5;} body {line-height: 15px;} </STYLE>

Definisce l’interlinea del paragrafo:



font

... <STYLE type="text/css"> P {font: italic bold 12px/1.5 Georgia, "Times New Roman",

serif;} </STYLE>

Una proprietà a sintassi abbreviata che serve a impostare con una sola dichiarazione tutte le principali caratteristiche del testo.



text-align

...

<STYLE type="text/css"> p {text-align: center;}

div {text-align: justify;}

</STYLE>

La proprietà serve a impostare l’allineamento del testo



text-decoration

... <STYLE type="text/css"> P {text-decoration: none;}

A { text-decoration: underline;}

</STYLE>

Imposta particolari decorazioni e stili per il testo.

none: il testo non avrà alcuna decorazione particolare;

underline: il testo sarà sottolineato;

overline: il testo avrà una linea superiore;

line-through: il testo sarà attraversato da una linea orizzontale al centro;

blink: testo lampeggiante.

Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede...

Documents

Transcript of Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede...