Dagens emner

• Grundlæggende computerbegreber
• Det globale hypermedie, historie og forudsætninger
• Websider og webbrowsere
• Start på XHTML
• Hyperlinks

Læsestof til disse lektioner

Supplerende

Øvelser/opgaver i dagens emner

Se nedenfor

Læsestof til de næste lektioner

Bemærkninger

-

Noter

Temaet for denne lektion

Grundlæggende computerbegreber

Et kig på computerens enkelte dele

Figur 1. Hardware, ydre enheder.

• Kabinet
• Skærm
• CD / DVD drev
• Tastatur
• Mus
• Pen
• Højtaler
• Mikrofon
• Joystick

Figur 2. Hardware, indre enheder.

• Bundkort eller motherboard
• Processor eller CPU (Central Processing Unit)
• RAM (Random Access memory)
• ROM (Read Only Memory)
• Grafikkort
• Udvidelsessokkel
• Bus
• Batteri
• Harddisk
• CD-ROM drev
• DVD drev
• Strømforsyning

Computerens hastighed er især afhængig af CPU, RAM, Grafikkort, Bus og harddisk.

Læs mere på How PCs Work (http://computer.howstuffworks.com/pc.htm

Et kig på computere i netværk

Figur 3. Peer to Peer og Client/Server

• Peer-to-peer*) netværk. Betegner kommunikation mellem jævnbyrdige enheder i et kommunikationsnetværk. I et peer-to-peer netværk har computerne samme status og rettigheder. De kan benytte hinandens programmer, printere og data.
• I Client/Server netværk er opstillet en eller evt. flere centrale computere (server), der udfører div. services for de øvrige computer (klienter), der er koblet op på nettet. Fx print-, mail- eller databasefunktioner.
  
  *) peer, eng. betegnelse for (højadelig) ligemand
  

Fig 4. WAN netværk

Netværk kan være organiserede som:

• LAN (Local Area Network) (begrænsning mht. geografisk rækkevidde og antallet af brugere)
• WAN (Wide Area Network), fx Internet, ISDN

WAN netværk består typisk af sammenkoblede LAN netværk

Computere i netværk kommunikerer vha. protokoller. I protokoller fastlægges specifikationer og standarder for hvordan kommunikationen skal foregå. De er ofte ganske omfattende, da de forskellige fejlmuligheder og optioner medfører, at mange tilstande skal beskrives.

Internet og World Wide Web

Word Wide Web er kun en del af den samlede mængde applikaitoner, som udgør Internettet. Emails, nyhedsgrupper, filoverførsler (ftp) og telnet er eksempler på andre Internet applikationer. Computere, der er forbundet med Internettet, benytter sig af forskellige kommunikationsprotokoller, som gør dem i stand til at udveksle data.

To af de mest kendte standarder for Internet kommunikation er TCP og IP, og sammenstillingen TCP/IP benyttes ofte som synonym for den samlede suite af Internet-protokoller, fx:

HTTP, webservere og browsere

• Websider ligger på websevere.
• Hver webside er associeret med en unik HTTP-adresse. Denne adresse kaldes også Uniform Resource Locator (URL) Fx: http://www.phpbuilder.com/columns/hill20011214.php3

  • Protocol: http
    
  • Servernavn: www.phpbuilder.com
    
  • Resource på serveren: /columns/hill20011214.php3
    
• Via en browser (fx Netscape eller Internet Explorer) kan en computer, der er tilsluttet Internet, anmode om at få vist en side.
• Webseveren, der modtager websidens ip-adresse og computerens ip-adresse, sender siden til den computer, der anmodede om den pågældende side.
• Den kommunikationsprotokol der benyttes hedder Hypertext Transfer Protocol (HTTP)

