HTML Cursus - Hoofdstuk 8: Frames
Met HTML kun je gebruik maken van frames. Voorbeeld:

Home

Info

Links

Contact

Home

Welkom op mijn website!

Kijkt gerust even rond en leef je uit...

Mvg,
................


Hier zie je dus een menu en een content. Als je met frames werkt, maak je:
  • één pagina voor het menu
  • voor elke link (home, info, links, contact) één pagina
  • één index.html pagina. Hiermee maak je je website tot één geheel.


    Maak maar even aan:
  • home.html
  • info.html
  • links.html
  • contact.html

    Deze pagina's kun je ongeveer zo maken:

    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
        Hier je tekst
    </BODY>
    </HTML>



    menu.html komt er ongeveer zo uit te zien:

    <HTML>
    <HEAD>
    </HEAD>
    <BODY bgcolor="#79D0FF">
        <A href="home.html">Home</A><BR><BR>
        <A href="info.html">Info</A><BR><BR>
        <A href="links.html">Links</A><BR><BR>
        <A href="contact.html">Contact</A><BR><BR>
    </BODY>
    </HTML>



    Nu moeten we de pagina's nog bij elkaar voegen om ze tot één website te maken. Nu gaan we index.html maken. Op deze pagina komen de frames.

    <HTML>
    <HEAD>
        <TITLE>Welkom op mijn website !</TITLE>
    </HEAD>
    <FRAMESET cols="30%,70%">
        <FRAME src="menu.html">
        <FRAME src="home.html" name="content">
    </FRAMESET>
    </HTML>


    LET OP: de frame(set) tags komen niet tussen de body tags!

    Als je nu het resultaat bekijkt en op een link drukt, zie je dat de frame weg is. Als je bijv. op "info" klikt, dan moet info.html op de plek komen, waar nu de frame van home.html zit. Nu moet je dus een aanpassing doen bij de links van menu.html. Je zet in iedere A-tag target="content".

    Voorbeeld:

    <A href="home.html" target="content">Home</A><BR><BR>



    Rows (index.html) :

    <FRAMESET cols="30%,70%">

        <FRAME src="menu.html">

    <FRAMESET rows="90%,*">

        <FRAME src="home.html" name="content">
        <FRAME src="copyright.html">

    </FRAMESET>
    </FRAMESET>


    Er staat rows="90%,*". De bovenste frame is dus 90% en de onderste de rest (10%). Het sterretje ( * ) betekend dus zeg maar "de rest".

    copyright.html:

    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
        <CENTER>© 2006 - sitenaam.nl</CENTER>
    </BODY>
    </HTML>


    Resultaat van de laatste twee voorbeelden:

    Home

    Info

    Links

    Contact

    Home

    Welkom op mijn website!

    Kijkt gerust even rond en leef je uit...

    Mvg,
    ................
    © 2006 sitenaam.nl


    Index

    Hoofdstuk 1 - Hoofdstuk 2 - Hoofdstuk 3 - Hoofdstuk 4
    Hoofdstuk 5 - Hoofdstuk 6 - Hoofdstuk 7 - Hoofdstuk 8
    Hoofdstuk 9 - Hoofdstuk 10



    Wat vind je van deze pagina?

    72%
    Je moet ingelogd zijn om te kunnen stemmen!