Markup-tags
bruges til at vælge fonts, lister, links osv.
Det ser ud som følger:
<tag> tekst som berøres af tag </tag>
Eksempel: <p> afgrænser et afsnit </p>.
Undtagelse: <br> skifter linie. Der findes
ikke noget </br>.
Case sensitivity: Tags kan skrives med store eller små bogstaver som man ønsker det. HTML er ikke case-sensitive.
Fordi < og > og & har specielle betydninger for HTML findes der "escape sequences" nemlig <, > og & for disse tegn. Der er mange andre.
Semikolon ";" afslutter en kommando uden at indsætte noget plads.
<title> dokument titel</title> . Bemærk at dokumenttitlen optræder aller øverst i browser-titel-linien.
<hL> Overskrift på niveau L</hL> . Optræder i teksten. Overskriften giver automatisk et nyt afsnit. h1 er mest fremtrædende (størst, fedest osv), h6 er mindst fremtrædende. Udseendet bestemmes af browseren. Eksempler:
Vi kan også indsætte kommentarer i HTML-filer med <!-- kommentar som man kan se i kildefilen men som browseren ikke viser -->
Hypertext links:
<a href="scheme://host.domain[:port]/path/filnavn"> anker (info
om hvad der linkes til)</a>
Eksempel:
JH's hjemmeside
Scheme kan være mange ting fx
file: Lokal fil
http: fil på www server
gopher: fil på Gopher server
wais: Fil på WAIS server
news: Fil på nyheds server
telnet: Fil på telnet baseret server
ftp: Fil på ftp baseret server
E-mail links:
<a href="mailto:email adresse"> anker (info
om hvad der linkes til)</a>
Eksempel:
mail til JH
Links i denne fil (fil1) til et bestemt sted i en
anden fil (fil2):
I fil2:
Her er et <a name="linklabel"> bestemt sted (anker)</a>
I fil1:
Her er mit <a href="fil2#linklabel"> link til fil2 (anker)</a>
Vi illustrerer det med
Links i denne fil (fil1) til et bestemt sted i den
samme fil (fil1):
I fil1:
Her er et <a name="linklabel"> bestemt sted (anker)</a>
I fil1:
Her er mit <a href="#linklabel"> link til fil2 (anker)</a>
Eksempel:
Her er mit link til titlen.
Bemærk: For at kunne linke til et
bestemt sted i en anden fil skal man kunne skrive i
den. Medmindre der allerede ligger ankre i den anden fil. Så kan
man bruge dem.
Lister:
Unummererede Lister:
<ul>
<li> list item </li>
<li> list item </li>
<li> list item </li>
</ul>
Eksempel:
Præformatteret tekst
Som verbatim i LaTeX: Alt gengives som det er skrevet.
Dog virker links som links og <, > og & som HTML-kode.
<pre> tekst som berøres af tag </pre>
Eksempel:
Her går det godt. Vi kan skrive sjove tegn som #, %, " osv, men links virker som links JH's hjemmeside igen. Linieskift respekteres i pre i modsætning til udenfor.
Lange citater:
<blockquote> tekst som berøres af tag </blockquote>
Eksempel:
Her går det godt. Vi kan skrive sjove tegn som #, %, " osv, men links virker som links JH's hjemmeside igen igen. Linieskift sker når der er brug for det, så det kan være svært at lave tekst der fylder flere linier hvis man har en skærm med høj opløsning. Men man kan jo altid gøre browser-vinduet lidt mindre.
Adresser:
<address> tekst som berøres af tag </address>
Eksempel:
<address> Hvis du har kommentarer skriv da venligst til <a href="mailto:hugger@math.ku.dk">Jens hugger</a> </address>
Normalt det sidste i filen. Indeholder typisk en e-mail adresse på den
ansvarlige for siden og en dato for sidste opdatering af
siden. Se eksempel nederst i denne fil.
Bemærk: Bruges ikke til
gadeadresser. Her bruges <BR>.
Bogstavformattering:
Som i LaTeX er der 2 muligheder:
Logisk stil: "Emphasize this".
Fysisk stil: "Put this in bold".
Den logiske stil
anbefales. Så kan browseren vælge hvad den vil have:
<dfn> For et begreb der skal defineres </dfn> Definition
<em> Fremhævet tekst (ofte kursiv) </em> Fremhævet
<cite> Titler på bøger osv. </cite> Bogtitel
<code> Computer kode </code> Computerkode
<kbd> Keyboard indtastning </kbd> Keyboard INPUT
<samp> Computer status meddelelser </samp> Status meddelelse
<strong> stærkt fremhævet (ofte fed) </strong> Stærkt
fremhævet
<var> Når brugeren skal erstatte noget generisk med noget eksakt
(filnavn) </var> Erstatning af generisk
Den fysiske stil
bruges i specielle tilfælde. Så låses browseren til at vælge hvad
forfatteren ønsker:
<b> Fed (Bold) </b> Fed
<i> Kursiv </i> Kursiv
<tt> Skrivemaskinefont </tt> Skrivemaskinefont
Fonts
<font [color=farve] [size=størrelse]> tekst </font>
Eksempel med farve="green" og størrelse="+2"
Vandret linie:
<hr>
Eksempel:
Billeder:
<img src="filnavn" [height=højde] [width=bredde] [align={top,middle}] [alt="tekst"] >
Hvis browseren ikke kan vise billeder viser det teksten til "alt" i
stedet for.
Eksempel:
default tekst
(bottom aligned)
top aligned tekst
middle aligned tekst. PS: Lad højde og bredde
passe sammen, eller undlad den ene. Se hvad der sker ved
linieskift. Surt ikke.
Vi kan også referere til
Eksterne billeder:
<a href="billedURL" > anker </a>
Eksempel: Vi kan lade linket være et billede
som jo siger mere end hundrede ord:
Tabeller:
<table > definerer en tabel </table>
Hvis der er et argument
border
så får tabellen en ramme.
<caption > tabeltekst sættes default over tabellen </caption>
Hvis der er et argument
align=bottom
så sættes tabelteksten under tabellen.
<tr > tabel række </tr>
<th > tabel header celle (fed skrift) </th>
<td > tabel data celle </td>
Forskellige atributter kan gå ind i
datacelledefinitionerne TH og TD:
align={left,center,right}
valign={top,middle,bottom}
colspan=n
rowspan=m
nowrap
undgå orddeling i en celle
Eksempel:
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| data 1 | data 2 | data 3 |
| data 4 | data 5 | data 6 |
| Meget lang data 7 | data 8 | |
| Header 4 | data 9 | data 10 |
| data 11 | data 12 | |