”Märkspråk och deras inbördes roller, syntax och
semantik – där det huvudsakliga innehållet är
standarderna för (x)html och css och orientering
om dokumentobjektsmodellen (DOM) och
Ecmaskript.” (Centralt innehåll i Webbutveckling 1)
Märkspråk
(sidbeskrivningsspråk)
  Engelska:
Markup Language
  Format för dokument bestående av
textkoder
  Syns inte för användaren i sin slutgiltiga
form utan ger direktiv till det
datorprogram som presenterar
dokumentet
Märkspråk
Några exempel:
  HTML (HyperText Markup Language)
  XML (eXtensible Markup Language)
  RTF (Rich Text Format)
HTML
  HyperText
Markup Language
  Är tillsammans med TCP/IP och HTTP
den grundläggande standarden för www
  Anger dokumentets struktur (rubriker,
styckeindelning mm)
  Anger metainformation (språk, författare,
plats i hierarki)
  Kan i viss mån ange hur dokumentet
ska visas
HTML
Element: <a href=”index.html”>Startsida</a>
Elementets namn:
<a href=”index.html”>Startsida</a>
HTML
Komplett tagg:
<a href=”index.html”>Startsida</a>
Starttagg: <a href=”index.html”>Startsida</a>
Sluttagg: <a href=”index.html”>Startsida</a>
Attribut: <a href=”index.html”>Startsida</a>
Värde: <a href=”index.html”>Startsida</a>
HTML
Tomt element (som inte kräver sluttagg):
<img src=”bild.jpg” alt=”Bild” width=”300”
height=”140”>
Om det ska fungera även i XML och XHTML
skriver man en kombination av start och
sluttagg: <hr />
HTML
  I
HTML fungerar både versaler och
gemener.
  I XML eller XHTML ska elementen
skrivas med gemener
  För säkerhetsskull kan man välja
gemener
HTML
  Element
får absolut inte överlappa
varandra!
<p><a href=”index.html”>Hem</a></p>
<p><a href=”index.html”>Hem</p></a>
CSS
  Cascading
Style Sheets
  Språk som beskriver hur ett dokument
ska visas (t.ex. teckensnitt, färg)
  Kan ligga i själva html-dokument, men i
de flesta fall är det bättre länka det till
dokumentet
CSS
CSS-regel: P {font-family: Arial; font-size: 4;}
Selektor: P {font-family: Arial; font-size: 4;}
Egenskap: P {font-family: Arial; font-size: 4;}
Värde: P {font-family: Arial; font-size: 4;}
CSS
P {font-family: Arial; font-size: 4;}
{} visar var formatanvisningen börjar och slutar
: skrivs efter egenskap
; avskiljare mellan flera egenskaper i en regel
CSS
Delas gärna upp för ökad tydlighet
P{
font-family: Arial;
font-size: 4;
}
Dokumentobjektsmodellen (DOM)
<html>
<head>
<title></title>
</head>
<body>
<ul></ul>
<div></div>
<div></div>
</body>
</html>
Ecmascript
  Ett
skriptspråk som är standardiserat av
Ecma International
  Kan förändra DOM-trädet, t.ex. om en
knapp trycks ner eller släpps eller
muspekaren förs över ett visst element.
  Javascript och JScript siktar på att vara
kompatibla med Ecmascript.
  Är inte samma sak som Javascript eller
JScript utan snarare en standardiserad
del av dessa.