Mijn-eigen-website.nl

Hoe kan ik zelf een webpagina maken?

Zelf een webpagina maken is goed te doen met behulp van deze voorbeeld html-code.

Het eerste wat je nodig hebt als je zelf een webpagina maken wilt, is een html-editor. Een goede, gratis editor die geschikt is voor zowel Windows, Mac en Linux is Brackets. Dit is de editor die ik tegenwoordig zelf het meest gebruik.

Heb je eenmaal een html-editor op je computer geïnstalleerd, kopieer dan de code uit het vak hieronder en plak die in een lege pagina. Sla deze pagina op onder de naam index.html. Daarmee heb je de basis voor je eerste webpagina.

<!DOCTYPE html>

<html lang="nl">

<head>
<title>De titel van je webpagina</title>
<meta charset="utf-8">
<meta name="description" content="beschrijving van je webpagina">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<link rel="stylesheet" href="basis.css" type="text/css" media="screen">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
</head>

<body>

<main>

<header><h1>Mijn eigen website</h1></header>

<div class="midden">

<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="wiezijnwij.html">Wie zijn wij</a></li>
<li><a href="hobbys.html">Hobby's</a></li>
<li><a href="fotos.html">Foto's</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

<article>

<h1>Morbi aliquam mi quis volutpat</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum orci sit amet odio varius pulvinar. Quisque malesuada iaculis nibh, a vulputate orci rutrum sed. In vitae neque nibh. Maecenas semper dolor nec orci vestibulum cursus. <span class="nadruk">Phasellus</span> vel eros urna, at laoreet lorem.</p>

<ul>
<li>Nam diam libero, vulputate non aliquet et, tempus consectetur magna.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes.</li>
<li>Morbi consequat ornare arcu at convallis.</li>
</ul>

<p>Nulla et lacus elit, id dapibus ante. Ut vulputate aliquam consequat. In nulla quam, consectetur in consequat quis, facilisis non nisi.</p>

<h2>Duis consectus</h2>
<p>Duis consectus vestibulum condimentum. Morbi bibendum, nisl id hendrerit rutrum, orci metus semper nulla, a condimentum augue turpis quis elit. Donec dolor velit, egestas sit amet faucibus non, placerat eget erat.</p>

<ol>
<li>Etiam lectus neque, hendrerit in feugiat ac, malesuada eu arcu.</li>
<li>Ut ipsum dui, sollicitudin eget viverra a, hendrerit in sapien.</li>
<li>Proin hendrerit orci eget nulla tristique sit amet volutpat arcu.</li>
</ol>

<p>Ut auctor viverra turpis id tincidunt. Curabitur eu lectus non orci interdum sagittis at condimentum justo. Donec porttitor massa tortor, et malesuada odio. Sed eget nisl sit amet mauris tempor ultrices ut eget erat. Mauris sit amet erat quis risus vehicula fermentum. Nulla sollicitudin pulvinar venenatis.</p>

</article>

<aside>
<img alt="roos" src="roos.gif">
<p>Roos</p>
</aside>

</div>

<footer>
<p>© 2016 Jouw eigen website</p>
</footer>

</main>

</body>

</html>

De structuur van je webpagina

Een tag is een stukje code waarmee je de verschillende onderdelen of elementen van een webpagina als het ware 'labelt', zodat je het ene onderdeel van het andere kunt onderscheiden.

Ik leg je eerst even uit hoe deze pagina is opgebouwd. Zoals je ziet, staat de héle pagina binnen de tags <html> en </html>. (Behalve de eerste regel dan, dat is de zogenaamde Doctype declaration, die je browser laat weten dat dit bestand een html-bestand is.)

Binnen die twee html-tags bevinden zich de head en de body van de pagina. De head is het gedeelte waarin informatie over deze pagina staat die voor de zoekmachines en browsers bedoeld is; binnen de body staat de inhoud die je straks in je browserscherm te zien krijgt.

In de head staan o.a. een title en een paar meta-tags. Op een andere pagina heb ik beschreven wat je in de head moet neerzetten. Op die pagina leg ik uit hoe de informatie die in de head staat door de zoekmachines wordt gebruikt om te bepalen waar je pagina precies over gaat.

