Val

FAKTA - HTML

Målgrupp nybörjare-advanced

Mål 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.

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

Publicerad 2005-04-03

Reviderad 2014-01-01

av johan.sundstrom@mdh.se

1 Introduktion

1.1 Om HTML

  • Nedanstående är exempel på information och stil. De fem orden är information. Stilen 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.
  • 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) driver utvecklingen och sätter standarden för HTML.
  • HTML används för att skapa märka information så att den kan läsas av av webbläsare.
  • Ett HTML-dokument lagras som en fil och har 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 resultat 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åket märker man t.ex. en del av texten som tex rubrik, 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 rekommenderad standard.
  • XHTML 1.0 och XHTML 1.1 och är också rekommenderade sedan 26/1 2000.
  • XHTML är förkortning för Extensible HyperText Markup Language och är en omformulering med tillägg till 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 och de rekommenderade versionenerna HTML 4.01, XHTML 1.0 och XHTML 1.1

1.4 Taggar

  • I SGML, XML och HTML märker man upp informationen med HTML-element eller taggar, tags.
  • HTML har fastställda uppmärkningselement (taggar).
  • 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 <personuppgift>.
  • Till SGML och XML definieras regler för uppmärkningselementen samt vilka attribut ett uppmärkningselement kan ha. Dessa regler kallas Document Type Definition, DTD.
  • I nedanstående exempel är img uppmärkningselementet  och attributen src="bild.gif" samt alt="sol"
...
<img src="bild.gif" alt="sol">
...
Kod 2: Uppmärkningselement och attribut
  • En DTD sparas normalt i en separat fil. SGML-, XML- eller HTML-dokument refereraras till rätt DTD.
  • XHTML, XML och SGML referering till DTD's.
  • I en DTD beskrivs t ex att ett <a>-element inte får omfatta andra <a>-element.
  • Följande 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 rot-element, en head-del och en body-del.
  • Rot-elementet omfattar HTML-dokumentet.
  • Head-delen omfattar alla meta-beskrivningar 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.
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>
 Kod 4: Korrekt HTML-struktur
<html>
  <head>
    ...
  </head>
  <frameset>
    ...
  </frameset>
</html>
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>Mitt första exempel</title>
  </head>
  <body>
    <h1>Välkommen!</h1>
    <hr />
    <p>Detta är verkligen mitt första HTML-dokument</p>
    <p>Detta är länken till
      <a href="http://www.sunet.se">SUNET</a>
    </p>
  </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äsbar.
  • Städad HTML-kod som är indragen och konsekvent blir mer läsbar för andra programmrare.
  • Ett initiativ tagits av W3C för att uppnå bättre kodläsbarhet 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 korrekt HTML 4.01-dokument är uppbyggt med en referens till 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-elementet är inte känsliga för gemener eller versaler.

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 xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My first HTML document</title>
</head>
<body>
 <p>Hello world!</p>
</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 deklarerar ett stycke <p> (paragraph). HTML 4.01 tillåter att utelämna avslutande </p>-deklarationen.
  • <BODY>, <HEAD> är exempel på taggar som inte tillåts utelämnas.

6 XHTML 1.0

  • I senaste 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 stipulerade regler:
    1. Måste innehålla en DOCTYPE deklaration innan rotelementet <html>
    2. 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
    3. Rotelementet html måste vara  (gemener) de övriga elementen är gemen/versal känsliga d.v.s. startmarkerar man HTML-element med  versal så måste man avsluta med versal.
    4. Rotelementet <html> rekommenderas innehålla en XMLNS-deklaration (XML Name Space)
  • 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.idp.mdh.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.idp.mdh.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, <p>. Observera att XHTML 1.0 kräver ett styckeavslutningselement </p>.
  • Rad 9, här avslutas rotelementet.

6.3 Välstrukturerat format

  • Well-formedess, västrukturerat 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.
<p>here is an emphasized <em>paragraph</em>.</p>
Kod 9: Korrekt nästat element
<p>here is an emphasized <em>paragraph.</p></em>
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.
<p>here is a paragraph.</p><p>here is another paragraph.</p>
Kod 11: Korrekt avslutande element
<p>here is a paragraph.<p>here is another paragraph.
Kod 12: Inkorrekt oavslutat element
  • Attributvärden måste alltid vara omfattas med citationstecken i XHTML.
<td rowspan="3">
Kod 13: Korrekta attributvärden med citationstecken
<td rowspan=3>
Kod 14: Attributvärden saknar citationstecken
  • Tomma element som <br/> eller <hr/> måste avslutas.
<br/><hr/>
Kod 15: Korrekt tomma element är avslutade
<br><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

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.

Kommentar:

Namn (frivilligt)

Publicerad av:
Johan Sundström
  • Mälardalens högskola |
  • Box 883 |
  • 721 23 Västerås/Eskilstuna |
  • 021-10 13 00, 016-15 36 00 |
  • info@mdh.se |
  • Om webbplatsen