Internettet består overvejende af hypertekstdokumenter. Hypertekstdokumenterne er forbundet med hinanden vha. af links. Andre dokumenter, fx .pdf, .doc, .rtf, .xls etc, kan dog også distriberes via web. Browseren er dog ikke umiddelbart i stand til at fortolke dem, men forudsætter, at der er en fortolker installeret på klienten, fx i form af det program dokumenterne er forfattet med.

Internetdokumenterne er skrevet i standardiserede sprog:

HTML standarden udvikles af en gruppe af interesserede organisationer, der hedder W3C (World Wide Web Consortium):

XHTML

Websider består typisk af tekst, grafik og billeder, men kan også indeholde elementer som animation, lyd og film.

XHTML filer er almindelige tekst-filer, med en .html (eller evt. .htm) extension.

XHTML (Extensible Hypertext Markup Language) er en reformulering af HTML (Extensible Hypertext Markup Language) og bygger på regler og syntaks fra XML (Extensible Markup Language). Men selvom der er tale om en reformulering, ligger XHTML i opbygning og syntaks meget tæt på HTML.

Skal tekster være læsevenlige og lette at finde rundt i, der det helt nødvendigt at markere de enkelte indholdselementer. Med XHTML kan du således specificere:

• Overskrifter
• Paragraffer
• Tabeller
• Punktopstillinge
• Billeder

Det første XHTML-dokument

Under XHTML 1.0 standarden findes 3 dokumenttyper:

• XHTML 1.0 Strict - Denne standard skal du bruge, når når du ønsker en virkelig velstrukturet mark-up, der er fri for alle markup-elementer, som har specificerer layout. Benyt denne standard sammen med W3C's Cascading Style Sheet sproget (CSS) for at specificere font, farve og andre layout virkemidler.
• XHTML 1.0 Transitional - Denne standard udnytter en række af fordelene ved XHTML som fx stylesheeps, men gør det samtidig muligt at specificerer layoutelementer som font, farve og link attributter.
• XHTML 1.0 Frameset - I modsætning til de to foregående standarder understøtter denne standard frames.

De har hver deres XHTML-skabelon:

XHTML 1.0 Strict

<?xml version="1.0" encoding="ISO-8859-15"?>
<!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>Her skriver du titlen på dokumentet</title>
  </head>

  <body>

    <p>Her skriver du teksten, som skal vises på siden.</p>

   </body>

</html>

XHTML 1.0 Transitional

<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Her skriver du titlen på dokumentet</title>
  </head>

  <body>

    <p>Her skriver du teksten, som skal vises på siden.</p>

   </body>

</html>

XHTML 1.0 Frameset

<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Her skriver du titlen på dokumentet</title>
  </head>

  <frameset>
  </frameset>
   
</html>

Den tilsvarende skabelon for XHTML 1.1 set sådan ud:

XHTML 1.1

<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Her skriver du titlen på dokumentet</title>
  </head>

  <body>

    <p>Her skriver du teksten, som skal vises på siden.</p>

   </body>
</html>

Denne Document Type Defiition er næste identisk med XHTML 1.0 Strict og almindeligvis vil der ikke være forskel på den kode, du skriver under XHTML 1.0 Strict og XHTML 1.1. Der dog enkelte forskelle, som er beskrevet på W3C's hjemmeside: http://www.w3.org/TR/xhtml11/changes.html#a_changes

Vi vil som udgangspunkt benytte XHTML 1.1.

Hvad er det og hvad ligner det

Her er et dokument skrevet som ren tekst, også kaldet ASCII. Noget sådant gemmes normalt under navn.txt, vi gemmer det som navn.html, som er den mest almindelige extension til html og xhtml dokumenter.

I begge tilfælde kan det læses af en browser som MS Internet Explorer og Netscape Navigator.

I gang med XHTML

Et XHTML dokument består af elementer. Disse elementer markeres ("markup") med tags. At lære XHTML er at lære sprogets elementer og tags at kende, og at kunne anvende dem.

En generel template for websider

Et XHTML dokument er delt op i en HEAD sektion og en BODY sektion. 

