Uppgift 1a: XHTML 1.1
XHTML 1.1 Tutorial
XHTML är ett språk som använder HTML-språkets vokabulär och XML-språkets syntax. Taggar
och element är i stort sett identiska med de i HTML, men tack vare XML:s grammatik, kan de
tolkas av XML-användaragenter. En av de största fördelarna med XHTML, förutom att den är
kompatibel med både XML och HTML, är flyttbarheten av webbsidor. I och med de strikta
kodningsreglerna blir man mindre beroende av vilken webbläsare som används. Eftersom XHTML
skrivs i XML finns det också möjlighet att utöka språket genom att skapa egna taggar.
XHTML 1.1 är en standard för att strukturera innehåll i vanliga webbläsare. Den är
modulbaserat. Varje (icke-tomt) element i ett XHTML-dokument består av en starttagg,
en sluttagg och elementets innehåll. Med andra ord utgör innehållet samt
start- och sluttaggen ett element.
Denna tutorial presenterar och förklarar XHTML 1.1-taggar från nedan listade moduler.
Klicka på länkarna nedan för att komma till respektive sektion:
<base></base>
Är del av <head>-elementet och anger dokumentets bas-URL. Möjliggör
omvandling av relativa länkar i ett dokument till absoluta länkar genom att kombinera
dem med bas-URL:en för dokumentet. Tar <href>-attribut.
<img></img>
En bild läggs in med hjälp av ett <img>-element. Detta är ett tomt
inline-element, som tar två erforderliga attribut, src och alt.
Attributet src ger adressen för bilden som ska laddas och alt tar
ett strängvärde som visas om grafikfilen inte kan visas av någon anledning. Dessutom tar
<img>-elementet en rad alternativa attribut vilka kan ersättas med formarmallar.
Den generella syntaxen för <img>-elementet är:
<img src="[adress eller sökväg till bilden]" alt="beskrivande text" />
Här är två animerade gif-bilder! 
<area></area>
<area>-elementet definerar ett klickbart område i en bildkarta på
klientsidan med hjälp av ett antal attribut. Attributet shape definerar formen
på det klickbara området, coords definerar storleken och läget på kartan i antal
pixlar, href definerar länkens adress mm. Tillåtna värden för shape
attributet är circle, rect och poly. Standardvärdet är
rect.
<map></map>
Med hjälp av ett <usemap>-attribut inuti <img>-elementet
länkar man till ett <map>-element.
<map>-elementet måste ha ett <name>-attribut för att
unikt kunna identifiera en bildkarta.
<map>-elementet innehåller "områdeselement" som ger information om bildens
länkområden. <map>-elementet måste innehålla minst ett
<area>-element.
Testa genom att klicka på olika planeter på bilden:
<del></del>
Används för att visa texten som har raderats för att uppdatera ett dokument.
Tar olika attribut som, t.ex. <id>, <class>,
<style>, <title> och <cite>.
<ins></ins>
Används för att visa texten som har infogats för att uppdatera ett dokument.
Tar olika attribut som, t.ex. <id>, <class>,
<style>, <title> och <cite>.
<button></button>
Används för att förseen webbsida med en kommandoknapp med en bild på. Det finns ingen standardtitel,
så titeln måste anges med value-attributet. För att denna knapp ska skicka till
servern, måste den associeras med JavaScript-händelser. Tar attribut som <id>,
<class>, <style>, <title>,
<name> och <type>.
<fieldset></fieldset>
Används för att gruppera formulärfält. Tar attribut som <id>,
<class>, <style> och <title>.
<form></form>
Ett formulär infogas med hjälp av <form></form>-taggar.
Formuläret behöver inte utgöra en hel sida, utan det är möjligt att ha ett eller flera
små formulär bland annat innehåll. <form>-elementet tar ett antal
attribut, som <action>, <method>, <name>,
<target> och <enctype>.
<input/>
<input>-elementet är ett tomt element. Används för att ange ett formulärs
inmatningsobjekt. <input>-elementet måste namges om det ska vidarebefodras
till servern.
<label></label>
Används för att ge en "etikett" till formulärobjekt som i vanliga fall inte har
någon text, exempelvis textfält, kryssrutor och listor. Själva etiketten blir märkets
innehåll. Tar attribut som <id>, <class>,
<style> och <title>.
<legend></legend>
Används för att rubricera en fieldset-gruppering. Tar attribut som <id>,
<class>, <style> och <title>.
<select></select>
Används för att skapa en lista med alternativ från vilken användaren kan välja ett alternativ.
Tar attribut som <id>, <class>, <style>
och <title>.
<optgroup></optgroup>
Används för att gruppera elementen i listor och på så sätt skapa hierarkiska menyer eller
alternativlistor i ett formulär. Ska stå inuti <select> och ska ha ett
eller flera <option>-märken. Tar attribut som <id>,
<class>, <style> och <title>.
Attributet <label> måste alltid finnas.
<option></option>
Används för att definera varje val i en <select>-lista. Tar attribut som
<id>, <class>, <style> och
<title>.
<textarea></textarea>
Används för att definiera ett inmatningstextfält med flera rader.
<class>-elementet skapar alltså en stor ruta att skriva text i.
Tar attribut som <id>, <class>, <style>
och <title>.
Attributen <rows> och <cols> anger storleken på
textområdet och måste alltid finnas.
Exempel:
<a></a>
Ankartaggen ("a" står för ankare) är ett element som XHTML använder för att inefatta
information om hyperlänkar. Det kan användas som länk till ett annat dokument eller som
en markör för en annan länk att peka till, beroende på givna attribut.
<a>-elementet accepterar flera attribut, bl.a.
<id>, <class>, <style>,
<title>, <type>, <name> och <href>.
Relativ länk
En relativ länk är där man placerar informationen som behövs för att komma till
målet, då den relaterar till den nuvarande positionen. Relativa länkar kan gälla filer
i samma mapp eller i olika mappar.
Den relativa länken till filen i samma mapp anges med
<a href="filnamn.htm">Klickbart ord</a>.
Här är en relativ länk till en annan sida i samma mapp.
För den relativa länken till filen i annan mapp måste katalogstrukturen anges på följande
sätt
<a href="mapp1/mapp2/filnamn.htm">Klickbart ord</a>.
Absolut länk
En absolut länk är en som tillhandahåller den fullständiga specifika adressen till
en fil på en annan server.
Den absoluta länken anges på följande sätt
<a href="http://www.dsv.su.se">Klickbart ord</a>.
Här är en absolut länk till institutionens hemsida.
Länk med ankare
En av de vanligaste användningarna av länk med ankare är långa dokument.
Ankare gör att man kan enkelt kan hoppa från början av dokumentet till en specifikt plats
i samma dokument eller ett annat dokument.
Ett exempel är länkarna i början av detta dokument, som leder till respekive avsnitt.
Ankarelementet används som källa för att identifiera och peka till målets namn eller id på
följande sätt
<div><a href="#hypertext">Hypertext</a></div>.
Målankarelement, ett id- och ett name-attribut, har samma värde för att få länkarna att
fungera i både gamla och nya läsare.
<h2><a id="hypertext" name="hypertext">Hypertext</a></h2>
För att öka navigationen i ett dokument kan man även göra länkar som leder tillbaka till
indexet.
Bild-länk
Bilder och loggor kan användas som länkar enligt följande syntax:
<a href="[adress]"><[bildelement] /></a>.
Testa länken genom att klicka på bilden!
Länk till olika protokoll
Det går också att länka andra protokoll är http, t.ex. Gopher, WAIS och FTP. För att
använda ftp-protokollet måste man specificera en absolut adress med ftp:// som protokoll.
<a href="ftp://[mappens eller filens adress]">text</a>
Här är en länk som använder
ftp-protokoll.
Mail to-länk
Detta är ett sätt att ringa upp en e-postklient för att skicka e-post:
<a href="mailto:e-post adress">text</a>.
Genom att klicka på länken får man upp klienten med destinationsadressen ifylld:
E-post till Blanca
Genom att lägga till en frågesträng efter e-post adressen kan man skicka en ämne-rad,
en kopia-rad och standardtext till e-postklienten.
<dl></dl>
En definitionslista lista olika objek som måste defineras. Denna typ av lista kan
vara särskilt användbar för en lång lista med termer.
<dt></dt>
Definitionstermen innehåller den term som ska definieras i definitionslistan.
<dd></dd>
Definitionsbeskrivningen innehåller den beskrivning som beskriver den definierade
termen.
Exempel:
Här är ett exempel på en definitionslista.
- Element
- Ett element består av elementets taggar och innehåll
- Elementattribut
- Attributet är ett av elementets egenskaper
- Attributvärde
- Strängvärdet som givits elementet. Måste anges innom citattecken.
<ol></ol>
Är ett element för att skapa en ordnad lista. Varje ny rad markeras med en siffra
eller bokstav. Ett ordnat listelement kan endast innehålla listobjektelement. Listorna
kan nästlas, så att en ny lista ingår i ett listobjekt.
Numrerinssystemet kan ändras
med hjälp av ett "typ"-attribut. Typattributet för en oordnad lista kan anta värdet "l" -
arabiska siffror, "a" - små alfa, "A" - stora alfa, "i" - små romerska eller "I" - stora
romerska. Standard är arabiska siffror.
Exempel:
Här är ett exempel på en nästlad ordnad lista.
- Töm fickor på alla lösa föremål
- Placera tvätt i maskinen
- Välj tvättprogram
- Välj önskad temperatur
- Välj förtvätt/huvudtvätt
- Välj centrifugering
- Tryck start
<ul></ul>
Är ett element för att skapa en oordnad lista. Varje ny rad markeras med en punkt.
Ett oordnat listelement kan endast innehålla listobjektelement.
Punkttypen kan ändras
med hjälp av ett "typ"-attribut. Typattributet för en oordnad lista kan anta värdet
circle, disc eller square. Standard är disc.
Listorna kan nästlas, så att en ny
lista ingår i ett listobjekt.
Exempel:
Här är ett exempel på en nästlad oordnad lista.
- Protein
- Fett
- Enkelomättad fett
- Fleromättad fett
- Mättad fett
- Kolhydrat
<li></li>
Varje objekt i listan måste ingå i ett listobjektelement. Dessa listobjektelement
kan innehålla nästan vad som helst.
<link></link>
<link>-elementet har många olika syften. Med hjälp av
den kan man länka till en formatmall (style sheet). Den kan också användas som ett
hjälpmedel för att innefatta adressen till en annan sida i form av en URL. Det enda
nödvändiga attributet är <type>-atributtet, som beskriver mediatypen.
Metainformation beskriver egenskaper av det dokumentet den tillhör. Metainformation är
information om vilken typ av dokument det är, dess namnutrymme, namnet eller titeln på
dokumentet, dess form o.s.v. Allt detta finns i dokumentets huvud och överförs genom
en uppsättning elementtyper, attribut och deras värde.
<meta></meta>
Är en del av <head>-elementet och används för att överföra information
om <meta>-innehållet i ett dokument. Det tar följande attribut:
<name>, <http-equiv>, <content> och
<scheme>. <content>-attribut måste alltid vara med samt
antingen <name> eller <http-equiv> eller båda.
<scheme>-attributet är valfritt. Man kan använda hur många
<meta>-element som hels i <head>-avsnittet på ett
dokument.
"name"-attributet
<name>-attributet används framför allt då <content>
-attributet är avsett att tolkas av läsaren eller någon annan användaragent. Man kan
använda vilket namn man vill, men vissa namn har en väldefinierad innebörd, t.ex.
keywords och description. Andra möjliga värden är: author,
classification, copyright, formatter, generator,
rating och robots,
"author"-värde
Används för att ange namn och adress till webbsidans författare:
<META name="author" content="Blanca Larkeson">
<http-equiv>-attributet kan användas istället för
<name>-attributet.
"description"-värde
Används för att informera användaragenten att <content>-attributet
innehåller en kortare beskrivning av sidan.
"generator"-värde
Denna tag brukar många HTML-editorer automatiskt lägga till författarens HTML-kod.
Används för att identifiera den mjukvara med vilkens hjälp webbsidan har skapats:
<META name="generator" content="Microsoft FrontPage 4.0">
"http-equiv"-attributet
När <http-equiv>-attributet används, tolkas informationen som finns i
<content>-attributet som om det fanns i HTTP-huvudet. Kan användas
tillsammans med attributvärdet refresh för att automatiskt uppdatera en
webbsida.
"keywords"-värde
Används för att informera användaragenten att <content>-attributet
innehåller en kommateckenseparerad lista med nyckelord:
<META name="keywords" content="XHTML, HTML, tutorial, webdesign">.
"robots"-värde
En robot är ett datorprogram som automatiskt söker igenom webben, hämtar dokument och de
dokument som är länkade till de. En robot är programmerad att leta efter särskild
information och automatiskt överföra den till en databas.
En del robotar hittar informationen genom att titta bara på de första raderna i ett
dokument eller innehållet i <meta>- och <title>-taggarna
medan andra söker igenom hela dokumentet.
robots-värde anger om sökrobotar får indexera sidan och om länkarna får följas.
Vill man undvika att sidor indexeras av sökrobotar eller att länkar på sidan ska
följas, kan man göra det med hjälp av attributvärden noindex och nofollow:
<meta name="robots" content="noindex, nofollow">.
Det finns följande attributvärden för robots:
all - sidan får indexeras och länkar får följas (index, follow)
>
none - sidan får ej indexeras och länkar får ej följas (noindex, nofollow)
index - sidan får indexeras
follow - länkar får följas
noindex - sidan får ej indexeras
nofollow - länkar får ej följas
<object></object>
<object>-elementet gör att vilket objekt som helst, t.ex. en sida med
text, en bild, en multimediafil eller ett Active X-objekt, kan bäddas in i webbsidan.
<object>-elementet tar data-attributet, vilket specificerar filen som
objektet kommer ifrån:
<object data="Filnamn.txt" height="250" width="350" />
<param></param>
<param>-element används tillsammans med applets och har som funktion
att skicka tilläggsinformation till miniprogrammet och bestämma olika parametrar.
<param>-element tar namn- och värdeattribut och man använder ett separat
<param>-element för varje parameter som man vill tillföra.
<b></b>
Bold återges som fet text.
<big></big>
Big återges som större text än bastexten.
<hr />
Är ett tomt formatelement som skapar en horisontell linje längs sidan. Elementet
fungerar endast i visuell media, det skapar ingen effekt i andra media.
<i></i>
Italic återges som kursiv text.
<small></small>
Small återges som mindre text än bastexten.
<sub></sub>
Sub återges som nedsänkt text.
<sup></sup>
Sup återges som upphöjd text.
<tt></tt>
True Type återges som text med fast teckenbredd.
<noscript></noscript>
Är en del av <head>-dokumentet och används för att ge alternativt
innehåll när skript inte är tillgängligt. Tar attribut som <id>,
<class>, <style> och <title>.
<script></script>
Är en del av <head>-dokumentet och används för att inkludera skriptsatser.
JavaScript eller vilket skriptspråk som helst, kan bäddas in i webbsidan för att
skapa ett samspel mellan sidan och personen som visar den med hjälp av detta element.
Tar attribut som <charset>, <type>,
<src> och <defer>. <type>-attributet
är obligatoriskt.
<body></body>
Dokumentets kropp är dokumentets väsentliga del, eftersom det är den delen som skall
visas i browserns fönster för att läsas. Dokumentkroppen kan innehålla, förutom vanlig
text, även rubriker, stycken, listor, tabeller, kommentarer och koder.
<head></head>
Dokumenthuvudet innehåller viktig information om dokumentet, såsom en titel,
metainformation, länkningsinformation, formatinformation, olika objekt, skript
samt base. Denna information visas vanligtvis inte i browsern.
De element som tillåts i ett dokumenthuvud är:
<title>, <link>, <meta>, <object>, <style>, <script>
och <base>.
Enligt XHTML-reglerna måste <title>-elementet alltid vara
det första elementet och alltid finnas med.
<html></html>
Talar om att det är ett HTML-dokument.
<title></title>
Dokumenttiteln finns i dokumenthuvudet, mellan dokumenthuvudets start- och sluttag.
Titeltaggen används av sökmotorer, och bör alltid används även om den inte visas i
browser-fönstret.
Exempel:
<html>
<head>
<title>Här ska man ange en dokumenttitel</title>
</head>
<body>
Här ska man skriva det som ska läsas i browser-fönstret.
.......
</body>
</html>
<caption></caption>
Detta element är valfritt, men när det tas med, måste det vara det första elementet
i tabellen.
<col></col>
Används för att utmärka en tabellkolumn. Tar olika attribut som, t.ex.
<id>, <class>, <style> och
<title>.
<colgroup></colgroup>
Används för att utmärka en tabellkolumngrupp. Tar olika attribut som, t.ex.
<id>, <class>, <style> och
<title>.
<table></table>
Detta element omgärdar hela tabellkonstruktionen. Det kan innehålla följande
element: <caption>, <thead>, <tfoot>,
<tbody> och <tr>.
<tbody></tbody>
Detta element är valfritt, men om det tas med, måste det visas efter
<thead> och <tfoot>-elementen.
<td></td>
Representerar en standardcell. Kan innehålla alla typer av XHTML-element liksom
vanlig text. Detta element finns alltid inom ett <tr>-element.
<tfoot></tfoot>
Detta element är valfritt, men om det tas med, måste det visas mellan
<thead> och <tbody>-elementen.
<th></th>
Används vanligtvis för en cell i ett tabellhuvud och texten blir oftast fet och
centrerad. Kan innehålla alla typer av XHTML-element liksom vanlig text. Detta element
finns alltid inom ett <tr>-element.
<thead></thead>
Detta element är valfritt, men om det tas med, måste det visas förre
<tfoot> och <tbody>-elementen.
<tr></tr>
Detta element märker upp raderna i tabellen. <tr>-element kan ingå
antingen direkt i <table>-elementet eller i elementen <thead>,
<tfoot> och <tbody>. När någon av dessa tre tabell-
undersektioner är närvarande kan inte <tr>-element ingå direkt i tabellen.
<tr>-element kan endast innehålla <th>- och
<td>-element.
Exempel:
En XHTML-tabell
| Januari | Februari | Mars |
|---|
| Simning & Styrketräning | Spinning |
| Aerobics | Gympa | Jogging & Streching |
| Step-up | Body-pump |
<abbr></abbr>
Abbreviation är ett beskrivande element. I de flesta läsarna bär det ingen stilistisk
eller struktuell semantik.
<acronym></acronym>
Acronym är ett annat beskrivande element. I de flesta läsarna bär det ingen stilistisk
eller struktuell semantik.
<address></address>
Används till e-postadresser och talar om vem eller vilket företag som läsaren kan
vända sig till angående den aktuella sidan. Webmasterns adress visas i kursiv stil:
blanca-l@dsv.su.se
<blockquote></blockquote>
Blockquote används för att visa citat. Det finns vertikalt tomt utrymme före och efter
elementet, samt ett vänster- och högermarginalsindrag.
Exempel:
"Här är lite text som ska exemplifiera användning av blockquote-taggen.
Blockquote-elementet är avsett för citat och skapar ett blockcitat med indragna
vänster- och högermarginaler. Citattecken runt texten gör att det ser extra snyggt."
<br />
Fast linjeskift är ett tomt formatelement som motsvarar en radbrytning, dvs det skapar
en ny rad. Används när man vill att texten alltid ska separeras på ett bestämt ställe.
Elementet fungerar endast i visuell media, det skapar ingen effekt i andra media.
<cite></cite>
Cite används för just citat. De flesta läsarna återger detta som kursiv
text.
<code></code>
Code är ett beskrivande element återgivet som teckensnitt med fast
teckenbredd i de flesta läsarna.
<dfn></dfn>
Definition är ett beskrivande element återgivet som kursiv stil i de
flesta läsarna.
<div></div>
Division är ett block-element och används ofta med formatmallar (style sheets).
Det finns en radbrtning före och efter elementet utan något vertikalt tomt utrymme.
<em></em>
Emphasis är ett beskrivande element återgivet som kursiv stil i de flesta
läsarna.
<h1></h1>
Det finns sex olika rubriknivåer, med teckenstorlek från 10 punkter upp till 24 punkter.
Alla rubriker har en över- och undermarginal.
Exempel:
Nivå 1 rubrik
Nivå 2 rubrik
Nivå 3 rubrik
Nivå 4 rubrik
Nivå 5 rubrik
Nivå 6 rubrik
<kbd></kbd>
Keyboard återges som text med fast teckenbredd som påminner om
gammaldags skrivmaskinstext.
<p></p>
Paragraph-taggen underlättar läsbarheten av en text genom att dela upp den i stycken,
med hjälp av en blankrad före och efter textstycket.
<pre></pre>
Läsarna (browsrar) minskar vanligtvis det tomma utrymmet i källdokumentet till ett
enkelt mellanslag. Preserve-taggen används när man vill behålla formateringen i
förälderdokumentet. De flesta läsarna visar pre-elementet i teckensnitt där tecken
är lika stora, t.ex. Courier New.
Exempel:
Här är lite text som visar hur pre-taggen fungerar:
Osten innehåller mjölkens värdefullaste beståndsdelar.
För att framställa ett kilo ost
går det åt ca 10 liter mjölk.
Fetthalten varierar med ostsorten.
<q></q>
Quotation är ett beskrivande element. I de flesta läsarna bär det ingen stilistisk
eller strukturell semantik.
<samp></samp>
Sample är ett beskrivande element återgivet som teckensnitt med fast
teckenbredd i de flesta läsarna.
<span></span>
Span är ett in-line element som definierar ett textintervall, men orsakar ingen
radbrytning. Används som ett hjälpmedel för format- eller class-attributet.
<strong></strong>
Strong är ett beskrivande element återgivet som starkt betonad
text i de flesta läsarna.
<var></var>
Variable är ett beskrivande element återgivet som kursiv text i de
flesta läsarna.
