B4 1 HTML CSS V19 - unibg.it fileUniversità di Bergamo Facoltà di Ingegneria Il contenuto del...

B4 HTML CSS Paolo Salvaneschi 1

B4_1 V1.9

HTML CSS

Applicazioni Internet B

Paolo Salvaneschi

Università di BergamoFacoltà di Ingegneria

Il contenuto del documento è liberamente utilizzabile dagli studenti, per studio personale e per supporto a lezioni universitarie.Ogni altro uso è riservato, e deve essere preventivamente autorizzato dall’ autore.

Sono graditi commenti o suggerimenti per il miglioramento del materiale

B4 HTML CSS Paolo Salvaneschi 2B4 HTML CSS Paolo Salvaneschi 2

• Specifica HTML• Elementi a blocchi e in linea• Attributi Class,Id• CSS

– Style– Foglio stile interno o esterno– Selettori– A cascata– Proprietà– Formattazione di precisione– Layer

INDICE


• Specifica HTML 4• http://www.w3.org/TR/html4• HTML 4.01 Strict DTD

– Esclude gli elementi di presentazione– La presentazione utilizza i CSS– Non include gli elementi deprecati (da non usare)– Non include i frame

Specifica HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><HTML> <HEAD></HEAD></BODY>………</BODY> </HTML>

DTD del documento

Non obbligatoria in HTML


Specifica HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><HTML>………

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML>………

• HTML 4.01 Transitional DTD– Include gli elementi deprecati

• HTML 4.01 Frameset DTD– Include gli elementi deprecati – Include i frame


• DTD HTML

• ENTITY : macrodefinizione• ELEMENT : elemento HTML• ATTLIST : attributi di un elemento

Specifica HTML


<!ENTITY % fontstyle “TT | I | B | BIG | SMALL”>

%fontstyle; è riusato ed espanso come “TT | I | B | BIG | SMALL”

Specifica HTML

• ENTITY : macrodefinizione


<!ELEMENT DL - - (DT|DD)+>

Specifica HTML

• ELEMENT : elemento HTML

Start tag End tag- deve essere presenteO può essere omesso

? 0 o 1+ 1 o più* 0 o più

ContenutoEMPTY (vuoto)

, nell’ordine scritto& in un ordine qualsiasi| uno dei componenti


<!ELEMENT A - - (%inline;)* -(A)>

<!ELEMENT IMG - O EMPTY>

O EMPTY Regola:il tag finale deve essere omesso

CDATATesto

- non deve apparire all’interno dell’elemento considerato(gli elementi A non possono essere annidati)+ può apparire

Specifica HTML

* 0 o piùElementi in linea- deve essere presente


<!ATTLIST IMGNAME CDATA #IMPLIED -- commento -->

Specifica HTML

•ATTLIST : attributi di un elemento

#IMPLIED valore attributo non obbligatorio#REQUIRED obbligatorio#FIXED costante

Nome dell’attributo Tipo di dati del valore

>

altri attributi…


<!ELEMENT HTML O O (%html.content;) -- document root element -->

<!ATTLIST HTML%i18n; -- lang, dir -->

>

<!ENTITY % html.content "HEAD, BODY"><!ENTITY % i18n"lang %LanguageCode; #IMPLIED -- language code –dir (ltr|rtl) #IMPLIED -- direction for weak/neutral

text --" >

Specifica HTML

• Esempio: Elemento HTML


<HTML lang=”it”>... contenuto ...

</html>

Specifica HTML

• Esempio: Elemento HTML realizzazione 1

• Esempio: Elemento HTML realizzazione 2

...solo il contenuto...(start ed end tag sono entrambi opzionali)


Specifica HTML


Elementi a blocchi e in linea

• Gli elementi all’interno dell’elemento BODYsono classificati in:

•Elementi in linea: frammenti di testo–EM, I, STRONG, B, CODE, TT, CITE–A [HREF, NAME, TITLE]–IMG [SRC, ALT]………….

• Elementi a blocchi: strutture di elementi inlinea e blocchi–DIV –OL / LI, UL / LI–H1, H2, ... H6, P…………..


Elementi a blocchi e in linea

<P>Nel mezzo del <EM>cammin</EM>di nostra vita</P>

BLOCCO

IN LINEA


• Identificatori di elemento• Tutti gli elementi hanno gli attributi CLASS e ID

(nonché LANG, DIR)

<P> <SPAN id="msg1" class="error" lang="en">Syntax error</SPAN> </P> <P> <SPAN id="msg2" class="error" lang=“en">Undefined error</SPAN> </P>

