Løsningsforslag til kapittel 1

Her finner du løsningsforslag, råd og vink til oppgavene i kapittel 1.

1.1 Hva er HTML5?

1.1.1 Gå til https://html5test.com/ og se hvilken nettleserversjon du har og hvor godt den støtter vedtatt HTML5-standard.

1.1.2 JavaScript kan gjøre nettsider som vises i en nettleser interaktive ved at JavaScript kan endre på HTML- og CSS-kode. Les de fire linjene over bildet på side 10 i Kode 2.

1.1.3 Søk på f. eks "HTML5 geolocation", eller "HTML5 video" og beskriv hvordan ny funksjonalitet i HTML5 kan bli nyttig i systemer.

1.1.4 Gå til http://www.internetlivestats.com/ og finn oppdaterte tall.

1.2.1 For eksempel slik som koden nedenfor:
<!DOCTYPE html>
<html>
    <head lang="no">
        <meta charset="UTF-8">
        <title>Klatring interesserer meg</title>
    </head>
    <body>
        <h1>Klatring er gøy!</h1>
        <p>Klatring er en aktivitet som du kan gjøre på egenhånd i en buldrevegg uten sikring, eller du kan bruke seler og tau og klatre sammen med en makker. Oppmerkede klatreruter er graderte etter vanskelighetsgrad, slik at det skal være greit for klatrere på alle nivåer å finne passende utfordringer. Med klatring øver du opp koordinasjon, balanse og styrke.</p>
    </body>
</html>

1.2.2 Benytt taggen <img> til å sette inn bilde slik det er forklart på s. 15 i boka. Der er det vist med relativ URL: <img src="portrett.jpg">, men man kan også bruke absolutt URL: <img src="http://www.nettstedet.no/bilder/portrett.jpg">. I tillegg til src-attributten kan du bruke attributter for bildestørrelse inni img-taggen slik: <img src="portrett.jpg" width="600" height="400">

1.2.3 For å lage en lenke på nettsiden kan du for eksempel skrive: <a href="http://kode.cdu.no">Les mer på nett.</a>

 1.2.4 Ta utgangspunkt i strukturen du har laget i oppgavene 1.2.1-3, eller koden på side 16 i boka. Bruk taggene <h1>, <h2>, <h3>, <p>, <img> og <a> til å strukturere informasjonen om leksene.

1.3 Lurt å prøve å få med html-elementet nav også i tillegg til de html-elementene som er brukt på. s. 18.

1.4.1 Her skal du bruke usorterte liste-elementer.
<ul>
    <li>Første punkt</li>
    <li>Andre punkt</li>
</ul> 
Her er elementet <ul> en "unordered list" og <li> er et listepunkt.

1.4.2 Bruk koden nedenfor i html-dokumentet ditt. Du må også legge inn dine egne lenker i den andre og tredje tittelen.
<table>
    <thead>
        <tr>
            <th>Filmtittel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="http://www.imdb.com/title/tt2279373/?ref_=fn_al_tt_2">Svampebob firkant filmen: Svampebob på land</a></td>
        </tr>
        <tr>
            <td>Din favorittfilm nr. 2</td> <!--Legg inn hyperlenke til omtale.-->
        </tr>
        <tr>
            <td>Din favorittfilm nr. 3</td> <!--Legg inn hyperlenke til omtale.-->
        </tr>
    </tbody>
</table>

1.5.1 og 1.5.3 Prøv å endre på koden i style-elementet og se hva som skjer. Se på innsiden av omslaget til boka for å finne mer CSS-kode du kan prøve ut.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Fotobloggen</title>
        <style>
            #hovedoverskrift{
                background-color: lightblue;
                color:darkgrey;
            }
            .seksjon{
                font:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
                color:white;
                background-color:darkblue;
            }
        </style>
    </head>
    <body>
        <article>
            <header>
                <h1 id="hovedoverskrift">På skogstur med speilrefleks</h1>
                <time datetime="2016-02-14 07:30">14. februar 2016</time>
            </header>
            <section class="seksjon">
                <h2>Dagens første blinkskudd</h2>
                <p>Hva er vel bedre enn å starte tidlig om morgenen en kald og klar vårdag og legge i vei ut i skogen med et splitter nytt kamera som skal testes ut. Morgenlyset i skogen bringer fram gode minner.</p>
            </section>
        </article>
    </body>
</html>

1.5.4 Se HTML-kode for tabell på side 21. Legg til for eksempel denne koden i style-elementet:
    <style>
        thead{
            font-size:18px;
        }
        tbody{
            background-color: black;
            color: white;
        }
    </style>