Lektion: xhtml

Webbteknik
En kort introduktion
Innehåll





Historisk återblick
Teknisk beskrivning
Märkspråk
Standardisering
Trender
Historisk återblick
-89 CERN
Tim Berners-Lee
Ett plattformsoberoende sätt att
sprida forskningsinformation
-93 NCSA Mosaic
National Center for
Supercomputing
Applications, University of Illinois
Webbläsare
(-93)
Webbläsare
(-93)
(-94)
Webbläsare
(-93)
(-95)
(-94)
Webbläsare
(-93)
(-95)
(-94)
Opera (-96)
Webbläsare
(-93)
Safari (-03)
(-95)
(-94)
Opera (-96)
Firefox (-03)
Teknisk beskrivning
Dator med
webbläsare
Webbserver
Internet
Teknisk beskrivning
Dator med
webbläsare
Webbserver
Internet
Webbsida efterfrågas
Teknisk beskrivning
Dator med
webbläsare
Webbserver
Internet
Webbsida efterfrågas
HTTP Request
Teknisk beskrivning
Dator med
webbläsare
Webbserver
Internet
Webbsida efterfrågas
HTTP Request
Förfrågan processas
Teknisk beskrivning
Dator med
webbläsare
Webbserver
Internet
Webbsida efterfrågas
HTTP Request
Förfrågan processas
Efterfrågad sida
returneras
Teknisk beskrivning
Dator med
webbläsare
Webbserver
Internet
Webbsida efterfrågas
HTTP Request
Förfrågan processas
HTTP Response
Efterfrågad sida
returneras
Teknisk beskrivning
Dator med
webbläsare
Webbserver
Internet
Webbsida efterfrågas
HTTP Request
Förfrågan processas
Webbsida visas
HTTP Response
Efterfrågad sida
returneras
Begrepp

URL – Uniform Resource Locator
http://www.tfe.umu.se/webbkursen/index.html
Protokoll
Domännamn
Katalog
Fil
Begrepp

URL – Uniform Resource Locator
http://www.tfe.umu.se/webbkursen/index.html
Protokoll
Domännamn
Katalog
Toppdomän
Fil
Begrepp

URL – Uniform Resource Locator
http://www.tfe.umu.se/webbkursen/index.html
Protokoll
Domännamn
Katalog
Huvuddomän
Toppdomän
Fil
Begrepp

URL – Uniform Resource Locator
http://www.tfe.umu.se/webbkursen/index.html
Protokoll
Domännamn
Katalog
Subdomäner
Huvuddomän
Toppdomän
Fil
begrepp

HTTP – Hypertext Transfer Protocol
Datorer kommunicerar med varandra med hjälp av protokoll
Detta protokoll är speciellt framtaget för webben
Huvuduppgiften är att överföra webbsidor mellan server och datorer
med webbläsare

HTTP – GET
Vanlig förfrågan efter en webbsida

HTTP – POST
Skickar data vid förfrågan (exempelvis data från formulär)
begrepp

IP-nummer
– Unikt nummer för varje dator

Domännamn
– Unikt ”smeknamn” som kan användas istället för IP-numret

DNS – Domain Name System
– Kan jämföras med en telefonkatalog innehållande alla
”smeknamn” och tillhörande IP-nummer
Märkspråk

SGML – Standard Generalized Markup Language

HTML – Hyperttext Markup Language

XML – eXtensible Markup Language

XHTML – Extensible Hypertext Markup Language
Innehåll, funktion och utseende

HTML-kod
– Kod som styr strukturen av en webbsidas innehåll

Stilmallar
– Kod som styr sidans utseende

JavaScript
– Kod som styr en webbsidas beteende
html

Hypertext
– text som via hyperlänkar är förbunden med andra texter

Uppmärkning sker med ”taggar”
HTML 4.01
Tre versioner:
 Strict
 Transitional
 Frameset
Document Type Defenition
Standardiseringsorgan
stilmallar

CSS – Cascading Style Sheets
– Styr utseendet på ett strukturerat dokument
– Exempelvis font, färg, storlek och placering
Tre versioner:
 Inline
 Lokalt

Globalt
Standardisering

W3C – World Wide Web Consortium
– Över 500 medlemmar.
– Industrier, forskningsinstitut, standardiseringsorgan, regeringar…
Standardiserar bland annat:
 HTML
 XHTML
 XML
 CSS
