HTML

HyperText Markup Language

</>

sandra.larsson@chasacademy.se

https://chasacademy.se  /  E-mail: info@chasacademy.se  /  This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

 

Märkspråk

Stilmallsspråk

Programmeringspråk

Struktur/Innehåll

Utseende

Funktion

Webbens grundläggande byggstenar

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

Syntax

<p>

</p>

Some text

Opening tag

Closing tag

Content

Element

Syntax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
    
</body>
</html>

Grundmall HTML

Dokumenttyp

Här börjar det

Instruktioner till webbläsaren

Teckenuppsättning

Här börjar innehållet

Märkspråket HTML finns i flera versioner. Allra första raden måste ge information vilket typ av dokument som läses in. Här anges den senaste standarden, HTML 5, som dokumenttyp. 

<!DOCTYPE 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. metadatan. Det är taggar som <meta>, <style>, <link>, <title> m.fl.

 

De taggarna syns inte på webbsidan, men påverkar den.

 

<head></head>

 

Att använda en standardiserad teckenkodning är en förutsättning för att en html-sida ska visas oberoende av vilken dator eller program som används.

En riktlinje är att använda sig av teckentabellen UTF-8 som kort och gott sagt möjliggör användning av världens alla tecken. 

 

<meta charset="UTF-8">

 

En <title> är nödvändig för varje HTML-dokument. Den syns i webbläsarens tabb. Ge en bra beskrivning!

 

<title>Chas Academy</title>

 

Innanför <body> finns själva sidan.

De element som som står för innehållet på webbsidan.

 

<body></body>

 

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>
<body>
...
</body>
</html>

 

ÖVNING

  1. Skriv grundmallen för ett HTML-dokument (för hand). Denna ska du kunna skriva utantill och veta betydelsen av varje element
  2. Infoga automatiskt i VS Code m.h.a Emmet. Första raden i HTML-dokumentet ange ! + Enter. Se denna länk      VS Code Extensions for HTML

Vanliga element

Text   Struktur Media Länk Listor Formulär
h1-h6 main img a  ul form
p nav video ol input
em section audio label
strong article
ul header
ol footer
aside
div
span

Det finns ca 140 taggar.

Se       MDN Element Reference

Du kommer behöva lära dig fler, men långt ifrån alla.

En del taggar är även utgående.

Attribut

Ger mer information till taggarna.

Exempelvis src, class, href - allt innanför starttaggen

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

Se denna länk      MDN Attribute Reference

ÖVNING

Vilka innehållstyper hittar du i följande layout?

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 a, span, strong, em, img

Block- v.s. Inline-element

Nästlade element (nestling)

En tagg innehåller ofta andra taggar. Detta kallas att vi nästlar taggar (nestling). Det överordnade elementet kallas parent och det underordnade child.

<body>
  <h1>TODO list</h1>
  <p>What to do in nex week</p>
  <ul>
      <li>CSN</li>
      <li>Install VS code</li>
      <li>Get up running..</li>
  </ul>
</body>

parent

child

Viktigt med indentering för bra läsbarhet!

 

  1. Markera texten "View"    "Command Palette"    "Format Selection
  2. Läs under tillägget hur du gör inställningar för Format on Save.

 

VS code tillägget Prettier ger bra autoformattering

Validering

Kontrollerar din HTML gentemot standarder. W3C är organisation för webbstandarder

  • Valdidering kan användas som ett verktyg för felsökning
  • Validering är en kvalitetskontroll som hjälper till att framtidssäkra webbsidor
  • Validering underlättar underhåll av webbsidor
  • Validering hjälper till vid inlärning
  • Validering är ett tecken på professionalitet

https://validator.w3.org/

Validera här!

Made with Slides.com