Lærebog til emne 2. Kapitel 5 - 13

Indholdsfortegnelse

Kapitel 5. Frontend programmering og HTML

Vi går nu i gang med kodning. Endemålet er, at du kan kode både frontend, backend og i en database samt til aller sidst at sætte det hele sammen.

5.1 Det store overblik over kodesprog

Vores udgangspunkt for at kode er modellen her.

Kode er enten frontend, backend eller database. Du kender sikkert allerede sprogene HTML, CSS og SQL. HTML og CSS bruger vi til frontend kodning. SQL bruger vi til at kommunikere med databaser.

Her er et mere udvidet overblik over sprog. I skal lære HTML, CSS, JavaScript, PHP og MySQL, og vi starter med frontend koden.

Sådan bruges frontend sprogene

HTML (Hyper Text Markup Language) er vores fundament. Vi bruger det til at vise tekst og billeder og strukturere sidens layout og indhold
CSS (Cascading Style Sheet) bruger vi kun til udseendet. Hvis en tekst skal have hvid farve og baggrunden skal være mørkeblå, så bruger vi CSS
JavaScript bruger vi til at lave dynamisk indhold frontend. Dynamisk vil sige, at resultatet af koden kan ændre sig alt afhænig af situationen. Et eksempel er et javaScript, der f.eks. kan skrive “Godmorgen” til brugeren, hvis klokken er før 12 og “Godaften”, hvis klokken er over 18.

Logoer for de seneste versioner af HTML(5), CSS(3) og javaScript

Du kan spørge, hvorfor man ikke samler det hele i et sprog. Svaret er, at der aldrig har været og aldrig kommer en samlet plan for det her. Jo, en sjælden gang imellem kommer der en opdatering til HTML og måske CSS. Frontend kodning er præget af et kreativt kaos. Masser af entusiastiske udviklere blander blod hele tiden, og så må den bedste praksis vinde.

Link til toppen af siden.

5.2 Introduktion til HTML og W3schools

HTML er som sagt nævnt for alle hjemmesider. Lad os kikke lidt på et eksempel, som du også kan se i videoen.

Lige som i videoen prøver jeg min kode af hos w3schools.com/html/default.asp, din bedste ven på nettet. Uundværlig for næsten alle, der arbejder med hjemmesider, og du kommer til at bruge W3schools meget.

Jeg har basis HTML kode ind til venstre. Så har jeg klikket på den grønne “Run” knap, og så ser jeg resultatet til højre. Resultatet er endnu kun sort-hvidt, når der skal farver på dvs. styling, så skal vi bruge sproget CSS. Mere om CSS i et senere afsnit.

Forstå: <html>, <h1>, <p> tagsne

TAG	FORKLARING	W3SCHOOLS REFERENCE
<!DOCTYPE html>	Tagget fortæller, at vi bruger den seneste version af HTML	w3schools.com/html/html_basic.asp
<html>…</html>	Start og slut tag på alt HTML kode. Det fortæller browseren, at vi taler “html’sk”.	w3schools.com/html/html_basic.asp
<h1>…</h1>	<h1> betyder “heading 1” eller overskrift 1. Der findes op til 7 overskrifter. <h1> er den største. Du vil senere lære at skifte farve og størrelse på taggets indhold med CSS kode.	w3schools.com/html/html_basic.asp
<p>…</p>	<p> betyder”paragraf”. På dansk “brødtekst”	w3schools.com/html/html_basic.asp

<head> og <body> er semantiske tags

Der er altid kun 1 “head” og 1 “body” tag på en html side. De 2 tags kaldes “semantiske tags”. De viser ikke noget i sig selv, men de bruges til at holde orden på resten. Man siger, at de udgør en “sektion”, f.eks. en head eller en body sektion.

Tænk på dem som bokse, man kan lægge forskellig kode i. Mennesker er også delt op i head og body. Modsat mennesker så er det kun indhold i <body> området altså “maven” af koden, som vi viser frem :-).

Link til toppen af siden.

5.3 Opsummering: De vigtigste regler for HTML kode

Her er en kort opsummering over de vigtigste regler for HTML kode. Hvis det virker som en stor mundfuld, så tag det roligt. Når du begynder at kode, vil de føles mere naturlige.

NR	REGEL	EKSEMPEL
1	Alle tags starter med “<” og slutter med “>”	<html>
2	Mange tags (alle i eksemplet) har et starttag og et sluttag. Sluttagget starter med en skråstreg	<h1>…</h1>
3	Tags er inde i hinanden. Vi siger, at der nestede eller flettede Det tag, man starter med sidst, afsutter man slutter man først	<head> <title>…</title> </head>
4	Vi starter og slutter med <html>	<html>. …. </html>
5	Vi har 2 områder. Et <head> område og et <body> område. Alle andre tags, bortset fra <html> ligger inde i disse tags	<head … </head> <body>…</body>
6	Alt sideindhold, med undtagelse af <title>, ligger i <body> tagget	<body><h1>…</h1> </body>
7	Tags kan være åbne. Dvs. at de har et starttag og et sluttag. De har et indhold imellem tagsne.	<h1>…</h1>
8	Tags kan også være lukkede. Så starter og slutter de i samme “< >”. <br> bruges til at lave et linjeskift, mens <img> bruges til at indsætte billeder med	<br> <img src…. >

Link til toppen af siden.

5.4 Gode råd, når du koder

Snart skal du i gang med at kode. Her er et par få, gode råd:

“Test often fail early”. Test meget og ofte, så opdager du lettere dine fejl
Jo mere irriteret du er, jo tættere er du på at finde fejlen
Hold orden, så finder du nemmere dine fejl. Se nederst i afsnittet.
Skriv HTML kode med småt. Ikke f.eks. <BODY><H1>…</H1></BODY> men <body><h1>…</h1></body>. Tagget <!DOCTYPE html> er en lille undtagelse.

Alle, jeg gentager ALLE laver fejl, når de koder. Det er en del af læringen, for fejlene er med til at gøre dig dygtig. Jeg påstår, at du ikke kan lave en fejl i HTML, som jeg ikke selv har prøvet at lave :-). I øvrigt er HTML et meget robust sprog. Du kan komme ud for, at det virker, selvom du har lavet et par småfejl.

Vær doven. Hvis du holder orden, så finder du nemmere fejlene

Dovenskab lønner sig i kodning. Hvis du holder orden, finder du nemmere fejlene.

Selv om du måske ikke er et ordensmenneske, så hold orden, når du koder. Det lønner sig, du finder hurtigere dine fejl.

Jeg holder orden i HTML på den måde, at når jeg starter et nyt tag inde i et andet tag, så rykker jeg koden 2 pladser mod højre. Når jeg afslutter tagget, rykker jeg tilsvarende teksten 2 pladser mod venstre.

Link til toppen af siden.

5.5 Side, hjemmeside eller site

Desværre bruger man begreber omkring hjemmesider lidt i flæng.

En SIDE er en enkelt HTML fil, som man kan se i en browser
Et SITE er en komplet hjemmeside. Et site kan være masser af HTML filer, billeder og videoer, som hører til. På dansk kalder man et SITE for en hjemmeside

5.6 Mere orden: “Separation of concerns”

Et site kan som sagt bestå af mange forskellige filer, ikke kun HTML filer.

Det er meget vigtigt, at du holder en skarp opdeling af dine filer. Princippet er så vigtigt, at det er en konvention (overordnet regel) for at lave hjemmesider. Princippet hedder “separation of concerns”.

NR	REGEL
1.	Alle filer skal ligge i 1 og kun 1 overordnet mappe. Det kalder vi for en projektmappe eller rod-mappen
2.	Separation of concerns. De forskellige typer filer skal ligge i hver deres mappe: Alle HTML filer skal ligge i projektmappen Alle billedfiler ligger vi en mappe, vi kalder for “billeder” eller “images” Alle CSS filer ligger vi en mappe, vi kalder for “css” eller “style2 osv. osv. med andre typer filer
3.	Du må kun bruge engelske bogstaver, når du navngiver filer og mapper. Du må heller ikke bruge hverken mellemrum eller tegn, der kan opfattes matematisk. Start altid med små bogstaver
4.	Den HTML side, du vil have som forside, skal altid hedde ”index.html”

Her er et eksempel:

Jeg har lavet et site, der handler om Sydfyn. Det ligger i en projekt- eller rodmappe, som jeg har kaldt “Sydfyn”.
Inde i mappen ligger mine 3 HTML filer direkte i projektmappen
I mappen “images” ligger alle mine billeder
I mappen “styles” ligger min(-e) CSS fil(-er). Vi kommer til CSS senere
Ingen brug af æ, ø eller å. Ikke kalde en fil for “fåborg”, den skal hedde “faaborg”
Min startside hedder index.html

Link til toppen af siden.

5.7 Mer’ HTML: Tabeller, billeder, lister, links

Du har nu en grundviden om HTML, og du kan koden en basis side.

Tabeller

Tabeller er meget brugbare på hjemmesider. Vi bruger det til at strukturere indhold, hvis vi f.eks. vil have 2 billeder til at stå ved siden af hinanden. Mange gange ser brugerne slet ikke, at vi har sat en tabel op.

Der findes 4 tags, du skal kende

<table> og </table> starter og slutter en tabel
<tr> og </tr> starter og slutter en tabelrække. Vi bygger altid op i rækker, ikke i søjler
<th> og </th> starter og slutter en tabel celle med en overskrift i. Teksten centreres og skrives med fed
<td> og </td> starter og slutter en tabelcelle med almindelig tekst
Alle rækker skal have lige mange enten <th> eller <td> celler
Du kan slå celler sammen både vandret og lodret

Her er et eksempel. Bemærk strukturen og bemærk, at jeg har sat en lille attribut (border=”1″) på tabellen. Ellers ville stregen i tabellen være usynlig.

Læs mere inde på W3schools.asp under tabeller: https://www.w3schools.com/html/html_tables.asp

Billeder

