Märkspråk och deras inbördes roller, syntax och semantik – där det
”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.
© Copyright 2025