Maak je eigen placeholder met HTML en CSS!

Als je nieuwe website in aanbouw is of je alleen e-mail gebruikt, dan is het een goed idee om een simpele webpagina of placeholder op te zetten. Als visitekaartje of simpelweg om te zorgen dat geïnteresseerden altijd wat te zien krijgen, als ze jouw domeinnaam bezoeken. Graag geven we je een aantal tips om je hiermee op weg te helpen!

Maak je eigen placeholder met HTML en CSS!

Als er een nieuw hostingpakket wordt aangemaakt, dan staat daar standaard onze Antagonist-placeholder op. Die heb je in enkele stappen vervangen met je eigen visitekaartje. Jij bepaalt zelf hoe simpel of complex je het maakt! Zo kun je gaandeweg een contactformulier of een kaart van je locatie toevoegen.

Wat is index.html?

Je nieuwe placeholder is in feite een index.html-bestand. Weet je al wat dat is, dan kun je dit stuk gerust overslaan. Lees anders even verder. Een index.html staat in de /public_html/-map van je pakket. Het bepaalt wat er wordt getoond als een bezoeker jouw domeinnaam bezoekt. Dit bestand is noodzakelijk, anders krijg je een zogeheten 403 Forbidden Error.

We bespreken hier specifiek een HTML-bestand. HTML staat voor HyperText Markup Language en is de standaard opmaaktaal voor webpagina’s. Als je hier iets minder mee bekend bent, dan kan het interessant zijn om een korte (online) cursus of tutorial te volgen waar je alle basiskennis kunt opdoen. Kijk bijvoorbeeld eens naar Codecademy of W3Schools.

Wat is index.php?

Als je een website hebt of had, dan is de kans groot dat je weleens het bestand index.php op je hostingpakket hebt zien staan. Veel populaire CMS’en, zoals WordPress en Joomla, werken namelijk met PHP. Als er zowel een index.html als index.php in je /public_html/-map staat, dan wordt altijd de index.html getoond. Deze heeft dus voorrang op een index.php.

Aan de slag met de basis

Het beste kun je eerst bedenken wat je op de placeholder wilt laten zien. Denk ook alvast na over de opmaak. Wil je bijvoorbeeld alvast je logo gebruiken en contactgegevens benoemen? Of de datum vermelden wanneer jouw website live gaat, zodat je bezoekers weten wanneer ze die kunnen verwachten?

Ben je eruit? Dan kun je aan de slag met de HTML-code! Het handigst is om dit in een zogeheten HTML-editor te doen, zoals Coda of Notepad++. Je hebt ook online editors, waar je direct een voorbeeld van je code te zien krijgt. Laten we beginnen met een simpele basis:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <title>Onder constructie</title>
</head>
<body>
  <img src="logo.png" alt="Organisatielogo">
  <h1>Organisatie opent binnenkort!</h1>
  <h2>Wie is organisatie?</h2>
  <p>Plaats hier een korte beschrijving van je organisatie.</p>
  <h2>Wanneer opent organisatie?</h2>
  <p>Binnenkort! In 2018, 2019 of 2020. Wie zal het zeggen?</p>
  <h2>Waar vind ik organisatie?</h2>
  <p>Voorlopig alleen hier! Meer informatie volgt snel.</p>
</body>
</html>

Kopieer bovenstaande regels en plaats ze in je editor. Sla het bestand dan als index.html op en uploadt het naar de map /public_html/ van je pakket. Je kun het bestand ook direct via de File Manager in DirectAdmin aanmaken, als je dat gemakkelijker vindt.

Een index.html aanmaken via de File Manager van DirectAdmin.

Je kunt de tekst naar wens aanpassen. Deze komt in de body van je website te staan, dus tussen <body> en </body>. Wil je bijvoorbeeld titels aanpassen? Wijzig dan de tekst die tussen <h1> of <h2> en </h1> of </h2> staat. Wil je de tekst onder titels aanpassen, wijzig dan wat tussen <p> en </p> staat.

Placeholder opmaken met CSS

Als je nu je domeinnaam bezoekt, dan zie je jouw placeholder. Die bestaat nu uit alleen tekst en is dus nog erg kaal. Daarom tijd voor wat opmaak!

Je eigengemaakte placeholder zonder CSS-opmaak.

Om de opmaak van de pagina en tekst aan te passen, kun je CSS (Cascading Style Sheets) gebruiken. Daarmee bepaal je bijvoorbeeld wat voor lettertype, pagina-uitlijning en achtergrondkleuren je wilt. Dit kun je binnen het HTML-bestand tussen <style> en </style> invoegen.

Het is vaak netter en overzichtelijker om hiervoor een apart bestand te gebruiken. Je komt bijvoorbeeld vaak het bestand style.css tegen. Mocht je nog een HTML-pagina willen toevoegen, dan kun je hetzelfde CSS-bestand weer koppelen, zodat de opmaak op alle pagina’s overeenkomt.

