FAKTA - HTML

Objectives: En introduktion i HTML. Materialet går att läsa i en följd och att använda som uppslagsdel. Behandla följande information som hårdfakta.

Background: Detta material använder jag i mina kurser inom webbteknologi på Mälardalens högskola. Eftersom de är allmänt efterfrågade så bjuder jag informationsarkitekts besökare på materialet också.

Audience: beginners-advanced

Keywords: HTML, uppmärkningsspråk, struktur, tidy, HTML 4.01, XHTML 1.0

Date of publish: 2005-04-03

Author: johan.sundstrom@mdh.se

Innehåll

1 Introduktion
   1.1 Om HTML
   1.2 Uppmärkningsspråk
   1.3 Versioner
   1.4 Taggar
2 Strukturen
   2.1 Allmänt
3 Ett första test
4 Skriv korrekt - Tidy
5 HTML 4.01
   5.1 Exempel på HTML 4.01
6 XHTML 1.0
   6.1 Strikt anpassad
   6.2 Exempel på XHTML 1.0
   6.3 Välstrukturerat format
7 HTML koder
8 Länkar
9 Läsarkommentarer
   9.1 Kommentera själv

1 Introduktion

1.1 Om HTML

Nedanstående är exempel på information och stil. De fem orden är information. Stiln visar informationen på visst sätt.

Detta är fet understruken text

Kod 1: Exempel på information med stil

HTML är ett internationellt standardiserat språk för att märka information så att de bl.a. visas i viss stil.
HTML är förkortning för HyperText Markup Language.
HTML är en öppen standard dvs INTE proprietär (ägs och styrs slutet i vinstdrivande intresse).
World Wide Web Consortium (W3C) utvecklar och standard för HTML.
HTML används för att skapa "webbsidor" (HTML-dokument) som kan läsas av webbapplikationer (webbläsare).
Ett HTML-dokument lagras som en fil och kan ha filändelsen .htm eller .html.
Filnamnet och filändelsen brukar normalt skrivas i gemener.

1.2 Uppmärkningsspråk

Det finns flera uppmärkningsspråk. De flesta utmynnar från det övergripande uppmärkningsspråket SGML från 1986.
SGML är förkortning för Standarized Generalized Markup Language
HTML och XML är delar av SGML som är den betydligt större specifikation för hur information kan stilmärkas och därmed presenteras på olika sätt.
Syftet med SGML, XML och HTML är att ge en internationell standard för att märka elektronisk information.
Syftet är också att möjliggöra för informationen att kunna utbytas mellan oberoende teknikplattformar och tillämpningar.
Med uppmärkningsspråken märker man hela eller del av texten som tex fet stil, den läsande applikationen eller teknikplattformen tex webbläsaren eller skrivaren tillämpar märkningen.

1.3 Versioner

HTML har med tiden utvecklats och finns i tidigare och senare versioner.
Versionen HTML 4.01 är en vanligt använd version.
Senaste versionen av HTML heter XHTML 1.0 och är en rekommendation sedan 26/1 2000.
XHTML är förkortning för Extensible HyperText Markup Language och är en omformulering av den tidigare versionen HTML 4.01.
XHTML är förenklat en sammanslagning av HTML's stilspråk och XML's skrivregler.
Språket heter fortfarande HTML det är den aktuella versionen som är XHTML 1.0.

1.4 Taggar

I SGML, XML och HTML görs alla uppmärkningar i informationen med taggar, tags.
HTML har fastställda uppmärkningselement (taggar) eller tags.
Taggarna inleds med < följt av uppmärkningssnamn och avslutas med >.
Ett HTML-dokument består av HTML-märkningar, taggar, skrivna i klartext i vilken ordbehandlare som helst och lagrade som en fil.
Till skillnad från HTML måste man i SGML och XML hitta på egna namn på uppmärkningselementen.
Ett exempel på en SGML eller XML-tagg är <person>.
Taggar (uppmärkningselement) kan ha attribut följt av ett värde, vissa taggar måste ha det.
Tre exempel på HTML-taggar som måste ha attribut är <img> <a> <script>
I nedanstående exempel är img uppmärkningselementet och src attributet, och "bild.gif" är värdet.

Kod 2: Uppmärkningselement med attribut och värde

