Kotisivujen teko Jan Lindholm Kirkkonummen kansalaisopisto Syksy 2014 koodari.eu jsbin.com
Käyttäjätunnus / Salasana aoppilas.01 / aoppilas#2013# aoppilas.02 / aoppilas#2013# aoppilas.03 / aoppilas#2013# koodari.eu jsbin.com
Luennot 1) Oma CV (HTML 4.01) 2) JS Bin (HTML5) 3) Väriteoria (CSS) 4) WAMP & CSS 5) Steve Krug 6) FTP 7) WAMP
Luento 1
Tärkeysjärjestys HTML5 (rakenne ja sisältö) CSS3 (ulkonäkö) JavaScript (dynaamiset sivut)
HTML5? HTML:n uusin versio Uudet web-tekniikat HTML5, CSS3 ja JavaScript
Illan tagit Heading (otsikko) Paragraph (kappale) Strong (vahvistus) Emphasize (korostus) Preformatted text
Illan tagit <h1>otsikko</h1> <p>kappale</p> <strong>vahvistus</strong> <em>korostus</em> <pre>preformatted text</pre>
Tagi <tag>hello World</tag> esim. <p>hello World</p>
Elementti <tag>hello World</tag> esim. <p>hello World</p>
Luento 02 JS Bin jsbin.com HTML, CSS ja JavaScript Kotisivujen koodin jakaminen Rekisteröidy github.com
Illan tagit Kuvat Listat Rivin vaihto Horisontaalinen viiva
Illan tagit - kuvat <figure> <img src= pluto.png /> <figcaption> Kuva Pluto-planeetasta </figcaption> </figure>
Illan tagit järjestämätön lista <ul> <li>html5</li> <li>css3</li> <li>javascript</li> </ul>
Illan tagit järjestetty lista <ol> <li>html5</li> <li>css3</li> <li>javascript</li> </ol>
Illan tagit rivin vaihto & ja viiva <br /> <hr />
Luento 03 - CSS Tekstin koko Tekstin ja taustan värit Tyhjätila
CSS CSS:llä muokkaat kotisivusi ulkonäköä Väriä Fonttikokoa Elementtien sijoittelu p { color: silver; font-size: 200%; }
väri CSS
CSS koko
CSS sijainti
CSS valitsin { } ominaisuus: arvo;
CSS body { margin: auto; width: 70%; }
CSS h1, h2, h3, h4, h5, h6 { color: gold; } p { color: rgb(0, 100, 255); }
CSS h1, h2, h3, h4, h5, h6 { color: gold; } p { color: rgb(0, 100, 255); }
margin border padding CSS
.k
Whois / syysloma http://jsbin.com/holev
CSS tärkeysjärjestys? p { color: red; }.luokka1 { color: green; } #wrapper { color: blue; }
/* css-tyyppivalitsin */ p { color: red; } <!-- html --> <p>punaista tekstiä</p>
/* css-luokkavalitsin */ 1).luokka1 { color: green; } <!-- html --> <p class= luokka1 > vihreä</p>
/* css-id valitsin */ 1)#wrapper { color: blue; } <!-- html --> <p id= wrapper >sinistä</p>
CSS - tärkeysjärjestys p { color: red; }.luokka1 { color: green; } #wrapper { color: blue; }
CSS - tärkeysjärjestys <p id= wrapper class= luokka1 luokka2 > teksti</p>
<p class= luokka1 >...</p> <p class= luokka1 luokka2>...</p> <div id= wrapper >...</div>
Luennot 5 ja 6 CSS3 (transform, rgba, columns, shadow, border-radius) Pseudo-elementit, pseudo-luokat HTML5 (section, time) jsbin.com/yugobi jsbin.com/qarev /* php */
Pseudoelementit a:link, a:visited, a:hover, a:active, a:focus p:first-line, p:firstletter, p:first-child p:before, p:after
Pseudoluokat.pieni:link.pinkki:visited.suuri:first-line
CSS3 - Transform figure:hover { transform: rotate(360deg) scale(2) translate(50px, 100px); transition-duration: 3s; }
Linkit <a href= http://www.av.com >Linkki</a>
Luento 7 1) WAMP 2) The Big Picture 3) CSS tärkeysjärjestys 4) CSS Help Sheet 5) JavaScript piirtäminen koodari.eu jsbin.com/xilupu (kloonaa tämä)
WAMP 1) www.wampserver.com/en 2) Download 3) c:\wamp 4) http://localhost
The Big Picture
Asiakas The Big Picture Palvelin Selain internet HTTP Palvelin PHP MySQL
PHP HTML <?php echo <p>hello world</p> ;?> <p>hello world</p>
PHP HTML <?php for($i = 0; $i < 3; $i++) { echo <p>. $i. </p> ; }?> <p>0</p> <p>1</p> <p>2</p>
CSS-valitsimen tärkeysjärjestys * {} yleisvalitsin p {} tyyppivalitsin.luokka {} valitsin #tunnus {} valitsin!important esim. color: blue!important;
PHP - Luento 8 http://jsbin.com/hibib PHP: Hypertext Preprocessor Dynaamiset kotisivut PHP tulkataan palvelimella
localhost/mysite C:\wamp\www\mysite js images style
<head> <head> <meta charset="utf-8"> <title>kotisivuni nimi</title> <link rel="stylesheet" href="css/styles.css"> </head>
PHP /* kommentti */ // kommentti rivin loppuun # kommentti rivin loppuun include( yla.php ); include( ala.php );
Erikoismerkit <?php include("yla.php");?> vai <?php include("yla.php");?>
PHP <?php?> echo( <p>hello world</p> );
PHP if (ehto) { } koodi
PHP $ika = 42; if ($ika >= 18) { } echo( olet aikuinen );
http://chrispederick.com/work/webdeveloper/
http://chrispederick.com/work/webdeveloper/
http://chrispederick.com/work/webdeveloper/ Lataa Google Chrome -selain ja asenna otsikossa olevasta osoitteesta lisäosa
Taustakuva background-image: url(''); background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat;
CSS li { display: inline; } span { display: block; }
CSS img.big { height: 120px; } font-family: verdana, arial;
Microsoft.com/enus/download/confirmation.aspx? id=30679
Luento 9 PHP Google Chrome Asenna: Developer Tools CSS-ominaisuuksia Yksinkertainen kotisivupohja
Developer Tools http://chrispederick.com/work/webdeveloper
CSS font: normal 170% verdana, arial; font-style: normal; font-size: 170%; font-family: verdana, arial;
list-style-type: circle; line-height: 1em; float: left;
/* top, right, bottom, left */ padding: 0 0 20px 0; margin: 0 0 15px 0; /* top & bottom, left & right */ margin: 10px 20px; display: block; display: inline;
/* kaikki p-elementit jotka ovat footer-elementin sisällä */ footer p { padding: 0 0 10px 0; }
HTML5 <aside></aside>
Luento 10 Kotisivutila Kertausta Omat sivut
Kotisivutila www.mochahost.com www.kapsi.fi (40 euroa / vuosi) www.hetzner.de
Luento 11 Oman sivun kehitys www.websitex5.com kapsi.fi, mochahost.com FTP-ohjelma, esim. WinSCP Inline / Block level -elements
Block level / Inline elements Block level elements: <div>, <p>, <header>,... Inline elements: <span>, <strong>, <a>,...
Wireframe Responsiiviset sivut Website x5
Responsive Design <link rel= stylesheet media= screen and (min-width: 0px) href= small.css /> <link rel= stylesheet media= screen and (min-width: 1000px) href= medium.css /> <link rel= stylesheet media= screen and (min-width: 1400px) href= large.css />