Veel mensen vinden het knap als je zegt dat je een website hebt gemaakt, zonder
ontwerpprogramma's en die onzin, gewoon met code. Maar dat is helemaal toch niet zo lastig?
In deze tutorial bouw je je eerste website, daarvoor gebruiken we de talen HTML (HyperText Markup Language), CSS (Cascading StyleSheets) en een beetje JS (JavaScript). Ik ga het proberen makkelijk te houden, maar ik zal er ook blauwe vakken in zetten, daarin ga ik verder op in de code en theorie.
Ik verwacht dat je Brackets al hebt gedownload, en bestandnaamextensies aan staan. Is dat niet het geval, bekijk daar dan mijn tutorials over. Je vind ze hier: Een ontwikkelomgeving opzetten
Hyperlinks
In deel 1 van deze tutorial heb ik je laten zien hoe je de homepage van je website kan bouwen. (Heb je dat nog niet gedaan? Check dan eerst deze post uit: Websites bouwen, hoe moet dat?) Maar, een website bestaat niet uit 1 pagina. Ik wil ook nog een over-mij pagina, en een pagina waarop mijn projecten staan.
Dit is waar hyperlinks tevoorschijn komen.Hyperlinks zijn die blauwe klikbare dingen, die je op websites ziet, die je van website naar website brengen. Hyperlinks zijn het hart van het internet. Zonder hyperlinks kun je er niks mee.
Maar ondertussen denk jij: 'Robin loopt maar wat te lullen, maar wanneer, en hoe gebruik je nou hyperlinks?
In dit geval gaan we hyperlinks gebruiken in de navigatie van de website, het menu.
Maak een nieuwe HTML pagina aan. Dit doe je door het bestand
index.html in Brackets te openen, en dan bovenin op file / bestand te klikken. Klik daarna op Opslaan als / Save as. Typ in over-mij.html, en klik op Opslaan / Save. Als het goed is heb je nu 2 bestanden: index.html en over-mij.html. Open het index.html. En typ dit:<!DOCTYPE html>
<html>
<head>
<title>Robin Boers | Web Design</title>
</head>
<body>
<header>
<h1>Robin Boers | Web Design</h1>
<nav>
<ul>
<li>Home</li>
<li><a href="over-mij.html">Over mij</a></li>
</ul>
</nav>
</header>
<h2>Welkom op mijn website!</h2>
<p>Hallo, ik ben Robin Boers, ik ben bijna 13, en ik maak websites.<br>
Wil je ook een website? Neem dan contact met me op via: robin@geheimesite.nl</p>
</body>
</html>
Open hierna het bestand
over-mij.html, en typ dit:<!DOCTYPE html>
<html>
<head>
<title>Over mij - Robin Boers | Web Design</title>
</head>
<body>
<header>
<h1>Robin Boers | Web Design</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li>Over mij</li>
</ul>
</nav>
</header>
<h2>Over mij</h2>
<p>Hallo, ik ben 13 jaar, en ik maak websites. Ik heet Robin en toen ik dit schreef zat ik in de brugklas.<br>
Ik heb een YouTube kanaal, dat Robin Boers heet, waar ik video's maak over mij intresses. En ik heb een blog, dat je nu leest</p>
</body>
</html>Open nu het bestand
index.html in de browser, en bekijk het resultaat.Als het goed is zou je dit moeten zien:
 |
| De homepagina |
Klik je dan op het linkje "Over mij", dan zie je dit:
 |
| De over-mij pagina |
Maar hoe werkt die code nou eigenlijk?
Het is best simpel: We maken een navigatievak met het element <nav>, daarna plaatsen we in dat vak een lijstje met <ul>. <ul> staat voor Unsorted List, een lijst zonder nummers. Daarna maken we List Items met <li>. In de List Items maken we hyperlinks met <a>.
 |
| De werking van het menu |
Een hyperlink werkt zo:
Gefeliciteerd! Je hebt zojuist je eerste hyperlink gemaakt!
Wil je meer informatie over het bouwen van websites? Bekijk dan dit boek eens: Coderdojo Nano - Bouw je eigen website. Met dit boek heb ik de eerste versie van mijn website gemaakt. Ook is het nuttig om w3schools.com eens te raadplegen. Het is een enorme site, met veel informatie. Er zit alleen 1 nadeel aan: het is Engels...
Dit was het voor deze tutorial.
Ik hoop dat je hem nuttig vond.
Blijf creatief,
Robin
Reacties: