Oppgaver til kurset "Introduksjon til HTML"

I dette kurset skal du gjøre en del oppgaver som går ut på å sette inn HTML kommandoer i en vanlig tekst fil. Du bruker den samme filen hele tiden, og bygger den gradvis ut med mer og mer avanserte HTML konstruksjoner - i arbeider etter den såkalte spiralmetoden.

Filen det skal jobbes på vil ligge tilgjengelig lokalt på hvert kurssted, men den ligger også for downloading her.

Her ligger filen lagret som ren tekst, og du vil se at Web klienten ikke gjør annen formattering av denne enn det som er mulig med blanke tegn og linjeskift.

Du skal altså ta en kopi av denne filen til et område på din maskin, og behandle den videre med en teksteditor, f.eks. Word. Hvis du klikket på hyperteksten over og fikk opp filen, kan du enkelt ta en kopi av den ved å velge Save As .. i File menyen til Netscape.

Kall filen f.eks. oppgv.htm når du tar kopien eller downloader den.

Du skal nå gjøre flg. eksperiment før vi går over til oppgavene:

Bruk Web klienten (Netscape), gå inn i File menyen og velg Open File .., og åpne filen oppgv.htm der du la den. Observer hva som skjer - hvordan vises filen på skjermen nå i forhold til forrige gang? Det ser ikke videre leselig ut?

Det som skjedde, var at du nå gjorde om filen fra en ren tekst fil til en HTML fil. Hvordan skjedde det, lurer du sikkert på? Svaret er at filendelser som htm og html er magiske for Web klienten - den antar at filen er en HTML fil. Det er den jo ikke i øyeblikket, for den inneholder jo ingen HTML tager i det hele tatt! Og som vi ser ignoreres linjeskift og annen formattering fra tekstfilen fullstendig.

Øvingsoppgaver

Filen du har tatt en kopi av, er et utdrag fra en artikkelsamling om desktop publishing (DTP). Dokumentet består av 4-5 forskjellige artikler. Du skal gradvis bearbeide dette dokumentet til å bli en avansert og lettlest hypermedia presentasjon, det er den slett ikke i øyeblikket!

1: Initiell seksjonering

Du skal starte med å bruke strukturtagene i HTML til å splitte opp filen i en header del og en kropp. Header delen skal ha en tittel (bruk <title> tagen). Helt på toppen av dokumentets kropp skal du benytte <h1> til å gi dokumentet en synlig tittel også. Totalt sett i denne øvelsen skal du ha benyttet tagene <html>, <head> <body> og <h1>.

2: Underinndelinger

Dokumentet ser nå litt bedre ut, men ikke mye. Du skal nå gå over dokumentet og forsøke å identifisere logiske biter som artikkeloverskrifter, underoverskrifter, titler, referanser etc. og sette inn HTML tager for disse tingene. Alle steder der det er naturlig å ha et paragrafskille eller linjeskift må du sette inn dette eksplisitt. I denne øvelsen bør du i det minste ha benyttet tagene <h2>, <h3> <p>, <br>, <p> og <blockquote>, men gjerne flere.

3: Innsetting av logiske tager for utheving av tekst

Hvis du ønsker å sprite opp presentasjonen ytterligere, kan du nå sette inn tager som uthever ord og uttrykk i teksten.

4a: Unummererte lister

Du skal nå begynne å forberede en innholdsfortgnelse på toppen av dokumentet, og skal bruke en av listetagene i HTML til dette. Start med <ul> listetypen. Titlene i innholdsfortegnelsen skal være artikkeltittelene. Foran innholdsfortegnelsen lager du en underoverskrift med navn Innholdsfortegnelse, og velger en tag for dette.

4b: Nummerert liste

La innholdsfortegnelsen være nummerert i stedet for unummerert.

4c: Innholdsfortegnelse med kort beskrivelse av artiklene

Bruk <dl> listetypen, og utvid innholdsfortegnelsen til også å inneholde et par linjer om hver artikkel, nærmest som en ingress under tittelen.

5a: Linker fra innholdsfortegnelsen til hver artikkel

Du skal nå la titlene i innholdsfortegnelsen være en link til den respektive artikkel lenger ned i dokumentet. Du må da legge inn ankere i form av <a name="...."> tager nede der hver artikkel starter, mens du i selve innholdsfortegnelsen legger inn <a href="#blabla"> linker til disse stedene.

5b: Linker til ekstern informasjon på Internettet

Flere av artiklene omtaler emner det finnes masse informasjon om på Internettet. Det vil kunne være svært nyttig for en leser å få tilgang til dette. Du skal derfor sette opp noen hyperlinker til denne informasjonen. Her er en liste over URLer til relevant informasjon:

http://yoyo.cc.monash.edu.au/~wigs/postscript/: Informasjon om- og pekere til informasjon om PostScript.
http://www.winternet.com/~jmg/9501.html: Masse nyttige tips om Quark, Illustrator, PhotoShop og Pagemaker
http://www.adobe.com/Acrobat/Acrobat0.html: Informasjon om Adobe Acrobat produktene
http://www.adobe.com/Apps/AldusPageMaker.html: Informasjon om Aldus Pagemaker
http://www.adobe.com: Adobes Web hjemmeside

6a: Sett inn bilder i teksten

Bruk <img> tagen og fiff opp teksten med litt clipart og små bilder. Du har f.eks. tilgjengelig ikoner for Adobes produkter, du har striper og forskjellige bullets osv. Husk alt-opsjonen. Hvordan bør denne brukes når det gjelder bilder som dette?

Her er forresten pekere til noen steder du kan hente clipart ute på nettet:

6b: Sett inn en link til et stort bilde vha. et ikon

Du skal nå sette inn et litt større bilde. Dvs. - bildet skal ikke dukke opp inline siden det er såpass stort at vi ikke ønsker at leseren skal vente på at det loades. Du skal derfor i stedet sette opp et lite ikon inline, men. ikonet skal være en link til det store bildet.

Prosjektoppgave

Hvis det blir tid, skal det utføres en litt større prosjektoppgave der all tekst skrives inn fra bunnen av. Du skal lage en litt større HTML presentasjon som gjør bruk av mest mulig av det kurset har tatt opp. Dette betyr at du skal forsøke å benytte tager fra de ulike kategoriene tager, men samtidig skal du forsøke å tenke design og brukervennlighet i det du lager.

Temaet for prosjektoppgaven er fritt, men to mulige forslag er

Lag en presentasjon av firmaet du jobber for. Forretningsområder, organisasjon, antall ansatte, beliggenhet etc.
Lag en presentasjon av deg selv, hva du holder på med, hobbier, familie etc.

Uansett hva du velger, skal du nå prøve å dele opp presentasjonen i et par småfiler, og tilby enkle navigeringsmuligheter for å gå fra en fil til en annen.

Foreleser vil gå rundt og hjelpe til. Et utvalg av prosjektene vil bli forsøkt evaluert i plenum før kursslutt.

Oppdatert, 26. april 1995