HTML & CSS

Basic HTML Tags:

Start tag Element Indhold  End tag
<head> I hovedet skrives <style> tags ind </head>
<body> Herinde skrives den generelle HTML kode </body>
<style> Her inde i mellem skrives CSS’en ind </style>
<div> Div er en boks hvor man kan sætte HTML ind i og give en class bestemmelse <div class=”klassenavn”>Tekst</div> </div>
<h1> Overskrift – går op til h6 – tekst skrives ind i mellem </h1>
<p> Paragraf/Et afsnit – tekst skrives i mellem her </p>
<br> Enter/Linje skift intet
<hr> Tynd sort linje streg intet
<b> Fed skrift  </b>
<strong> Fed skrift  </strong>
<i> Kursiv skrift </i>
<em> Kursiv skrift </em>
<a href=”link”> link=Herinde skrives linket til den side man linker til </a>
<img src=”link”> link=Her skrives adressen til billedet som skal vises intet

Tabel og lister

<table> Definerer en tabel </table>
<tr> Tabel række </tr>
<td> Definerer rummene i en tabel </td>
<ol> Definerer en ordnet liste med tal indeks </ol>
<ul> Definerer en uordnet liste med prikker </ul>
<li> Dette kommen imellem ol elle ul i midten skrives teksten </li>
<dl> Definerer en lisste. Lige som <ol> eller <ul> altså den samme opsætning unden punkter eller tal </dl>
<dt> Svarer til <li> med indryk bruges inden i et <dl> tag </dt>
<dd> Svarer til <li> med indryk bruges inden i et <dl> tag </dd>

Atributer:

Alle HTML elementer kan have attributer

  • href erattribute af <a> det specificerer URL’en af siden som linket henvise til
  • src er attribute af <img> det specificerer adressen til billedet, som vises
  • width og height er attributer af <img> det giver str. info på billeder
  • alt er attribute of <img> det giver en alternativ tekstboks som vises når musen holdes hen over
  • style attribute er brugt till at give stil til et element, somfarve(color), font(skrifttype), size(str.) og flere til
  • lang er attribute af <html> tag det beslutter sproget af web siden
  • title attribute definerer noget ekstra info omkring et element

Styles:

  • Brug the style attribute for styling HTML elements
  • Brug background-color for background color
  • Brug color for text colors
  • Brug font-family for text fonts
  • Brug font-size for text sizes
  • Brug text-align for text alignment

Formatering:

  • <b> – Fed tekst
  • <strong> – Vigtig tekst/Fed tekst
  • <i> – Kursiv tekst
  • <em> – Kursiv tekst
  • <mark> – Markeret tekst
  • <small> – Mindre tekst
  • <del> – Slettet tekst/overstreget tekst
  • <ins> – Indsat tekst/Understreget tekst
  • <sup> – Hævet tekst som 2 tallet i CM2
  • <sub> – Sænket tekst som 2 tallet i CO2

” ‘ situationstegn og citater:

Tag Beskrivelse
<abbr> ….. Prikket understregning
<address> Definerer kontakt info på forfatter/ejer af et dokument
<bdo> Definerer tekst retningen fx vil det efter tagget skrives omvendt
<bdo dir=”rtl”> thgir ot tfel
<blockquote> Definerer en tekst som er citeret fra et andet sted/kilde – markeres med Kursiv skrift
<cite> Definerer title på noget
<q> Definerer en kort linje qoutation

CSS Forklaring:

navn BETYDNING 
body{} Definerer indholdet af hele sidens opsætning
table{} Definerer indholdet af tabeller på hele sidens opsætning
tr{} Definerer indholdet af tr på hele sidens opsætning
th{} Definerer indholdet af th på hele sidens opsætning
td{} Definerer indholdet af td på hele sidens opsætning
dd{} Definerer indholdet af dd på hele sidens opsætning
p{} Definerer indholdet af p på hele sidens opsætning
div{} Definerer indholdet af en div på hele sidens opsætning
hr{} Definerer indholdet af en sort streg på hele sidens opsætning
a{} Definerer udseenet af alle link på den side
klassenavn:hover{} Definerer udseenet af et element som musen holder sig over fx: a:hover
klassenavn:active{} Definerer udseenet af et aktivt element fx:a:active
klassenavn:inactive{} Definerer udseenet af inaktivt element fx: a:inactive
klassenavn:visited{} Definerer udseenet af et besøget element fx: a:visited
klassenavn:unvisited{} Definerer udseenet af et ikke besøget element fx: a:unvisited
@keyframes @keyframes navn. Navn bør beskrive hvad keyframen laver eller er tilknyttet fx loop. Keyframes er som video=billedsekvenser det gør det muligt at animere med CSS.
@media @media only screen and (max-width:620px) {skal indholde de klasser, der definerer divboksene på siden  fx: {.header, .menu, .left, .main, .right}
.klassenavn vælg selv et beskrivende navn for det element du vil styre designet af. Husk punktum før navnet.
 

Beskrivelse inde i {}:

Dette er blot nogle af de mest anvendte, der er mange flere endnu:
  • background-color:;
  • color:;
  • text-align:;
  • text-style:;
  • text-decoration:;
  • box-sizing:;
  • border:;
  • margin:;
  • margin-top:;
  • margin-left:;
  • margin-right:;
  • width:;
  • height:;
  • float:;
  • padding:;
  • font-family:;
  • font-size:;
  • overflow:;
 

CSS Fortegn . # @:

  • .klassensNavn (punktktummet definere en klasse men tages ikke med når man referer til den) fx: class=”klassensNavn”
  • Nogle klasser har ikke punktum, det er fx: body, table, div mm som derved styrer ALLE elementer med det tag på HELE siden
  • # definerer en id men tages ej heller med når der refereres til den fx: id=”id navn”
  • Brug @ bruges fx: ved @media @keyframes