Kurs i webprogrammering

Dette kurset lærer deg HTML, CSS og JavaScript fra bunnen av, og er tilpasset valgfag programmering og informasjonsteknologi 1-2.

Kurs i webprogrammering: HTML

Modul 1 i programmeringskurset

    <html>
        <head>
            <title>Velkommen til bursdag</title>
        </head>
        <body>
            
            <h1>Velkommen til min bursdag</h1>
            <p>Jeg fyller år på søndag. du er velkommen til å bli med på telttur</p>
            <ul>
                <li>Pølser</li>
                <li>Fiskestang</li>
                <li>Telt</li>    
            </ul>
        </body>
    <html>
        <head>
            <title>Litt om overskrifter og tekster</title>
        </head>
        <body>
            <h1>Elefant på rømmen</h1>
            <p>En elefant rømte i går fra dyreparken i Kristiansand.</p>
            
            <h2>Merkelig oppførsel</h2>
            <p>Elefanten sies, i følge <a href="http://sp.no">Sørlandsposten</a>,  å ha oppført seg litt merkelig de siste dagene</p>
            
        </body>
    </html>
    <html>
        <head>
            <title>Med kajakk til jobb</title>
        </head>
        <body>
            <h1>En frisk start på dagen</h1>
            <p>Svein ble lei av å sitte i kø med bilen sin, og fant frem den gamle kajakken. Nå padler han til jobb og får en frisk start på dagen.</p>  
            
            <a href="snekke.html">Les også om snekka</a>
            <a href="index.html">Gå tilbake til forsiden</a>  
                            
        </body>
    </html>
    <html>
        <head>
            <title>På bærtur</title>
        </head>
        <body>
            <h1>På bærtur</h1>
            <p>Høsten er her, og skogen frister med modne blåbær. Vi dro ut tidlig i dag for å fylle kurvene.</p> 
            <img height="200" src="bilder/blueberry.jpg" alt="Blåbær som ligger i en kurv, og ser fristende ut.">       
            <h2>Et hyggelig møte</h2>
            <p>Ekornet er en trivelig krabat i skogen</p>
        </body>
    </html>
    <html>
        <head>
            <title>Ut på tur</title>
        </head>
        <body>
            <h1>På tur i skogen</h1>
            
            <a href="ekorn.html">
                <img width="200" src="bilder/ekorn.jpg">
            </a>
                  
        </body>
    </html>
    <html>
        <head>
            <title>En trivelig krabat</title>
        </head>
        <body>
            <h1>Møte med en trivelig krabat</h1>
            <figure>
                <img src="bilder/ekorn.jpg" width="250">
                <figcaption>I skogen kan du møte på denne trivelige krabaten</figcaption>
            </figure>
            <h2>Ekornet</h2>
            <p>Ekornet piler raskt opp og ned de store trærne i skogen...</p>
        </body>
    </html>
    <html>
        <head>
            <title>Lister</title>
        </head>
        <body>
            <h1>Handleliste</h1>
            <ul>
                <li>Prim</li>
                <li>Banos</li>
                <li>Et snes egg</li>
            </ul>
            
            <h1>Resultater fra 100-meter</h1>
            <ol>
    <html>
        <head>
            <title>Tabeller</title>
        </head>
        <body>
            <h1>Fakta om Skandinavia</h1>
            <table border="1">
                <tr>
                    <th>Land</th>
                    <th>Hovedstad</th>
                    <th>Antall innbyggere</th>
                </tr>
                <tr>
                    <td>Norge</td>
Gløer Langslet4:533 months ago
    <html>
        <head>
            <title>Semantisk HTML</title>
        </head>
        <body>
            <h1>Jeg er en overskrift</h1>
            <p>Jeg er et avsnitt</p>
            <div>Jeg er et div-element</div>
            <main>Jeg er main. Jeg er viktig</main>
        </body>
    </html>
    <html>
        <head>
            <title>Dele opp nettsiden</title>
        </head>
        <body>
            <header>
                <nav>
                    <a href="books.html">Books</a>
                    <a href="news.html">News</a>
                    <a href="books.html">Good reads</a>
                    <a href="books.html">Contact us</a>
                </nav>
            </header>
            
    <html>
        <head>
            <title>Nettavisa</title>
        </head>
        <body>
            <!-- Skriv koden deres her -->
            
        </body>
    </html>
    <html>
        <head>
            <title>Min oppskrift</title>
        </head>
        <body>
            
            <!-- Skriv din HTML-kode her -->
            
        </body>
    </html>

