OPGAVER TIL HTML & CSS – BEGYNDER – INTRO OG CSS
Opgave 1 - INTRO
<!DOCTYPE html> <!– indikerer dokumentet er et html dokument –>
<html>
<head>
<!– CSS starter her- denne tekst er skjult i layoutet med dette tag omkring –>
<style>
/*denne tekst er skjult i CSS’en med dette tag omkring*/
/*herinde skrives klasserne i stedet for at lave et Stylesheet og linke til det*/
</style>
</head>
<body>
<h1>Det her er en overskrift/heading</h1>
<p>Dette er et afsnit/paragraph</p>
</body>
</html> <!– her slutter koden –>
h står for heading og tallet 1-6 indikerer størrelsen af overskriften.
Hvor h1 er størst og h6 er mindst
Læg mærke til at der er indryk ved tagget body det er for at holde orden i koden man laver indryk ved elementer.
Her under vises/eksekveres koden
Det her er en overskrift/heading
Dette er et afsnit/paragraph
Opgave 1:
Kopier koden ind i CODEPEN og juster på skrift størrelsen h1, h2, h3, h4, h5, h6 eller skift til p for at skrive et afsnit som dette
Opgave 2a - Lær CSS
<!DOCTYPE html> <!– indikerer dokumentet er et html dokument –>
<html>
<head>
<!– CSS starter her- denne tekst er skjult i layoutet med dette tag omkring –>
<style>
/*denne tekst er skjult i CSS’en med dette tag omkring*/
/*herinde skrives klasserne i stedet for at lave et Stylesheet og linke til det*/
/*herunder skrives CSS’erne der definerer h1 og tagget og laver en klasse til p*/
h1{
color: blue;
}
.afsnit{
color: green;
text-size: 12px;
}
/*man kan vælge at skrive #FFFFFF eller #111111 eller white for at angive farver*/
</style>
</head>
<body>
<h1>Det her er en overskrift/heading</h1>
<p class=”afsnit”>Dette er et afsnit/paragraph</p>
</body>
</html> <!– her slutter koden –>
Læg mærke til at der er punktum før klassens navn.
Hvor der ved h1 ikke er. Sådan kan man gøre det samme ved body, th, td, ol, ul og mange flere. For derved styre hele siden uden at tildele klasser i tags hvert tag.
Læg mærke til at der er indryk i CSS delen det er for at holde orden i koden man laver indryk ved elementer, så man bedre kan fejl-finde igen.
Her under vises/eksekveres koden
Det her er en overskrift/heading
Dette er et afsnit/paragraph
Opgave 2:
Kopier koden ind i CODEPEN Juster på farverne og prøv med nogle koder i stedet for navne(purple, blue, yellow...)
Prøv at tilføje noget skjult tekst i taggene:
< !-- tekst -- > og / * tekst * /
Man plejer at skriver forklaringer til koden inden i dem
Opgave 2b - INTRO - indsæt et billede
Nu skal du lære at sætte et billede ind 🙂
<!DOCTYPE html> <!– indikerer dokumentet er et html dokument –>
<html>
<head>
<style>
h1{
color: blue;
}
.afsnit{
color: green;
text-size: 12px;
}
/*man kan vælge at skrive #FFFFFF eller #111111 eller white for at angive farver*/
</style>
</head>
<body>
<h1>Det her er en overskrift/heading</h1>
<p class=”afsnit”>Dette er et afsnit/paragraph</p>
<img src=”Billedets webadresse med https:// foran”>
</body>
</html>
img
Er forkortelsen på image som betyder billede på dansk.
src
Er for source, altså stedet det oprindeligt stammer fra, dens webadresse, derfor skal du have https:// forrest.
Du kan finde et billede som allerede er lagt ud på nettet via en google søgning. Højre klik på billedet og kopier billedet webadresse. Sæt den adresse ind mellem ” ” situationstegnene.
