Lærebog til del 5. Hjemmesider. Kapitel 15 - 18

Indholdsfortegnelse

Kapitel 15. Frontend kode 1. HTML

Frontend kode er kode, man bruger i frontend delen af en app. Du ved allerede fra kapitel 15, at vi bruger sproget SQL til databaser. Tilsvarende bruger vi kodesprogene HTML, CSS og JavaScript til at kode frontend løsninger. HTML, CSS og JavaScript kan som de eneste sprog læses direkte i en browser.

Vi bruger sprogene således:

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.

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. Alle hjemmesider bruger HTML, CSS og eventuelt JavaScript frontend.

Link til toppen af siden.

15.1 Introduktion til HTML og W3schools

Videoen herunder fra W3schools.com giver en intro til html tags. W3schools er din bedste ven på nettet, når du skal kode, og du finder snart ud af hvorfor. Hvis du klikker på billedet herunder, så kan du se videoen. Ellers klik på https://www.w3schools.com/videos/index.php.

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 det skal gøres pænt med farver og alt muligt andet flot dvs. styling, så skal vi bruge sproget CSS. Mere om CSS i næste kapitel.

Link til toppen af siden.

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 6 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

Link til toppen af siden.

<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.

15.2 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.

15.3 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.

Link til toppen af siden.

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.

15.4 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

Link til toppen af siden.

15.5 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.

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

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

Link til toppen af siden.

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

Link til toppen af siden.

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 anførselstegnene 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.

Link til toppen af siden.

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. Link til toppen af siden.

Link til toppen af siden.

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.

15.7 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.

15.8 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 i kapitel 17.

Link til toppen af siden.

Kapitel 16. Frontend kode 2. 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.

16.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.

16.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

Link til toppen af siden.

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.

Link til toppen af siden.

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.

Link til toppen af siden.

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.

16.4 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

Link til toppen af siden.

16.6 CSS selectors og klasser

Med CSS kan style alle de tags, vi har lyst til. Koden herunder styler dels alle <body> tags med baggrunden lightcyan, dels alle <p>-tags får farven brown med skriftstørrelsen/font-size 20px. Stylingen af de 2 tags ser sådan ud:

Det færdige resultat ser du herunder:

Men hvad så, hvis jeg godt kunne tænke mig, at 2 af mine <p>-tag skulle have en anden farve, f.eks. rød? Til det brug har vi klasser. Klasser starter vi i CSS med et punktum:

Koblingen mellem klassen og HTML-tagget sker ved at skrive class=” + klassens navn” inde i tagget, her “red”. Her er det gjort ved 2 af tags’ne (1) og (2).

Det færdige resultat ser således ud:

Du kan lave alle de klasser, du vil. Du kan endda kombinere flere klasser til samme tag, hvis du vil. Her kombinerer jeg klassen “red” (1) med klassen “high” (2). Klassen high gør skriften højere end de standard 20 pixels, som er stylet under tagget <p> (3).

Bemærk hvordan jeg kombinerer tingene ved at skrive <p class=”red high”>. Jeg henviser altså til 2 klasser i samme tag (4).

Det færdige resultat ser du til højre (5). Bemærk at skriften til <p class=”red high”>I live in Ducksburg.</p> (6) er blevet større end ved de andre <p>-tags.

Koden til eksemplet finder du her lige til at kopiere, hvis du har lyst til at teste selv:

<!DOCTYPE html>
<html>
<head>
<style>
body{
	background-color: lightcyan;
}
p{
	color: darkgreen;
        font-size: 20px;
}
.red{
	color: red;
}
.high{
	font-size: 30px;
}
</style>
</head>
<body>

<h1>Demo of the .class selector</h1>
<p>My name is Donald.</p>
<p class="red high">I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<p class="red">My best friend is Mickey.</p>
</body>
</html>

Link til toppen af siden.

16.6 Gode råd til din kodning