I SGML och XML definieras regler för uppmärkningselementen samt vilka attribut ett uppmärkningselement kan ha. Dessa regler kallas Document Type Definition, DTD.
En DTD sparas normalt i en separat fil och i SGML-, XML- eller HTML-dokument refererar man sedan till DTD.
XHTML, XML och SGML kräver DTD's.
I en DTD beskrivs t ex att ett <a>-element inte får omfatta andra <a>-element.
Följande utdrag ur en DTD beskriver vilka attribut som måste (required), respektive får (implied) förekomma i ett uppmärkningselement inom ett XHTML-dokument.

...
<!ELEMENT img EMPTY>
<!ATTLIST img
%attrs;
src %URI; #REQUIRED
alt %Text; #REQUIRED
name NMTOKEN #IMPLIED
longdesc %URI; #IMPLIED
height %Length; #IMPLIED
width %Length; #IMPLIED
usemap %URI; #IMPLIED
ismap (ismap) #IMPLIED
align %ImgAlign; #IMPLIED
border %Length; #IMPLIED
hspace %Pixels; #IMPLIED
vspace %Pixels; #IMPLIED
>
...

Kod 3: Utdrag ur en DTD för XHTML.

2 Strukturen

2.1 Allmänt

Strukturen hos ett HTML-dokument, både tidigare och senare versioner, består av ett root-element, en head-del och en body-del.
Root-elementet omfattar HTML-dokumentet.
Head-delen omfattar alla globala deklarationer som påverkar hela dokumentet t ex författarnamn, datum, titel.
Body-delen omfattar den synliga information.
Body-delen kan ersättas med ett <frameset>-element i en ramdeklaration.

Kod 4: Korrekt HTML-struktur

Kod 5: Korrekt HTML-struktur med frameset

3 Ett första test

För att skapa HTML dokument behövs en enklare ordbehandlingsprogram (editor) och en webbläsare.
Starta ordbehandlingsprogrammet och skriv:

<HTML>
<HEAD>
 <TITLE>Mitt första exempel</TITLE>
 <META NAME="Author" CONTENT="Johan Sundström">
<HEAD>
<BODY>
 <H1>Välkommen!</H1>
 <HR>
 Detta är verkligen mitt första HTML-dokument
 Detta är länken till
 <A href="http://www.sunet.se">SUNET</A>
 SUNET
</BODY>
</HTML>

Kod 6: Ett första exempel

Spara filen som index.htm.
Öppna webbläsaren och välj Arkiv - Öppna (fil), välj ovanstående fil.

4 Skriv korrekt - Tidy

Man rekommenderas skriva HTML korrekt och läsbart.
Korrekt HTML som är indragen och konsekvent blir mer läsbar för andra programmrare.
Ett initiativ för hur bättre kodläsbarhet uppnås har tagits av W3C.
Initiativet kallas HTML Tidy.
HTML Tidy Online är en bra webbtjänst för att kontrollera HTML-kod.
En annan HTML validator finns på WebDesignGroup.

5 HTML 4.01

Ett HTML 4.01-dokument är uppbyggt av en Dokument typ deklaration (DTD) och därefter 3 delar.
1. En rad som beskriver HTML-versionen och vilken DTD som ska kontrollera HTML-koden.
2. Rot-elementet <html> som omfattar hela HTML-delen.
3. En header-deklaration omfattad med <head> element
4. En body-sektion omfattad med <body> element som innehåller själva dokumentinnehållet. Body-delen kan utgöras av <body> eller ett <frameset> element
Mellanslag, tabuleringar och kommentarer kan förekomma före eller efter ett HTML-element.
HTML-elementen är inte gemener/versaler känsliga. Man kan starta ett stycke genom  (versalt) och avsluta det  (gement).

5.1 Exempel på HTML 4.01

Exempel på en HTML 4.01 kod som består av 9 rader.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
   <HEAD>
      <TITLE>My first HTML document</TITLE>
   </HEAD>
   <BODY>
      <P>Hello world!
   </BODY>
</HTML>

Kod 7: Exempel på HTML 4.01

