Monthly Archives: February 2005

You are browsing the site archives by month.

Innføring i CSS

  • Litt om hva CSS er.
  • Hvorfor en skal bruke CSS
  • Hvordan CSS er bygget opp
  • Hvordan det fungerer
  • Kjekke steder å finne mer om CSS

Hva er CSS?

  • CSS står for Cascading Style Sheets (Stilark)
  • CSS ble introdusert i HTML4 for å løse et problem
  • Stilark definerer hvordan HTML-elementer skal vises
  • Stilark kan defineres internt og eksternt
  • Eksterne stilark kan spare deg mye arbeid
  • Eksterne stilark lagres i CSS filer
  • Flere stilark kan slås sammen til ett (cascading)

Hvorfor CSS?

Hvordan CSS er bygget opp

CSS består av tre elementer: velger, egenskap og verdi:

 velger { egenskap:verdi; }

Velgeren er vanligvis navnet på HTML-taggen du ønsker å redefinere utseendet på, f.ex img, egenskap er den egenskapen du ønsker å redefinere, f.ex border, og verdi er den verdien du ønsker å sette egenskapen til, f.ex 10px.

Egenskapen og verdien er separert med kolon (:), og omringet av krøllparanteser ({,}).

Du kan sette flere egenskaper inni en krøllparantes, da skilles disse med semikolon (;) . En grei regel er at en alltid avslutter en verdi med semikolon.
eksempel

Eksempel

 p {
    font-family:sans-serif;
    font-size:14px;
}

 img.right{
    border:0px;
    float:right;
}

Gruppering

Hvis du skulle ønske å stille samme egenskap(er) for flere elementer, kan du gruppere velgerene, da separerer du velgerene med komma (,).

Her settes alle overskrifter (h1-h7) til å ha grønn farge:

h1, h2, h3, h4, h5, h6, h7 { color:green; }

Class

I tillegg til å bruke tagnavnet som velger, kan en benytte HTML-elementenes class atributt.

en class-velger kjennetegnes med et punktum foran navnet (f.ex .special)

<p>ulv<p>
<p class='special'>sau<p>

i HTML, kombinert med

.special { color:green; }

vil gjøre sau grønn:

ulv

sau

En kan kombinere et tagnavn med en klasse for å avgrense, p.special vil bare matche paragrafer som har class=’special’, mens eksempelet over vil matche alle typer tagger som har class=’special’
eksempel

ID

På samme måte som med class, kan en bruke HTML-taggenes id attributt som en velger.