“Test often, fail early”. Hellere hyppige småtest end få store, du fanger fejlene bedre
Udnyt hierarkiet i koden. Hvis du styler på <body>, styler du også på alle tags inden i body. F.eks. <h1>, <h2>, <p>, <ul> m.fl. Hvis du vil have en skrifttype, der f.eks. gælder overalt, så lav stylingen på <body> i stedet for <h1>, <h1>, <p> osv. enkeltvis
Brug W3Schools så meget, som du kan

Link til toppen af siden.

Kapitel 17. 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. 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. I 2019 omsatte Google for ca. 135 mia dollars.

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
Brug “alt” tagget til billederne
Brug <meta description>
Hav orden på indholdet i både og tagget. Dvs. at de søgeord, som du vil findes på, helst skal gå igen i både , url, <h1> og <meta description>. Samt også gerne i teksen uden, at det bliver for påtaget</p>
Google Prinsessen hader gentagelser. Kopier aldrig en side helt og holdent, hun ser det øjeblikkeligt og du ryger nederst i søgemaskinen

Meta koder ses ikke af brugeren. Meta koder er rettet mod visning af siden og mod søgemaskiner. Det, du skriver i <meta name=”description” content=”….”> er det, som Google viser, når du søger.

Her har jeg søgt på AGF og superliga. Jeg har rammet det ind, som hjemmesiderne har skrevet i deres <meta name=”description” content=”…”> koder.

Link til toppen af siden.

17.1 Et eksempel på søgemaskineoptimering

Jeg vil lave en fanside for AGF (hvad ellers?)Jeg udvælger et par ord, som jeg vil findes på. F.eks. “AGF”, “Fan”, “Superliga”. Her er min kode.

Kommentarer til koden. Bemærk at alle metatags skal placeres i sektionen lige som </p>. Hvis du vil læse mere om meta tags så brug linket her til W3schools: https://www.w3schools.com/tags/tag_meta.asp

LINJE	TAG	FORKLARING
5	<title>	Jeg har lavet en hel sætning. Alle mine 3 søgeord indgår i sætningen
6	<meta charset=”UTF-8″>	Sørger for, at du ikke får problemer med æ, ø og å
7	<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>	Hjælper din side til at se godt ud på både brede (pc/Mac) skærme og smalle (mobiltelefon) skærme
8	<meta name=”description” content=”…”>	Er den metakode, vi bruger til at beskrive sidens indhold over for søgemaskinerne. Lav en rigtig sætning, så indholdet præsenteres pænt i søgemaskinerne
10	<meta name=”keywords” content=”…”>	Nøgleord, som du ønsker at blive fundet på plus alle andre nøgleord, du vil findes på. Er ikke obligatorisk mere
11	<h1>AGF: Kåmsådehviiii</h1>	Alle sider skal have en <h1> overskrift. I overskriften skal nøgleordne helst indgå på en naturlig måde.
Øvrigt indhold	<p> og alle mulige andre tags på siden	Lad nøgleordne indgå med passende længe og på en naturlig måde.

17.2 Styleguide

Hav altid følgende i orden:

Generelt

Åbne tags starter med <p> og slutter med et backslash </p>
Lukkede tags skrives uden backslash: <br> og <img src=”….”>
Skriv med lille <p>…</p>, ikke med stort <P>…</P>. Begge dele virker, men man har vedtaget at skrive med lille
Vær gavmild med dine kommenterer
- Kommentarer skrives sådan i HTML: <!— … —>
- Kommentarer skrives sådan i CSS: /* … */
Separation of concerns: Adskil HTML og CSS kode, så de står i hver sin fil. I eksemplerne hos W3schools er de ikke adskilt, men det er udelukkende af praktiske årsager
Forsiden på dit site skal altid hedde “index”, f.eks. “index.html”

<head>-delen

