Informationsarkitekt.se
"Ett fyndigt ord bevisar ingenting"
-Voltaire
Anpassa text 

Översätt 



Login 
E-postadress

Lösenord

-Bli medlem!
-Glömt lösenordet?

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 Introduktion | 2 Strukturen3 Ett första test | 4 Skriv korrekt | 5 HTML 4.01 | 6 XHTML 1.0 | 7 HTML-koder | 8 Länkar | 9 Läsarkommentarer ]

1.1 Om HTML

Detta är fet understruken text

Kod 1: Exempel på information med stil

1.2 Uppmärkningsspråk

1.3 Versioner

1.4 Taggar

<img src="bild.gif">

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

...
<!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

[ 1 Introduktion | 2 Strukturen |  3 Ett första test | 4 Skriv korrekt | 5 HTML 4.01 | 6 XHTML 1.0 | 7 HTML-koder | 8 Länkar | 9 Läsarkommentarer ]

2.1 Allmänt

<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

[ 1 Introduktion | 2 Strukturen |  3 Ett första test | 4 Skriv korrekt | 5 HTML 4.01 | 6 XHTML 1.0 | 7 HTML-koder | 8 Länkar | 9 Läsarkommentarer ]
<HTML>
  <HEAD>
    <TITLE>Mitt första exempel</TITLE>
    <META NAME="Author" CONTENT="Johan Sundström">
  <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>
    SUNET</P>
  </BODY>
</HTML>

Kod 6: Ett första exempel


4 Skriv korrekt - Tidy

[ 1 Introduktion | 2 Strukturen3 Ett första test | 4 Skriv korrekt | 5 HTML 4.01 | 6 XHTML 1.0 | 7 HTML-koder | 8 Länkar | 9 Läsarkommentarer ]

5 HTML 4.01

[ 1 Introduktion | 2 Strukturen3 Ett första test | 4 Skriv korrekt | 5 HTML 4.01 | 6 XHTML 1.0 | 7 HTML-koder | 8 Länkar | 9 Läsarkommentarer ]

5.1 Exempel på HTML 4.01

<!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


6 XHTML 1.0

[ 1 Introduktion | 2 Strukturen3 Ett första test | 4 Skriv korrekt | 5 HTML 4.01 | 6 XHTML 1.0 | 7 HTML-koder | 8 Länkar | 9 Läsarkommentarer ]

6.1 Strikt anpassad

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.

6.3 Välstrukturerat format

<p>Ett förstärkt <em>textstycke</em>.</p>

Kod 9: Korrekt nästat element

<p>Ett förstärkt <em>textstycke.</p></em>

Kod 10: Mindre korrekt överlappande element

<p>Ett stycke.</p><p>Ett annat stycke.</p>

Kod 11: Korrekt avslutande element

<p>Ett stycke.<p>Ett annat stycke.

Kod 12: Inkorrekt oavslutat element

<td rowspan="3">

Kod 13: Korrekta attributvärden med citationstecken

<td rowspan=3>

Kod 14: Attributvärden saknar citationstecken

<br/><hr/>

Kod 15: Korrekt tomma element är avslutade

<br><hr>

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


7 HTML koder

[ 1 Introduktion | 2 Strukturen3 Ett första test | 4 Skriv korrekt | 5 HTML 4.01 | 6 XHTML 1.0 | 7 HTML-koder | 8 Länkar | 9 Läsarkommentarer ]

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


8 Länkar

[ 1 Introduktion | 2 Strukturen3 Ett första test | 4 Skriv korrekt | 5 HTML 4.01 | 6 XHTML 1.0 | 7 HTML-koder | 8 Länkar | 9 Läsarkommentarer ]

Länkar till tolkningar och HTML-referenser


9 Läsarkommentarer

[ 1 Introduktion | 2 Strukturen3 Ett första test | 4 Skriv korrekt | 5 HTML 4.01 | 6 XHTML 1.0 | 7 HTML-koder | 8 Länkar | 9 Läsarkommentarer ]

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

[ 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

Kommentar:

Namn (frivilligt)

informationsarkitekt.se