Nota: DIV (elemento a blocchi), SPAN (elemento in linea) sono generici meccanismi per dare struttura al documento

Attributi Class, Id


<HEAD> <TITLE>... document title ...</TITLE>

<STYLE type="text/css"> SPAN.error { color: red }</STYLE>

</HEAD> <BODY>

<P><SPAN id="msg1" class="error" lang="en">Syntax error</SPAN> </P><P><SPAN> Unknown error</SPAN></P>………….

</BODY>

Utilizzo:tutti i messaggi di classe error sono rossi

Attributi Class, Id


• Significato della marcatura– Struttura– Semantica– Presentazione

• Separazione della presentazione• Fogli stile a cascata (CSS)

CSS


• Vantaggi– Consistenza dello stile– Leggibilità del codice HTML

• facilità di scrittura• manutenibilità

– Riutilizzabilità per via automatica

CSS


<html><head><title>La prima pagina Web di Mario Rossi</title><style type="text/css">

h1{ font-family: Arial;font-size: 20pt;color: red;font-weight: bold;text-decoration: underline }

</style></head><body>

<h1>Home page di Mario Rossi</h1><p>Questa è la mia prima pagina in HTML.</p><h1>Intestazione di primo livello</h1><h2>Intestazione di secondo livello</h2><h3>Intestazione di terzo livello</h3>

…

Style

style Solo in Head


…<h1>Home page di Mario Rossi</h1><p>Questa è la mia prima pagina in HTML.</p><h1 style= "font-family: Arial;font-size: 20pt;color: red;font-weight: bold;text-decoration: underline;">Intestazione di primo livello</h1><h2>Intestazione di secondo livello</h2><h3>Intestazione di terzo livello</h3>…

Style

Stile e contenuto mischiato


Foglio stile esterno

<html>

<head><title>La prima pagina Web di Mario Rossi</title><link type="text/css"

rel="Stylesheet" href="Es2_css_esterno.css"></head>

<body><h1>Home page di Mario Rossi</h1><p>Questa è la mia prima pagina in HTML.</p><h1>Intestazione di primo livello</h1><h2>Intestazione di secondo livello</h2><h3>Intestazione di terzo livello</h3>…

h1{font-family: Arial;font-size: 20pt;color: blue;font-weight: bold;}

Attributo del link (relationship)

Contenuto indirizzato dal linklink Solo in Head


Foglio stile esterno

<link type="text/css" rel="Stylesheet" href="Es2_css_esterno.css">

File di testo conforme alla specifica css

Tipo di link: foglio stile

URL


h1{color: red;}

Selettori

Regola

Dichiarazione Proprietà: Valore

SelettoreElemento a cui si applica un insieme di dichiarazioni

h1{color: red;font-weight: bold;}


h1{color: red;}

Selettori

Regola

SelettoreElemento a cui si applica un insieme di dichiarazioni

Tipi di selettori:Tutti i tag HTMLTutti i tag con attributo class definito ad un dato valoreTutti i tag con attributo id definito ad un dato valore


• SelettoriP { color : red; background-color: yellow; }P.lamiaclasse { color : maroon; }LI P { color: yellow; }LI P.lamiaclasse { color : black ; }P#speciale { color : purple ; }.lamiaclasse (equivalente a * .lamiaclasse …)#speciale { color : green ; } (equivalente a * #speciale…)

• La regola è applicata ad ogni componente del documento che corrisponde al selettore della regola

Selettori

Tutti gli elementi con id=“speciale”

Tutti gli elementi con class=“lamiaclasse”


• Utilizzo• La regola è applicata ad ogni componente del

documento che corrisponde al selettore della regola• “Corrisponde” Elemento, Class, Id• Pattern Matching

Selettori

P { color : red;}P.lamiaclasse { color : red;}P#speciale { color : red;}

<P> testo di P </P>

<P class=”lamiaclasse”> testo de lamiaclasse </P>

<P id=”speciale”> testospeciale </P>


…<style type="text/css">p.par_tipo_1 {font-family: Arial;

font-size: 12pt;color: red;font-weight: bold;margin-left: 20%; margin-right: 20%; }

#speciale {color: blue; }</style></head><body>

<p class="par_tipo_1">Internet è frutto…</p><p id="speciale">Dopo l'incidente della...</p><p>Per la realizzazione di questo…</p>

</body></html>

Selettori