Als voorbeeld gebruiken we voor de stijlelementen een apart style.css-bestand. Daar verwijzen we de index.html naar. Dat gebeurt via de onderstaande regel die tussen de head-tags <head> en </head> is geplaatst. Als je de eerder genoemde basis hebt gebruikt, dan staat dit al in je index.html.

<link rel="stylesheet" href="style.css">

Een style.css-bestand aanmaken

Maak nu een nieuw bestand aan in je editor. Het is de bedoeling dat je dat bestand met de naam style.css opslaat en het uiteindelijk in dezelfde map zet als waar index.html staat. Plaats de volgende regels in het bestand:

body {
  background-color: AliceBlue;
  margin: 0 15%;
  font-family: sans-serif;
}

h1 {
  text-align: center;
  font-family: serif;
  font-weight: normal;
  text-transform: uppercase;
  border-bottom: 1px solid #57b1dc;
  margin-top: 30px;
}

h2 {
  color: #00008b;
  font-size: 1em;
}

Er worden in dit voorbeeld de elementen body, h1 en h2 gebruikt. Probeer hier eens met de kleurcodes te spelen. Je kunt daarvoor de naam van een kleur (e.g. AliceBlue) of de HEX-code (#f0f8ff) gebruiken.

Een style.css aanmaken in DirectAdmin.

Een afbeelding toevoegen

Om het interessanter te maken, kun je een afbeelding, logo of foto toevoegen. Die zul je eerst naar de /public_html/-map moeten uploaden. Voeg het daarna met de onderstande code op de gewenste plek in de body van de index.html toe. Let op: als je de eerdere basis hebt gebruikt, dan staat dit er al in.

<img src="logo.png" alt="Organisatielogo">

Pas logo.png aan naar de daadwerkelijke bestandsnaam van je afbeelding. Bij alt beschrijf je de afbeelding. Dit is waardevol voor bijvoorbeeld zoekmachines, aangezien die afbeeldingen niet kunnen “lezen”.

Je eigengemaakte placeholder met HTML en CSS.

Heb je tekst en styling naar wens aangepast, dan kan het eindresultaat als bijvoorbeeld bovenstaand zijn! Uiteraard is het volledig aan jou hoever je wilt gaan. Je kunt nu bijvoorbeeld extra’s toevoegen of de alternatieven bekijken.

Extra’s toevoegen

Naast je contactgegevens kun je de website ook wat interactiever maken. Zo kun je bijvoorbeeld een contactformulier aanmaken, waarmee je bezoekers (alvast) contact met je kunnen opnemen.

Een andere leuke feature, indien je een fysiek adres gebruikt, is het toevoegen van een kaart van Google Maps met daarop een marker op jouw locatie. Hiervoor kun je het stappenplan van Google gebruiken.

Als jouw nieuwe website binnenkort live gaat, dan kun je ook een countdown timer op de pagina plaatsen met behulp van JavaScript. Zo weet de bezoeker wanneer hij terug moet komen om de definitieve website te bezoeken.

Alternatieven

Wil je zo min mogelijk code zien en bewerken, dan kun je ook voor een CMS zoals WordPress kiezen. Daar kun je met behulp van een plugin snel een simpele, tijdelijke pagina opzetten. Wees kritisch, want je hebt ruime keuze.

WordPress-plugins om een placeholder mee te maken.

Bestaande templates gebruiken

Online zijn er vele gratis en betaalde templates te vinden die je voor je eigen HTML-pagina kunt gebruiken. Je hoeft dan alleen zelf de content zelf nog naar eigen wens aan te passen. Kies hiervoor, als je geen zin of tijd hebt om je in HTML te verdiepen en je gewoon snel een pagina wilt hebben staan.

Als je een bestaand template downloadt, bijvoorbeeld via HTML5 UP, dan bestaat dat vaak uit meer dan alleen een index.html. Denk aan CSS- en JavaScript-bestanden, afbeeldingen en extra informatie. Voor een simpele pagina met slechts een visitekaartje misschien te uitgebreid, maar het kan je ook helpen om een eigen code zelf verder uit te bouwen.

Tot slot

Wil je graag een website bouwen en zoek je nog een goed onderkomen? Kijk eens naar onze hostingpakketten. Dat geeft je alles voor een succesvolle start! Neem in geval van vragen gerust vrijblijvend contact met ons op.

Bekijk hostingpakketten →

P.S. Wil je op de hoogte blijven van alle artikelen, updates, tips en trucs die verschijnen op ons blog? Dat kan! Via RSS, per e-mail, het liken op Facebook, het +1’en op Google+ of het volgen op Twitter.

Deel Tweet +1 Deel