corso base di tecnologie web - una visione d'insieme
TRANSCRIPT
TECNOLOGIE WEB BASE
HTML, CSS, Javascript: una visione d’insieme
STRUTTURADEI CONTENUTI
HTML
ASPETTODEI CONTENUTI
CSS
se-let-tori
DOCUMENT
OBJECT
MODEL
JAVA SCRIPT
COMPONENTI STATICHE COMPONENTI DINAMICHE
JSON
immaginipagine html(iframe)
LEZIONE 1..www.fordatascientist.orgC00-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 inlineElementi che sono contenuti in un paragrafo, quali <span> <img>, ma anche i <link>. Non considerano eventuali attributi width o height
Elementi blockParagrafi e titoli ed altri elementi che possono incorporarli, quali <div>. La loro dimensione può essere governata dagli attributi width o height
display:blockfloat:left
Box Model
height
width
margin
pading
border
LEZIONE 1..www.fordatascientist.orgC00-Web-Base
C02-Introduction-HTML.ipynb
class<ul></ul>
<ol></ol><H2>
</H2> id
<li>
<div></div>
<span></span>
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, h2h1 p h1#id1div > h1h1 +h2h3~h2
LEZIONE 1..www.fordatascientist.orgC00-Web-Base
C04-Introduction-CSS.ipynb
rgb( 256,0,0)
color
#FF0000
backcolorPXfont-family
font-sizefont-style
text-aligntext-indent
text-justify
Document Object Model
document
HEAD HTML
STYLE
SCRIPT
LINK
DIV DIV
H1
P
LEZIONE 1..www.fordatascientist.orgC00-Web-Base
C65-Javascript-and-Magic-Command.ipynb
