HTML Del 2

Dette er et kurs for nybegynnere. Vi fortsetter i dag på våres index.html, som vi laget forrige gang. Nå skal vi kort gjennomgå det å legge et stilsett til våres dokument.

HTML og CSS

Hva er CSS?

CSS står for Cascading Style Sheets (på norsk stilsett) og er en standard som skal utfylle HTML. Jeg har tidligere fortalt at HTML dokumentet skal inneholde strukturen og innholdet, og at CSS skal inneholde utseendet. Dette er for at nettlesere skal vise innholdet på den måten som passer brukeren best. Du må huske at på WWW kan leseren bruke et hvilket som helst system, kanskje til og med kjøre i tekstmodus eller være blind, og sidene skal være like tilgjengelige uansett. Fordelen for forfatteren er at han ved å kun forandre i en fil, stilsettet, kan forandre utseende på alle HTML dokumenter som bruker stilsettet. Det er med andre ord vesentlig lettere å vedlikeholde og å forandre.

Målet.

På samme måte som jeg ga deg en kickstart på HTML, så vil jeg også gi deg en lignende start på CSS. Jeg har ikke til hensikt å skrive om alle muligheter i hverken det ene eller det andre. Det jeg vil lære deg er tilrettelagt slik at du får en god og feilfri start som du kan bygge videre på selv. I HTML fikk du introdusert bare et fåtall elementer og så fikk du en henvisning til W3s elementliste for at du der kan lære deg resten. Når det gjelder CSS så vil du få presentert syntaksen, hvordan du innlemmer et stilsett i ditt HTML dokument, et eksempel basert på den HTML side vi nettopp har laget og så en henvisning til W3Schools hvor du kan fortsette din læring.

Mitt mål er at du skal lære å starte med et feilfritt HTML dokument fra begynnelsen av, utvikle det og sjekke om det fortsatt er feilfritt etterhvert som du tilføyer mere, innlemme et stilark, utvikle det videre og sjekke om det også er feilfritt etter at du utvikler det videre. Når du er kommet så langt at du har forstått dette, så slipper jeg deg løs og lar deg utvikle dine egne hjemmesider på egen hånd og til å lære deg alt det du trenger ut over det jeg har lært deg.

Litt terminologi

Det er lettest å starte med et eksempel.
<P><A href="enside.html">En annen side</A></P>

P-Elementet strekker seg fra <P> til </P> og inneholder også Child Elementet A.
Slike Child Elementer arver sine egenskaper mht. stil fra sitt Parent Element eller Foreldre Element.

Attributt: href er en attributt i A Elementet.

Tag: <P> er en tagg. Det er </P> også. Den første er start-taggen og den andre er en slutt-taggen.

Hva består det av?

Et CSS-stilsett består av en liste med stilregler. En stilregel har to deler: selektoren som forteller hvor den gjelder og deklarasjons-listen som forteller hvordan formateringen skal være. Selektoren kan gjelde ett bestemt element, alle H1-elementer, eller alle elementer inne i et annet element.

Du kan skrive et stilsett i en vanlig teksteditor og enten lagre det i en .css-fil, som det henvises til fra ditt HTML-dokument. eller du kan skrive det rett inn i ditt HTML-dokument i et STYLE-element. jeg vil vise deg det førstenevnte.

Syntaksen i en ekstern CSS-fil og i et STYLE-element er akkurat den samme, det vil si at du kan ha en HTML-kommentar rundt alle stilreglene, men ellers skal stilsettet kun bestå av stilregler og eventuelle CSS-kommentarer. CSS-kommentarer begynner med /* og slutter med */

Syntaksen

selektor { deklarasjon; deklarasjon; osv... }
Deklarasjonene har formen egenskap: verdi.
Eksempel:
H1 { font-weight: bold; font-size: 18pt; font-family: "Times New Roman"; text-align: center }
Som nå vil gjelde for alle H1 elementer i vårt dokument. (Fonter som inneholder mellomrom i navnet skal innesluttes i appostrofer)

Koble til CSS.

Vi skal nå til å koble våres stilsett til vårt HTML domument. I vårt eksempel skal vi gjøre dette ved å sette dette elementet inn i headeren på vårt dokument:
<LINK TYPE="text/css" REL="stylesheet" HREF="minstil/style2.css">

Det vil si at vi har kalt vårt stilsett for style2.css og lagt det ned i mappen "minstil" som vi tidligere laget til dette.

Vårt stilark. (style2.css)