<title>…</titel>. Dvs. et title-tag, så browserens tab får et navn. Det kræver søgemaskinerne
Meta tags, som minimum nedenstående
- <meta charset=”UTF-8″>. Sikrer, at du aldrig får problemer med visning af æ, ø og å
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>. Sikrer, at du ikke får problemer med zoom af billeder, hvis du viser dit site på en enten lille eller meget stor skærm
- <meta name=”description” content=”…”>. Så fortæller du søgemaskinerne, hvad din side indeholder. Så får du højere ranking i søgemaskinerne. Pas på med at dublikere content, for søgemaskinerne hader dublikeret indhold
<link rel=”stylesheet” href=”style.css”>. Link til et stylesheet

<body>-delen

Egentlig kun 2 regler:
- Der skal være 1 og kun 1 <h1> tag. Det kræver søgemaskinerne, for så ved de, hvad sidens overskrift er. Du må lave lige så mange <h2> og <h3>-tags, som du har lyst til.
- Lad være med at kopiere indhold direkte. Søgemaskinerne hader kopieret indhold.

Kapitel 18. Div-tagget og moderne hjemmesider

<div> – tagget er egentlig ikke andet end en tom kasse, som man så fylder indhold i. Ikke helt ulig celler i en tabel, men meget mere fleksibel. <div>-tagget i kombination med CSS udgør fundamentet for alle moderne hjemmesider

18.1 Moderne hjemmesider skal være responsive

Hjemmesider, deres udseende og deres funktioner har udviklet sig meget med årene. I starten var den typiske skærm med en noget laver opløsning end i dag, 800 pixels x 600 pixels var almindeligt. I dag er en typisk skærmopløsning f.eks. 1920 x 1080 pixels, men store skærme kan nå op over 4000 pixels eller mere i bredden.

Samtidig er der kommet smartphones til, hvad der ikke var i starten. Hvor en pc/Mac har en skærm, som er bredere end den er lang, er det lige omvendt på en mobiltelefon. På en pc/Mac er det nemmere at klikke på link end at skrolle. På en mobil er det lige omvendt.

Hjemmesider skal være brugervenlige, uanset om de ses på en mobiltelefon eller på en computer. Derfor er vi nødt til at kode hjemmesiderne på en måde, så de kan tilpasse sig de meget forskellige skærme, som de skal vises på. Design, der tilpasser sig skærmens bredde, kaldes “responsivt design”. Herunder ses eksempler på responsivt design. Vi bruger HTML med særligt fokus på <div>-tagget og CSS for at få responsivt design til at fungere.

18.2 Responsivt design starter med viewport tagget

Viewport er et meta-tag, som sikrer, at dine billeder og hjemmesider dels tilpasser sig sidebredden, dels zoomer rigtigt. Tagget skal altid placeres i <head> sektionen lige som alle andre meta tags.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

18.3 Opbyg siden med <div> tags

En side består af elementer, som placeres i forhold til hinanden. F.eks. header, navigations og footer elementer, som er ens for alle siderne. Andre dele, f.eks. overskrifter, billeder og brødtekst skiftes ud fra side til side.

Man gør så det, at man placerer div-tags uden om alle elementer eller områder. I figuren her består hjemmesiden af 6 overordnede elementer: Et header-element (1), et navigationsområde (2) med knapper inden i (3). Et indholdsområde (4), en sidebar (5) og et footerområde.

Alt HTML i områderne (1) – (6) er placeret inde i et <div>-tag. I menuområdet (2), som i sig selv er et <div> tag, er knapperne med link (3) placeret som <div>-tags inde i det overordnede <div>- tag.

Med andre ord er alle sidens elementer placeret inde i forskellige <div>-tags, og de enkelte <div> tags kan sagtens være placeret inde i hinanden.

Ved forskellig siddebredde sørger koden for så for, at <div>-taggene placeres forskelligt i forhold til hinanden. Jo smallere side, jo flere elementer vil stå over hinanden frem for ved siden af hinanden. Bemærk hvordan de enkelte elementer flytter sig i forhold til hinanden.

18.4 Div-tags som semantiske tags

Når nu alt på moderne hjemmesider placeres i <div>-tags, så kan vi ret hurtigt ende med en uoverskuelig mængde <div>-tags i koden. Derfor har man skabt nogle semantiske <div>-tags. Semantiske <div>-tags så indviklet, som det lyder. Et semantisk tag er bare et tag, hvor navnet tydeligt fortæller, hvad tagget kan.

