Level 3HTML: Del inn nettsiden

Skrevet av: Lars Klingenberg

Kurs: Web
Tema: Tekstbasert, Nettside
Fag: Programmering, Teknologi
Klassetrinn: 8.-10. klasse, Videregående skole

Introduksjon

Målet med denne oppgaven er å lære hvordan man kan organisere en nettside ved å dele den inn med forskjellige tagger. Dersom du ikke er kjent med tagg-strukturen i HTML som vi har sett på de tidligere oppgaven, så anbefaler jeg at du går tilbake og se disse. Vi skal også se på hvordan vi kan sette farge på de forskjellige taggene ved hjelp av CSS, men vi kommer ikke til å gå i dybden i denne oppgaven. For mer CSS, se spillelisten som heter CSS.

I denne oppgaven vil du gjøre oppgaver der du må programmere uten oppskrift, dersom du står fast kan du trykke på "Se koden så langt" og se én måte å løse oppgaven på. Det er ingen fasit på oppgavene du gjør her, men vi kommer med et forslag til hvordan de kan løses.

Når vi er ferdig med oppgaven kommer siden din til å se noe sånt ut, kanskje med litt mer tekst eller andre farger:

Illustrasjon av hvordan den ferdige nettsiden ser ut

Lykke til!

Steg 1: <div></div>

<div>-taggen er en veldig mye brukt tag. div står for division eller seksjon. Vi bruker denne taggen for å organisere forskjellige deler av siden og brukes ofte sammen med CSS (utseende), som vi skal se på i en senere del av oppgaven. La oss se på et eksempel:

Under ser du utviklingsverktøyet til Chrome til høyre og kidsakoder.no til venstre. I utviklervindu ser vi flere <div>-tagger inne i hverandre. Disse skal vi lære mer om.

Bilde av kodeklubbens nettsider med utviklingsverktøyet til Chrome til høyre

Som du ser er <div>-taggen brukt til å organisere elementer eller ting på nettsiden. Legg også merke til at alle <div>-taggene har en ID. Dette er for at det skal være enklere å holde styr på hva som ligger i disse seksjonene og for at det skal være enklere å sette design (CSS) på dem.

La oss prøve ut <div>-taggen selv!

Steg 2: Vi deler inn hjemmesiden vår i 3 deler

Som vi kanskje husker fra oppgaven med Den forsvunnede katten, så ser oppbyggningen av en tom nettside slik ut:

<!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
 </html>

Husker du også at vi kan legge til metadata i <head> for å blant annet få tittel på nettsiden vår?

Når vi skal lage en <div> på siden vår må vi legge denne inne i <body>-taggen vår.

Fant du det? Det er en sånn vi prøver å lage, bare at vi skal forenkle det litt.

Se koden så langt
<!doctype html>
<html>
 <head>
   <title> 3-delt side </title>
 </head>
 <body>
   <div>
      <h1> Den øverste div-en </h1>
   </div>
  </body>
</html>
Hint
     <ul>
       <li> Hjem </li>
       <li> Mine hobbyer </li>
       <li> Om meg </li>
     </ul>

Se koden så langt
<!doctype html>
<html>
 <head>
   <title> 3-delt side </title>
 </head>
 <body>
   <div>
      <h1> Den øverste div-en </h1>
   </div>
   <div>
     <ul>
       <li> Hjem </li>
       <li> Mine hobbyer </li>
       <li> Om meg </li>
     </ul>
   </div>
   <div>
     <h3> Min side </h3>
     <p> Denne siden inneholder informasjon om meg, hvem jeg er og mine hobbyer. </p>
   </div>
  </body>
</html>

Nå har du delt inn siden i 3 deler: Header, navigasjon og hovedområdet eller innhold.

Steg 3: Vi prøver litt CSS

La oss nå sette farge på de 3 <div>-ene vi har laget. For å gjøre det bruker vi attributtet style=””. I style kan vi legge til variabler som for eksempel background-color: favoritt fargen din.

<div style="background-color: red"></div>
Se et eksempel Bilde av 3 div tager med ulike farger

Nå skal vi sette en ID<div>-ene våre før vi skal se litt mer på CSS. Kan du tenke deg noen gode IDer vi kan sette på <div>-ene våre?

Steg 4: Vi legger til en ID

ID er en fin ting å bruke hvis vi vil ha forskjellig stil på forskjellige seksjoner på siden vår. Vi har laget 3 <div>-tagger hvor en holder styr på headeren, en på navigasjonsbaren og en på innholdet.

ID lages ved å legge til attributte id=”” som attributt i <div>-taggen.

