Skip to content
Gallery
Preparandkurs
Översikt
Schema
Behörighetstest
Lektionsmaterial
Övningsuppgifter
Logik
Verktyg / Program
Exempelkod
Versionshantering
Fullstack (Tech stack)
(Extra)
Kommentarer och Dokumentation
More
Share
Explore
(Extra) Web

(Extra) HTML

HTML5 (HyperText Markup Language)

Struktur och “markup”
/ *____________ Extra Bra att kunna____________ */
Känna igen / ha kunskap om:
3 stycken vanliga HTML5 element-typer (section, header etc) & 5 Grund-element (div, h1 etc)
veta skillnaden mellan <head> , <h1> , <header> och <body>
Js-fil & CSS-fil importering
2 stycken Element-Attribut utöver id & klass.
Leta hur man öppnar och stänger de olika elementens delar ( =“ “ < > < / > ) och ha koll på ordningen man öppnat och stängt dem i inuti ett dokument.
tex: <div id=”mitt-id”>
<div>
</div>
</div>

Känna igen:
1st Meta-taggar


Egen färdighet att skapa & ändra:
Rubrik <h1> Min titel</h1>, <h2> osv
Paragraf <p> Min paragraf</p>
Bild <img src=””>
Länk <a href=””>
Knapp <button>min knapp</button>
Lista <ul> <li> Min </li> </ul>

Sätta ut ID, KLASS , SOURCE och länk
<div id=”mitt-id” class=”min-egna-klass”>
<img src=”http://the-image-link.png” >
<a href=”http://google.se” > </a>

⁠
https://www.w3schools.com/html/
⁠
⁠
<!— ____________________________
_____________________________
____________________________
SLUT PÅ målen
____________________________
____________________________ —>

HTML Element (tex div, section, header)

⁠
https://www.w3schools.com/html/html_elements.asp
⁠
⁠

Grundelement

<head>
(Osynlig del av sidan. Här importerar vi CSS, Script-filer, Meta-taggar (information om sidan) , sätter titel m.m.
<body>
Allt synligt innehåll på sidan
<div>
Generellt element, används i många sammanhang
<span>
Textfält
<section> HTML5
En specifik huvud-sektion på sidan (tex en newsletter-signuo mitt i sidan, eller en stor erbjudande-splash i toppen av sidan)
<ul>
En lista. Innehåller <li>-list-element
<li>
Ett / flera list-element. (List item) ligger inuti en <ul>
<h1>
En huvudrubrik. h2 är en mindre rubrik / underrubrik.

Element


<header> HTML5
Översta delen i sidan eller i en artikel
<main> HTML5
Allt huvudinnehåll på sidan eller i artikeln-listan
<footer> HTML5
Nedersta delen i sidan eller artikeln. Innehåller oftast länkar till annat
<nav>
Navigering på sidan. Tex meny-val
<aside> HTML5
En sido-meny eller sido-del av sidan

<p>
En paragraf, ett textstycke
<a>
En klicklänk för att ta sig till en annan del av hemsidan eller en helt annan sida
<img>
Ett bild-element.
<link>
Inlänkning av en resurs, tex CSS
<script> ( ligger oftast i HEAD eller sist i BODY efter allt HTML innehåll)
En del av HTML’n där man skriver Javascript, eller importerar Javacript-fil.
<meta> ( ligger i HEAD)
Information om sidan.
<title>
Namnet på sidan ( ligger i HEAD)
<button>
En knapp som har lite grund-styling

HTML Attribut ( Tex src, id, klass, href, alt)

⁠
https://www.w3schools.com/html/html_attributes.asp
⁠
⁠

src = Källan för bilden / videon
id = Det unika ID-namnet på elementet
klass= En eller flera klasser som elementet tillhör
href =referenslänken. Antingen vart man vill skicka användaren vid en <a>-länk, eller vilken länk man vill läsa in tex CSS ifrån
target = Om man vill öppna en a-länk i samma flik eller i en ny flik.
alt = Alternativ text som visas om bilden ej laddas. Hjälper även personer med synfel samt Google Images-SEO.

<div id=”my-id-name” class=”my-class my-other-class” > </div>
BIildelement
<img src =”http://minurl.com/img/bild.png” alt=”En fin bild” width=”400” height=”400” >
Klick-länk-element ( target=”_blank” öppnar i ny flik, _self öppnar i nuvarande flik. )
<a href =”http://google.se” target=”_blank / _self” rel="canonical" > </a>
Information om sidan
<meta name=”” value=””>
Importera ett script
<script type="text/javascript" src="my-script-file.js" ></script>



HTML + CSS (Importera CSS, använda CSS direkt i HTML )
⁠
https://www.w3schools.com/html/html_css.asp
⁠
⁠

Importerar en Javascript-fil

href =Länken till din css-fil
script-taggen visar för datorn att det är ett script som ska läsas in
<script type="text/javascript" src="my-script-file.js" ></script>

Importerar en CSS_fil

href =Länken till din css-fil
<link rel="stylesheet" href="my-web-styling.css" >

META

Information om sidan
⁠
https://www.w3schools.com/tags/tag_meta.asp
⁠
⁠
Beskrivning av sidan
<meta name="description" content="Place the meta description text here.">

Regler för om man vill att google ska indexerna denna sida eller ej
<meta name="robots" content="index, follow" />

Om och hur sidan är anpassad för olika skärmstorlekar och devices. Denna är tex för att tillåta mobil-läge:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Vilka tecken-samlingar som ska gälla för sidan (UTF-8 är vanligt och läsbart)
<meta charset="UTF-8">

Sociala Medier Meta Taggar

⁠
https://css-tricks.com/essential-meta-tags-social-media/
⁠
⁠

Titeln på artikeln / sidan som ska delas
<meta property="og:title" content="European Travel Destinations">

Beskrivning av artikeln / sidan som ska delas
<meta property="og:description" content="Offering tour packages for individuals or groups.">

Bilden ihop med artikeln / sidan som ska delas
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">

Länken till artikeln / sidan som ska delas
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
</head>



Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.