143 lines
5.2 KiB
HTML
143 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=x, initial-scale=1.0">
|
|
<link rel="stylesheet" href="style.css" />
|
|
<script src="script.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<button>Ingen Layout</button>
|
|
<button>Vertikal layout</button>
|
|
<button>Horisontal layout</button>
|
|
<button>Grid layout</button>
|
|
|
|
<h1>Eksempel 1</h1>
|
|
<div id="tekstDiv">Start Tekst Her</div>
|
|
<button onclick="oppdaterTekst()">Trykk på knappen for å oppdatere tekst</button>
|
|
<div id="cards">
|
|
<div class="card">
|
|
<div class="header green">
|
|
Verktøy
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="innerCard">
|
|
De to viktigste verktøyene vi skal bruke er disse:
|
|
<ul>
|
|
<li>
|
|
Koderedigeringsprogrammet <a href="https://code.visualstudio.com/">Visual Studio Code</a>
|
|
<br>
|
|
Vi skal bruke noen <i>extensions</i>:
|
|
<ul>
|
|
<li>JavaScript-booster</li>
|
|
<li>es6-string-html</li>
|
|
<li>live-server</li>
|
|
<li>live-share</li>
|
|
</ul>
|
|
</li>
|
|
<li>Nettleseren <a href="https://www.google.com/intl/no/chrome/">Chrome</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="cards">
|
|
<div class="card">
|
|
<div class="header blue">
|
|
HTML
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="innerCard">
|
|
Vi bruker HTML til å definere et dokument.
|
|
<ul>
|
|
<li>Tagger for grunnleggende oppsett av en HTML-fil</li>
|
|
<li>Tagger for grunnleggende formatering av tekst</li>
|
|
<li><tt><div></tt></li>
|
|
<li><tt><input type="text"></tt></li>
|
|
<li><tt><button></tt></li>
|
|
<li><a href="https://www.w3schools.com/html/default.asp" target="_new">W3Schools HTML Tutorial</a>
|
|
</li>
|
|
<li><a href="https://www.w3schools.com/tags/default.asp" target="_new">W3Schools HTML Reference</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="cards">
|
|
<div class="card">
|
|
<div class="header red">
|
|
CSS
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="innerCard">
|
|
Vi bruker CSS til å <i>style</i> et dokument, altså farger, fonter, utseende og lignende.
|
|
<ul>
|
|
<li><tt>background-color</tt></li>
|
|
<li><tt>color</tt></li>
|
|
<li><tt>padding</tt></li>
|
|
<li><tt>margin</tt></li>
|
|
<li><tt>border</tt></li>
|
|
<li><tt>text-align</tt></li>
|
|
<li><tt>font-size</tt></li>
|
|
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_new">Flexbox</a></li>
|
|
<li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_new">Grid</a></li>
|
|
<li><a href="https://www.w3schools.com/css/default.asp" target="_new">W3Schools CSS Tutorial</a>
|
|
</li>
|
|
<li><a href="https://www.w3schools.com/cssref/default.asp" target="_new">W3Schools CSS Reference</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="cards">
|
|
<div class="card">
|
|
<div class="header yellow">
|
|
JavaScript
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="innerCard">
|
|
Det viktigste vi skal lære er programmeringsspråket JavaScript. Vi skal lære grunnleggende programmering
|
|
ved
|
|
å manipulere HTML- og CSS-kode på en nettside ved hjelp av JavaScript.
|
|
<ul>
|
|
<li>Det finnes en W3Schools JavaScript Tutorial, men her anbefaler vi heller å følge kurset vårt på
|
|
Moodle.</li>
|
|
<li><a href="https://www.w3schools.com/jsref/default.asp" target="_new">W3Schools JavaScript
|
|
Reference</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="cards">
|
|
<div class="card">
|
|
<div class="header dark">
|
|
Hode, kropp og ben
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div id="head" class="bodyPart">
|
|
<button onclick="selectHead4()">◀</button>
|
|
<img src="img/head1.png">
|
|
<button onclick="selectHead2()">▶</button>
|
|
</div>
|
|
<div id="body" class="bodyPart">
|
|
<button onclick="selectBody4()">◀</button>
|
|
<img src="img/body1.png">
|
|
<button onclick="selectBody2()">▶</button>
|
|
</div>
|
|
<div id="legs" class="bodyPart">
|
|
<button onclick="selectLegs4()">◀</button>
|
|
<img src="img/legs1.png">
|
|
<button onclick="selectLegs2()">▶</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |