HTML & CSS

 OPGAVE TIL HTML & CSS – MIDDEL – FORMER

Opgave 2

Opgave 2 – Del 1

Først skal vi lave opsætningen og indsætte en < table > < /table >
  • Først skal du gå ind på codepen.io lav en ny PEN og gem den 
  • Skriv koden ind fra opgave 1 i intro ind uden < h1 > eller < p >  taggene
  • Lav nu en din tabel under tagget < body >
    Således her:
    < body >
    < table >  

    < /table >

  • Tildel din tabel class=” table” således her
    < table class=” table” > 

    < /table>

Opgave 2 – Del 2

Nu skal vi tilføje rækkerne inde i tabellen. Således her:

< table class=” table” > 
    < tr >
        < td> < /td>
        < td> < /td>
    < /tr>
< /table>

Kopier nu fra < tr> til < /tr> og sæt det ind under < /tr> 9 gange
således her:

< table class=” table” > 
    < tr >
        < td> < /td>
        < td> < /td>
     < /tr>
    < tr >
        < td> < /td>
        < td> < /td>
     < /tr>
    Fortsæt med 8 her efter…
< /table>

Opgave 2 – Del 3

Nu skal vi kode CSS’en for .table.
.table {

   width: 40em;
    background-color: black;
      padding-bottom: 15px;
} 

Der er flere måder at definere størrelser på i CSS.
Ofte brugte er px(pixel) eller em(fx 2em er 2 gange
størrelsen på den nuværende font)

Opgave 2 – Del 4

Nu skal vi kode CSS’en for .firkant
.firkant {

   float:left;
    height: 50px;
      width: 50px;
      background-color: #660066;
} 

Vi sætter den til at flyde(float) mod venstre(left) 
og farven, ja den bestemmer du selvfølgelig selv

Opgave 2 – Del 5

Nu skal vi kode CSS’en for en .cirkel.
.cirkel {

   float: center;
    height: 50px;
      width: 50px;
      background-color: #00ffff;
      border-radius: 50%;
} 

Vi sætter denne gang cirklen til at flyde(float) i 
midten(center).
Border-radius(rammen) justerer vi med % for at tage 
noget af hjørnerne.

Opgave 2 – Del 6

Nu skal vi kode de to figurer ind i tabellen 🙂
Den skal se således her ud:

< table class=” table” > 
    < tr >
        < td> < h3 >FIRKANT < /h3 > < /td>
        < td> < h3 > CIRKEL < /h3 > < /td>
    < /tr>
    < tr >
        < td > < div class = “firkant” > < /div > < /td>
        < td > < div class = “cirkel” > < /div > < /td>
     < /tr>
< /table>


HUSK at skrive div’er ind med classerne og h3 omkring navnene på formerne

Du kan vælge at lave en CSS(style) for h3{} sådan at
du kan give teksten color: white;

Opgave 2 – Del 7

Nu skal vi kode CSS’en for en .trapetz og en .oval
De skal se således her ud:

.trapetz{
   float: center;
       border-bottom: 50px solid #cc0099;
       border-left: 25px solid transparent;
       border-right: 25px solid transparent;
       height: 0;
       width: 125px;
}

.oval{
   float: left;
    height: 50px;
      width: 100px;
      background-color: #3333ff;
      border-radius: 50%;
}

Opgave 2 – Del 8

Nu skal vi kode CSS’en for .rektangel og .parallelogram
De skal se således her ud:

.rektangel {
    height: 50px;
       width: 100px;
       background-color: #ff0066;
}

.parallelogram {
       width: 100px;
       height: 50px;
       transform: skew(20deg);
       background: #009933;
}

Vi bygger altså figurerne med højde og vidde, som 
udfyldes af en farve. Læg mærke til at der benyttes
en transform: skew på 20 deg(grader) for at skubbe
til figurens form

Opgave 2 – Del 9

Nu skal vi kode CSS’en for trekanterne der peger op og ned
De skal se således her ud:

.trekant-op {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #ff0000;
}

.trekant-ned {
       width: 0;
       height: 0;
       border-left: 25px solid transparent;
       border-right: 25px solid transparent;
       border-top: 50px solid #00ff00;
}

Læg mærke til hvordan man benytter border'ne til at 
tegne figuren med.

Opgave 2 – Del 10

Nu skal vi kode CSS’en for trekanterne til højre og venstre. Da vi ikke kan bruge øæå i koden kalder vi dem left og right.
De skal se således her ud:

.trekant-right {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #ff6600;
      border-bottom: 25px solid transparent;
}

.trekant-left {
       width: 0;
       height: 0;
       border-top: 25px solid transparent;
        border-right: 50px solid #ffff00;
        border-bottom: 25px solid transparent;

}

Du kan vælge dine farver herinde:
https://color.adobe.com/da/create/color-wheel

Opgave 2 – Del 11

1. Sæt nu alle class’erne ind i div’er i mellem hver anden < tr>
< td > < div class= “oval” > < /div > </td >

2. Skriv navnet på formen oven over formen i de restende < tr >

3. Prøv tegne en snemand på et nyt dokument
   
     

Her under vises/eksekveres koden

   
 

FIRKANT

CIRKEL

TRAPETZ

OVAL

REKTANGEL

PARALLELOGRAM

TREKANT OP

TREKANT NED

TREKANT HØJRE

TREKANT VENSTRE