<?xml version="1.0" encoding="ISO-8859-15" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Her skriver du titlen på dokumentet</title>
  <head>
  <body>

    <p>Her skriver du teksten, som skal vises på siden.</p>

  </body>
</html>

En side har altså to dele: et hoved og en krop. I HEAD ('hovedet') gemmes oplysninger om siden, mens BODY ('kroppen') indeholder det, der vises på siden.

I HEAD står forskellige oplysninger, der ikke direkte bliver vist på siden. Hvis du fx angiver en titel på din HTML-side i TITLE, vises den i browservinduets titelbar:

<title>Min første side</title>

XHTML virker på en meget simpel og logisk facon. Browseren læser nemlig XHTML tags fra toppen til bunden og fra venstre mod højre. En XHTML-side starter derfor med det, der skal komme først, og afsluttes med det der skal komme sidst.

Der findes forskellige valideringsservices på nettet, der er i stand til at checke HTML-dokumenter for syntaksfejl. Det vil vi se nærmere på i en senere lektion. 

De elementer I skal bruge i de første øvelser er:

Paragraph - afsnit

<p></p>

Ny linje 

<br />

Overskrifter på forskellige niveauer

<h1>Niveau 1</h1>  -->  <h6>Niveau 6</h6>

Fed

<strong>Fed skrift</strong>

Kursiv, fremhævet

<em>Fremhævet skrift</em>

Vandret linje

<hr />

Liste elementer

1. Ordnede lister

<ol>
<li>Første element</li>
<li>Andet element</li>
</ol>

2. Uordnede lister

<ul>
<li>Første element</li>
<li>Andet element</li>
</ul>

Attributter

Tags kan have attributter (egenskaber, properties) og disse attributter kan tildeles attributværdier.

for eksempel:

<img src="images/logo.gif" / >

hvor værdien af attributten src specificerer den eksterne billedefils placering.

Om at forbedre læseligheden

<?xml version="1.0" encoding="ISO-8859-15" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><title>Her skriver du titlen på dokumentet</title><head><body><p>Her skriver du teksten, som skal vises på siden.</p></body></html>

<?xml version="1.0" encoding="ISO-8859-15" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
  <head>
    <title>Her skriver du titlen på dokumentet</title>
  </head>
  <body>

    <p>Her skriver du teksten, som skal vises på siden.</p>

  </body>
</html>

De to kodeeksempler er ens og genererer det samme output, men det ene ekspemel er væsentlig lettere at læse og forstå end det andet.

XML-regler - eller forskellen mellem HTML og XHTML

Kommentater

<!-- Dette er en kommentar -->

Man kan skrive kommentarer i sin XHTML-kode, dvs. tekst som browseren springer over og ikke viser.

Special tegn

&nbsp;

Hyperlinks

Der er tre typer HTML links

• Absolutte referencer (- eller "absolut adressering")
• Relative referencer (- eller "relativ adressering")
• Navngivne ankre (- referencer til bestemte steder i et dokument)

Absolutte referencer

Et link består af en adresse og en betegnelse eller en label

<a href=" http://www.domaine.dk/mdu/index.html ">MDU's hjemmeside</a>

Absolutte links kan også benyttes i forbindelse med billeder:

<a href=" http://www.domaine.dk/mdu/index.html >
<img src="http://www.domaine.dk/mdu/images/logo.gif" width="50" height="50" alt="MDU hjemmeside"></a>

Benyttes billeder som links, kommer der en lille blå ramme om billedet. Den kan fjernes ved at sætte BORDER attributten i IMG tag'en til 0.

Relative referencer 

I eksemplerne herunder er mappenavne (katalognavne, directory-navne) angivet med fed skrift .

