Informatica - mat.unical.it · Informatica Comunicazione & DAMS A.A. 2015/16 Dr.ssa Valeria Fionda...

InformaticaComunicazione&DAMS

A.A.2015/16

Dr.ssaValeriaFionda

Informatica- Com&DAMS A.A.2015/2016

PaginaWebStrutturabasepaginaWeb:

<html><head>

<title>

</title> </head><body> (Heading | Block | Struct)*

</body></html>

PaginaWeb- HEADINGCategoria Tag Contenuto Significato

Heading

h1 (#PCDATA|Inline)* Titolo1

h2 (#PCDATA|Inline)* Titolo 2





Simbolo Significato

* zeroopiùoccorrenze(0:N)

| sceltaalternativa

#PCDATA testopiano

Inline Vedislide successive

PaginaWeb- BLOCK

Simbolo Significato

* zeroopiùoccorrenze(0:N)

| sceltaalternativa

#PCDATA testopiano

#EMPTY tag vuoto(es.<br />oppure<hr />)

Inline Vedislide successive

Categoria Tag Contenuto Significato

Blockp (#PCDATA|Inline)* Paragrafo

hr #EMPTY Linea

PaginaWeb- AttibutiGli elementi in HTML hanno attributi; questi sono valoriaddizionali che configurano l'elemento o modificano in varimodi il suo comportamento.

Gli attributi vengono scritti sempre all'interno del tag diapertura e sono seguiti da un segno di uguaglianza e daldettaglio degli attributi tra apici.

Esempio<table border=1>Border consente di specificare la dimensione del bordo di unatabella.


PaginaWeb- Attibuti

Gli attributi vengono scritti sempre all'interno deltag di apertura e sono seguiti da un segno diuguaglianza e dal dettaglio degli attributi tra apici.

Esempio<table border=“1”>Border consente di specificare la dimensione delbordo di una tabella.


PaginaWeb– Style

L’attributo style consentedimodificarediversiaspettideltag:coloretesto,sfondo,ecc.

L’attributoHTMLstylehalaseguentesintassi:

style="proprietá:valore;”


PaginaWeb– HTMLColorediSfondoLaproprietàbackground-color definisceilcoloredisfondoperunelementoHTML.

Questoesempioimpostalosfondoperunapaginaalgrigiochiaro:


<body style="background-color:lightgrey;"><h2> Pagina Personalizzata</h2><p>Pagina con sfondo grigio chiaro</p>

</body>

PaginaWeb– HTMLColoredeltestoLaproprietàcolor definisceilcoloredeltestoperunelementoHTML.

Questoesempioimpostailcoloredeltestodiunelementoheading ablueediunelementoparagraph arosso:


<body><h1 style="color:blue;"> This is a heading </h1><p style="color:red;"> This is a paragraph. </p>

</body>

PaginaWeb– HTMLCaratteredeltestoLaproprietàfont-familydefinisceiltipodicaratteredautilizzareperunelementoHTML.

Questoesempioimpostailcaratteredeltestodiunelementoheading averdana ediunelementoparagraph acourier:


<body><h1 style="font-family:verdana;"> This is a heading </h1><p style="font-family:courier;"> This is a paragraph. </p>

</body>

PaginaWeb– HTMLDimensionedeltestoLaproprietàfont-size definisceladimensionedelcaratteredautilizzareperunelementoHTML.

Questoesempioimpostaladimensionedeltestodiunelementoheading al300%delvalorenormaleediunelementoparagraph al160%delvalorenormale:


<body><h1 style="font-size:300%;"> This is a heading </h1><p style="font-size:160%;"> This is a paragraph. </p>

</body>

Èanchepossibileimpostareladimensioneadunvalorebenpreciso

<body><p style="font-size:21pt;"> This is a paragraph. </p>

</body>

PaginaWeb– HTMLAllineamentodeltesto

Laproprietàtext-aligndefiniscel’allineamentoorizzontalediunelementoHTML.

Questoesempioimpostal’allinemanetodiunelementoheading alcentroediunelementoparagraph adetsra:


<body><h1 style="text-align:center;"> This is a heading </h1><p style="text-align:right;"> This is a paragraph. </p>

</body>

PaginaWeb– StylePerogniattributostylepossonoesserespecificatepiùcoppieproprietà:valore

style="proprietá1:valore1;proprietá2:valore2;…; proprietáN:valoreN”


<body style="background-color:yellow;"><h2> Pagina Personalizzata</h2><p>Pagina con sfondo giallo</p><p style="font-family:Calibri, sans-serif"> Paragrafo con testo

Calibri e con testo

<span style="color:green; font-size:16pt">verdee con testo dimensione 16 </span></p>

</body>

PaginaWeb– StyleStyle consentedimodificarediversiaspettideltag:coloretesto,sfondo, ecc.

ElementiStilisticiProprietà Valori

background-color red/yellow/…/#DDDDDD/…border-collapse collapse

color red/blue/yellow/green/black/#001123/…

font-family Calibri/sans-serif/Times/Courier/…

font-size 12pt/18pt/20pt/…height 8px/10px/12px/…

margin-left -4px/0px/2px/5px/…margin-top -4px/0px/2px/5px/…

width 8px/10px/12px/…text-align left/center/right/justify


PaginaWeb– AttributiTabella<table>

<tr><td>Elemento 1</td><td>Elemento 2</td>

</tr></table>

<table border=“1”><tr><td>Elemento 1</td><td>Elemento 2</td>

</tr></table>

Tabellasemplice

Tabellaconbordo (Attributoborder)


PaginaWeb– AttributiTabella

<table border=“1”><tr><td>Elemento 1</td><td>Elemento 2</td>

</tr></table>

Tabellaconbordo (Attributoborder)

<table border="1" cellpadding="20"><tr><td>Elemento 1</td><td>Elemento 2</td>

</tr></table>

Tabellaconbordoespaziatura(Attributiborder ecellpadding)


PaginaWeb- AttributiE’possibilecreareanchetabelleconcelleuniteutilizzandogliattributirowspan ecolspan

Siconsiderilaseguentetabella.Supponiamo didovereunirelecellecontenentiElemento1edElemento2 elecellecontenentiElemento3edElemento6.

<table border="1"><tr>

<td>Elemento 1</td><td>Elemento 2</td><td>Elemento 3</td></tr><tr>

<td>Elemento 4</td><td>Elemento 5</td><td>Elemento 6</td></tr>

</table>

PaginaWeb- AttributiE’possibilecreareanchetabelleconcelleuniteutilizzandogliattributirowspan ecolspan

Siconsiderilaseguentetabella.Supponiamo didovereunirelecellecontenentiElemento1edElemento2 elecellecontenentiElemento3edElemento6.

Perotteneretalerisultato,siutilizzacolspan sulTAGtd dell’elementoElemento1 esiutilizzarowspan sull’elementoElemento3.Taliattributivannoamodificarelerigheelecolonnedellerighesuccessive(dovecomparirannomenoelementi).


<td colspan="2">Elemento 1</td><td rowspan="2">Elemento 3</td>

</tr><tr>

<td>Elemento 5</td><td>Elemento 6</td></tr>

</table>

PaginaWeb- Attributi


<td colspan="2">Elemento 1</td><td rowspan="2">Elemento 3</td>

</tr><tr>

<td>Elemento 5</td><td>Elemento 6</td></tr>

</table>

PaginaWeb– TabellaPersonalizzata<table border="2" cellpadding="4" cellspacing="3" width="100%">

<tr align="center"><td width="150">Cella 1 con testo <span style="color:green;">verde</span>

</td><td style="font-family:Courier"> Cella 2 </td>

</tr><tr align="right">

<td width="150" style="background-color:yellow;">Cella 3 <br /><br /><br />Ciao

</td><td valign="top" style="color:red; font-size:24;">Cella 4</td>

</tr><tr>

<td align="center" colspan="2">Questa è una cella unica</td></tr>

</table>


PaginaWeb– TabellaPersonalizzata


PaginaWeb– AttributiTabellaAttributo Funzione Valori

alignDefinisceiltipodiallineamentoorizzontaledel

contenutodiunacella/rigaditabella"left"|"center"|"right"|"justify"|

"char"border Definiscelospessore delbordodiunatabella "Numerodipixel"

cellpadding Definisceilmargineinternoadunacelladitabella "Numerodipixel"|"percentuale"

cellspacing Definisceilmarginetrabordotabellaebordo cella "Numerodipixel"|"percentuale"

colspan Definisceilnumerodicolonneassociateadunacella "Unnumerointero"

rowspan Definisceilnumerodirigheassociateadunacella "Unnumerointero"

valignDefinisceiltipodiallineamento verticaledel

contenutodiunacella/rigaditabella"top"|"middle"|"bottom"|"baseline"

Width Definiscelalarghezzadiunatabella "Numerodipixel"|"percentuale"

class AssegnaunaopiùcategorieadunTAG "Identificativo1Identificativo2…"

IdAssegnaunnomeunivoco adunTAG(unapaginanonpuò conteneredueTAGconlostessoID)

"Unidentificativo"

TitleAssegnaunnomeadunTAG(vienevisualizzato

quando sipassailmouse sopra)"Unidentificativo"


Esercizio1


Esercizio2


Esercizio3


Esercizio4


Esercizio5


PaginaWeb– LinkTag<a>conattributohref (obbligatorio)

<p>Per accedere al sito dell’Unical<a href="http://www.unical.it" title="Sito Unical">

clicca qui </a></p>


PaginaWeb– Immagini

<p><img src="logo.jpg" /></p><p><img src="logo.jpg" heigth=80 width=80 /></p>


PaginaWeb– Tag/attributiTag Attributi

html {id,version,xmlns}

head {id}

title {id}

body {style,class,id,title}

h1 {style,class,id,title}






p {style,class,id,title}

hr {style,class,id,title}

Tag Attributi

br {class,id,title}

em {style,class,id,title}

q {style,class,id,title}

strong {style,class,id,title}

b {style,class,id,title}

big {style,class,id,title}

i {style,class,id,title}

small {style,class,id,title}

sub {style,class,id,title}

sup {style,class,id,title}

tt {style,class,id,title}

span {style,class,id,title}


PaginaWeb– Tag/attributiTag Attributi

a {style, class,id,title,href,type}

table {style, class,id,title,border,cellpadding, cellspacing,width}

caption {style, class,id,title}

tr {style, class,id,title,align,valign}

th {style, class,id,title,align,colspan, rowspan,valign}

td {style, class,id,title,align,colspan, rowspan,valign}

dl {style, class,id,title}

dt {style, class,id,title}

dd {style, class,id,title}

ol {style, class,id,title}

li {style, class,id,title}

ul {style, class,id,title}

li {style, class,id,title}

img alt*,height,longdesc, name, src,width


Informatica - mat.unical.it · Informatica Comunicazione & DAMS A.A. 2015/16 Dr.ssa Valeria Fionda...

Documents

Transcript of Informatica - mat.unical.it · Informatica Comunicazione & DAMS A.A. 2015/16 Dr.ssa Valeria Fionda...