1.2 Nettsider med tekstelementer

A A

Bokstaven A med og uten seriffer.

Websikre skrifttyper:

Arial Courier New Georgia Times New Roman Trebuchet MS Verdana

1.2 Nettsider med tekstelementer

I forrige delkapittel fikk du en kort introduksjon til hvordan vi kan vise tekst som overskrifter og avsnitt på en nettside og hvordan vi kan formattere, endre fargen og størrelsen på teksten. Når vi lager nettsider og programmer er det viktig å tenke nøye gjennom hvordan teksten ser ut og hvordan informasjonen fremstilles. Dersom skriftstørrelsen er for liten eller har en farge som står i dårlig kontrast til bakgrunnen, kan teksten bli unødvendig vanskelig å lese. Utseendet til en tekst kan altså avgjøre om teksten er lett eller vanskelig å lese. Det kan også påvirke hvordan andre oppfatter informasjonen vi fremstiller. I dette delkapittelet tar vi for oss flere vanlige måter å stile og fremstille tekst med CSS og HTML.

CSS-EGENSKAPER FOR TEKST

CSS gir oss mange muligheter for å endre utseendet til tekster. Tabellen nedenfor oppsummerer de mest brukte CSS-egenskapene for tekst.

Egenskap

color Forklaring

farge på teksten

background-color bakgrunnsfargen til teksten

font-size

størrelse på teksten

font-family

line-height

skrifttype på teksten

avstand mellom tekstlinjer

margin

marg rundt teksten

margin-top margin-right margin-bottom margin-left

text-align

marg over, til høyre, under eller til venstre for teksten

horisontal plassering av tekst

Eksempel

color: darkorange;

background-color: blue;

font-size: 14px;

font-family: verdana;

line-height: 1.5;

margin: 20px;

margin-bottom: 30px;

text-align: center; text-align: left; text-align: right;

SKRIFTTYPER

Når du skriver tekster i skriveprogrammer som Word eller Pages, har du tilgang til mange forskjellige skrifttyper. Disse skrifttypene er lagret på datamaskinen din. Noen skrifttyper har seriffer, som er streker som står på tvers av de rette linjene i en bokstav, mens andre har ikke seriffer.

Med CSS angir vi skrifttypen som en verdi til egenskapen font-family. De skrifttypene som er installerte på de mest kjente operativsystemene, er de som er tryggest å bruke når vi velger skrifttypen på en nettside. Disse kalles websikre skrifttyper. Vi kan også velge en av de fem generiske skrifttypene: serif, sans-serif, monospace, cursive eller fantasy. Da velger nettleseren en skrifttype med egenskapen vi har angitt.

EKSEMPEL

Når vi angir skrifttype, er det vanlig å legge til en alternativ skrifttype i tilfelle datamaskinen til den som ser nettsiden, ikke har installert den samme skrifttypen som du valgte. Noen velger å legge til en generisk type også, som et tredjevalg. Vi kan for eksempel angi skrifttypen slik:

font-family: "Courier New", "Times New Roman", serif;

I koden nedenfor har vi en tekst om fossekallen – Norges nasjonalfugl. Teksten er strukturert med en overskrift og to avsnitt. Med CSS-kode har vi valgt ulike verdier for skrifttype, skriftfarge, skriftstørrelse og linjeavstand.

1 2 <h1>Fossekall</h1> <p>Fossekallen ble i 1963 kåret til Norges nasjonalfugl

etter en lytteravstemning i NRK. </p> 3 <p>Fossekallen er en art i den monotypiske fossekallfamilien. Den blir 17–20 cm lang, har brunsvarte og hvite fjær, og trives over det meste i landet vårt – også om vinteren.</p> 4 <style> 5 h1 { 6 color: rgb(207, 56, 30); 7 font-size: 20px; 8 font-family: "Georgia", "Times New roman", serif;

9 } 10 p { 11 font-size: 12px; 12 font-family: "Arial", "Trebuchet MS", sans-serif; 13 line-height: 1.2;

14 } 15 </style>

DISKUTER

Ta utgangspunkt i koden i forrige eksempel. Utforsk ulike verdier for skrifttypen, skriftfargen, skriftstørrelsen og linjeavstanden. Ta vare på to versjoner: én som du mener er lett å lese, og én du mener er vanskelig å lese. Vis frem versjonene til andre i klassen. Er de andre enige i hvilken versjon som er lettest å lese?

