Bilder, tabeller Kirsten Ribu 26.09 1
Repetisjon: div taggen Blokker (<div>) Et (X)HTML-dokument kan deles inn i blokker med<div> og hver blokk må avsluttes med </div>. Blokker benyttes i dokumenter der forskjellige deler (blokker) skal ha forskjellig struktur og utseende. Typisk eksempel er hvis noen deler av dokumentet skal være sentrert og andre ikke. Innenfor en blokk kan du bruke alle vanlige tagger som du ellers kunne ha brukt utenfor en blokk. 2
Web-siden http://www.cookwood.com/html/ Se eksemplene 3
Eksempel 4
5
6
Stilarket body {margin: 0 0 0 0; padding: 0 0 0 0} #toc {font:bold 12px "Trebuchet MS", "Helvetica", sans-serif; color:#cc00ff; background:#ffffcc; white-space:nowrap; text-align:right; width:100px; height:400px; position: absolute; margin-left:0px; padding:10px} #gaudi {position: absolute; left:130px;}.works {margin:20px} h1, h2 {font: 20px "Trebuchet MS", "Arial", sans-serif; color:#ff9933; letter-spacing:.4em; text-align:left; font-weight:bold} h1 {text-transform:uppercase} h2 {font-size: 14px; font-variant:small-caps} p {font: 12px/150% "Verdana", "Helvetica", sans-serif; color:#909}.emph {font-style: italic; font-weight:bold} a:link {font-weight:bold; color:#cc00ff; textdecoration:none} a:visited {font-weight:normal; color:#cc00ff; text-decoration:none} a:hover {font-weight:bold; color: #0000ff; text-decoration:underline} 7
Stiltyper for tekstorganisering De viktigste skrifttypene som går på tekstorganisering: div {text-align: justify; line-height: 150%; text-indent: 10pt} div h1 {text-align: center} Selektoren div definerer standarden for alle blokker (<div>) til å ha tekstorganisering med jevn venstreog høyre-marg, 1,5 linjeavstand og innrykk av 1. linje i avsnitt (<p>) med 10pt. Selektoren div h1 omdefinerer tekstjusteringen til å være sentrert for overskrifter (<h1>) innenfor blokker (<div>). 8
Selektorer som klasse eller ID Du kan gi HTML elementene et unikt navn, eller et klasse-navn. For å lage en klasse skriver du.klassenavn (punktum + klassenavn, uten mellomrom!) Eksempel:.nyheter 9
Velg elementer basert på klasser Eks:.nyheter{color:red;} virker på alle elementene i klassen nyheter h1.nyheter{color:red;} virker bare på h1 elementene i klassen nyheter I åpningstaggen skriver du class= nyheter, der navnet identifiserer klassen av elementer i klassen nyheter. <div class = nyheter >Nyheter </div> 10
Skriv HTML koden for denne siden http://www.cookwood.com/html5ed/ex amples/blocks/blueflax.html 11
Bildetyper I web-sammenheng er det snakk om tre forskjellige bildetyper, og det er GIF, JPG og PNG. De to første er de mest vanlige siden det nye formatet PNG ikke støttes av alle web-lesere ennå. 12
GIF GIF-bilder kan være transparente GIF-bilder kan simulere en animasjon ved en sekvens av enkeltbilder. (animerte gif) GIF-bilder pakkes (for å redusere filstørrelsen) uten at det går på bekostning detaljer i bildet. 13
JPG JPG-formatet er det beste for skarpe fotografier der det inngår mange fargenyanser. JPG-bilder pakkes i filer der detaljer går tapt, men uten at dette blir merkbart for øyet, spesielt hvis det vises på en dataskjerm. PNG er det nye formatet som har tatt det beste GIF og JPG, men det er fortsatt bare støttet av de seneste versjoner web-lesere. 14
Bildetaggen Et bilde legges inn i et dokument med taggen: <img src="bildefil.gif" alt="beskrivende tekst" width="100" height="80" /> Her er parametrene src og alt obligatoriske i standarden HTML 4.0 Strict. Bildestørrelsen (width og height) angis i piksler og kan med fordel angis slik at web-leseren vet hvor mye plass som skal avsettes til hvert bilde. Dermed kan web-leseren raskt vise den tekstlige informasjonen uten å vente på at alle er lastet ned. I nyere versjoner av web-lesere er ikke dette så kritisk siden de lett justerer teksten etter hvert som bildene kommer. 15
Tekst flyter rundt bildet Hvis tekst skal flyte rundt et innrammet bilde med litt avstand til teksten rundt, så kan det oppnås ved bruk av en stilklasse som her: <img src="bildefil.gif" alt="beskrivende tekst" class="bilder" /> 16
Stilen <styletype="text/css">.bilder {margin: 20px; border-width: thick; bordercolor: red; border-style: groove; float: left} --> </style> Det som får teksten til å flyte rundt bildet er stildefinisjonen float: left. Luft mellom bildet og teksten oppnås med margin: 20px. De tre andre stildefinisjonene definerer rammens utseende. 17
Tabeller Tabeller er en (X)HTML-struktur som opprinnelig var tenkt å presentere data på en oversiktlig måte. Idag er tabeller like mye brukt for å plassere (X)HTML-elementer som tekst og bilder i et ønsket forhold til hverandre på en web-side. Men med div-taggen har en nye og mer fleksible løsninger for å oppnå dette. En tabell starter med <table> og må avsluttes med </table>. 18
forts En tabell defineres rad for rad der en ny rad åpner med <tr> og slutter med </tr>. I hver rad defineres rutene fra venstre mot høyre, og hver rute åpner med <td> og slutter med </td>. PÅ neste slide ser du en enkel tabell med 3 rader og 3 kolonner. 19
En tabell 20
Koden Koden for denne tabellen kan du se her. <table border="1"> <tr> <td>rad 1, rute 1</td> <td>rad 1, rute 2</td> <td>rad 1, rute 3</td> </tr> <tr> <td>rad 2, rute 1</td> <td>rad 2, rute 2</td> <td>rad 2, rute 3</td> </tr> <tr> <td>rad 3, rute 1</td> <td>rad 3, rute 2</td> <td>rad 3, rute 3</td> </tr> </table> 21
Sammenslåing av tabellruter Du kan slå sammen ruter i en tabell radvis og/eller kolonnevis. Hvis du vil slå sammen to ruter i en rad, kan det gjøres ved at en rute defineres med <td colspan="2">. Husk at du da må slette en annen rute i raden slik at raden ikke får for mange ruter. 22
Hvis du vil slå sammen to ruter i en kolonne, kan det gjøres ved at en rute defineres med <td rowspan="2">. Husk at du da må slette en annen rute i neste rad slik at raden ikke får for mange ruter. Ved sammenslåing av vilkårlig antall ruter radvis og kolonnevis er det ikke grenser for hvor komplisert rutemønster du kan lage. NB! Sammenslåtte ruter kan ikke få noen annen form enn rektangler. Ved sammenslåing av ruter kan tabellen fra forrige side bli seende slik ut: 23
eksempel 24
Kodeeksempel 25
Tabellforklaring (overskrift) <caption> vil starte en tabellforklaring. Den plasseres rett etter <table>, og tabellforklaringen avsluttes med </caption>. Normalt vil en tabellforklaring bli plassert midt over tabellen 26
Overskrift 27
Koden <table border="1"> <caption>overskrift</caption> <tr> <td colspan="2">sammenslått</td> <td rowspan="2">sammenslått</td> </tr> <tr> <td rowspan="2">sammenslått</td> <td>vanlig rute</td> </tr> <tr> <td colspan="2">sammenslått</td> </tr> </table> 28
Bakgrunn <table border="1"> definerer en tabell med ramme. Parameteren border bestemmer hvor tykk rammen skal være. Høy verdi gir tykk ramme, og verdien 0 gir ingen ramme. Med stiler kan du definere bakgrunnsfarger (eller bakgrunnsbilder) til tabellen som helhet, til hele rader eller til enkeltruter. 29
Bakgrunnsfarge I eksemplet er det vist en tabell uten rammer med hvit tabellbakgrunn, men der første rad og kolonne har grå bakgrunn: 30
Koden 31
Oppgave Skriv kode for en tabell med tre rader og tre kolonner Legg til en ramme rundt velg tykkelse Lag en overskrift 32
Luft innenfor og mellom ruter Dette kontrolleres ved to nye parametre i table-taggen. Parameteren cellspacing bestemmer avstanden mellom rutene, og parameteren cellpadding bestemmer avstanden fra rutekanten til innholdet. 33
forts I eksemplet ser du den samme tabellen, men nå er avstanden mellom rutene 10 piksler, og margene i rutene er 15 piksler. Dette er gjort ved å endre table-taggen til <table border="0" cellspacing="10" cellpadding="15"> 34
35
Tabellbredde og rutebredder Tabell- og rutebredde angis i piksler eller %. Ved angivelse i % er det for tabellbredden i forhold til skjermbredden og for rutene i forhold til tabellbredden. Bredden angis med en width-parameter i tabletaggen eller td-taggen. Nedenfor ser du tekst i to spalter (en tabell). Tabellbredden er definert til 80% av skjermbredden ved <table border="0" cellspacing="10" cellpadding="15" width="80%">. Rutebreddene er definert til 40% og 60%, og venstre spalte er definer ved <td style="width: 40%">. 36
37
Ukeoppgaver Del siden opp i blokker. Skriv kode for å legg et bilde inn i en blokk. Definer størrelse på bildet (høyde og bredde) Lag en tabell med 3 rader og 3 kolonner. Lag en ramme rundt tabellen Legg bilder inn i tabellen (finn bilder på nettet dersom du ikke har noen) Legg bilde på siden og la tekst flyte rundt Husk alt = beskrivelse av bildet 38
Neste gang Javascript Litt mer om webdesign og layout 39