Kurs i webprogrammering: CSS

Modul 2 i programmeringskurset

    body {
        font-family: 'Times New Roman', Times, serif;
    }
    
    h1 {
        background-color: steelblue;
        color: white;
    }
    
    h2 {
        color: olive;
    }
    * {
       margin: 0; 
       padding: 0;
    }
    html, body {
        margin: 0;
        padding: 0;
    }
    
    body {
        padding: 20px;
        font-family: Georgia, 'Times New Roman', Times, serif;
    }
    
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>Metamorphosis</h1>
            <h2>I</h2>
        
            <figure>
                <img src="bilder/bug.jpg">
                <figcaption>En bille som klatrer</figcaption>    
            </figure>
            
            <p>One morning, as Gregor Samsa was waking up from anxious dreams,
    article {
        font-size: 32px;
    }
    
    div {
        border: 2px solid darkorange;
        margin-bottom: 8px;
        margin-right: 8px;
        float: left;
        padding: 30px;
        border-radius: 10px;
    }
    article {
        font-size: 32px;
    }
    
    div {
        border: 2px solid darkorange;
        margin-bottom: 8px;
        margin-right: 8px;
        float: left;
        padding: 15px;
        border-radius: 10px;   
    }
    
    .ikke-metallisk {
    article {
        font-size: 32px;
    }
    
    div {
        border: 2px solid darkorange;
        margin-bottom: 8px;
        margin-right: 8px;
        float: left;
        padding: 15px;
        border-radius: 10px;   
    }
    
    #dagens-grunnstoff {
    h1 {
        text-align: center;
        background-image: linear-gradient(#eee, #999);
        border: 2px solid olive;
        padding: 8px;
        width: 300px;
        margin: 80px auto;
    }
    
    h1:hover {
        color: white;
        background-image: linear-gradient(#999, #eee);
    }
    
    body {
        background-color: darkorange;
    }
    
    section {
        display: grid;
        grid-gap: 4px;
        grid-template-columns: repeat(8, 1fr);
        width
        
    }
    
    div {
        padding: 10px;
    
    section {
        position: relative;
        width: 500px;
        height: 300px;
        margin: auto;
        background-color: cyan;
    }
    
    #abs {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 50%;
    body {
        text-align: center;
        margin-top: 80px;
        background-color: green;
    }
    #kua {
        
        transform: rotate(90deg) translateX(200px);
    }
    body {
        background-color: green;
    }
    
    #kua {
        width: 200px;
        height: 145px;
        position: absolute;
        left: calc(50% - 100px);
        top: calc(50% - 73px);
        transition: 6s;
        transform-origin: 50px top;
    }
    
    @keyframes fallNed {
        from {
            top: 10px;
            background-color: yellow;
        }
        
        to {
            top: 340px;
            background-color: steelblue;
        }
    }
    
    #brett {
        position: relative;
    body {
        margin: 0;
        height: 100vh;
        background-color: darkred;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    section {
        display: grid;
        grid-template-columns: repeat(5, 10px);
        grid-template-rows: repeat(5, 10px);
        grid-gap: 2px;
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: Georgia, 'Times New Roman', Times, serif;
        padding: 16px;
    }
    
    h1, h2 {
        text-align: center;
        margin-bottom: 32px;
    }
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font-family: Georgia, 'Times New Roman', Times, serif;
        padding: 16px;
    }
    h1, h2 {
        margin-bottom: 32px;
        text-align: center;
    }
    article {
        column-count: 3;
    html, body {
        margin: 0;
        padding: 0;
        background-color: orange;
    }
    main {
        height: 100vh;    
        display: flex;
        align-items: center;
        justify-content: center;
    }
    img {    
        width: 200px;
        position: absolute;
    html, body {
        margin: 0;
        padding: 0;
        background-color: black;
    }
    h1 {
        font-family: 'Amatic SC', sans-serif;
        font-size: 5rem;
        color: greenyellow;
        margin-top: 90px;
        text-align: center;
    }
    @keyframes sharpenup {
        to {
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <main>
            <div class="ikke-metall">H</div>
            <div id="he" class="edelgass">HE</div>
    
            <div class="alkali-metall">Li</div>
            <div class="jordalkali-metall">Be</div>
            <div id="b" class="halv-metall">B</div>
            <div class="ikke-metall">C</div>
            <div class="ikke-metall">N</div>
    html, body {
        margin: 0;
        padding: 0;
    }
    main {
        border: 2px solid gray;
        border-bottom: none;
        width: 180px;
        height: 400px;
        margin: 10px auto;
        position: relative;
    }
    #boet {
       position: absolute;

Kurs i webprogrammering: JavaScript

Modul 3 i programmeringskurset

    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            
            <h1>HVA ER JAVASCRIPT</H1>
            
            <script>
                
                document.onclick = () => {
                    document.body.style.backgroundColor = "black";
                    document.body.innerHTML += "<h1>BØ</h1>";
                }
    let radius = 20; // En variabel
    const PI = 3.14; // En konstant
    
    radius = 100; // Endrer vi verdien til 
    
    console.log( PI * radius * radius);
    let tall = 23.847289;
    let forkortet = tall.toFixed(2);
    
    console.log(forkortet);
    console.log(typeof forkortet);
    let tilfeldig = Math.floor( Math.random() * 5 ) + 1;
    
    console.log(tilfeldig);
    function skrivLittTekst(tekst) {
        console.log(tekst);
    }
    
    const skrivTekst = () => {
        console.log("Du klikket på meg");
    }
    
    document.onclick = skrivTekst;
    
    const overskrift = document.querySelector("#overskrift");
    const minFarge = document.querySelector("#minFarge");
    
    overskrift.innerHTML = "VET IKKE";
    
    minFarge.oninput = () => {
        document.body.style.backgroundColor = minFarge.value; 
    }
    
    
    
    const inpTall1 = document.querySelector("#inpTall1");
    const inpTall2 = document.querySelector("#inpTall2");
    const txtSvar = document.querySelector("#txtSvar");
    
    const regnUt = () => {
        const tall1 = Number(inpTall1.value);
        const tall2 = Number(inpTall2.value);
        
        const svar = tall1 + tall2;
        txtSvar.innerHTML = svar;
    }
    
    inpTall1.oninput = regnUt;
    inpTall2.oninput = regnUt;
    const inpTall1 = document.querySelector("#inpTall1");
    const inpTall2 = document.querySelector("#inpTall2");
    const txtSvar = document.querySelector("#txtSvar");
    const valgtRegneart = document.querySelector("#valgtRegneart");
    
    
    const regnUt = () => {
        const tall1 = Number(inpTall1.value);
        const tall2 = Number(inpTall2.value);  
        const regneart = valgtRegneart.value;
         
        let svar;
        
        if(regneart === "+") {
    const firkanter = document.querySelector("#firkanter");
    
    let i = 1;
    
    while(i <= 100) {
        
        const firkant = document.createElement("div");
        firkanter.appendChild(firkant);
        
        firkant.style.opacity = 0.4;
        
        i++;    
    }
    
    body {
        height: 100vh;
        background-color: black;
        display: flex;
        align-items: center;
        justify-content: center;    
    }
    #firkanter {
        display: grid;
        grid-gap: 1px;
        grid-template-columns: repeat(10, 20px);
        grid-template-rows: repeat(10, 10px);
    }
    #firkanter div {    
    const handleliste = document.querySelector("#handleliste");
    
    const varer = [
        "Banan", 
        "Brød", 
        "Kaviar", 
        "Gulost"
    ];
    const priser = [23, 32, 23, 32];
    
    // Traversere et array
    
    for(const vare of varer) {
        
Gløer Langslet5:493 months ago
    const handleliste = document.querySelector("#handleliste");
    const txtSum = document.querySelector("#txtSum");
    
    const kaviar = {
      varenavn: "Mills Kaviar",
      pris: 28  
    };
    
    const gulost = {
        varenavn: "Tine Norvegia",
        pris: 49
    }
    
    const prim = {
    const handleliste = document.querySelector("#handleliste");
    const inpVare = document.querySelector("#inpVare");
    
    inpVare.onchange = () => {
        handleliste.innerHTML += `
            <li> ${inpVare.value} </li>
        `;
    }
    const handleliste = document.querySelector("#handleliste");
    const inpVare = document.querySelector("#inpVare");
    
    const varer = [];
    
    //varer.push("Banan");
    
    const visVarer = () => {
        handleliste.innerHTML = ""; // Nuller ut handlelisten
        for(const vare of varer) {
            
            handleliste.innerHTML += `
                <li>
                    ${vare}
    const sky = document.getElementById("sky");
    
    onscroll = () => {
        sky.style.left = scrollY - 180 + "px";    
    }
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>
    console.log("Hello from JavaScript");
    const passord = "banan";
    
    let inputFraBruker = ;
    
    if(inputFraBruker === passord) {
        console.log("Du har skrevet riktig passord. Kom inn!!!!");
    } else {
        console.log("Feil passord! Prøv igjen!!!!");
    }
    let tall = 23.847289;
    let forkortet = tall.toFixed(2);
    
    console.log(forkortet);
    console.log(typeof forkortet);
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>Nettbanken</h1>
            
            <script src="index.pack.js"></script>
        </body>
    </html>
    html {
        font-size: 100%;
    }
    
    body {
        background-color: #eee;
        font-family: sans-serif;
    }
    
    main {
        max-width: 700px;
        margin: auto;
        padding: 1rem;
        background-color: white;
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            
            <main>
                <div id="boet">
                    <div id="blue"></div>
                    <div id="white"></div>
                    <div id="red"></div>
                    <div id="white_inner"></div>
                </div>
                

Kurs i webprogrammering: Lag et spill

I denne modulen vil du lære å lage et spill med HTML, CSS og JavaScript

    <html>
        <head>
            <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            
            <section id="game">
                <header>
                    <section>
                        <label>Poeng</label>
                        <p id="txtPoeng">20</p>
                    </section>
                    <section>
    * {
        box-sizing: border-box;
        margin: 0;
    }
    html {
        font-size: 100%;
    }
    body {
        background-color: #eee;
        font-family: 'Roboto', sans-serif;
        text-align: center;
    }
    #game {
        width: 25rem;
    const divRegnestykke = document.getElementById("divRegnestykke");
    
    const gameOver = () => {
        console.log("Spillet er over");
    }
    
    const startAnimasjon = () => {
        divRegnestykke.className = "faller";
    }
    
    divRegnestykke.addEventListener("animationend", gameOver);
    
    document.onclick = () => {
        divRegnestykke.className = "";
    const divRegnestykke = document.getElementById("divRegnestykke");
    const txtPoeng = document.getElementById("txtPoeng");
    const inpSvar = document.getElementById("inpSvar");
    
    let fasit = 0;
    let poeng = 0;
    
    const gameOver = () => {
        console.log("Spillet er over");
        inpSvar.disabled = true;
        inpSvar.style.backgroundColor = "pink";
    }
    
    const lagRegnestykke = () => {
    * {
        box-sizing: border-box;
        margin: 0;
    }
    html {
        font-size: 100%;
    }
    body {
        background-color: #eee;
        font-family: 'Roboto', sans-serif;
        text-align: center;
    }
    #game {
        width: 25rem;
    const divRegnestykke = document.getElementById("divRegnestykke");
    const txtPoeng = document.getElementById("txtPoeng");
    const inpSvar = document.getElementById("inpSvar");
    const txtHighscore = document.getElementById("txtHighscore");
    
    let fasit = 0;
    let poeng = 0;
    let varighet = 6;
    let highscore = 0;
    
    if(localStorage.highscore) {
        
        highscore = localStorage.highscore;
        
Velkommen til kurset i webprogrammering for norske ungdoms- og videregåendeskoler.