HTML CSS grunnlag
Studie sett med kort som dekker grunnleggende konsepter i HTML og CSS for universitetsstudenter.
Quiz(40 spørsmål)
1. Hva beskriver <header> i HTML?
Begreper i dette studiesettet(40)
Grunnleggende HTML(16)
Hva er HTML?
HTML står for HyperText Markup Language. Det er språket brukt for å lage strukturen på nettsider.
Beskriv et HTML-element.
Et HTML-element består av en åpningstagg, innhold, og en lukkingstagg. Eksempel: <p>Dette er et avsnitt.</p>
Hva står <h1> for?
<h1> er overskrift nivå 1. Den brukes for å definere den viktigste overskriften på en side.
Fyll inn det tomme feltet: <____> bruker bilder.
<img> bruker bilder. Det er et selvstendig element uten lukkingstagg.
True or False: <div> er et semantisk element.
False. <div> er et generisk beholder-element uten betydning, mens semantiske elementer gir mening, som <article>.
Hvordan lager du en liste i HTML?
<ul> for usorterte lister og <ol> for sorterte lister. Bruk <li> for hvert listepunkt.
Hva er en attributt i HTML?
Attributter gir ekstra informasjon om et HTML-element. Eksempel: <a href='https://example.com'>Klikk her</a>.
Sammenlign <strong> og <b>.
<strong> gir betydning (sterk vekt) mens <b> bare endrer utseendet uten semantisk betydning.
Hva gjør <meta> taggen?
<meta> gir metadata om dokumentet, som beskrivelse, søkeord, og forfatter.
Hvordan lager du en lenke?
<a href='URL'>Tekst</a> brukes for å lage hyperlenker til andre sider.
Hva er forskjellen på <span> og <div>?
<span> er et inline-element, mens <div> er et blokk-element. Brukes for forskjellige layout-behov.
Definer <form> i HTML.
<form> brukes til å lage skjemaer for å samle inn brukerdata. Inneholder kontroller som <input>, <textarea>, osv.
Hva er DOCTYPE?
DOCTYPE-deklarasjonen informerer nettleseren om hvilken versjon av HTML som brukes.
Hvordan setter du inn en video?
<video> taggen brukes for å sette inn videoer. Inkluderer attributter som controls, autoplay, og src.
Hva er forskjellen på <input type='text'> og <textarea>?
<input type='text'> lager en enkelt tekstboks, mens <textarea> gir et større område for tekst.
Hvordan kommenterer du i HTML?
Bruk <!-- kommentar her --> for å lage kommentarer som ikke vises på nettsiden.
Grunnleggende CSS(16)
Hva er en CSS-selektor?
En CSS-selektor er et mønster som spesifiserer hvilke HTML-elementer som skal styles. Vanlige typer inkluderer klasse, ID og elementselektorer.
Forklar forskjellen mellom klasse- og ID-selektorer.
Klasse-selektorer (.) brukes for flere elementer, mens ID-selektorer (#) er unike for hvert element. ID har høyere spesifisitet.
Sann eller usann: CSS kan styre rekkefølgen av elementer.
Usann. CSS kan ikke endre rekkefølgen av elementer i DOM. Det kan bare påvirke utseendet.
Hvordan kan du sette bakgrunnsfarge?
Bruk eiendommen 'background-color'. Eksempel: `body { background-color: #ffcc00; }`.
Fyll inn: For å gjøre tekst fet, bruker vi _____.
'font-weight: bold;'.
Hva gjør 'display: flex;'?
'display: flex;' gjør et element til en flex-container, som lar barnelementene arrangere seg i en fleksibel layout.
Hvordan endrer du tekststørrelse i CSS?
Bruk eiendommen 'font-size'. For eksempel: `h1 { font-size: 2em; }`.
Beskriv hva 'margin' og 'padding' gjør.
Margin er avstanden utenfor et element, mens padding er avstanden inni elementet. Margin påvirker layouten; padding påvirker innholdets plass.
Forskjellen mellom 'absolute' og 'relative' posisjonering?
Relative posisjonering flytter et element i forhold til sin normale posisjon, mens absolutt posisjonering plasserer det i forhold til nærmeste posisjoneringskontainer.
Sann eller usann: 'z-index' påvirker synlighet av elementer.
Sann. 'z-index' bestemmer laginndelingen av elementer, hvor høyere verdi betyr at elementet er foran.
Hva er en media query?
Media queries er teknikker i CSS for å anvende stiler basert på egenskaper som skjermbredde og oppløsning.
Eksempel på hvordan du sentrerer et element horisontalt.
Bruk 'margin: auto;' i kombinasjon med en spesifisert bredde: `div { width: 50%; margin: auto; }`.
Hvordan kan du bruke eksterne CSS-filer?
Bruk `<link rel='stylesheet' href='style.css'>` i `<head>`-delen av HTML-dokumentet.
Fyll inn: For å skjule et element, bruker vi _____.
'display: none;'.
Hvilken CSS-eiendom brukes for å endre skriftfamilien?
Eiendommen 'font-family'. Eksempel: `p { font-family: Arial, sans-serif; }`.
Hvordan kan du lage en grid layout i CSS?
'display: grid;' definerer et grid-system. Eksempel: `container { display: grid; grid-template-columns: 1fr 1fr; }`.
Avansert HTML og CSS(8)
Hva er semantisk HTML?
Semantisk HTML bruker elementer som gir mening og kontekst, som <header>, <article>, og <footer>. Dette forbedrer tilgjengelighet og SEO.
Når bør man bruke <section> i HTML?
<section> brukes for å gruppere innhold i forskjellige seksjoner med relaterte temaer. Det gir bedre struktur.
True or False: Responsiv design krever alltid JavaScript.
False. Responsiv design kan oppnås med CSS media queries alene.
Fyll inn teksten: Media queries er en del av _ _ _ _ _ _ _ _ .
Media queries er en del av CSS for å lage responsiv design. De tilpasser stiler basert på skjermstørrelse.
Sammenlign <div> og <article>.
<div> er et generelt blokkelement uten semantisk betydning. <article> representerer selvstendig innhold, som en nyhetsartikkel.
Hva oppnår man med fleksboks (flexbox)?
Fleksboks gir enkle og dynamiske måter å arrangere elementer i en beholder. Elementene kan tilpasses tilgjengelig plass.
Hva er hovedformålet med 'alt' attributt i bilder?
'alt' attributtet gir en tekstlig beskrivelse av bildet for tilgjengelighet og SEO, hvis bildet ikke lastes.
Årsak → Virkning: Bruk av prosent i CSS.
Bruk av prosent i CSS tillater elementer å skalere proporsjonalt med foreldreelementet, noe som gir responsivitet.
Spørsmål i dette studiesettet(40)
1. Hva beskriver <header> i HTML?
2. Hva står <title> for?
3. Hva er formålet med en CSS-selektor?
4. Hvilket av følgende er en fordel med å bruke semantisk HTML?
5. Hvilket element brukes for å lage en usortert liste?
6. Hva er forskjellen mellom klasse- og ID-selektorer?
7. Når bør man bruke <footer> i HTML?
8. Hvilket av følgende er en korrekt bruk av <img> taggen?
9. Sann eller usann: CSS kan styre rekkefølgen av HTML-elementer.
10. Hva er 'display: flex' i CSS?
11. Hva er hensikten med <header> elementet?
12. Hvordan setter du en bakgrunnsfarge i CSS?
13. Hvilket av følgende elementer er ikke en del av en semantisk struktur i HTML?
14. Hva gjør <footer> elementet?
15. Fyll inn: For å gjøre tekst kursiv, bruker vi _____.
16. Hva er hovedfunksjonen til CSS media queries?
17. Hvilket element er et blokk-element?
18. Hva gjør 'display: flex;' i CSS?
19. Hva er en fordel med å bruke prosentvis bredde i CSS?
20. Hvordan inkluderer du eksterne CSS-filer i HTML?
21. Hvordan endrer du skriftstørrelse i CSS?
22. Hvilket element brukes for å representere selvstendig innhold?
23. Hvilket element er ikke et semantisk element?
24. Hva beskriver 'margin' i CSS?
25. Hva brukes <table> taggen til?
26. Forskjellen mellom 'absolute' og 'relative' posisjonering er?
27. Hvordan lager du en formularknapp?
28. Sann eller usann: 'z-index' kan påvirke hvilken rekkefølge elementer vises i.
29. Hva gjør <link rel='stylesheet'>?
30. Hva er en media query?
31. Hvordan definerer du en seksjon i HTML?
32. Hvordan kan du sentrere et element horisontalt?
33. Hvilket element kan inneholde flere <li> elementer?
34. Hvordan kan du inkludere eksterne CSS-filer?
35. Hva er riktig måte å bruke <strong> taggen?
36. Fyll inn: For å skjule et element, bruker vi _____.
37. Hva gjør <meta charset='UTF-8'> taggen?
38. Hvilken eiendom brukes for å endre skriftfamilien?
39. Hvilket av følgende elementer er en selvstendig tag?
40. Hvordan lager du en grid layout i CSS?
Relaterte studiesett
Wiederholung: Browser lädt eine Seite
Wiederholung: HTML CSS JavaScript Rollen
JavaScript DOM and events notes
REST APIs and HTTP methods exam review
How a browser loads a page
HTML vs CSS vs JavaScript step by step
What a URL is
Test: Was eine URL ist
Lag ditt eget studiesett
Last opp en PDF, lim inn notatene dine, eller beskriv et tema – AI genererer flashkort, quizer og mer på sekunder.
