HTML

HTML står for HyperText Markup Language og bruges til webside indhold. F.eks. kan tekst være skrevet som fed tekst, kursiv tekst, understreget tekst, [[links http://iftek.dk]], billeder og meget andet.

CSS

CSS står for Cascading Style Sheets og anvendes til en websides grafiske layout. F.eks. kan

• fed tekst ændres til at være rød kursiv tekst og
• kursiv tekst til at være blå fed skrivt.
• websidens baggrundsfarve kan ændres eller erstattes med et billede.

HTML kan også bruges til at ændre det grafiske layout, men det er smarte ved en CSS fil er at mange html filer kan referere til den og dermed kan det grafiske layout ændres på mange websider og undersider, ved kun at ændre i én CSS fil, i stedet for at rette i alle websider og undersider.

HTML reference guide

Der er bl.a. følgende tags (kommandoer) til HTML, som du kan prøve i webprogrammet:

HTML tag for overskrift 1

<h1>overskrift 1</h1>

HTML tag for underoverskrift

<h2>underoverskrift 2 </h2>

HTML tag for 2 tekstafsnit

<p>Tekstafnit 1</p><p>Tekstasnit 2</p>

HTML tag for fed , kursiv og understreget tekst

tekst <b>fed tekst</b> tekst <i>kursiv tekst</i> tekst <u>understreget tekst</u> tekst

HTML tag for linjeskift, da et almindeligt linjeskift ikke virker

Tekstlinje 1.
Tekstlinje 2.<br> Tekstlinje 3.<br> Tekstlinje 4.

HTML tags for punktopstilling

<ul>
  <li>punkt 1.0</li>
  <li>punkt 2.0
    <li>punkt 2.1</li>
    <li>punkt 2.2</li>
  </li>
  <li> punkt 3.0</li>
</ul>

HTML tag for en knap

<button>Min første knap</button>

HTML tag for et link

<a href="http://iftek.dk">Mit første iftek link!</a>

HTML tag for et billede

<img src="http://bartek.dk/progs/htmledit/gfx/iftek.png">

HTML tag for et billede med link

<a href="http://iftek.dk">
  <img src="http://bartek.dk/progs/htmledit/gfx/iftek.png">
</a>

CSS reference guide

Der bl.a. følgende kommandoer til CSS, som du kan prøve i webprogrammet:

CSS'en der gør overskrift 1 rød på lilla baggrund, understreget med blåt:

h1{
  color: red;
  background-color: purple;
  border: 2px solid blue;  
}

CSS'en der gør fed tekst til hvid tekst:

b{
  color: white;
}

CSS'en der gør baggrundsfarven sort og giver alt tekst skygge: (Normalt skal der står body i stedet for #body, men det kan desværre ikke lade sig gøre i dette webprogram)

#body{
  background-color: black;
  text-shadow: 1px 2px 2px black;
}

CSS'en der får knapper til at kaste røde skygger:

button{
  box-shadow: 1px 2px 2px red;
}

CSS'en der får billeder til at ændre størrelse og få runde hjørner, hvid ramme og sort skygge:

img{
  border-radius: 15px;
  border: 5px solid white;
  box-shadow: 1px 2px 3px black;
  width: 200px;
}