trender




Statiska webbplatser  Databasdrivna
JavaScript  RIA (Flash, AJAX, Flex, Silverlight…)
Web 1.0  Web 2.0
Stationär webb  Mobil
javascript





Ett standardiserat skriptspråk
Körs i webbläsaren
Baserar sig på DOM (Document Object Model)
Kan användas till ”multimediaeffekter” och vid
validering av data i formulär
En av grundstenarna i AJAX
Javascript - Exempel
RIA




Rich Internet Application - RIA
Finesser och funktionalitet som vanliga
program
Kräver ingen installation
(körs i webbläsare eller annan spelare)
Arbetsfördelning mellan dator och server
AJAX

Asynchronous JavaScript and XML (AJAX)

Webbteknik för ökad:
- interaktivitet, hastighet, funktionalitet och
användbarhet

Baserar sig på:
- XHTML (eller HTML), CSS, DOM, JavaScript
och XMLHttpRequest
Flash




Flash 1.0 (-96)
- Ett vektorbaserat animeringsverktyg
Flash CS3 (-07)
- Fullfjädrat utvecklingsverktyg för
multimedia på webben
Inte XHTML, JavaScript etc
Kräver plugin: ”Flash Player”
Web 2.0


Tim O´Reilly -04
Nästa generation av webbtjänster och
affärsmodeller på webben

Användare bidrar
Användare har kontroll
Användbar och interaktiv design

System interagerar


}
Enligt
O´Reilly
Web 2.0 - exempel
Web 1.0
Web 2.0
Ofoto
Akamai
mp3.com
Britannica Online
personal websites
screen scraping
publishing
content management systems
directories (taxonomy)
stickiness
Flickr
BitTorrent
Napster
Wikipedia
blogging
web services
participation
wikis
tagging ("folksonomy")
syndication
Mobil webb

Möjligheter och begränsningar!

Web 2.0 och RIA
3G och stöd för WLAN
Mognad hos användare… och utvecklare!





Java 2 Mobile Edition – J2ME
Adobe’s Flash Lite
Google’s Android
Länktips
http://en.wikipedia.org (Allt möjligt!)
http://www.w3schools.com/ (HTML, CSS…)
http://www.w3.org/ (W3C, HTML, CSS…)
http://www.oreilly.com/pub/a/oreilly/tim/news/20
05/09/30/what-is-web-20.html (Web 2.0)
HTML – vad är det och varför ska vi
använda det
Och vad är XHTML
HTML




Markeringsspråk (MarkUp Language) strukturerar dokument för Webben (World
Wide Web)
Dokumentet delas upp i komponenter med
hjälp av ”element” eller taggar – starttaggar
och sluttaggar
<p>Detta är ett stycke text</p>
<h1>Detta är en rubrik – troligen med stor
font</h1>




HTML beskriver bara strukturen hos
dokumentet – inte hur det skall se ut på
läsarens skärm.
Försök inte att layouta ditt HTML-dokument.
Utseendet styrs i ett separat style-dokument –
en .CSS-fil
Det är browsern, skärmens upplösning och CSSfilen som slutligen bestämmer hur ditt
dokument ser ut
HTML-dialekter




Den HTML-standard som är aktuell idag är
HTML 4 vilken publicerades 1997. Den finns i tre
versioner
HTML 4.0 strict – vilken enbart stödjer
strukturella element – utseendet läggs helt och
hållet i stilmallar (CSS)
HTML 4.0 transitional eller ”loose” innehåller
element som på sikt kommer att avvecklas
HTML 4.0 frameset – tillåter layout genom att
sidan delas upp i frames
XHTML


XHTML - Extensible HyperText Markup Language
I XHTML måste






man skriva alla elementnamn och attributnamn med gemener,
man alltid använda sluttaggar, <hr></hr> eller <hr/>
man sätta citationstecken eller apostrofer runt alla
attributvärden.
XHTML kan kombineras med CSS och JavaScript
XHTML skapades genom att man översatte de tre
DTD:erna i HTML 4.01 från SGML till XML.
Man måste alltså inte kunna XML för att kunna
använda XHTML
XHTML dialekter



