Kodrummet

Centralt innehåll

Märkspråk och deras inbördes roller, syntax och semantik – där det huvudsakliga innehållet är standarderna för HTML och CSS.
Teckenkodning, begrepp, standarder och handhavande.
Riktlinjer för god praxis inom webbutveckling.
Terminologi inom området webbutveckling.

Fakta

1. HTML5

HTML är en förkortning av Hypertext Markup Language och är märkspråk för att designa webbsidor. HTML5 är den senaste versionen av HTML.

Tagg: (tag på engelska) är ett märkord/instruktion till hur webbläsaren ska visa något, t.ex. <html>, <head>, <meta>, <body>, <h1>, <p>
Element: är start, sluttagg och innehållet mellan dem, t.ex <html> och </html>, <head> och </head>, <title> och </title>, <body> och </body>, <h1> och </h1>, <p> och </p>.
Attribut: är extra information i en tagg, t.ex. lang="sv" i html-taggen och charset="utf-8" i meta-taggen.

Tagg, attribut och element

1.1 Startkod för HTML5

<!DOCTYPE html>
<html lang="sv">
    <head>
        <meta charset="utf-8">
        <title>Min webbsida</title>
    </head>
    <body>
        <h1>Hej, Världen!</h1>
        <p>Min första webbsida.</p>
    </body>
</html>

<!DOCTYPE html> Betyder att dokumentet använder HTML5
<html> är vårt "root"-element. Det rekommenderas att lägga till attributet lang, som talar om på vilket språk texten på sidan är skriven.
<head> elementet innehåller information som är bra för webbläsaren att veta (metadata). Det är information som inte syns i webbläsarfönstret.
<meta> som i det här fallet säger att vi använder teckenkodning "utf-8". Meta-taggen är en av några få som inte innesluter något och därför är starttagg och sluttagg i samma tagg.
<title> är den text som visas i webbläsarens flik.
<body> innehåller det som ska visas i dokumentfönstret.
 är en kommentar som webbläsaren hoppar över och som inte syns i dokumentfönstret.
Sen avslutas body-elementet och html-elementet.

Som vi ser så har de flesta element en start och sluttagg, som talar om att viss inställning börjar och senare avslutas.

1.2 Länkar

<a href="https://www.kodrummet.se">Kodrummet</a>

Läs mer om länkar på w3schools

1.3 Rubriker

<h1>Kodrummet</h1>

Läs mer om rubriker på w3schools

1.4 Stycken

<p>Det här är ett avsnitt med text.</p>

Läs mer om stycken på w3schools

1.5 Listor

Använd taggen <ul> (unordered list) för att skapa en punktlist. Varje del i punktlistan ska vara uppmärkt med en <li> tagg.

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>>
</ul>

Använd taggen <ol> (ordered list) för att skapa en numerisk lista. Varje del listan ska vara uppmärkt med <li> taggen.

<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>>
</ol>

Läs mer om listor på w3schools

1.6 Tabeller

Tabeller skapas med <table> taggen.

<table border=1>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$50</td>
    </tr>
</table>

Läs mer om tabeller på w3schools

1.7 HTML5-taggar

Tagg	Beskrivning	w3schools
`<!DOCTYPE html>`	Anger att det är HTML5 versionen som används på sidan.	Läs mer
`<!-- -->`	En kommentar för att beskriva vad koden gör, syns inte i webbläsaren	Läs mer

`<html>`	Dokumentets rot-element.	Läs mer
`<html lang="sv">`	Rot-elementet med attributet lang som talar om språket på sidan.	Läs mer
`<head>`	Information om innehållet, syns inte på sidan.	Läs mer
`<meta>`	Anger någon information om sidan.	Läs mer
`<meta charset="utf-8">`	Anger teckenkodningen.	Läs mer
`<title>`	Text som visas på webbläsar-fliken.	Läs mer