Hjemmesider bugner af billeder, så selvfølgelig skal du lære at indsætte et billede. Det er heller ikke så svært. Du skal bruge koden her <img src=”MIT BILLEDE.jpg” alt=”OVERSKRIFT PÅ BILLEDE”>. Mine STORE BOGSTAVER skal du erstatte, hvis du vil kopiere koden. Her er et indsat billede.

Det vigtige er koden src=”…..”. Inde i anfrselstegnene skal du angive billedets nøjagtige navn og angive nøjagtigt, i hvilken mappe billedet ligger. Hvis du kikker i afsnit Separation of concerns, så jeg har lagt mine billeder i mappen “images”. Hvis jeg vil have fat i et billede i mappen, der hedder “faaborgBy.jpg”, så bliver min kode <img src=”images/faaborgBy.jpg” alt=”Faaborg By”>.

Alt-tagget bruger man til at fortæller brugeren, hvad der på vej, hvis forbindelsen er dårlig og billedet ikke downloader hurtigt nok.

Se mere hos W3schools.com på w3schools.com/html/html_images.asp.

Lister

Vi bruger gerne lister på hjemmesider. De findes i 2 grundudgaver. Enten med prikker, ellers med numre. Koden er enkel.

Start og slut med <ul>…</ul>, hvis du ønsker en liste med prikker. <ul> står for “unordered list”
Start og slut med <ol>…</ol>, hvis du ønsker en liste med numre. <ol> står for “ordered list”
Hvis vil have indrykket en liste, skal du bare starte en ny liste inden i din liste

Læs mere om lister på w3schools.com/html/html_lists.asp

Links

Vi bruger naturligvis masser af hyperlinks eller bare links, når vi hopper fra den ene side til den anden. Koden kan se sådan ud: <a href=”www.w3schools.com>Link til W3schools</a>.

Vi starter med <a href=” …”>, og inden i anførselstegnene sætter vi adressen på det, vi vil linke til. Næste lige som med billeder. Du kan linke til emner både på nettet og på dit eget site. Vi afslutter med </a>. Inde i tagget skriver vi, hvad brugeren skal læse. I eksemplet ovenfor er det “Link til W3schools”. Det kan se sådan ud. Bemærk at HTML farver linket blåt til højre.

Du skal dog vide, at der findes flere slags links. Koden herunder laver et link til en email.
<a href=”mailto:lblj@ibc.dk”>Send email</a>. Læs mere på https://www.w3schools: w3schools.com/html/html_links.asp.

Link til toppen af siden.

5.8 Iframes

En iframe er en stump kode, som kan lave et “vindue” over mod notet indhold på nettet, som befinder sig et helt andet sted. I det lille eksempel her laver jeg en <iframe> eller et “vindue” til AGF’s hjemmeside. AGF’s hjemmeside ligger på www.agf.dk, men alligevel kan jeg se det på min hjemmeside.

Du kan se mere om iframes hos W3schools på w3schools.com/html/html_iframe.asp.

Du kan også indsætte videoer fra YouTube. Se evt. Vejledning 4. Indlejr en video fra YouTube. Du behøves ikke at forstå koden, bare følg vejledningen, kopier koden og sæt den ind.

Link til toppen af siden.

5.9 Undgå problemer med æ, ø og å

Nedenfor er der noget tekst med mange æ, ø og å’er.

Hvis du ser det i en browser, så kan du risikere nedenstående. Det er ikke noget kønt syn. Browserne forstår kun engelske bogstaver.

Der er hjælp at hente. Hvis du indsætter koden <meta charset=”utf-8″> i din <head> sektion, så kan browseren godt tolke danske bogstaver.

Nu virker det:

Der findes andre former for meta tags, men det kommer vi til drypvis hen ad vejen.

Link til toppen af siden.

Kapitel 6. CSS

Vi kan lave meget med HTML, men hvad udseende angår, kan vi kan ikke lave andet end hvid baggrund og sort skrift. Vi har med andre ord ikke mulighed for at style i HTML.

Det har vi til gengæld i sproget Cascading Style Sheets eller bare CSS. CSS handler kun om styling, dvs. farver, skrifttyper, placeringer og meget mere. I videoen har jeg lavet en intro om CSS.

Her er en hjemmeside uden noget CSS:

Her er så den samme side med lidt CSS. Kønt er det ikke, men vi er på vej.

Link til toppen af siden.

6.1 CSS opbygning

CSS er ret simpelt i sin opbygning. Se evt. figuren ovenfor.

Først skriver du det tag, det drejer sig om. F.eks. h1
Så skriver du egenskaben. F.eks. background-color, color, text-align mv.
Til sidst skriver du den værdi, egenskaben skal have. F.eks. “lightblue”
Til aller sidst sætter du et semikolon

Her er en oversigt:

EKSEMPEL	KODE	FORKLARING
Skrift	`h1{` `font-family: Calibri;` `font-size: 30px;` `text-aling: center;` `}`	Styler tagget <h1> med en skrifttype, størrelse og centrering
Farver	`h1{` `color: blue;` `}` `p{` `color: #ffc0cc;` `}`	Styler tagget <h1> med farven blå Styler tagget <p> med farven #ffc0c. Alle farver har en 6-cifret kode (se nedenfor)
Baggrund	`body{` `background-color: 000fff;` `background-image:` `url("images/mitBillede.png";` `}`	Styler tagget <body> med en baggrundsfarve og et baggrunds billede

Link til toppen af siden.

6.2 Hvor skal jeg lægge min CSS kode

Man kan lægge koden 3 steder.

Ved selve tagget
Øverst på den enkelte HTML side
I en fil for sig selv, kaldet et eksternt stylesheet

1. Metode. Ved selve tagget (inline CSS)

Her styler du ved selve tagget. Nyttigt, hvis du skal prøve noget af eller øve dig, men hvis du skal gøre det ved alle tags på alle sider, så får du et kodnings- og opateringshelvede:

Inline styling foregår ved, at du inde i selve start tagget skriver: style=”……..;”. Et eksempel:
– <h1 style”color:blue;text-align: center;”>This is a heading</h1>. Nu får <h1> blå farve og bliver centreret.

2. Metode. Øverst på den enkelte HTML side (internal CSS)

Igen praktisk til test. Til forskel fra før kan vi nu style f.eks. alle <p> tags på en gang. Til gengæld vil det stadig være arbejdskrævende at gøre det på alle HTML sider.

Du skriver CSS’en oppe i <head> sektionen og pakker det ind i et tag, <style>. Selve CSS’en skriver vi selvfølgelig på samme måde som før.

3. Metode. Den professionelle måde: Eksternt stylesheet

Kan du huske princippet om “separations of concerns”? Vi kan lave en fil kun med CSS, og så lave referencen til filen øverst på hver side. Vi følger vores princip på smukkeste vis, når vi adskiller HTML og CSS kode frem for at blande det sammen.

CSS’en filen, dvs. det eksterne stylesheet mystyle.css, kunne se sådan her ud:

Hvis vi så laver en præcis reference øverst på hver HTML side, så behøves vi kun at rette stylesheet 1 sted. Ændringen vil slå igennem på alle sider.

Referencen laver du i <head> sektionen. Den ser sådan ud:
– <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

Se figuren nedenfor

Link til toppen af siden.

6.3 Hvordan husker jeg dog alt det her?

Simpelt. Alt står inde på W3schools, og du skal nok lære det hen ad vejen, når du koder. Her er nogle referencer:

CSS sprogets opbygning: w3schools.com/css/css_syntax.asp
CSS farver: w3schools.com/css/css_colors.asp
3 måder at indsætte CSS på: w3schools.com/css/css_howto.asp

6.4 Gode råd til din kodning

“Test often, fail early”. Hellere hyppige småtest end få store, du fanger fejlene bedre
Brug W3Schools så meget, som du kan

Nedarvning

Du kan udnytte hirakiet i koden.

Hvis du vil have alle bogstaver på hele dit site med rød farve, så lad være med at style på <h1>, <h2>, <p> osv. Lav i stedet en styling på <body> i stedetDen styling, der er tættest på tagget, bestemmer. Hvis du styler farven på alt tekst mørkeblå i <body> men grøn på <p>, så vil <p> få grøn tekstfarve.

Tags arver egenskaber fra de tags, de står inden i. I koden her vil <p> og <h1>arve egenskaber fra <body>. Man kalder princippet for “nedarvning”.

Link til toppen af siden.

6.5 Box modellen

Vi vil gerne kunne styre “rummet” omkring tags’ne. Hvor meget luft skal der f.eks. være til nabobilledet? Hvor meget plads i cellen og hvor tyk skal kanten være. Man kan styre disse ting på næsten alle tags. Det gælder naturligvis tags som <table> og <td>, hvor der er logisk, at vi tænker i rummet omkring tagget. Men vi kan også arbejde med rummet omkring inklusive kanter på tags som <h1>, <p>, <img> og selv <body>.

Til at styre dette har vi en box model, som består af 3 begreber:

Margin, som er pladsen uden for tagget
Border, som er kanten på tagget. Border er ofte usynlig
Padding, som er indersiden på tagget
Content, som er selve indholdet i tagget

I eksemplet her styler 3Wschools et <div> tag. <div> tagget er bare en kasse, som man så kan fylde noget i. Det lyder ikke af noget særligt, men det er det. Mere om det i kapitel 8. <div> tagget som semantisk tag

I eksemplet har W3schools stylet et <div> tag på både margin, border og padding.

 div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Resultatet ser sådan ud:

Læs selv mere hos W3scools: https://www.w3schools.com/css/css_boxmodel.asp

Link til toppen af siden.

6.6 Klasser og id

Især klasser men også id er et særdeles stærkt og meget anvendt væktøj, når man koder frontend. Eksemplet er hentet fra W3schools under CSS Selectors: https://www.w3schools.com/css/css_selectors.asp