En id-velger kjennetegnes med et hash-tegn (#) foran navnet (f.ex #special).

<p>ulv<p>
<p id='special'>sau<p>

i HTML, kombinert med

#special { color:green; }

vil gjøre sau grønn:

ulv

sau

Å bruke id som velger fungerer på nøyaktig samme måte som med class, men vær obs på at ID’er i HTML-skal være unike, en kan bare ha ett element som har id=’special’. Det gjør typisk at det er ideellt å bruke ID når en bruker absolutt eller fiksert posisjonering.

Hvordan en setter inn et stilark

Såh, du har et HTML-dokument, og du vil at det skal bruke et stilark, dette kan gjøres på to måter.
En legger stilarket inn i HTML-koden ved å putte det i <head>-blokken på dokumentet, enten internt i et <style>-element, eller eksternt med en <link rel='stylesheet' type='text/css' href='mittstilark.css'>

Sistnevnte gir best utbytte, men førstnevnte kan ofte være raskere i farten.

Eksempel på innsetting med <style>

<html>
    <head>
        <title>demoside
        <style>
            p.special{color:green}
            img{
                border:1px dashed red;
            }
        </style>
    </head>
....

Eksempel på innsetting med <link>

Her går vi ut ifra at vi har lagret stilarket vårt som mittstilark.css

<html>
    <head>
        <link rel='stylesheet' type='text/css' href='mittstilark.css'>
        <title>demoside<&/title>
    </head>
.....

Cascading

At CSS er cascading betyr at en kan legge flere stilark oppå hverandre.

Stil angitt med style="" attributtet har høyere presidens enn stil angitt i stilarket, slik at om du i stilarket skriver

strong.super{
      color:red;
}

men i HTML-koden skrive

<strong class='super' style='color=green'>Super-strong</strong>

vil den se slik ut:

Super-strong

HUIN105

Her er litt forelesningsnotater o.l. fra mine øvingstimer i HUIN105

meta http-equiv

Det finnes mange ting i HTML som er tillatt, men som likevel er stygge ting, en av dem er <meta http-equiv="......> taggene. Disse er laget for at du som HTML-koder skal kunne sette instillinger som normalt settes i konfigurasjonen i webserveren, såkallte headere.

Bare headere som ikke i utgangspunktet er satt av webserveren kan settes i meta-taggene, hvis serveren sender Content-type:text/html; UTF-8, og du setter Content-type:text/html; ISO-8859-1 i HTML-koden, vil nettleseren stole på webserveren, og overse din meta-tag.

Alle webservere sender Content-type som header, og det blir derfor fåfengt å prøve å bruke meta-tagger for å sette denne. Særlig siden nettleseren i utgangspunktet trenger en riktig Content-type for å få lest meta-taggen.
Read More →

Gruppeundervisning uke 5

Litt problemløsning o.l fra gruppen i dag

Read More →

Wireless on torgallmenningen

Today I sat down on a bench on Torgallmenningen in Bergen. Booted up my laptop and ran iwlist.

Output:

          Cell 01 - Address: 00:80:C8:07:94:40
                    ESSID:"Valken"
                    Protocol:IEEE 802.11b
                    Mode:Master
                    Channel:6
                    Encryption key:on
                    Bit Rate:22Mb/s
                    Extra: Rates (Mb/s): 1 2 5.5 11 22
                    Signal level=-81 dBm
                    Extra: Last beacon: 10ms ago
          Cell 02 - Address: 00:0D:54:99:7A:B8
                    ESSID:"Olav"
                    Protocol:IEEE 802.11bg
                    Mode:Master
                    Channel:11
                    Encryption key:off
                    Bit Rate:54Mb/s
                    Extra: Rates (Mb/s): 1 2 5.5 6 9 11 12 18 24 36 48 54
                    Signal level=-71 dBm
                    Extra: Last beacon: 6ms ago
          Cell 03 - Address: 00:04:E2:BC:71:DD
                    ESSID:"partner"
                    Protocol:IEEE 802.11bg
                    Mode:Master
                    Channel:11
                    Encryption key:off
                    Bit Rate:54Mb/s
                    Extra: Rates (Mb/s): 1 2 5.5 6 9 11 12 18 24 36 48 54
                    Signal level=-71 dBm
                    Extra: Last beacon: 0ms ago

three wireless networks, of which two was unencrypted.

I tested “Olav”, using DHCP, and there we go.. I’m online. Thanks Olav

So, now I’m sitting on Torgallmenningen, writing this :)

It has started raining, so I’ll better go inside

closer “galleriet” i found 9 wireless networks, of which 3 was unencrypted

Innføring i HTML

Dette skal være en kjapp, men forhåpentligvis ikke altfor kjapp innføring i HTML.

Tagger

HTML er bygget opp av tagger, som identifiserer forskjellige områder i HTML-dokumentet. En tagg begynner med < og slutter med >

<h3>Tagger</h3>

identifiserer overskriften over.

Alle tagger må ha en tilsvarende avslutningstagg, som er lik start-taggen, men har en “/” foran nøkkelordet: </h3>

HTML (&XML)-taggers oppbyggning

HTML og XML-tagger består av

  • nøkkelordet
  • attributter
  • innholdet
    og en
  • avslutningstagg

nøkkelord

nøkkelordet beskriver hva elementet er

atributter

atributt(ene) beskriver elementets egenskaper. De fleste tagger trenger ingen atributter i utgangspunktet, men hvis du vil endre deres oppførsel må du sette atributter for det
Eksempel på tagg med atributt:

<img src="http://elzapp.com/resources/graphics/RedPanda.jpeg"
alt="Den røde pandaen, også kalt firefox">

her er “src” og “alt” atributter. src (source) refererer bildet som skal vises, alt refererer teksten som skal vises dersom nettleseren ikke kan vise bildet.

Innhold og avslutningstagger

De aller fleste tagger har innhold, vanligvis tekst som skal vises på siden, dette plasseres mellom start-taggen og slutt-taggen.

