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!
Som har noget tekst der fortæller om jeres kort, billede eller andet
Som har noget tekst der fortæller om jeres kort, billede eller andet
Som har noget tekst der fortæller om jeres kort, billede eller andet
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
<h1> Header 1. Prøv at skrive 4 i stedet!</h1>
<b> Fed skrift </b>
<i> Kursiv skrift </i>
<u> Understreget skrift </u>
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>
Min forælder er Jens
Min forælder er også Jens
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.
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 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
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
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/">
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>
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)
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>
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
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)
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>
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
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>
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!
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>
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;
}
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;
}
: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>
: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>