HTML menu kort

Basis tags

I xhtml findes der 3 typer tags.

1.       De selv afsluttende: <tag />

2.       Containers: <tag></tag>

3.       Untangles: <!>

Både selv afsluttende og Container tags skrives med små bogstaver.

Selv afsluttende tags bruges til ting der ikke kan inde holde andre tags eller tekst, så som billeder og linje skift.
Container tags er det mest normal og kan best visualiseres som en kasse, det er vigtid at nævne at container tags skal aflutes i den række følge de er blevet started, fx. Ville dette ikke virker
 <u><strong>Computer</u>Software</ strong>
Browseren vile se det som en fejl og afslutte <b> når den støder på enden af <u>. Computer bliver påvirket af både <u> og <b> men Software bliver ikke påvirket af nogen. Den korekte måde at skrive det på er.
<strong><u> Computer</u> Software</strong>
Her bliver Computer på virket af både <u> og <b>, men her Software stadig påvirket af <b> Som det var meningen.
Undtagelses tags bruges oftest til at skrive kommentar i koden og i få tilfælde til indstillinger i browseren.

En blank side

Det først en hver html fil bør starte med er DOCTYPE, dette fortæller browseren hvilken version af html du brugere og der for hvordan den skal tegne den, den nyest og den jeg nok vil foreslå er XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

En anden der også er acceptabel og tillader et mere rodet html er XHTML 1.0 Transitional, denne tillader at man brugere en hel del ellers forældet tags og attributter, den er dog kun ment til brug for folk der opgradere en side fra et ælder format som HTML 4.01 (Der for Transitional).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Det næste vi ser, er <html> tagget som åbner for selve koden, i et XHTML indeholder den et xmlns tag der beskriver formatet.

<html xmlns="http://www.w3.org/1999/xhtml">

Som det første definere vi <head></head> (der kan kun være et af disse) Dette tag indeholder tags med ekstra information til browseren, så som hvilket sprog siden er skrevet i. Inde i head taget skal der som minimum være skrevet titlen på siden det gøres med <title></title> (der kan kun være et af disse) tagget og inden i det skrives titlen på siden (kan kun inde holde tekst). Efter head finder vi <body> (der kan kun være et af disse) tager som definere det vindue hvor i du kan tegne din side og til sidst i dokumentet afsluttes </html> tagget.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
                             <title></title>
</head>

<body>
</body>
</html>

Dette er det absolutte minimum en side kan inde holde, og hvis en side ikke inde holder disse er der fejl på siden og ingen kontrol over hvor dan en browser vælger at tolke siden (noget der i forvejen er lidt løst), sørg altid for at have dette på plads som det først ellers risikere du at hele siden ser anderledes ud når du endelig indsætter det.

Meta tags

Meta tags er tags er tags der kun kan bruges inde i <head> tagget, de vigtigste af dem er.

<meta />
Meta bruges til at indstille browseren, mest hyppigt ved at inde holde http information, vi af dens to attributter http-equiv=”” som indeholder navnet på den http kommando do som er tilsvarende og content=”” som inde holder indstillingen, et eksempel kunde være:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Dette fortæller browseren at teksten er gemt i formatet uft-8 (ofte kaldet unicode) dette har betydning for hvordan speciale tegn som æøå m.m. læses fra filen. Utf-8 er klart det bedste format da den indeholder stortset all tegn fra alle sprog og er indbygget in alle bare nogen lunde browsere og operativ systemer siden 1999, vær dog opmærksom på at det ikke bare er nok at skrive det i filen den skal også være gemt i det format.

<link />
Link bruges til at hægte fil til siden, så som eksterne CSS (Cascading Style Sheets) filer som bruges til at lave layout og udsende på siden. Eks. Her linkes der til style.css filen som er et stylesheet af MIME typen text/css.
<link href="style.css" rel="stylesheet" type="text/css" />