XHTML 1.0. publicerad januari 2000 och
innehåller tre dialekter precis som HTML 4 Transitional, Frameset och Strict
XHTML Basic. publicerad december 2000 –
avsedd som en minimal uppsättning av element
för användning i exempelvis
XHTML 1.1. publicerad i maj 2001 – är i stort sett
samma sak som XHTML 1.0 Strict. Här finns
alltså bara en variant - Strict
FILOSOFI
1.
2.
3.
4.
I detta material kommer vi huvudsakligen att
jobba med XHTML Basic och XHTML Strict
Vi använder HTML-koden enbart för
strukturering av dokumentet – inte för
formgivning
Vi skriver koden i generella editorer – undviker
verktyg för utveckling av HTML-dokument
Det är enkelt och kul med HTML
Notepad2

Gratis och bra
CoffeeCupHTML –
en bland många
PINSAMT!
HTML-kod genererad av Word
Några HTML-skolor bland många






En fullständig beskrivning av standarden för
HTML 4 (4.01) hittar du hos W3C Consortiet.
http://www.w3.org/MarkUp/Guide/
http://www.w3schools.com/xhtml/
http://www.echoecho.com/html.htm
http://learningforlife.fsu.edu/webmaster/refere
nces/xhtml/tags/
http://vonpepel.com/ref/html/index.html
http://www.tiger.se/dok/xhtml.html
HTML – Lite kort om editorer
Word, Notepad eller Dreamweaver
- Välj 2 och släng den tredje
Notepad2

Gratis och bra
CoffeeCupHTML –
en bland många
PINSAMT!
HTML-kod genererad av Word
XHTML – Dokumentets grundstruktur
Body - head
Grundläggande dokument
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basdokument</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
XML version

Deklarationen
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="ISO-8859-1"?>

Skall alltid placeras överst i dokumentet före
alla andra taggar
XHTML version
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Anger vilken standard som dokumentet följer
och var man kan hitta denna standard
HTML - taggen





Sedan man angett DOCTYPE och XML standard så
kommer det egentliga HTML – dokumentet omgivet av
starttaggen <HTML> och sluttaggen </HTML>
HTML – taggen innesluter taggarna <head>…</head
och <body>…</body>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en”>
HTML- taggen kan ha språkattribut
XMLNS är referens till Extended Markup Language
Name Space
HEAD


Head-taggen markerar en sektion av
dokumentet som innehåller
overheadinformation – titel, sökord,
författarnamn med mera
Mellan body-taggarna finns det egentliga
dokumentet
Ett mycket enkelt exempel
Validering
Lyckad validering ger en ikon som pris
En misslyckad
validering
Samma fil
–
Vad är
skillnaden?
HEAD – HUVUDET
I huvudet hittar du information om
dokumentets titel, sökord, referenser till
stildokument och annan information som
normalt inte visas av webbläsaren.
Head


Ligger alltid under taggen <html>
Mellan starttaggen och sluttaggen kan elementen







base
link
meta
script
style och
title
finnas
BASE


Med elementet <base> kan man ange en
basadress.
Bilden som finns på adress
”http:/www.tfe.umu.se/courses/systemteknik/webteknik/xhtml/bil.jpg”

Kan enklare hittas med hjälp av basadressen
”http:/www.tfe.umu.se/courses/systemteknik/webteknik/xhtml/”
och filnamnet
”bil.jpg”
Exempel - base
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.tfe.umu.se/courses/systemteknik/xhtml/" ></base>
<title>Elementet BASE</title>
</head>
<body>
<p>Titta en bil</p>
<p><img src="bil.jpg" alt="BIL"/> </p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
</body>
</html>
Link



Elementet link används för att referera till
externa resurser
Det kan finnas flera Link-element i ett htmldokument
En vanlig användning är att ge en referens till
.css filer d.v.s filer som information om hur
dokumentet skall se ut på skärmen
LINK – ett exempel














<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="stajl.css" media="screen" type="text/css" />
<title>Elementet LINK</title>
</head>
<body>
<h1>MIN BIL</h1>
<p><img src="bil.jpg" alt="BIL"/> </p>
<p>Titta en bil</p>
</body>
</html>
LINK – grundläggande Attribut

href – specificerar var resursen finns - href="stajl.css"


Media – specificerar målmedium – screen är det som
gäller om ingenting anges (default) - media="screen"


