Partie 2 : Implémenter une page web statique

Partie 2 : Implémenter une page web statique**

Ce guide couvre l'intégralité des concepts, syntaxes, attributs et exemples de la Partie 2. Il est conçu pour une préparation d'examen rigoureuse, sans omission des détails techniques.

1. Concepts & Définitions

Page web statique : Une page dont le contenu est envoyé par le serveur HTTP tel quel (sous forme de balises HTML) et interprété par le navigateur pour affichage. Le contenu ne change pas dynamiquement en fonction de l'utilisateur.
Responsive Web Design : Consiste à utiliser HTML et CSS pour redimensionner, masquer, rétrécir ou agrandir automatiquement un site Web afin de le rendre compatible à tous les appareils (ordinateurs de bureau, tablettes et téléphones).
Formulaire : Une section d'un document web qui permet à un utilisateur de fournir des informations via des contrôles interactifs.
Méthode GET : Méthode d'envoi de données de formulaire qui permet d'envoyer les données sous forme de chaîne de paramètres à travers l'URL. Les données sont visibles dans la barre d'adresse.
Méthode POST : Méthode d'envoi de données de formulaire qui permet d'envoyer les données (invisibles) à travers une requête HTTP.
Validation côté client : Validation effectuée au niveau du navigateur, avant de soumettre les données au serveur. Elle peut être mise en œuvre via JavaScript ou les fonctions intégrées dans HTML5.
Validation côté serveur : Validation opérée sur le serveur, après soumission des données et avant leur enregistrement.

2. Syntaxes & Codes

Structure de base d'un formulaire :

<form action="[URL de traitement]" method="[get|post]">
  <!-- Éléments du formulaire (input, label, textarea, etc.) -->
</form>

Structure d'un champ de saisie :

<label for="[id_input]">Texte du label</label>
<input type="[type_valeur]" id="[id_input]" name="[nom_champ]">

Structure d'une zone de texte multiligne :
```
<textarea>Contenu initial</textarea>
```

Structure d'une liste de sélection :

<select name="[nom_champ]" id="[id_select]">
  <option value="[valeur_option]">Texte de l'option</option>
</select>

Structure pour images réactives :

<picture>
  <source srcset="[URL_image]" media="[media_query]">
  <img src="[URL_image_defaut]" alt="[texte_alternatif]">
</picture>

Structure pour une liste de données (autocomplétion) :

<input list="[id_datalist]">
<datalist id="[id_datalist]">
  <option value="[valeur_suggerée]">
</datalist>

3. Attributs & Propriétés

Balise `<form>`

action : Spécifie la ressource (URL) qui va recevoir et traiter les données du formulaire.
method : Spécifie la méthode d'envoi des données.
- get : Les données sont visibles dans l'URL.
- post : Les données sont envoyées dans le corps de la requête HTTP (invisibles).
novalidate : Attribut booléen qui, lorsqu'il est présent, spécifie que les données du formulaire ne doivent pas être validées lors de son envoi.

Balise `<input>`