<title></title>
Title tagget bruges udelukkende til at skrive titlen på siden, indholdet af dette felt kommer til at stå i toppen af browseren og som over skriften i en Google søgning, sørg altid for at den inde holder en korrekt og nyttig overskrift til siden (kan kun inde holde tekst).

Body tags

Her vil jeg gennem gå de mest anvendte visuelle tags samt deres vigtigste attributter.

Attributter vil bliver skrevet som en liste og deres mulige værdier som en liste under punktet.

Der findes 2 hoved former for elementer block og inline. Block elementer har en fast firkanted form og vil automatisk lave et linje skift, inline kan ses som en slaks markering af sit indhold der ikke flytter på elementerne.

Følgende tags er all block tags.

<p></p>

P er en simpel paragraf den inde holder som regel en tekst blok moske med et billede eller to.

<div></div>

Div fungere på stort set samme måde som <p> men er mere brugt til at rumme og placere støre dele af en side så som brød tekst feltet eller en menu linje.

<address></address>

Address bruges til at skrive ens adresse i, det hjælper blinde og søge maskiner med at navigere en side.

<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

H1-6 bruge til at nemt at style din side og peger søgemaskiner til de vigtige dele af siden.

<marquee></marquee>

Marquee er entlig ikke et standard tag men det understyttes efterhånden af all støre browser, dens funktion er at lave en simpel lys avis, altså at få dens indhold til at scrolle hen over skærmen.
Attributter:

<ol></ol>

En numbered liste (kan kun inde holde <li> tags).
Attributter:

<ul></ul>

En punktliste (kan kun inde holde <li> tags).
Attributter:

<li></li>

List item, et punk i en liste.
Attributter:

<del></del>

Udstreget, tekst som er blevet slettede udstreget fra siden, det hjælper blinde og søge maskiner med at navigere en side.
Attributter:

<ins></ins>

Tekst der er blevet indsat på siden, det hjælper blinde og søge maskiner med at navigere en side.
Attributter:

<table></table>

Starter en tabel (kan kun inde holde <tr>, <thead>, <tfood>, <tbody>, <caption> og <colgroup> ).
Attributter:

<caption></caption>

Indsætter en overskrift på en tabel (skal skrives inden i et <table>).

<tr></tr>

Starter en ny række i en tabel (kan kun indeholde <td> og <th>,  skal skrives inden i et <table>, <thead>, <tfood> eller <tbody>).

<td></td>

Indsætter en celle i en række i en tabel (skal skrives inden i et <tr>).
Attributter:

<hr />

Laver en linje gennem siden
Attributter:

<a></a>

A er det der buges til at lave links mellem sider, uden det ville man nærmest ikke kunde navigere på nette.

 <img alt="" src="" />

Img bruges til at indsætte billeder med, som standard vil billed opføre sig som et bogstav, det vil sige at det kun benytter en tekst linje uanset hvor højt det er.

 <br />

Et simpelt tvungent linje skift.

 <span></span>

I sig selv har span ikke nogen function, der er blot en simple markering af dens indhold, den vil dog være undværelig når man går I gang med at style sin side med css.

 <em></em>

Hentyder at der skal tryk på udtalen af den indehold, visuelt vil den lave teksten kursiv.

 <strong></strong>

Hentyder at der skal lægges vægt på udtalen af den indholet, visuelt vil den lave teksten fed.

 <cite></cite>

Bruges til at makere et citat i teksten.

 <big></big>

Bruges til at makere en tekst der skal skrives med stor type.

 <small></small>

Bruges til at makere en tekst der skal skrives med lille type.

 <sub></sub>

Bruges til at makere en tekst der skal skrives under grund linjen som i H2O.

 <sup></sup>

Bruges til at makere en tekst der skal skrives over grund linjen som i E = mc2.

 <acronym></acronym>

Bruges til at makere en bogstavs forkortelse (fx. WWW).

 <abbr></abbr>

Bruges til at makere en forkortelse (fx. st.).