litt om html

Dette er hvordan den grunnleggende html-siden ser ut

<html>
<head>
<title>Min hjemmeside</title>
</head>
<body>
<h1>Min hjemmeside</h1>
<p>
Dette er min hjemmeside. Dette blir bra.
</p>
</body>
</html>

Slik blir den seende ut!
Når du skriver og vil skifte linje legger du inn <br>.
Vil du ha to linjer før neste linje legger du inn <p>.
Du kan også skille med en strek <hr>

For å få vekk skyggeeffekt setter du inn noshade <hr noshade>
Streken kan du gi farge, fks rød <hr color="red" >
Eller du kan gjøre den tykkere <hr color="aqua" size="5" >
Du kan også bestemme hvor lang den skal være <hr color="cyan" size="5" width="350" >
<hr color="cyan" size="5" width="350" align="right">
Som du kan se har jeg skrevet fargene jeg har brukt her med navn.
Men du kan også bruke tallkombinasjoner, da setter man inn slik isteden: <hr color="#FFFFFF" size="5" width="350" align="left">

Det neste en skal ha på siden kan jo være en bakgrunn, det være seg farge eller bilde.Husk nå på at jo mere grafikk du legger inn på siden din, jo lenger tid tar det for den som skal se på den før den er ferdig nedlastet.

Aller først tar jeg farge.Da legger du det inn i bodytaggen slik<body bgcolor="en farge">
skal du ha bakgrunnsbilde blir det slik<body background="bilde du skal ha der">
Her er det et "Browsersafe" fargekart, dvs. farger som synes i alle browsere

Hyperlink

Denne linken åpner i nytt vindu
espennett.com
<a href="http:/www.espennett.com" target="_blank">espennett.com</a>
Slik åpner den i samme vinduet.
<a href="http://www.espennett.com">espennett.com</a>

Bildelink lages slik:

<a href="http://www.etellerannet.com" target="_new"><img border="0" img src="adressen til bildet">

Maillink er slik:

<A HREF="mailto:dagesm@online.no"><img src="http://www.espennett.com/bakgrunner/mail004.gif" border="0"></A>

Bilde og tekst, plasering

Når du skal plassere et bilde blir det automatisk plassert til venstre hvis du ikke skriver noe annet.

<img src = "bilde.gif">
Denne komandoen plasserer bildet inn i dokumentet.
<center>...</center>
Denne komandoen plasserer bildet eller teksten i midten av dokumentet.
<h1 align = center>...</H1>
Plasserer teksten i midten av dokumentet, fungerer ikke på bilder.
<img src= "bilde.gif" align = middle > Bilde!
Dette vil gi bildet en egen tekst. Du kan prøve å forandre (middle) med top eller bottom
og teksten vil plassere seg anneledes.
<img src= "bilde.gif" align = middle title="en tittel">Dette vil gi en liten boks med tekst når musepeker holdes over bildet.

Tabeller


Tabeller kan en gjøre mye med, skal prøve å få med meg det meste her.

Her er en enkel tabell, den "vokser" i lengden etterhvert som du legger inn tekst.
tekst

Koden til denne enkle cellen er:
<table border="1">
<tr>
<td>tekst<</td>
</tr>
</table>


mere tekst

og slik blir det jo mere tekst du legger til, morro, sant?

en kan tilogmed legge inn litt farger.

en kan skrive slik at ramma blir tykkere, om en vil?

eller så kan man ta bort hele ramma, morro:)

Vil du begrense lengden på tabellen så er ikke det noe problem.

Koden:
<table border="1" width="50">
<tr>
<td>Vil du begrense lengden på tabellen så er ikke det noe problem.</td>
</tr>
</table>

En kan skrive inn hvor mange pixler en vil ha bredden på, eller man kan skrive inn prosent på hvor langt over siden den skal gå.

Her har jeg delt opp tabbellen i to celler, celler er det de "rommene inne" i tabellen blir kalt.
celle 1
celle2

Her er koden til denne tabellen.
Merk! <table border="0"> tar bort ramma rundt. 
 <TABLE border="1">
<TR>
    <TD>celle 1</TD>
   </TR>
<TR>
    <TD>celle 3</TD>
    </TR>
</TABLE>


Her fire celler.
tekst tekst
tekst tekst

SLik ser koden ut:
<TABLE border="1">
<TR>
    <TD>celle 1</TD>
    <TD>celle 2</TD>
</TR>
<TR>
    <TD>celle 3</TD>
    <TD>celle 4</TD>
</TR>
</TABLE>


Colspan & rowspan


Med disse kan vi strekke noen celler over, eller forbi andre.
celle 1 celle 2
celle 3 
<TABLE border="1">
<TR>
    <TD>celle 1</TD>
    <TD rowspan="2">celle 2</TD>
</TR>
<TR>
    <TD>celle 3</TD>
    </TR>
</TABLE>


Eller slik:
celle 1
celle 3 celle 4 

<TABLE border="1">
<TR>
    <TD colspan="2">celle 1</TD>
</TR>
<TR>
    <TD>celle 3</TD>
    <TD>celle 4</TD>
</TR>
</TABLE>


Et tabeloppsett mange bruker på hjemmesiden sin er denne:
,,,,,,

Koden:
<table border="1">
<tr>
<td><table border="1">
<tr>
<td><table border="1">
<tr>
<td>,,,,,</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr></table>

Man kan trikse mye med tabeller.
,,,,,,

Nå tenker du sikkert hvordan denne lille firkanten kan bli til en hjemmeside.
Her  kan du se et eksempel på hvordan denne tabellen er brukt på en hjemmeside.
Her har jeg lagt til flere atributter inne i taggen. Høyde, bredde og bakgrunnsatributt.
<TABLE BORDER="0" width="500" height="600" cellpadding="50" body background="rosepearl-bg1.jpg">

Det tror jeg holder med tabeller.

Marquee


fungerer bare i MS internet Explorer
MARQUEE brukes til tekst og bilde i bevegelse. Man har muligheter til å "style" denne etter eget ønske. Teksten eller bildet kan gjøres om til hyperlinker.

Her kan du bestemme hvor bredt den skal gå med width="et tall", eller width="prosent".
<marquee direction="right">
<IMG SRC="yourimagename.">
</marquee>
<marquee direction="down" height="60" scrollamount="1">
<a href="http://www.espennett.com"><IMG SRC="yourimagename."></a>
</marquee>

tekst her
<marquee behavior=scroll direction="left" scrollamount="5">tekst her</marquee>

Nå er det en link
<marquee behavior=scroll direction="left" scrollamount="1">
<a href="http://www.espennett.com" target="_blank">Nå er det en link</a></marquee>

Hvis du vil endre bakgrunns- og fontfarge
Farge og font
<MARQUEE bgcolor="yellow" width="50%">
<font color=red><b>Farge og font</b></font>
</MARQUEE>

Hvis du vil bestemme antall ganger teksten skal "kjøres" bruker du LOOP
Antall runder den skal gå.
<MARQUEE bgcolor="#CCCCCC" loop="3" width="50%">
<font color=red><b>Antall runder den skal gå</b></font>
</MARQUEE>

LOOP="-1" = uendelig (eller dropp LOOP),   LOOP="5" = 5 ganger

Du kan også få teksten til å gå fram og tilbake, bestemme hastigheten og ha den som en link:
Eksempel på Bouncing Marquee
<MARQUEE behavior="alternate" scrollamount="4" bgcolor="Red" width="70%">
Teksten går frem og tilbake.
scrollamount="4" = Hastigheten. Høyere tall øker hastigheten.