Hvaderkode

#Byg en Hjemmeside

###Web Workshop #4

Nu skal vi til at bygge en hjemmeside!

Vi har lavet et layout i helst skal følge, men indhold, farver og andre egenskaber må i selv bestemme.
Der er hjælp til HTML og CSS på de næste sider!

---

<div style="width:100%;border:1px solid black;">
    <h1> Header </h1>
    <div style="width:100%;border:1px solid black">
        <ul style="list-style-type:none;width:100%;">
            <li style="list-style-type:none;width:19%;display:inline-block;border:1px solid black"> Link 1 </li>
            <li style="list-style-type:none;width:19%;display:inline-block;border:1px solid black"> Link 2 </li>
            <li style="list-style-type:none;width:19%;display:inline-block;border:1px solid black"> Link 3 </li>
            <li style="list-style-type:none;width:19%;display:inline-block;border:1px solid black"> Link 4 </li>
            <li style="list-style-type:none;width:19%;display:inline-block;border:1px solid black"> Link ? </li>
        </ul>
    </div>
    <div style="padding:15px 15px 15px 15px;width:100%;border:1px solid black;">
        <img src="http://lorempixel.com/g/150/150/">
        <div style="display:inline-block;margin-left:20px;">
            <h3> Mindst 3 Kort </h3>
            <p> Som har noget tekst der fortæller om jeres kort, billede eller andet </p>
        </div>
    </div>
    <div style="padding:15px 15px 15px 15px;width:100%;border:1px solid black;">
        <img src="http://lorempixel.com/g/150/150/">
        <div style="display:inline-block;margin-left:20px;">
            <h3> Mindst 3 Kort </h3>
            <p> Som har noget tekst der fortæller om jeres kort, billede eller andet </p>
        </div>
    </div>
    <div style="padding:15px 15px 15px 15px;width:100%;border:1px solid black;">
        <img src="http://lorempixel.com/g/150/150/">
        <div style="display:inline-block;margin-left:20px;">
            <h3> Mindst 3 Kort </h3>
            <p> Som har noget tekst der fortæller om jeres kort, billede eller andet </p>
        </div>
    </div>
</div>

---

##HTML: Elementer

I HTML skriver man elementer ved at skrive f.eks. `<p> </p>` (paragraph elementet). Indholdet i elementet er så det der er imellem det startende tag `<p>` og det lukkende tag `</p>`.
Der findes blandt andet:
`<p> Paragraf </p>`
<p> Paragraf </p>
`<h1> Header 1. Prøv at skrive 4 i stedet!</h1>`
<h1> Header 1. Prøv at skrive 4 i stedet! </h1>
`<b> Fed skrift </b>`
<b> Fed skrift </b>
`<i> Kursiv skrift </i>`
<i> Kursiv skrift </i>
`<u> Understreget skrift </u>`
<u> Understreget skrift </u>

---

##HTML: Hierarki

Et HTML dokument er ligesom et familietræ. Et html element kan have _en eller flere_ børn eller _en_ forælder. Fra sin forælder arver man egenskaber som f.eks. CSS farver osv! Derfor er det altså ikke nok bare at læse et dokument fra toppen til bunden, men man skal også lægge mærke til om et element ligger inden i et andet element.

```css
//CSS
#Jens {
    color: red;
}
```

```html

<div id="Jens">
    <p> Min forælder er Jens</p>
    <p> Min forælder er også Jens</p>
</div>
```

<div id="Jens" style="color:red;">
    <p> Min forælder er Jens</p>
    <p> Min forælder er også Jens</p>
</div>

I et eksemplet ovenfor kan du se et `<div>` element som har 2 `<p>` elementer som børn. Som du kan se har begge arvet farven rød fra "Jens".
Det er meget almindeligt at bruge indrykning så HTML nemmere kan læses. Altså indrykker man børn en enkelt gang mere en deres forælder.

---

##HTML: div tag

Den mest almindelig anvendte html tag er `<div> </div>`
Egentlig er det bare en tom kasse og bruges som en beholder til at gruppere elementer, der er ikke noget magi ved den udover de attributter og styles du giver den!

```html
<div>
     Jeg er bare en kasse
    <div>
        Det er jeg også men jeg hører under ham der står ovenover
    </div>
</div>
```

---

##HTML: Attributter