Slutt-tagger er lik start-taggen men med en “/” foran nøkkelordet.
Tagger med innhold må avsluttes, ellers vil hele resten av dokumentet regnes som et underelement av taggen.

Ingen regel uten unntak

Ikke alle tagger skal avsluttes.
Taggene

  • <br>
  • <img>
  • <hr>

er såkallte milestones, og skal ikke avsluttes.

Milestones

Tagger uten innhold skal ikke avsluttes i HTML 4.01, men må avsluttes i XHTML.
I XHTML avsluttes tagger uten innhold ved å putte en skråstrek før > i taggen, eksempel: <br/>

Oppbyggningen av et HTML-dokument

Et HTML-dokument må ha følgende elementer:

  • head
    Her lagres meta-informasjon om siden, som tittel, referanser til stilark (CSS), dokumenttyper osv.
  • body
    Det er her selve siden din lages

Så. La oss se på et enkelt HTML-dokument.

Et enkelt HTML-dokument

01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
02    "http://www.w3.org/TR/html4/strict.dtd">
03 <html>
04     <head>
05         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
06         <title>Hei verden</title>
07     </head>
08     <body>
09         <h1>Hei verden</h1>
10         <p>Dette er et enkelt HTML-dokument</p>
11     </body>
12 </html>

Linje 1 og 2 inneholder en doctype-deklarasjon, denne forteller nettleseren hvilken versjon av HTML/XHTML dokumentet er i, slik at den får tolket den riktig. Liste over tilgjengelige doctyper finner dere her: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Linje 5 forteller nettleseren (og validatoren) hvilken tekstencoding siden er skrevet i. ISO-8859-1 betyr vesteuropeisk ISO-tegnsett, og er det vanligste tegnsettet på windows og linuxmaskiner i vesteuropa.

Vanlige tagger

  • <p> – paragraph. Avsnitt
  • <h1> – header one. Overskrift. Det finnes 7 nivåer av overskrifter, fra <h1> til <h7>
  • <div> – divider. Avgrenser et område, brukes ofte med stylesheets for å gi et område i teksten en spesiell egenskap. <div> er et blokk-element, det vil si at du vil få et linjeskift før og etter en <div>
  • <span> – span. Avgrenser et område, brukes ofte med stylesheets for å gi et område i teksten en spesiell egenskap. <div> er et inline-element, den vil ikke bryte teksten
  • <a> – anchor. Definerer en lenke eller en referanse. <a href=”http://elzapp.com”>elzapp</a> lager en lenke til elzapp.com
  • <img> – image. Setter inn et bilde. <img>-taggen ha atributtene src (source) og alt (alternative text)
  • <br> – break. Tvunget linjeskift

Tabeller

Tabeller var mye brukt i webdesign før. Ikke bruk tabeller til webdesign, tabeller er til å vise tabelldata, bruk stilark (CSS) til designet. Dette er viktig for tilgjengeligheten av websiden (blinde, svaksynte etc. som bruker tekstlesere (lynx)), og gjør nettsiden raskere å laste.

La oss se på en tabell

Eksempel på tabell

01  <table>
02          <tr>
03                  <th></th>
04                  <th>Torsdag</th>
05          </tr>
06          <tr>
07                  <th>08-10</th>
08                  <td> </td>
09          </tr>
10          <tr>
11                  <th>10-12</th>
12                  <td>Seminar, HUIN105</td>
13          </tr>
14          <tr>
15                  <th>12-14</th>
16                  <td>Grupper, HUIN105</td>
17          </tr>
18  </table>

Eksempel på tabell

Koden over vil se slik ut i nettleseren:

Torsdag
08-10  
10-12 Seminar, HUIN105
12-14 Grupper, HUIN105

Tagger til tabeller

  • <table> – table. Rammen rundt hele tabellen
  • <tr> – table row. Rad i tabellen. ligge inni en <table>
  • <th> – table header. Brukes til kolonneoverskrifter eller radoverskrifter ex: <th>Torsdag</th>. ligge inni en <tr>
  • <td> – table data. Celler i tabellen. ex: <td>Seminar, HUIN105</td>. ligge inni en <tr>

Denne siden er et operashow

Denne siden er et operashow, det betyr at dersom du bruker Opera, kan du trykke F11, og få denne siden som en presentasjon (naviger mellom slides med PgUp og PgDn)
operashow