<Style type="text/css">body {background-color : #e0e0e0;}h2 {color: #990000; background-color : white;}ul ul {color: red}ul ul ul {color: blue}

</Style> <body><h2>Struttura del curriculum</h2><ul><li >Data di nascita</li><li>Stato civile</li>

<ul><li>Formazione</li>

<ul ><li>Studi</li><li>Esperienze Lavorative</li></ul >

<li>Pubblicazioni</li></ul>…

Selettori


A cascata

…<head><title>La prima pagina Web di Mario Rossi</title><link type="text/css"

rel="Stylesheet" href="Es2_css_esterno.css"></head><h1>Home page di Mario Rossi</h1><p>Questa è la mia prima pagina in HTML.</p><h1 style= "color: red">Intestazione di primo livello</h1><h1>Ulteriore Intestazione di primo livello</h1><h2>Intestazione di secondo livello</h2><h3>Intestazione di terzo livello</h3>…

h1{font-family: Arial;font-size: 20pt;color: blue;font-weight: bold;}

Gruppi diversi di attributi di formattazione sono applicati progressivamente


Proprietà

[CSS1] "Cascading Style Sheets, level 1“http://www.w3.org/TR/1999/REC-CSS1-19990111

[CSS2] "Cascading Style Sheets, level 2“http://www.w3.org/TR/1998/REC-CSS2-19980512



• Modello di formattazione visiva

– DOM Document Object Model– Il documento è un albero di elementi (h1,

p,div,…)– Ad ogni elemento è associato un box– Per ogni box si definiscono dimensioni

caratteristiche– Ogni box è posizionato sullo schermo

con la precisione di un pixel



Box model


<html><head><Style type="text/css">P.tipo1 { background: gray;

margin: 24px 24px 24px 24px;border: solid;padding: 10px 10px 10px 10px; }

P.tipo2 { background: gray; margin: 48px 48px 48px 48px;padding: 50px 10px 50px 10px; }

</Style><body><H1>Storia di Internet</H1><P >Internet è frutto indiretto della 'Guerra fredda'…</P><P class="tipo1">Dopo l'incidente della Baia dei Porci ...</P><P class="tipo2">Nel 1964 anche la Cina…</P><P >Questa ricerca portò alla realizzazione…</P></body></html>


top right bottom left



• Posizionamento del box (rispetto a un boxcontenitore)

• Normal–Posizionato nel contesto a blocchi o in linea

• Floating–Gli altri elementi scorrono attorno al box

• Absolute–Posizionato in una zona precisa della pagina.Gli altri elementi non lo possono spostare


#mappa {position:absolute;width:auto;height:auto;top:50px;right:auto;bottom:auto;left:400px;}

#query{position:absolute;width:850px;height:40px;top:500px;right:auto;bottom:auto;left:50px;padding: 5px 5px5px 5px;}

#didascalia{position:absolute;width:250px;height:400px;top:50px;right:auto;bottom:auto;left:50px;padding: 10px 10px 10px 10px;border: solid;border-width: thin;border-color: red;}



<BODY><DIV id="mappa">

<img src="..\immagini\citta.gif" width="500" height="400"></DIV><DIV id="didascalia">

<P>Visita alla città di Nonsisadove. La città di Nonsisadove…</P></DIV><DIV id="query">

<FORM method= "post" action="http://nome.server/cgi.bin/programma">Nome monumento: <input type="text" name="Nome" size=80> <input type="submit" value="Spedisci i dati"></FORM>

</DIV></BODY>



…<BODY>

<IMG id="image" class="Classe1" src="..\immagini\ada_sal.jpeg" alt="Adamello"style="z-index: 1">

<DIV class="Classe2"style="z-index: 2"> L'adamello da Sud

</DIV></BODY>…

Layer

<STYLE type="text/css">.Classe1 {

position: absolute; left: 2cm; top: 2cm; width: 10cm; height: 10cm;}

.Classe2 { position: absolute; left: 2cm; top: 4cm; width: 10cm; height: 10cm;color: red;font-size: 32px; font-family: tahoma;}

</STYLE>


…<HEAD><link type="text/css" rel="Stylesheet" href="Es10b.css"></HEAD><BODY>

<IMG id="image" class="Classe1" src="immagini\uno.jpeg" alt="Adamello">

<DIV class="Classe2"> L'adamello da Sud

</DIV></BODY>…

Layer

Es10b.css

B4 1 HTML CSS V19 - unibg.it fileUniversità di Bergamo Facoltà di Ingegneria Il contenuto del...

Documents

Transcript of B4 1 HTML CSS V19 - unibg.it fileUniversità di Bergamo Facoltà di Ingegneria Il contenuto del...