HTML 5


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

3 Deler:/


HTML:

Minimal nettside:

<html>
<body>

   Hallo, jeg er   

   en nettside

</body>
</html>

Lenke

Med noen vanlige tags:

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

Lenke


CSS - Cascading Style Sheets

 

<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 ;

}

Lenke


JavaScript

Canvas

Eksempel:

 

<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)
   }

Lenke


Animering av figur med JavaScript:

 <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();

      }
   }

Lenke


Animering av figur med CSS:

<!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>

Lenke


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.