Klient2

6146619b · nilstes · 2766c5d1 · 6146619b · 6146619b · 6146619b
Commit 6146619b authored 7 years ago by nilstes
--- a/Klient2/canvas-eksempel.html
+++ b/Klient2/canvas-eksempel.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Canvas-eksempel</title>
+  </head>
+  <body>
+
+    <canvas id="lerret" width="300" height="250" style="border:2px solid #000000;">
+      Nettleseren din st&oslash;tter ikke canvas-taggen i HTML5.
+    </canvas>
+
+    <script>
+      // Finn elementet
+      var c=document.getElementById("lerret");
+
+      // Lag tegneobjekt
+      var ctx=c.getContext("2d");
+
+      // Tegn rdt rektangel
+      ctx.fillStyle="#FF0000";
+      ctx.fillRect(0,0,150,75);
+
+      // Lag gradient
+      var gradient=ctx.createRadialGradient(200,150,100,0,0,200);
+      gradient.addColorStop("0","red");
+      gradient.addColorStop("0.5","green");
+      gradient.addColorStop("1.0","blue");
+
+      // Knytt objektet til gradienten og tegn
+      ctx.fillStyle=gradient;
+      ctx.arc(200,150,100,0,2*Math.PI);
+      ctx.fill();
+
+    </script>
+  </body>
+</html>
--- a/Klient2/css-eksempel.html
+++ b/Klient2/css-eksempel.html
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <title>Nettsiden min</title>
+
+    <style>
+      p, h1 {
+      	color : #FF6666;
+      	background-color: yellow;
+      }
+      img {
+      	border: 1px solid black;
+      	padding: 10px;
+      }
+      #content {
+        position: relative;
+      	border: 1px dotted black;
+        width: 80%;
+      	min-width: 200px;
+      	max-width:800px;
+      	margin: auto;
+      }
+      header {
+      	border: 2px solid red;
+      }
+      .kolonne {
+      	border: 2px solid green;
+      	float: left;
+      	width: 200px;
+      }
+      #favoritter {
+		position: relative;
+        left: 2px;
+        top: 2px;
+    	
+      }
+      .clear {clear: both;}
+    </style>
+  </head>
+
+  <body>
+	<div id="content">
+	  <header>
+		<h1>Velkommen til nettsiden min!</h1>
+	  </header>
+
+	  <div id="om_meg" class="kolonne">
+		<p>Her er et bilde av meg:</p>
+		<img src="bildeavmeg.jpg" height="150" />
+	  </div>
+
+	  <div id="min_hobby" class="kolonne">
+		<h2>Min hobby</h2>
+
+		<p>Min store hobby er &aring; samle p&aring; frimerker. <br/> Les mer om frimerker
+		  <a href="http://no.wikipedia.org/wiki/Frimerke">her</a>.
+		</p>
+	  </div>
+
+	  <div id="favoritter" class="kolonne">
+		<h3>Mine favorittfrimerker</h3>
+		<ol id="bindersliste">
+		  <li>Det r&oslash;de frimerket</li>
+		  <li>Det rosa frimerket</li>
+		</ol>
+	  </div>
+
+	  <div class="clear"></div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
--- a/Klient2/flyt-eksempel.html
+++ b/Klient2/flyt-eksempel.html
+
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.side {
+				width: 80%;
+				height: 200px;
+				border: 2px solid black;
+			}
+
+			.boks {
+				background-color: lightgray;
+				width: 100px;
+				padding: 5px;
+				border: 2px solid black;
+				float: right;
+				margin: 2px;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="side">
+			<div class="boks">1</div>
+			<div class="boks">2</div>
+			<div class="boks">3</div>
+			<div class="boks">4</div>
+		</div>
+	</body>
+</html>
--- a/Klient2/js-eksempel.html
+++ b/Klient2/js-eksempel.html
+<html>
+	<head>
+		<title>Mitt frste JavaScript</title>
+	</head>
+	<body>
+		<script language="javascript">
+			alert('<p>En liten test</p>');
+		</script>
+	</body>
+</html>