SELEKTOR MED ID

På større nettsider er det vanlig å ha mange HTML-elementer av samme type, for eksempel mange avsnitt, og dermed mange p-elementeter. Dersom vi ønsker at ett enkelt p-element skal ha en annen stil, kan vi gi elementet en id ved å skrive id="idNavn" i starttaggen, der idNavn er et navn vi velger selv. I style-elementet refererer vi til det enkelte HTML-elementet med en hashtag-selektor, slik: #idNavn {…}. Mellom krøllparentesene angir vi verdier til de egenskapene vi ønsker å endre.

Vi legger inn en id i det ene HTML-elementet som stilen skal gjelde for:

1 <h1 id="idNavn">…</h1>

I style-elementet refererer vi til HTML-elementet med en hashtag-selektor slik:

1 <style> 2 #idNavn { 3 egenskap: verdi;

4 } 5 </style>

SELEKTOR MED CLASS

Når vi ønsker at flere HTML-elementer skal ha de samme egenskapene, kan vi definere et klassenavn med attributtet class. Da skriver vi class="classNavn" i starttaggen til de HTML-elementene som skal ha de samme egenskapene. Navnet classNavn velger vi selv. I style-elementet refererer vi til HTML-elementene med det samme navnet med en punkt-selektor slik: .classNavn {…}. Mellom krøllparentesene angir vi verdier til de egenskapene vi ønsker å endre.

Vi legger inn class i starttaggene til HTML-elementene som stilen skal gjelde for:

1 <h1 class="classNavn">…</h1> 2 <p class="classNavn">…</p>

I style-elementet refererer vi til HTML-elementene med en punkt-selektor slik:

1 <style> 2 .classNavn { 3 egenskap: verdi;

4 } 5 </style>

EKSEMPEL

I koden nedenfor lager vi en mal for å vise frem en sangtekst. Vi ønsker at refrengene skal se litt annerledes ut enn versene. Det første p-elementet inneholder informasjon om låtskriveren og artisten. Dette elementet skal også skille seg litt ut.

1 <h1>Sangtittel</h1> 2 <p id="info">Låtskriver: Navn. Artist: Navn.</p> 3 <p class="vers">Verset går over<br /> flere linjer.</p> 4 <p class="refreng">Refrenget går også over<br /> flere linjer.</p> 5 <p class="vers">Verset går over<br /> flere linjer.</p> 6 <p class="refreng">Refrenget går også over <br /> flere linjer.</p>

7

<style> h1 { color: rgb(0, 140, 80); text-align: center;

} #info { text-align: center; font-size: small; line-height: 0.1;

} .vers { color: maroon;

} .refreng { color: darkblue; margin-left: 15px;

} </style>

LENKER De to første bokstavene i HTML står for Hypertext. En hypertekst er et annet ord for hyperlenke, som vi ofte bare kaller lenke. En lenke har en kobling til en annen del av en nettside eller til en annet nettside. Når vi klikker på en lenke, vises innholdet eller nettsiden som lenken er koblet til, i nettleseren. Det å koble sammen tekster på forskjellige nettsider var utgangspunktet for Internett.

Vi setter inn en lenke i HTML-koden med a-elementet. Vi skriver teksten vi ønsker at lenken skal vises med, mellom start- og sluttaggen. URL-adressen til nettsiden vi ønsker å koble til skriver vi inn som verdien til et attributt som heter href.

<a href="URL-adresse">Klikkbar tekst </a>

Når du har klikket på en lenke har du kanskje lagt merke til at nettsiden noen ganger lastes inn i den samme fanen, og andre ganger lastes den inn i en ny fane. Standarden er at en lenke skal lastes inn i den samme fanen. Om vi ønsker at nettsiden skal lastes inn i en ny fane når noen klikker på lenken, kan vi legge til attributtet target med verdien _blank. Ikke korrekturlest

EKSEMPEL

