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

I dette afsnit af vores store Internet-kursus gennemg\u00e5r Kristian Hansen<\/em> de nye teknikker, der er gjort mulige med Dynamic HTML, og han viser ogs\u00e5, hvordan man kan forbedre sin hjemmeside med lyd og videoklip.<\/p>\n

I mods\u00e6tning til HTML er Dynamic HTML (dHTML) ikke en fastsat standard. Netscape og Microsoft har – selvf\u00f8lgeligt fristes man til at sige – hver valgt deres m\u00e5de at implementere dynamik i HTML-sproget p\u00e5. Denne artikel vil naturligvis beskrive begge implementeringer. dHTML omfatter meget mere end det oprindelige HTML, og det er i h\u00f8jere grad programmering. For eksempel g\u00f8r mange kommander brug af scriptsprog som JavaScript eller VBScript. Disse sprog vil blive gennemg\u00e5et senere i kurset, og i den forbindelse vil de p\u00e5g\u00e6ldende dHTML-kommandoer ogs\u00e5 blive n\u00e6rmere beskrevet.<\/p>\n

Stylesheets<\/strong><\/p>\n

Stylesheets er hj\u00f8rnestenen i dHTML, og selv uden brug af scripting kan man opn\u00e5 store fordele ved at bruge dem.\u00a0 Derudover er Netscape og Microsoft blevet enige om at bruge den stylesheet-standard, der hedder Cascading Stylesheets (CSS). Et stylesheet svarer til en typografisamling i Microsoft Word. I et stylesheet er det er muligt at definere, hvordan overskrifter, links, br\u00f8dtekst og lignende skal se ud. N\u00e5r browseren ser for eksempel en <H1>-kommando, ved den, at den skal vise den med den skrifttype, der er angivet i det p\u00e5g\u00e6ldende stylesheet. P\u00e5 den m\u00e5de slipper forfatteren for at bruge <FONT>-kommandoen, hver gang der skal skrives en overskrift. Det er ogs\u00e5 muligt at bruge stylesheets til at angive den absolutte placering p\u00e5 alle elementer i et HTML-dokument – det var ellers et trick, der tidligere kun kunne opn\u00e5s ved brug af tabeller.<\/p>\n

Placering af stylesheets<\/strong><\/p>\n

Et stylesheet best\u00e5r af en r\u00e6kke informationer, der definerer de forskellige elementer. Stylesheets kan enten skrives direkte i HTML-filen eller l\u00e6gges i en ekstern fil. Det sidste er praktisk, hvis man har flere sider, der skal have det samme udseende.<\/p>\n

Hvis man vil skrive definitionen i HTML-dokumentet g\u00f8res det med kommandoen <STYLE type = “text\/css”> Text\/css angiver hvilken type stylesheet, der er tale om. Udover CSS kan ogs\u00e5 text\/javascript bruges, men kun i Netscape Navigator. Da Navigator ogs\u00e5 underst\u00f8tter CSS, vil JavaScript stylesheets ikke blive beskrevet yderligere her.<\/p>\n

Eksempel 1 viser, hvordan et HTML-dokument med stylesheet-definition kan se ud. Hvis et stylesheet skal hentes i en ekstern fil, g\u00f8res det med kommandoen <LINK rel = “stylesheet” href = “filnavn.css”>, der placeres i <HEAD>-sektionen af HTML-dokumentet.<\/p>\n

Skrifttyper<\/strong><\/p>\n

Som altid er der et problem med skrifttyper. Man kan ikke v\u00e6re sikker p\u00e5, at l\u00e6seren har alle forfatterens skrifttyper installeret. For at undg\u00e5 at siden kommer til at virke helt h\u00e5bl\u00f8s, hvis den bes\u00f8gende ikke har netop den rigtige skrifttype, er det muligt at angive flere forskellige skrifttyper. Disse skal blot adskilles med et komma. For eksempel vil h1 {font-family: Arial, sans-serif} angive, at overskrifter skal vises med Arial, hvis den findes, og – hvis ikke – med en sans-serif-skrifttype.<\/p>\n