<div id="navn_på_id-en"> </div>
Se et forslag til løsning
<!doctype html>
<html>
 <head>
   <title> 3-delt side </title>
 </head>
 <body>
   <div id="header" style="background-color: red">
      <h1> Den øverste div-en </h1>
   </div>
   <div id="nav" style="background-color: green">
     <ul>
       <li> Hjem </li>
       <li> Mine hobbyer </li>
       <li> Om meg </li>
     </ul>
   </div>
   <div id="innhold" style="background-color: blue">
     <h3> Min side </h3>
     <p> Denne siden inneholder informasjon om meg, hvem jeg er og mine hobbyer. </p>
   </div>
  </body>
</html>

Nå som vi har laget IDer på <div>-ene våre skal vi prøve ut en ny måte å lage CSS på.

Steg 5: Litt mer CSS

Vi endrer hvordan en side ser ut gjennom å bruke språket CSS (som står for Cascading Style Sheets). Dette er et veldig enkelt språk, og du vil lære mer av dette i senere oppgaver. CSS er bygget opp på denne måten:

selector {
  property: value;
}

Selektorer er som regel HTML-tagger som h1, p, img, a. Men de kan også være IDer og klasser, som vi vil lære om senere.

Property kan være for eksempel background-color som vi har brukt. Flere properties finner du på w3schools.com/css

Value er det som kommer etter en property og er verdien du sender til property. Denne kan være red, for eksempel.

Under ser du hvordan du kan legge til CSS i <head>-taggen med 3 IDer:

<head>
  <style>
    #header{

    }

    #nav{

    }  

    #innhold{

    }
    </style>
</head>
Se et eksempel Bilde av CSS i style headeren

Det finnes flere måter å skive farger i CSS på. Vi har nå brukt kjente ord som red, blueog green. Men vi kan faktisk lage 16 millioner forskjellige farger ved å bruke en annen metode. For å lage dise fargene skal vi bruke tall fra 0-9 og bokstaver fra A-Z. Vi setter disse sammen i en kombinasjon av 6 tall og/eller bokstaver. Siden det tar veldig lang tid å prøve ut alle kombinasjonene, så bruker vi litt hjelp for å finne de fargene vi vil ha:

Se koden så langt
#nav{
  background-color: #338F33;
}

Vi skal se enda mer på CSS etter vi har lært litt mer HTML.

Utfordring {.challenge

Steg 6: HTML5-tagger

Nå har vi sett på hvordan vi kan bruke <div>-taggen til å organisere nettsiden vår, og vi har sett på hvordan vi kan sette stiler på disse ved hjelp av CSS. Det kommer stadig nye versjoner av HTML og nå er vi på versjon HTML5. Ved denne versjonen kom det noen nye tagger vi skal se på. Her er en liste over noen:

<nav> - holder på navigasjonslenkene til siden

<header> - her ligger overskriften til siden eller til en artikkel på siden (for eksempel h1)

<main> - hovedelementene til siden legges her

<section> - brukes for å lage en egen seksjon på siden

<footer> - denne ligger alltid nederst på siden, der har man gjerne kontaktinformasjon eller hvem som har skrevet nettsiden. Skroll ned på denne siden og se hva det står nederst.

<article> - dersom man har en artikkel på nettsiden, kan man skrive den inne i denne taggen

Du kan lese om flere her: https://www.w3schools.com/html/html5_new_elements.asp

Disse taggene gjør det enklere for nettleseren å lese hva innholdet på siden er. Nå skal vi bytte ut <div>-taggene på siden vår med noen av taggene over.

Nå vil <body>-en se noe sånt ut:

    <body>
     <header>
        <h1> Den øverste div-en </h1>
     </header>
     <nav>
       <ul>
         <li> Hjem </li>
         <li> Mine hobbyer </li>
         <li> Om meg </li>
       </ul>
     </nav>
     <section>
       <h3> Min side </h3>
       <p> Denne siden inneholder informasjon om meg, hvem jeg er og mine hobbyer.</p>
     </section>
    </body>

#nav i CSS betyr at vi endrer stilen på en tag med ID nav. Hvis vi ikke har noe foran nav betyr dette: “for alle <nav>-tagger”. Så nå som vi bruker HTML5-taggene må vi også endre på CSSen vår.

CSS-en bør se noe sånt ut: (Merk at jeg har sikkert andre farger enn deg)

      header{
          background-color: #D46A6A;
      }

      nav{
           background-color: #55AA55;
      }

      section{
          background-color: #669999;
      }

Nå vil koden se noe sånt ut:

Bilde av koden og nettsiden side ved side

Nå har du lært hvordan man kan dele inn en nettside ved hjelp av <div>-taggen og HTML5-tagger. La oss nå se hvordan vi kan lenke sammen nettsider.

Lisens: CC BY-SA 4.0

Forbedre denne siden

Funnet en feil? Kunne noe vært bedre?
Hvis ja, vennligst gi oss tilbakemelding ved å lage en sak på Github eller fiks feilen selv om du kan. Vi er takknemlige for enhver tilbakemelding!