Document

Hvad er HTML og CSS?

HTML og CSS er fundamentet for webdesign. Her er en hurtig forklaring:

HTML (HyperText Markup Language) er et opmærkningssprog, der bruges til at strukturere indhold på en webside.

Hvad det gør: Beskriver indhold som tekst, billeder, links og lister.
Hvad det ikke kan gøre: Styrer ikke udseende eller interaktivitet.

CSS (Cascading Style Sheets) er et designsprog, der bruges til at style HTML-indhold.

Hvad det gør: Styrer farver, skrifttyper og layout.
Hvad det ikke kan gøre: Ændrer ikke indhold eller funktionalitet.

Forskellen fra programmeringssprog

HTML og CSS mangler logik som loops eller betingelser, hvilket programmeringssprog som JavaScript har.

HTML og CSS: Bruges til struktur og design.
Programmeringssprog: Bruges til funktionalitet og interaktivitet.

CSS Vælgere, Operatorer, Kombinatorer, Pseudoklasser og Pseudoelementer

En kort beskrivelse af CSS selektorer og relaterede begreber.

CSS Vælgere

Vælgere bruges til at målrette HTML-elementer baseret på forskellige kriterier som tag, klasse, id eller attributter.

p målretter <p>-tags.
.klasse målretter elementer med klassen "klasse".
#id målretter elementer med id'et "id".

Operatorer

Operatorer bruges til at målrette elementer ud fra attributværdier.

[attr="værdi"] elementer med en bestemt attributværdi.
[attr^="værdi"] elementer hvis attributværdi begynder med "værdi".
[attr$="værdi"] elementer hvis attributværdi slutter med "værdi".

Kombinatorer

Kombinatorer definerer relationer mellem elementer i DOM'en.

A B vælger elementer B efter elementeter A.
A > B vælger direkte børn B af elementer A.
A + B vælger det første element B umiddelbart efter A elementer.
A ~ B vælger alle søskendeelementer B efter A elementer.

Pseudoklasser

Pseudoklasser bruges til at målrette elementer baseret på deres tilstand.

:hover elementer, når de bliver "hovered" (mouse-over).
:checked elementer der er markeret (fx en afkrydsningsboks).
:nth-child(n) det n-te barn af et element. (Tæller alle børn)
:nth-of-type(n) det n-te barn af sin type. (Tæller kun børn med samme type)

Pseudoelementer

Pseudoelementer bruges til at style specifikke dele af et element.

::before indsætter indhold før elementet.
::after indsætter indhold efter elementet.
::first-letter målretter det første bogstav i et element.

HUSK: ::before og ::after elementer skal indholde content: ""; for at overhovedet vise sig.

HTML Elementer og Semantics

En kort beskrivelse af de vigtigste HTML-elementer og deres semantiske betydning.

Strukturelle Elementer

<header> ofte indeholder navigation og logo.
<footer> indeholder metadata eller links til sidens politikker.
<main> hovedindholdet af siden, som er centralt for sidens formål.
<section> bruges til at gruppere relateret indhold og give det semantisk betydning.

Tekst og Indhold

Formatering og strukturering af tekstindhold.

<p> (paragraph) en samling af tekst
<h1> - <h6> (headerN) overskrifter med <h1> som den vigtigste.
<ul> og <ol> uordnede (●,■...) og ordnede (1., 2...)
<a> definerer hyperlinks, som giver navigation til andre ressourcer.

Formularer og Input

Data indsamling fra brugeren

<form> en formular, som indholder oftest nedenstående.
<input> forskellige typer inputfelter, som tekst, knapper og checkbox.
<label> knytter en beskrivelse til et inputfelt for lettere tilgængelighed.
<button> en klikbar knap, ofte til at sende formularen.

Semantiske Elementer

Giver HTML-strukturen meningsfuld betydning, hvilket forbedrer SEO. (Search engine optimisation)

<article> definerer selvstændigt indhold, som kan genbruges eller publiceres separat.
<aside> bruges til at angive indhold, som er sekundært i forhold til hovedindholdet.
<nav> definerer en navigationsblok, som indeholder links til andre sektioner af sitet.

Multimedie og Grafisk Indhold

Disse elementer bruges til at indlejre billeder, videoer og grafiske objekter.

<img> bruges til at indlejre billeder på siden.
<video> bruges til at indlejre videoklip, med understøttelse af flere filformater.
<audio> bruges til at indlejre lydfiler, som kan afspilles på siden.
<iframe> bruges til at indlæse et URL til alt muligt. (f.eks. anden website, og YouTube videoer)

Emmet

Et værktøj til hurtig HTML- og CSS-skrivning med udvidelser og genveje.
Emmet udskrives ved at trykke TAB når man har skrevet linjen.

Grundlæggende Funktioner

div.container>ul>li*3 genererer en <div> med en liste på tre elementer.
.class opretter et element med klassen "class".
#id opretter et element med id'et "id".

Udvidelser og Attributter

a[href="link"] opretter et hyperlink med en URL.
input[type="text" placeholder="Indtast her"] opretter en tekstboks med en pladsholder.
img[src="billede.jpg" alt="beskrivelse"] opretter et billede med en alternativ tekst.

CSS-Genveje

Skrivning af CSS med forkortelser.

m10 → margin: 10px;
p20-10 → padding: 20px 10px;
bgc#000 → background-color: #000;

Nyttige Kombinationer

ul>li.item$*5 genererer en liste med fem <li> med klassen "item1" til "item5".
section>h2+p skaber en <section> med en overskrift og et afsnit.
div>(header>nav>ul>li*3)+main+footer skaber en fuld side-layoutstruktur.

Eksempel af brug

Du vil skabe en skelet for 10 artikler med hver deres billede, header, lister og afsnitter. Du kan enten skrive manuelt som tager langt tid, eller...

Input:

article*10>img+h2+(ul>li*5>a{number $})+p*3

Output:

<article>
  <img>
  <h2></h2>
  <ul>
    <li><a href="#">number 1</a></li>
    <li><a href="#">number 2</a></li>
    <li><a href="#">number 3</a></li>
    <li><a href="#">number 4</a></li>
    <li><a href="#">number 5</a></li>
  </ul>
  <p></p>
  <p></p>
  <p></p>
</article>
... indtil der er 10