Menu
Close
Globallement il existe 3 types d'outils pour créer des sites web. Chaque solution présente des caractéristiques qui peuvent s'adapter aux besoins réels du client, du budget et des fonctionalitées demandées.
Réaliser un site web conforme aux objectifs définis au moyens des langages de programmation HTML, CSS etJavascript
[1] Choix des contenus [15% à 25%]
- Choix correspondant aux directives avec des graphiques et images appropriées.
- Choix approprié d’éléments de texte et correspondant aux directives.
- Choix approprié des médias.
[2] Traitement de la proposition de solution [15% à 25%]
- Choix approprié d’une structure du site.
- Choix approprié de la navigation.
- Prise en compte des directives techniques, juridiques et des contenus.
- Choix approprié des formats des médias.
[3] Implémentation de la proposition de solution [20% à 50%]
- Respect d’une structure clair des fichiers du programme.
- Conversion et/ou conditionnement des médias selon les directives et proposition de solution.
- Mise en œuvre pratique des fonctionnalités imposées.
[4] Test du site web [15% à 25%]
- Garantie de la conformité standard du code source (Validation).
- Elaboration des cas de tests.
- Vérification des cas de tests.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page de test</title>
</head>
<body>
<!-- contenu de la page -->
</body>
</html>
!DOCTYPE html — juste présent pour s'assurer que la page puisse fonctionner y compris sur les anciens navigateurs.
html — encadre tout le contenu de la page. Cet élément est parfois appelé l'élément racine.
head - est utilisé comme un container pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché.
body - est celui qui contient tout le contenu que vous souhaitez afficher pour qu'il soit vu par les visiteurs.
meta charset="utf-8" — définit le jeu de caractères qui devrait être utilisé pour le document et indique que c'est utf-8. utf-8 regroupe l'ensemble des caractères connus utilisés dans les différents langages humains.
title - définit le titre de votre page. C'est ce titre qui apparaîtra sur l'onglet lorsque la page sera chargée. Il sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages
<img src="images/firefox-icon.png" alt="Mon image de test">
L'image utilisée est définie via l'attribut src (pour source) qui contient le chemin vers le fichier de l'image.
L'attribut alt (pour alternatif)contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image.
<h1>Mon titre principal</h1>
<h2>Mon titre de section</h2>
<h3>Mon sous-titre</h3>
<h4>Mon sous-sous-titre</h4>
HTML contient des éléments pour 6 niveaux de titres : h1 à h6. La plupart du temps, 3-4 niveaux suffisent amplement.
<p>Voici un paragraphe</p>
Vous pouvez placer votre texte dans un ou plusieurs paragraphes,
<ul>
<li>technologues</li>
<li>chercheurs</li>
<li>bâtisseurs</li>
</ul>
<ol>
<li>technologues</li>
<li>chercheurs</li>
<li>bâtisseurs</li>
</ol>
Les listes non-ordonnées construites avec l'élément ul (ul signifie unordered list)
Les listes ordonnées sont construites avec l'élément ol (ol signifie ordered list)
Chaque élément d'une liste est balisé avec un élément li (list item).
<a href="https://cie.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a>
Pour créer un lien, il suffit d'utiliser l'élément a (le a est un raccourci pour ancre ).
Ne pas oublier la partie avec https:// ou http:// qui représente le protocole utilisé, au début de l'adresse.
Le CSS utilise des règles qui se composent de :
h1, .class, #id).CSS évolue constamment avec l'ajout de nouvelles fonctionnalités :
CSS peut être intégré de trois manières :
style.<style> dans la section <head> du document.styles.css) relié par une balise <link>.<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Bonjour CSS</h1>
</body>
</html>
p {
color: #2a9d8f; /* Couleur du texte */
font-family: Arial, sans-serif; /* Police utilisée */
font-size: 18px; /* Taille du texte */
}
h1 {
text-align: center; /* Centre le texte */
}
p {
text-align: justify; /* Justifie le texte */
}
a {
text-decoration: none; /* Supprime le soulignement des liens */
}
h2 {
text-decoration: underline; /* Souligne le texte */
}
h3 {
text-decoration: line-through; /* Barre le texte */
}
h1 {
text-transform: uppercase; /* Transforme le texte en majuscules */
}
h2 {
text-transform: lowercase; /* Transforme le texte en minuscules */
}
h3 {
text-transform: capitalize; /* Met une majuscule à chaque mot */
}
p {
letter-spacing: 2px; /* Espacement entre les lettres */
word-spacing: 5px; /* Espacement entre les mots */
}
h1 {
font-weight: bold; /* Texte en gras */
}
h2 {
font-weight: lighter; /* Texte plus fin */
}
h3 {
font-style: italic; /* Texte en italique */
}
h1 {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Ombre grise douce */
}
h1 {
background: linear-gradient(90deg, #ff7f50, #1e90ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; /* Nécessaire pour afficher le dégradé */
}
@keyframes clignoter {
0%, 100% {
opacity: 1; /* Visible */
}
50% {
opacity: 0; /* Invisible */
}
}
h2 {
animation: clignoter 1s infinite; /* Applique l'animation au texte */
}
div {
width: 300px; /* Largeur du bloc */
height: 200px; /* Hauteur du bloc */
}
section {
background-color: #f4a261; /* Couleur de fond */
border: 2px solid #264653; /* Bordure pleine */
border-radius: 10px; /* Bordures arrondies */
}
article {
padding: 20px; /* Espacement interne */
margin: 15px; /* Espacement externe */
}
div {
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Ombre douce */
}
div {
background-color: #e9c46a;
transition: background-color 0.3s ease; /* Effet fluide */
}
div:hover {
background-color: #2a9d8f; /* Change la couleur au survol */
}
div {
background-image: url('image.jpg');
background-size: cover; /* Image ajustée pour couvrir le bloc */
background-position: center; /* Centrer l'image */
width: 300px;
height: 200px;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
div {
width: 200px;
height: 100px;
background-color: #e76f51;
animation: slideIn 1s ease-out;
}
img { width: 100%; /* Image prend toute la largeur du conteneur */ height: auto; /* Préserve les proportions */ }
img {
width: 150px;
height: 150px;
border-radius: 50%; /* Rend l'image circulaire */
object-fit: cover; /* Adapte l'image au cercle sans déformation */
}
img {
border: 5px solid #2a9d8f; /* Bordure pleine */
border-radius: 10px; /* Coins arrondis */
}
img {
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Ombre douce */
}
img {
transition: transform 0.3s ease; /* Animation fluide */
}
img:hover {
transform: scale(1.1); /* Agrandit légèrement l'image au survol */
}
div {
background-image: url('image.jpg');
background-size: cover; /* Ajuste l'image pour couvrir tout le conteneur */
background-position: center; /* Centre l'image */
width: 300px;
height: 200px;
}
img {
max-width: 100%; /* Limite la largeur de l'image à celle de son conteneur */
height: auto; /* Maintient les proportions */
}
img {
filter: grayscale(100%); /* Passe l'image en noir et blanc */
}
img:hover {
filter: none; /* Rétablit les couleurs au survol */
}
<div class="image-container">
<img src="image.jpg" alt="Description">
<div class="overlay">Texte sur l'image</div>
</div>
.image-container {
position: relative;
width: 300px;
height: 200px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5); /* Superposition semi-transparente */
color: white; /* Couleur du texte */
font-size: 18px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
img {
width: 150px;
height: 150px;
animation: rotate 5s linear infinite; /* Rotation continue */
}
img {
width: 200px;
height: auto;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%); /* Découpe l'image en forme de triangle */
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
gap: 10px;
}
.container img {
width: 100%;
height: auto;
}
Bootstrap est une plateforme front-end open source développée initialement par Twitter pour faciliter la création rapide et cohérente de sites web et d'applications web. Lancée en 2011, elle fournit un cadre riche en fonctionnalités pour construire des interfaces utilisateur modernes et responsives.
Depuis sa création, Bootstrap a évolué pour répondre aux besoins modernes du développement web, la version actuelle étant Bootstrap 5, qui met davantage l'accent sur la performance et supprime la dépendance à jQuery.
Dans chaque page il faut coller ce code pour activer les fonctions de bootstrap :
Dans la balise <head> :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
Juste avant </body> :
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
Il s'agit du CDN (Content Delivery Network) fourni par jsDelivr
container est utilisée pour centrer le contenu et ajouter des marges latérales.row crée une ligne contenant les colonnes.col-md-4 signifie que chaque colonne occupe 4/12 de la largeur de l'écran sur les appareils de taille moyenne (ou plus grand). Ainsi, 3 colonnes prennent exactement 12/12.p-3 pour ajouter du padding, border pour une bordure, et bg-light pour un fond clair).Vous pouvez ajuster les classes des colonnes (par exemple, col-sm-6, col-lg-3, etc.) pour modifier le comportement selon les tailles d'écran.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire Complet</title>
<!-- Lien vers Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">Formulaire de Contact</h2>
<form>
<!-- Nom -->
<div class="mb-3">
<label for="nom" class="form-label">Nom</label>
<input type="text" class="form-control" id="nom" placeholder="Entrez votre nom">
</div>
<!-- Email -->
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Entrez votre email">
</div>
<!-- Téléphone -->
<div class="mb-3">
<label for="telephone" class="form-label">Téléphone</label>
<input type="tel" class="form-control" id="telephone" placeholder="Entrez votre numéro de téléphone">
</div>
<!-- Mot de passe -->
<div class="mb-3">
<label for="password" class="form-label">Mot de passe</label>
<input type="password" class="form-control" id="password" placeholder="Entrez votre mot de passe">
</div>
<!-- Sélection -->
<div class="mb-3">
<label for="selection" class="form-label">Sujet</label>
<select class="form-select" id="selection">
<option value="">Choisissez un sujet</option>
<option value="support">Support technique</option>
<option value="vente">Demande commerciale</option>
<option value="autre">Autre</option>
</select>
</div>
<!-- Boutons radio -->
<div class="mb-3">
<label class="form-label">Genre</label><br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="genre" id="homme" value="homme">
<label class="form-check-label" for="homme">Homme</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="genre" id="femme" value="femme">
<label class="form-check-label" for="femme">Femme</label>
</div>
</div>
<!-- Cases à cocher -->
<div class="mb-3">
<label class="form-label">Préférences</label><br>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="newsletter">
<label class="form-check-label" for="newsletter">Recevoir la newsletter</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="offres">
<label class="form-check-label" for="offres">Recevoir des offres promotionnelles</label>
</div>
</div>
<!-- Zone de texte -->
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="4" placeholder="Écrivez votre message ici"></textarea>
</div>
<!-- Bouton de soumission -->
<button type="submit" class="btn btn-primary">Envoyer</button>
<button type="reset" class="btn btn-secondary">Réinitialiser</button>
</form>
</div>
<!-- Lien vers Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>