Grundlæggende HTML og CSS kursus

Dette kursus har til formål at ruste dig i at kode grundlæggende HTML og CSS. Du får en forståelse for opbygningen af disse programmeringssprog, samt viden om hvornår du skal bruge hvad.

HTML og CSS er efterhånden umuligt at komme udenom. Hvad enten du blot ønsker lidt ekstra liv på firmaets intranet, eller du vil i gang med din helt egen side, så kommer et grundlæggende kendskab til HTML og CSS dig til gavn.

Har du brug for feedback på dine nye design idéer efter kurset, er du velkommen til at kontakte vores instruktører for uddybende spørgsmål, feedback m.m.

Deltagere

Kurset henvender sig til dig, der aldrig før har arbejdet med HTML og CSS (eller som har et meget begrænset kendskab til kode). Du har allerede erfaring med at bruge en browser samt at læse e-mails, men du behøver ingen forudgående erfaring med at kode HTML.

I undervisningen anvendes en engelsksproget lærebog, men undervisningen foregår på dansk.

Kursusmateriale

Kurset vil bestå af en vekslen mellem teori, uddybende spørgsmål og praktiske øvelser. Til at understøtte kurset får du udleveret en engelsk lærebog. Den kan du bruge efter kurset som opslagsværk og videre indførsel i den verden, der åbner sig med blot et grundlæggende kendskab til HTML og CSS.

Læs mere

Kursusindhold

Introduktion og grundlæggende HTML

På dette modul gennemgås de grundlæggende værktøjer, du skal bruge for at kunne kode HTML og CSS. Endvidere lærer du de basale HTML elementer at kende.

  • Opsætninger af udviklingsmiljø, og gennemgang af teksteditorer og browsere
  • Head og Body – hvad er forskellen, hvordan bruges de?
  • Lister
  • CSS
  • Farver
  • Attributter
  • Tomme elementer

Syntaks og opbygning

HTML og CSS er forskellige kodesprog. For at browsere kan omsætte, hvad der skrives, skal forskellige regler overholdes. På dette modul lærer du med andre ord grammatikken bag HTML og CSS.

  • Syntaks
  • Sprogenes opbygning
  • Hvilke elementer skal bruges hvornår

Links

Al navigation på en hjemmeside sker via links. Dette modul gennemgår et links virkemåde, oprettelse og egenskaber samt hvilket udseende, der kan tilknyttes.

  • Hvad er et link?
  • Relative links
  • Absolutte links
  • Link attributter
  • Bogmærker
  • Ændre udseende på links

Billeder

Hvis links er de elementer, der gør en hjemmeside interaktiv, så er billeder de elementer, der giver en side visuelt liv. Et billede kan sige mere end 1000 ord. Derfor er det vigtigt at have forståelse for hvilke billedtyper, der er anvendelige på en hjemmeside, hvordan du kan indlejre et billede på en side, samt hvordan du kan bruge et billede som et link.

  • Indsæt billede på en side
  • Billede typer
  • Formatering af billeder
  • Billeder som links
  • Brug af billeder som baggrund

Introduktion til CSS

For at have maksimal kontrol over udseendet af de forskellige HTML-elementer skal du bruge CSS. Dette modul giver dig et indblik i hvordan CSS og HTML kobles sammen, hvornår du skal bruge ID-attributten, og hvordan du skal bruge Class-attributten til at formatere din HTML kode.

  • CSS egenskaber
  • Formatering med Class-attributten
  • Formatering med ID-attributten
  • Hvornår skal du bruge ID, og hvornår skal du bruge Class?
  • Eksterne, interne og in-line styles

Boksmodellen

Alle HTML-elementer kan ses som at ligge i en boks. Du kan påvirke forskellige egenskaber for denne boks herunder ramme og margin og dermed drastisk ændre, hvordan dit indhold bliver præsenteret.

  • Hvordan padding, margin og border påvirker indholdet på siden
  • Sjove effekter og muligheder med padding, margin og border egenskaberne
  • Padding, margin og borders indvirkning på in-line HTML elementer.

CSS – Nedarvning og udvælgelse

For at gøre det nemmere at formatere HTML elementer, er nogle egenskaber nedarvet, hvorfor du kun behøver at angive indstillingen for ét element. Det vil efterfølgende gælde for alle ”børn” af dette element.

  • CSS nedarvning
  • CSS Selectors
  • Kombinér selectors med ID og Classes

CSS – Layout og positionering

Med CSS kan du styre hvor på en side de forskellige HTML elementer visuelt skal placeres. Det kræver et kendskab og en forståelse for CSS-boksmodellen som giver dig mulighed for at lave utallige forskellige grafiske opsætninger.

  • CSS layout
  • CSS positioning

Formularer – HTML og CSS

HTML formularer bruges til at samle information op fra dine læsere/brugere. Dette modul giver dig et kendskab til de forskellige formelementer, samt hvilke egenskaber og attributter, du skal være opmærksom på.

  • Grundlæggende formularfelter og attributter
  • Formater formular elementer med CSS
Luk kursusmateriale