Första raden innehåller en DOCTYPE-deklaration till den publika DTD'n loose.dtd som finns på W3C's webbplats.
Andra raden är rotelementet <html>
Tredje raden <head> innehåller information om det aktuella dokumentet.
7:e raden är intressant. Den deklarerar ett  stycke, (paragraph). HTML 4.01 tillåter att utelämna avslutande -deklarationen.
<BODY>, <HEAD> är exempel på taggar som inte tillåts utelämnas.

6 XHTML 1.0

I versionen XHTML 1.0 måste HTML-dokumentet vara strikt anpassad, Strictly Conformed och välstrukturerat, well-formed.

6.1 Strikt anpassad

Ett strikt anpassat XHTML-dokument måste följa dessa stipulerade regler:

Måste innehålla en DOCTYPE deklaration innan rotelementet <html>
Om man använder en publik DTD måste en av tre möjliga DTD's anges i DOCTYPE. Den publika DTD'n måste följas
Rotelementet <html> måste vara (gemener) de övriga elementen är gemen/versal känsliga. Startar man ett stycke genom  (versalt) får det inte avslutas  (gement).
Rotelementet <html> rekommenderas innehålla en XMLNS-deklaration

För att inte ett eget element i ett system ska uppfattas annorlunda i ett annat används namnavgränsningar eller XMLNS (XML Name space)

6.2 Exempel på XHTML 1.0

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.informationsakritekt.se" xml:lang="en" lang="en">
   <head>
      <title>My first HTML document</title>
   </head>
   <body>
      <p>Hello world!</p>
   </body>
</html>

Kod 8: Exempel på en XHTML 1.0 kod som består av 9 rader.

Första taggen i exemplet ovan anger vilken HTML version som används. DOCTYPE deklarationen och anger publik DTD med sökväg.
tagg 2, rotelementets <html> attribut XMLNS, anger XML Name Space: http://www.informationsarkitekt.se för att eventuella namn på nya tags kommer i konflikt med andra organisationer namn.
Tagg 3, <head>. Här börjar deklarationsdelen av HTML-dokumentet och innehåller en <title> deklaration
Tagg 6, <body>. Här är det egentliga innehållet som kommer att kunna ses av mottagande tillämpning.
Tagg 7, . Observera att XHTML 1.0 kräver ett styckeavslutningselement .
Rad 9, här avslutas rotelementet.

6.3 Välstrukturerat format

Well-formedess, välstrukturerat format är ett nytt begrepp i XHTML 1.0.
Detta är några av de mest förekommande förändringarna från HTML 4.01 till XHTML 1.0
HTML-taggar måste komma i rätt följd om de ska nästas.

Ett förstärkt textstycke.

Kod 9: Korrekt nästat element

Ett förstärkt textstycke.

Kod 10: Mindre korrekt överlappande element

XHTML dokument som bygger på SGML-specifikationen skiljer på gemener och versaler. <li> och <LI> är inte samma tag.
Med den äldre versionen HTML 4.01 gick det att utesluta avslutande taggar på vissa HTML-element. Det går inte i XHTML.

Ett stycke.Ett annat stycke.

Kod 11: Korrekt avslutande element

Ett stycke.Ett annat stycke.

Kod 12: Inkorrekt oavslutat element

Attributvärden måste alltid vara omfattas med citationstecken i XHTML.

Kod 13: Korrekta attributvärden med citationstecken

Kod 14: Attributvärden saknar citationstecken

Tomma element som   eller <hr/> måste avslutas.

<hr/>

Kod 15: Korrekt tomma element är avslutade

<hr>

Kod 16: Mindre korrekt tomma element som ej är avslutade

7 HTML koder

Följande kategorier HTML-kod beskrivs i detalj på www.w3c.org

8 Länkar

Länkar till tolkningar och HTML-referenser

9 Läsarkommentarer

[ margo skrev den 1/4/2009: ]
Zhr8ih flHsdt83Nncfooi61t

[ robby skrev den 10/14/2008: ]
iM5zaX ghs85n1gdGnbZ95Iis3f

[ upwin skrev den 12/6/2008: ]
hello, good site.

[ zqrmk skrev den 12/6/2008: ]
hello, good site.

[ Idwrhoan skrev den 2/22/2009: ]
Punk not dead

[ bwpts skrev den 3/1/2009: ]
I like your wishes! wdcbe

