Sider, der skal publiceres på World Wide Web, laves i et særligt format, html, som fortæller browseren, hvordan den skal vise tekst og billeder. Html (Hypertext markup language) er meget fleksibelt og tillader fx, at du indsætter billeder i dine dokumenter og lænker til andre steder på internet. Du kan blande forskellige skriftstørrelser og selv vælge, hvor stort dit dokument skal være, om det skal indeholde lænker til andre af dine egne dokumenter osv. For at lave en html-fil kræves der bare et simpelt tekstbehandlingsprogram, fx notepad. Men udviklingen går i retning af at man bruger et html-program der minder om almindelige tekstbehandlingsprogrammer som Word og WordPerfect. Et program hvor man ser det færdige resultat imens man arbejder med det. Når så den færdige side skal på nettet bliver det lidt mere teknisk. Indenfor erhverv eller det offentlige har man som regel en tekniker man kan give filerne videre til. Og så ellers bare vente på at det kommer ud. Har man en egen opkobling må man selv sende filerne via ftp. Og så er resultatet ude med det samme. At sende filer via ftp kræver at man har et ftp-program fx WS_FTP som frit kan bruges af private. Det første du gør er at lave en primitiv skitse, der viser, hvordan din side skal være opbygget. Skitsen skal vise, hvordan brugeren skal kunne bevæge sig på din side. Det vil sige: hvor mange dokumenter kan man skifte imellem, og hvilke henvisninger leder videre ud i nettet. Det er vigtigt, at du ikke laver din side for uoverskuelig, så brugeren, der har linket sig på mister overblikket. Tre-fire links ud i nettet er nornalt nok. Links ud i nettet skal være tydeligt markeret som sådanne, og du bør tydeligt skelne i dokumentet mellem eksterne links og interne, det vil sige henvisninger til en anden del af dokumentet eller et andet dokument skrevet af dig. De fleste brugere sætter pris på, at de har et overblik over siderne. Internetkursus Amager Erhvervsskole 32 52 52 11 kursus@inet.uni-c.dk Web: http://inet.uni-c.dk/~kursus THOMAS RING, u43-96 1/5
Koderne Alle koder står som et ord i klammer (< >), og ender med en skråstreg (</>). Normalt skal alle koder, der aktiveres, også deaktiveres igen via. koden og en skråstreg. Det fortæller fx programmet, at bogstaver ikke længere skal vises med stort. Et html-dokument startes med koden <HTML.>, og sluttes tilsvarende med </HTM L>. Teksthovedet startes med <HEAD>, og titel l inie begynder med <TITLE>. Titelliniens start og Slutning skal ligge inden for HEAD området. Et par linier længere nede begyndes tekstkroppen med koden <BODY>. Hl-H6 bestemmer tekststørrelser i dokumenter. Hvis du udelader disse koder, vil browseren selv finde ud af en tekststørrelse, men alle ord vil have samme Størrelse. En Overskrift fremhæves fx med <H I > og </H I >. H 1 er den størst mulige skrift. Du har flere muligheder for at manipulere din tekst. <BR> Sluttes linien og starter på en frisk linie. separerer tekst-afsnit, og <HR> placerer en streg i dokumentet, fra venstre til højre side. Ingen af disse koder behøver slut-koden /. <B> starter fed skrift, og skal afsluttes med </B>. Det samme skal <I>, som aktiverer skråskrift (italics). Det vigtigste i et Web-dokument er selvfølgelig henvisninger, der sender læseren videre til et andet dokument på nettet. På fagsprog kaldes dette et 'link'. Et link startes med <A, kommandoen HREF (Hypertext Reference) og URL adressen. Derefter skriver du teksten, der skal aktivere springet. Fx <A HREF= 'http://inet.uni-c.dk/~kursus"> Kursusafdelingen </ A>. Her er der lagt op til, at du klikker på Kursusafdelingen og bliver transporteret videre til kursusafdelingens hjemmeside. Husk altid at kontrollere alle lænker, hvis der er stavefejl i virker de jo ikke. En stavefejl kan også være at skrive med store bogstaver. Din første WWW-side Nu skal vi se på, hvordan man forvandler en almindelig tekst til et htmldokument. Konkret drejer det sig om at indsætte koderne de steder, hvor det er påkrævet, og i øvrigt gøre sig nogle overvejelser over hvordan siden skal fremstå for net-brugeren. Du har ikke den fuld indflydelse på, hvordan det endelige resultat ser ud hos læseren, bl.a. kan han/hun sætte skærmen i forskellige opløsninger og ændre fonte i Netscape. Men du kan alligevel gøre en del ting, der gør siden flottere og nemmere at læse. På næste side er der en tekst, der skal publiceres på nettet. Internetkursus Amager Erhvervsskole 32 52 52 11 kursus@inet.uni-c.dk Web: http://inet.uni-c.dk/~kursus THOMAS RING, u43-96 2/5
Ravnborg Brugt Biks Velkommen til Ravsborg Brugt Biks - Ravnsborggade 11, 2200 Kbh. K Her kan du finde spændende gamle ting - nogle endda antikke - til lave priser. Ugens tilbud: Klaver, kr. 700,- Spisebord, kr. 300,- Suppeterrin, kr. 50,- Kontakt butikken på E-mail: ravnsb@teledanmark.dk Siden skal se nogenlunde sådan ud. Overskriften skal selvfølgelig fremhæves med den størst mulige skrift. Billedet ravn.jpg skal sættes til højre på siden. Prøv at lave nedenstående kode i Notepad og gem filen under navnet ravn.htm IMG SRC placerer billedet. Align=Right placerer det til højre <H1> giver den største overskrift giver et nyt afsnit <BR> giver ny linie - vognretur <UL>Laver en liste med punkopstilling. Nyt punkt for hver <LI> <HTML> <HEAD> <TITLE> Ravnsborg Brugt Biks</TITLE> </HEAD> <BODY> <IMG SRC="ravn.jpg" ALIGN=RIGHT> <H1>Ravnsborg Brugt Biks </H1> Velkommen til Ravsborg Brugt Biks - Ravnsborggade 11, 2200 Kbh. K. <BR> Her kan du finde spændende gamle ting - nogle endda antikke - til lave priser. Ugens tilbud: <UL> <LI>Klaver, kr. 700,- <LI>Spisebord, kr. 300,- <LI>Suppeterrin, kr. 50,- </UL> Kontakt butikken på E-mail: ravnsb@teledanmark.dk </BODY> </HTML>
Billedet ravn.jpg lægger du i samme mappe som ravn.htm. Prøv så at åbne din Html-fil ravn.htm i Netscape eller Internet Explorer. Det skulle gerne se ud som herunder. Hypertext Markup Language er slet ikke så svært, når blot du kender de mest basale koder. Dokumenterne ser forskellige ud alt efter hvem der læser dem. Nogen har få farver på skærmen og lille skærmopløsning, andre har stor skærmopløsning og mange farver. Det er derfor vigtigt at se dokumentet under så mange forhold som muligt før det sendes ud på nettet. Når dokumentet først er på internet kan ca 50 millioner brugere se dokumentet. Grafik i WWW Web sider bliver først rigtigt attraktive, når du inkluderer grafik varierende fra små illustrationer til store billeder. Generelt gælder, at det er bedst, hvis du er forsigtig med at indsætte alt for hukommelseskrævende billeder i html-dokumenter. Brugere med ældre modems vil ofte se bort fra sådanne sider, simpelthen fordi de hverken har tid eller lyst til at vente de minutter det tager, inden siden er hentet hjem. Smidig navigering på WWW er først mulig med et 28.800 bps modem. Ovenstående skal dog ikke opfattes som en undskyldning for slet ikke at inkludere grafik i ens homepage, særligt da det kan gøre en ellers kedelig side betydelig mere attraktiv. Linien <IMG SRC="filnavn"> indsætter grafik i et dokument. Under filavn indsættes navnet på den grafikfil, der skal indsættes i siden, fx ravn.jpg. Du skal altså ikke selv indsætte grafikken i dokumentet, men blot henvise til den vha. en kodelinie. Kommandoen ALIGN tillader dig at bestemme, hvordan grafikken skal placeres. Gyldige parametre er LEFT/RIGHT/ TOP/BOTTOM. Internetkursus Amager Erhvervsskole 32 52 52 11 kursus@inet.uni-c.dk Web: http://inet.uni-c.dk/~kursus THOMAS RING, u43-96 4/5
Lav Hvad dine er en egne lænke hjemmesider/websider på Worl Wide En af grundene til at World Wide Web har fået den store udbredelse er lænker. En lænke er et stykke tekst med streg under som man klikker på for at komme et andet sted. Vi kender dem allesammen fra hjælpefilerne hvor man klikker på det emne der er interessant. World Wide Web virker som en stor hjælpefil. En tekst med lænker (som i hjælpefilen eller på hjemmesiden) hedder med et fint ord hypertekst. Hypertekst er med et andet fint ord interaktivt. Det betyder at den der læser hyperteksten selv bestemmer hvad han/hun vil se. Når du laver en hjemmeside med lænker, dvs. at brugeren har muligheder at vælge i mellem, er det faktisk programmering. En simpel form for programmering måske, men det er altså programmering. En lænke kan også være et billede. Så klikker man på billedet for at komme videre. Hvis billedet forestiller en trykknap kan du måske selv forestille dig hvad man kan bruge det til. Koden: Koden til en WWW-lænke ser nogenlunde sådan ud: <A HREF="http://www.brugsen.dk/tilbud.htm">Tilbud i Brugsen</A> I første halvdel har du adressen hvor lænken fører dig hen, i anden halvdel det klikker på i hjemmesiden: Tilbud i Brugsen. En lænke til Jubii bliver således: <A HREF="http://www.jubii.dk">Jubii</A> Og man ser kun Jubii. Lænker i Netscape Gold: Marker det stykke tekst der skal være en lænke og klik på denne med højre museknap. Vælg Create Link Using Selected. Så kan du skrive adressen på lænken og Netscape laver så selv koden for dig. Ulemper: Ulempen ved lænker/hypertekst kan være at man 'farer vild' i en uoverskuelig hjælpefil eller på en uoverskuelig Website. Som designer af hjemmesider/websites skal man undgå at brugeren kan fare vild. Dette kan bl.a. gøres ved at der på alle sider er en lænke tilbage til oversigten. På Kursusafdelingens hjemmeside er der lænker til oversigten både i toppen og i bunden af alle sider. Se på den. Internetkursus Amager Erhvervsskole 32 52 52 11 kursus@inet.uni-c.dk Web: http://inet.uni-c.dk/~kursus THOMAS RING, u43-96 5/5