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>

Paragraf

Header 1. Prøv at skrive 4 i stedet!

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
#Jens {
    color: red;
}

<!-- HTML -->
<div id="Jens">
    <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!

<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.

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

Prøv at holde musen her

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.

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

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.

<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.

<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>

• Først skriver man ul
• Så skriver man en række list genstande
• Og så slutter man sin 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
p {
  color:red;
}

<!-- HTML -->
<p> Rød Farve </p>

Rød Farve

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
.red {
  background-color: red;
}
.white-text {
  color: white;
}

<!-- HTML -->
<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
.redbox {
  background-color: red;
  width: 100px;
  height: 50px;
}

<!-- HTML -->
<div class="redbox"> Rød Kasse </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
.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>

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
.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
.centreret {
    text-align: center;
}

<!-- HTML -->
<p class="centreret"> Denne text er centreret</p>

Denne text er centreret

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
.float-til-hoejre {
    float: right;
}

<!-- HTML -->
<div class="float-til-hoejre">
    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

indrykket {
    margin-left: 50px;
}

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

Dette er indrykket!

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
.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>

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>

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

li {
    list-style-type: none;
}

• Første
• Anden

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

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

Pseudo Klasse :hover

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

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

<div class="redbox"> Flyt musen ovenpå mig! </div>

Pseudo klassen :active

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

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

<div class="bluebox"> Tryk på mig! </div>