Det nemmeste (med risiko for at blive uoverskueligt) er at placere alle sine filer i en mappe. Her er et eksempel hvor startdokumentet (index.html) skal henvise til flere andre html-dokumenter med navnene fag.html , eksamen.html , su.html , tilmelding.html og info.html . Desuden ligger der i samme mappe de billeder som bruges af nogle af disse sider. Skematisk kunne det se sådan ud:

HTMLskolensWebMappe
   index.html
   fag.html
   eksamen.html
   su.html
   bogtabel.gif
   pengepose.gif
   tilmelding.html
   logo.gif
   info.html

Hvis de to dokumenter, der skal linkes sammen ligger i samme mappe er det kun dokumentnavnet, der skal angives i linket.

<a href="fag.html">Klik her for en oversigt over fagene</a>

Med undermapper

Som regel organiserer man sine filer i mapper, så man kan bevare et overblik over strukturen og sammenhængen mellem webdokumenterne. Det kunne fx. se sådan ud:

HTMLskolensWebMappe
  Billeder
    logo.gif
    bogtabel.gif
    pengepose.gif
  
  index.html
  fag.html
  eksamen.html
  su.html
  tilmelding.html
  info.html
  

Hvis de to dokumenter, der skal linkes sammen ligger i forskellig mapper på samme niveau som vist herover bruges først den relative henvisning ../ der betyder overliggende directory og dernæst navnet på den mappe, der skal søges i for at finde det pågældende dokument.

Så hvis dokumentet eksamen.html har brug for billedet bogtabel ser det sådan ud:

<img ="Billeder/bogtabel.gif">

Brug absolutte links, når du linker til eksterne sider, relative når du linker til dine egne interne sider. Det gør det lettere at flytte dit websted mellem forskellige servere. Dermed bliver dit websted portabelt .

Navngivne ankre

Den sidste og tredje typer links er referencer til bestemte steder i et dokument med navngivne ankre:

<html>
<head>
 <title>Hyperlinks</title>
</head>

<body>
<p>Indholdsfortegnelse:
<ul>
<li><a href="#afs_1">Absolut URL</a></li>
<li><a href="#afs_2">Relative URL</a></li>
<li><a href="#afs_3">Referencer til bestemte steder i et dokument</a></li>
</ul>

<h3><a name="afs_1">Absolut URL</a></h3>
<p>Her kommer teksten til det første afsnit ... ... .. ..

<h3><a name="afs_2">Relativ URL</a></h3>
<p>Her kommer teksten til andet afsnit ... ... .. ..

<h3><a name="afs_3">Referencer til bestemte steder i et dokument</a></h3>
<p>Her kommer teksten til det tredje afsnit ... ... .. ..
</body>
</html>

Man kan også linke til et bestemt sted i et andet dokument:

<a href="side3.html#afs_1">Side 2</a>

Shortcuts til startside

Ofte er webservere sat op, så en "default" startside bliver valgt, hvis ikke andet specificeres. Det drejer sig typisk om sider med filnavne som:

default.htm, default.html, default.php, default.asp, index.htm, index.html, index.php, index.asp, mv.

men andet kan specificeres på webserveren.

Referencer

Hughes giver en grundig introduktion til HTML, men husk også at checke nogle af de mange steder på nettet, hvor du kan læse om HTML og få tips og hints - og endda hjælp fra brugergrupper - til konstruktion af dine XHTML-sider. Se fx http://www.htmlhelp.com, http://webdevelopersjournal.com eller http://www.htmlgoodies.com. Vær dog altid omhyggeligt med at undersøge om, XHTML-siderne, og de anbefalinger, som bliver givet, er i overestemmelse med de XHTML-standarden.

Har du konkrete spørgsmål vedr. syntaks er http://www.w3schools.com en god reference, og hos World-Wide Web Cosortium (W3C) kan du hente XHTML 1.0 og og XHTML 1.1 specifikation http://www.w3.org/MarkUp, ligesom du kan få svar på avancerede spørgsmål.

Opgaver/Øvelser

Opgave 4.1