Det finns ett antal typer av fördefinierade länkar Alternate,
Stylesheet, Start, Next, Prev, Contents, Index, Glossary,
Copyright, Chapter, Section, Subsection, Appendix, Help och
Bookmark.
andra media är tty, tv, projection, handheld, print, braille, aural
and all.
type anger mediatyp – type="text/css"

Det kan exempelvis vara text/css eller text/javascript.
LINK – ett exempel














<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="stajl.css" media="screen" type="text/css" />
<title>Elementet LINK</title>
</head>
<body>
<h1>MIN BIL</h1>
<p><img src="bil.jpg" alt="BIL"/> </p>
<p>Titta en bil</p>
</body>
</html>
META

Meta elementet används för att specificera data kring
dokumentet – vem som är författare, nyckelord,
övergripande beskrivningar av dokumentet med mera

KEYWORDS – nyckelord som kan användas av
sökmotorer
AUTHOR - författarnamn
DESCRIPTION – kort beskrivning – visas av sökmotorn
som sammanfattning av dokumentet
DISTRIBUTION - specificerar om dokumentet är globalt
eller regionalt



Meta – exempel





<meta name="description" content=”Grundkurs i hur
man skriver XHTML-kod” />
<meta name="keywords" content="xhtml, css" />
<META name="author" content=”Ulf Holmgren”/>
<META name="copyright" content="© 2007
TFE.”/>
<META name="date" content=”2007-11-10”/>
Meta - exempel




<-- For speakers of US English -->
<META name="keywords" lang="en-us"
content=”color, New York">
<-- For speakers of British English -->
<META name="keywords" lang="en"
content=”colour, London">
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>META-ELEMENT</title>
<meta name="autor" content="Ulf Holmgren" />
<meta name="Keywords" content="HTML, CSS, easy" />
<meta name="Description" content="This is an easy course in XHTML" />
</head>
<body>
…
</body>
</html>
Script och Style


Elementet Style används för att bädda in
information om exempelvis fonter, färger,
marginaler e.t.c. Denna information bör läggas i
ett separat dokument .css
Elementet Script används för att bädda in script
som styr beteende om sidan – detta behandlas
inte i detta sammanhang
Title



Elementet Title används för att identifiera
dokumentet – titeln brukar visas övers i det
fönster där dokumentet visas
<title>XHTML – Title Tag</title>
Det får bara finnas en title-tag i dokumentet
TEXT – GRUNDERNA
Det huvudsakliga innehållet i XHTMLdokument är text – brödtext, rubriker,
avgränsande linjer
SAMMANfattning

Det här avsnittet handlar om





<p> brödtexten
<H1> till <H6> rubriker av olika dignitet
<br> ny rad utan att skapa ett nytt stycke
Speciella tecken % &
Förstärkning <em> och <strong>
<p>




P markerar ett stycke (paragraph) I stycket kan
det finnas text och bilder samt inlinekod
P används för att strukturera texten – att dela
upp den i stycken – man skall inte användas för
att formge dokumentet. Detta skall istället göra
i ett separat style-dokument
Webbläsarna brukar lämna en tom rad mellan
dokumentets stycken
Får finnas innuti exempelvis följande element:
ADDRESS, BLOCKQUOTE, DD, DIV, TD, TH
<br> och  


Den text som skrivs in mellan starttaggen <p>
och sluttaggen </p> betraktas som ett flöde av
asciitecken – de radbrytningar som du skriver i
editorn kommer inte att visas i webbläsaren.
Extra mellanslag och radbrytningar måste
markeras med taggen <br> för radbrytning eller
 
<br>,   och ä
<body>
<p>Alternativ 1:
Titta
en bil
Den är jättefin </p>
<p>Alternativ 2:<br/>Titta
     en bil
<br/>
den är jättefin</p>
</body>
Andra specialtecken
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>P-ELEMENT</title>
</head>
<body>
<p>¢ cent<br/>
± plus-minus<br/>
© copy <br/>
µ mikro<br/>
£ pund</p>
</body>
</html>
MER: http://www.w3.org/TR/html401/sgml/entities.html
<h1> - <h6> Rubriker

Rubriker finns av sex ”storlekar”
Normalt är <h1> störst och <h6>
minst, men det styr du i ditt
stylesheet
<h1>Rubrik 1</h1>
<h2>Rubrik 2</h2>
<h3>Rubrik 3</h3>
<h4>Rubrik 4</h4>
<h5>Rubrik 5</h5>
<h6>Rubrik 6</h6>
Att förstärka delar av texten med <em>
och <strong>
…
<body>
<p>Detta är en himla rolig
historia:<br/>
- har du
<strong>julgransfot</strong><br/>
- ja de har jag<br/>
- hur får du då på
dig <em>byxorna</em></p>
<p>
…
</body>
…
Citat <blockquote> och <q>