Lad os starte med noget helt almindelig kodning. De 3 <p> tags vil normalt lave sort, venstrestillet tekst, men pga. stylingen i toppen bliver teksten rød og centreret. Alle udgaver af <p> tagget på siden får den styling.

Klasser

Nu kunne jeg godt tænke mig, at kun 2 af tagsne fik stylingen fra ovenfor. Det kan jeg ikke løse ved at style på <p>, for gør jeg det, gælder stylingen jo på alle <p> tags. CSS’en fra før er:

p {
  text-align: center;
  color: red;
}

Jeg genbruger koden, men i stedet for at skrive “p” foran, så laver jeg min egen klasse. En klasse skal altid starte med et punktum, f.eks. “.center”:

.center {
  text-align: center;
  color: red;
}

Det næste, jeg gør, er at tilføje klassen til de 2 <p> tags nede i <body>. Foran alle de tags, som jeg vil have stylingen til klassen på, skriver jeg sådan her:

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 
<p>Normal text</p>

Resultatet ser sådan ud. Nu er jeg i stand til at style på en måde, så jeg kun får fat i bestemte tags.

Bemærk:

Jeg udelader punktummet
Du må aldrig bruge æ, ø, å, når du døber klasser
Du må heller ikke starte med tal
Du kan sagtens bruge flere klasser på samme tid, f.eks. <h1 class=”center .big”>, hvor der så er en anden styling til klassen “big”. Du skal bare lave et mellemrum mellem klasserne

id

Klasser i CSS ligner egentlig skoleklasser. Man samler en del af eleverne på en skole i klasser, og hver af klasserne ligner nok resten af klasserne, men hver har de deres særlige egenskaber. 3B har f.eks. Lene Lærer til dansk osv.

Indenfor css kan vi også style på id. I modsætning til klasser er id ikke beregnet på at blive brugt på mere end 1 tag i hele koden. Et id følger de regler, der gælder for klasser, men med følgende forskel:

Når vi skal døbe den i CSS’en, bruger vi en havelåge i stedet for et punktum. Altså ikke “.center” men “#center”. Hos W3 schools bruger de “#paral”
I stedet for <p class=”center”> skriver vi <p id=”paral”>

Det ser sådan ud:

Tag og klasse kombineret

Du kan kombinere klasser med tags. Koden her rammer kun p-tags, der har klassen “center”, altså <p class=”center”>. Den gælder kun, hvis der står “p” lige før “center”. Hvis man på samme måde lavede en klasse til
som
, så vil
ikke få stylingen.Det ser sådan ud:

p.center {
  text-align: center;
  color: red;
}

Resultatet bliver:

Link til toppen af siden.

6.7 Styling af links

Afsnittet her har jeg hentet fra https://www.w3schools.com/css/css_link.asp.

Vi har mange link i HTML, og den marineblå standardfarve til link bliver man hurtigt træt af. Du kommer til at style link mange gange, men det er heller ikke så svært.

Koden til et link ser sådan ud: <a href=”www.et-eller-andet.dk” …..>

Hvis du f.eks. vil have alle link til at være røde, så kan du nøjes med at style på “a”:

Et link har som det absolut eneste tag forskellige tilstande: De 4 tilstande kan man style individuelt. De 4 tilstande er:

TILSTAND	FORKLARING
a:link	Et almindeligt, “ubesøgt” link
a:visited	Et link, som brugeren har klikket på, dvs. et “besøgt” link
a:hover	“Hover” = svæve. Et link som musen “svæver” over
a:active	Et aktivt link. Hvis du er på siden “Om os”, så kan linket “Om os” styles særskildt

Vi skal altså style de 4 tilstande hver for sig. Det er meget brugt, det er jo meget rart at et link reagerer, når vi ruller/svæver musen hen over et det. Her er nogle kodeeksempler fra siden https://www.w3schools.com/css/tryit.asp?filename=trycss_link. Bemærk: Du skal altid bruge rækkefølgen her, når du styler:

link
active
hover
visited

En lille bemærkning. Hvis du ikke har lyst til, at dit link skal være understreget, så kan du bruge egenskaben text-decoration. Her er der understregning ved hover og ved besøgte links. Det vil sige, at når musen ruller over linket, så kommer der en understregning.

Link til toppen af siden.

Kapitel 7. SEO/søgemaskine optimering

SEO betyder Search Engine Optimazion eller søgemaskine optimering. Den består af 2 dele

Passiv optimering. Hvis man følger bestemte regler, så kommer man højere i søgemaskinerne
Aktiv optimering. Når du aktivt går ind og betaler for, at du kommer højere i søgemaskinerne. Man køber såkaldte ad-words hos Google

Vi skal i kapitlet her kun kikke på passiv optimering.

Personligt har jeg en bekendt, som havde en lille hjemmeside med en super god adresse. Her solgte han små spil for måske 50 kr pr spil, og han solgte højest for måske for kr. 2.000 om året. Han blev kontaktet af en virksomhed, der udbyder online spil. Han endte med at sælge sit domænenavn for ca. kr. 300.000. Så meget kan de bedste adresser på internettet være værd.

Folk betaler enorme summer for annoncering hos Google. Google sælger ord som f.eks. “Charterferie” som ad-word på auktion. Den, som betaler mest, ligger øverst. Man betaler pr klik. I 2019 omsatte Google for ca. 135 mia dollars. De dyreste adwords i Danmark er Online casino. Google tjener 320 kr. hvis du klikker på den øverste annonce i søgningen. Hvis du har en webshop, kan du roligt regne med, at 5 – 10% af din omsætning ryger lige i Googles lommer.

Google har med andre ord en enorm magt på nettet. Alle bejler til Google- prinsessen lige som i historien om “Klodshans”. Allerede nu skal du lære lidt om, hvordan du kan optimere din hjemmeside til “Google prinsessen”, som jeg kalder hende.

Google prinsessens slot/Googles nye hovedkvarter i Californien

Et par regler, som du allerede nu skal kende og overholde

Hav en <title> på din hjemmeside
Hav 1 og kun 1 <h1> tag
Hav orden på indholdet i både <head> og <body> tagget
Brug “alt” tagget til billederne
Google Prinsessen hader gentagelser. Kopier aldrig en side helt og holdent, hun ser det øjeblikkeligt og du ryger nederst i søgemaskinen

Link til toppen af siden.

7.1 SEO med meta tags

Vi bruger meta tags til overordnede ting på hjemmesiden, og de er altid placeret i <head> sektionen.

Du kender tagget <meta charset=”UTF-8″>, som sikrer, at vi kan skrive æ, ø og å. Du skal skal lære 3 meta tags mere, som vi bruger til at gøre Google Prinsessen og andre søgemaskiner glade.

TAG	FORKLARING	W3SCHOOLS HENVISNING
DESCRIPTION	Skriv her en beskrivelse af siden. Skriv lige så meget du vil, men skriv det vigtigste først, for folk læser kun det første. Genbrug aldrig din beskrivelse, Google Prinsessen hader gentagelser.	w3schools.com/tags/tag_meta.asp
KEYWORDS	Skriv de ord, som du gerne vil findes på. Sydfyn, weekendophold osv. Bemærk, at der står både “Fåborg” og “Faaborg”. Tag forskellige stavemåder med herunder, hvis folk ofte staver ordet forkert. Du må skrive lige så mange ord, du vil, men gentag ikke sid selv helt og holdent.	w3schools.com/tags/tag_meta.asp
AUTHOR	Udelukkende til brug for egoet. Det ser da fedt ud, når Google Prinsessen finder dit navn på nettet på en hjemmeside	w3schools.com/tags/tag_meta.asp

Meta tags til ære for Google Prinsessen

Nedenfor har jeg søgt på “Sydfyn”. Det, der kommer frem, er noget der er placeret i hjemmesidernes metatags.

Link til toppen af siden.

7.2 Opsummering på SEO

Meta koder er meget simple, men de skal være i orden på alle dine HTML sider. Ellers kommer du bagerst i køen af de mange bejlere, som Google Prinsessen har.

Til inspiration. Michael fra firmaet Become laver gratis webinarer, bl.a. om Google og Facebook Ads. Her er et link til et gratis webinar om SEO: https://www.become.dk/webinarer/webinar-seo-hvilke-10-on-page-faktorer-er-vigtigst-at-fokusere-paaa-netop-nu/

Kapitel 8. <div> tagget og dets muligheder

Du er nu igennem grunddelen af frontend kodning. Du ved, hvad HTML og CSS er, og hvordan de arbejder sammen.

Du har tidligere mødt <div> tagget kort i afsnit 6.9 Boxmodellen. <div>-tagget er som sagt “bare” en tomkasse, som man så hælder indhold i. Præcis som du allerede nu har prøvet at hælde indhold i tabeller.

Der, hvor det bliver kompliceret, er at man kan gøre enormt meget med CSS i forhold til <div> tagget. Så meget, så næsten alle professionelle hjemmesider er bygget op af et kompliceret system af <div> tags ofte inden i hinanden. I kapitlet lærer jeg dig at forstå <div> tagget helt fra bunden.

8.1 Selve <div> tagget

Lad os se på, hvad W3schools fortæller om <div> tagget på https://www.w3schools.com/tags/tag_div.ASP:

<div> tagget er et bloktag. Dvs. at der som udgangspunkt er et linjeskift efter tagget. Lige som f.eks. <p>, <h1> m.fl.
<div> tagget bruges som en kasse eller beholder, som man så lægger indhold ind i
Der er rigtigt mange muligheder for at style <div> tagget. Ikke mindst i forhold til, hvis indholdet skal kunne flytte sig i forhold til hinanden. F.eks. så indholdet ser pænt ud på både brede og smalle skærme. Smartphones har smalle skærme

Her er et eksempel fra https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test. Div-tagget ser du til venstre. Man kommer så indhold i <div> tagget og styler der.

Link til toppen af siden.

8.2 Blok og inline elementer samt <div> og <span>

Et blok-element laver et linjeskifte, når man afslutter det. <div> er et blok kelement. <h1>, <p> m.fl. er også blok elementer