[ barry skrev den 3/12/2009: ]
e03A1i 8g74dlGaSnxCc96lsg4l

[ anonym skrev den 3/14/2009: ]
comment4,

[ anonym skrev den 3/14/2009: ]
comment3,

[ anonym skrev den 3/15/2009: ]
comment4,

[ sweeta-fl skrev den 3/26/2008: ]
Sorry, but what is kimerikas? Jane.

[ Mnyqnstq skrev den 4/14/2009: ]
Best Site Good Work

[ vnkei skrev den 4/24/2009: ]
I like this wishes! 000.html ">Download disturbed 10 akgre

[ Cwkpufku skrev den 4/25/2009: ]
Very Good Site

[ Ideruvtm skrev den 5/11/2009: ]
this is be cool 8)

[ Zzivwkmm skrev den 5/2/2009: ]

[ Qeetqwgn skrev den 5/22/2009: ]
It's funny goodluck

[ Wzzvighs skrev den 5/3/2009: ]
this post is fantastic

[ Heptnbej skrev den 6/14/2009: ]
Best Site good looking

[ anonym skrev den 6/15/2008: ]
generic cialis online generic cialis

[ Hjanxuib skrev den 6/16/2009: ]
Very funny pictures

[ nataly skrev den 6/23/2009: ]
yOT7qf ghUnxCczpf72ndOqi20g

[ margaret skrev den 6/23/2009: ]
afadl2 ega7Kl0dnDduqp6s2bnp1o

[ Garry skrev den 6/9/2009: ]
Cool site goodluck :)

[ crazyivan skrev den 6/9/2009: ]
Wonderfull great site

[ Tommy skrev den 6/9/2009: ]
Jonny was here

[ incomeppc skrev den 6/9/2009: ]
very best job

[ friend35 skrev den 6/9/2009: ]
Jonny was here

[ Ucvyvknj skrev den 7/10/2009: ]
Best Site good looking

[ Ekulvjey skrev den 7/2/2008: ]
Jonny was here shuttle cheap 3 star hotels santiago chile uyu

[ anonym skrev den 7/28/2009: ]
MVL6Ov rthuyvrx mcsfwktm ddcdnywq

[ tizg iugfprye skrev den 8/20/2008: ]
gelb sfkc ykrl uqhz dsga widu zaidetjf

[ Alan skrev den 8/24/2008: ]
Nice writing. You are on my RSS reader now so I can read more from you down the road.

[ scania skrev den 8/6/2008: ]
oZVAan skf83dnbfv9h2v64rn0vm

[ behappy skrev den 9/10/2008: ]
Very funny pictures

[ dirtbill skrev den 9/10/2008: ]

[ cooler111 skrev den 9/10/2008: ]
I love this site

[ bobby skrev den 9/12/2008: ]
Cindy McCain's battle against prescription drug addiction has been part of her public speaking points for years, but a deeper investigation reveals the far-reaching consequences of her actions washingtonpost.com/wp-dyn/content/article/2008/09/11/AR2008091103928.html

[ mona skrev den 9/12/2008: ]
Candidates Promise National-Service Initiatives washingtonpost.com/wp-dyn/content/article/2008/09/11/AR2008091103788.html

[ jane skrev den 9/12/2008: ]
Federal Judge Limits Access to Cellphone Data washingtonpost.com/wp-dyn/content/article/2008/09/11/AR2008091103292.html

[ lola skrev den 9/12/2008: ]
Has Obama Underestimated McCain? voices.washingtonpost.com/the-trail/2008/09/11/misunderestimating_mccain.html

[ britney skrev den 9/12/2008: ]
Sarah Palin: Who Do We Think She Is? washingtonpost.com/wp-dyn/content/article/2008/09/11/AR2008091103630.html

[ Znlylgea skrev den 9/27/2008: ]
this is be cool 8)

[ Ueptnyeq skrev den 9/27/2008: ]
Jonny was here

[ Kobalesw skrev den 9/27/2008: ]
Thanks funny site

[ Ctajbirp skrev den 9/28/2008: ]
Good crew it's cool :)

9.1 Kommentera själv

Här finns möjlighet att komplettera informationen, ställa frågor eller kommentera detta dokuments målgruppsanpassning eller utformning.