Att markera citat i sin HTML-kod är att sätt att
underlätt enhetlig formattering samt att
underlätta för synskadade att rätt uppfatta
texten
De element som används är blockquote och q
Citat – ett exempel
<body>
<p>Om man Googlar på <q>Roliga
citat</q> så kan man hitta
följande om Bill Gates</p>
<blockquote
cite="http://www.jesper.nu/artiklar/
humor/citat/blandat.php"><p>
640 kB borde vara tillräckigt
för vem som helst</p>
</blockquote>
<p>och det kan man ju tyckas vara roligt
så här i efterhand</p>
</body>
Ytterligare element för
logisk formattering
<p>definition - <dfn>tjur=kopappa</dfn> </p>
<p>kod - <code>u=sin(2*pi*200*t</code> </p>
<p>exempel - <samp>exempel</samp></p>
<p>tangentbord - <kbd>knatter knatter
knatter</kbd> </p>
<p>variabel - <var>svaret=5</var> </p>
<p>citat - <cite>two bee or not two bee</cite> </p>
<p>en förkortning - <abbr>t.ex.</abbr> </p>
<p>akronym - <acronym>XHTML</acronym> </p>
Addresser
<address>
Kontaktperson för
XHTMLföreningen
<br/>
Eva Andersson<br/>
Skogsstigen 8<br/>
903 45 Umeå
</address>
Preformatterad text
<p>
Detta stycke är oformatterat
och omgivet bara av p- taggarna. Läsaren kommer
inte att bry sig om radbrytningar om det fungerar
som jag tror att det fungerar, men
det tror jag att jag tror att det gör</p>
<pre width="20">
Detta block kommer
att vara maximalt 20 tecken brett och
radbrytningarna kommer att finnas kvarom det
fungerar som jag tror att det fungerar, men
det tror jag att jag tror att det gör
</pre>
Div och span är Containrar som används
tillsmmans med .CSS
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Div and span ELEMENT</title>
<link rel="stylesheet" href="stajl2.css" media="screen"
type="text/css" />
</head>
<body>
<div class="kontainer1">
asd ssdlk ss sfk jkk aj s
</div>
<div class="kontainer2">
asd ssdlk ss sfk jkk aj s
</div>
<p>
asd ssdlk <span>ss</span> sfk jkk aj s
</p>
<div class="kontainer3">
asd ssdlk ss sfk jkk aj s
</div>
</body>
</html>
body {
background-color: #def;
margin-left: 30px;
margin-top: 20px; }
p span {color: green}
.kontainer1
{font-family: verdana, arial, sans-serif;
color: black;}
.kontainer2
{margin-left: 20px;color: yellow;color: blue;}
.kontainer3
{margin-left: 30px;color: green;}















<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Employee Profile</title>
<style type="text/css">
h1 span {color: red}
p span {color: green}
</style>
</head>
<body>
<h1><span>John Smith</span> Is Employee Of The Month</h1>
<p><span>John Smith</span> has been a Project Manager for 10 years.</p>
</body>
</html>
ATT STYRA UTSEENDE HOS
TEXTEN
Det finns ett antal taggar som vi inte ska
använda
HTML – används för logisk formatering inte för
utseende

I HTML-dokumentet skall du formattera logiskt





Dessa ord ska framhävas
Detta är en tabell
Detta är en länk
Detta är en rubrik
MEN du sak inte använda HTML för att styra
utseendet hos sidan – du ska inte ange kursiv
stil, stilstorlek eller font i HTML – Lämna detta
till stilmallen – CSS-dokumentet

<h1>Formattering som vi inte ska använda</h1>

<h3>b (fet stil- andra raden)</h3>
<p>
ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/>
<b>sdkl fjöglksdfjgsldfkjgöslgk</b>
<p>
<h3>big - andra raden</h3>
<p>
ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/>
<big>sdkl fjöglksdfjgsldfkjgöslgk</big>
<p>
<h3>i - kursiv stil - andra raden</h3>
<p>
ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/>
<i>sdkl fjöglksdfjgsldfkjgöslgk</i>
<p>
<h3>small - andra raden</h3>
<p>
ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/>
<small>sdkl fjöglksdfjgsldfkjgöslgk</small>
<p>
<h3>sub - delar av raden</h3>
<p>
fjöglksdfjgs<sub>sdkl lgk</sub>ldfkjgös
<p>
<h3>sup - delar av raden</h3>
<p>
fjöglksdfjgs<sup>sdkl lgk</sup>ldfkjgös
<p>
<h3>tt - tele type - andra halvan av raden</h3>
<p>
ldf lsdfjk lf gslf slfk
<tt>sdkl fjglksdfjgösldfkjgöslgk</tt>
<p>
































LÄNKAR
och ytterst lite om bilder
Hela idén med HTML är att kunna hoppa
mellan dokument


En länk åstadkommer att exempelvis en ny fil öppnas i
det aktuella fönstret eller (eventuellt) i något annat
fönster
Länken består av




en startpunkt – ett ankare
Ett mål – en target och
En destination
När du klickar på länken kommer du att flyttas till en
annan plats –en annan fil, en annan plats i det aktuella
dokumentet eller exempelvis till din mail-hanterare.
Tre varianter av länkar



<p>
<a href="tfn_lista.html">Telefonlista i separat dokument</a>
</p>

<p>
<a onclick="window.open(this.href); return false;"
href="tfn_lista.html">Telefonlista i nytt fönster</a>
</p>

<p><a href="#tfnlista">Telefonlista i detta dokument</a></p>

<p>lsd las dlakjs dlad las la lasjd laksj lask lj d flaks dlasj
dlaskjd lasj la dlaj dlasd laksdj lksdjlksdjalksd jasklj dlk d</p>

<div id="tfnlista">
<ul>
<li> - Anders Andersson 090 - 12 35 67 </li>
<li> - Bertil Bertislsson 080 - 23 45 67 </li>
<li> - Caesar caesarsson 070 45 67 89</li>
</ul></div>








Tre andra typer av länkar
och här dyker det uppe en bild
<body>
<p>
<a
href="http://www.w3.org/TR/html401/sgml/entities
.html">Specialtecken</a><br/>
<a href="mailto:[email protected]">Skicka mail till
Nisse</a> </p><br/>
<a
href="http://www.franzose.de/en/?gclid=CMbw2tu
G0I8CFQRgMAodhWiZzA"><IMG SRC="bil6.jpg"
ALT="bild på bil"></a><br/>
<p>
<!--<p>å äö</p>-->
</body>
ATT SKAPA TABELLER
Tabeller skall endast användas om man
verkligen vill presentera något i tabellform
Använd INTE tabeller för att strukturera
hela sidor
Så här ser grundstrukturen ut för en
tabell
<table>
<caption>Tabellrubrik</caption>
<tr>
<th>kolumn <br/> rubrik 1</th>
<th><h3>kolumn<br/>rubrik 2</h3></th>
</tr>
<tr>
<td>cell 11</td>
<td>cell 12</td>
</tr>
<tr>
<td>cell 21</td>
<td>cell 22</td>
</tr>
<tr>
<td>cell 31</td>
<td>cell 32</td>
</tr>
</table>










border
Anger bredden på ramen runt varje element – angivet i pixlar.
cellpadding
Anger hur mycket ”luft” det skall vara mellan cellens innehåll och
ramen
cellspacing
Anger hur mycket luft det ska vara mellan ramen och nästa cell.
summary
En text som beskriver tabellens innehåll – texten är inte synlig på
skärmen, men kan ev. finnas med om sidan presenteras i talade
medier.
width
Anger tabellens totala bredd i pixlar eller som procent av det
fönster där den ligger.
Border
Cellpadding
Cellspacing
Frame
void: Inga sidor.
above: Övers.
below: Nederst.
hsides: Uppe och nere.
vsides: Höger och
vänster.
lhs: Vänster.
rhs: Höger.
box: Runt om.
border: Runt om.
RULE
<table




border="1" frame="below" rules="rows" summary="Tabell">
none: default
rows:
cols:
all:
ATT SKAPA Listor
Ibland kan det vara bra att strukturera sig lite
Ordnade listor, oordnade listor och
definitionslistor
LISTANS UTSEENDE STYRS I CSS-filen