Et inline element laver ingen linjeskifte. <a hrer …> og <img> er eksempler på inline elementer. Modstykket til <div> er <span>. Se nedenstående eksempel.

I næste afsnit kikker vi på, hvordan vi kan vise og skjule inline elementer.

Link til toppen af siden.

8.3 Egenskaben display

Med CSS kan selv bestemme, om et element skal vises, skjules, være et blok- eller et inline element. Jeg har lavet en klasse, der kan skjule klassens element.

Resultatet bliver:

Hvis et <div> element er skjult, så kan man give det egenskaben block. Dvs. display: block i stedet for display: none;. Der findes en lang række øvrige display-egenskaber, f.eks. display: inline. Læs mere på https://www.w3schools.com/css/css_display_visibility.asp

Link til toppen af siden.

8.4 Egenskaberne width og height

Du kan arbejde med størrelsen af dit <div> tag på flere måder. Du kender allerede box modellen, hvor du kan arbejde med margin, border og padding, se afsnit 6.5 Boxmodellen.

Her skal vi kikke på forskellige måder at bestemme bredde og højde af et <div> tag på. Bemærk: Man kan gøre det samme for andre tags, f.eks. <h1>, men du kommer til at bruge det mest ved div-tags. Groft sagt er der 4 måder:

Absolut bredde eller højde, typisk angivet i pixels
Relativ bredde eller højde. Angives i procent
Automatisk bredde eller højde. Rigtig god, hvis f.eks. noget skal kunne skalere alt efter skærmens størrelse
Nedarvning

Inden du går i gang: Jeg opfordrer dig til at se at prøve selv hos W3schools: https://www.w3schools.com/css/css_dimension.asp. Nogle af tingene kan du kun se, hvis du ændrer browservinduets størrelse.

Eksempel 1. Absolut højde og relativ bredde

I CSS’en sætter jeg width til 50% og height til 200px. Højden vil altid være 200px, men bredden vil være 50% af det tag, som <div> tagget befinder sig inden i. Bredden er relativ, den kan tilpasse sig.

Eksempel 2. Max-width

Hvis du bruger egenskaben max-width, f.eks. max-width: 500px så opnår du 2 ting.

Hvis der er mere end 500px plads til elementet, så vil elementet stadig kun være 500px bredt
Hvis der er mindre end 500px plads til elementet, så vil elementet tilpasse sig

Eksempel 3. En wrapper med egenskaben auto

Tro det eller lad være, “auto” er faktisk en ret stærk egenskab. Jeg skal give dig et eksempel. Du finder ikke eksemplet hos W3schools. Jeg bruger det til 2 ting. Dels hvis jeg vil have, at et indsat billede skal skalere efter skærmstørrelsen. Så sætter jeg width og height på <img> til auto.

Jeg bruger det også til at lave en “wrapper”. En “wrapper” er normalt noget, der får de fleste til at tænke på mexicansk mad. Man har noget mad: Salat, kød, alt muligt, som man pakker ind i en pandekage. Helt lige som en rullekebab.

En lækker wrapper eller måske snarere en rullekebab

Vi bruger en wrapper til at pakke alt vores kode ind i. Hvis jeg nu pakker lidt kode ind i en <div>, så kan jeg få mit <div> tag til at stå midt på siden altid. Se koden her:

Max-width sørger for, at <div> maksimalt er 500px bred. For smalt til en normal hjemmeside, men fint til eksemplet
Margin-left og margin-right er sat til auto. Det betyder, at den selv finder ud af bredden. Det betyder dog også, at de 2 marginer altid er lige store. På den måde holder <div> tagget sig “svømmende” lige midt på siden. Alt det kode, der er “wrappet” ind i <div> tagget vil følge med, som passagerer på en båd

Det ser sådan ud:

Link til toppen af siden.

8.5 Egenskaben position

Man kan få bøger til små børn, som er dynamiske. De kan løfte en klap, og så gemmer der sig noget bag klappen. Ser man bort fra det, er bøger statiske. Apps og hjemmeside er dynamiske. Med egenskaben “position” kan man f.eks. beslutte, at uanset hvor langt ned brugeren scroller, så er menuen altid i toppen.

Eksemplerne her er (naturligvis) hentet hos W3schools på https://www.w3schools.com/css/css_positioning.asp. Jeg opfordrer dig til selv at prøve det af, W3schools tillader desværre ikke, at jeg indlejrer deres sider i en <iframe>

EGENSKAB OG VÆRDI	FORKLARING
position: static;	Standard egenskab. Flytter sig “bare” med resten af elementerne
position: relative;	Hvis du sætter margin-left til f.eks. 30px, så flytter den sig 30px i forhold til det forrige element
positon: fixed;	Bliver altid på det samme sted, selvom der scrolles
position: sticky:	Er relativ indtil man skroller forbi det. Når man først er forbi, så bliver det hængende

Link til toppen af siden.

8.6 Float

Du kan selv bestemme, om dit blok element skal starte til venstre, til højre eller midt i. Du kan give det egenskaben “float”.

Float har 3 muligheder: left, right og middle. I eksemplet nedenfor har jeg sat billedet, dvs. <img> til float: right. BIlledet placerer sig så til højre, og så må resten af teksten pænt placere sig i det resterende rum. Læs mere på https://www.w3schools.com/css/css_float.asp

Link til toppen af siden.

8.7 Menuer med <div>, lister og CSS

Lad os prøve at sætte tingene sammen. Jeg har fundet et rigtigt godt eksempel hos W3schools, som jeg vil gennemgå med dig. Du finder eksemplet på https://www.w3schools.com/css/css_navbar.asp. Her er noget af det, jeg vil lære dig:

Jeg vil gennemgå eksemplet, som du finder det hos W3schools.

En menu = en liste

En navigationsbar laves bedst og nemmest som en liste, så jeg starter med at lave en liste med links:

Så styler jeg listen, så jeg fjerner prikkerne og margen/padding. Se afsnit 6.5 Box modellen, hvis du er i tvivl om margin og padding.

Lodret navigations bar

Lister er som udgangspunkt lodrette, så det er nemmest at lave en lodret menu. Sæt <a> elementerne til at være blokelementer og giv dem en fast bredde:

Så har du en menustruktur. Ikke køn, men det skal den nok blive:

Vi kan gøre den mere lækker. F.eks. så menupunktet får en anden farve, når vi ruller musen over:

Det gør vi ved at style på li a:hover. “hover” betyder at svæve, og det er tilstanden på et link, når musen “svæver” over det. Se evt. https://www.w3schools.com/css/css_link.asp for at vide, hvordan du styler link.

Hvis du oven i købet tilføjer en klasse li a:active, så kan den vise en særlig farve på det aktive link. Dvs. linket til den side, du er på:

Det ser sådan ud: Vi er på siden “Home” og Aruller musen over siden “Contact”.

Vandret menu

Når du først er igennem en lodret menu, så er det nemt at lave en vandret menu. Som standard er <li> elementet, som du laver lister med, et blokelement. Dvs. den skifter linje. Hvis vi nu i stedet laver det til et inline-element, så vil den ikke skifte linje. Såre simpelt:

Resultatet bliver noget i den stil her:

Du kan få det sidste element til at være ude til højre på menu baren, hvis du bruger “float: right”.

Link til toppen af siden.

8.8 En menu med dropdown

W3schools har et super eksempel, hvor man kan lære at lave dropdowns eller fald-ned menuer. Du kender dem allerede f.eks. fra hjemmesiden her. I det mest simple eksempel her ruller man bare musen over teksten “Mouse over me” og så kommer der en menu frem, “Hello World”.

Hvordan gør vi så det?

