We hebben nu drie lege pagina's het wordt tijd om deze wat inhoud te geven.
In een eerdere paragraaf hebben we de VScode extensie Emmet geïnstalleerd. Hiermee kunnen we snel HTML code genereren.
We starten met de index.php
Type !
gevolgd door de <tab> toets. Dit zal de volgende code aanmaken.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
We passen de <title> aan naar home (dit is de titel van de pagina die op het tabblad van de webbrowser wordt getoond.) In de body komt de inhoud van de pagina.
Daar maken we een met een h1
tag de zichtbare titel van de pagina met daaronder een tekst.
De tekst komt binnen een p
tag.
Bijvoorbeeld zoiets als hieronder
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>Home</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aspernatur cupiditate delectus deleniti dignissimos dolor, dolore fuga fugiat magni maiores minima mollitia nihil obcaecati quia quidem recusandae repellendus totam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam exercitationem iusto molestias nemo nostrum perspiciatis quas quia quibusdam veritatis? At debitis ducimus eos molestiae mollitia numquam pariatur praesentium quas vitae!</p> </body> </html>
Om dit snel zelf aan te maken type je h1<tab>
dit geeft <h1></h1>
Voor de <p></p> gebruik je p<tab>
en voor de lorem tekst lorem<tab>
Geef de pagina's about en contact ook een vergelijkbare inhoud. We vullen deze later op met wat zinvollere teksten en opmaak.