Det er let at lave hjemmesider med de programmer, der findes idag. Desværre giver de ikke en de samme muligheder, som hvis man selv behersker HTML-sproget. Følg med fra starten af Kristian Hansens artikelserie, og lær selv at beherske HTML.
Hvordan laver man en hjemmeside? Dette spørgsmål er blevet stillet mange gange, og emnet har da også været beskrevet tidligere i Privat Computer. Det var i Søren Bang Hansens artikler i numrene 10-12 i 1996. Hans artikler beskriver, hvordan du laver din egen hjemmeside ved hjælp af diverse programmer. Denne artikelserie går til gengæld helt ind til kernen af hjemmesiderne – HTML-sproget.
Et tekstformat
HTML er ikke et programmeringssprog, men blot en bestemt måde at beskrive udseendet af en tekst. Ligesom tekstbehandlingsprogrammer som Word og WordPerfect har deres egne formater til deres dokumenter, har Internet det også. Formatet er relativt standardiseret, og kladden til den nye version (version 4) er blevet frigivet. Det er organisationen W3C, der bestemmer standarden, og information om den nye version kan ses på deres hjemmeside – http://www.w3.org.
I modsætning til de filer, der gemmes fra tekstbehandlingsprogrammer, gemmes HTML-filer i tekst-format. Det vil sige, at man kan bruge en hvilken som helst editor til at gemme dem. Det kan for eksempel være Edit fra dos eller Notesblok. Man kan også bruge et tekstbehandlingsprogram – så skal man bare huske at gemme i tekst- eller dos-format. Der udkommer også flere og flere specielle HTML-editorer. De er i bund og grund ikke andet end en udvidelse af Notesblok, men de har den fordel, at de fremhæver vigtige dele af dokumentet, og ofte har wizards til at hjælpe med det besværlige. På denne måneds cd-rom ligger naturligvis en HTML-editor.
I forhold til de muligheder, der er til rådighed i tekstbehandlingsprogrammerne er HTML meget begrænset. Det betyder også, at HTML er noget lettere at skrive og tyde end tekstbehanlingesprogrammernes formater.
Kravet til sproget er som nævnt, at det skal forklare browseren, hvordan en bestemt side skal vises. Det skal altså være muligt at sætte et mærke, der viser, at en bestemt tekst, skal være med fed skrift, skal være et link til en anden side og så videre.
Disse mærker kaldes kommandoer. Kommandoerne i HTML er begrænsede, og at lave en god hjemmeside er derfor mere at kunne kombinere kommandoerne til give den ønskede effekt end at kunne dem alle i hovedet. Generelt kan man jo – hvis man ser, andre har lavet noget smart – bruge browserens funktion til at vise kildetekst (source) til at se, hvordan. Selvfølgeligt skal man ikke hugge det, andre har lavet – der er jo noget, der hedder copyright – men det er jo tilladt at blive inspireret…
Kommandoerne
Alle komandoer skrives i trekantede parenteser (mindre end og større end). For eksempel er kommandoen til fed skrift B (for bold). Den skrives altså <B>. Det er imidlertid ikke nok at browseren ved, at her skal den starte med at skrive med fed skrift. Den skal også vide, hvor den skal stoppe. Det gøres med kommandoen /B, der altså skrives som </B>. Generelt betyder en skråstreg foran en kommando, at den ophæves.
Det ses, at det bliver et problem at skrive tegnet mindre end, da det altid bruges til at indlede en kommando. For at gøre det muligt bruges specielle HTML-navne for enkelte tegn. Det gælder blandt andet også de danske æ, ø og å. De vigtigste ses i tabellen Tegn og gæt. For at skrive store bogstaver, skrives blot tegnets navn med store bogstaver. For alle andre HTML-kommandoer er store og små bogstaver det samme.
Selvom det sjældent er nødvendigt i praksis, er der mulighed for at indsætte kommentarer i HTML-teksten. Det gøres ved at sætte <! foran teksten og afslutte kommentaren med >.
Generelle koder
Det er imidlertid ikke nok at kunne vise teksten. Der skal også gives oplysninger om siden. Det kan for eksempel være dens titel, baggrundsfarve eller -billede og lignende. Et eksempel på en side, der kun indeholder disse oplysninger, ses i eksempel 1.
Alle HTML-dokumenter bør starte med kommandoen <HTML> og slutte med </HTML>. <HEAD>-kommandoen angiver, at det følgende er informationer om dokumentet. Mellem <TITLE> og </TITLE> står – naturligvis – sidens titel. Dette er oftest den eneste oplysning, der gives i header-sektionen.
Den næste sektion er body. I selve <BODY>-kommandoen kan sidens opsætning angives. I dette eksempel sættes farverne for henholdsvis baggrunden, tekst, links, aktivt link og besøgte links. I tekstboksen Farver i HTML kan du se, hvordan man angiver farver. Mellem <BODY> og </BODY> står den tekst, der skal vises på siden. Hvis der skal vises et billede i baggrunden, angives det med attributten Background = billede. For at vise billedet logo.gif i baggrunden, skrives altså <BODY BACKGROUND = logo.gif>. Background kan godt kombineres med de øvrige attributter.
Tekstformatering
Da HTML oprindeligt var tekstbaseret, findes der adskillige tekstformateringskommandoer. Disse understøtttes af samtlige browsere. En af de nye teknikker er imidlertid det, der hedder stylesheets. Stylesheets er lidt avancerede, så de bliver først behandlet i en senere artikel.
En af de ting, man skal vænne sig til i HTML er, at når man laver et linieskift, bliver det ikke automatisk vist. I stedet skal man indsætte kommandoen <BR>, der hvor man vil have sit linieskift. Eksempel på dette ses i eksempel 2. Hvis man vil have et lidt større mellemrum – for eksempel mellem to afsnit – bruges kommandoen <P>. Fælles for disse er, at de ikke skal afsluttes. De skal jo ikke omkredse en tekst, men bare udføres, når browseren læser dem.
Man kan have brug for at ændre skrift af mange grunde. Hvis man vil lave en overskrift, findes der specielle kommandoer til det. De hedder <Hx>, hvor x’et skal erstattes med et tal fra 1 til 6. 1 giver den største overskrift, mens 6 giver den mindste. Hvordan teksten bliver vist afhænger af browseren, og måske endda af brugerens indstilling.
Skal teksten fremhæves af andre årsager, findes der også kommandoer til det. Det gælder fed skrift, kursiv, og understregning, der bruges med <B>, <I> og <U>.
Hvis du vil ændre skrifttypen, kan du bruge kommandoen <FONT>. Den har formatet <FONT Face = “font” Size = størrelse Color = farve>. Face angiver navnet på skrifttypen. Bemærk, at det ikke er sikkert, at alle har de skrifttyper, du har. Hvis en skrifttype ikke findes på systemet, vil browseren forsøge at erstatte den med en anden, og så er det ikke godt at vide, hvordan siden kommer til at se ud. Size er størrelsen på skrifttypen, og Color er farven. Størrelsen kan enten angives absolut eller relativt. En absolut størrelse kan for eksempel være SIZE = 5, mens en relativ kan være SIZE = -2. Ligegyldigt hvilken størrelse skriften havde før, vil SIZE = 5 sætte den til 5, mens SIZE = -2 vil sætte den til to punkter mindre, end den nuværende skriftstørrelse.
Hvis man kun vil forstørre eller formindske skriftstørrelsen kan det gøres med kommandoerne <BIG> og <SMALL>. <BIG> svarer til <FONT SIZE = +1>, mens <SMALL> svarer til <FONT SIZE = -1>.
Links
Links er det absolut vigtigste i HTML-sproget. Det er dem, der forbinder de forskellige sider med hinanden. Et link laves med kommandoen <A>. Som parametre tager den adressen på den side, der skal vises, hvis der bliver klikket på den tekst, der står efter kommandoen. Et eksempel på et link er <A HREF = “side2.htm”>Gå til side 2</A>. Hvis brugeren klikker på teksten Gå til side 2, bliver dokumentet side2.htm vist.
I dette eksempel skal side2.htm ligge i samme bibliotek, som den fil, der indeholder <A>-kommandoen. For at åbne filer i andre biblioteker eller på andre servere skal hele adressen skrives. For eksempel <A HREF = http://www.microsoft.com>Microsoft</A>. Det er også <A>-kommandoen, der tillader gæster at sende en e-mail til indehaveren af siden. Det gøres ved at skrive mailto: og en e-mail-adresse i stedet for adressen på et dokument. Et eksempel kan altså være <A HREF = mailto:billg@microsoft.com> Klager over Windows 95</A>. Hvis man vil tilføje et emne til e-mail’en, kan ?subject=emne tilføjes til adressen. I ovenstående eksempel vil det altså blive til mailto:billg@microsoft.com?subject=Win95 . Som hovedregel bruges <A> til at vise et nyt HTML-dokument eller til at sende e-mails. Det er imidlertid ingen begrænsning. Man kan lave en reference til filer af enhver type. Hvis browseren understøtter filtypen, vil filen blive vist, ellers vil brugeren få valget om at downloade den (gemme den på disk) eller bruge et program til at åbne den.
Grafik
For at få sin hjemmeside til at se være lidt smartere end telefonbogen, kan man bruge grafik. Det gøres med kommandoen <IMG>. I selve <IMG>-kommandoen skal adressen på billedet angives. Endvidere kan det angives, om billedet skal have en ramme, samt en alternativ tekst, hvis brugeren ikke kan eller vil se billeder. Mange brugere slår visning af billeder fra for at øge hastigheden, og derfor bør man altid lave en alternativ tekst til billeder. Det er ikke nødvendigt at angive billedets størrelse, men det er muligt og skulle gøre, at siden vises hurtigere.
Følgende eksempel viser billedet firmalogo.gif, der er 180*60, uden ramme. Hvis brugeren ikke kan vise billeder vises i stedet teksten Logo.
<IMG SRC = “firmalogo.gif”WIDTH = 180 HEIGHT = 60 BORDER = 0 ALT = “Logo”>
Det er ikke alle formater, der er egnede til brug på nettet. De mest udbredte er gif, der bruges til tegninger, og jpg, der bruges til billeder. Et tredje format – png – spås at overtage gif’s plads med tiden. Hvis ens foretrukne tegneprogram ikke kan gemme i disse formater, kan man bruge Paint Shop Pro til at konvertere billederne. Paint Shop Pro er shareware og ligger som et af de faste indslag på forsidecd-rom’en.
Udover at være et kompakt format, har gif-formatet også den fordel, at man kan lave det, der hedder gif-animationer. Det er en række gif-billeder, der er samlet i en fil, og vises i rækkefølge. Ved at lave små ændringer fra billede til billede kan man få effekten af en film eller en animation. Animationerne bør imidlertid holdes indenfor en begrænset mængde billeder, da gif-filen ellers kan blive ret stor. Gif-animationer kan blandt andet laves med programmet Gif Construction Set, der også findes på denne måneds cd-rom.
Billeder kan bruges til forskellige ting. Selvfølgeligt kan de bruges til at illustrere teksten som i en bog, men de kan også bruges som knapper. Det vil sige, at at klikke på dem, svarer til at klikke på et link. Ikke overraskende opnås denne effekt ved at sætte en <IMG>-kommando inden i <A>-kommandoen i stedet for den almindelige tekst.
Har man ikke selv evner indenfor det grafiske, kan man finde forskellige billeder på Internet – det er blot at foretage en søgning i sin foretrukne søgemaskine.
Et større eksempel
Til at afslutte denne måneds lektion kommer et eksempel. Formålet med eksemplet er at vise, hvordan man – med de kommandoer, der indtil videre er gennemgået – kan lave en simpel hjemmeside. Eksemplet, der kan ses i tekstboksen Det afsluttende eksempel, ligger også på denne måneds cd-rom.
Som det ses, er titlen på eksempel Privat Computers HTML-kursus. Baggrunden er blå, teksten hvid, links røde, det aktive link grønt og besøge links lilla. Dernæst gives eksempler på brugen af <H1> og <H2> – så kan man se, hvor stor forskellen på de to er. Derudover bliver der indsat en række billeder – på deres ALT-tekst kan det ses, at man godt kan angive HTML-tegnkoder som > her.
Eksempel 1: Sådan indledes en HTML-side
<HTML>
<HEAD><TITLE>Et eksempel</TITLE></HEAD>
<BODY bgcolor=”#000066″ text=”#FFFFFF” link=”#00FFFF” alink = “#00FFFF” vlink=”#FF00FF”>
Bare et eksempel.
</BODY>
</HTML>
Eksempel 2: Linieskift
Teksten
Dette er
et eksempel.
vises som
Dette er et eksempel.
Mens
Dette er<BR>et eksempel.
vises som
Dette er
et eksempel.
Farver i HTML
Ligesom i Windows blandes alle farver i HTML af farverne rød, grøn og blå. Farver angives som regel med et startende #, hvorefter mængden af henholdsvis rød, grøn og blå angives i hexadecimal notation. Hvis du ikke er kendt med hex-tal, kan du bruge lommeregneren i Windows til at omregne tallene. For at finde ud af hvilke blandinger, der giver hvilke farve, kan du bruge Windows Paint eller Paint Shop Pro – de giver begge mulighed for selv at blande farver.
Der findes et alternativ til selv at blande sine farver. Det er at bruge de standardiserede farvenavne, der findes. Det giver færre muligheder, og det er endnu ikke alle browsere, der understøtter dem. For at sætte baggrundsfarven til hvid, kan man altså enten skrive <BODY bgcolor=”#FFFFFF”> eller <BODY bgcolor=White>. De predefinerede farver er Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua.
Tegn og gæt
æ æ
ø ø
å å
& &
< <
> >
© ©
” "
Det afsluttende eksempel
<HTML>
<HEAD><TITLE>Privat Computers HTML-kursus</TITLE></HEAD>
<BODY BGCOLOR = blue text = white link = red alink = green vlink = purple>
<H1>Privat Computers HTML-kursus</H1>
<H2>Indhold</H2>
I denne del har vi set på følgende kommandoer:<BR>
<IMG SRC = “finger.gif” ALT = ->>Headings<BR>
<IMG SRC = “finger.gif” ALT = ->>Forskellige skrifttyper (<B>fed</B>, <I>kursiv</I> og <U>understreget</U>).<BR>
<IMG SRC = “finger.gif” ALT = ->>Links til andre sider (for eksempel til <A HREF = “http://www.pricom.dk”>Privat Computer</A>).<BR>
<IMG SRC = “finger.gif” ALT = ->>Links til at sende post (<A HREF = “mailto:Kristian.Hansen@pricom.dk”>Kristian.Hansen@pricom.dk</A>).<BR>
<H2>Henvisninger</H2>
<A HREF = http://www.w3.org>Mere information om HTML standarden </A><BR>
</BODY>
</HTML>