Les 1: Structuur van je Pagina

Je gaat in deze lesbrief een aantal dingen leren door een voorbeeldpagina maken. We gaan werken met HTML5 en CSS3 en we gaan eerst de structuur van je pagina neerzetten. Hou je vast :)

Als je een website ontwerpt (middels wireframes), dan is het eerste wat je doet je pagina in blokken verdelen. En dan heb je vaak de volgende blokken:

  • Er is vaak een header-blok. Dit is een kopregel die vaak bovenaan een webpagina staat. Hier staat vaak de titel van de site en een logo in.

  • Er is vaak een footer-blok. Vaak staat deze onderaan de pagina. Hier staat vaak in wie de site heeft gemaakt, met wat copyright informatie.

  • Er is vaak een navigatiebalk. Denk aan een knoppenbalk of een balk met linkjes. Je ziet ze vaak bovenaan de pagina of links op de pagina. Door op de knoppen of linkjes te klikken ga je naar andere pagina’s

  • De inhoud van je pagina. Deze inhoud gaan we straks nog eens onderverdelen.

Nog vóór HTML5 konden we deze blokken maken met <div>-tags. <div> is de afkorting voor division (=afscheiding, onderdeel, sectie). Een <div> kan zelf van alles bevatten. Zoals plaatjes, kopjes, tabellen, opsommingen, paragrafen etc. Een mogelijke indeling kan er dan als volgt uitzien:

Als je goed kijkt, dan zie je dat elke div van de andere div wordt onderscheiden middels classes en id's. Zo heb je <div id="header"> voor het kopje van de pagina. En <div id="footer"> voor de footer van de pagina. In de CSS kun je vervolgens de div's afzonderlijk opmaken. Met HTML5 echter, heb je speciale tags tot je beschikking voor dit soort standaard onderdelen:

De <div>-tag bestaat nog steeds en mag je gewoon gebruiken. Maar deze HTML5-tags maken het je wel makkelijker. Ook kunnen zoekmachines zoals Google makkelijker de inhoud van je pagina indexeren en doorzoeken!

Opdracht

Maak een nieuwe map aan op je harde schijf.

Maak vervolgens de volgende HTML-pagina. Noem hem index.html. Check uiteraard via de validator of deze aan de HTML5 standaard voldoet.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mijn nieuwe website</title>
  </head>

  <body>
    <header>
    Hier komt een plaatje met Logo
    </header>
    <nav>
    Hier komt de knoppenbalk
    </nav>
    <section>
    Hier komt de inhoud van de pagina
    </section>
    <footer>
    Hier komt een copyright en info over de maker
    </footer>
  </body>
</html>

Tip: zet die tags netjes onder elkaar zoals hierboven, je hebt dan overzicht over wat bij wat hoort en je vergeet niet zo gauw een tag af te sluiten. Tip2: Er is een wereld van een verschil tussen de <head> en de <heading>. De <head>-tag mag je nooit in de body gebruiken. De <heading>-tag mag alleen een titel en meta data bevatten. De <heading> is onderdeel van je pagina en staat in de body !

We gaan even het resultaat van deze mega vette site bekijken ☺ Test de pagina in een webbrowser en je ziet het volgende:

De elementen <header>, <footer>, <section> en <nav> zijn allemaal blokelementen. Deze blokken worden dan ook netjes onder elkaar gezet.

We kijken nu even puur naar de inhoud van een pagina. In ons geval dus de <section> tag. Een section is bedoeld voor het opsplitsen van de inhoud. In ons geval hebben we maar één section. In het geval van een krant kun je best verschillende katernen hebben. Denk bij een krantensite aan economie, politiek, sport, buitenland, binnenland enz. Meerde sections per pagina zijn dus best mogelijk. Wij houden het nog even simpel bij één sectie.

Een sectie bestaat uit verschillende artikelen. Denk bij een artikel net als in de krant als een zelfstandige eenheid.

Opdracht:

Pas de section tag aan, verwijder het woord inhoud en maak hierin ongeveer drie artikelen:

<section>
      <article>
        Hier komt het eerste artikel
      </article>
     
      <article>
        Hier komt het tweede artikel
      </article>
     
      <article>
        Hier komt het derde artikel
      </article>
    </section>

Test het in je browser. Het ziet er nog steeds niet uit. Klopt ook, we hebben nog niets aan de opmaak gedaan. Ook een article is een blokelement. Dus die worden netjes onder elkaar gezet.

Iedereen die de krant leest weet waar een artikel uit bestaat: een kopje en één of meerdere alinea’s dus uit <h1> of <h2> … enz en uit <p> Deze heb je al in les 1 gehad.

Opdracht

Vul iedere alinea met een kopje (kies bijvoorbeeld <h2> dan kan je straks <h1> gebruiken voor je titel) en alinea’s. Gebruik minstens 1 alinea, maar je mag ook meer alinea’s gebruiken. Uiteraard mag je deze kopiëren uit eerdere pagina’s en ga je dit niet opnieuw schrijven.