Klasser<\/strong><\/p>\n

Hvad s\u00e5, hvis alle overskrifter ikke skal v\u00e6re ens. En simpel l\u00f8sning er at bruge inline stylesheets. Inline stylesheets g\u00f8r det muligt kun at anvende en bestemt typografi p\u00e5 et enkelt element. I eksempel 2 bruges forskellige typografier p\u00e5 de to <H1>-elementer. Det er imidlertid ret omfattende at skulle angive typografien hver gang, man laver en overskrift – s\u00e5 kunne man jo lige s\u00e5 godt bruge <FONT>-kommandoen.<\/p>\n

I stedet kan man lave forskellige klasser. Ved at angive, hvilken klasse et bestemt element tilh\u00f8rer, kan man bestemme, hvilken typografi, der skal anvendes p\u00e5 den. En ny klasse oprettes i style-definitionen. Foran dens navn s\u00e6ttes et punktum, hvorefter selve typografien angives som ved alle andre elementer.<\/p>\n

Eksempel 3 viser, hvordan man kan bruge klasser til at opn\u00e5 den samme virkning som i eksempel 2.<\/p>\n

I familie med klasser er ogs\u00e5 ID. ID bruges sammen med script-funktioner, og defineres p\u00e5 samme m\u00e5de som klasser – blot indledes de med # i stedet for punktum. Hvis man ved, at man ikke vil bruge script-funktioner, b\u00f8r man anvende klasser.<\/p>\n

Pseudoklasser <\/strong><\/p>\n

Pseudoklasser er klasser, der ikke eksisterer i HTML-sproget, men som alligevel kendes af browserne. Det g\u00e6lder for eksempel ved links. Elementet <A>, der opretter linket, har pseudoklasserne link, visited og active, som angiver, hvordan en henvisning skal vises. Pseudoklasser refereres ved at skrive den oprindelige klasse efterfulgt af et kolon og pseudoklassens navn. Eksempel 4 viser, hvordan udseendet af en henvisning kan angives.<\/p>\n

Span og Div<\/strong><\/p>\n

Hvis man gerne vil \u00e6ndre udseendet af en del af teksten, kan man bruge kommandoen <SPAN>. Som p\u00e5 alle andre HTML-elementer er det muligt at angive en klasse p\u00e5 <SPAN>. Som det ses i eksempel 5, er det med den kombination nemt for eksempel at \u00e6ndre farve p\u00e5 forskellige dele af teksten.<\/p>\n

Er det et helt afsnit eller mere, der skal markeres, b\u00f8r man bruges <DIV> og <\/DIV> i stedet for <SPAN>.<\/p>\n

Placering af elementer<\/strong><\/p>\n

Ved hj\u00e6lp af stylesheets er det ogs\u00e5 muligt at bestemme, hvor de forskellige elementer skal placeres p\u00e5 siden. Det foreg\u00e5r p\u00e5 den m\u00e5de, at n\u00e5r en browser m\u00f8der et element med CSS-placering, s\u00e6tter den automatisk et usynlig rektangel omkring elementet. Dette rektangel kaldes en bounding box, og dets koordinater kan enten s\u00e6ttes i forhold \u00f8verste venstre hj\u00f8rne af sk\u00e6rmen – absolut placering – eller i forhold til andre elementer – relativ placering. Derudover er det muligt at lade elementer overlappe hinanden, og at g\u00f8re dem usynlige.<\/p>\n

Selvom man bruger absolut positionering, vil man n\u00e6ppe have alle ens overskrifter til at blive vist p\u00e5 det samme sted. Derfor er det en fordel at bruge inline stylesheets i forbindelse med placering af elementer. Som det ses af eksempel 6, skal det f\u00f8rst angives om elementets placering er relativ eller absolut. Parametrene top og left angiver placeringen, mens width og height angiver st\u00f8rrelsen p\u00e5 rektanglet.<\/p>\n

Flere kommandoer<\/strong><\/p>\n

Der findes mange flere kommandoer i CSS, end der er plads til at gennemg\u00e5 her. Der findes imidlertid en komplet liste over CSS-kommandoer p\u00e5 denne m\u00e5neds forside-cdrom.<\/p>\n