Selve den menu, der kommer frem som en fald-ned menu, er et <div> tag med noget indhold
<div> tagget er skjult (display: none, se afsnit 8.3 Egenskaben display, men når man ruller musen over linket (egenskaben “hover”, så ændres den til display: block;
<div> tagget med undermenuen skal placeres i forhold til tagget, som det er pakket ind i. Derfor får det position: relative;
<div> tagget får en egenskab “z-position”. Det betyder, at den ligger i et lag for sig selv, helt lige som da du arbejdede med lag i billedbehandling. Så kan den ikke påvirke de andre elementer
Lidt udseende: Skyggen på dropdown-menuen er lavet med box-shadow.

Alt i alt ser det ud som vist neden for. Du kan nærstudere koden på https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_text. Hele samlingen af fald-ned menuer finder du på https://www.w3schools.com/css/css_dropdowns.asp. Der er rigtigt mange flotte eksempler imellem. En lille bemærkning. Hvis du synes, at det er lidt overvældende med alt det CSS, så kan du overveje at placere det i et stylesheet for sig. Det stylesheet handler så kun om menuen.

Link til toppen af siden.

Kapitel 9. Semantiske tags og responsive koder

Et semantisk tag er som tidligere nævnt et tag, der “bare” bruges til at skabe orden. Du kender allerede <head> og <body>, men i kapitlet her skal du lære nogle flere.

Du skal også lære, hvordan man kan style et tag på flere forskellige måder, alt efter skærmens bredde. Ham her har orden på sine tags 🙂

Link til toppen af siden.

9.1 <div> tagget som semantisk tag

Et segmantisk tag er et tag, som vi bruger lidt som en slags “skelet”. Tags som <head> og <body> har ikke noget indhold i sig selv, men de holder godt styr på vores kode.

For en del år siden begyndte man for alvor at få øjnene op for <div> tagget. Man havde indtil da brugt frames (en slags udskiftelig tabel). Frames gav dog nogle problemer mht. SEO, og frames kunne ikke håndtere, at man begyndte at stille krav til, at f.eks. en app eller en hjemmeside skal kunne tilpasse sig forskellige skærme. Det var på det tidspunkt, at <div> tagget blev vores vigtigste “legoklods” til at bygge vores struktur med.

I HTML5, den nyeste version af HTML, har man derfor fået nogle <div> tags med særlige navne som f.eks. <header> til hovedet, ikke at forveksle med <head>. <nav> til navigationsområdet, <footer> til footeren osv. Alle er de kun <div> tags, men de gør det nemmere at gennemskue, hvad de enkelte <div> tags bruges til.

Sidst i kapitlet viser jeg dig et større eksempel på, hvordan man kan bruge de semantiske tags.

Link til toppen af siden.

9.2 Hvorfor bruger vi ikke bare tabeller i stedet for <div>

Når du koder dine første sider, vil indholdet stå under hinanden. Det er sjovt i starten, men det holder ikke i længden. Der skal mere til. Du har så lært at styre indholdets placering nogenlunde vha. tabeller. Du kan også styre placering af indholdet i tabellen vha. box modellen. En tabel kan endda tilpasse sig og blive bred på brede skærme og smal på smalle. Så langt, så godt.

Der er bare et par problem: Du kan ikke styre højden på de enkelte celler i tabellen. Du kan heller ikke få en tabel med 2 rækker og 3 søjler på en bred skærm til at blive til en tabel med 3 rækker og kun 2 søjler på en lidt smallere skærm. Måske endda 6 rækker og 1 søjle, hvis du arbejder med en virkelig smal skærm som f.eks. en smartphone.

Link til toppen af siden.

9.3 Hvad er responsivt design

Hvad er responsivt design, kan du med god ret spørge. “Responding” er noget med at svare, og et responsivt design kan ændre sig alt efter sidens bredde. Der er forskel på, hvilket design der gør sig på en hjemmeside, og hvilket design der gør sig på en bærbar computer. Her er W3schools måde at vise det på. Bemærk, at de samme elementer vises forskelligt alt efter skærmen. https://www.w3schools.com/css/css_rwd_intro.asp

Her kan du se den mest populære hjemmeside i Danmark, www.dr.dr i både almindelig (bredt) format og smalt (smartphone) format. Bemærk, at man i det smalle format ofte reducerer menuen til en knap “burger”, hvor menuen så folder sig ud. Du ser brugeren øverst til venstre i det smalle format

Her er en video om responsiv design. Tag dig ikke af, at jeg præsenterer lidt kode også, jeg skal nok forklare dig det grundigt i de næste afsnit.

Du kender faktisk allerede til responsiv kode. Hvis vi f.eks. har et <div> tag, hvor vi sætter width til 50%, så vil den fylde 50% i bredden af det tag, den ligger inden i. Det gælder, uanset hvilken skærmbredde <div> tagget vises på. Repeter evt. afsnit 8.4 Egenskaberne width og height.

Link til toppen af siden.

9.4 Start med meta tagget “viewport”

Bemærk: For afsnit 9.4 til og med afsnit MANGLER gælder det, at du kan læse mere på https://www.w3schools.com/html/html_responsive.asp.

Gør det til en god vane altid at sætte meta tagget “viewport” ind. Det ser sådan ud, og tagget skal placeres sammen med eventuelle andre meta-tags i <head> sektionen. Tagget sikrer, at browseren er opmærksom på evt. re-skalering af siden.

Se eventuelt koden her: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_viewport

Link til toppen af siden.

9.5 Responsive billeder

I forhold til billeder er det ikke specielt svært at lave CSS til billederne, så de kan skalere op eller ned alt efter, hvilken skærmbredde billedet vises på.

Bemærk, at hvis du har små billeder, så får du måske brug for at sætte max-width til billedets naturlige bredde. Et billede, der kun er 50px bredt, har ikke godt af at blive skaleret op til 5 – 600 px. Her er et billede, der er skaleret for højt op. Bemærk at der opstår noget “sløring” (“blur” på engelsek), du ser det mest tydeligt omkring facebook-bogstaverne.

Se koden i praksis her: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_image_maxwidth

Link til toppen af siden.

9.6 “Rigtig” responsiv kode med media quiry

Når vi for alvor vil kunne tilpasse sidens elementer til en forskellig sidebredde, så får vi brug for koden @media quiry.

Lad os starte med noget helt almindelig kode. Jeg sætter baggrundsfarven til grøn for <body> i eksemplet her. Det er der intet nyt i.

Det nye er, at jeg vil sætte en kode ind, der kan ændre sidens udseende, hvis skærmbredden kommer under 600px.

Jeg sætter koden ind ved siden af stedet, hvor jeg farver baggrunden grøn. Nu bliver baggrunden så blå, når skærmbredden bliver mindre end 600px. W3schools er så venlige at skrive bredden på testvinduet øverst til højre. Du kan selv prøve på https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery. Jeg er nødt til at bruge media quiry på de fleste tags, som jeg ønsker skal være responsive. Typisk <div> tags og semantiske tags.

Når vi har et punkt, hvor noget skal være anderledes på hver side, så kalder man det et breakpoint. De 600px er et breakpoint. Man kan sagtens lave flere breakpointer, det er helt op til, hvad man har brug for.

Link til toppen af siden.

9.7 Responsivt layout med semantiske tags

Eksemplet her er fra https://www.w3schools.com/html/html_layout.asp.

Lad os starte med det færdige resultat: En side, der ser sådan ud:

Semantiskte tags

Hvis vi kun kikker på layoutet, så er det lavet af <div> tags. For at gøre det nemmere for udviklerne at gennemskue layoutet, så erstatter vi navnene på <div> tags’ne med semantiske tags. Det ser sådan ud:

Øverst er overskriften pakket ind i tagget <header>
Miderst er hele området pakket ind i et <secion> tag
- Til venstre er navigationen, den ligger i et <nav> tag
- Til højre brødteksten som ligger i et <article> tag
Nederst er footer området logisk nok pakket ind i et <footer> tag

Vi kunne lige så godt bruge <div> tags til det hele. Men med semantiske tags opnår vi et bedre overblik.

Responsivt layout

Der er 2 layouts på eksemplel

Layout med semantiske tags og responsivt design

På en smal skærm vil både navigationen <nav> og brødteksten <article> flyde hele bredden. Alt sammen kun vha. CSS.

Koden bagved

Default (= standard) bredden på <header> og <footer> er 100%, så de vil bare tilpasse sig siden.

Både <nav> og <article> ligger inde i tagget <setction>. Vi sætter <nav> til en bredde på 30% og <article> til en bredde på 70%. Vi sætter også egenskaben float: left; på. Det sikrer, at de placerer sig længst muligt til venstre. <nav> placerer sig helt til venstre, <article> prøver, men da de begge ligger inde i tagget <section>, så kan den kun komme så langt til venstre, som <nav> tillader det. <nav> er forrest i køen <article> nr 2.

Til sidst den responsive del. Meget enkelt: Når bredden er 600px eller mindre, så skal bredden på både <nav> og <article> være 100%. Bemærk, at height sættes til auto. Sværere er det ikke :-).

Link til toppen af siden.

9.8 Lav responsive kolonner

I afsnittet her gennemgår jeg pluk fra https://www.w3schools.com/css/css_website_layout.asp.

Det er almindeligt, at hjemmesider bruger kolonner. Her er et par eksempler. Bemærk, at 1-kolonne modellen typisk bruges på smalle skærme (smartphones), mens 2 og især 3 eller flere kolonner bruges på brede skærme

I eksemplet viser W3 schools, hvordan man kan lave et 3-kolonne design, som bliver til 1 kolonne på en smallere skærm. Kasserne med indhold i er naturligvis enten <div> tags eller semantiske tags som f.eks. <header>, <footer> o. lign. Den interessante del af CSS koden er:

Forklaring til koden:

Del 1. /*Create three equal … De enkelte kolonner (hvor der er 3) har width:33,3% og float: left;
Del 2. /*Clear floats after the columns */. De 3 kolonner er pakket ind i et <div> tag. Koden sørger for, at der ikke er andet end de 3 elemener inden i <div> tagget, der kan “floate”
Del 3. /*Responsive layout … Koden sørger for, at de 3 kolonner fylder skærmen 100% frem for 33,3%, hvis skærmbredden er under 600px.

Resultatet ser sådan ud. Se det selv efter på https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_grid

Link til toppen af siden.

9.9 Videre med responsivt layout

Design for mobile first

Mange mener, at hvis man skal designe et layout til flere typer skærme, så skal man starte med mobil layoutet. Jeg ved ikke, om jeg personlig er helt enig. Det kan i hvert fald være en idé ud fra tanken om, at mobil layoutet er det mest enkle layout.

Grid, templates og andet guf hos W3schools

Selvom du allerede kender alt det essentielle og mere til, så vil jeg nævne, at W3schools har dedikeret et helt afsnit til at gå i dybden med responsivt layout. Du finder afsnittet her: https://www.w3schools.com/css/css_rwd_intro.asp.

Du kan lære om grid og der er skabeloner. Grid er et forsøg på at lave en tabel ud over skrærmen, så man kan hæfte f.eks. et <div> tag til at dække måske alle celler i øverste række på en smal skærm, men kun 6 celler på en bred skærm. Man arbejder typisk med 12 celler i en række. Desværre er det aldrig helt slået igennem, især fordi ældre browsere har problemer med at vise grids.

W3schools har en lang række flotte skabeloner, som du kan bruge kvit og frit. Se https://www.w3schools.com/css/css_rwd_templates.asp. Der er dog et lille aber dabei, og det er, at W3schools bruger frameworks eller libraries.

Frameworks eller libraries er kort fortalt, at vi tilknytter et ekstra eksternt stylesheet, som er lavet på forhånd. Det kan give os mange ekstra milughederMere om det i næste kapitel.

Link til toppen af siden.

Kapitel 10. Kodebegreber

Vi skal snart til at arbejde med dynamiske sprog. Med ordet “dynamisk” mener jeg, at det kan levere forskellig output alt afhængig af input. Hvis klokken er mellem kl. 7 og 12, kan JavaScript skrive “godmorgen”. Mellem 12 og 18 kan det skrive “god dag” eller “god eftermiddag” osv. Hverken HTML eller CSS er dynamiske sprog, de er begge beskrivende sprog. Næsten alle andre sprog: PHP, javaScript, java, C#, SQL er dynamiske sprog. I næste kapitel starter vi på javaScript, og du vil senere lære om PHP og SQL.

I dette kapitel skal du lære at genkende nogle kodebegreber, som optræder i næsten alle kodesprog. Man har begreber som variable, forgrening og betingelser, loops mv. i næsten alle kodesprog. Det svarer fuldstændigt til, at man har navneord, udsagnsord, tillægsord mv. i næsten alle talte sprog som f.eks. dansk, engelsk, tysk, spansk osv.

Du skal kunne følgende udtryk:

UDTRYK	KORT FORKLARING
Variabel	En beholder, der kan rumme 1 og kun 1 værdi. Til gengæld kan du skifte indholdet lige så tit, du vil
Sekvens	Indholdet er ikke så vigtigt, det vigtige er, at koden afvikles i en bestemt rækkefølge
Forgrening og betingelse	Hvis en betingelse er opfyldt, så gør en ting. Ellers gør noget andet. Det er altid en hvis-sætning i koden. På engelsk kalder man det en if-then-else sætning
Arrays og loops	Et array er en række af variable. Et loop er en handling, der udføres igen og igen, indtil man er færdig
Funktioner	En stik-i-rend dreng, som man kan kode til at gøre alt muligt
Events og funktioner	En event er den begivenhed, der sætter funktionen i gang. F.eks. et klik på en knap
Kommentarer	Mennesketekst inde i koden. Kommentarer påvirker ikke resten af koden.

Overblik over kodebegreber, som du skal kunne

Video med overblik over kodebegreberne:

Link til toppen af siden.

10.1 Variable

Lær det her: “En variabel er en beholder, der kan rumme 1 og kun 1 værdi”. Til gengæld kan den skiftes ud lige så tit, man vil. Her er et par eksempler:

Highscore i et spil
Antal liv i et spil
Din alder. Den bliver opdateret hvert år på din fødselsdag
Målscore, tid, alt muligt inden for sportens verden
Priser
… osv. osv.

Her er der masser af variable. DeHviii er foran med 2 – 0 mod Brøndby foran på et ret tavst Brøndby Stadion. Vi har brug for 2 variable: 1 til AGF’s målscore og 1 til Brøndbys. For AGF’s vedkommende har vi allerede ændret variablens indhold 2 gange. Vi har også brug for en variabel til tiden. I øvrigt ender kampen 3 – 0 til DeHviii. Det var en smuk dag den 25. august 2019 :-).

DeHviiii på vej mod deres 3. mål mod Brøndby

Video om variable

I AppLab definerer vi en variabel ved at skrive “var” + et navn. Vi sætter den gerne lig værdien af et indtastet felt.

Når først vi har defineret en variabel, kan vi bruge den overalt i vores program. Her er variablene vægt og højde defineret.

Link til toppen af siden.

10.2 Sekvens

En sekvens er en rækkefølge. Det er ikke så vigtigt, hvad sekvensen handler om. Det vigtige er rækkefølgen. Her er Gurli Gymnasieelevs rækkefølge, når hun står op om morgenen:

Slå vækkeuret fra
Gå ud på badeværelset
Jage lillesøster ud fra badeværelset, så hun kan få det for sig selv
Gå i bad
Spise morgenmad
Pakke skoletasken
Komme ud af døren
Nå bussen
Tjekke mobilen

Hvad nu, hvis Gurli gør tingene i en anden rækkefølge. Så går det galt!

Tjekke mobilen
Komme ud af døren
Spise morgenmad
Nå bussen
Jage lillesøster ud fra badeværelset, så hun kan få det for sig selv
Pakke skoletasken
Gå ud på badeværelset
Slå vækkeuret fra
Gå i bad

I kodning kan en sekvens bestå af alt mulig forskellig kode. Det skal bare gøres i den rigtige rækkefølge.

Et eksempel fra AppLab. Der er kun 3 kodelinjer i sekvensen her: De 2 lilla og den gule med setText. Men hvis vi byttede rundt på dem, ville det gå galt. Næsten alle programmer har sekvenser.

Link til toppen af siden.

10.3 Forgrening og betingelse

Forgrening og betingelse er det eneste sted i programmet, hvor man kan tage en beslutning. Hvis en betigelse er opfyldt, så gør …. Ellers gør sådan og sådan …

HVIS … SÅ …. ELLERS SÅ ….

I kodning bruger man en HVIS-sætning. På engelsk kaldes det en IF eller en IF-THEN-ELSE sætning. Et typisk eksempel kunne være, når man logger ind med brugernavn og adgangskode

Indtast dit brugernavn og adgangskode
HVIS (brugernavn og adgangskode er rigtige) SÅ (bliver du logget ind) ELLERS SÅ (prøv igen).

Her er en forklarende video om forgrening og betingelser.

I AppLab ser man if sætninger som blå kode. Her et eksempel, hvor der er hele 4 muligheder.

Link til toppen af siden.

10.4 Arrays og loops

Array betyder “række”. Det er en række fyldt med variable. Et eksempel: Hvis du vil have en elektronisk huskeseddel, så lav punkterne i et array i stedet for individuelle variable. Det gør det nemmere, når vi skal udskrive huskesedlen. Så vil programmet “loope” igennem huskesedlen og udskrive punkterne et for et, indtil alt er skrevet ud.

Du må gerne tænke på tivolier, når vi snakker loops. Folk står i arrays (rækker, dvs. køer) for at prøve loops. Man kan naturligvis have flere loops i et program lige som på billedet her:

“Dæmonen” i Tivoli i København har flere loops, og folk står i “arrays” for at prøve.

Video om loops og arrays.

I AppLab ser det ud som vist nedenfor.

Vi definere et array frem for en variabel ved at skrive en firkantet parentes bagefter som i linje 2.

var huskeseddel = [“müstli”, “mælk”, “rosiner”, “the”];

Her er arrayet allerede udfyldt med 4 variable: “müstli”, “mælk”, “rosiner” og “the”. I linje 3 har jeg en helt almindelig variabel var print = “”. Vi bruger kun firkantede parenteser, når vi laver et array og ikke en variabel.

Hvis vi skal loope, bruger vi en “for” løkke som vist med blå farve i linje 4 – 7. For-løkken løber arrayet huskeseddel igennem og skriver elementerne i arrayet “huskeseddel” til variablen print.

Resultatet af kodningen ovenfor. Hvis du vil se det selv, så åben linket her i AppLab: https://studio.code.org/projects/applab/D9eamV28solo71FdkIWpQ-0vKqE2HAVWw34ZCmIeAxo

Link til toppen af siden.

10.5 Funktioner

En funktion er en stik-i-rend dreng. Den kan udføre en handling, f. eks. lægge 2 og 2 sammen, lave en liste, alt muligt. Hvis vi nu siger, at vores stik-i-rend-dreng kan hente en appelsinvand, og han arbejder for Verdensfirmaet A/S. Hvis firmaet var et program, så ville vi have en funktion, som vi kunne kalde “Appelsinvand”. Så vil alle medarbejderne altid bare kunne kalde på “Appelsinvand”, og så kunne de få hentet en appelsinvand når som helst og hvor som helst. Alle dele i koden kan bruge en funktion.

I øvrigt er alt kode, undtagen kommentarer, er pakket ind i funktioner. -Funktioner kan sagtens bruge eller kalde andre funktioner.

I AppLap er alt kode som udgangspunkt “pakket ind” i en funktion. Den grønne klamme, som rummer hele sekvensen, er en funktion. Bemærk at vi kan give funktionen et navn. Normalt bruger vi bare navnet “event”, som AppLab automatisk giver os. Men vi kunne kalde den for “valutaomregner” og så kalde den fra andre funktioner.

Link til toppen af siden.

10.6 Funktioner og events

Hvis brugeren klikker på noget i en app, så kalder man det en “hændelse” eller et “event”. I spil kan event også være, at man skyder fjenden, dør eller bare styrer sin figur i spillet. Et event kalder en funktion. Funktionen indeholder så kode (variable, sekvenser, forgrening og betingelser mv.), som kan udføre den ønskede handling.

En event er, når der “sker noget” i et spil eller en app. Her den kode, der skal afvikles, når eventen “Klik på button1” er sket. Bemærk at eventen kalder en funktion.

Link til toppen af siden.

10.7 Kommentarer

Kommentarer er mennesketekst, som man sætter ind i koden. Typisk bruger man det til at forklare, hvad der sker i koden. Hvis nu du selv kommer tilbage til din kode efter et par måneder, eller at andre skal forstå din kode, så er kommentarer nyttige.

I virksomheder, hvor de lever af at kode, har de strenge regler for, hvordan man laver kommentarer. Det gør, at programmørerne lettere kan forstå, hvad andre koder.

Her er en kommentar i AppLab. Den er med grå farve

Link til toppen af siden.

10.8 Sådan arbejder frontend og backend sammen i AppLap

Når du skaber kode i AppLap, følger vi næsten altid det samme mønster.

Vi starter med at oprette en begivenhed
Begivenheden opretter en funktion
Inden i funktion gør vi 3 ting
- Henter data fra indtastningsfelter ind i variable
- Beregner
- Returnerer resultatet til backend

Link til toppen af siden.

Kapitel 11. JavaScript

JavaScript er det eneste dynamiske sprog, som vi kan bruge i frontend. Det betyder i praksis, at browserne kan forstå JavaScript uden videre. Man kalder et client-side sprog, når browseren selv kan tolke det. Så siger du måske: “Jamen, vi kan da også bruge andre dynamiske sprog, f.eks. C#, PHP, Phyton, SQL osv.” Helt rigtigt, men hvis en browser skal forstå disse sprog, så skal browseren have hjælp fra en server. Hvis man har en server til at understøtte et sprog, kan man i princippet bruge hvilket som helst sprog.

At de andre sprog skal have en “støttepædagog” lyder måske også mærkeligt, men det giver god mening. Hvis et sprog er installeret på en server, kan vi skjule sproget for brugeren og gøre livet besværligt for hackeren. Den stiblede linje i figuren angiver, at vi ikke vil have brugerne til at se sproget i hverken backend eller se vores database. Til gengæld er frontend koden “pivåben”. Alle kan – og må – se det, og du må endda se andres kode og kopiere den. Du må dog ikke lave f.eks. en kopi af Nordeas hjemmeside. Der er copyrights på billederne, men ikke på koden.

I teorien kan vi godt bruge noget JavaScript frontend, som brugeren kan se. Samtidig bruger vi noget JavaScript installeret på en server til f.eks. backend, det kan brugeren så ikke se. Se faktaboksen herunder.

Faktaboks. JavaScript: Fra uinteressant og besværlig tiil full-stack stjerne

JavaScript bruger vi til frontend, og du skal nok få lov til at stifte nærmere bekendskab med JavaScript i senere kapitler.

JavaScript er et ok sprog og det kan bruges, men det er ikke fantastisk skruet sammen og det var ikke specielt velanskrevet. På et tidspunkt kom der dog fart i tingene. Engang brugte man Flash til animationer på hjemmesider, men så nægtede Steve Jobs at vise Flash i Iphones. Herefter afgik Flash ved døden. I stedet udviklede nogen JQuery. JQuery er en afart af JavaScript bare uendeligt meget nemmere at arbejde med især inden for animation. Så kom JSon, som også er JavaScript, men som er en database.

Så fandt frontend udviklerne ud af, at man jo lige så godt kunne bruge JavaScript backend også. Pludselig kan man så bruge JavaScript til både frontend, backend og databaser. Slut med at skulle lære både et backend sprog og i mange tilfælde også SQL, nu kan man nøjes med et sprog hele vejen igennem.

Når man bruger JavaScript “hele vejen igennem”, så kalder man det for “full stack”.

Når unge snakker om K-pop så snakker udviklere om J-sprog 🙂

Noget af det mest brugte ved javaScript er:

Validering af input, typisk fra en formular
Skift af indhold på en hjemmeside
Automatisk udfyldning
Gadgets, f.eks. billedfremvisere
Animationer …
… og meget mere

JavaScripts indplacering i den store kodesammenhæng:

Link til toppen af siden.

11.1 Du koder allerede i javaScript

I øvelserne til kapitel 10 har du arbejdet med AppLap og bl.a. lavet en lille valutaomregner. Hvis ikke, så kan du hente den ned i AppLap fra https://studio.code.org/projects/applab/a442pnfYvVx8okKSET01IFFxFgppIs5zdaAfIqvscgM, hvis du har lyst og tage en kopi. Projektet ser sådan her ud i AppLap.

Det, du ser til venstre, er HTML stylet med CSS. Det, su ser helt til højre, er javaScript

Lad os kikke lidt nærmere på javaScriptet, også selvom det er grafiske blokke og ikke håndskrevet kode. Det ser sådan ud i stor forstørrelse:

Linje 1 er en event, som udløses af et klik på knappen “button1”. Button1 er en knap i HTML med id’et “button1”
I linje 2 opretter vi en variabel, der hedder “kroner”. Vi indsætter indholdet af tekstboksen med id’et “text_kroner” i variablen
I linje 3 opretter jeg en ny variabel, euro. Jeg sætter variablen euro lig med variablen “kroner” gange med 8. Se venligst bort fra, at kursern nærmere er 7,45 🙂
I linje 4 returnerer jeg værdien af variablen “euro” til frontend, nærmere bestemt til en boks med ID’et “text_euro”

Bemærk: Hvis du ikke kan huske, hvad et “id” er, så repeter afsnit 6.6 Klasser og id.

Se javaScriptet i AppLab

Når du arbejder i AppLab, så danner du automatisk javaScript kode. Du kan se javaScriptet bag, og det vil vi gøre nu. Inde i AppLab klik på knappen Vis tekst ude til højre:

Så ser du javaScriptet til højre i AppLab.

Forstå javaScript

I billedet herunder har jeg sat den visuelle udgave af javaScriptet fra sidste afsnit overfor den rene kode:

JavaScript kan styre forskellige begivenheder. F.eks. hvis man ruller musen over noget, hvis man klikker på noget eller hvis man skriver i et felt i forhold til validering.

I linje 1 bruger AppLab kommandoen OnEvent. “Button1” er knappens id.
Klikket udløser en funktion som er de kommandoer, du ser i linje 2, 3 og 4. Hele funktionen OnEvent er pakket ind i en krøllet parantes { }, sådan gør man i javaScript
I linje 2 definere man en variabel, var kroner. getText(“text_kroner”) er lidt snyd. AppLap har lavet sin egen funktion. Det samme gælder setText i linje 4.
I linje 3 defineres variablen euro til variablen kroner divideret med 8
Bemærk, at man i javaScript altid afslutter en sætning med et semikolon “;”

Link til toppen af siden.

11.2 Hvor skriver vi javaScript

På samme måde som CSS kan man flette javaScript ind i sit HTML. Der gælder dog lidt andre regler end med CSS..

Ofte placerer vi javaScript mellem 2 tags, sådan her <style> … javaScript </styles>. Dette tag kan man placere både i <head> og i <body> området. Det er praktisk til testformål
Vi kan placere det i forbindelse med en knap. F.eks. skrive noget ved knappen og resten et andet sted
Vi kan have eksterne javaScript tilknyttet præcis som vi har eksterne CSS stylesheets. En javaScript fil ender på .js

Vi bruger gerne de 2 første, hvis vi skal teste småting af eller lave små javaScript. Ellers bruger vi så vidt muligt et eksternt javaScript pga. separation of concerns princippet. Her er et par eksempler fra W3schools, hvor ellers :-). https://www.w3schools.com/js/js_whereto.asp

JavaScript mellem <script> tags

Eksemplet er fra https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto. Eksemplet kan sætte tekst ind i et ellers tomt tag.

JavaScript i <head>

En yndet metode er at skille javaScriptet lidt ad. Her er et eksempel, hvor javaScriptets funktion er placeret i <head>. Funktionen kan skrive noget inde i tagget med id=. Når jeg så klikker på knappen, så aktiveres funktionen. Prøv det selv på https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_head.

Vigtigt: Du kunne mindst lige så godt have placeret funktionen inklusive tagget <script> under tagget <body>, f.eks. nederst. Se nederst i afsnittet for en forklaring.

Eksternt javaScript

Præcis som med CSS kan man placere koden i et eksternt stylesheet. Hos W3schools ser det sådan ud. Du kan se eksemplet på https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_external

Bemærk at referencen hedder

<script src="myScript.js"></script>

I modsætning tilCSS kan referencen til scriptet ligge både i <head> og i <body>.

Link til toppen af siden.

11.3 Gode råd omkring placering af javaScriptet i din kode

Det er ikke ligegyldigt, hvor du placerer dit script. Det tager tid at downloade især lidt større script. Derfor:

Placer gerne så meget script som overhovedet muligt i eksterne javaScript filer. Lige som med CSS. Det er udelukkende pga. hensyn til orden og vedligehold “separation of concerns”
Hvis du har brug for dit script INDEN siden vises, så læg referencen øverst på siden. Ellers vises siden ikke korrekt
Hvis du først har brug for dit script EFTER at siden er loadet, f.eks. hvis brugeren senere klikker på en knap, så læg referencen NEDERST på siden. Så loader siden hurtigere

Link til toppen af siden.

11.4 Hvad kan javaScript

Eksemplerne her er bearbejdede ud fra https://www.w3schools.com/js/js_intro.asp

Ændre indholdet af et <html> tag, f.eks. ændrer scriptet her indholdet af tagget med id’et “demo”. https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html

Skifte et billede ud med et andet, dvs. ændre attribut (egenskab). En attribut kan også være en CSS egenskab, se næste eksempel. I eksemplet kan man klikke på en knap og så skifter scriptet billededet til enten en slukket eller en tændt pære. https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

Du kan ændre CSS egenskaber, f.eks. øge en skriftstørrelse. https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_style

Du kan ændre CSS egenskaber. F.eks. skjule eller vise et element, som du har set det under afsnit 8.8 Drop-down menuer dvs. display: blog; og display: none; https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_hide

Link til toppen af siden.

11.5 Variabler, kommentarer og events

Variable og kommentarer

Se på nedenstående eksempel:

I den øverste sætning definerer vi variable. I nr. 2 sætning sætter vi en værdi på variablen og i den sidst lægger vi 2 tal sammen. I alle 3 findes der kommentarer til højre.

En kommentar på 1 linje = Skiv “//” foran kommentaren
En kommentar på flere linjer = Skriv “/*” i starten af kommentaren og det omvendte “*/” til sidst. Se evt. https://www.w3schools.com/js/js_comments.asp

Events

Du kender allerede kommandoen “onClick”. Man kan tilføje den til et HTML tag eller et billede, typisk en knap. Hvis brugeren så klikker på knappen, så sker der et event, eventen kalder en funktion, som så afvikles.

JavaScript har rigtigt mange forskellige events. Du kan se listen her: https://www.w3schools.com/js/js_events.asp

Link til toppen af siden.

11.6 En fald-ned menu, som åbner og lukker sig (toggle) ved et klik

Rigtigt mange hjemmesider/apps kan ses på mobilen, og de fleste benytter sig af en menu, der åbner og lukker sig ved et klik. Vi kalder det “toggle” i kodeverdenen. Eksemplet her finder du på: https://www.w3schools.com/howto/howto_js_dropdown.asp. W3schools eksempel ser sådan ud, når det er åbent:

Vi lægger ud med HTML-delen. Den kender du fra kapitel 8. Menuen ligger inde i et tag. Div-tagget er som udgangspunkt skjult, dvs. display: none. Det eneste “nye” er, at (som er en HTML knap) har en onClick funktion. Den kalder en javaScript-funktion, der hedder myFunction().

CSS delen: Ikke så meget nyt, bortset fra, at <div> tagget er skjult gennem klassen “dropdown-content”. Det gøres gennem egenskaben display: none;. Nedenfor ser du et udpluk af CSS’en.

Så til javaScriptet. Det kommer i 2 afdelinger. Det er kun de første par linjer, som er nødvendige for at vise/skjule menuen. Jeg har rammet dem med en rød firkant. Den anden del kan lukke menuen, hvis der klikkes udenfor menuen.

Når der klikkes på knappen med id’et (“myDropdown”). så aktiverer javaScriptet en funktion der:

Griber fat i elementet med document.getElementById(“myDropdown”)
Henter den tilhørende klasse til elementet med id’et med .classList
Og “toggler”. Dvs. den skifter fra “hide” til “show”. Men når man bruger kommandoen toggle, så kan den også skifte tilbage igen.

W3schools’ kæmpe “How to” samling af eksempler. Du kan læse mere i afsnit 13.1 W3Schools’ “How to”.

Link til toppen af siden.

11.7 En valutaomregner med javaScript

Jeg har lavet et eksempel for at vise, hvordan du kan bruge javaScript til beregninger.

Når man har felter i HTML, som skal bruges til indtastning, så siger vi, at det ligner en formular. Til en formular hører forskellige HTML tags, som f.eks. <input>, <label> og <form>. Det er almindeligt, at man kombiner forms med backend kode, derfor venter jeg med formularer til kapitlerne om backend kode. Først det færdige resultat. Ikke køn, men praktisk :-).