Åben Notepad og skriv dit navn og din adresse. Gem derefter som .html fil. Åben filen i browseren og i Notepad. Studer forskellene i visning.

Opgave 4.2

Åben en ny side i Notepad og kopier derefter XHTML 1.1 skabelonen herover ind på siden. Sæt dit navn ind i i paragraf-elementet (<p>....</p>) og gem dokumentet som HTML-fil på H-drevet. Find dokumentet UDEN at lukke notepad og dobbeltklik på det. Herefter skulle det gerne dukke op i en browser.

Skift til notepad og sæt h1 elementer ind i dokumentet med noget tekst inden i (<h1>....</h1>). Gem dokumentet igen oveni det gamle - skift til browseren og se resultatet. Husk at opdatere brovseren for hver ny visning (F5)!

Eksperimenter med andre tags, find evt. flere hos Cheryl M. Hughes (se s 34-36) . Skift hele tiden mellem edit (Notepad) og visning (browser).

Opgave 4.3

Åben et nyt HTML-dokument og gem det som artikel.html. Gå på nettet og find en nyhedsartikel (fx www.jp.dk, www.information.dk, www.politiken.dk). Du kan også hente "mumletekst" på Lorem ipsum (www.lipsum.com). Kopier en længere tekst (ved at markere teksten og trykke på Ctrl+C) og sæt den ind (med Ctrl+V) i BODY elementet i det HTML-dokument, du netop har oprettet.

Formater nu teksten:

1. Med overskrifter, rubrikoverskrifter, brødtekst mv.
2. Indsæt formateringskoderne for kursiv og fed, hvor du synes det er passende.
3. Udvælg en del af teksten, der egner sig til opstilling i listeform. Eksperimenter med <ol></ol> og <ul></ul>. Prøv også at eksperimentere med "nesting", dvs. lister der er indlejret i lister (se Hughes s. 38-41 og fx. http://www.w3schools.com/html/html_lists.asp).
4. Kan man selv definere om en nummeret liste skal nummereres med tal eller bogstaver?
5. Har du som web-programmør indflydelse på om en ikke-ordnet liste markeres med runde eller kvardratiske punktopstillinger? (se http://academ.hvcc.edu/~kantopet/xhtml/index.php?page=xhtml+lists&parent=xhtml+basics)

Opgave 4.4

Prøv at lægge et par ekstra mellemrum ind mellem to ord i Notepad. Opdater visningen i browseren og se hvad der sker. Prøv derefter at erstatte hvert mellemrum med &nbsp; ("non breakable space") og læg mærke til forskellen i browseren.

Tvunget mellemrum er blot et af mange specialtegn, der er understøttet i XHTML. Slå op hos Hughes s. 37 og på web-adresserne HTML.dk (url: http://www.html.dk/dokumentation/tegn/) og Character Entity References in HTML 4 and XHTML 1.0 (url: http://www.cookwood.com/html/extras/entities.html) for at se flere eksempler.

Opgave 4.5

Gå ind på Google (http://www.google.com) og undersøg hvor mange browsere, der findes, og hvor udbredte de mest populære er.

Opgave 4.6

Hent tre nyhedsartikler fra nettet. Gem dem som XHTML dokumenter, og navngiv dem fx: artikel-01.html, artikel-02.html og artikel-03.html. Formater dem med <p> , <h1> og <h2> tags.

Opret derefter en forside der, under overskriften "Dagens nyheder", linker internt til de tre dokumenter. Indsæt endnu en overskrift "Øvrige nyheder", hvor du linker eksternt til 3-4 dagblade på Internettet.

Opgave 4.7

Åben én af de tre nyhedssider i Notepad og opret en indholdsfortegnelse, der linker til artiklens underoverskrifter (niveau 2). Findes der ingen underoverskrifter, må du oprette dem først.

Tip: Du kan få hjælp til at løse denne opgave i afsnittet "Navngivne ankre" oven for eller hos Hughes s. 44.