Andre former for dynamik<\/strong><\/p>\n

CSS er imidlertid ikke den eneste m\u00e5de at lave dynamiske HTML-sider p\u00e5. JavaScript og VBScript, som vil blive gennemg\u00e5et senere i kurset, er en anden meget popul\u00e6r m\u00e5de, men kr\u00e6ver, at man l\u00e6rer en vis grad af programmering. For de, der ikke har tid eller lyst til at s\u00e6tte sig ind i mulighederne med script-sprogene, er der imidlertid en anden udvej. Det er at g\u00f8re brug af de mange plug-ins, der findes til de forskellige browsere (se for eksempel artiklen Udvid din browser i Privat Computer nr. 9\/1997). Mange af disse er specielt rettet mod dynamiske og grafiske hjemmesider. Hvor ulempen ved de nye funktioner i dHTML er, at der kr\u00e6ves en relativ ny browser, er ulempen ved plug-ins, at brugeren skal downloade og installere den rette plug-in, f\u00f8r han kan se siden.<\/p>\n

Macromedia Shockwave <\/strong><\/p>\n

Den uden tvivl mest popul\u00e6re plug-in er Macromedia Shockwave. Ved at benytte Shockwave kan man g\u00f8re sin hjemmeside til \u00e9n stor multimedieoplevelse, hvor alt kan bruges som links, og lyd og billede smelter sammen, som p\u00e5 en multimediecd-rom. Grunden til dette er logisk: Shockwave bliver lavet i programmet Macromedia Designer, der ogs\u00e5 bruges til de professionelles multimediearbejde. Mulighederne med Shockwave er enorme – den st\u00f8rste begr\u00e6nsning er, at man skal ud at investere i programmet, som er temmelig pebret. Et andet problem er, at de pr\u00e6sentationer, der kan laves i Macromedia Designer, oftest er fyldt med grafik, hvilket g\u00f8r dem ret tunge at hente over et modem.<\/p>\n

Andre plug-ins<\/strong><\/p>\n

Synes man det er lidt groft at skulle investere i et dyrt multimedie-v\u00e6rkt\u00f8j bare for at strikke sin hjemmeside sammen, kan man ogs\u00e5 klare sig med mindre. Selvom Macromedia leverer det mest udbredte produkt, betyder det jo ikke, at de er de eneste p\u00e5 markedet. Bare ved at kigge p\u00e5 Netscapes side over plug-ins til deres browsere, kan man se, at der er en m\u00e6ngde andre multimedie-programmer p\u00e5 markedet.<\/p>\n

Lyd<\/strong><\/p>\n

Det er meget godt, at man kan f\u00e5 sin hjemmeside sat op pr\u00e6cis, som man vil have det, og det er ogs\u00e5 flot med noget passende grafik, men af og til er det n\u00f8dvendigt med noget lyd. Lyd kan afspilles p\u00e5 flere forskellige m\u00e5der. Den ene g\u00e5r ud p\u00e5 at lave et link til en lydfil. Formatet er ikke s\u00e5 vigtigt, men man skal v\u00e6re sikker p\u00e5, at brugeren kan afspille den p\u00e5 sit system – det kan enten v\u00e6re, fordi browseren har afspilningsfunktioner indbygget, eller fordi brugeren har installeret en plug-in. V\u00e6lger man at bruge enten wave-filer eller midi-filer, er man rimelig sikker p\u00e5, at den kan afspilles.<\/p>\n

Man kan ogs\u00e5 v\u00e6lge automatisk at afspille et stykke musik, n\u00e5r siden bliver indl\u00e6st. Det g\u00f8res med kommandoen <BGSOUND SRC = filnavn>, hvor filnavn er adressen p\u00e5 den fil, der skal afspilles. Kommandoen inds\u00e6ttes f\u00f8rst i BODY-sektionen.<\/p>\n

