TECNOLOGIE WEB BASE
HTML, CSS, Javascript: una
visione d’insieme
STRUTTURA
DEI CONTENUTI
HTML
ASPETTO
DEI CONTENUTI
CSS
se-l
et-t
ori
DOCUMENT
OBJECT
MODEL
JAVA
SCRIPT
COMPONENTI STATICHE COMPONENTI DINAMICHE
JSON
immagini
pagine html
(iframe)
LEZIONE 1..
www.fordatascientist.org
C00-Web-Base
C00-Introduction-WebTechnology.ipynb
TAG
<body>
</body>
<style>
</style>
<script>
</script>
<h3>
</h3>
<p>
</p>
Elementi html
<tag di apertura
attributo=’valore’ >
CONTENUTO
</tag di chiusura>
<p
id=’par1’ >
Lorem ipsum
dolor sit amet ..
</p>
Posizionamento Contenuti
Elementi inline
Elementi che sono contenuti in
un paragrafo, quali <span>
<img>, ma anche i <link>. Non
considerano eventuali attributi
width o height
Elementi block
Paragrafi e titoli ed altri elementi
che possono incorporarli, quali
<div>. La loro dimensione può
essere governata dagli attributi
width o height
display:block
float:left
Box Model
height
width
margin
pading
border
LEZIONE 1..
www.fordatascientist.org
C00-Web-Base
C02-Introduction-HTML.ipynb
class
<ul>
</ul>
<ol>
</ol><H2>
</H2>
id
<li>
<div>
</div>
<span>
</span>
&nbsp;
entità
.valore di
attributo class
Regole css
selettore { attributo : valore;
……………..
attributo : valore; }
tag dell’elemento
#valore di
attributo id
selettori multipli ( , )
selettori discendenti (spazio)
selettori dettagliati (uniti)
selettori figli diretti (>)
selettori adiacenti (+)
selettori fratelli (~)
h1, h2
h1 p
h1#id1
div > h1
h1 +h2
h3~h2
LEZIONE 1..
www.fordatascientist.org
C00-Web-Base
C04-Introduction-CSS.ipynb
rgb( 256,0,0)
color
#FF0000
backcolorPX
font-family
font-size
font-style
text-align
text-indent
text-justify
Document Object Model
document
HEAD HTML
STYLE
SCRIPT
LINK
DIV DIV
H1
P
LEZIONE 1..
www.fordatascientist.org
C00-Web-Base
C65-Javascript-and-Magic-Command.ipynb
CONTATTI TELEFONO
051 22 35 20
EMAIL
WORKSHOP@VICEM.IT

Fordatascientist - Tecnologie Web base