IT-1 og IT-2

Siden 2007 har Ola Lie undervist IT-1 og IT-2 på Askim videregående skole hvor disse sidene har blitt brukt til ulike undervisnigsformål.

Hva er riktig om stiler?

Hensikten med stilark er å skille formateringen fra innholdet på en webside. En av fordelene vi oppnår, er at websidene blir lettere å vedlikeholde når det holder å gjøre endringer kun på ett sted. Jeg har skrevet en webside om stiler i en annen sammenheng, og her vil bare presisere punkter hvor jeg synes læreboka er upresis.

Det er forskjell på stil og element

Mange synes kanskje det er greit å tenke på Overskrift 1 som en stil slik som i Word, men på websider foretrekker jeg å tenke på Overskriftt 1 som et HTML element som omsluttes av <h1>...</h1> taggene. Når du skriver noen avsnitt i Dreamweaver, omsluttes avsnittene av <p>...</p> taggene. Står pekeren i avsnittet, eller hvis du har markert et ord i avsnittet, og du velger Overskrift 1 fra stil listen på verktøylinja, endres <p>...</p> taggene til <h1>...</h1> tagger. Vi har ikke endret formatet (stilen) til verken avsnitt eller overskrift elementet, men vi har gjort om avsnitt elementet (p) til et overskrift element (h1). Stilen er formatet til elementet. Dersom det ikke angis noen stil for h1 elementet, brukes nettleserens innstillinger. Dernest gjelder:

eksterne stilark overstyrer nettleserens innstillinger
interne stilark overstyrer eksterne stilark
intern stilredigering (Inline Styles) overstyrer interne stilark

Dessuten arver elementer stilen til sine foreldre elementer som omgir dem. Angir vi eksempelvis blå skriftfarge i BODY elementet, vil det også gjelde for H1 (Overskrift 1) og P (Paragraph/Avsnitt) elementene. Men vi kan overstyre på det lavere nivået om vi ønsker det. Før muspekeren over bildet ovenfor og klikk for å se websiden.

Alle elementer er ikke blokk elementer

Noen elementer vises ikke i det hele tatt, slik som <meta> og <style> i <head> delen av websiden. Når det står i læreboka at "Det er imidlertid viktig å forstå at når du bruker stiler, så er det ikke bare et ord som formateres, men hele avsnittet fram till injeskift.", er dette riktig bare for "block" elementer. Dessuten vil blokk elementer begynne på en ny linje, strekke seg over hele den tilgjengelige bredden og avslutte med linjeskift:
<h4 style="background:blue; color:white">H4 er et "block" element</h4> vises som

H4 er et "block" element

Andre elementer som for eksempel <span> eller <strong> for å utheve skriften, er "inline" elementer som bare tar opp den plassen de trenger og ikke setter inn noen linjeskift. En tag med <strong style="background:yellow">noen uthevede ord</strong> vil se ut som neste setning: En tag med noen uthevede ord vil se ut som neste setning.

Dersom vi ønsker å bruke samme formateringen på flere ord på ulike steder i dokument, kan vi navngi en klasse som i dette interne stilarket:

Etter at koden er lagt inn i <head> elementet, vil span.minStil vises i Style boksen i Properties panelet i Dreamweaver, Vi kan da merke de ordene vi ønsker formattert med denne stilen og deretter velge stilen fra listen. Hvis vi for eksempel ønsker et annet format på engeske ord: Red, men ikke rød. Silver, men ikke sølv. Koden som settes inn ser slik ut: <span class="minStil">Red</span>

Intern stilredigering (Inline Styles)

Læreboka er upresis om intern stilredigering (Inline Styles) når det står "Disse endringene vil
også kun gjelde for denne websiden". Intern stilredigering gjelder kun for det gjeldende elementet og ikke hele websiden, eksempelvis vil

<h4 style="color:red">Rød overskrift 4</h4>
<h4 style="color:green">Grønn overskrift 4</h4>
<h4>Standard overskrift 4</h4>

vises som

Rød overskrift 4

Grønn overskrift 4

Standard overskrift 4

Så selv om vi har satt at en intern stil for h4 til grønn, så påvirker ikke det resten av websiden.