<article>
    <h2>Robot nieuws</h2>
    <p>
      Ons robot nieuws geeft u inzicht in de allerlaatste ontwikkelingen. Lees over robot ontwikkelingen, robotica en leuke nieuwe robots voor thuis. Er wordt steeds meer ontwikkeld op robotgebied en al sinds 2009 leest u het laatste en beste nieuws over robots hier.
    </p>
    <p>
      Robotica is een wetenschap die vooral gericht is op systeemintegratie. Een goed ontworpen robot zal zijn waarnemingen (die verkregen zijn met behulp van sensoren) op een goede manier kunnen vertalen naar handelingen die zijn actuatoren zullen uitvoeren.
    </p>
  </article>

  <article>
    <h2>Waar gaat het heen met robots?</h2>
    <p>
      De robot revolutie is begonnen, robots maaien ons gras en stofzuigen ons huis. Ze staan de chirurg bij in de operatiekamer en rijden rond op Mars. Ze vermaken onze kinderen en binnenkort zijn zelfs onze autos autonome robots. Lees hier het robotnieuws als je echt bij wilt blijven. Meld je aan voor onze nieuwsbrief!
    </p>
  </article>

Koppel een stylesheet

In de bovenstaande code staan twee artikelen afgebeeld. In het eerste artikel heb ik één kop met twee paragrafen in het tweede artikel heb ik een kop met maar één paragraaf.

Tip: doe jezelf (en anderen) een plezier en zet de en netjes onder elkaar. Je ziet dan of je vergeten bent iets af te sluiten. De headers zet ik wel op één regel.

Het resultaat ziet er nog steeds niet uit, maar het begint in ieder geval wel op een webpagina te lijken:

Vergeet niet te checken of je pagina nog steeds aan de HTML5 standaard voldoet !

We gaan nu de webpagina opmaken.

Opdracht

Koppel je pagina aan een stylesheet. Maak eerst een nieuwe stylesheet aan: ik noem de mijne opmaak.css zet deze weer in het mapje style en koppel deze aan je html pagina.

 <head>
    <meta charset="utf-8">
    <title>hoofdpagina</title>
    <link rel="stylesheet" href="style/opmaak.css">
  </head>

Margin en padding op 0px

Dit hebben we al verschillende keren gedaan. De eerste rule die ik er altijd inzet is: alle standaard margin en padding eruit. Die gaan we straks zelf opgeven. Sommige browsers hebben standaard wel een margin en/of padding andere weer niet. Hier hebben we geen zin in. * betekent alles. Dus zet als eerste rule in opmaak.css

* {
  margin: 0px;
  padding: 0px;
}

Voor de body (dat is de hele pagina) zet ik alvast een standaard lettertype erin. In mijn voorbeeld heb ik ook voor een achtergrond gekozen. Een klein plaatje laat ik van links naar rechts en van boven naar beneden herhalen:

body {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  background: grey url('../images/blokje.jpg') repeat;
}

Ik heb dit plaatje gebruikt als achtergrond maar je bent natuurlijk vrij om je eigen pagina achtergrond te kiezen. Een kleur als achtergrond is ook prima.

Opdracht

We gaan eens kijken naar de header. Ik heb een header plaatje gevonden van 150pixels hoog en 960 pixels breed. Je zou zelf ook een plaatje kunnen maken in een programma zoals Photoshop.

Deze ga ik als achtergrond gebruiken voor mijn header. Ik ga mijn site ook nog een titel geven.

Vervang de tekst tussen de <header> en </header> door een titel. Ik gebruik hiervoor de h1

<header>
  <h1>De toekomst van robotica</h1>
</header>

In de stylesheet gaan we de header stylen. We gebruiken hiervoor de header en de header h1. Een voorbeeld staat hieronder. Je ziet dat ik expliciet de lengte en de hoogte opgeef met width en height. 

header {
  background: url('../images/headermetlogo.png');
  width: 960px;
  height: 150px;
}

header h1 {
  font-size: 300%;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: black;
  text-align: right;
  text-shadow: 5px 5px 7px #000000;
}

