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 -->

MDN Element Reference

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">

MDN Attribute Reference

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