type : Définit le type de champ de saisie. Valeurs possibles :
- text : Champ de texte sur une seule ligne.
- password : Champ de mot de passe (caractères masqués).
- button : Bouton cliquable (souvent utilisé avec JavaScript).
- checkbox : Case à cocher (sélection multiple possible).
- color : Sélecteur de couleur.
- date : Sélecteur de date (jour, mois, année).
- datetime-local : Sélecteur de date et d'heure sans fuseau horaire.
- email : Champ pour une adresse e-mail (validation de format).
- file : Champ de sélection de fichier avec un bouton "Parcourir".
- hidden : Champ de données non visible par l'utilisateur.
- image : Bouton de soumission sous forme d'image.
- month : Sélecteur de mois et d'année.
- number : Champ pour une valeur numérique.
- radio : Bouton radio (une seule sélection possible dans un groupe de même name).
- range : Curseur pour sélectionner une valeur dans un intervalle.
- reset : Bouton qui réinitialise toutes les valeurs du formulaire.
- search : Champ de recherche.
- submit : Bouton qui soumet le formulaire.
- tel : Champ pour un numéro de téléphone.
- time : Sélecteur d'heure.
- url : Champ pour une URL (validation de format).
- week : Sélecteur de semaine et d'année.
id : Identifiant unique pour l'élément, utilisé par les balises <label>.
name : Nom du champ, envoyé avec la valeur lors de la soumission du formulaire.
value : Spécifie la valeur initiale du champ.
readonly : Attribut booléen qui spécifie qu'un champ est en lecture seule.
maxlength : Spécifie le nombre maximum de caractères autorisés.
multiple : Attribut booléen qui autorise la saisie de plusieurs valeurs (pour type="email" et type="file").
pattern : Spécifie une expression régulière pour valider la valeur du champ.
placeholder : Fournit un indice (texte d'exemple) qui disparaît lorsque l'utilisateur commence à saisir.
required : Attribut booléen qui rend le champ obligatoire.
step : Spécifie les intervalles de numéros légaux pour les champs numériques.
autofocus : Attribut booléen qui donne automatiquement le focus au champ lors du chargement de la page.
list : Fait référence à l' id d'un élément <datalist> pour fournir des options d'autocomplétion.
min / max : Spécifie les valeurs minimale et maximale pour les champs numériques ou de date.
onclick : Attribut d'événement pour exécuter un script (ex: alert(...)).

Balise `<select>`

id : Identifiant unique pour la liste.
name : Nom du point de données associé.
multiple : Attribut booléen qui permet de sélectionner plusieurs options.
size : Spécifie combien d'options doivent être visibles à la fois.

Balise `<option>`

value : La valeur qui sera envoyée au serveur si cette option est sélectionnée.
selected : Attribut booléen qui rend l'option sélectionnée par défaut.

4. Exemples Pratiques (Codes complets du PDF)

Afficher différentes images en fonction de la largeur du navigateur :

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>
<!-- NB : n’oubliez pas de mettre la balise suivante dans la balise <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Taille du texte réactif :

<h1 style="font-size: 10vw">Hello World</h1>

Formulaire de base avec méthode POST :

<form action="authentification.php" method="post">
  <!-- Ici on insère les éléments du formulaire-->
</form>

Champs text et password avec <label> :

<!-- Type texte -->
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

<!-- Type password -->
<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

Champ textarea :

<textarea>L'Office de la formation professionnelle et de la promotion du travail (OFPPT) est un opérateur public en formation professionnelle.</textarea>

Boutons radio et champ number :

<!-- Type radio -->
<form>
  <input type="radio" id="male" name="sexe" value="Masculin">
  <label for="male">Masculin</label><br>
  <input type="radio" id="female" name="sexe" value="Féminin">
  <label for="female">Féminin</label><br>
</form>

<!-- Type number -->
<form>
  <label for="quantité">Quantité :</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>

Cases à cocher checkbox :

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> J'ai un vélo</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2">J'ai une voiture</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> J'ai un bateau</label>
</form>

Liste de sélection select :

<label for="langage">Sélectionner un langage de programmation:</label>
<select name="lg" id="langage">
  <option value="">--Choisir --</option>
  <option value="Python">Python</option>
  <option value="CSharp">C#</option>
  <option value="java">java</option>
</select>

Attribut pattern pour un numéro de téléphone :

<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Attribut required :

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

Boutons submit et reset :

<!-- Bouton Submit -->
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br>
  <br>
  <input type="submit" value="Submit">
</form>

<!-- Bouton Reset -->
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br>
  <br>
  <input type="submit" value="Submit">
  <input type="reset" value="Réinitialiser">
</form>

5. Spécifications Techniques

Cinq façons de créer des dispositions d'éléments :
1. Tableaux HTML (non recommandé)
2. Propriété float CSS (méthode ancienne)
3. Flexbox CSS
4. Framework CSS (W3.CSS ou Bootstrap)
5. Grille CSS
Validation HTML5 intégrée :
1. required : Rend une entrée obligatoire.
2. pattern : Valide selon une expression régulière.
3. minlength et maxlength : Limite la taille des entrées textuelles.
4. min et max : Limite la valeur pour les champs numériques.
Fonctionnement de GET vs POST : GET ajoute les paires nom=valeur à l'URL, ce qui est non sécurisé pour les données sensibles et a une limite de longueur. POST envoie les données dans le corps de la requête HTTP, ce qui est plus sécurisé et n'a pas de limite de taille.
Unité vw : "largeur de la fenêtre" (viewport width). 10vw signifie 10% de la largeur de la fenêtre du navigateur.

6. Points Critiques

Recommandations de méthode : Le document déconseille l'utilisation des tableaux HTML pour la mise en page et qualifie la méthode float d'ancienne.
Balise <meta name="viewport"> : Cette balise est indispensable dans le <head> pour que le Responsive Web Design fonctionne correctement sur les appareils mobiles.
Groupement des boutons radio : Pour que les boutons radio fonctionnent comme un groupe où un seul choix est possible, ils doivent tous partager le même attribut name.
Désactivation de la validation : L'attribut novalidate sur la balise <form> désactive toute la validation HTML5 intégrée pour ce formulaire.
Liaison <label> et <input> : L'attribut for de la balise <label> doit correspondre à l'attribut id de la balise <input> pour les lier sémantiquement et améliorer l'accessibilité.

🔗 Navigation