I dette afsnit af vores store Internet-kursus gennemgår Kristian Hansen de nye teknikker, der er gjort mulige med Dynamic HTML, og han viser også, hvordan man kan forbedre sin hjemmeside med lyd og videoklip.
I modsætning til HTML er Dynamic HTML (dHTML) ikke en fastsat standard. Netscape og Microsoft har – selvfølgeligt fristes man til at sige – hver valgt deres måde at implementere dynamik i HTML-sproget på. Denne artikel vil naturligvis beskrive begge implementeringer. dHTML omfatter meget mere end det oprindelige HTML, og det er i højere grad programmering. For eksempel gør mange kommander brug af scriptsprog som JavaScript eller VBScript. Disse sprog vil blive gennemgået senere i kurset, og i den forbindelse vil de pågældende dHTML-kommandoer også blive nærmere beskrevet.
Stylesheets
Stylesheets er hjørnestenen i dHTML, og selv uden brug af scripting kan man opnå store fordele ved at bruge dem. 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ødtekst og lignende skal se ud. Når browseren ser for eksempel en <H1>-kommando, ved den, at den skal vise den med den skrifttype, der er angivet i det pågældende stylesheet. På den måde slipper forfatteren for at bruge <FONT>-kommandoen, hver gang der skal skrives en overskrift. Det er også muligt at bruge stylesheets til at angive den absolutte placering på alle elementer i et HTML-dokument – det var ellers et trick, der tidligere kun kunne opnås ved brug af tabeller.
Placering af stylesheets
Et stylesheet består af en række informationer, der definerer de forskellige elementer. Stylesheets kan enten skrives direkte i HTML-filen eller lægges i en ekstern fil. Det sidste er praktisk, hvis man har flere sider, der skal have det samme udseende.
Hvis man vil skrive definitionen i HTML-dokumentet gøres det med kommandoen <STYLE type = “text/css”> Text/css angiver hvilken type stylesheet, der er tale om. Udover CSS kan også text/javascript bruges, men kun i Netscape Navigator. Da Navigator også understøtter CSS, vil JavaScript stylesheets ikke blive beskrevet yderligere her.
Eksempel 1 viser, hvordan et HTML-dokument med stylesheet-definition kan se ud. Hvis et stylesheet skal hentes i en ekstern fil, gøres det med kommandoen <LINK rel = “stylesheet” href = “filnavn.css”>, der placeres i <HEAD>-sektionen af HTML-dokumentet.
Skrifttyper
Som altid er der et problem med skrifttyper. Man kan ikke være sikker på, at læseren har alle forfatterens skrifttyper installeret. For at undgå at siden kommer til at virke helt håbløs, hvis den besøgende 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.
Klasser
Hvad så, hvis alle overskrifter ikke skal være ens. En simpel løsning er at bruge inline stylesheets. Inline stylesheets gør det muligt kun at anvende en bestemt typografi på et enkelt element. I eksempel 2 bruges forskellige typografier på de to <H1>-elementer. Det er imidlertid ret omfattende at skulle angive typografien hver gang, man laver en overskrift – så kunne man jo lige så godt bruge <FONT>-kommandoen.
I stedet kan man lave forskellige klasser. Ved at angive, hvilken klasse et bestemt element tilhører, kan man bestemme, hvilken typografi, der skal anvendes på den. En ny klasse oprettes i style-definitionen. Foran dens navn sættes et punktum, hvorefter selve typografien angives som ved alle andre elementer.
Eksempel 3 viser, hvordan man kan bruge klasser til at opnå den samme virkning som i eksempel 2.
I familie med klasser er også ID. ID bruges sammen med script-funktioner, og defineres på samme måde som klasser – blot indledes de med # i stedet for punktum. Hvis man ved, at man ikke vil bruge script-funktioner, bør man anvende klasser.
Pseudoklasser
Pseudoklasser er klasser, der ikke eksisterer i HTML-sproget, men som alligevel kendes af browserne. Det gælder 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.
Span og Div
Hvis man gerne vil ændre udseendet af en del af teksten, kan man bruge kommandoen <SPAN>. Som på alle andre HTML-elementer er det muligt at angive en klasse på <SPAN>. Som det ses i eksempel 5, er det med den kombination nemt for eksempel at ændre farve på forskellige dele af teksten.
Er det et helt afsnit eller mere, der skal markeres, bør man bruges <DIV> og </DIV> i stedet for <SPAN>.
Placering af elementer
Ved hjælp af stylesheets er det også muligt at bestemme, hvor de forskellige elementer skal placeres på siden. Det foregår på den måde, at når en browser møder et element med CSS-placering, sætter den automatisk et usynlig rektangel omkring elementet. Dette rektangel kaldes en bounding box, og dets koordinater kan enten sættes i forhold øverste venstre hjørne af skærmen – absolut placering – eller i forhold til andre elementer – relativ placering. Derudover er det muligt at lade elementer overlappe hinanden, og at gøre dem usynlige.
Selvom man bruger absolut positionering, vil man næppe have alle ens overskrifter til at blive vist på 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ørst angives om elementets placering er relativ eller absolut. Parametrene top og left angiver placeringen, mens width og height angiver størrelsen på rektanglet.
Flere kommandoer
Der findes mange flere kommandoer i CSS, end der er plads til at gennemgå her. Der findes imidlertid en komplet liste over CSS-kommandoer på denne måneds forside-cdrom.
Andre former for dynamik
CSS er imidlertid ikke den eneste måde at lave dynamiske HTML-sider på. JavaScript og VBScript, som vil blive gennemgået senere i kurset, er en anden meget populær måde, men kræver, at man lærer en vis grad af programmering. For de, der ikke har tid eller lyst til at sætte sig ind i mulighederne med script-sprogene, er der imidlertid en anden udvej. Det er at gøre 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æves en relativ ny browser, er ulempen ved plug-ins, at brugeren skal downloade og installere den rette plug-in, før han kan se siden.
Macromedia Shockwave
Den uden tvivl mest populære plug-in er Macromedia Shockwave. Ved at benytte Shockwave kan man gøre sin hjemmeside til én stor multimedieoplevelse, hvor alt kan bruges som links, og lyd og billede smelter sammen, som på en multimediecd-rom. Grunden til dette er logisk: Shockwave bliver lavet i programmet Macromedia Designer, der også bruges til de professionelles multimediearbejde. Mulighederne med Shockwave er enorme – den største begrænsning er, at man skal ud at investere i programmet, som er temmelig pebret. Et andet problem er, at de præsentationer, der kan laves i Macromedia Designer, oftest er fyldt med grafik, hvilket gør dem ret tunge at hente over et modem.
Andre plug-ins
Synes man det er lidt groft at skulle investere i et dyrt multimedie-værktøj bare for at strikke sin hjemmeside sammen, kan man også klare sig med mindre. Selvom Macromedia leverer det mest udbredte produkt, betyder det jo ikke, at de er de eneste på markedet. Bare ved at kigge på Netscapes side over plug-ins til deres browsere, kan man se, at der er en mængde andre multimedie-programmer på markedet.
Lyd
Det er meget godt, at man kan få sin hjemmeside sat op præcis, som man vil have det, og det er også flot med noget passende grafik, men af og til er det nødvendigt med noget lyd. Lyd kan afspilles på flere forskellige måder. Den ene går ud på at lave et link til en lydfil. Formatet er ikke så vigtigt, men man skal være sikker på, at brugeren kan afspille den på sit system – det kan enten være, fordi browseren har afspilningsfunktioner indbygget, eller fordi brugeren har installeret en plug-in. Vælger man at bruge enten wave-filer eller midi-filer, er man rimelig sikker på, at den kan afspilles.
Man kan også vælge automatisk at afspille et stykke musik, når siden bliver indlæst. Det gøres med kommandoen <BGSOUND SRC = filnavn>, hvor filnavn er adressen på den fil, der skal afspilles. Kommandoen indsættes først i BODY-sektionen.
Hver metode har naturligvis sine fordele, men man skal nok være påpasselig med at bruge baggrundslyden alt for meget. Her har brugeren nemlig ingen mulighed for at undgå at høre lyden – det kan være vedkommende hører noget mere interessant over sit lydkort, og det kan også være, at han slet intet lydkort har – sidstnævnte er ofte tilfældet for folk, der surfer fra deres arbejdsplads eller fra uddannelsesinstitutioner. I stedet for at blive imponeret over ens side på grund af den smarte lyd, bliver de trætte af at skulle klikke ok til beskeden om, at der ikke kunne findes et program til at afspille lydfilen med.
Video
Har man sagt lyd, har man vel også sagt video. Ved hjælp af en udvidelse af IMG-kommandoen er det muligt at indsætte et videoklip. Udvidelsen hedder DYNSRC og angiver adressen på det videoklip, der skal afspilles. Ved også at sætte 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.
Som med lydfiler gælder det, at det er brugeren selv, der må sørge for at have en plug-in, der understøtter 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.
Eksempel 6 viser, hvordan lyd og video kan indbygges i en hjemmeside.
En appetitvækker
Selvom den del af Dynamic HTML, der er blevet gennemgået i denne artikel, åbner for mange ting, der ikke tidligere har været muligt i HTML, er det kun toppen af isbjerget. Ved hjælp af scripting-sprog som Javascript og VBScript er det muligt at lave siden fuldstændig interaktiv. Billeder kan skiftes ud, når musemarkøren bevæges hen over dem, siderne kan påvirkes 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ægger ud med at gennemgå VBScript, der er implementeret i Internet Explorer 3 og 4. Når det er gennemgået kommer turen til JavaScript – også kendt som ECMA-script – der understøttes af Netscape 3 og 4, og – til en vis grad – Internet Explorer 3. Internet Explorer har fuld understøttes af JavaScript. Der er derfor mange gode grunde til også at læse Privat Computer i de kommende måneder
Eksempel 1: Et simpel eksempel med stylesheet
<HTML>
<HEAD>
<STYLE type = “text/css”>
h1 {font-family: Arial; font-style: bold; color: red; font-size 16pt}
</STYLE>
</HEAD>
<BODY>
<H1>Overskrift</H1>
</BODY>
</HTML>
Eksempel 2: Brug af inline stylesheets
<HTML>
<BODY>
<H1 STYLE = “font-family: Arial; font-style: bold; color: red; font-size 16pt”>
Overskrift</H1>
<BR>
blah blah
</BR>
<H1>Overskrift </H1>
</BODY>
</HTML>
Eksempel 3: Brug af klasser
<HTML>
<HEAD>
<STYLE type = “text/css”>
.type1 {font-family: Arial; font-style: bold; color: red; font-size 16pt}
.type2 {font-family: sans-serif; font-style: italic}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS = type1>
Overskrift</H1>
<BR>
blah blah
</BR>
<H1 CLASS = type2>Overskrift</H1>
</BODY>
</HTML>
Eksempel 4: Definition af henvisninger
<HTML>
<HEAD>
<STYLE type = “text/css”>
A:link {color: red}
A:visited {color: red; font-style:italic}
A:active {color: red; font-style:bold}
</STYLE>
</HEAD>
<BODY>
<A HREF = “http://www.pricom.dk”>Besøg Privat Computer</A>
</BODY>
</HTML>
Eksempel 5: Brug af <SPAN>-kommandoen
<HTML>
<HEAD>
<STYLE type = “text/css”>
.green {color : green}
.blue {color : blue}
.red {color : red}
</STYLE>
</HEAD>
<BODY>
<SPAN class = green>Flere </SPAN>
<SPAN class = blue>forskellige </SPAN>
<SPAN class = red>farver.</SPAN>
</BODY>
</HTML>
Eksempel 6: Lyd og video på en hjemmeside
<HTML>
<BODY>
<BGSOUND SRC=”intro.mid”>
<H1>Velkommen til min hjemmeside</H1>
<P>
<IMG DYNSRC=”intro.avi” SRC=”intro.gif” ALT=”Du kan desværre ikke se min flotte video :-(“>
<P>
Da siden blev åbnet, blev <A HREF=”intro.mid”>denne</A> fil afspillet.
</BODY>
</HTML>
TEKSTBOKS: Browserne og dHTML
Selvom mulighederne med Dynamisk HTML nærmest synes ubegrænsede, har medaljem en bagside. Det er nemlig ikke alt, der er understøttet i alle browsere. Hvis man har Netscape Navigator eller Microsoft Internet Explorer i en version under 3, kan man lige så godt glemme det hele. I version 3 har begge browsere en vis forståelse af stylesheets, og i version 4 er standarden fuldstændigt understøttet. Selvom det er den samme CSS-standard, der ligger i de to browsere, har de desværre ikke den samme opfattelse af den – derfor kan man ikke regne med, at det, der virker i den ene, også 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år brug for dem – er alenlang, og den eneste måde at sikre, at ens side er bare nogenlunde præsentabel i begge browsere, er at afprøve siden under dem begge.