a:link {
        background: transparent;
        color: #666666;
        font-family: verdana, arial, sans-serif;
        font-size: medium;
        font-weight: bold;
        text-decoration: underline;
}
a:visited {
        background: transparent;
        color: #666666;
        font-family: verdana, arial, sans-serif;
        font-size: medium;
        font-weight: bold;
        text-decoration: none;
}
a:hover {
        background: #00FFFF;
        color: #CC6633;
        font-family: verdana, arial, sans-serif;
        font-size: medium;
        font-weight: bold;
        text-decoration: underline;
}
a:active {
        background: #FFFFFF;
        color: #FF0000;
        font-family: verdana, arial, sans-serif;
        font-size: medium;
        font-weight: bold;
        text-decoration: underline;
}
body {
        background: url(../bilder/rose2.gif) #FFFFFF;
        color: #000000;
        font-family: verdana, arial, sans-serif;
        margin-left: 50px;
        margin-right: 30px;
        margin-top: 10px;
}
h1 {
        background: #B4B4B4;
        color: #008080;
        font-family: verdana, arial, sans-serif;
        font-size: x-large;
        font-weight: bold;
        text-align: center;
        text-decoration: underline;
        border: thin solid;
}
.test {
        background: #B4B4B4;
        color: #008080;
        font-family: verdana, arial, sans-serif;
        font-size: medium;
        font-weight: normal;
        text-align: left;
        text-decoration: none;
        border: thin solid;
        margin: 2em 2em 2em 1em;
        padding: 1em;
}
img {
        border: medium double #0082FF;
        background: #C3C400;
        color: Lime;
        }
p.large {
        background: #F5DEB3;
        color: #D2691E;
        font-family: verdana, arial, sans-serif;
        font-size: smaller;
        font-weight: bold;
        text-decoration: none;
        padding-left: 1em;
        padding-top: 1em;
        padding-bottom: 0.5em;
        }
p.minus {
        background: #FFFFFF;
        color: #FF0000;
        font-family: verdana, arial, sans-serif;
        font-size: smaller;
        font-weight: bold;
        text-decoration: none;
}
p.small {
        background: #FFFFFF;
        color: #000000;
        font-family: verdana, arial, sans-serif;
        font-size: smaller;
        font-weight: bold;
        text-decoration: none;
}

Vår nye index.html

Etter at vi har tilpasset vår index.html slik at den bruker vårt stilsett, samt at vi har justert noen av våres elementer til å bruke stil hentet fra settet og til slutt pyntet opp på koden slik at den er mere lettleselig, så ser den nå slik ut:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
    <HEAD>
        <TITLE>
            En side om blomster
        </TITLE>
        <META name="Generator"
              content="Stone's WebWriter 4">
        <META http-equiv="Content-Type"
              content="text/html; charset=ISO-8859-1">
        <META http-equiv="Content-Language"
              content="no">
        <LINK type="text/css"
              rel="stylesheet"
              href="minstil/style2.css">
    </HEAD>
    <BODY>
        <H1>
            Om blomster.
        </H1>
        <DIV class="test">
            <P class="large">
                Jeg er glad i blomster.
                <BR>
                Jeg har vært glad i blomster hele mitt liv.
            </P>
            <P class="minus">
                Jeg liker Solsikker, Tullipaner og Roser
            </P>
            <P>
                Solsikker er noe flotte store blomster med
                svære gule kroner og som kan bli kjempe
                høye.
            </P>
            <P class="large">
                Tullipaner er også noen flotte blomster. De
                kan ha forskjellig farge og blir ikke på
                langt nær så store som solsikker.
            </P><A href=
            "http://www.w3.org/TR/html401/struct/links.html#edef-A"
                 target="_blank">Linker, eller Anker</A>
            <BR>
            <BR>
            <IMG src="bilder/rose.gif"
                 width="100"
                 height="154"
                 alt="En blomst"
                 border="0">
        </DIV>        
    </BODY>
</HTML>

Resultatet

Resultatet kan du se her på denne siden:
RESULTATET

Videre.

Vi har nå kommet frem til slutten av denne hurtige innføringen. Vi har hoppet bukk over mange av de problemer du kan støte inn i. Det er fordi hensikten med denne innføringen har vært at du lettest mulig skal kunne komme frem til en mal både for HTML dokumentet og for Stilsettet som er riktig kodet og som validerer. Du har allerede fått linken til der du kan validere ditt HTML dokument og nå får du en der du kan validere ditt stilsett. Det kan du gjøre her eller her. Du kan lære om CSS på sidene til W3Schools


Linker

  1. Om websider
  2. Noen retningslinjer
  3. Design - Utseende - Redesign?
  4. Spyware og Adware
  5. Download Kalkulator
  6. Websikre Farger
  7. Ny PC? Hvordan?
  8. HTML Intro
  9. HTML Del 1
  10. HTML og CSS Del 2
  11. Infisert maskin?