Koden ser sådan ud, og den er skrevet i Visual Studio Code:

Først HTML koden.

Linje 11 og 14. Felterne med <label> er tekstfelter
Linje 12. <input> bruger jeg til at skrive brugerens input i
Linje 15. Jeg skriver svaret i tagget <span>. <span> virker som <div> bortset fra, at det er et inline tag. Dvs. tagget laver ikke noget linjeskift bagefter.
Linje 18. var euro er naturligvis en variabel, som henter input fra feltet med id “belob”
Linje 19. var result er variablen euro gange valutakursen
Linje 20. Jeg skriver resultatet i <span> med id’et “result”

Prøv at gense den tilsvarende løsning i AppLab fra afsnit 11.1 Du koder allerede i javaScript.

Link til toppen af siden.

11.8 Debugging

Debugging betyder fejlfinding. Som du nok allerede ved, er Visual Studio Code ret hjælpsom i forhold til at finde fejl i din kode. Du kan også bruge f.eks. Chrome og Firefox, som har nogle ret gode debugging-værktøjer. Jeg har ikke testet andre browsere end de 2.

Chrome

Selvom jeg mener, at Chrome spionerer, og jeg normalt undgår den, så er den en super browser i forhold til udvikling. Gå ind øverst th > vælg Flere værktøjer > Udviklerværktøjer. Du kan også bruge genvejstasten ctrl + skift + i på pc, der er sikkert en tilsvarende på Mac.

