b4 1 html css v19 - unibg.it fileuniversità di bergamo facoltà di ingegneria il contenuto del...
TRANSCRIPT
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
B4 HTML CSS Paolo Salvaneschi 3B4 HTML CSS Paolo Salvaneschi 3
• 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
B4 HTML CSS Paolo Salvaneschi 4B4 HTML CSS Paolo Salvaneschi 4
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
B4 HTML CSS Paolo Salvaneschi 5B4 HTML CSS Paolo Salvaneschi 5
• DTD HTML
• ENTITY : macrodefinizione• ELEMENT : elemento HTML• ATTLIST : attributi di un elemento
Specifica HTML
B4 HTML CSS Paolo Salvaneschi 6
<!ENTITY % fontstyle “TT | I | B | BIG | SMALL”>
%fontstyle; è riusato ed espanso come “TT | I | B | BIG | SMALL”
Specifica HTML
• ENTITY : macrodefinizione
B4 HTML CSS Paolo Salvaneschi 7
<!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
B4 HTML CSS Paolo Salvaneschi 8B4 HTML CSS Paolo Salvaneschi 8
<!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
B4 HTML CSS Paolo Salvaneschi 9
<!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…
B4 HTML CSS Paolo Salvaneschi 10
<!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
B4 HTML CSS Paolo Salvaneschi 11
<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)
B4 HTML CSS Paolo Salvaneschi 14
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…………..
B4 HTML CSS Paolo Salvaneschi 15
Elementi a blocchi e in linea
<P>Nel mezzo del <EM>cammin</EM>di nostra vita</P>
BLOCCO
IN LINEA
B4 HTML CSS Paolo Salvaneschi 16
• 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
B4 HTML CSS Paolo Salvaneschi 17B4 HTML CSS Paolo Salvaneschi 17
<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
B4 HTML CSS Paolo Salvaneschi 18B4 HTML CSS Paolo Salvaneschi 18
• Significato della marcatura– Struttura– Semantica– Presentazione
• Separazione della presentazione• Fogli stile a cascata (CSS)
CSS
B4 HTML CSS Paolo Salvaneschi 19B4 HTML CSS Paolo Salvaneschi 19
• Vantaggi– Consistenza dello stile– Leggibilità del codice HTML
• facilità di scrittura• manutenibilità
– Riutilizzabilità per via automatica
CSS
B4 HTML CSS Paolo Salvaneschi 20B4 HTML CSS Paolo Salvaneschi 20
<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
B4 HTML CSS Paolo Salvaneschi 21B4 HTML CSS Paolo Salvaneschi 21
…<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
B4 HTML CSS Paolo Salvaneschi 22B4 HTML CSS Paolo Salvaneschi 22
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
B4 HTML CSS Paolo Salvaneschi 23B4 HTML CSS Paolo Salvaneschi 23
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
B4 HTML CSS Paolo Salvaneschi 24
h1{color: red;}
Selettori
Regola
Dichiarazione Proprietà: Valore
SelettoreElemento a cui si applica un insieme di dichiarazioni
h1{color: red;font-weight: bold;}
B4 HTML CSS Paolo Salvaneschi 25
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
B4 HTML CSS Paolo Salvaneschi 26
• 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”
B4 HTML CSS Paolo Salvaneschi 27
• 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>
B4 HTML CSS Paolo Salvaneschi 28B4 HTML CSS Paolo Salvaneschi 28
…<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
B4 HTML CSS Paolo Salvaneschi 29B4 HTML CSS Paolo Salvaneschi 29
<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
B4 HTML CSS Paolo Salvaneschi 30B4 HTML CSS Paolo Salvaneschi 30
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
B4 HTML CSS Paolo Salvaneschi 31B4 HTML CSS Paolo Salvaneschi 31
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
B4 HTML CSS Paolo Salvaneschi 32B4 HTML CSS Paolo Salvaneschi 32
<style type="text/css">body { margin-left: 15%; margin-right: 15%; }h1 { margin-left: -10%; }h2,h3,h4,h5,h6 { margin-left: -5%; }div.color {background: #e0e0e0;
padding: 4em;border: thin solid blue;}
</style></head><body>
<h1>STORIA DI INTERNET</h1><div class="color"><p>Internet è frutto…</p></div><h2>La rete Arpanet</h2><p>Per la realizzazione…..
Formattazione di precisione
em - dimensione del font utilizzatopx - pixel
B4 HTML CSS Paolo Salvaneschi 33B4 HTML CSS Paolo Salvaneschi 33
Formattazione di precisione
• 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
B4 HTML CSS Paolo Salvaneschi 34B4 HTML CSS Paolo Salvaneschi 34
Formattazione di precisione
Box model
B4 HTML CSS Paolo Salvaneschi 35B4 HTML CSS Paolo Salvaneschi 35
<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>
Formattazione di precisione
top right bottom left
B4 HTML CSS Paolo Salvaneschi 36B4 HTML CSS Paolo Salvaneschi 36
Formattazione di precisione
• 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
B4 HTML CSS Paolo Salvaneschi 38B4 HTML CSS Paolo Salvaneschi 38
#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;}
Formattazione di precisione
B4 HTML CSS Paolo Salvaneschi 39B4 HTML CSS Paolo Salvaneschi 39
<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>
Formattazione di precisione
B4 HTML CSS Paolo Salvaneschi 40B4 HTML CSS Paolo Salvaneschi 40
…<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>