Lektion 14. Div tagget 1

Forberedelse

  • Læs kapitel 8 til og med afsnit 8.4

Formål

  • “Åbne <div> tagget op”
  • Arbejde med dets egenskaber
  • Lave en wrapper

Fælles gennemgang

Fra sidst

  • Opsamling på lektion 13, hvad har du lært
  • Fandt I noget “guld” undervejs
  • Var der nogle ting, som I vil gøre anderledes næste gang
  • Hvad er “separation of concerns”, og hvad betyder det for os i praksis

Lektien til denne gang

  • Vi skal <div>’e på livet løs
  • <div> bruges meget på hjemmesider, ofte i ret indviklede strukturer med <div> inden i <div>. Det bruges også som semantiske tags
  • <div> er bare en kasse, som vi kan proppe indhold i
  • Gennemgå koden til wrapperen (opgave 14.4) og ikke mindst konstruktionen med <div> inde i <div> + semantiske tags

Øvelser

I må gerne arbejde 2 og 2 i øvelserne her.

14.1 Hvad er <div>

  • Hvad er forskellen på et blok-tag og et inline-tag
  • Find simple eksempler på brug af <div> tagget og ikke mindst stylingen af tagget. Gå gerne på nettet, du behøves ikke at begrænse dig til W3schools
  • Svar så på spørgsmålet: Hvad er <div> for et tag, og hvad kan vi bruge det til
  • Hvad hedder inline-udgaven af <div>

14.2 Egenskaben display

  • Hvad kan man gøre med egenskaben display
  • Kopier koden herunder ind i Visual Studio Code og gem det
    • Forklar, hvordan den virker
    • Du skal ændre egenskaben for <li> først til “block” og så til “none”. Tag skærmdumps og forklar, hvad der sker
<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

14.4  Max-width

  • Kopier koden ind et html-dokument i Visual Studio Code
  • Forklar hvad den gør. Tip: Du skal gøre browservinduet smallere og bredere, så sker der noget
  • Hvad kan vi bruge max-width til
  • Hvad sker der, hvis du ændrer max-width til 1000px f.eks. under div.ex1
  • Hvad sker der, hvis du ændrer max-width til 50% også under div.ex1
  • Sæt max-width til 500px og lav samtidig en egenskab width: 1200px måske på div.ex2 Hvem af de 2 bestemmer
<html>
<head>
<style>
div.ex1 {
  width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="ex1">This div element has width: 500px;</div>
<br>

<div class="ex2">This div element has max-width: 500px;</div>

<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between 
the two divs!</p>

</body>
</html>

14.5 Lav en wrapper

  • Sæt koden her ind i et nyt dokument og få den til at virke.
  • Forklar, hvad koden gør. Hvad er det, der gør, at sidens indhold hele tiden er centreret
    • Lille tip: Du kender ikke <header>, <nav>, <section> og <footer> endnu. Du skal bare se dem som <div> tags, de opfører sig fuldstændigt lige sådan
  • Ændr det tag, som er selve wrapperen, så width: 50% i stedet for som nu 1000px. Hvad sker der
<!DOCTYPE html>
<html>
<head>
<title>Flydende side</title>
<style>
  body{
    background-color: darkblue;
  }
  .floatingPage{
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    padding: 20px;
    background-color: lightblue;
  }
  header, footer, nav {
      text-align: center;
  }
  header{
    background-color: lightgreen;
  }
</style>
</head>
<body>
  <div class="floatingPage">
   <header>
    <h1>Flydende side</h1>
   </header>
   <nav class="center">
     <p>Forskellige links til siderne</p>
   </nav>
    <section>
      <h2>Overskrift</h2>
      <p>Indholdet på denne side er altid midt på siden</p>
    </section>
    <footer>
      <p>Her kunne man passende lave kontaktoplysninger</p>
    </footer>
</div>
</body>
</html>

14.6 Brug din wrapper

Tag forsiden fra din opgave i opgavesæt 13 og lav en kopi. Prøv at lave forsiden som en wrapper i stedet for. Dvs. brug de samme farver og skrifttyper som i opgaven, bare læg indholdet ind i en wrapper i stedet for.

Du skal kunne vise din HTML side til klassen.

14.7 Ekstra opgave. Semantiske tags

Prøv at finde ud af, hvorfor jeg ikke har brugt <div> i stedet for <header>, <nav>, <section> og <footer>. Tip: Det handler om semantiske tags, men prøv selv på at søge svaret.