Comment faire un site web
Apprenez à créer un site Web réactif qui fonctionnera sur tous les appareils, PC, ordinateur portable, tablette et téléphone.
Créer un site Web à partir de zéro
Un « brouillon de mise en page »
Il peut être judicieux de dessiner un brouillon de mise en page du design de la page avant de créer un site Web :
Barre de navigation
Contenu annexe
Du texte du texte..
Contenu principal
Du texte du texte..
Du texte du texte..
Du texte du texte..
Bas de page
Première étape - Page HTML de base
HTML est le langage de balisage standard pour la création de sites Web et CSS est le langage qui décrit le style d'un document HTML. Nous combinerons HTML et CSS pour créer une page Web de base.
Remarque : Si vous ne connaissez pas HTML et CSS, nous vous suggérons de commencer par lire notre Tutoriel HTML .
Exemple
<!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>
Exemple expliqué
- La
<!DOCTYPE html>déclaration définit ce document comme étant HTML5 - L'
<html>élément est l'élément racine d'une page HTML - L'
<head>élément contient des méta-informations sur le document - L'
<title>élément spécifie un titre pour le document - L'
<meta>élément doit définir le jeu de caractères comme étant UTF-8 - L'
<meta>élément avec name="viewport" donne au site une belle apparence sur tous les appareils et toutes les résolutions d'écran - L'
<style>élément contient les styles du site Web (mise en page/design) - L'
<body>élément contient le contenu visible de la page - L'
<h1>élément définit un grand titre - L'
<p>élément définit un paragraphe
Création de contenu de page
À l'intérieur de l' <body>élément de notre site Web, nous utiliserons notre "Brouillon de mise en page" et créerons :
- Un en-tête
- Une barre de navigation
- Contenu principal
- Contenu annexe
- Un pied de page
Entête
Un en-tête est généralement situé en haut du site Web (ou juste en dessous d'un menu de navigation supérieur). Il contient souvent un logo ou le nom du site :
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
Ensuite, nous utilisons CSS pour styliser l'en-tête :
.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;
}
Barre de navigation
Une barre de navigation contient une liste de liens pour aider les visiteurs à naviguer sur votre site Web :
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Utilisez CSS pour styliser la barre de navigation :
/* 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 */
}
Contenu
Créez une mise en page à 2 colonnes, divisée en un "contenu secondaire" et un "contenu principal".
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Nous utilisons CSS Flexbox pour gérer la mise en page :
/* 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 */
}
Ajoutez ensuite des requêtes multimédias pour rendre la mise en page réactive. Cela garantira que votre site Web s'affiche bien sur tous les appareils (ordinateurs de bureau, ordinateurs portables, tablettes et téléphones). Redimensionnez la fenêtre du navigateur pour voir le résultat.
/* 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%;
}
}
Conseil : pour créer un autre type de mise en page, modifiez simplement la largeur flexible (mais assurez-vous qu'elle correspond à 100 %).
Conseil : Vous vous demandez comment fonctionne la règle @media ? En savoir plus à ce sujet dans notre chapitre CSS Media Queries .
Conseil : Pour en savoir plus sur le module de mise en page de la boîte flexible, lisez notre chapitre CSS Flexbox .
Qu'est-ce que le box-sizing ?
Vous pouvez facilement créer trois boîtes flottantes côte à côte. Cependant, lorsque vous ajoutez quelque chose qui agrandit la largeur de chaque boîte (par exemple, un rembourrage ou des bordures), la boîte se cassera. La box-sizingpropriété nous permet d'inclure le rembourrage et la bordure dans la largeur totale (et la hauteur) de la boîte, en s'assurant que le rembourrage reste à l'intérieur de la boîte et qu'il ne se casse pas.
Vous pouvez en savoir plus sur la propriété box-sizing dans notre didacticiel CSS Box Sizing .
Bas de page
Enfin, nous ajouterons un pied de page.
<div class="footer">
<h2>Footer</h2>
</div>
Et stylisez-le :
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Toutes nos félicitations! Vous avez créé un site Web réactif à partir de zéro.
Espaces W3Schools
Si vous souhaitez créer votre propre site Web et héberger vos fichiers .html, essayez notre créateur de site Web gratuit , appelé W3schools Spaces :
