dag 3 commit 4
This commit is contained in:
Geir Okkenhaug Jerstad
parent
ac0782442e
commit
8b8153c6bf
14 changed files with 7 additions and 1 deletions
BIN
intro_html/img/body1.png
Normal file
BIN
intro_html/img/body1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
intro_html/img/body2.png
Normal file
BIN
intro_html/img/body2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
intro_html/img/body3.png
Normal file
BIN
intro_html/img/body3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
intro_html/img/head1.png
Normal file
BIN
intro_html/img/head1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
intro_html/img/head2.png
Normal file
BIN
intro_html/img/head2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
intro_html/img/head3.png
Normal file
BIN
intro_html/img/head3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
intro_html/img/legs1.png
Normal file
BIN
intro_html/img/legs1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
intro_html/img/legs2.png
Normal file
BIN
intro_html/img/legs2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
intro_html/img/legs3.png
Normal file
BIN
intro_html/img/legs3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
143
intro_html/index.html
Normal file
143
intro_html/index.html
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<!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>
|
||||
105
intro_html/js.html
Normal file
105
intro_html/js.html
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JS Intro</title>
|
||||
<style>
|
||||
.header {
|
||||
background-color: black;
|
||||
color: beige;
|
||||
border: solid red 1px;
|
||||
text-align: center;
|
||||
font-size: x-large;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
div.color1 {
|
||||
background-color: bisque;
|
||||
color: black;
|
||||
}
|
||||
|
||||
div.color2 {
|
||||
background-color: brown;
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
div.card {
|
||||
background-color: grey;
|
||||
color: blueviolet;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h3>Introduksjon til JavaScript</h3>
|
||||
<ol>
|
||||
<li>Finne frem til en tagg</li>
|
||||
<li>Endre HTML</li>
|
||||
<li>Trekke ut som funksjon</li>
|
||||
<li>kalle andre funksjoner<br /></li>
|
||||
</ol>
|
||||
<h3>Så bruker vi JavaScript til dette</h3>
|
||||
<ol>
|
||||
<li>Åpne og Lukke</li>
|
||||
<li>Velge hode</li>
|
||||
</ol>
|
||||
<div class="card">
|
||||
<div class="header color1" onclick="newText()"><b>Overskrift A</b>
|
||||
</div>
|
||||
<div id="tag1"></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="header color2" onclick="noClick()"><b>Overskrift B</b></div>
|
||||
<div id="tag2"></div>
|
||||
</div>
|
||||
<h3>Bla opp og ned</h3>
|
||||
<div style="display: flex;" id="numbersAndButtons">
|
||||
|
||||
</div>
|
||||
<script>
|
||||
showNumber1();
|
||||
function newText() {
|
||||
blankAll();
|
||||
document.getElementById('tag1').innerHTML = /*HTML*/ `
|
||||
<h1>Ny tekst 1</h1>`;
|
||||
}
|
||||
function noClick() {
|
||||
blankAll();
|
||||
document.getElementById('tag2').innerHTML = '<h2>Ikke trykk</h2>'
|
||||
}
|
||||
function blankAll() {
|
||||
document.getElementById('tag1').innerHTML = '';
|
||||
document.getElementById('tag2').innerHTML = '';
|
||||
}
|
||||
function showNumber1() {
|
||||
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
|
||||
<button onclick="showNumber4">◀</button>
|
||||
<div style="width: 40px; text-align: center;">1</div>
|
||||
<button onclick="showNumber2">▶</button>
|
||||
`;
|
||||
function showNumber2() {
|
||||
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
|
||||
<button onclick="showNumber1">◀</button>
|
||||
<div style="width: 40px; text-align: center;">2</div>
|
||||
<button onclick="showNumber3">▶</button>
|
||||
`;
|
||||
function showNumber3() {
|
||||
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
|
||||
<button onclick="showNumber2">◀</button>
|
||||
<div style="width: 40px; text-align: center;">3</div>
|
||||
<button onclick="showNumber4">▶</button>
|
||||
`;
|
||||
function showNumber4() {
|
||||
document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
|
||||
<button onclick="showNumber3">◀</button>
|
||||
<div style="width: 40px; text-align: center;">1</div>
|
||||
<button onclick="showNumber1">▶</button>
|
||||
`;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
3
intro_html/script.js
Normal file
3
intro_html/script.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
function oppdaterTekst() {
|
||||
document.getElementById('tekstDiv').innerHTML = 'Ny tekst nå som knappen er trykket på';
|
||||
}
|
||||
44
intro_html/style.css
Normal file
44
intro_html/style.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
body {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 500px;
|
||||
background-color: lightgray;
|
||||
border: solid 1px darkgray;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.innerCard {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: x-large;
|
||||
padding: 1% 0;
|
||||
border: 1px solid grey;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #3cba54;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: #f4c20d;
|
||||
;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: #36393f;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue