|
Inleiding
In deze les gaan we aan de slag met de mappenstructuur. De
mappenstructuur is belangrijk op het moment dat we pagina's, plaatjes e.d.
in diverse mappen gaan zetten. Je moet ze dan nog wel op de goede manier
kunnen bereiken als je er naar gaat verwijzen. Deze workshop heeft dus invloed op vele andere
HTML lessen. Mocht
je het dus weer nodig hebben, kun je het hier altijd naar terug komen.
|
Mappen structuurOm deze les zo goed
mogelijk uit te leggen ga ik uit van een standaard voorbeeld. Namelijk:
|
|
|
-
C:\Website is de root van de website. Dat betekent dat ik
daarin ben
ben begonnen met het bouwen van de webiste.
Er staan 2 pagina's in: index.html
en test.html
Er staan 3 mapen in: Afbeeldingen,
CSS en HTML
Deze 3 mappen hebben ieder op zich weer andere mappen en
eventuele webpagina's of afbeeldingen in zich.
Ik heb er dus voor gekozen om 2 pagina's te maken in de root en
daarnaast alle onderwerpen te verdelen in mappen, waarbij de
afbeeldingen een map op zich vormen een verdeling per onderwerp.
Dit is slechts een voorbeeldstructuur. Je kunt het straks maken
zoals je wilt. |
Verwijzingen die straks over diverse mappen gaan lopen altijd via de root.
Hieronder heb ik een afbeelding van de root gezet. Uiteraard met
betrekking tot mijn voorbeeld.
|
|
|
De
afbeelding hiernaast is de root. Dat is zeg maar de basis waar je
altijd langs komt als je wilt verwijzen naar bestanden in diverse
mappen op diverse nivo's. |
Verwijzingen
Verwijzingen kunnen met diverse bestanden plaatsvinden. We hebben
plaatjes, hyperlinks, pagina's, javascripts en nog veel meer. In deze
les ga ik even uit van plaatjes en pagina's.
Maar het principe werkt voor alles hetzelfde.
Ik ga gebruik maken van <A HREF>
(hyperlinks) om aan te geven hoe het werkt met de mappenstructuur.
Verwijzingen op hetzelfde nivo
|
|
|
Als
we het hebben over hetzelfde nivo, dan betekent dat dat de
bestanden in dezelfde mappen moeten staan. In de afbeelding links
zou het dan gaan om de volgende objecten:
1) index.html en test.html
2) les1.html en les2.html in de
cursusmap van HTML
3) les1.html en les2.html in de
cursusmap van CSS
Willen we hierbinnen verwijzen, hoeven we alleen het naampje
van het betreffende object neer te zetten.
Als ik in index.html een hyperlink
zet die ik laat verwijzen naar test.html,
dan zou dat er als volgt uitzien.
<A
HREF="test.html">Ga naar test</A>
Hetzelfde zou ik kunnen doen voor de objecten bij punt 2 en
3.
Let op: ik kan dus niet op
hetzelfde nivo index.html laten
verwijzen naar les1.html. Zij staan
simpelweg niet in dezelfde map. |
Onderliggend nivo
|
|
|
Staat het bestand in een subdirectory van de huidige
map staat, dan geef je eerst de namen van de achtereenvolgende subdirectories met achter elke naam een
slash (/)
en daarna de naam van het bestand.
Een hyperlink vanuit intro.html naar
les1.html (cursus CSS) zou zijn:
<A
HREF="cursus/les1.html">Ga
naar les1.html</A>
Dus als je in de zelfde map nivos naar beneden gaat, gebruik je
voor elke stap een slash, waarna je aangeeft door welke mappen je
heen wilt gaan en vervolgens geef je aan wel bestand je wilt
hebben. Dus een hyperlink van test.html
naar smile.gif zou zijn: <A
HREF="Afbeeldingen/html/smile.gif">Open
plaatje</A> Dit is
omdat test.html in de root staat en
vandaaruit direct naar beneden kan gaan in de map Afbeeldingen. |
Bovenliggend nivo
|
|
|
In
de structuur hiernaast zou je een hyperlink aan kunnen maken in de
pagina les1.html (cursus CSS) en die
laten verwijzen naar intro.html.
Bevindt het bestand zich in een hogere map dan de huidige, dan neem je voor elke stap omhoog een slash voorafgegaan door twee punten,
namelijk:../
Daarna geef je voor stappen omlaag weer alleen /mapnaam
uiteindelijk gevolgd door bestandsnaam.
Een hyperlink van les1.html
(cursus CSS) naar intro.html zou dus
zijn:
<A HREF="../CSS/intro.html">
Ga naar intro.html </A>
Een hyperlink van les2.html (CSS)
naar les2.html (HTML) zou zijn:
<A
HREF="../../HTML/cursus/les2.html">
Ga naar les2.html </A> |
Het is in het begin even een nieuwe manier van denken, maar als je dit een
aantal keer hebt gedaan, zul je zien dat het heel makkelijk werkt en dat
je het sneller kunt dan je zou verwachten.
|
