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

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

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

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

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

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.