HTML och CSS

HTML

Hyper-Text Markup Language

Märkspråk som används på webben. Först standardiserad 1993.

Första dokumentet som publicerades av Sir Tim Berners‑Lee 1991 finns här.

CSS

Cascading Style-Sheets

Språk som beskriver presentationen av innehåll på webben. Först standardiserad 1996.

HTML

Element

HTML-sidor byggs upp av element.
Dessa element avgränsas av taggar.


              
                element
                start‑tag<p>
                innehållMin katt är mycket snorig.
                slut‑tag</p>

Hierarki

HTML-element kan placeras inuti andra HTML-element och skapar en hierarki.

Taggar måste stängas i omvänd ordning
mot hur de öppnades!

Block-element

Block-element placeras ut på en ny rad och det som placeras ut efteråt placeras också på en ny rad. Vanligtvis representerar block-element en större del av sidans innehåll.

Block-element placeras inte i inline-element.

Inline-element

Inline-element placeras inuti block-element och innehåller mindre delar av sidans innehåll. De placeras inte ut på en egen rad.

Tomma element

Det finns en del element som inte följer mönstret med start-tag och slut-tag. Dessa är tomma och saknar slut-tag och innehåll.

<img src="https://picsum.photos/200">

Attribut

Element kan ha attribut som innehåller
extra information.


              <p
              attributclass="note">Min katt ...</p>

Ett attribut har ett blanksteg mellan sig och tag-namnet.
Ett likhetstecken mellan namnet och värdet.
Citattecken runt om värdet.

Booleska attribut

Booleska attribut kan bara ha ett värde, vanligtvis samma som namnet.


              <input type="text" disabled="disabled">

eller

<input type="text" disabled>

Strukturen på en webbsida


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

Längdenheter

Absoluta mått

Fasta mått som är tänkta att alltid vara lika.

Enhet	Namn	Lika med
`cm`	centimeter	1cm = 38px
`mm`	millimeter	10mm = 1cm
`pt`	punkter	1pt = 1/72tum
`px`	pixel	1px = 1/96tum

I praktiken används px för bildskärmar,
de övriga för utskrifter och papper.

Relativa mått

Mått som alltid jämförs mot något tidigare mått.

Enhet	Relativ till
`em`	Teckenstorlek hos föräldern för typografiska egenskaper (`font-size`), teckenstorleken hos elementet själv för andra egenskaper (`width`).
`rem`	Teckenstorlek hot rotelementet.
`vw`	1% av bredden hos viewporten.
`vh`	1% av höjden hos viewporten.

`%`

Procent utgår alltid från samma
egenskap hos sin förälder.

Lengths @ MDN