TENTA-PLUGG Flashcards
obligatoriska html-elementen
(minimalt giltligt dokument)
!DOCUMENT html
html
head
title/title
/head
body
/body
/html
hur gör man för att ange vilken teckenkodning dokumentet ska ha? Varför gör man det?
Ange
meta charset=”utf-8”
i head-elementet.
För att undvika att tex å, ä och ö visas felaktikt
Hur gör man för att ange vilket mänskligt språk sidan visas på och varför kan det vara bra att göra?
Ange
lang=”sv”
innanför den första html-taggen. Är bra för att tala om för skärmläsare vilket språk sidan bör läsas på
Vad är skillnaden på presentationselement och semantiska element?
vad är skillnaden mellan b och strong?
presentationselement ignoreras av skärmläsaren och styr bara utseendet tex i och b
semantiska element ignoreras inte av skärmläsare och styr både utseende och innebörd tex em och strong
båda gör texten mer fet utseende mässigt men med den semantiska strong-taggen får den också en annan betoning än text som inte har den taggen
vad är absoluta och relativa sökvägar? Vad är skillnaden?
En absolut sökväg är en fullständing url.
En relativ sökväg utgår från vart filen du skriver i finns. För att gå bakåt skriv: ../ och för att gå ner i en fil eller mapp skriv /
href=”…..”
hur gör man för att länka bilder?
img src=”…sökväg..” alt=”..beskrivning av bild..”
man kan också lägga till width och height
Lägg alltid till alt.
alt talar om för skärmläsaren vad bilden föreställer.Ttexten som skrivs inom alt är det som kommer läsas upp av skärmläsaren
Vad är DOM?
Document Object Model
Är webbläsarens tolkning/representation av källkoden i html-dokumentet
10 typer av input
- text
-
number
(attributen step, min, max styr betendet av detta input-fält) -
button
(istället för att sätta typ button på ett input-fält kan man använda taggen < button> och ange vilken typ av knapp det är tex submit) - reset
- submit
- hidden
- password
-
radio
(radio-knappar måste vara omslutna av ett < fieldset> för att skärmläsaren ska fatta vad som hör ihop)
(använd attributet name=”..” för att man inte ska kunna välja mer än en radio-knapp med samma namn)
10.checkbox
(med attributet checked kommer kryssrutan redan vara ikryssad)
Skillnader på block-element och inline-element?
ex på block: < p >, < h1 >…< h6 >, < blockquote>, < hr>, < html>, < body >, < ul>, < ol>, < li>,
< table> och < div> Dessa har radbrytning både före och efter sig och skulle inte kunna placeras i tex <p>
Block-elementen tar upp 100% av föräldrar-elemtets bredd
ex på inline: < s t r ong >, < em >, < br >, < q>, < img>, < a>, < abbr>, < time >, < input>
och < span> Dessa löper med texten/har ingen radbrytning och skulle därför kunna placeras i tex < p>
Man vet inte ett inline-elements bredd, de anpassar sig
Vilka är de semantiska block-elementen och vad ska finnas i dem?
< header> – Sidhuvud med logotyp, huvudmeny osv
< footer> – Sidfot med kontaktuppgifter, snabblänkar osv
< main> – Huvudinnehållet på sidan
< article> – Fristående innehåll (en eller flera)
< section> – Delar av till exempel en artikel (ej fristående)
< nav> – Huvudsaklig navigering (tex huvudmeny)
< aside> – Innehåll som inte behövs för att förstå innehållet (tex sidospalt)
< figure> – Bild, diagram etc. Ange en beskrivning med < figcaption>.
Vad är ett generiskt element?
gruppering
< div> är ett generiskt block-element
< span> är ett generiskt inline-element
För att göra dessa element semantiska kan man lägga dit attributet role och ange som tex. button, feed eller presenation
vid presentation kommer skärmläsaren hoppa över elementet
CSS-regler
Selektor+Egenskap+Värde
(Egenskap+Värde=Deklaration)
Tre ställen att skriva CSS på
+
Fördelar & nackdelar med dessa
- I en separat fil som länkas in i html-filen med < link> i < head>
< link rel=”stylesheet” href=”style.css”>
+ kan använda samma stilmall på flera sidor
+ html-filen blir mindre
- all styling läses in även om det inte behövs för sidan - Inom ett < style> element i < head> elementet i html-dokumentet
- Som deklarationer direkt i style-attributet på enskilda element:
tex < h1 style=”font-weight: bold”>Rubrik< /h1>
Klasser och id:n
Selektorer (6 st)
Element selector h1 Matchar alla < h1> element
Descendent selector header h1 Matchar alla < h1> i < header>
Child selektor header > h1 Matchar ** h1>** om den ligger direkt i < header>
Class selector .my-class Matchar alla element med class=”my-class”
ID selector #my-id Matchar alla element med id=”my-id”
Multiple selektors h1, h2 Matchar flera selektorer samtidigt
Universal salector * Matchar alla element
Pseudo-class a:hover Matchar alla < a> som hovras
Pseudo-element p::before Matchar ett pseudoelement i början av alla < p>
Attribute selector [type=”text”] Matchar alla element med type=”text”
Adjacent sibling h1 + p Matchar alla < p> som ligger direkt efter < h1> i samma element
Vad menas med cascading?
Att regler som är skrivna längre ner i dokumentet “skriver över”/har högre prio än regler som är skrivna högre upp med samma selektor
Att regler med högre specificitet skriver över regler med lägre specificitet tex div.min-class{} –> .min-class{} –> div{}
Att style-attributet skriver över regler som finns i < style> elementet och css-filen
Att deklarationer med !important skriver över deklarationer utan
Specificitet
- ID:n
- Klasser, attribut och pseudo-klasser
- Element och pseudo-element
https://specificity.keegan.st/
Bxmodellen
Margin
Border
Padding
Content, width och height
Vad är box-sizing?
Box-sizing påverkar width och height som finns i koden.
box-sizing: border-box inkluderar border och padding i värdena på width eller height som finns i koden.
content-box är default för box-sizing och exkluderar border och padding från width och height
Boxrenderingsmetoder
- display: block;
Blockelement, som < div> - display: inline;
Inline-element, som < span> - display: inline-block;
Inline-element som kan innehålla
blockelement - display: table;
Blockelement utan automatisk
100% bredd, som < table> - display: flex;
Blockelement där omslutna
element layoutas enligt flexbox-
metoden - display: none;
Ta bort elementet från
renderingen
Pseudo-klasser
-
:hover
Matchar element som hovras (muspekaren är på elementet) -
:focus
Matchar element som har fått fokus (tex via tabbtangenten) -
:active
Matchar nedtryckt knapp -
:nth-child(odd)
Matchar varannat element med start på det första -
:nth-child(even)
Matchar varannat element med start på det andra -
:nth-child(3)
Matchar alla element som är det tredje underelementet -
:first-child
Matchar element som är det första underelementet -
:last-child
Matchar element som är det sista underelementet
Pseudo-element
-
::before eller :before
Ett imaginärt underelement som kommer före övriga
underelement -
::after eller :after
Ett imaginärt underelement som kommer efter övriga
underelement - Använd content för att elementet ska dyka upp:
div::after { content: ‘text’; }
Formulär html
Taggen < form> skapar ett formulär
Med < input> taggen tar man emot olika typer av input som tex text < input type=”text”>
- Input-fältet kan ha ett förifyllt värde
value=”Standardvärde” - Input-fältet kan ha en platshållartext placeholder=”Standardvärde”
- Input-fältet kan vara obligatoriskt att fylla i
required
< select> skapar en drop-down meny och < option> skapar valen i den menyn
< textarea> skapar en textruta och attributet row styr antalet rader i textrutan
med < legend> får < fieldset> en rubrik
< button> är mer flexibelt än input eftersom det inte är självstängande och kan innehålla fler element
en fältettikett skapas med taggen < label>
se till att ge tillhörande input-fält ett id och referera till fältet genom att lägga id i for-attributet i label-taggen
