Frame-simulaties met HTML5-tags
In HTML5 heb je niet (meer) de mogelijkheid om een web-pagina in te delen met behulp van frames. Als je toch een opmaak wilt gebruiken die lijkt op frames, moet je de frames dus namaken. In het item Frames simuleren met CSS wordt uitgelegd hoe je dat kunt aanpakken met behulp van <div>-tags.
In HTML5 zijn nieuwe tags toegevoegd die het simuleren van frames een stuk eenvoudiger maken. Zie daarvoor ook
Verschillen tussen HTML 4 en HTML5 I: Nieuwe tags in HTML5.
Op deze bladzijde wordt besproken hoe je die nieuwe tags gebruikt.
De code van het voorbeeld kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De tags om frames mee te simuleren.
- Toepassen in je site.
- In onze frame-simulatie gebruiken we vijf tags:
Tag Beschrijving <header> Definieert vaak een koptekst. Dat is dus het deel dat bovenaan de bladzijde staat en naar mijn mening altijd in beeld hoort te zijn.
De tag <header> hoeft overigens niet bovenin beeld te staan, maar kan in het hele document voorkomen, nl. als titel van een hoofdstuk, paragraaf of tussenkopje.<nav> Bevat de hoofdnavigatie van de pagina. Ook dit hoort naar mijn mening altijd in beeld te zijn.<section> Bevat de content van de pagina. Er kunnen meerdere sections zijn.<aside> Bevat content die los staat van de de content van het document zelf. Denk aan een kolom met extra informatie zoals advertenties of links.<footer> Definieert een voettekst. Deze kan permanent in beeld worden gehouden of niet.
| Header | ||
| N a v |
Section |
A s i d e |
| Footer | ||
Druk op de knop om het voorbeeld te bekijken en te downloaden.
Aanpak om dit in je site toe te passen
Dit is slechts een summiere beschrijving. Zie ook de code in de downloadfile.
- Omdat er in HTML5 wordt gewerkt, beginnen we met het doctype: <!doctype html>.
Hierna volgt de gebruikelijke verdeling in html, head en body. Het content-type is utf-8. - Om het met oudere versies van Internet Explorer goed te laten werken wordt, als het gaat om een versie ouder dan 9, een speciaal script ingeladen.
- Alle code in de body wordt omvat door een <div>-tag, die wrapper wordt genoemd. Een andere veel
gebruikte naam voor deze <div>-tag is container.
Dit is nodig om de inhoud van de body op de juiste manier bij elkaar te houden.
De wrapper maken we met <div id ="wrapper">. - Binnen de wrapper plaatsen we als eerste de <header>
- Daarna komt als eerste de navigatie in een <nav>-tag. Deze kan eventueel ook binnen de
<header>-tag staan.
Voor de menu-items gebruiken we een unordered list (<ul>). - De "nuttige inhoud" (lees: content) van de pagina staat in een <section>-tag. Deze komt onder de
<header>-tag.
Er is nogal eens verwarring of dit een <section> moet zijn of een <article>. De HTML5-standaard is daar niet echt duidelijk over. In het algemeen wordt <article> gebruikt voor informatie die afkomstig is van een andere site. In ons geval is dat niet zo en gebruiken we <section>. - Vervolgens zetten we de voettekst in <section> met behulp van <footer>.
- Tenslotte plaatsen we de kolom aan de (rechter) zijkant. Die maken we met <aside>.
- De structuur van de HTML-pagina is nu:
<!doctype html>
<html>
<head>
.
.
.
</head>
<body>
<div id="wrapper">
<header>
.
.
</header>
<nav>
.
.
</nav>
<section>
.
.
<footer>
.
.
</footer>
</section>
<aside>
.
.
</aside>
</div> <!-- einde div id=wrapper -->
</body>
</html> - Om alles op zijn plaats te zetten is CSS nodig. Zie de file html351a.css.
Om te zorgen dat we de volledige controle hebben en houden over de lay-out, doen we eerst een CSS-reset.
Zie ook het item CSS-reset: wat het is en wanneer je het moet gebruiken. - Internet Explorer ouder dan versie 9 zet de nieuwe HTML5-tags default op "niet zichtbaar". Daarom
voegen we deze code toe:
header, nav, section, footer, aside { display:block; }
Nu kan de definitieve opmaak worden geprogrammeerd.
Opmerking:
Wees er op bedacht dat de margin, de padding en de border buiten de afmetingen liggen die je opgeeft voor header, nav, section, footer en aside.
- De body heeft dezelfde achtergrondkleur als deze site.
- De wrapper is transparant. De breedte is 940px en de hoogte is 1000px. De wrapper wordt in het midden van het scherm gehouden met margin:0 auto;.
- De header is 940px breed en 100px hoog. Deze wordt op zijn plaats gehouden met position:fixed.
De header wordt niet gepositioneerd (met left, top, enz.) en daardoor ligt deze bovenin de wrapper. De header heeft geen padding en margin (de figuur heeft dat wel). - Om te zorgen dat de content er onderdoor kan schuiven is de z-index:5 gezet.
- De linker kolom, nav, heeft ook geen padding. Er is wel een margin-top:100px, even hoog als de hoogte van de header. De hoogte is 1000px (van de wrapper) - 100px (=de hoogte van de header): height:900px. De breedte is 150px.
- De linker kolom wordt op zijn plaats gehouden met position:fixed.
Ook nav wordt niet gepositioneerd. er is wel een margin-top:100px. Daardoor wordt voorkomen dat een deel van nav onder header verdwijnt. Ook hier is z-index:5. - De menu-items zijn opgemaakt binnen nav.
- De section is 600px breed. Dat wil zeggen: Het deel waar de content komt. De padding links en rechts is 20px. De bovenmarge is 100px, net als bij nav.
- Om te zorgen dat de section netjes links wordt aangeschoven heeft deze float:left. Nu moet nog worden voorkomen dat section onder nav verdwijnt (omdat nav hogere z-index heeft). Dat is opgelost door margin-left:150px mee te geven.
- De totale breedte van section is nu: 150px + 2×20px + 200px = 790px.
Er is dus 940px (=breedte van de wrapper) - 790px = 150px over voor aside. - De hoogte van section is 900px. In combinatie met een bovenmarge van 100px is er weer 1000px, de hoogte van
de wrapper.
- De footer is gedefiniëerd binnen section. footer plaatst zich automatisch onderaan het
element waarbinnen het is gedefineerd. In dit geval verschijnt footer dus onder de content van section.
De hoogte is niet opgegeven. De padding links en rechts is 20px, dus de breedte van footer is ingesteld op
600px - 2×20px = 560px.
- Tenslotte: aside. Deze zit tegen de rechterkant van de wrapper aan en heeft dus float:right.
- De padding onder en boven is 20px elk. De bovenmarge is, net als bij section, gelijk aan 100px. De hoogte van aside is dus 1000px -100px -2×20px = 860px.
- aside heeft links en rechts een padding van 10px. Aan de linkerkant is een rand van 1px breed.
Zoals hiervoor is aangeven is er voor aside 150px breedte beschikbaar binnen de wrapper. De breedte van aside wordt opgegeven als 150px - 2×10px - 1px = 129px.
- Omdat section en aside geen position:fixed hebben, kunnen ze scrollen. footer is onderdeel van section en scrollt dus met section mee.
Tenslotte:
De winst die je kunt halen door de nieuwe HTML5-tags te gebruiken in plaats van de bekende <div>-tags lijkt
op het eerste gezicht niet zo groot, maar het is aanzienlijk! De code is beter leesbaar en eenvoudiger. Dingen die je
<div>-tags in HTML 4 alleen met grote moeite kunt realiseren, krijg je met de nieuwe HTML5-tags veel
eenvoudiger voor elkaar.
