Uppgift 1.1

Länkar	Länkar	Uppgifter	Servlets	Gesällprov
Text Hypertext Listor Objekt Presentation Editering	Formulär Tabell Bild och bildkartor Metainformation Skript Länk Bas	Uppgift 1.2 Uppgift 2.1 Uppgift 2.2 Uppgift 2.3 Uppgift 3.1.1 Uppgift 3.2.1 Uppgift 3.3	Uppgift 1.1.1 Uppgift 1.1.2 Uppgift 1.2.1 Uppgift 1.2.2 Uppgift 1.3 Uppgift 2.1 Uppgift 2.2 Uppgift 2.3	Gesällprov

Struktur
Tagg	Attribut	Beskrivning	Exempel
<html>	xml:lang dir xmlns	Den här taggen indikerar början på varje HTML-dokument. Den anger vilken version av HTML som tillämpas i dokumentet	<html> <head> <title> Exempel </title> </head> <body> detta syns i fönstret </body> </html>
<head>	xml:lang dir profile	Osynlig information. Inget som skrivs här syns i webläsaren. Måste innehålla <title>. Kan innehålla en mängd andra taggar som exempelvis <meta>, <link>, <script> och <style>.
<title>	xml:lang dir	Anger sidans titel, vilken visas högst upp i webbläsaren fönsterkant
<body>	id class style title xml:lang dir onload onunload	Allt som skrivs i BODY syns i webläsaren, det är alltså sidans kropp.

Text
Tagg	Attribut	Beskrivning	Exempel
<div>	id class style title xml:lang dir	Används för utfomning med formatmallar. Radbrytning före och efter ett element.	Här är texten<div>div avgränsad</div>. Här är texten avgränsad med div .
<span>	id class style title xml:lang dir	Definerar endast bara ett textintervall. Ingen radbrytning före eller efter ett element.	Här är texten<span>span avgränsad</span>. Här är texten span avgränsad .
<h1> <h2> <h3> <h4> <h5> <h6>	id class style title xml:lang dir	Detta är en rubrik, finns i 6 olika storlekar. Ingen radbrytning före eller efter ett element.	<h1>Rubrik 1</h1> Rubrik 1 <h2>Rubrik 2</h2> Rubrik 2 <h3>Rubrik 3</h3> Rubrik 3 <h4>Rubrik 4</h4> Rubrik 4 <h5>Rubrik 5</h5> Rubrik 5 <h6>Rubrik 6</h6> Rubrik 6
<p>	id class style title xml:lang dir	Ger ett extra radavstånd till texten som kommer efter	<p>Stycke 1 </p>, <p>Stycke 2.</p> Stycke 1 Stycke 2
<br/>	id class style title	Den gör en radbrytning i texten. Oftas fortsätter sedan browsern i vänstermarginalen på nästa rad.	Rad 1.<br/> Rad 2. Rad 1 Rad 2
<blockquote>	id class style title xml:lang dir cite	Elementet är beskrivande och stilistiskt semantik inbyggd. Den drar in en text, kan användas vid längre citat.	Här är texten <blockquote>block citerad</blockquote> Här är texten block citerad
<pre>	id class style title xml:lang dir xml:space	Används för att tex. visa källkoden i en browser. och när man vill visa en text precis så som det är skrivet i koden.	Här är texten <pre>förformaterad</pre>. Här är texten förformaterad text
<abbr>	id class style title xml:lang dir	Visar att en text är en förkortning inom taggen	Här är texten <abbr>förkortad</abbr> Här är texten förkortad
<acronym>	id class style title xml:lang dir	visar att texten inom taggen är en akronym	Här är texten <acronym>förkortad</acronym> Här är texten förkortad
<address>	id class style title xml:lang dir	Visar för läsaren att texten är en adress	Här är en<address>adress>/address> Här är adress
<cite>	id class style title xml:lang dir	Kan anvädas för att visa titel på en bok eller en xhtml uppgift. Texten blir lite kursiv	Här är ett <cite>citat</cite>. Här är ettcitat
<q>	id class style title xml:lang dir cite	Den här användas för kortare citat. Stöds inte ännu av de vanligaste browsrarna.	Här är ett <q>kortare citat</q>;. Här är ett kortare citat.
<dfn>	id class style title xml:lang dir	Används för att markera en definition. Det behöver inte bli något skillnad på texten i vissa browsar.	Här är texten <dfn>definerad </dfn>. Här är texten definierad.
<strong>	id class style title xml:lang dir	Används för att betona ett ord eller en mening i en text. Vanligtvis blir texten i fet stil.	Här är texten <strong>betonad</strong>. Här är texten betonad.
<em>	id class style title xml:lang dir	Talar om för browsern att texten skall emfaseras, normalt sätt blir texten kursiv.	Här är texten <em>emfaserad</em>. Här är texten emfaserad.
<kbd>	id class style title xml:lang dir	Antyder på att texten är skriven på ett tangentbord. Kan anvädas till manualer m.m.	Här används <kbd>tangentbords</kbd> text. Här används `tangentbords` text.
<code>	id class style title xml:lang dir	Kan användas för att visa upp källkod i browsen.	Texten ser ut som <code>kod</code>. Texten ser ut som `kod` text.
<samp>	id class style title xml:lang dir	Kan användas för att betona ett visst exempel i något program som tex. en output.	Här används <samp>kod output</samp> text. Här används `kod output` text.
<var>	id class style title xml:lang dir	Används för att ange namnet på en variabel som användaren ska ange till programet. Används oftast tillsammans med <code>.	Här används <var>kod variabel</var> text. Här används `kodvariabel` text.