Det åbner et udviklervindue nederst. Klik på Console, så ser du javaScript fejlene. Du kan endda teste forskellige rettelser:

Firefox

Igen klik på burgern øverst til højre. I menuen vælg Webudvikler > Vis værktøjer eller genvejstasten ctrl + skift + i som i Chrome.

Så får du et udviklerområde nederst, som er særdeles hjælpsomt. Ud over at teste CSS kan du under punkt 2 Konsol se javaScript fejl og lokalisere, hvor de er. Lige som i Chrome.

Link til toppen af siden.

Kapitel 12. Frameworks/libraries

Du ved helt sikkert, at hvis vi skal arbejde professionelt med CSS, så skal vi bruge et eksternt stylesheet. Dvs. at vi samler alt CSS kode et sted. Så overholder vi også “separation of concerns”.

Hvis man nu forestiller sig, at man lånte andres stylesheets, lige som man låner bøger på biblioteket, så har man et “library”, “framework” eller et “bibliotek”. Disse “biblioteker” er der mange af, og de er populære. Firmaer lever af dem, og langt de fleste større hjemmesider bruger dem. Du skal her i kapitlet møde et par stykker

Faktaboks. Er der forskel på frameworks og libraries (biblioteker)?

Forskellen er flydende. Man kan dog sige, at:

