geir/startit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

visuell-teller

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-16 14:01:43 +02:00
parent 83f69d397d
commit 859f8334d9
12 changed files with 140 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

61
intro_html/index.html
View file

@ -9,10 +9,10 @@
</head>
<body>
<button>Ingen Layout</button>
<button>Vertikal layout</button>
<button>Horisontal layout</button>
<button>Grid layout</button>
<button onclick="noLayout()">Ingen Layout</button>
<button onclick="vertLayout()">Vertikal layout</button>
<button onclick="horLayout()">Horisontal layout</button>
<button onclick="gridLayout()">Grid layout</button>
<h1>Eksempel 1</h1>
<div id="cards">
@ -20,10 +20,11 @@
<div class="header green" onclick="green()">
Verktøy
</div>
<div class="innerCard" id="green"></div>
</div>
</div>
<div class="card">
<div class="innerCard" id="inner">
<div class="innerCard" id="green">
</div>
</div>
<div id="cards">
@ -34,72 +35,36 @@
</div>
</div>
<div class="card">
<div class="innerCard" id="inner">
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>&lt;div&gt;</tt></li>
<li><tt>&lt;input type="text"&gt;</tt></li>
<li><tt>&lt;button&gt;</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 class="innerCard" id="blue">
</div>
</div>
<div id="cards">
<div class="card">
<div class="header red">
<div class="header red" onclick="red()">
CSS
</div>
</div>
</div>
<div class="card">
<div class="innerCard" id="inner">
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 class="innerCard" id="red">
</div>
</div>
<div id="cards">
<div class="card">
<div class="header yellow" onclick="openClose()">
<div class="header yellow" onclick="yellow()">
JavaScript
</div>
</div>
<div class="card">
<div class="innerCard" id="inner">
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>
<div class="innerCard" id="yellow">
</ul>
</div>
</div>
</div>
<div id="cards">
<div class="card">
<div class="header dark">
<div class="header dark" onclick="dark()">
Hode, kropp og ben
</div>
</div>