I stedet for, at vores øverste sektion (1) i figuren ovenfor er inde i et <div> tag, så bruger vi i stedet et <head>-tag. <head>-tagget er præcis det samme som et <div>-tag. Forskellen er udelukkende, at koden bliver nemmere for os at læse. Vi vil kun bruge <head> 1 sted i koden, nemlig der, hvor vores øverste del af siden befinder sig.

I stedet for <div> tags kan man tilsvarende placere navigation i et <nav> tag, hovedindholdet af en side i 1-flere <section>-tags, der igen kan opdeles i <article> og <aside>-tags.

Her er et eksempel fra W3schools på en sides opbygning. W3schools kunne sagtens have placeret <section>, <article> og <aside> inde i et <main> tag. Opbygningen er op til den, der koder, men det er god stil at bruge disse tags frem for bare <div> tagget. Især fordi det gør koden lettere at læse. Man behøves ikke hver gang at bruge alle de tags, der er nævnt nedenfor.

18.5 Et eksempel fra W3schools

W3schools har et udmærket eksempel på https://www.w3schools.com/html/html_layout.asp. Hjemmesiden ser således ud på en pc/Mac:

På en smal skærm, f.eks. en mobiltelefon, ser det noget anderledes ud:

Alt indhold er lagt i semantiske <div>-tags. Bl.a. er navigationen placeret i et <nav> tag og brødteksten om London er placeret i et <article> tag.

CSS’en til de 2 tags ser således ud.

De 2 vigtigste egenskaber er:

“float: left” sørger for, at elementet venstrestilles
“width: 30%” sørger for at bredden på <nav>-tagget er 30% af hele siden
“width: 70%” sørger så tilsvarende for, at bredden af <article>-tagget er 70%

Problemet er, at på smalle sider skal bredden på både <nav> og <article> være 100%. Det løses ved at skrive CSS kun rettet mod smalle skærme. @media (max-width: 600px) siger, at hvis skærmbredden er 600 pixels eller derunder, så skal bredden på hhv. <nav> og <article> være 100% i stedet for 30%.

18.6. Et prof. eksempel fra W3Schools

https://www.w3schools.com/css/css_website_layout.asp

Afslutning

— SLUT PRUT FINALE, DER ER IKKE MERE TEORI TIL INFORMATIK C, SOM DU SKAL LÆRE. Herfra handler det kun om eksamen og årsafslutning.

Link til toppen af siden.

bliv-klogere.ibc.dk

bliv-klogere på informatik, international økonomi, MS-Office, …

Lærebog til del 5. Hjemmesider. Kapitel 15 – 18

Kapitel 15. Frontend kode 1. HTML

15.1 Introduktion til HTML og W3schools

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

<head> og <body> er semantiske tags

15.2 Opsummering: De vigtigste regler for HTML kode

15.3 Gode råd, når du koder

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

15.4 Side, hjemmeside eller site

15.5 Mere orden: “Separation of concerns”

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

Tabeller

Billeder

Lister

Links

15.7 Iframes

15.8 Undgå problemer med æ, ø og å

Kapitel 16. Frontend kode 2. CSS

16.1 CSS opbygning

16.2 Hvor skal jeg lægge min CSS kode

1. Metode. Ved selve tagget (inline CSS)

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

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

16.4 Hvordan husker jeg dog alt det her?

16.6 CSS selectors og klasser

16.6 Gode råd til din kodning

Kapitel 17. SEO/søgemaskine optimering

17.1 Et eksempel på søgemaskineoptimering

17.2 Styleguide

Kapitel 18. Div-tagget og moderne hjemmesider

18.1 Moderne hjemmesider skal være responsive

18.2 Responsivt design starter med viewport tagget

18.3 Opbyg siden med <div> tags

18.4 Div-tags som semantiske tags

18.5 Et eksempel fra W3schools

18.6. Et prof. eksempel fra W3Schools

Afslutning