100% ont trouvé ce document utile (1 vote)
212 vues4 pages

Mini-Projet HTML/CSS Complet

Le document présente le code HTML de plusieurs pages d'un mini-projet, incluant un formulaire d'inscription, une page de connexion, une page pour ajouter un équipement et une liste d'utilisateurs. Chaque page est structurée avec des éléments de formulaire requis et des liens de navigation entre elles. Le style est géré par une feuille de style CSS externe.

Transféré par

eliamuzailas
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
100% ont trouvé ce document utile (1 vote)
212 vues4 pages

Mini-Projet HTML/CSS Complet

Le document présente le code HTML de plusieurs pages d'un mini-projet, incluant un formulaire d'inscription, une page de connexion, une page pour ajouter un équipement et une liste d'utilisateurs. Chaque page est structurée avec des éléments de formulaire requis et des liens de navigation entre elles. Le style est géré par une feuille de style CSS externe.

Transféré par

eliamuzailas
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

Code Complet du Mini-Projet

HTML/CSS
[Link]

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inscription</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Formulaire d'inscription</h1>
<form>
<label>Nom complet :</label>
<input type="text" required>
<label>Adresse mail :</label>
<input type="email" required>
<label>Numéro de téléphone :</label>
<input type="tel" required>
<label>Genre :</label>
<select required>
<option>Homme</option>
<option>Femme</option>
</select>
<label>État civil :</label>
<select required>
<option>Célibataire</option>
<option>Marié(e)</option>
<option>Divorcé(e)</option>
<option>Religieux(se)</option>
</select>
<label>Adresse de résidence :</label>
<input type="text" required>
<button type="submit">S'INSCRIRE</button>
</form>
<a href="[Link]">Déjà inscrit ? Connectez-vous</a>
</div>
</body>
</html>

[Link]

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Connexion</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Connexion</h1>
<form>
<label>Adresse mail :</label>
<input type="email" required>
<label>Mot de passe :</label>
<input type="password" required>
<button type="submit">SE CONNECTER</button>
</form>
<a href="[Link]">Pas encore inscrit ? Inscrivez-vous</a>
</div>
</body>
</html>

[Link]

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Équipement</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Ajouter un équipement</h1>
<form>
<label>Nom de l'équipement :</label>
<input type="text" required>
<label>Type :</label>
<select required>
<option>Routeur</option>
<option>Switch</option>
<option>Firewall</option>
<option>Serveur</option>
</select>
<button type="submit">AJOUTER</button>
</form>
</div>
</body>
</html>

[Link]

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utilisateurs</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Liste des utilisateurs</h1>
<table>
<thead>
<tr>
<th>N°</th>
<th>Nom de l'utilisateur</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jean Mukendi</td>
<td><button>AFFECTER</button></td>
</tr>
<tr>
<td>2</td>
<td>Amina Kalenga</td>
<td><button>AFFECTER</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Vous aimerez peut-être aussi