HTML
HyperText Markup Language
</>
"Märkspråk är ett format för dokument bestående av särskilda textkoder (så kallade taggar eller element) som inte syns när dokumentet presenteras för användaren i dess slutgiltiga form. Koden i märkspråket ger instruktioner för hur ett datorprogram (exempelvis en webbläsare eller ordbehandlare) ska presentera text, bilder, layout, länkar med mera."
Källa: Märkspråk. (2019, augusti 10). Wikipedia, . Hämtad 11.30, augusti 16, 2019 från //sv.wikipedia.org/w/index.php?title=M%C3%A4rkspr%C3%A5k&oldid=46188336
Hyper Text
länkar!
<p>
</p>
Text på min sida
Starttagg
Sluttagg
Innehåll
Element
<p>
</p>
Some text
Opening tag
Closing tag
Content
Element
En tagg innehåller ofta andra taggar.
Detta kallas att vi nästlar taggar (nestling). Viktigt att tänka på i vilken ordning vi stänger dem.
<html>
<head>...</head>
</html>
HTML-taggen är den så kallade “root-taggen”, vilket betyder att den är omfattar hela HTML-dokumentet.
<html></html>
Innanför head-taggen finns den s.k. metadata. Det är taggar som <meta>, <style>, <link>, <title> m.fl.
De taggarna syns inte på webbsidan, men påverkar den.
<head></head>
Innanför <body> finns själva sidan.
Allt här är det som kommer att synas på webbsidan.
<body></body>
Vanliga taggar
<h1>Jag är en rubrik </h1>
<h2>Jag är en underrubrik till h1</h2>
<h6>Jag är den minsta rubriken i oordningen </h6>
<p>Jag är ett textstycke</p>
<!-- Jag är en kommentar. -->
<ul>
<li> Jag är en punkt i en oordnad lista </li>
<li> Jag är en punkt i en oordnad lista</li>
</ul>
<ol>
<li> Jag är nummer 1. i en ordnad lista</li>
<li> Jag är nummer 2. i en ordnad lista</li>
</ol>
<strong> Stark betonad text. Blir oftast per default fetstil </strong>
<em> Viktig text. Blir oftast kursiv </em>
<a href="http://google.com">Detta är en länk till google.com</a>
<!--Så här placerar man en bild i HTML-->
<img src="bild.jpg"> <!-- Notera att denna tagg inte har någon sluttagg -->
Attribut
Ger mer information till taggarna
<tag name="value"></tag><img src="corgi.png">
<p class="selected">woof woof</p>
<a href="www.google.com">Ta mig till Google</a>
<link rel="stylesheet" type="text/css" href="style.css">
Vilka innehållstyper hittar ni i följande layout?
ÖVNING
Olika sorters element
Block element: en tagg som alltid börjar på en ny rad och fyller ut hela det tillgängliga utrymmet i bredd. Exempel: p, ul, div
Inline element: en tagg som inte börjar en ny rad och bara tar precis så mycket plats som det behöver. Exempel: a, strong, span
Inline-block element: som ett block-element (går att sätta width & height), men börjar inte på ny rad.
Exempel: img, button
Ett element är nästan alltid ett block
som tar upp hela bredden av viewport.
Undantag är ex. img, det är ett s.k. inline-element.
Block- v.s. Inline-element
Undersök block- v.s inline-element när ni kodar receptet
ÖVNING
Introduktion till HTML
By Sandra Larsson
Introduktion till HTML
Introduktion till HTML
