Interaktion

Basic HTML

Et HTML dokument indeholder ALTID to dele:

1. <!DOCTYPE html>
Dette er ALTID den første linje I et html dokument. Det fortæller browseren at dokumentet bruger HTML5

2. Document tree
Disse koder kommer ALTID lige efter DOCTYPE. De definerer indhold og struktur af websiden

<html> </html>
Er html elementet selv. Det markerer ’start’ og ’slut’ på hele kodesiden. Det indeholder alle de andre elementer og kan refereres til som ’roden af the document tree’

<head> </head>
Indeholder elementer der giver informationer om selve siden

<body> </body>
Indeholder elementer der giver informationer om struktur og indhold på siden

 

 

 

 

 

 

2. Elements and tags
To elementer med ‘opening <>’ and ‘closing </>’ tags:
1.    <h1>tekst</h1>
2.    <p>liste af links:</p>

To empty tags (tags uden et closing tag):
1.   <br>                  (starter en ny linje)
2.   <img>       (identificerer et billede der skal vises)

 

3. Attributes
Attributes er kodet indeni et ’opening tag <>’ eller indeni et ’empty tag’. I hver attribute koder man ’attribute name’, ’et lighedstegn =’ og ’the attribute value’. Det anbefales at man bruger ’et spørgsmålstegn ?’ til at enclose all values.

Opening tags med attributes:
1. <a href=”eksempel.html”>     Denne har én attribute.
2. <a href=”eksempel.html” title=”eksempel tekst” class=”eksempel_link”>  Denne har tré attributes.

Empty tags med attributes:
1. <img scr”eksempel.gif” alt=”Eksempel logo”>

Boolean attribute (repræsenterer enten en ‘on’ eller ‘off’ value):
1. <input type=”checkbox” name=”mailList” checked>

To normale attributes til at identificiere HTML elementer:
1. <div id=”page”>   Dette er et opening tag med en id attribute som bruges til at identificere ét element
2. <a href=”eksempel.html” title=”Eksempel tekst” class”eksempel_link”>   Dette er et class attribute, som kan bruges til at markere én eller flere elementer

 

4. How to code comments and whitespace

 

 

 

 

 

1. Comment er tekst der kommer mellem <!– og –>. Webbrowsere ignorere comments, så de kan bruges til at beskrive eller forklare forskellige ting i HTML koderne i dokumentet. De kan også bruges til at skjule elementer man ikke vil have vist, når man fx tester en hjemmeside.
2. Whitespace indeholder tab characters, return characters og ekstra spaces. Whitespace ignoreres også af webbrowsere og kan hjælpe med at gøre dokumentet nemmere at læse.

 

5. How to include metadata


– Charset metadata er et krav til HTML validation <meta charset=uft-8”>

 

6. How to structure a page with the HTML5 elements

 

 

 

 

 

 

 

 

7. How to code links


 

 

 

 

 

 

 

8. How to code lists

 

 

 

 

 

 

 

 


Filer:
BOG: Murach’s HTML5 & CSS3 af Anne Boehm & Zak Ruvalcaba


Reflektion:
Nu har vi haft HTML undervisning 4-5 gange og jeg kan godt mærke at det er en udfordring for mig, men at jeg forbedrer mig mere og mere. Det er som at lære et helt nyt sprog. Jeg ser lige nu eksamensprojektet som en rigtig stor udfordring, men jeg glæder mig samtidig til at se hvor meget jeg egentlig har lært.