Tutoriels
Comment faire un site dynamique en html
Pour débuter ce tutoriel, je vous accompagnerai à travers les étapes de création d’un document HTML en utilisant Notepad++. Suivez attentivement ces quelques instructions.
Premier pas dans la conception d’un site web / création du document HTML
ouvrir l’application Notepad++ puis ouvrir une nouvelle feuille
- appuyer sur fichier > enregistrer sous…
- nommer le fichier « index » et sélectionner comme type de ficher « Hyper Text Markup Language file »
Associer un fichier CSS au document HTML
Le CSS est un langage utilisé pour définir la présentation visuelle des documents HTML. Il permet de contrôler la mise en page, le style visuel, etc.. sur les sites web. Le CSS est un moyen avancé pour personnaliser l’apparence des pages des sites web.
Pour la création du fichier CSS seulement quelques étapes sont nécessaires :
- ouvrir l’application Notepad++ puis ouvrir une nouvelle feuille
- appuyer sur fichier > enregistrer sous…
- nommer le fichier avec à la fin un
.css( exemple : fraise.css, pomme.css, etc.. ) - taper dans le fichier index le morceau de code suivant sur la 4EME IMAGE
Dans mon cas, j’ai nommé mon fichier CSS « fraise ». Vous devez donc simplement le remplacer par le nom que vous avez choisi au préalable.
Si vous souhaitez également ajouter un fichier JavaScript, il vous suffit simplement de répéter les mêmes étapes, mais en remplaçant le .css par .js.
Après la finalisation de la création de tous vos documents, vous pouvez ainsi explorer un monde de possibilités créatives. Votre document HTML définit la structure de votre site, tandis que le fichier CSS donne vie à votre créativité. Ensemble, ils forment la base d’une expérience web unique. Par la suite, je vais vous présenter plusieurs possibilités de personnaliser votre site web.
Une barre de navigation
La barre de navigation d’un site web, également appelée menu, joue un rôle essentiel pour faciliter la navigation pour les utilisateurs. Elle offre une structure organisée, permettant un accès rapide aux différentes sections du site. En fournissant des liens vers des pages clés telles que l’accueil, les informations à propos du site et les contacts.
Je vais vous proposer un exemple simple et efficace pour votre barre de navigation, avec la possibilité de la personnaliser selon vos préférences, notamment grâce à la feuille de style CSS.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>La Photographie</title>
<link rel="stylesheet" type="text/css" href="css/fraise.css">
</head>
<body>
<div class="menu">
<div class="logo"><h1>LA PHOTOGRAPHIE</h1></div>
<ul>
<li><a href="a">HOME</a></li>
<li><a href="a">HISTOIRE</a></li>
<li><a href="a">APPROVISIONNEMENT</a></li>
<li><a href="a">AUTRES</a></li>
</ul>
</body>
</html>CSS :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
list-style: none;
}
body {
background-color: #656565;
color: #000;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
}
.menu a{
color: #000;
}
.menu ul{
position: absolute;
padding: 50px;
display: flex;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
font-weight: 600;
}
a:hover{
border: 2px solid black;
border-radius: 50px;
padding: 5px;
}
Donc, ceci n’est qu’un exemple parmi d’autres, et il est facilement modifiable selon ses préférences. Pour lier les différents boutons aux pages respectives, il suffira simplement de remplacer les a entre les guillemets par le lien vers l’autre document ou son nom.
Faire apparaître un texte
Voici un exemple amélioré vous permettant d’afficher un texte avec un effet spécial en utilisant le document HTML associé à une feuille de style CSS. Cela donnera vie à votre texte et animera votre page web.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>La Photographie</title>
<link rel="stylesheet" type="text/css" href="css/fraise.css">
</head>
<body>
<div class="container">
<div class="texte">
Exemple 123
</div>
</div>
</body>
</html>CSS :
.container {
height: 100vh;
}
.texte {
width: 22ch;
animation: typing 2s steps(10);
white-space: nowrap;
overflow: hidden;
border-right: 1px solid;
font-size: 5em;
}
@keyframes typing {
from {
width: 0
}
}
La partie steps(10) dans la feuille de style CSS devra probablement être modifiée en fonction du nombre de caractères que comporte votre texte. Il faut remplacer le 10 par le nombre souhaité.
Étudiante en spécialité NSI en classe de 1ère au lycée Louis Pasteur