Hypertext
Tagg	Attribut	Beskrivning	Exempel
<a>	id class style title xml:lang dir charset type href hreflang rel rev accesskey shape coords tabindex onfocus onblur	Skapar en länk, finns olika typer av länkar. Attributet "href" anger adressen	En absolut länk anger en fullständig adress. <a href="http://www.dojjan.info.se/">En absolut länk till en HTML-sida</a>: En absolut länk till världen coolaste sida. En relativ länk används för det mesta när man länkar till en sida på samma webbplats. Istället för att skriva ut hela adressen länkar man endast till det HTML-dokument man vill nå: <a href="index.htm">Relativ länk till en HTML-sida</a>: Relativ länk till en HTML-sida När man öppnar en e-post adress öppnas ett fönster så att man kan skicka e-post till adressen. <a href="kris-lau@fc.dsv.su.se">E-posta Krille</a>: E-posta Krille En bildlänk skapas genom att man inom <a>-taggen sätter in en bild: Länkning kan ske till andra protokoll än HTTP till som tex FTP: <a href="ftp://ftp.dsv.su.se/">En länkt till DSV via FTP</a>. En länkt till DSV via FTP. Man kan länka till en specifik del av sidan genom att sätta ut referenspunkter. <a id="struktur">En referenspunkt</a> . En referenspunkt. Så här gör man för att länka den: <a href="struktur">En länk till en referenspunkt</a> En länk till en referenspunkt.

Listor
Tagg	Attribut	Beskrivning	Exempel
<ul>	id class style title xml:lang dir	Skapar en oordnad lista med en prick framför elementet	`<ul> <li> Element 1 </li> <li> Element 2 </li> </ul>` Element 1 Element 2 `<ol> <li> Element 1 </li> <li> Element 2 </li> </ol>` Element 1 Element 2
<ol>	id class style title xml:lang dir	Skapar en ordnad lista, med en siffra eller en bokstav framför elementet.
<li>	id class style title xml:lang dir	Markerar en förekomst i en lista och används för oordnade listor <ul> och ordnade listor <ol>.
<dl>	id class style title xml:lang dir	Infogar en definitionslista som består av termer <dt> och definitioner av dessa termer <dd>.	`<dl> <dt> Term 1 </dt> <dd> Definition av Term 1 </dd> </dl>` Term 1 Definition av Term 1
<dt>	id class style title xml:lang dir	Används i en definitionslists för att markera en term.
<dd>	id class style title xml:lang dir	Markerar en definition i en definitionslista. Måste finnas inom en sådan lista och efter <dt>.

Objekt
Tagg	Attribut	Beskrivning	Exempel
<object>	id class style title xml:lang dir declare classid codebase data type codetype archive standby height width usemap name tabindex	Man stoppar in ett objekt eller ett äpple i dokumentet med hjälp av denna tag.	<object data="text.txt" width="250" height="150"></object>
<param/>	id name value valuetype type	Man skicka parametrar till ett objekt eller ett äpple med hjälp av denna tag.

Presentation
Tagg	Attribut	Beskrivning	Exempel
<i>	id class style title xml:lang dir	Ger ett ord eller en mindre mening en kursiv stil	Här blir texten i <i>kursiv</i> stil. Här blir texten kursiv stil.
<b>	id class style title xml:lang dir	Ger ett ord eller en mindre mening en fet stil.	Här blir texten i <b>fet</b> stil. Här blir texten i fet stil.
<tt>	id class style title xml:lang dir	Ger ett ord eller en mindre mening en skrivmaskins liknade stil.	Här blir texten i <tt>typewriter</tt> stil. Här blir texten i `typewriter` stil.
<big>	id class style title xml:lang dir	Text ökar storleken med en storlek.	Här blir texten i <big>stor</big> stil. Här blir texten i stor stil.
<small>	id class style title xml:lang dir	Text minskar storleken med en storlek.	Här blir texten i <small>liten</small> stil. Här bli texten i liten stil.
<sub>	id class style title xml:lang dir	Texten flyttas ner en liten bit, men har kvar samma storlek och typsnitt.	Här blir texten <sub>nedsänkt</sub>. Här bllir texten _nedsänkt.
<sup>	id class style title xml:lang dir	Texten flyttas ner en liten bit, men har kvar samma storlek och typsnitt	Här blir texten <sup>upphöjd</sup>. Här blir texten ^upphöjd.
<hr/>	id class style title xml:lang dir	En horisontell linje bildas av denna tagg.	<hr/>