Binnen de body staan ook weer een aantal tags. Zo zijn er in de eerste plaats tags voor de verschillende onderdelen van de body: header, footer, nav, article, aside en division (respectievelijk: <header>, <footer>, <nav>, <article>, <aside> en <div>).

Daarnaast staan er binnen die verschillende onderdelen weer tags voor koppen (<h1>, <h2>, enz), voor paragrafen (<p>), voor een genummerde (<ol>) en ongenummerde (<ul>) opsomming of lijst, voor de verschillende onderdelen van zo’n lijst: list items (<li>), en voor een afbeelding (<img>).

De meeste onderdelen hebben een begin- en een eind-tag. Een eind-tag herken je aan de forward-slash die erin staat. Tussen de begin- en eind-tag staat de inhoud van het betreffende onderdeel. Maar niet álle onderdelen van een webpagina hebben een begin- én een eind-tag (een afbeelding heeft bijvoorbeeld maar één tag). Met behulp van deze html-tags geef je dus structuur aan een pagina.

De inhoud van je pagina

Maar waar het natuurlijk om gaat, is om datgene wat er bínnen die html-tags staat. En dan met name binnen de body-tags. Want dát is het gedeelte wat uiteindelijk te zien is als je de pagina opent in je webbrowser.

voorbeeld van webpagina met de gratis html-code

Open de pagina maar eens in je favoriete browser, dan zie je precies wat er van de bovenstaande html-code zichtbaar is geworden en wat niet. Je ziet zoiets als in het screenshot hiernaast.

Een van de dingen die je waarschijnlijk opvalt, is dat bij jou een rood kruisje staat in plaats van de roos. Omdat je deze afbeelding niet op je computer hebt staan, kan je browser hem ook niet laten zien. Download daarom even de afbeelding van de roos en sla die op in dezelfde map op je computer als waar je ook je html-bestand hebt opgeslagen. Als je daarna de pagina opnieuw inlaadt in je browser (klik daarvoor op een knop met een of meer pijlen rechts of links van de adresbalk, afhankelijk van welke browser je gebruikt), dan is de afbeelding wel zichtbaar.

De tekst op deze pagina heeft niets te betekenen: hij staat er alleen maar zodat je een indruk kunt krijgen van hoe de pagina eruit zou zien als hij gevuld zou zijn met jouw eigen tekst.

De lay-out van je webpagina

Het is natuurlijk niet de bedoeling dat je pagina er zo uit blijft zien. De volgende stap is dan ook dat je de uiterlijke kenmerken vastlegt van de verschillende onderdelen uit het html-bestand. Dat doe je met behulp van css, ofwel cascading style sheets. In zo'n style sheet of stijlblad staat per html-element een lijstje van de eigenschappen die dit element moet krijgen (afmetingen, kleur, randen, positie, enz.).

Omdat een style sheet een afzonderlijk bestand is, moet je ergens in je webpagina aangeven waar het style sheet dat voor de lay-out van je webpagina gebruikt moet worden, precies te vinden is. Dat gebeurt door middel van een link naar dit style sheet in de head van je pagina. In de html-code die ik je heb gegeven, zie je ergens tussen de begin- en de eind-tags van de head deze regel staan:

<link rel="stylesheet" href="basis.css" type="text/css" media="screen">
    

Die regel betekent dat deze webpagina moet worden vormgegeven op basis van de instructies die te vinden zijn in het style sheet dat basis.css heet.

Zo’n bestand heb je nog niet, dus dat maak je aan door in je html-editor een lege pagina te openen en die op te slaan onder de naam basis.css. Dit bestand zet je natuurlijk weer in dezelfde map neer als die waarin ook je webpagina en je afbeelding zijn opgeslagen. (Het is natuurlijk het gemakkelijkste als je een aparte map aanmaakt voor al je website-bestanden.)

Nu ga je één voor één de verschillende onderdelen uit je html-bestand langs en leg je in dit style sheet vast hoe ze eruit moeten komen te zien.

De voorbeeldcode voor het style sheet in het vak hieronder begint met de instructies voor de body. Met de instructie background-color: silver; geef je bijvoorbeeld aan dat de achtergrond van de webpagina zilverkleurig moet worden. Die waarde kun je later per onderdeel weer overschrijven met een andere waarde (bijvoorbeeld met de achtergrondkleur ‘white’ voor het gedeelte waar de tekst komt te staan).