Et library er en samling af genbrugelige klasser/funktioner som et program kan bruge
Et framework er en kombination af et library og nogle designs/retningslinier for hvordan programmer skal laves
I praksis kan graensen mellem library og framework godt være lidt flydende
Man kan have både libraries og frameworks i alle sprog
Libraries/frameworks er blevet meget populært til mange sprog, ikke mindst CSS, javaScript og Microsofts meget udbredte C#

Link til toppen af siden.

12.1 FontAwesome og Google Material Design Icons

En font er en skrifttype. FontAwesome har et bibliotek med ca. 1.500 gratis ikoner og en prof betalingsverson med over 7.000 ikoner. Her er et par eksempler:

FontAwesome fungerer på den måde, at man besøger https://fontawesome.com/ og opretter sig som bruger. Så kan man downloade gratis-udgaven af deres bibliotek. Den placerer man i en mappe i sin sitemappe, og så laver man en reference. Præcis som hvis det var et eksternt stylesheet.

Her er W3schools præsenterer fontawesome og viser også hvordan på https://www.w3schools.com/icons/fontawesome_icons_intro.asp. Kort fortalt laver man et tomt tag, f.eks. <i></i>, og så sætter man klasser ind fra fontawesomes bibliotek. Man kan style størrelse og farve lige som med almindelig skrift.

Fontawesome har mange ikoner, men det er langt fra alle, som er gratis. De er de derimod hos Google Material Design Iconsl https://material.io/resources/icons/?style=baseline. Her finder du bl.a. ikoner til sociale medier, f.eks. Facebook.

Link til toppen af siden.

12.2 W3schools eget library

W3schools har deres eget library. Du finder det på https://www.w3schools.com/w3css/defaulT.asp. De har også masser af skabeloner til forskellige typer hjemmesider, der alle er bygget med W3schools’ framework. De siger selv, at deres framework er lille og derfor hurtigere end f.eks. Bootstrap. Se afsnit 12.4 for at læse mere om Bootstrap. Her er en af deres gratis templates:

Læs mere på https://www.w3schools.com/howto/howto_website.asp.

W3schools hjælper også gerne med 100-vis af gode eksempler. Se afsnit 13.1 W3schools “How to”.

Link til toppen af siden.

12.3 Animationsbiblioteker

Du kan finde animationsbiblioteker på nettet. De kan lave masser af liv på din webside. Her er https://animejs.com/. Scrol gerne ned af siden, den er ganske underholdende :-).

Tilsvarende kan du finde masser af animationsbiblioteker, der kan animere f.eks. en knap eller andet.

Link til toppen af siden.

12.4 Bootstrap (og lignende)

Bootstrap er det mest populære bibliotek til at bygge hjemmesider i. Bootstrap laver et framework, som du kan bygge siderne i. De inddeler i 12 lodrette kolonner. Hver sektion kan så fylde alle 12 kolonner eller måske kun 3 (svarende til 25%. Hvis siden så bliver smallere skal sektionen så måske flyde 6 kolonner og på de smalleste skærme 100%.

Bootstrap er ikke kun kolonner. Der er knapper, styling, alt mellem himmel og jord.

Bootstraps hjemmeside: https://getbootstrap.com/
Bootstrap hos W3schools: https://www.w3schools.com/bootstrap4/default.asp

Link til toppen af siden.

12.5 JQuery

En af grundene til, at javaScript engang var ugleset, er at scriptet er kluntet i forhold til at hente og indsætte indhold i HTML tags.

Samtidig er der kommet meget mere fokus på animation og AJAX (dvs. asynkron opdatering, når en hjemmeside kun opdateres delvist). Alt det har skabt et behov for et sprog, som kan det samme som javaScript, men som er nemmere at arbejde med. Sådan er JQuery.

JQuery har en stor fanskare og en ikke mindre stor plads hos W3schools: https://www.w3schools.com/jquery/default.asp. JQuery har også sin egen hjemmeside: https://jquery.com/

Man får næsten ondt af det gamle javaScript. Faktisk snakker nogle udviklere om “POJO”: “Plain Old JavaScript Objects” eller “Vanilia javaScript”, når de omtaler javaScript.

Link til toppen af siden.

Kapitel 13. Videre med frontend kodning

Du er nu igennem hele basis, men det er faktisk først nu, at festen skal til at begynde. Her er nogle af de emner, der kunne ligge foran dig:

AJAX: Når siden opdaterer, mens du skriver. Normalt opdaterer siden, når du klikker på en knap eller et link, men den kan gøre det, mens du skriver
AngularJS fungere lidt på samme måde
JSON: En javaScript database
Less og Sass: En måde at arbejde med CSS på, så man skriver mere overskuelig kode og i langt højere grad udnytter CSS’s evne til nedarvning

Link til toppen af siden.

13.1 W3Schools “how to”

Du finder en guldgrube af eksempler lige til at kopiere hos W3schools. De har en sektion, der hedder “How to”. Her finder du f.eks. slideshows, menuer med ikoner osv. osv. Klk selv inde på https://www.w3schools.com/howto/default.asp. Herunder et eksempel “Slideshow gallery”. Bemærk menuen til venstre med Menus: Icon bar, Menu icon osv. Der er langt over 100 forskellige interessante eksempler. Ud over Menus som hovedoverskrift er der knapper, formularer, filtre, alt muligt …

Link til toppen af siden.

WWW.DSB.DK I BREDT (COMPUTER) FORMAT	WWW.DSB.DK i SMALT (SMARTPHONE) FORMAT

ALMINDELIGT BRED PC/MAC FORMAT	SMALT LAYOUT

<nav> HAR BREDDEN 30% OG FLOW: LEFT	<article> HAR BREDDEN 70% OG FLOW: LEFT