HTML5 (HyperText Markup Language)
Struktur och “markup”
Nivå
Känna till / ha kunskap om:
Kunna:
Grund-element, förstå värdet med SEO-vänliga element-typer & 5 HTML-element
Js-fil & CSS-fil + tracking-Script importering
Kunna:
2 stycken Element-Attribut utöver id & klass.
Känna igen:
1st Meta-taggar för Sociala Medier
Egen färdighet att skapa & ändra:
Rubrik <h1> Min titel</h1>, <h2> osv Paragraf <p> Min paragraf</p>
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>
HTML Element (tex div, section, header)
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
Element-typer
<div>
Generellt element, används i många sammanhang
<section>
En specifik huvud-sektion på sidan (tex en newsletter-signuo mitt i sidan, eller en stor erbjudande-splash i toppen av sidan)
<header>
(SEO-vänligt) Översta delen i sidan eller i en artikel
<main>
(SEO-vänligt) Allt huvudinnehåll på sidan eller i artikeln-listan
<footer>
(SEO-vänligt) Nedersta delen i sidan eller artikeln. Innehåller oftast länkar till annat
<h1>
(SEO-vänligt) En huvudrubrik. h2 är en mindre rubrik / underrubrik.
<p>
En paragraf, ett textstycke
<a href=”https://google.se”>
En klicklänk för att ta sig till en annan del av hemsidan eller en helt annan sida
<img src=”url-till-min-bild.jpg” alt=”En bild på en häst”>
Ett bild-element.
<ul>
En lista. Innehåller <li>-list-element
<li>
Ett / flera list-element. (List item) ligger inuti en <ul>
<article>
(SEO-vänligt) En del av sidan som specifikt är en artikel
<span>
Textfält
<nav>
(SEO-vänligt) Navigering på sidan. Tex meny-val: Denna sätter du oftast runtom ett “ <ul> “-element
<HEAD> Element
<link>
Inlänkning av en resurs, tex CSS
<script> ( ligger i HEAD)
En del av HTML’n där man skriver Javascript, eller importerar Javacript-fil.
<meta> ( ligger i HEAD)
Information om sidan.
<title>
(SEO-vänligt) Namnet på sidan ( ligger i HEAD)
HTML Attribut ( Tex src, id, klass, href, alt)
scr = 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 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
<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 )
Importerar en Javascript-fil
src =Länken till din javascript-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" >
Hänvisa till en huvud-sida (SEO) om denna sida är lik / en kopia den andra
<link rel="canonical" href="https://www.example.com/page.php">
Sociala Medier Meta Taggar
Ligger i: <head>
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>
META
Information om sidan
Beskrivning av sidan
<meta name="description" content="Place the meta description text here.">