Hvad er HTML og CSS og hvorfor bruge tid på sætte mig i det?

Af

Kort fortalt er HTML og CSS de to kode-sprog som ligger bag enhver moderne hjemmeside. Det er altså html og CSS der sørger for at tekst, billeder, design osv. vises til brugeren gennem deres Internet browser.

Ønsker du f.eks at lave en ændring på layoutet i et WordPress tema, vil du i mange tilfælde kunne klare det selv at have en viden om HTML og CSS.

HTML kom først til verden

At lave en hjemmeside i HTML (Hypertext Markup Language) er den mest basale måde at lave en hjemmeside på. HTML er opbygget af tags og det er disse tags der sørger for at placere og formatere tekst og billeder.

Her er eksempel på en HTML tag:

<strong>skriv denne tekst med fed</strong>

Denne tag gør at teksten vil blive skrevet med fed. Den første tag <strong>er en start tag og den sidste del med skråstregen </strong> er en slut tag. Det er altså kun teksten i mellem de to tags der vil blive markeret med fed.

Som bruger ser vi ikke disse bagvedliggende HTML tags, men de bruges på praktisk talt alle hjemmesider. Ved at højre klikke i din Internet browser og vælge “vis kilde” kan du se alle de HTML tags der er brugt til at opbygge den hjemmeside du kigger på.

Ved at bruge en lang række af forskellige HTML tags kan størrelsen på teksten ændres, farverne, layoutet osv. Da der er ganske mange HTML tags henviser jeg til html.net (eng) for mere dybdegående information omkring opbygningen af html.

CSS prøver at overtage verden

Når det kommer til mere avanceret formatering og layout på hjemmesider træder CSS (Cascading Style Sheets) i karakter. CSS gør det muligt at ændre hele layoutet på din hjemmeside ved at ændre i en enkelt fil.

  • Ønsker du f.eks. at ændre tekstfarven på samtlige links på din hjemmeside, kan det gøres ved at  ved at rette farven ét sted i CSS filen.
  • Er din side kun opbygget i HTML skal du rette farve-koden manuelt i samtlige filer på din hjemmeside. Består dit website af fem sider ville dette ikke være det store problem, men prøv så at forstil dig en hjemmeside med flere hundrede sider.
  • Med CSS er det altså muligt at styre hele designet fra en enkelt fil. Samtidig giver CSS en lang række grafiske muligheder som ikke er mulige at lave kun ved brug af HTML.

CSS er ligesom HTML opbygget af tags. Her er et eksempel på et CSS tag:

<div id=”tekst-formatering”>formater denne tekst</div>

Den tekst der står i mellem start tagget <div id=”tekst”>og slut tagget </div> vil så blive formateret i henhold til det der er angivet i CSS filen.

CSS bliver brugt mere og mere

Fordelene ved CSS virker måske umiddelbart ret begrænsede, men opbygges en hjemmeside korrekt i CSS vil du praktisk talt kunne lave et helt nyt design, udelukkende ved at ændre i CSS filerne.

Ud over dette bruges CSS også til at lave hjemmesider responsive således at de vises korrekt på mobiltelefoner, iPads osv. CSS er derfor kommet for at blive og ses anvendt på flere og flere hjemmesider.

Er du interesseret i at lære mere om CSS kan jeg som sagt anbefale at se nærmere på html.net, da de dækker både CSS og HTML rigtig godt.

Relaterede indlæg:

5 grunde til hvorfor du skal bruge Google Webmaster Tools
Hvad er responsive webdesign og hvorfor skal en hjemmeside være responsive?
Hvad er forskellen på et CMS, en blog og en online site builder?
Hvad er et CMS system?

9 kommentarer til “Hvad er HTML og CSS og hvorfor bruge tid på sætte mig i det?”

  1. Hej Anders,
    Nu er jeg her igen :) Og håber du (igen kan hjælpe) :-)
    Som du nok allerede ved, virker Google adsense pluginet ikke længere… Jeg kan i hvert fald ikke administrere mine ads via dette plugin længere.
    Jeg er nået dertil, hvor jeg har oprettet ads koder inde på min adsense konto, men jeg kan simpelthen ikke finde ud af HVOR de skal sættes ind og hvordan jeg skal kunne styre dem?? Hvor er min HTML? Den siger jeg skal sætte koden ind der, men når jeg bare sætte en script kode derind (på “bagsiden” af mine blogposts” kommer der kun en lille firkantet ikon frem… :-/
    Hvad er det jeg gør forkert?
    Hilsen Diana

    Svar

    • Jeg bruger det plugin der hedder WP-Insert. Her skal du blot vælge hvor du ønsker at dine AdSense annoncer skal vises, indsætte den pågældende kode til AdSense annoncen, aktivere annoncesektionen og klikke på update.

      Har du brug for en mere udførlig guide siger du bare til, så laver jeg en :-)

      Svar

    • Vil du rette i woocommerce CSSfilen skal du som sagt gøre det via FTP. Det er kun temaets CSS fil du kan rette via WordPress administrationen.

      Bemærk at hvis du retter i wocommerce css filen, bliver dine ændringer overskrevet ved opdatering af woocommerce pluginet.

      Svar

  5. Hej – jeg er igang på en demo.

    Jeg har hentet theme “storefront” som understøtter woocommerce.

    Jeg vil gerne ændre på fx. margin på knapperne i shoppen, men jeg kan ikke finde ud af hvor woocommerce css filen ligger. Jeg kan godt se jeg kan farvestyle forskellige elementer – men selve cssfilen kan jeg ikke finde. Har du et bud.

    Mvh
    Laila

    Svar

          • Hvis det var mig ville jeg logge in via FTP, så kan du også tage en backup af woocommerce CSS filen før du redigerer i den :-)

            Ønsker du at rette i CSS filen til Storefront temaet kan den findes i WordPress administrationen under Udseende ->> Editor ->> Vælg Storefront i dropdown ->> Klik på Stylesheet nederst.

            Husk at tage en backup før du laver ændringer.

            Svar

Skriv en kommentar