I koden nedenfor har vi satt inn en lenke til nettsiden med URLadressen https://www.interrail.eu/en. Lenken vises med blå tekst som standard, og når vi holder musepekeren over lenken, vises understrekingen. Når vi klikker på lenken, åpnes nettsiden i en ny fane fordi vi har satt verdien til target-egenskapen til _blank.

1 <p>I sommer reiste jeg og vennene mine rundt i Europa med tog. Vi kjøpte <a href="https://www.interrail.eu/en" target="_blank">Interrail</a>-billetter så vi kunne reise hvor vi ville i en hel måned.</p>

<ul>=unordered list= unummerert liste <ol>=ordered list= nummerert liste <li>=list item= listepunkt

LISTER

Vi har to valg når vi vil skrive HTML-kode for lister. Listen kan være en unummerert liste med bombepunkter eller en nummerert liste med tall. Vi bruker ul-elementet når vi vil ha en unummerert liste og ol-elementet når vi vil ha en nummerert liste. For hvert punkt på listen bruker vi taggene <li>…</li>.

En unummerert liste

1 <ul> 2 <li>Tekst</li> 3 <li>Tekst</li> 4 <li>Tekst</li> 4 </ul> En nummerert liste

1 <ol> 2 <li>Tekst</li> 3 <li>Tekst</li> 4 <li>Tekst</li> 5 </ol>

EKSEMPEL

I koden nedenfor har vi valgt å presentere tre byer i en unummerert liste.

1 <p>Av byene vi besøkte, var disse mine favoritter:</p> 2 <ul> 3 <li>Rotterdam</li> 4 <li>Milano</li> 5 <li>Budapest</li> 6 </ul>

Om vi ønsker andre punkttyper eller nummereringsmåter, kan vi endre dette med CSS-egenskapen list-style-type. Vi kan bytte ut bombepunktene med sirkler eller kvadrater ved å sette verdien til circle eller square. I stedet for nummerert liste kan vi ha store eller små romertall, eller store eller små bokstaver fra alfabetet ved å sette verdien til lover-roman, upper-roman,

lower-alpha eller upper-alpha.

Dersom vi endrer ul-elementet til ol-elementet, får vi en nummerert liste.

Her har vi satt inn koden

style="list-style-type: lower-roman;"

i starttaggen til ol-elementet.

TABELLER

Når vi skal presentere data på en systematisk og oversiktlig måte, er det lurt å bruke en tabell. Tabeller består av rader og kolonner, og ofte har de en egen tittelrad som forklarer innholdet i hver kolonne.

Som med lister, trenger vi flere tagger for å lage en tabell i HTML. Tabellen nedenfor forklarer taggene vi trenger.

Tagg Bruk Forklaring Står for

<table> <table>…</table> en tabell table

<tr> <tr>…</tr>

en rad table row

<td> <td>…</td>

<th> <th>…</th>

innhold i en celle table data

overskrift table head

I koden nedenfor finner du HTML-koden som trengs for å lage en tabell med tre rader og to kolonner. Vi trenger <tabel>-taggen for å opprette selve tabellen. Med <tr>-taggen lager vi én rad i tabellen. For å lage flere kolonner, skriver vi like mange <td>-tagger som antallet kolonner vi vil ha. I den første raden bruker vi <th>-taggen slik at teksten i tittelraden blir midtstilt og fet.

1 <table> 2 <tr> 3 <th>Tittel kolonne A</th> 4 <th>Tittel kolonne B</th> 5 </tr> 6 <tr> 7 <td>Innhold 1A</td> 8 <td>Innhold 1B</td> 9 </tr> 10 <tr> 11 <td>Innhold 2A</td> 12 <td>Innhold 2B</td> 13 </tr> 14 </table>

Resultatet av koden viser et enkelt tabelloppsett uten kantlinjer. Tabeller blir mer leservennlige med kantlinjer og bakgrunnsfarger. Koden nedenfor viser hvordan vi kan bruke CSS til å få til nettopp dette ved å velge verdier for egenskapene background-color og border. For border velger vi at kantlinjene til th og td skal være 1 piksel tykke, heltrukne (solid) og svarte. Vi gjør ingen endringer i HTML-koden nå.

1 <style> 2 th { 3 border: 1px solid black; 4 background-color: yellow;

5 } 6 td { 7 border: 1px solid black; 8 background-color: lightcyan;

9 } 10 </style>