HTML elementer kan have attributter.
Disse attributter giver ekstra information om hvordan vores element skal opføre sig.
For eksempel er `title` en attribut der giver vores element en tekst når vi har musen over den.

```html
<p title="Du kan se mig når du holder musen her"> Prøv at holde musen her </p>
```

<p title="Du kan se mig når du holder musen her"> Prøv at holde musen her </p>

---

##HTML: a - Anchor

Et tag der tit bruges til links i HTML er `<a> </a>` også kaldet Anchor.
Med attributten `href` kan det dirigere til at ny side eller andet sted på samme side.

```html
<a href="www.carlsbergpirates.dk"> Dette er et link til Carlsberg Pirates </a>
```

<div class="no-print">
    <a href="http://www.carlsbergpirates.dk"> Dette er et link til Carlsberg Pirates </a>
</div>

Prøv at lave dit eget link til f.eks. www.dr.dk

---

##HTML: img - Billede

Med `<img> </img>` kan man nemt sætte et billede ind i din web site.
Det kræver også at du giver attributen `src`, altså "source", en værdi som er en addresse på billedet. 
Da det ikke giver mening at have indhold i dit element, behøver du ikke afslutte det.

```html
<img src="http://lorempixel.com/g/400/200/">
```

---

##HTML: ul og li - Lister

Hvis du skal have en række elementerne der fremgår som en liste så kan du bruge `<ul> </ul>` som kaldes for en unummereret liste (Unordered List) sammen med `<li> </li>` som er en liste genstand (List Item)
F.eks. hvis du vil skrive en opskrift med en række trin, eller hvis du har en række knapper i navigation.

```html
<ul>
    <li> Først skriver man ul </li>
    <li> Så skriver man en række list genstande </li>
    <li> Og så slutter man sin ul </li>
</ul>
```

<ul>
    <li> Først skriver man ul </li>
    <li> Så skriver man en række list genstande </li>
    <li> Og så slutter man sin ul </li>
</ul>

---

##Element Selektoren

Når du skal skrive noget CSS som gælder en enkelt type element så skal du lave en element selektor. Man skriver en element selektor ved at skrive et elementnavnet og derefter blokken med deklarationer.

```css
//CSS
p {
  color:red;
}
```

```html 

<p> Rød Farve </p>
```
<p style="color:red;"> Rød Farve </p>
Prøv andre værdier som:

```
blue
yellow
#7833FF
RGB(255, 160, 122)
```

---

##Klasse Selektoren

Når du skal skrive noget CSS som gælder for elementer der har en bestemt klasse så skal du bruge en klasse selektor. Man skriver en klasse selektor ved at skrive et punktum foran sin klasse og derefter blokken med deklarationer. Et HTML element kan have flere klasser, så der kan være flere klasser der gælder for et html element!

```css
//CSS
.red {
  background-color: red;
}
.white-text {
  color: white;
}
```

```html 

<div class="red white-text"> Rød Farve </div>
```
<div class="red white-text"> Rød Farve </div>

---

##CSS: width og height

Hvis du vil have at dit element har en fast bredde eller højde, så kan du bruge `width` og `height` og give dem en værdi i `px` eller andet.

```css
//CSS
.redbox {
  background-color: red;
  width: 100px;
  height: 50px;
}
```

```html 

<div class="redbox"> Rød Kasse </div>
```
<div class="no-print">
    Resultat:
    <div style="background-color:red;width:100px;height:50px;"> Rød Farve </div>
</div>
Prøv andre værdier som:

```
75px
10%
5rem
4em
8vh
```

---

##CSS: border

Hvis du vil have en kant rundt om dit element kan du bruge `border`
Den tager op til 3 argumenter, den første er hvor tyk den skal være, den anden hvordan kantlinjen skal se ud,  og den tredje er hvilken farve den skal have.

```css
//CSS
.min-ene-kant {
  border: 3px solid red;
}

.min-anden-kant {
  border: 6px dashed blue;
}
```

```html 

<div class="min-ene-kant"> Kasse med solid rød streg </div>
<div class="min-anden-kant"> Kasse med stiplet blå streg </div>
```

<div style="border: 3px solid red;"> Kasse med solid rød streg </div>
<div style="border: 6px dashed blue;"> Kasse med stiplet blå streg </div>

Prøv andre værdier som:

```
2rem dotted #CD5C5C
10% ridge RGB(255, 160, 122)
```

---

##CSS: border-radius