Editering
Tagg	Attribut	Beskrivning	Exempel
<del>	id class style title xml:lang dir cite datetime	Ett ord eller en text får ett streck igenom sig.	Här får texten <del>ett streck igenom</del> sig. Här får texten ~~ett streck igenom~~sig.
<ins>	id class style title xml:lang dir cite datetime	Ett ord eller en text får ett streck under sig, kan användas för att markera något.	Den här texten <ins>får en understrykning</ins>. Den här texten får en understrykning

Formulär
Tagg	Attribut	Beskrivning	Exempel
<form>	id class style title xml:lang dir action method enctype onsubmit onreset accept acceptcharset	Infogar ett formulär. Attributet "action" anger vilket program som skall köras på HTTP-server-sidan när man trycker på sänd och attributet "method" anger vilken HTTP-metod (post eller get) som skall användas.	klicka här för exempel
<label>	id class style title xml:lang dir for accesskey onfocus onblur.	Används för att definiera en relation mellan ett fält och benämningen på detta fält. Genom att placera en input-tagg inom en label-tagg kan man skapa denna relation.
<input/>	id class style title xml:lang dir type name value checked disabled readonly size maxlenght src alt usemap tabindex accesskey onfocus onblur onselect onchange accept	Används för att skapa något form av fält, som tar input från besökaren. I attributet "type" anges vilken typ av fält som skall användas, exempelvis button, checkbox, image, password, radio och text.
<textarea>	id class style title xml:lang dir name rows cols disabled readonly tabindex accesskey onfocus onblur onselect onchange	Skapar en en större textarea där besökaren kan skriva in fler än en rad text. Dimensionerna kan regleras med attributen "cols" och "rows".
<buttom>	id class style title xml:lang dir name value type disabled tabindex accesskey onfocus onblur	Skapar en knapp, som kan användas i ett formulär. Attributet "type" kan ha värdena submit, reset eller button. Inom taggen anger man vad som skall stå på knappen.
<select>	id class style title xml:lang dir name size multiple disabled tabindex onfocus onblur onchange	Anger att det finns flera möjliga val och används oftast i kombination med <option> för att skapa rullmenyer. Attribut som normalt används är "name", "size" och "multiple".
<optgroup>	id class style title xml:lang dir disabled label	Används för att gruppera ett antal valmöjligheter, options. Används alltid inom en <select> och kan bara innehålla <option>.
<option>	id class style title xml:lang dir selected disabled label value	Används för att ange olika val inom en <select>. Kan grupperas tillsammans med <optgroup>.
<fieldset>	id class style title xml:lang dir	Används för att skapa en grupp av fält i ett formulär. När ett antal fält placeras inom denna, visas dessa i en grupp för sig.
<legend>	id class style title xml:lang dir accesskey	Används för att ge en titel/namn åt en grupp av fält angivet med <fieldset>.

Tabell

Tagg

Attribut

Beskrivning

Exempel

<table>

id class style title xml:lang dir summary width border frame rules cellspacing dellpadding

Skapar en tabell. Tabellen i sin tur kan endast innehålla <tr> eller någon av av delarna thead, tfoot, tbody, col eller colgroup.

<caption>Det här är huvudrubriken</caption>

<thead>

<tr>

<th>Underrubrik 1</th>

<th>Underrubrik 2</th> </tr>

</thead>

<tfoot>

<tr>

<td colspan="2">Det här är foten</td></tr>

</tfoot>

<tbody>

<tr>

<tr>

</tbody>

</table>

Det här är huvudrubriken
Underrubrik 1	Underrubrik 2
Det här är foten
X11	X12
X21	X22

id class style title xml:lang dir

Används för att förklara innehållet i en tabell.

<thead>

id class style title xml:lang dir char charoff align valign

Används för att avgränsa ett antal rader i tabellen som utgör huvudet. Får bara förekomma en gång i en tabell och då närmast efter <table>.

<tfoot>

id class style title xml:lang dir char charoff align valign

Används liksom thead för att avgränsa ett antal rader i foten på en tabell.

