På en opskriftsside fortæller HTML, hvad der er en overskrift og en ingrediensliste. CSS gør siden behagelig at læse. JavaScript kan lade læseren ændre portioner uden at genindlæse siden.
HTML giver indholdet en forståelig struktur
HTML står for HyperText Markup Language. Du markerer indhold med elementer: en overskrift, et afsnit, et billede, en liste eller et link. Valget handler om indholdets rolle. En ingrediensliste er stadig en liste, selv om den senere får et særligt visuelt udtryk.
Brug eksempelvis et link, når læseren skal til en anden opskrift, og en knap, når en handling skal udføres på siden. Hvis alle elementer blot er generiske bokse med klikfunktioner, skal mere adfærd og betydning tilføjes manuelt. Et godt udgangspunkt er at bruge de elementer, browseren allerede kender.
| Lag | Opgave | På opskriftssiden |
|---|---|---|
| HTML | Indhold og betydning | Overskrift, ingredienser og fremgangsmåde |
| CSS | Præsentation og layout | Læsbar tekst og kolonner efter plads |
| JavaScript | Beregning og opdatering | Tilpas mængder til antal portioner |
CSS former præsentationen på tværs af skærme
CSS står for Cascading Style Sheets. Reglerne kan blandt andet styre skrifter, farver, afstand og placering. På opskriftssiden kan ingredienser og fremgangsmåde stå ved siden af hinanden, når der er plads, og under hinanden i et smalt vindue.
En CSS-regel gør ikke et ulogisk indhold forståeligt af sig selv. Hvis fremgangsmåden står i en mærkelig rækkefølge i HTML, kan visuel flytning skabe forskel mellem det, man ser, og den rækkefølge, man møder med tastatur eller oplæsning. Begynd derfor med en fornuftig læserækkefølge og tilpas layoutet omkring den.
JavaScript giver siden adfærd
JavaScript er et programmeringssprog. På siden kan det læse antal portioner, beregne nye mængder og opdatere teksten. Det kan også hente oplysninger, håndtere en quiz eller styre en interaktiv visning. Browseren stiller grænseflader til rådighed, som koden bruger til at arbejde med siden.
Aftal, hvad der sker, når indtastningen er forkert. Et tomt portionsfelt bør ikke gøre hele opskriften ubrugelig. Bevar gerne en læsbar standardopskrift, og giv konkret hjælp ved feltet. Funktionen skal passe til indholdet og brugssituationen, ikke blot demonstrere, at siden kan reagere på klik.
Mange grundfunktioner findes allerede i browseren
Tekst, billeder, almindelige links og formularer behøver ikke nødvendigvis en JavaScript-app. En formular kan sende oplysninger til en server på normal vis. JavaScript kan derefter forbedre oplevelsen, eksempelvis ved at vise hjælpsom feedback tidligere eller opdatere en afgrænset del af siden.
Vurder den konkrete opgave. En side med åbningstider har andre behov end en tegneflade, hvor brugerens handlinger løbende ændrer indholdet. At undgå unødige lag kan gøre en enkel side lettere at vedligeholde. Ved en kompleks brugerflade kan en mere struktureret løsning omvendt være nyttig.
Brug de tre lag til at finde fejl og stille bedre spørgsmål
Er ingredienslisten væk, kan fejlen ligge i manglende HTML, en CSS-regel, der skjuler den, eller JavaScript, som har fjernet indholdet. Undersøg, om elementet findes, hvordan det er stylet, og hvilken kode der ændrer det. Opdelingen giver en praktisk rækkefølge til fejlsøgning.
Den hjælper også i en projektbrief: Skal indholdet omstruktureres, skal layoutet tilpasses, eller mangler der en funktion? Et ønske om en bedre hjemmeside bliver lettere at arbejde med, når det forbindes med en konkret opgave og et tydeligt problem i et eller flere af lagene.
Tag med videre
Det vigtigste
at huske.
- HTML beskriver indhold, CSS præsentation og JavaScript adfærd.
- Vælg HTML-elementer efter betydning og tilføj passende funktioner.
- Lad opgaven afgøre, hvor meget JavaScript siden behøver.
Lad os gøre det klart
Spørgsmål & svar
Hvad sker der, hvis CSS ikke indlæses?
Browseren kan stadig vise et HTML-dokuments indhold med sin grundlæggende præsentation. En meningsfuld struktur gør derfor også indholdet mere forståeligt, når det særlige design mangler.
Er HTML et programmeringssprog?
HTML er et opmærkningssprog. Det beskriver dokumentets elementer og struktur. JavaScript kan derimod udtrykke beregninger, betingelser og anden programlogik.
Er CSS et programmeringssprog?
CSS betegnes normalt som et stylesheetsprog. Det beskriver regler for præsentation, eksempelvis farver og layout. Betegnelsen ændrer ikke, at CSS kræver faglig forståelse og kan være komplekst.
Kan jeg lave en hjemmeside kun med HTML og CSS?
Ja. Informationssider kan fungere fint på den måde. Behovet for JavaScript opstår ved bestemte interaktioner, ikke blot fordi en side skal se moderne ud.
Er Java og JavaScript det samme?
Nej. Det er forskellige programmeringssprog. Det lignende navn betyder ikke, at et Java-kursus automatisk lærer dig at bygge interaktive websider med JavaScript.
Hvad betyder semantisk HTML?
Det betyder, at elementerne vælges efter indholdets betydning: overskrift til en overskrift, liste til en liste og knap til en handling. Det gør strukturen mere forståelig for både mennesker og software.
Kan JavaScript bruges til backend?
Ja. JavaScript kan også køre i et servermiljø som Node.js. Sproget alene bestemmer derfor ikke, om en bestemt kode er frontend eller backend.
Læs selv videre
Kilder & fordybelse
Guiden bygger på disse kilder og erfaring fra egne projekter.
