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 tilsrc
er attribute af<img>
det specificerer adressen til billedet, som viseswidth
ogheight
er attributer af<img>
det giver str. info på billederalt
er attribute of<img>
det giver en alternativ tekstboks som vises når musen holdes hen overstyle
attribute er brugt till at give stil til et element, somfarve(color), font(skrifttype), size(str.) og flere tillang
er attribute af<html>
tag det beslutter sproget af web sidentitle
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