Med `border-radius` kan du give et element runde hjørner ved at sætte en værdi på fx. `10px`
f.eks.

```css
//CSS
.rund {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 10px
}
```

```html

<div class="rund"> Hej </div>
```

---

##CSS: text-align

Hvis du vil have teksten i et element centreret, eller sat i højre eller venstre side, så kan du bruge `text-align` og give den værdier `left`, `right` eller `center`

```css
//CSS
.centreret {
    text-align: center;
}
```

```html

<p class="centreret"> Denne text er centreret</p>
```

<p style="text-align:center;"> Denne text er centreret</p>

---

##CSS: float

Hvis du vil have et element sat i højre eller venstre side, så kan du bruge `float` og give den værdier `left` eller `right`

```css
//CSS
.float-til-hoejre {
    float: right;
}
```

```html

<div class="float-til-hoejre">
    Jeg er i højre side
</div>
```

<div style="float:right;">
    Jeg er i højre side
</div>

---

##CSS: margin

Med `margin` kan du indrykke et element i forhold til dens forældrer
Du kan vælge at bruge `margin-top`, `margin-right`, `margin-bottom`, `margin-left` og indrykke i en enkelt side
Du kan også give dem alle en værdi på samme tid ved at skrive f.eks. `margin: 5px 8px 5px 10px`
Eller du kan indrykke i alle sider med `marign: 5px`

```css
indrykket {
    margin-left: 50px;
}
```

````html
<p class="indrykket"> Dette er indrykket med 50 pixels! </p>
```

<p style="margin-left:50px;"> Dette er indrykket! </p>

---

##CSS: padding

Hvis du vil indrykke elementer der er barn af elementet kan du gøre det med `padding`
Du kan vælge at bruge `padding-top`, `padding-right`, `padding-bottom` eller `padding-left` og indrykke i enkelte sider.
Du kan også give dem alle en værdi på samme tid ved at skrive f.eks. `padding: 5px 10px 5px 5px`
Du kan også vælge bare at bruge `padding: 5px` og indrykke i alle sider.

```css
//CSS
.red { background-color: red; }

.box {
  width: 300px;
  height: 100px;
}

.indrykket {
  padding: 30px 30px 30px 30px;
}
```

```html 

<div class="red box"> Jeg er en rød kasse uden indrykning </div>
<div class="red box indrykket"> Jeg er en rød kasse med indrykning på alle mine sider </div>
```
<div class="no-print">
    <div style="background-color:red;width:300px;height:100px;"> Jeg er en rød kasse uden indrykning </div>
    <br>
    <div style="background-color:red;width:300px;height:100px;padding: 30px 30px 30px 30px;"> Jeg er en rød kasse med indrykning på alle mine sider fra min forælder </div>
</div>

---

##CSS: list-style-type

Hvis man vil fjerne eller ændre prikket eller tallet fra en liste som `<ul> </ul>` eller `<ol> </ol>` så kan man gøre det med `list-style-type` på `<li> </li>`

```html
<ul>
    <li> Første </li>
    <li> Anden </li>
</ul>
```

```css
li {
    list-style-type: none;
}
```

<ul>
    <li style="list-style-type:none!important;"> Første </li>
    <li style="list-style-type:none!important;"> Anden </li>
</ul>

---

##Pseudo Klasser

Pseudo klasser er lidt ligesom en selektor.
Den kan dekorere med css når man har musen over et element, eller hvis du har klikket på den.
Den har denne syntaks

```css
selektor:pseudo-klasse {
    egenskab:værdi;
}
```

---

##Pseudo Klasse :hover

`:hover` giver en anden farve når musen er over elementet

```css
//CSS
.redbox {
  background-color: red;
  width: 100px;
  height: 50px;
}
.redbox:hover {
  background-color: blue;
}
```

```html
<div class="redbox"> Flyt musen ovenpå mig! </div>
```
<div class="no-print">
    <div class="redbox"> Flyt musen ovenpå mig! </div>
</div>

---

##Pseudo klassen :active

`:active` giver en anden farver når du trykker på elementet

```css
//CSS
.bluebox {
  background-color: blue;
  width: 60px;
  height: 80px;
}
.bluebox:active {
  background-color: green;
}
```

```html
<div class="bluebox"> Tryk på mig! </div>
```
<div class="no-print">
    <div class="bluebox"> Tryk på mig! </div>
</div>