</a>.
Het deel <a href="..."> is verplicht en geeft de plaats aan waarnaar toe gegaan moet worden; op de punten van de plaats vult u de naam van de pagina in.
Het deel target=_blank voor > hoeft niet ingevuld te worden, maar hiermee kunt u aangeven hoe de nieuwe pagina geopend moet worden. Hiervoor kunt u de volgende 4 codes gebruiken:
_blank | Opent het bestand in een gloednieuw browservenster |
_self | Opent het bestand in het huidige frame |
_parent | Vervangt het huidige framesetbestand door het nieuwe bestand |
_top | Wist alle frames en laadt het bestand in de huidge browser |
U kunt ook op de pagina zelf navigeren. Op deze pagina zijn dat de paragraafindelingen en de terugkeer naar het begin.
Hierbij moet op de pagina zelf ankerpunten aanmaken zodat de browser weet waarhij naar toe moet. Het aanmaken van een ankerpunt doet u met de tag <a name="top">. Die plaats op de pagina heeft dus de naam top. Op deze pagina is dat helemaal boven aan bij de kop "Welkom".
Iedere keer dat u wilt dat er naar zo'n ankerpunt gegaan moet worden gebruikt u de code <a href="body.html#top">Top van deze pagina</a>.
De werking is gelijk aan die van een hyperlink met twee uitzonderingen:
- U kunt geen target ingeven
- U moet de browser vertellen dat er naar een onderdeel van de pagina gegaan moet worden en dat doet u door het hekje te gebruiken na de paginanaam en hierachter de naam van het ankerpunt te zetten
Top van deze pagina
Tabellen en lijsten
Als u nu al een web-pagina hebt gemaakt met de de bovenstaande kennis dan zal het u ongetwijfeld opgevallen zijn dat de browser alles onder elkaar zet.
Met behulp van tabellen kunt zelf de indeling maken. De beste vergelijking met een tabel is het ruitjespapier.
Als u een blanco vel neemt dan kunt u dat vergelijken met een lege web-pagina. Als u nu over een aantal ruitjes lijnen zet dan heeft u een tabel gemaakt. De enige beperking van een tabel is dat het een rechthoek moet zijn.
Een tabel maak u met de tags <table> en </table>; in de tag <table> kunt u met width aangeven hoe breed deze moet zijn (absoluut in het aantal pixels, relaties in %). Als u wilt kunt u ook een rand om de tabel weergeven.
De code voor de onderstaande tabel is <table width=100% border=1> ... </table>.
| Deze | tabel | kent | 4 |
| kolommen | en | 4 | rijen |
| De | uitlijning | is | links |
| en | aan | de | onderkant |
| | | |
In een tabel kunt u zoveel rijen opnemen al u wilt; u gebruikt hiervoor de tags <tr> en </tr>.
Wanneer u tekst opneemt in de tabel dan verdeelt de browser zelf over hoeveel regels dit verdeelt wordt. Als er meer dan 1 regel is dan kunt u de verticale uitlijning bepalen met valign.
<tr valign=top> |
|
<tr valign=center> |
|
<tr valign=bottom> |
|
Binnen iedere rij kunt u zoveel kolommen opnemen als u wilt; u gebruikt hiervoor de tags <td> en </td>.
De uitlijning bepaalt uzelf met align.
<td align=left> |
<td align=center> |
<td align=right> |
Bij de rijen is <valign=center> de standaard en bij de kolommen <align=left>.
Bij een tabel zijn er vier begrippen.
- De tabel zelf;
- Die onderverdeeld is in een of meer rijen;
- Die onderveldeeld is in een of meer kolommen;
- De combinatie van een rij en kolom die een cel heeft.
| Kolom A | Kolom B | Kolom C |
| Rij 1 | Cel A1 | Cel B1 | Cel C1 |
| Rij 2 | Cel A2 | Cel B2 | Cel C2 |
| Rij 3 | Cel A3 | Cel B3 | Cel C3 |
Er is echter een belangrijk onderdeel dat u niet mag vergeten. In een tabel moet in iedere rij evenveel kolommen zitten.
Maar wat nu als u dat niet wilt? U kunt per cel aangeven of deze over meer dan 1 kolom heen moet met de code colspan=.. waarbij op de plaats van de punten aangegeven wordt hoeveel kolommen het betreft.
| Kolom A | Kolom B | Kolom C |
| Rij 1 | Cel A1 | Cel C1 |
| Rij 2 | Cel A2 |
| Rij 3 | Cel A3 | Cel B3 |
De code van de bovenstaande tabel is:
<table border=1>
<tr><td></td><td>Kolom A</td><td>Kolom B</td><td>Kolom C</td></tr>
<tr><td>Rij 1</td><td colspan=2>Cel A1</td><td>Cel C1</td></tr>
<tr><td>Rij 2</td><td colspan=3>Cel A2</td></tr>
<tr><td>Rij 3</td><td>Cel A3</td><td colspan=2>Cel B3</td></tr>
</table>
In de cellen van een tabel kan bijna alles opgenomen worden wat in de body van een HTML-pagina is toegestaan, zoals tekst, links, afbeeldingen en zelfs andere tabellen.
Een van de meest gebruikte toepassingen van een tabel is de presentatie van afbeeldingen en vooral van afbeeldingen met verschillende formaten.
Als u de afbeeldingen opneemt in een HTML-pagina dan is het afhankelijk van de browser en grootte van de afbeeldingen hoe ze gepresenteer worden; neemt u ze op in een tabel kan worden ze netjes in de vakken verdeeld.
Natuurlijk moet u dan wel zelf rekening houden met de grootte en vooral breedte zodat het nog enigzins redelijk op het scherm getoond wordt.
Wanneer u een opsomming op uw pagina wilt tonen, zoals bijvoorbeeld een routebeschrijving, dan kunt u dit doen met behulp van een tabel met daarin een aantal rijen van 2 kolommen.
In de 2e kolom zet u de verschillende stappen van de route en in de 1e kolom kunt u bijvoorbeeld een nummering opnemen.
U kunt dit ook doen met lijsten waarbij de browser zelf voor het inspringen zorgt.
Er zijn drie soorten lijsten mogelijk en wel
- De ongeordende lijst
- De geordende lijst
- De definitielijst
|
- De ongeordende lijst
- De geordende lijst
- De definitielijst
|
U ziet hier het verschil tussen een ongeordende en een geordende lijst. Een ongeordende lijst maakt u met de tags <ul> - </ul> en een geordende lijst met <ol> - </ol>.
Voor ieder item dat u wilt tonen zet u tussen de tags <li> - </li>.
U kunt zelfs een lijst binnen een lijst opvoeren.
- Item 1
- Subitem 1
- Subitem 2
- Item 2
De code voor de bovenstaande lijst is:
<ol>
<li>Item 1
<ol type=a>
<li>Subitem 1
<li>Subitem 2
</ol>
<li>Item 2
</ol>
U kunt de opmaak van de lijsten beinvloeden. Bij een ongeordende lijst kunt in de <ul>-tag meegeven wat het symbool is voor de lijst.
U doet dat door <ul type="..."> en op de plaatsen van de punten het woord disc (standaard), circle of square in te vullen.
Bij een geordende lijst kunt in de <ol>-tag meegeven wat het symbool is voor de lijst.
U doet dat door <ol type="..."> en op de plaatsen van de punten het teken 1 (standaard), i, I, a of A in te vullen.
De definitielijst wijkt iets af van de (on)geordende lijst. Er wordt gebruikt gemaakt van de tags <dl> - </dl> om een definitielijst te maken, maar de opsomming is altijd in paren.
De tags <dt> - </dt> gebruikt u om de titel van de definitie weer te geven en de tags <dd> - </dd> om de defintiebeschrijving te geven.
U ziet hieronder een voorbeeld van een definitielijst.
- Ongeordende lijst
-
Opsomming van items zonder een aanduiding van de volgorde. Is te vergelijken met een boodschappenlijst. Wat op het lijstje staat moet allemaal meegenomen worden, maar er is geen volgorde waarin het gekocht moet worden.
- Geordende lijst
-
Opsomming van item met een aanduiding van de volgorde. Is de vergelijken met een stappenplan. Alles wat op het lijstje staat moet uitgevoerd worden, maar in de juiste volgorde.
- Definitielijst
-
Opsomming van verschillende begrippen die verder uitgelegd worden.
Top van deze pagina
Forms
HTML is in het algemeen een een-richtings verkeer.
De webserver genereert de pagina's en de bezoeker bekijkt deze en klikt op een link waardoor er een nieuwe pagina getoond wordt.
Er is eigenlijk geen interactie tussen de bezoeker en de web-pagina's. Met behulp van forms kunt u die interactie maken.
| Belangrijk |
Met HTML kunt u ervoor zorgen dat de bezoeker wel informatie kan invoeren en naar de webserver kan versturen, maar HTML kan niet reageren op de inhoud van de informatie. Hiervoor heeft u op de webserver een script-omgeving nodig zoals PHP. |
Met de tags <form> - </form> definieert u het formulier. Alles wat tussen deze tags staat wat als informatie doorgegeven naar de volgende pagina.
In de tag <form> zijn twee belangrijke onderdelen en wel action en method.
Achter action vult u het adres in van het script dat u wilt uitvoeren.
Achter method vult of GET of POST; hiermee geeft u aan hoe de browser de ingevulde informatie moet sturen naar de webserver.
Bij GET worden de ingevulde gegevens zichtbaar getoond in de browser, met POST is dat niet het geval. Vandaar dat POST de voorkeur heeft.
Tussen de form-tags neemt u de velden die ingevuld wilt zien. Dit doet u met de <input>- </input> tags; deze kunt u desgewenst afkorten naar <input />.
In de <input>-tag worden een aantal extra velden opgenomen; de belangrijkste hiervan zijn type=... en name=....
Met name=... geeft u een naam aan de variabele die doorgegeven wordt naar de aangeroepen pagina.
Met type=... geeft u het type aan wat de gebruiker kan invoeren.
Een van de belangrijkste <input> type is submit; hiermee wordt de invoer bevestigd.
In het onderstaande, fictieve voorbeeld, wordt een formulier gemaakt waarin achtereenvolgens het volgende wordt aangegeven:
Het formulier zorgt ervoor dat het script http://www.heltzel.nl/html/naam.php wordt aangeroepen.
De gebruiker kan zijn voor- en achternaam invullen en die wordt in de variabelen voornaam en achternaam gezet.
Er is een knop met de omschrijving 'Invoer tonen' die ervoor zorgt dat http://www.heltzel.nl/html/naam.php daadwerkelijk wordt aangeroepen.
<form action="http://www.heltzel.nl/html/naam.php" method="GET">
<br>Uw voornaam : <input type="text" name="voornaam">
<br>Uw achternaam : <input type="text" name="achternaam">
<br><input type="submit" name="submit" value="Invoer tonen">
</form>
U ziet dat de <input>-tag een gewoon HTML tag is en neergezet wordt volgens de regels die u beschrijft. Beschrijft u niets dan komen deze tags achter elkaar.
Persoonlijk vind ik dat niet zo mooi en gebruik meestal tabellen om een nette opmaak te krijgen. Dit ziet er dan als volgt uit:
De code hiervan is
<form action="http://www.heltzel.nl/html/naam.php" method="GET">
<table>
<tr valign=center><td><font size=2>Uw voornaam</font></td><td><input type="text" name="voornaam"></input></td></tr>
<tr valign=center><td><font size=2>Uw achternaam</font></td><td><input type="text" name="achternaam"></input></td></tr>
<tr valign=center><td colspan=2 align=center><input type="submit" name="submit" value="Invoer tonen"></input></td></tr>
</table>
</form>
Er zijn verschillende <input>-tags met verschillende werking. Hieronder ziet u steeds de opmaak van de tag, het doel en een voorbeeld ervan. U kunt ze gerust uitproberen.
Top van deze pagina
Frames
Bij het opmaken van een web-pagina kunt u gebruik maken van tabellen om een aardige structuur te krijgen.
Ook met CSS (Cascading Style Sheets) is een mooie indeling mogelijk.
Maar wat nu als u een web-site wilt maken die uit meerdere pagina's bestaat en waarvan u wilt dat de basisopmaak steeds hetzelfde is en alleen de inhoud van detailpagina's wisselend is; zeg maar een opmaak zoals mijn site.
U kunt dat doen met frames of CSS.
| Waarschuwing | Hoewel u met frames een mooie opmaak kunt krijgen zijn er een aantal onderdelen waarmee u rekening moet houden. |
| | Als u frames gebruikt moet u nauwkeurig zijn in het gebruik ervan en vooral bij hyperlinks naar andere pagina's toe. Als u niet de juiste target gebruikt (_top, _self, _blank, _parent) dan zou het zo maar kunnen voorkomen dat de nieuwe pagina verkeerd wordt weergegeven. |
| | In theorie zou een bezoeker van uw pagina een browser kunnen gebruiken die geen frames ondersteund. Deze zou dan uw pagina niet kunnen zien. Het meerendeel (98% of meer) van de internet gebruikers gebruiken Internet Explorer, Firefox of Opera en die ondersteunen frames. |
| | Het uiterlijk van uw pagina kan iets afwijken bij andere browsers. Deze web-site gebruikt frames (6 om precies te zijn) en als u de pagina met Internet Explorer bezoekt moet u goed kijken om de overgangen tussen de frames te zien. Gebruikt u echter Firefox dan zit u tussen de frames een kleine witte rand. |
Als u besluit om met frames te gaan werken dan moet u eerst een indeling maken hoe u frames eruit komen te zien en welke informatie u in de frames wilt tonen. Ik neem mijn web-site als voorbeeld.
Mijn eerste keuze was om 4 frames te gebruiken; een voor de kop en drie voor de inhoud. De inhoud zou dan zijn mijn adresgegevens, de detailpagina en de navigatie door mijn site. Globaal was dit:
| Kop |
| Adresgegevens | Detailpagina
| Navigatie |
In de kop wilde ik steeds een korte omschrijving van de pagina weergeven.
Uiteindelijk heb ik besloten of 6 frames te gebruiken omdat dit symetrischere indeling gaf en wat gemakkelijker is in het onderhoud. Uiteindelijk is dit de indeling geworden:
| Kop 1 | Kop 2 | Kop 3 |
| Body 1 | Body 2 | Body 3 |
Ik heb voor Kop 1, Kop 3, Body 1 en Body 3 HTML-pagina's gemaakt voor hun speciaal doel.
Kop 1 en Kop 3 zijn gewoon plaatjes geworden voor de vulling van de pagina; als u wilt kunt u hier uw logo opnemen.
Body 1 zijn mijn adresgegevens geworden en Body 3 de navigatie door mijn site.
Iedere keer wanneer ik een nieuw onderdeel toevoeg aan mijn site dan zijn dit de vaste pagina's die ik toevoeg.
Ik gebruik steeds dezelfde pagina's en dat heeft als voordeel dat als b.v. mijn telefoonnummer wijzigt ik dat op een plaats hoef door te voeren (Body 1) en dat dit meteen voor mijn hele site geldt.
Iedere keer wanneer ik een onderdeel toevoeg aan mijn site maak ik een afzondelijk HTML-pagina die de frames aanstuurt. Nu heb ik er twee en wel eentje voor het begin van mijn site (index.html) en een voor de mini-cursus html (html.html). Er komen nog drie HTML-pagina's bij en die zullen waarschijnlijk sql.html, php.html en css.html gaan heten.
Alle pagina's zijn gelijk op twee onderdelen na, namelijk de vulling van Kop 2 en Body 2. Kop 2 wordt steeds de titel van de pagina en Body 2 wordt steeds de inhoud van de pagina.
De inhoud van de pagina's is (verkort):
index.html
<html>
<head>
</head>
<frameset rows="135,*" framespacing="0">
<frameset cols="200,*,200">
<frame src = "./standaard/kop1.html" frameborder="0" border="0" scrolling="no" />
<frame src = "./index/kop.html" frameborder="0" border="0" scrolling="no" />
<frame src = "./standaard/kop2.html" frameborder="0" border="0" scrolling="no" />
</frameset>
<frameset cols="200,*,200" framespacing="0">
<frame src = "./standaard/body1.html" frameborder="0" border="0" scrolling="no"/>
<frame src = "./index/body.html" frameborder="0" border="0" scrolling="yes"/>
<frame src = "./standaard/body2.html" frameborder="0" border="0" scrolling="no"/>
</frameset>
</frameset>
</html>
html.html
<html>
<head>
</head>
<frameset rows="135,*" framespacing="0">
<frameset cols="200,*,200">
<frame src = "./standaard/kop1.html" frameborder="0" border="0" scrolling="no" />
<frame src = "./html/kop.html" frameborder="0" border="0" scrolling="no" />
<frame src = "./standaard/kop2.html" frameborder="0" border="0" scrolling="no" />
</frameset>
<frameset cols="200,*,200" framespacing="0">
<frame src = "./standaard/body1.html" frameborder="0" border="0" scrolling="no"/>
<frame src = "./html/body.html" frameborder="0" border="0" scrolling="yes"/>
<frame src = "./standaard/body2.html" frameborder="0" border="0" scrolling="no"/>
</frameset>
</frameset>
</html>
Belangrijk in de opmaak van een pagina met frames is dat er geen <body> - </body> tags zijn, maar <frameset> - </frameset> tags.
In de <frameset>-tag geeft u aan hoe u de indeling wilt maken; wilt u rijen dan gebruikt u row, wilt u kolommen dan gebruikt u cols. U geeft ook aan hoe groot de rij / kolom moet zijn in pixels.
U ziet dat ik begonnen ben met mijn web-site in te delen in twee rijen waarbij de eerste rij 135 pixels hoog is en de tweede rij de rest van het scherm. Hiermee heb ik de indeling gemaakt naar kop en body.
Daarna heb vul ik de rijen met een nieuwe frameset; hiermee deel ik mijn site op in de 3 kolommen. De eerste en derde kolom zijn 200 pixels breed en de tweede kolom is de rest van het scherm.
Tot slot heb ik aangegeven waarmee de detailframes gevuld moeten worden en heb ik ervoor gezorgd dat er maar een scrollbalk op het scherm komt.
ALs u de coding van de beide HTML-pagina's goed bekijkt ziet u dat er maar twee verschillen zijn en dat is in de tweede en vierde <frame>-tag.
Hierbij is de directory verschillend; index versus html.
U ziet dat ik gebruik maak van verschillende directories en wel standaard voor de vaste onderdelen, index voor de hoofdpagina en html voor de HTML-cursus pagina.
Op deze manier is voor mij het onderhoud van de site heel eenvoudig. Iedere keer wanneer ik een nieuw onderdeel toevoeg doe ik het volgende:
- Ik maak een directory voor het onderwerp waarover het gaat en plaats hierin de HTML-pagina kop.html voor de omschrijving die ik wil gebruiken en de HTML-pagina body.html met de inhoud die ik wil laten zien
- Ik maak een HTML-pagina met de naam van de directory en plaats deze in de hoofddirectory van mijn site. Ik kopieer de index.html en pas dan alleen de tweede en vierde
<frame>-tag aan.
- Tot slot pas ik body2.html in de standaard directory aan door een link toe te voegen aan mijn navigatie structuur. Hieronder staat een deel van deze pagina.
<a href="../index.html" target=_top>Home</a>
<a href="../html.html" target=_top>Mini-cursus HTML</a>
U ziet dat ik de pagina aanroep met als target _top; hierdoor wordt de nieuwe pagina volledige over de oude gezet.
Top van deze pagina
