{"id":116,"date":"2008-10-22T13:41:37","date_gmt":"2008-10-22T11:41:37","guid":{"rendered":"http:\/\/www.kristiansborg.dk\/bibliotek\/?page_id=116"},"modified":"2008-10-22T13:41:37","modified_gmt":"2008-10-22T11:41:37","slug":"html-for-dem-der-vil-noget-del-1","status":"publish","type":"page","link":"https:\/\/www.kristiansborg.dk\/bibliotek\/artikler\/it\/html-for-dem-der-vil-noget-del-1\/","title":{"rendered":"HTML for dem, der vil noget\t– Del 1"},"content":{"rendered":"

Det er let at lave hjemmesider med de programmer, der findes idag. Desv\u00e6rre giver de ikke en de samme muligheder, som hvis man selv behersker HTML-sproget. F\u00f8lg med fra starten af Kristian Hansens<\/em> artikelserie, og l\u00e6r selv at beherske HTML.<\/p>\n

Hvordan laver man en hjemmeside? Dette sp\u00f8rgsm\u00e5l er blevet stillet mange gange, og emnet har da ogs\u00e5 v\u00e6ret beskrevet tidligere i Privat Computer. Det var i S\u00f8ren Bang Hansens artikler i numrene 10-12 i 1996. Hans artikler beskriver, hvordan du laver din egen hjemmeside ved hj\u00e6lp af diverse programmer. Denne artikelserie g\u00e5r til geng\u00e6ld helt ind til kernen af hjemmesiderne – HTML-sproget.<\/p>\n

Et tekstformat<\/strong><\/p>\n

HTML er ikke et programmeringssprog, men blot en bestemt m\u00e5de at beskrive udseendet af en tekst. Ligesom tekstbehandlingsprogrammer som Word og WordPerfect har deres egne formater til deres dokumenter, har Internet det ogs\u00e5. Formatet er relativt standardiseret, og kladden til den nye version (version 4) er blevet frigivet.\u00a0 Det er organisationen W3C, der bestemmer standarden, og information om den nye version kan ses p\u00e5 deres hjemmeside – http:\/\/www.w3.org<\/a>.<\/p>\n

I mods\u00e6tning 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\u00e6re Edit fra dos eller Notesblok. Man kan ogs\u00e5 bruge et tekstbehandlingsprogram – s\u00e5 skal man bare huske at gemme i tekst- eller dos-format. Der udkommer ogs\u00e5 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\u00e6ver vigtige dele af dokumentet, og ofte har wizards til at hj\u00e6lpe med det besv\u00e6rlige. P\u00e5 denne m\u00e5neds cd-rom ligger naturligvis en HTML-editor.<\/p>\n

I forhold til de muligheder, der er til r\u00e5dighed i tekstbehandlingsprogrammerne er HTML meget begr\u00e6nset. Det betyder ogs\u00e5, at HTML er noget lettere at skrive og tyde end tekstbehanlingesprogrammernes formater.<\/p>\n

Kravet til sproget er som n\u00e6vnt, at det skal forklare browseren, hvordan en bestemt side skal vises. Det skal alts\u00e5 v\u00e6re muligt at s\u00e6tte et m\u00e6rke, der viser, at en bestemt tekst, skal v\u00e6re med fed skrift, skal v\u00e6re et link til en anden side og s\u00e5 videre.<\/p>\n

Disse m\u00e6rker kaldes kommandoer. Kommandoerne i HTML er begr\u00e6nsede, og at lave en god hjemmeside er derfor mere at kunne kombinere kommandoerne til give den \u00f8nskede 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\u00f8lgeligt skal man ikke hugge det, andre har lavet – der er jo noget, der hedder copyright – men det er jo tilladt at blive inspireret…<\/p>\n

Kommandoerne<\/strong><\/p>\n

Alle komandoer skrives i trekantede parenteser (mindre end og st\u00f8rre end). For eksempel er kommandoen til fed skrift B (for bold). Den skrives alts\u00e5 <B>. Det er imidlertid ikke nok at browseren ved, at her skal den starte med at skrive med fed skrift. Den skal ogs\u00e5 vide, hvor den skal stoppe. Det g\u00f8res med kommandoen \/B, der alts\u00e5 skrives som <\/B>. Generelt betyder en skr\u00e5streg foran en kommando, at den oph\u00e6ves.<\/p>\n

Det ses, at det bliver et problem at skrive tegnet mindre end, da det altid bruges til at indlede en kommando. For at g\u00f8re det muligt bruges specielle HTML-navne for enkelte tegn. Det g\u00e6lder blandt andet ogs\u00e5 de danske \u00e6, \u00f8 og \u00e5. De vigtigste ses i tabellen Tegn og g\u00e6t. For at skrive store bogstaver, skrives blot tegnets navn med store bogstaver. For alle andre HTML-kommandoer er store og sm\u00e5 bogstaver det samme.<\/p>\n

Selvom det sj\u00e6ldent er n\u00f8dvendigt i praksis, er der mulighed for at inds\u00e6tte kommentarer i HTML-teksten. Det g\u00f8res ved at s\u00e6tte <! foran teksten og afslutte kommentaren med >.<\/p>\n

Generelle koder <\/strong><\/p>\n

Det er imidlertid ikke nok at kunne vise teksten. Der skal ogs\u00e5 gives oplysninger om siden. Det kan for eksempel v\u00e6re dens titel, baggrundsfarve eller -billede og lignende. Et eksempel p\u00e5 en side, der kun indeholder disse oplysninger, ses i eksempel 1.<\/p>\n

Alle HTML-dokumenter b\u00f8r starte med kommandoen <HTML> og slutte med <\/HTML>. <HEAD>-kommandoen angiver, at det f\u00f8lgende er informationer om dokumentet. Mellem <TITLE> og <\/TITLE> st\u00e5r – naturligvis – sidens titel. Dette er oftest den eneste oplysning, der gives i header-sektionen.<\/p>\n

Den n\u00e6ste sektion er body. I selve <BODY>-kommandoen kan sidens ops\u00e6tning angives. I dette eksempel s\u00e6ttes farverne for henholdsvis baggrunden, tekst, links, aktivt link og bes\u00f8gte links. I tekstboksen Farver i HTML kan du se, hvordan man angiver farver. Mellem <BODY> og <\/BODY> st\u00e5r den tekst, der skal vises p\u00e5 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\u00e5 <BODY BACKGROUND = logo.gif>. Background kan godt kombineres med de \u00f8vrige attributter.<\/p>\n

Tekstformatering<\/strong><\/p>\n

Da HTML oprindeligt var tekstbaseret, findes der adskillige tekstformateringskommandoer. Disse underst\u00f8tttes af samtlige browsere. En af de nye teknikker er imidlertid det, der hedder stylesheets. Stylesheets er lidt avancerede, s\u00e5 de bliver f\u00f8rst behandlet i en senere artikel.<\/p>\n

En af de ting, man skal v\u00e6nne sig til i HTML er, at n\u00e5r man laver et linieskift, bliver det ikke automatisk vist. I stedet skal man inds\u00e6tte kommandoen <BR>, der hvor man vil have sit linieskift. Eksempel p\u00e5 dette ses i eksempel 2. Hvis man vil have et lidt st\u00f8rre mellemrum – for eksempel mellem to afsnit – bruges kommandoen <P>. F\u00e6lles for disse er, at de ikke skal afsluttes. De skal jo ikke omkredse en tekst, men bare udf\u00f8res, n\u00e5r browseren l\u00e6ser dem.<\/p>\n

Man kan have brug for at \u00e6ndre 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\u00f8rste overskrift, mens 6 giver den mindste. Hvordan teksten bliver vist afh\u00e6nger af browseren, og m\u00e5ske endda af brugerens indstilling.<\/p>\n

Skal teksten fremh\u00e6ves af andre \u00e5rsager, findes der ogs\u00e5 kommandoer til det. Det g\u00e6lder fed skrift, kursiv, og understregning, der bruges med <B>, <I> og <U>.<\/p>\n

Hvis du vil \u00e6ndre skrifttypen, kan du bruge kommandoen <FONT>.\u00a0 Den har formatet <FONT Face = “font” Size = st\u00f8rrelse Color = farve>. Face angiver navnet p\u00e5 skrifttypen. Bem\u00e6rk, at det ikke er sikkert, at alle har de skrifttyper, du har. Hvis en skrifttype ikke findes p\u00e5 systemet, vil browseren fors\u00f8ge at erstatte den med en anden, og s\u00e5 er det ikke godt at vide, hvordan siden kommer til at se ud. Size er st\u00f8rrelsen p\u00e5 skrifttypen, og Color er farven. St\u00f8rrelsen kan enten angives absolut eller relativt. En absolut st\u00f8rrelse kan for eksempel v\u00e6re SIZE = 5, mens en relativ kan v\u00e6re SIZE = -2. Ligegyldigt hvilken st\u00f8rrelse skriften havde f\u00f8r, vil SIZE = 5 s\u00e6tte den til 5, mens SIZE = -2 vil s\u00e6tte den til to punkter mindre, end den nuv\u00e6rende skriftst\u00f8rrelse.<\/p>\n

Hvis man kun vil forst\u00f8rre eller formindske skriftst\u00f8rrelsen kan det g\u00f8res med kommandoerne <BIG> og <SMALL>. <BIG> svarer til <FONT SIZE = +1>, mens <SMALL> svarer til <FONT SIZE = -1>.<\/p>\n

Links<\/strong><\/p>\n

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\u00e5 den side, der skal vises, hvis der bliver klikket p\u00e5 den tekst, der st\u00e5r efter kommandoen. Et eksempel p\u00e5 et link er <A HREF = “side2.htm”>G\u00e5 til side 2<\/A>. Hvis brugeren klikker p\u00e5 teksten G\u00e5 til side 2, bliver dokumentet side2.htm vist.<\/p>\n

I dette eksempel skal side2.htm ligge i samme bibliotek, som den fil, der indeholder <A>-kommandoen. For at \u00e5bne filer i andre biblioteker eller p\u00e5 andre servere skal hele adressen skrives. For eksempel <A HREF = http:\/\/www.microsoft.com<\/a>>Microsoft<\/A>. Det er ogs\u00e5 <A>-kommandoen, der tillader g\u00e6ster at sende en e-mail til indehaveren af siden. Det g\u00f8res ved at skrive mailto: og en e-mail-adresse i stedet for adressen p\u00e5 et dokument. Et eksempel kan alts\u00e5 v\u00e6re <A HREF = mailto:billg@microsoft.com> Klager over Windows 95<\/A>. Hvis man vil tilf\u00f8je et emne til e-mail’en, kan ?subject=emne tilf\u00f8jes til adressen. I ovenst\u00e5ende eksempel vil det alts\u00e5 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\u00e6nsning. Man kan lave en reference til filer af enhver type. Hvis browseren underst\u00f8tter filtypen, vil filen blive vist, ellers vil brugeren f\u00e5 valget om at downloade den (gemme den p\u00e5 disk) eller bruge et program til at \u00e5bne den.<\/p>\n

Grafik<\/strong><\/p>\n

For at f\u00e5 sin hjemmeside til at se v\u00e6re lidt smartere end telefonbogen, kan man bruge grafik. Det g\u00f8res med kommandoen <IMG>. I selve <IMG>-kommandoen skal adressen p\u00e5 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\u00e5r visning af billeder fra for at \u00f8ge hastigheden, og derfor b\u00f8r man altid lave en alternativ tekst til billeder. Det er ikke n\u00f8dvendigt at angive billedets st\u00f8rrelse, men det er muligt og skulle g\u00f8re, at siden vises hurtigere.<\/p>\n

F\u00f8lgende eksempel viser billedet firmalogo.gif, der er 180*60, uden ramme. Hvis brugeren ikke kan vise billeder vises i stedet teksten Logo.<\/p>\n

<IMG SRC = “firmalogo.gif”WIDTH = 180 HEIGHT = 60 BORDER = 0 ALT = “Logo”><\/p>\n

Det er ikke alle formater, der er egnede til brug p\u00e5 nettet. De mest udbredte er gif, der bruges til tegninger, og jpg, der bruges til billeder. Et tredje format – png – sp\u00e5s 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\u00e5 forsidecd-rom’en.<\/p>\n

Udover at v\u00e6re et kompakt format, har gif-formatet ogs\u00e5 den fordel, at man kan lave det, der hedder gif-animationer. Det er en r\u00e6kke gif-billeder, der er samlet i en fil, og vises i r\u00e6kkef\u00f8lge. Ved at lave sm\u00e5 \u00e6ndringer fra billede til billede kan man f\u00e5 effekten af en film eller en animation. Animationerne b\u00f8r imidlertid holdes indenfor en begr\u00e6nset m\u00e6ngde billeder, da gif-filen ellers kan blive ret stor. Gif-animationer kan blandt andet laves med programmet Gif Construction Set, der ogs\u00e5 findes p\u00e5 denne m\u00e5neds cd-rom.<\/p>\n

Billeder kan bruges til forskellige ting. Selvf\u00f8lgeligt kan de bruges til at illustrere teksten som i en bog, men de kan ogs\u00e5 bruges som knapper. Det vil sige, at at klikke p\u00e5 dem, svarer til at klikke p\u00e5 et link. Ikke overraskende opn\u00e5s denne effekt ved at s\u00e6tte en <IMG>-kommando inden i <A>-kommandoen i stedet for den almindelige tekst.<\/p>\n

Har man ikke selv evner indenfor det grafiske, kan man finde forskellige billeder p\u00e5 Internet – det er blot at foretage en s\u00f8gning i sin foretrukne s\u00f8gemaskine.<\/p>\n

Et st\u00f8rre eksempel<\/strong><\/p>\n

Til at afslutte denne m\u00e5neds lektion kommer et eksempel. Form\u00e5let med eksemplet er at vise, hvordan man – med de kommandoer, der indtil videre er gennemg\u00e5et – kan lave en simpel hjemmeside. Eksemplet, der kan ses i tekstboksen Det afsluttende eksempel, ligger ogs\u00e5 p\u00e5 denne m\u00e5neds cd-rom.<\/p>\n

Som det ses, er titlen p\u00e5 eksempel Privat Computers HTML-kursus. Baggrunden er bl\u00e5, teksten hvid, links r\u00f8de, det aktive link gr\u00f8nt og bes\u00f8ge links lilla. Dern\u00e6st gives eksempler p\u00e5 brugen af <H1> og <H2> – s\u00e5 kan man se, hvor stor forskellen p\u00e5 de to er. Derudover bliver der indsat en r\u00e6kke billeder – p\u00e5 deres ALT-tekst kan det ses, at man godt kan angive HTML-tegnkoder som &gt; her.<\/p>\n

\u00a0<\/p>\n

Eksempel 1: S\u00e5dan indledes en HTML-side<\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><TITLE>Et eksempel<\/TITLE><\/HEAD><\/p>\n

\u00a0<\/p>\n

<BODY\u00a0 bgcolor=”#000066″ text=”#FFFFFF” link=”#00FFFF” alink = “#00FFFF” vlink=”#FF00FF”><\/p>\n

Bare et eksempel.<\/p>\n

<\/BODY><\/p>\n

<\/HTML><\/p>\n

\u00a0<\/p>\n

Eksempel 2: Linieskift <\/strong><\/p>\n

Teksten<\/p>\n

Dette er<\/p>\n

et eksempel.<\/p>\n

\u00a0<\/p>\n

vises som<\/p>\n

\u00a0<\/p>\n

Dette er et eksempel.<\/p>\n

\u00a0<\/p>\n

Mens<\/p>\n

Dette er<BR>et eksempel.<\/p>\n

\u00a0<\/p>\n

vises som<\/p>\n

\u00a0<\/p>\n

Dette er<\/p>\n

et eksempel.<\/p>\n

Farver i HTML <\/strong><\/p>\n

Ligesom i Windows blandes alle farver i HTML af farverne r\u00f8d, gr\u00f8n og bl\u00e5. Farver angives som regel med et startende #, hvorefter m\u00e6ngden af henholdsvis r\u00f8d, gr\u00f8n og bl\u00e5 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.<\/p>\n

Der findes et alternativ til selv at blande sine farver. Det er at bruge de standardiserede farvenavne, der findes. Det giver f\u00e6rre muligheder, og det er endnu ikke alle browsere, der underst\u00f8tter dem. For at s\u00e6tte baggrundsfarven til hvid, kan man alts\u00e5 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.<\/p>\n

Tegn og g\u00e6t <\/strong><\/p>\n

\u00e6 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &aelig;<\/p>\n

\u00f8\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &oslash;<\/p>\n

\u00e5\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &aring;<\/p>\n

&\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &amp;<\/p>\n

<\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;<\/p>\n

>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &gt;<\/p>\n

\u00a9\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &copy;<\/p>\n

”\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &quot;<\/p>\n

\u00a0<\/p>\n

Det afsluttende eksempel <\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><TITLE>Privat Computers HTML-kursus<\/TITLE><\/HEAD><\/p>\n

<BODY BGCOLOR = blue text = white link = red\u00a0 alink = green vlink = purple><\/p>\n

<H1>Privat Computers HTML-kursus<\/H1><\/p>\n

<H2>Indhold<\/H2><\/p>\n

I denne del har vi set p&aring; f&oslash;lgende kommandoer:<BR><\/p>\n

<IMG SRC = “finger.gif” ALT = -&gt;>Headings<BR><\/p>\n

<IMG SRC = “finger.gif” ALT = -&gt;>Forskellige skrifttyper (<B>fed<\/B>, <I>kursiv<\/I> og <U>understreget<\/U>).<BR><\/p>\n

<IMG SRC = “finger.gif” ALT = -&gt;>Links til andre sider (for eksempel til <A HREF = “http:\/\/www.pricom.dk”>Privat Computer<\/A>).<BR><\/p>\n

<IMG SRC = “finger.gif” ALT = -&gt;>Links til at sende post (<A HREF = “mailto:Kristian.Hansen@pricom.dk”>Kristian.Hansen@pricom.dk<\/A>).<BR><\/p>\n

<H2>Henvisninger<\/H2><\/p>\n

<A HREF = http:\/\/www.w3.org<\/a>>Mere information om HTML standarden <\/A><BR><\/p>\n

<\/BODY><\/p>\n

<\/HTML><\/p>\n","protected":false},"excerpt":{"rendered":"

Det er let at lave hjemmesider med de programmer, der findes idag. Desv\u00e6rre giver de ikke en de samme muligheder, som hvis man selv behersker HTML-sproget. F\u00f8lg med fra starten af Kristian Hansens artikelserie, og l\u00e6r selv at beherske HTML. Hvordan laver man en hjemmeside? Dette sp\u00f8rgsm\u00e5l er blevet stillet mange gange, og emnet har […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":30,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-116","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t