`<body>`	Innehåller det som ska visas i webbläsaren.	Läs mer
`<h1>`	header 1 (rubrik). Finns från h1 till h6.	Läs mer
`<p>`	paragraph (stycke), avsnitt med text.	Läs mer
`<strong>`	viktig text. Visas oftast som fet text i webbläsarna.	Läs mer
`<br>`	break (radbyte)	Läs mer
`<a>`	anchor (länk)	Läs mer
`<img>`	image (bild)	Läs mer

`<ul>`	unsorted list (osorterad lista)	Läs mer
`<ol>`	ordered list (sorterad lista)	Läs mer
`<li>`	listelement (listelement)	Läs mer

`<table>`	table (tabell)	Läs mer
`<tr>`	table row (tabellrad)	Läs mer
`<th>`	table header (tabellrubrik)	Läs mer
`<td>`	table data (tabelldata)	Läs mer

2. Entiteter

Vissa tecken måste skrivas med entitetsnamn eller entitetsnummer. Anledningen är att tecknen inte finns på tangentbordet, t.ex. © eller att de är reserverade för andra betydelser, t ex < > som talar om att en tagg startar och slutar.

  betyder mellanslag, "non breaking space". Bra om vi enkelt vill tvinga fram mer mellanrum mellan två ord eller två bilder eller liknande. Eftersom webbläsaren automatiskt skippar alla utom ett mellanslag om vi försökt skriva det i koden.

© litet c i en cirkel, dvs copyright-symbolen ©.

å ä ö lilla å, ä och ö. Våra små och stora åäö finns t.ex. inte på ett engelskt tangentbord så därför kan vi ibland se dessa översatta till entiteter.

> greater than, större än >.
< less than, mindre än <.
& ampresand, dvs och-tecknet &.

Läs mer om entiteter på w3schools

3. Style guide för HTML5

Indentera koden.
Använd små bokstäver för all kod för enklare läsning (läsbarhet).
Även om det inte är nödvändigt med citattecken runt attributvärden så använd det för tydligheten, t.ex. <meta charset="utf-8">).
Använd en slut "slash" för taggar som inte innesluter något, t.ex. <br>, <meta charset="utf-8">, osv.

4. Standarder

World Wide Consortium rekommenderar (W3C) rekommenderar och standardiserar olika tekniker för webben, bl.a. HTML.
Varför ska man följa webbstandarder?
För att så många som möjligt kan ta del av informationen på webbsidan oberoende av webbläsare, operativsystem och hårdvara som används.

5. Validering

Att validera sin HTML-kod innebär att man kontrollerar att det är korrekt syntax, dvs att alla språkregler följs. Validering är en kvalitetskontroll som ser till att HTML-standarden följs och att HTML-sidan visas korrekt.
Om HTML-koden inte validerar kan den visas felaktigt och på olika sätt i olika webbläsare.

Validering görs på https://validator.w3.org

6. Inline & Block element

Inline-element
De följer med i text-innehållet utan att byta rad. Det betyder att vi kan starta och sluta mitt i en rad.
Exempel på inline element är, t.ex.: <span>, <img>, <a>, <strong>

Block-element
De placeras på en ny rad efter tidigare element.
Exempel på block element är t.ex.: <div>, <h1>, <p>, <table>, <ol>, <ul>

Läs mer om inline och block på w3schools

Begrepp

Tagg: Ett märkord/instruktion till hur webbläsaren ska visa något.

Element: Start och sluttagg och innehållet mellan dem.

Attribut: Extra information i en tagg.

Metadata: Information om data (data om data).

Teckenkodning: Hur olika tecken representeras numeriskt (binärt) i minnet.

utf-8: Den rekommenderade teckenkodningen, klarar alla språks specialtecken.

Inline: Element som följer med i text-innehållet utan att byta rad.

Block: Element som placeras på en ny rad efter tidigare element.

Entitet: Vissa tecken har namn eller nummer för att tecknen inte finns på tangentbordet eller att de ingår i språket HTML.

W3C: World Wide Web Consortium är det organ som skapar rekommenderade standarder för webbtekniker.

Inlämningsuppgift

Visa läraren när du är klar med övningarna på presentationen.
Se till att sidorna validerar.

Exit tickets