Hjem | Forklaringer
Style sheets (CSS)
Hvis du er til at skrive HTML "i hånden", fordi du mener, at dine filer bliver for store og ugennemskuelige, kan du måske bruge disse tips.
Der er et hav af programmer, som man kan bruge til at fremstille hjemmesider; men man kan faktisk nøjes med Notepad, som vi gør her.
Denne side, og de foregående, er lavet med hjælp fra style sheets. Det giver lidt flere typografiske muligheder, og man slipper for at skrive de lange <FONT> tags. I stedet skal man skrive CLASS="alm" eller lignende i bestående tags (kun tags, der afsluttes med en end-tag, container tags). Og man skal definere sine styles.
Der er to "nye" tags; <SPAN> </SPAN> og <DIV> </DIV>. De er specielt beregnet til at skrive CLASS parametre i.
<SPAN class="..."> </SPAN> kan bruges til at give teksten karakter (style), på samme måde som <B> </B> og lignende.
<DIV class="..."> </DIV> deler teksten op i blokke og har også flere muligheder. Se senere.
 
Styles defineres mellem<STYLE></STYLE> tags i <HEAD> sektionen. Kig i kildeteksten og find for eksempel
.alm {font-family: Verdana, Arial, sans-serif; font-size:10pt; color:#000000; padding: 0pt 0pt 5pt 0pt}
Læg mærke til punktummet foran 'alm'. HTML opfatter container tags som objekter, og 'alm' er så en egenskab, som kan tilskrives container tags.
Font-family sætter fonten til Verdana. Hvis den ikke findes på brugerens computer, vælges først Arial og dernæst sans-serif.
Font størrelsen bliver 10 punkt og font farven sort.
Padding indsætter tom plads inden for kanten om <DIV> </DIV> blokken i teksten. De 4 værdier for padding gælder for top, right, bottom og left.
Kig i kildeteksten og prøv det selv! Søg evt efter '<style>' og 'class'. Style definerer egenskaberne, og class anvender dem.
Lag (layers)
<DIV> tag'en har mange flere muligheder. Den kan også indeholde billeder, og du kan bestemme højde og bredde af den blok, den danner på skærmen. Det betyder nu ikke så meget, hvis blokken indeholder et billede eller en tabel, da den så udvider sig, så der er plads.
Du kan også bestemme blokkens beliggenhed, om den skal ligge foran eller bag en anden blok og, om den skal være synlig eller skjult. Div blokkene kan organiseres i lag.
Dette bliver først rigtig spændende, når vi ændrer beliggenheden med JavaScript. Så kan vi få blokke og billeder til at bevæge sig. Hvis billedet er en transparent GIF, ser det ud som om, der er en genstand, der bevæger sig.
En <DIV> tag defineres i <BODY> og kan fx. se således ud
 
<DIV ID="layer1" style="position: absolute; top:100px; left:100px; height: 200px; width: 300px; z-index: 1"; visibility: visible>
ID giver blokken et navn, så JavaScript kan adressere den (se senere).
position: absolute betyder, at top og left er givet udfra (0,0) i browservinduet, og top og left er så skærmkoordinaterne for blokkens øverste venstre hjørne.
height og width er blokkens højde og bredde i pixels.
z-index angiver, om blokken er foran eller bagved. z-index: 1 er bagest.
Visibility kan være 'visible' eller 'hidden'.
Nu kan du prøve at lave en blok, der vises på skærmen, hvor du ønsker.
Dynamisk HTML
Dynamisk HTML kan laves med blokke i lag og JavaScript. Der er ikke plads her til at forklare alt om JavaScript; men JavaScript er et scriptsprog (programmeringssprog), der bl. a. kan ændre værdierne af blokkenes egenskaber (layer1.top, layer1.left, osv.).
For at gøre det skriver man programstumper som functions, som anbringes i <HEAD> sektionen.
Disse functions kaldes enten i java scripts i <BODY> sektionen eller som reaktion på events (onClick, onMouseover, osv.).
For at fortælle browseren, at JavaScript ikke er HTML, skal JavaScript anbringes mellem tags
<SCRIPT LANGUAGE="JavaScript">...</SCRIPT>
Se kildeteksten for animationerne.
 
Nederst i kildeteksten for de tre animerede sider finder du JavaScriptet
<SCRIPT LANGUAGE="JavaScript">Flyt("Layer2")</SCRIPT>
Her kalder JavaScript (efter at hele siden er hentet) function'en Flyt(), som er defineret i <HEAD> sektionen. Det er denne function, som sørger for bevægelsen, idet den slutter af med at kalde sig selv efter en pause på 30 millisekunder. Det ser således ud:
setTimeout('Flyt("'+LagNavn+'")',30)
Læg mærke til brugen af de to forskellige slags anførselstegn, som er nødvendige for at danne strengen Flyt("Layer2"), når variablen LagNavn indeholder strengen Layer2.
Selve indholdet af function'en Flyt() går ud på at flytte laget med ID Layer2 et lille stykke ad gangen.
Behandling af lag
Når man kommer lidt ind i dynamisk HTML, opdager man, at de forskellige browserfirmaer ikke er enige om, hvordan tingene skal laves. Derfor er man nogle gange nødt til at checke, hvilken browser modtageren bruger, og lave forskelligt JavaScript til de to browsere.
I de nyeste browsere, som bruger HTML-5 og DOM, er Java Script'ene dog nogenlunde ens.
 
Function'en Flyt kaldes med en streng, som er ID for en div (et lag), defineret i <BODY>. Heraf laves 2 variable, LagStreng og LagObj. Blokkens y-koordinat findes og sættes ved
y = parseInt(lagObj.style.top); og
lagObj.style.top = y.toString() + "px";
idet topkoordinaten er en streng med enhed.
Blokken kan indeholde en tekst eller et billede, og ved at styre koordinaterne kan man kontrollere blokkens position.
Bevægelsen
På siden med golfbolden bevæger bolden sig i en parabelformet blød kurve. Her gør det ikke noget, hvis man har haft matematik på højt niveau i gymnasiet, for sådanne bevægelser er faktisk parameterfremstillinger med tiden som parameter.
I y-retningen bevæger bolden sig jævnt, og i x-retningen efter et andengrads polynomium. Dette giver en parabelkurve.
Samtidig bliver bolden større, idet dens højde og bredde er proportional med dens y-koordinat i forhold til startpunktet.
Den jævne bevægelse i y-retningen fås ved at man lægger det samme tal til y hver gang:
y = parseInt(lag.style.top);
dy = 2;
 
y = y + dy;
lag.style.top = y.toString() + "px";
x-koordinaten kan herefter beregnes af
x = -0.089*y*y+40*y-4150;
Det er lidt besværligt at finde koefficienterne; men hvis man kender koordinaterne til tre punkter på parablen, kan det jo gøres. Især med QuadReg på grafregneren.
Boldens bredde og højde er beregnet af
bold.width = (y-y1)/(y2-y1)*175;
bold.height = (y-y1)/(y2-y1)*175;
Når (x1,y1) og (x2,y2) er koordinater for startpunkt og slutpunkt.
Lyd
Lag kan behandles ens, men ikke alle browsere kan afspille mp3 filer.
I 'Pigs in space' er der kommet lyd på.
Lyden defineres f. eks. som
<audio id="audio1">
  <source src="oef.mp3" type="audio/mpeg">
  <source src="oef.wav" type="audio/wav">
</audio>
som placeres i <BODY>. Browseren vælger den filtype, som den kan afspille.
En function, som afspiller lyden kan være
<script language="JavaScript">
function Afspil(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.play();
}
</script>
 
Den placeres i <HEAD> og lyden afspilles ved kaldet
Afspil('audio1');
i en event (som onClick) eller i en function.
I function'en Flyt() kaldes function'en Afspil(), når y-koordinaten har fået en bestemt værdi. Her skal man naturligvis være sikker på, at scriptet ikke springer denne værdi over.
Lyden på siden er ikke så autentisk. Den er nærmest et snork :-)
Disse sider
Jeg har selv lavet alle filerne, og der er ikke copyright på nogen af siderne.
De er lavet i tiden fra år 2001 til 2014, så der er sikkert kommet nye muligheder til, og browserfirmaerne kan være blevet enige siden da.
Du kan anbringe styles i en separat .css fil, lige som Java Script functions kan lægges i en separat .js fil
 
I stedet for <DIV> tag'en kan du i tekster bruge <P> taggen og definere en style for p som følger:
p {font-family: Verdana, Arial, sans-serif; font-size:10pt; color:#000000; padding: 0pt, 0pt, 5pt, 0pt}
Denne style gælder nu for alle <P> tags, fordi der ikke er punktum foran p.}