Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

HTML
DOWNLOAD

Koko: px

Aloita esitys sivulta:

Download "Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com"

Urho Härkönen
8 vuotta sitten
Katselukertoja:

1 Kotisivujen teko Jan Lindholm Kirkkonummen kansalaisopisto Syksy 2014 koodari.eu jsbin.com

2 Käyttäjätunnus / Salasana aoppilas.01 / aoppilas#2013# aoppilas.02 / aoppilas#2013# aoppilas.03 / aoppilas#2013# koodari.eu jsbin.com

3 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

4 Luento 1

5 Tärkeysjärjestys HTML5 (rakenne ja sisältö) CSS3 (ulkonäkö) JavaScript (dynaamiset sivut)

6 HTML5? HTML:n uusin versio Uudet web-tekniikat HTML5, CSS3 ja JavaScript

7 Illan tagit Heading (otsikko) Paragraph (kappale) Strong (vahvistus) Emphasize (korostus) Preformatted text

8 Illan tagit <h1>otsikko</h1> kappale vahvistus korostus <pre>preformatted text</pre>

10 Tagi <tag>hello World</tag> esim. hello World

11 Elementti <tag>hello World</tag> esim. hello World

15 Luento 02 JS Bin jsbin.com HTML, CSS ja JavaScript Kotisivujen koodin jakaminen Rekisteröidy github.com

16 Illan tagit Kuvat Listat Rivin vaihto Horisontaalinen viiva

17 Illan tagit - kuvat <figure> <img src= pluto.png /> <figcaption> Kuva Pluto-planeetasta </figcaption> </figure>

18 Illan tagit järjestämätön lista <ul> <li>html5</li> <li>css3</li> <li>javascript</li> </ul>

19 Illan tagit järjestetty lista <ol> <li>html5</li> <li>css3</li> <li>javascript</li> </ol>

20 Illan tagit rivin vaihto & ja viiva <hr />

21 Luento 03 - CSS Tekstin koko Tekstin ja taustan värit Tyhjätila

22 CSS CSS:llä muokkaat kotisivusi ulkonäköä Väriä Fonttikokoa Elementtien sijoittelu p { color: silver; font-size: 200%; }

23 väri CSS

24 CSS koko

25 CSS sijainti

26 CSS valitsin { } ominaisuus: arvo;

27 CSS body { margin: auto; width: 70%; }

28 CSS h1, h2, h3, h4, h5, h6 { color: gold; } p { color: rgb(0, 100, 255); }

29 CSS h1, h2, h3, h4, h5, h6 { color: gold; } p { color: rgb(0, 100, 255); }

30 margin border padding CSS

31 .k

32 Whois / syysloma

33 CSS tärkeysjärjestys? p { color: red; }.luokka1 { color: green; } #wrapper { color: blue; }

34 /* css-tyyppivalitsin */ p { color: red; }  punaista tekstiä

35 /* css-luokkavalitsin */ 1).luokka1 { color: green; }  vihreä

36 /* css-id valitsin */ 1)#wrapper { color: blue; }  sinistä

37 CSS - tärkeysjärjestys p { color: red; }.luokka1 { color: green; } #wrapper { color: blue; }

38 CSS - tärkeysjärjestys teksti

39 ... ... <div id= wrapper >...</div>

40 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 */

41 Pseudoelementit a:link, a:visited, a:hover, a:active, a:focus p:first-line, p:firstletter, p:first-child p:before, p:after

42 Pseudoluokat.pieni:link.pinkki:visited.suuri:first-line

43 CSS3 - Transform figure:hover { transform: rotate(360deg) scale(2) translate(50px, 100px); transition-duration: 3s; }

44 Linkit <a href= >Linkki</a>

45 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ä)

46 WAMP 1) 2) Download 3) c:\wamp 4)

47 The Big Picture

48 Asiakas The Big Picture Palvelin Selain internet HTTP Palvelin PHP MySQL

49 PHP HTML <?php echo hello world ;?> hello world

50 PHP HTML <?php for($i = 0; $i < 3; $i++) { echo . $i. ; }?> 0 1 2

51 CSS-valitsimen tärkeysjärjestys * {} yleisvalitsin p {} tyyppivalitsin.luokka {} valitsin #tunnus {} valitsin!important esim. color: blue!important;

52 PHP - Luento 8 PHP: Hypertext Preprocessor Dynaamiset kotisivut PHP tulkataan palvelimella

53 localhost/mysite C:\wamp\www\mysite js images style

54 <head> <head> <meta charset="utf-8"> <title>kotisivuni nimi</title> <link rel="stylesheet" href="css/styles.css"> </head>

55 PHP /* kommentti */ // kommentti rivin loppuun # kommentti rivin loppuun include( yla.php ); include( ala.php );

56 Erikoismerkit <?php include("yla.php");?> vai <?php include("yla.php");?>

57 PHP <?php?> echo( hello world );

58 PHP if (ehto) { } koodi

59 PHP $ika = 42; if ($ika >= 18) { } echo( olet aikuinen );

62 Lataa Google Chrome -selain ja asenna otsikossa olevasta osoitteesta lisäosa

63 Taustakuva background-image: url(''); background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat;

64 CSS li { display: inline; } span { display: block; }

65 CSS img.big { height: 120px; } font-family: verdana, arial;

66 Microsoft.com/enus/download/confirmation.aspx? id=30679

67 Luento 9 PHP Google Chrome Asenna: Developer Tools CSS-ominaisuuksia Yksinkertainen kotisivupohja

68 Developer Tools

69 CSS font: normal 170% verdana, arial; font-style: normal; font-size: 170%; font-family: verdana, arial;

70 list-style-type: circle; line-height: 1em; float: left;

71 /* top, right, bottom, left */ padding: px 0; margin: px 0; /* top & bottom, left & right */ margin: 10px 20px; display: block; display: inline;

72 /* kaikki p-elementit jotka ovat footer-elementin sisällä */ footer p { padding: px 0; }

73 HTML5 <aside></aside>

74 Luento 10 Kotisivutila Kertausta Omat sivut

75 Kotisivutila (40 euroa / vuosi)

76 Luento 11 Oman sivun kehitys kapsi.fi, mochahost.com FTP-ohjelma, esim. WinSCP Inline / Block level -elements

77 Block level / Inline elements Block level elements: <div>, , <header>,... Inline elements: , , <a>,...

78 Wireframe Responsiiviset sivut Website x5

79 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 />

Samankaltaiset tiedostot

Ulkoasun muokkaus CSS-tiedostossa

Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css