JavaScript Required
We’re sorry, but Coda doesn’t work properly without JavaScript enabled.
Skip to content
STI Frontend
CSS
HTML
Javascript (Js)
Sammankopplande
Resurser
Tentamen
LektionsPDF
Hemuppgifter
Schema
More
Share
Explore
HTML
HTML5 (HyperText Markup Language)
Struktur och “markup”
/ *____________ Tentastress ____________ */
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>
HTML5 (HyperText Markup Language)
HTML Element (tex div, section, header)
Grundelement
Element
HTML Attribut ( Tex src, id, klass, href, alt)
Importerar en Javascript-fil
Importerar en CSS_fil
META
Sociala Medier Meta Taggar
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
Ctrl
P
) instead.
HTML