body { 
    background-color: silver;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 1em;
    color: black;
    padding: 0;
    margin: 0;
} 

main {
    box-sizing: border-box;
    max-width: 1100px;
    margin: 0 auto;
}

header { 
    background-color: navy;
    box-sizing: border-box;
    padding: 2em 1em;
} 

header h1 {
    color: white;
    font-family: Georgia, serif;
    font-size: 2.5em;
    font-variant: small-caps;
    text-align: center;
}

.midden {
    background-color: white;
}

nav { 
    background-color: maroon;
    box-sizing: border-box;
    font-size: .9em;
} 

nav ul { 
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav li { 
    border-top: 1px solid white;
    padding: .5em;
}

nav li:hover {
    background-color: navy;
}

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

article { 
    box-sizing: border-box;
    padding: 2em;
}

article p {
}

article ul, #hoofdvak ol {
    list-style-position: outside;
    margin-left: 2em;
}

article h1 {
    color: maroon;
}

article h2 {
    color: navy;
}

aside {
    border-top: 1px solid black;
    box-sizing: border-box;
    font-size: .9em;
    padding: 2em;
    text-align: center;
}

aside p {
}

footer { 
    background-color: navy;
    box-sizing: border-box;
    clear: both;
    color: white;
    font-size: .8em;
    padding: 2em;
    text-align: center;
}

.nadruk {
    font-weight: bold;
    color: maroon;
}

@media screen and (min-width: 600px) {
    header h1 {
        text-align: left;
    }
    .midden::after {
        clear: both;
        content: "";
        display: table;
    }
    nav {
        font-size: 1em;
    }
    nav ul {
        display: flex;
    }
    nav ul li {
        border-top: none;
        flex-grow: 1;
    }
    article {
        float: left;
        width: 80%;
    }
    aside {
        border-top: none;
        float: left;
    }
}

Zoals je in het vak hierboven ziet, staan alle opmaakeigenschappen voor een bepaald onderdeel tussen accolades, en elke eigenschap eindigt met een puntkomma. Voor elk blokje eigenschappen staat aangegeven om welk onderdeel uit je webpagina het gaat: om de body, om de kop (header), om de paragraaftekst binnen de kop (header p), of om het middenstuk (.midden) bijvoorbeeld.

Het onderdeel body is een html-term, net als de onderdelen header, footer, nav, article, aside en div. Het onderdeel div is een algemene benaming, en die kun je wat verduidelijken door er een id of een class aan toe te voegen. Dat doe je door middel van een hekje (#) – voor een id – of een punt – voor een class – in de begin-tag neer te zetten, gevolgd door een zelf-verzonnen naam, zoals ik heb gedaan bij: <div class="midden">. Een bepaald id mag maar eenmaal in een webpagina voorkomen, een class meerdere malen.

De commando’s voor de uiterlijke kenmerken zoals je ze in het rode kader hierboven ziet staan, spreken meestal voor zichzelf. Misschien dat de termen margin en padding wat verwarring wekken: de margin is de ruimte tussen de verschillende elementen onderling, terwijl de padding de ruimte is tussen de rand van een element en datgene wat er binnenin staat. De eigenschap float heeft betrekking op de positie van een onderdeel: je kunt het naar rechts (right) of naar links (left) laten verplaatsen.

Helemaal onderaan het stylesheet staan de instructies voor de weergave op een breder scherm. Dat zie je aan de regel die begint met: @media screen and (min-width: 600px). Wat tussen de accolades daarachter staat, wordt alleen uitgevoerd als het beeldscherm breder is dan 600 pixels. Op die manier is deze pagina gelijk responsive, dat wil zeggen dat hij zich aanpast aan de breedte van het beeldscherm.

afbeelding

Als je je style sheet hebt opgeslagen en je webpagina opnieuw oproept in je browser, dan ziet je pagina eruit zoals in dit screenshot.

Tip:
Het gaat hier te ver om uitgebreid uit de doeken te doen hoe css werkt, maar in mijn Minicursus Websitebouw voor beginners leer je er wat meer over.

Copyright © 2004-2017 Arkon v.o.f. – Leiden / KvK: 28069730 / BTW: NL805348827B01
contactsitemapprivacybeleid