Hver metode har naturligvis sine fordele, men man skal nok v\u00e6re p\u00e5passelig med at bruge baggrundslyden alt for meget. Her har brugeren nemlig ingen mulighed for at undg\u00e5 at h\u00f8re lyden – det kan v\u00e6re vedkommende h\u00f8rer noget mere interessant over sit lydkort, og det kan ogs\u00e5 v\u00e6re, at han slet intet lydkort har – sidstn\u00e6vnte er ofte tilf\u00e6ldet for folk, der surfer fra deres arbejdsplads eller fra uddannelsesinstitutioner.\u00a0 I stedet for at blive imponeret over ens side p\u00e5 grund af den smarte lyd, bliver de tr\u00e6tte af at skulle klikke ok til beskeden om, at der ikke kunne findes et program til at afspille lydfilen med.<\/p>\n

Video<\/strong><\/p>\n

Har man sagt lyd, har man vel ogs\u00e5\u00a0 sagt video. Ved hj\u00e6lp af en udvidelse af IMG-kommandoen er det muligt at inds\u00e6tte et videoklip. Udvidelsen hedder DYNSRC og angiver adressen p\u00e5 det videoklip, der skal afspilles. Ved ogs\u00e5 at s\u00e6tte de normale IMG-parametre – SRC og ALT – er det muligt at vise brugeren et billede, hvis han ikke kan se videoklippet, eller – hvis han heller ikke kan se billedet – en alternativ tekst.<\/p>\n

Som med lydfiler g\u00e6lder det, at det er brugeren selv, der m\u00e5 s\u00f8rge for at have en plug-in, der underst\u00f8tter filformatet. Windows 95-brugere har en AVI-afspiller indbygget i operativsystemet, mens det er mere tvivlsomt, om folk kan afspille andre formater, som for eksempel MPEG.<\/p>\n

Eksempel 6 viser, hvordan lyd og video kan indbygges i en hjemmeside.<\/p>\n

En appetitv\u00e6kker<\/strong><\/p>\n

Selvom den del af Dynamic HTML, der er blevet gennemg\u00e5et i denne artikel, \u00e5bner for mange ting, der ikke tidligere har v\u00e6ret muligt i HTML, er det kun toppen af isbjerget. Ved hj\u00e6lp af scripting-sprog som Javascript og VBScript er det muligt at lave siden fuldst\u00e6ndig interaktiv. Billeder kan skiftes ud, n\u00e5r musemark\u00f8ren bev\u00e6ges hen over dem, siderne kan p\u00e5virkes af det, brugeren skriver i en formular og meget meget mere – alt sammen uden brug af plug-ins. Alt dette vil blive beskrevet i de kommende numre af Privat Computer, hvor vi l\u00e6gger ud med at gennemg\u00e5 VBScript, der er implementeret i Internet Explorer 3 og 4. N\u00e5r det er gennemg\u00e5et kommer turen til JavaScript – ogs\u00e5 kendt som ECMA-script – der underst\u00f8ttes af Netscape 3 og 4, og – til en vis grad – Internet Explorer 3. Internet Explorer har fuld underst\u00f8ttes af JavaScript. Der er derfor mange gode grunde til ogs\u00e5 at l\u00e6se Privat Computer i de kommende m\u00e5neder<\/p>\n

\u00a0<\/p>\n

Eksempel 1: Et simpel eksempel med stylesheet <\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><\/p>\n

<STYLE type = “text\/css”><\/p>\n

h1 {font-family: Arial; font-style: bold; color: red; font-size 16pt}<\/p>\n

<\/STYLE><\/p>\n

<\/HEAD><\/p>\n

<BODY><\/p>\n

<H1>Overskrift<\/H1><\/p>\n

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

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

Eksempel 2: Brug af inline stylesheets<\/strong><\/p>\n

<HTML><\/p>\n

<BODY><\/p>\n

<H1 STYLE = “font-family: Arial; font-style: bold; color: red; font-size 16pt”><\/p>\n

Overskrift<\/H1><\/p>\n

<BR><\/p>\n

blah blah<\/p>\n

<\/BR><\/p>\n

<H1>Overskrift <\/H1><\/p>\n

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

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

Eksempel 3: Brug af klasser <\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><\/p>\n

