5. lage lenker og menyer


Nå er det på tide å lage flere sider og lenke disse sammen.
Taggen for lenke er <a href=""></a>

For å gjøre det mer oversiktelig klipper vi nå ut andre rad av tabelen vi lagde i forrige avsnitt. Denne inneholder marg, mellomrom og sideinnhold.
Hele koden får du på slutten av siden...

<!-- rad 2: -->
  <tr valign="top">
    <td width="180" bgcolor="silver">
      <br>
      &nbsp; - <a href="index.html">Hovedside</a><br>
      &nbsp; - <a href="omoss.html">Om oss</a><br>
      &nbsp; - <a href="bilder.html">Bilder</a><br>
      &nbsp; - <a href="http://www.nissedal.no" target="_blank">Nissedal.no</a>
    </td>
    <td width="20">
      &nbsp;
    </td>
    <td>
      <br>
      <h1>Ola Normanns hjemmeside</h1> ...
    </td>
  </tr>
</table>


Lenker er ikke vankelig å lære!

Linjen <a href="index.html">Hovedside</a>
lenker til siden 'Hovedside' som har filnavn 'index.html'.
  • <a> er tag for lenke (anchor).
     
  • Attibutten href="" er lenkens mål.

Likedan lenker <a href="omoss.html">Om oss</a>
til siden 'Om oss' som har filnavn 'omoss.html'.


Siste lenke tar deg ut av din side til http://www.nissedal.no i nytt nettleser vindu.
<a href="http://www.nissedal.no" target="_blank">Nissedal.no</a>
  • Atributten target="_blank" åpener lenke i nytt vindu!
Nå gjenstår bare å kopiere websiden din til flere sider. Se bunnen av siden...


Siden din ser nå slik ut:
Ola Normann

  - Hovedside
  - Om oss
  - Bilder
  - Nissedal.no
  

Ola Normanns hjemmeside


Velkommen til vår familie i Nissedal.
Vi er en familie på fire som elsker å gå tur i skog og mark. Vi er så sunne at vi ikke drikker brus, og sjokolade er bannlyst her!
Men fyre bål, det kan vi.


Her er hele koden:
<html>
<head>
  <title>Min første webside</title>
  <meta name="description" content="Ola Normann fra Nissedal sin hjemmeside.">
  <meta name="keywords" content="normann, nissedal, hjemmeside">
</head>

<body>
<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="3" bgcolor="gray" align="center" valign="middle" height="80">
      <font color="white" size="5">Ola Normann</font>
    </td>
  </tr>
  <tr valign="top">
    <td width="180" bgcolor="silver">
      <br>
      &nbsp; - <a href="index.html">Hovedside</a><br>
      &nbsp; - <a href="omoss.html">Om oss</a><br>
      &nbsp; - <a href="bilder.html">Bilder</a><br>
      &nbsp; - <a href="http://www.nissedal.no" target="_blank">Nissedal.no</a>
    </td>
    <td width="20">
      &nbsp;
    </td>
    <td>
      <br>
      <h1>Ola Normanns hjemmeside</h1>
      Velkommen til vår familie i Nissedal.<br>
      Vi er en familie på fire som elsker å gå tur i skog og mark. Vi er så sunne
      at vi ikke drikker brus, og sjokolade er bannlyst her!<br>
      Men fyre bål, det kan vi.<br><br>
      <img src="bilder/fyr2.jpg" alt="Fyrtårn" width="600" height="280"
      border="0">
    </td>
  </tr>
</table>
</body>
</html>


Lage flere sider

Om du ikke har fått med deg alt, så kopier hele koden i boksen over.
  1. Lagre siden som index.html
  2. Lagre siden på nytt som omoss.html
  3. Lagre siden på nytt som bilder.html
  4. Endre selve sideinnholdet i filene omoss.html og bilder.html
Gratulerer!
Du har nå laget en webside med to undersider :-)

Veien videre er å lære mer. Beste måten er å høyreklikke på enkle websider på nettet og velge 'Vis kilde'.
Da ser du sidens html, og kan snappe opp kodesnutter.


Lykke til
Mh Jan Olav Bollmann
Web Norge
Joomla Joomla
Installsjon og webmaler.
Supportavtaler.
Webshop Webshop
Norges rimeligste kommersielle nettbutikk.
Webdesign Webdesign
Css basert php/html og w3c validerende.
Websidemaler Websidemaler
Css basert tilpasset alle nettlesere.
W3c validerende.
Nettbåt Båtutstyr
Webshop med over 4000 båt artikler til markedets rimeligste priser.

Webdesign ©2010 Web Norge