<tbody>

id class style title xml:lang dir char charoff align valign

Används för att dela in en tabell i skilda sektioner. Samlar en eller flera rader till en grupp.

<tr>

id class style title xml:lang dir char charoff align valign

Skapar en ny rad i en tabell. Denna tagg kan innehålla en eller flera <th> eller <td>.

<th>

id class style title xml:lang dir abbr axis headers scope rowspan colspan char charoff align valign

Används för rubriker i en tabell och visas vanligtvis i fet stil.

<td>

id class style title xml:lang dir abbr axis headers scope rowspan colspan char charoff align valign

Avgränsar en cell i en rad. En cell kan innehålla text, bild, formulär eller en tabell. Genom att ange attributen "colspan" eller "rowspan" kan man bestämma hur många kolumner eller rader en cell skall spänna över.

id class style title xml:lang dir span width char charoff align valign

Skapar en grupp av kolumner.

<col/>

id class style title xml:lang dir span width char charoff align valign

Används för att kontrollera utseendet på en eller flera kolumner inom en grupp av kolumner.

Bild och bildkartor
Tagg	Attribut	Beskrivning	Exempel
<img/>	id class style title xml:lang dir src alt longdesc height widthusemap ismap	Infogar en bild i webbsidan. Måste vara av en typ som stöds i en browser, till exempel gif, jpg och png. "Src" attributet anger länken till bildens filnamn.	<img src="sko.jpg" alt="sko.jpg" />
<map>	id class style title xml:lang dir id class style title xml:lang dir onclick ondblclick onmousedown onmouseup onmouseover onmouseout onkeypress onkeydown onkeyup	Taggen används för att göra en bildkarta. Kartans "id" används sedan som attribut "usemap" i den bild som kartan skall appliceras på.	<img src="sko.jpg" alt="dojjan" usemap="#sko"/> <map id="sko"> <area shape="circle" coords="30, 20, 24" href="http://www.dojjan.info.se/" alt="Område 1 länkar till dojjan" /> <area shape="rect" coords="48, 0, 90, 38" href="http://www.dsv.su.se/" alt="Område 2 länkar till dsv" /></map>
<area/>	id class style title xml:lang dir shape coords href nohref alt tabindex accesskey onfocus onblur	Gör så att en bild blir klickbar och kan länka till två olika sidor med hjälp av koordinater, värderna är circle, rect och poly.

Metainformation
Tagg	Attribut	Beskrivning	Exempel
<meta/>	xml:lang dir http-equiv name content scheme	Anges i huvudet på HTML-dokumentet. Används för att ange meta-information.	Talar om vilka som är upphovsmän till dokumentet: <meta name="author" content="krille krull" /> Beskrivning vad sidan handlar om: <meta name="description" content="Detta är uppgift 1a" /> Visar vilka nyckelord sidan innehåller: <meta name="keywords" content="uppgift 1a" /> Anger namnet och oftast versionen av det program som använts för att skriva HTML-koden.: <meta name="generator" content="scintilla xhtml" /> Detta attribut skickar med namn/värde-par till servern, så att dessa inkluderas i HTML-dokumentets MIME-huvud. Anger man exempelvis "expires" så kommer detta att läggas till i HTTP-huvudet: <meta http-equiv="expires" content="8 mars 2004" /> Talar om för en sökmotor hur den skall indexera ett dokument: <meta name="robots" content="index,nofollow" />

Skript
Tagg	Attribut	Beskrivning	Exempel
<script>	charset type src defer xml:space	Den här taggen stoppar in ett skript i dokumentet.	<script type="text/javascript" src="script.js"></script>
<noscript>	id class style title xml:lang dir	Används för att meddela de besökare vars browsers inte stödjer scripts att det är något som saknas i deras version av dokumentet	<noscript>Sidan innehåller script som din browser inte klarar!</noscript>

Länk
Tagg	Attribut	Beskrivning	Exempel
<link/>	id class style title xml:lang dir charset href hreflang type rel rev media	Anges i huvudet på HTML-dokumentet. Används för att ange en relation mellan det aktuella HTML-dokumentet och ett annat dokument. Vanliga attribut är "href", "rel" och "type".	<link href="style.css" rel="stylesheet" type="text/css" title="My stylesheet"/>

Bas
Tagg	Attribut	Beskrivning	Exempel
<base/>	href	Anges i huvudet på HTML-dokumentet. Innebär att browsern istället för att använda den nuvarande URL:en som bas, använder den angivna URL:en för att lösa ut de relativa länkarna i HTML-dokumentet.	<base href="http://www.dsv.su.se/~kris-lau/"/>

Rubrik 1

Rubrik 2

Rubrik 3

Rubrik 4

Rubrik 5

Rubrik 6