<STYLE type = “text\/css”><\/p>\n

.type1 {font-family: Arial; font-style: bold; color: red; font-size 16pt}<\/p>\n

.type2 {font-family: sans-serif; font-style: italic}<\/p>\n

<\/STYLE><\/p>\n

<\/HEAD><\/p>\n

<BODY><\/p>\n

<H1 CLASS = type1><\/p>\n

Overskrift<\/H1><\/p>\n

<BR><\/p>\n

blah blah<\/p>\n

<\/BR><\/p>\n

<H1 CLASS = type2>Overskrift<\/H1><\/p>\n

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

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

Eksempel 4: Definition af henvisninger <\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><\/p>\n

<STYLE type = “text\/css”><\/p>\n

A:link {color: red}<\/p>\n

A:visited {color: red; font-style:italic}<\/p>\n

A:active {color: red; font-style:bold}<\/p>\n

<\/STYLE><\/p>\n

<\/HEAD><\/p>\n

<BODY><\/p>\n

<A HREF = “http:\/\/www.pricom.dk”>Bes&oslash;g Privat Computer<\/A><\/p>\n

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

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

Eksempel 5: Brug af <SPAN>-kommandoen <\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><\/p>\n

<STYLE type = “text\/css”><\/p>\n

.green {color : green}<\/p>\n

.blue {color : blue}<\/p>\n

.red {color : red}<\/p>\n

<\/STYLE><\/p>\n

<\/HEAD><\/p>\n

<BODY><\/p>\n

<SPAN class = green>Flere <\/SPAN><\/p>\n

<SPAN class = blue>forskellige <\/SPAN><\/p>\n

<SPAN class = red>farver.<\/SPAN><\/p>\n

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

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

Eksempel 6: Lyd og video p\u00e5 en hjemmeside <\/strong><\/p>\n

<HTML><\/p>\n

<BODY><\/p>\n

<BGSOUND SRC=”intro.mid”><\/p>\n

<H1>Velkommen til min hjemmeside<\/H1><\/p>\n

<P><\/p>\n

<IMG DYNSRC=”intro.avi” SRC=”intro.gif” ALT=”Du kan desv&aelig;rre ikke se min flotte video :-(“><\/p>\n

<P><\/p>\n

Da siden blev &aring;bnet, blev <A HREF=”intro.mid”>denne<\/A> fil afspillet.<\/p>\n

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

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

TEKSTBOKS: Browserne og dHTML<\/strong><\/p>\n

Selvom mulighederne med Dynamisk HTML n\u00e6rmest synes ubegr\u00e6nsede, har medaljem en bagside. Det er nemlig ikke alt, der er underst\u00f8ttet i alle browsere. Hvis man har Netscape Navigator eller Microsoft Internet Explorer i en version under 3, kan man lige s\u00e5 godt glemme det hele. I version 3 har begge browsere en vis forst\u00e5else af stylesheets, og i version 4 er standarden fuldst\u00e6ndigt underst\u00f8ttet. Selvom det er den samme CSS-standard, der ligger i de to browsere, har de desv\u00e6rre ikke den samme opfattelse af den – derfor kan man ikke regne med, at det, der virker i den ene, ogs\u00e5 virker i den anden. Ydermere er der funktioner, der virkede i Internet Explorer 3, som ikke virker i version 4. Listen over detaljer, der synes ubetydelige – i hvert fald til man selv f\u00e5r brug for dem – er alenlang, og den eneste m\u00e5de at sikre, at ens side er bare nogenlunde pr\u00e6sentabel i begge browsere, er at afpr\u00f8ve siden under dem begge.<\/p>\n

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

I dette afsnit af vores store Internet-kursus gennemg\u00e5r Kristian Hansen de nye teknikker, der er gjort mulige med Dynamic HTML, og han viser ogs\u00e5, hvordan man kan forbedre sin hjemmeside med lyd og videoklip. I mods\u00e6tning til HTML er Dynamic HTML (dHTML) ikke en fastsat standard. Netscape og Microsoft har – selvf\u00f8lgeligt fristes man til […]<\/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-122","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\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\n\t\t