The language for building web pages: http://www.w3schools.com/
Gløer Langslet, Sandvika VGS har laget en nettbasert lærebok
i Informasjonsteknologi 2
basert på bruk av HTML 5: http://langslet.com/vgs/index.html
<html> <body> Hallo, jeg er en nettside </body> </html> |
<html> <body> <h1> Overskrift 1 </h1> <h2> Overskrift 2 </h2> <h6> Overskrift 3 </h3> Dette er <b>fet skrift</b>. <br> Dette er <i>kursiv skrift</i>. <br> <ul>Liste: <li> aaaaaa </li> <li> bbbbbb </li> </ul> </body> </html> |
<html> <head> <link rel="stylesheet" type="text/css" href="stil.css"/> </head> <body> <h1> Overskrift 1 </h1> <h2> Overskrift 2 </h2> <h6> Overskrift 3 </h3> Dette er <b>fet skrift</b>. <br> Dette er <i>kursiv skrift</i>. <br> <ul>Liste: <li> aaaaaa </li> <li> bbbbbb </li> </ul> </body> </html> |
Filen "stil.css": body { background-color: lightblue; } h2, b, i { color: red ; } |
<html> <body> <script src = "js_eksempel_1.js"> </script> Hallo, jeg er en nettside <canvas id = "lerret" width = "200" height = "200" style = "border: 3px solid black" > Nettleseren din støtter ikke html5 Canvas! </canvas> </body> </html> |
I filen js_eksempel_1.js: window.onload = function() { canvas = document.getElementById("lerret"); context = canvas.getContext("2d"); var mintekst = "Hello"; var xpos = canvas.width/2; var ypos = canvas.height/2; context.font = "50pt Comic Sans MS"; context.fillStyle = "green"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText(mintekst,xpos,ypos) } |
<html> <body> <script src = "animasjon.js"> </script> <canvas id = "lerret" width = "200" height = "200" style = "border: 3px solid black" > Nettleseren din støtter ikke html5 Canvas! </canvas> </body> </html> |
I filen animasjon.js: window.onload = function() { canvas = document.getElementById("lerret"); context = canvas.getContext("2d"); var xpos = 50; var ypos = canvas.height/2 var radius = 40; var endxpos = canvas.width-75; var change = 10; var startangle = (Math.PI/180)*0; var interval = 80; var endangle =(Math.PI/180)*360; var intervalID = setInterval(drawCircle,interval); function drawCircle() { context.strokeStyle = "red"; context.lineWidth = 4; xpos += change; if(xpos>endxpos) { clearInterval(intervalID); }; context.beginPath(); context.arc(xpos,ypos,radius,startangle, endangle,true); context.stroke(); } } |
<!doctype html> <html> <head> <style> @keyframes moveIt { 0% { left: 0px; top: 0px; } 25% { left: 400px; top: 0px; } 50% { left: 400px; top: 200px; } 75% { left: 0px; top: 200px; } 100% {left: 0px; top: 0px; } } .firkant { width: 50px; height: 50px; background-color: #00f; border:1px solid #000; position: relative; float: left; animation: moveIt 4s linear infinite; } </style> </head> <body> <div class="firkant"> </div> </body> </html> |
Det siste eksemplet med animasjon ved hjelp av CSS illustrerer begrepene som både Flash og animeringsverktøy bruker; keyframes, tweening og easing.
Se på:
Gjør exercise 1, 2, 3, 4, 5 og 6 nederst i den første lenken. (CSS Reference om animasjoner: http://www.w3schools.com/css/css3_animations.asp )
Tegn en enkel tegning, omtrent noe slikt:
og animer solens gang over himmelen.