Kategoriarkiv: Ikke-kategoriseret

Lærebog til kapitel 5. Hjemmesider. Kapitel 15 – 17

Ikke-kategoriseret

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.

3 lags arkitektur
3-lags arkitekturen

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

https://youtube.com/watch?v=MJn9jn3TUhA%3Ffeature%3Doembed

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.

Link til toppen af siden.

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

TAGFORKLARINGW3SCHOOLS REFERENCE
<!DOCTYPE html>Tagget fortæller, at vi bruger den seneste version af HTMLw3schools.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 :-).

Head og body i html

Link til toppen af siden.

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

NRREGELEKSEMPEL
1Alle tags starter med “<” og slutter med “>”<html>
2Mange tags (alle i eksemplet) har et starttag og et sluttag.
Sluttagget starter med en skråstreg		<h1>…</h1>
3Tags 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>
4Vi starter og slutter med <html><html>.
….
</html>
5Vi 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>
6Alt sideindhold, med undtagelse af <title>, ligger i <body> tagget<body><h1>…</h1>
</body>
7Tags kan være åbne. Dvs. at de har et starttag og et sluttag. De har et indhold imellem tagsne.<h1>…</h1>
8Tags 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”.

NRREGEL
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
Filer til et site om Sydfyn

Link til toppen af siden.

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.

Tabel i HTML

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

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.

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

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.

https://youtube.com/watch?v=vVS8wJrQeZ4%3Ffeature%3Doembed

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:

EKSEMPELKODEFORKLARING
Skrifth1{
font-family: Calibri;
font-size: 30px;
text-aling: center;
}		Styler tagget <h1> med en skrifttype, størrelse og centrering
Farverh1{
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)
Baggrundbody{
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.

Inline CSS

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.

Internt CSS

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

Eksternt stylesheet

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:

Link til toppen af siden. .

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

16.6 Kik fremad

HTML og CSS i kombination har et utal af muligheder. Hvad siger du f.eks. til menuen her leveret fra https://www.w3schools.com/css/css_navbar.asp? Ren HTML og CSS.

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.

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

LINJETAGFORKLARING
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å sidenLad nøgleordne indgå med passende længe og på en naturlig måde.

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.

Enhedslisten vil omfordele fra “inflations-baroner”

Ikke-kategoriseret

Under 1. verdenskrig opstod der et begreb: Gullash-baroner. En gullash-baron var en typisk nyrig person, der havde tjent mange hurtige penge på at lave mad (gullash) og sælge det til den tyske hær. Danmark var neutralt under 1. verdenskrig.

Nu går enhedslisten efter “inflations-baroner”. Virksomheder, der tjener overnormal profit på inflationen https://nyheder.tv2.dk/politik/2022-09-19-el-vil-omfordele-fra-inflations-baroner-men-oekonomer-advarer

SO6

Ikke-kategoriseret

Oplæg til SO6

I skal på studietur, og I den forbindelse skal I lave en opgave.

Særligt med IØ. Drej jeres rapport, så I kommer ind på jeres “hovedopgave” om økonomisk vækst. Det kan f.eks. være ved at undersøge væksten i jeres valgte land og sammenligne med relevante nabolande.

Her er et samlet oplæg for opgaven:

Facebook stopper reklamer målrettet spillefugle

Ikke-kategoriseret

Efter modne overvejelser har Facebook stoppet reklamer rettet mod spillefugle (og ludomaner). Gad vide, hvorfor de ikke har gjort det for længst.

PS: Danske spilfirmaer er taget i at ringe til folk, som ikke kan styre deres trang til at spille på penge, og tilbyde dem “særligt favorable odds” på nogle kampe.

https://finans.dk/erhverv/ECE13560668/facebook-stopper-laanereklamer-til-spillefugle-inden-nytaar/?ctxref=ext