De laatste optie text-shadow hebben we nog niet gehad. Deze is toch wel leuk, je kunt hiermee een schaduw bij je tekst krijgen. Eerste twee opties (beide 5px ) zijn het aantal pixels naar rechts en naar beneden van de schaduw. De derde optie (7px) is een maat voor hoe vaag of hoe scherp de schaduw moet worden. Hoe groter dit getal hoe vager de schaduw. De laatste optie is de kleur van de schaduw. (#000000 = zwart). Ik speel gewoon wat met deze getallen. Resultaat:

Het begint een beetje op een website te lijken.

Opdracht

We gaan nu een navigatiebalk maken. Hoe je dit moet doen heb je met de module HTMLCSS-1 geleerd. Ook heb je geleerd hoe je de knoppen naast elkaar kunt krijgen. Uiteraard doen we dit door een lijst te maken met linkjes.

Vervang de tekst tussen <nav> en </nav> door een lijstje met linkjes. In mijn voorbeeld laat ik de linkjes even naar een niet bestaande pagina verwijzen href=”#”. We hebben immers nog niet zoveel pagina’s. Alleen de homepage index.html (zie onderstaande code)

<nav>
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="#">Industrie</a></li>
        <li><a href="#">Ruimtevaart</a></li>
        <li><a href="#">Geneeskunde</a></li>
      </ul>
    </nav>

We gaan maar weer stylen. Hieronder zie je een voorbeeld. Het is wat standaard kleurtjes en achtergrondjes werk. Er is één belangrijke optie: display : inline-block; hierdoor staan de knoppen naast elkaar. Uiteraard hoef je de kleurtjes en de randen niet over te nemen. Leef je uit en maak je eigen knoppen!

ul {
  background: #080808;
  padding: 10px;
}

ul li {
  background: #787878;
  padding: 5px;
  border: solid 2px white;
  display: inline-block;
}

ul li a {
  color: white;
  text-decoration: none;
}

ul li a:hover {
  color: #C0C0C0;
}

Resultaat:

Opdracht

We gaan nu iets moois maken van de artikelen. Je hebt dit met de HTML-CSS-1 module al een beetje gehad. We kunnen de volgende rules gebruiken in de stylesheet: section, article, article h2 en article p

In onderstaand voorbeeld heb ik alleen nog maar section en article gebruikt 

section {
  padding: 5px;
  margin: 5px;
  border: double 4px black;
}

section article {
  border: 3px solid black;
  border-radius: 0px 20px 20px 20px;
  margin: 5px 10px 5px 10px;
  padding: 10px;
  background: white;
}

Het resultaat is toch wel aardig:

De tekst en de koppen gaan we ook nog opmaken. Dit mag je zelf uitzoeken. Hier zijn we in de vorige module uitvoerig mee bezig geweest. Je hebt in ieder geval nodig:

article h2 {
 
}

article p {
 
}

Tip: je had ook mogen gebruiken: section article h2 en section article p Maar omdat ik maar 1 sectie had vond ik dat wat overdreven.

Opdracht

De footer staat onderaan de pagina. We houden het even simpel: vervang alles tussen <footer> en </footer> door een copyright tekst. &copy; is het © teken want het copyright teken hoorde niet bij de utf-8 tekenset. Ik heb hier een h3 gebuikt, maar iets anders is ook goed.

<footer>
  <h3>Made with &hearts; by Coderclass</h3>
</footer>

Uiteraard heb je weer een footer en een footer h3 nodig om de boel te stijlen. Een voorbeeld zie je hieronder. Van de footer heb ik niet overdreven veel werk gemaakt.

footer {
  background: #F0F0F0;
}

footer h3 {
  text-align: center;
  font-weight: normal;
  font-size: 90%;
}

We zijn bijna klaar met onze pagina we hebben echter nog 1 ding wat niet zo netjes is. Het zou mooi zijn als de site netjes in het midden stond en was uitgelijnd. Nu is het rommelig. Hier zie je de site op een breedbeeld scherm.

Om dit probleem op te lossen zetten we alle blokelementen in een nieuw element. Een div-element. Dit element wordt alleen maar gebruikt om de opmaak mooier te maken. Het heeft dus geen structuur functie zoals article of nav. Zoals aan het begin van de lesbrief al is verteld bestonden de tags article, nav, section en footer voor HTML5 niet. Toen werd alles opgelost met de div tag. Je gaf toen een id mee in de div.

Voorbeeld:

<header> </header> was bijvoorbeeld <div id=”header”> </div><footer> </footer> was bijvoorbeeld <div id=”footer”> </div> <nav> </nav> was bijvoorbeeld <div id=”navigator”> </div>

De div tag is er in HTML5 nog steeds. Alleen we gebruiken het puur voor de opmaak. Niet meer voor de structuur. Een div is dus hetzelfde als <article>, <footer> of <section> behalve dan dat we hem puur voor de opmaak gebruiken !

We gaan de hele pagina in een div tag zetten die we id=”wrapper” meegeven. Dus voeg direct na de body tag in:

En onderaan de pagina net voordat de body tag sluit:

Tip: als ik veel div tags gebruik, moet ik die allemaal afsluiten met </div> ik zet dan wat commentaar bij de </div> bij welke div deze hoorde. Ik vergeet dan niet zo snel een div af te sluiten.

Nu gaan we de wrapper stijlen. Nogmaals ik wil met de wrapper alleen maar de pagina mooi in het midden zetten. Uiteraard wil ik alles net zo breed hebben als de header: deze was 960 pixels. Dus:

wrapper {
  margin: 0 auto 0 auto;
  width: 960px;
}

Kijk even of je het snapt: de marges boven en onder zijn 0. Links en rechts zijn de marges automatisch. Met andere woorden de browsers maakt de pagina 960 pixels breed en zet hem netjes in het midden omdat de linker en rechtermarge automatisch worden berekend.

Resultaat:

PreviousHTML-CSS-2NextLes 2: position in CSS

Last updated