Hoe - Een website maken
Leer hoe u een responsieve website maakt die werkt op alle apparaten, pc, laptop, tablet en telefoon.
Maak een website vanuit het niets
Een "lay-outconcept"
Het kan verstandig zijn om een lay-outontwerp van het pagina-ontwerp te tekenen voordat u een website maakt:
Navigatiebalk
Zij-inhoud
Wat tekst wat tekst..
Belangrijkste inhoud
Wat tekst wat tekst..
Wat tekst wat tekst..
Wat tekst wat tekst..
voettekst
Eerste stap - Basis HTML-pagina
HTML is de standaard opmaaktaal voor het maken van websites en CSS is de taal die de stijl van een HTML-document beschrijft. We zullen HTML en CSS combineren om een eenvoudige webpagina te maken.
Opmerking: als u HTML en CSS niet kent, raden we u aan om eerst onze HTML-zelfstudie te lezen .
Voorbeeld
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
Voorbeeld uitgelegd
- De
<!DOCTYPE html>verklaring definieert dit document als HTML5 - Het
<html>element is het hoofdelement van een HTML-pagina - Het
<head>element bevat meta-informatie over het document - Het
<title>element specificeert een titel voor het document - Het
<meta>element moet de tekenset definiëren als UTF-8 - Het
<meta>element met name="viewport" zorgt ervoor dat de website er goed uitziet op alle apparaten en schermresoluties - Het
<style>element bevat de stijlen voor de website (layout/design) - Het
<body>element bevat de zichtbare pagina-inhoud - Het
<h1>element definieert een grote kop - Het
<p>element definieert een alinea
Pagina-inhoud maken
Binnen het <body>element van onze website zullen we onze "Layout Draft" gebruiken en creëren:
- een kop
- Een navigatiebalk
- Belangrijkste inhoud
- Zij-inhoud
- een voettekst
koptekst
Een koptekst bevindt zich meestal bovenaan de website (of rechts onder een navigatiemenu bovenaan). Het bevat vaak een logo of de naam van de website:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
Vervolgens gebruiken we CSS om de koptekst op te maken:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
Navigatiebalk
Een navigatiebalk bevat een lijst met links waarmee bezoekers door uw website kunnen navigeren:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Gebruik CSS om de navigatiebalk op te maken:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
Inhoud
Maak een lay-out met 2 kolommen, opgedeeld in een "zijinhoud" en een "hoofdinhoud".
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Voor de opmaak gebruiken we CSS Flexbox:
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
Voeg vervolgens mediaquery's toe om de lay-out responsief te maken. Dit zorgt ervoor dat uw website er goed uitziet op alle apparaten (desktops, laptops, tablets en telefoons). Verklein het browservenster om het resultaat te zien.
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Tip: Als u een ander soort lay-out wilt maken, wijzigt u gewoon de flexbreedte (maar zorg ervoor dat deze optelt tot 100%).
Tip: Vraag je je af hoe de @media-regel werkt? Lees er meer over in ons hoofdstuk CSS Media Queries .
Tip: Lees ons CSS Flexbox-hoofdstuk voor meer informatie over de Flexible Box Layout Module .
Wat is box-sizing?
U kunt eenvoudig drie zwevende dozen naast elkaar maken. Als u echter iets toevoegt dat de breedte van elk vak vergroot (bijvoorbeeld opvulling of randen), zal het vak breken. De box-sizingeigenschap stelt ons in staat om de opvulling en rand in de totale breedte (en hoogte) van de doos op te nemen, om ervoor te zorgen dat de opvulling in de doos blijft en niet breekt.
U kunt meer lezen over de eigenschap box-sizing in onze CSS Box Sizing Tutorial .
voettekst
Als laatste voegen we een footer toe.
<div class="footer">
<h2>Footer</h2>
</div>
En style het:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Gefeliciteerd! Je hebt vanaf het begin een responsive website gebouwd.
W3Schools-ruimten
Als je je eigen website wilt maken en je .html-bestanden wilt hosten, probeer dan onze gratis websitebouwer , genaamd W3schools Spaces :
