Exercice 1 :
Réaliser une page index.html qui contient un lien hypertexte vers une page nommée enregistrementClient.html. On insèrera les liens correspondant aux autres pages réalisés par la suite.
Ce code permet d’obtenir un encodage correct et initialise le titre.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="wawa"> <meta name="author" content="wawa"> <title>wawa</title> </head>
Exercice 2 :
Réaliser une page qui affiche sous forme de tableau à deux colonnes une liste de 5 produits avec leurs prix.
Exercice 3 :
Réaliser un formulaire qui permette d’enregistrer un client.
On doit avoir :
- un login
- un mot de passe
- une balise fieldset et legend « Information personnelle » pour compléter votre formulaire
- un email avec la balise email
- une adresse URL ave la balise url de son site web par exemple
- des boutons radio pour savoir s’il veut recevoir les newletters sous forme de liste (balise li)
- des placeholder aux balises input.
- des required dans les balises input pour le nom et le prenom.
- le champ autofocus dans la balise input de l’email.
Exercice 4 :
Réaliser un formulaire de commande de produit de votre choix :
- Réaliser le titre et les cadres grâce à fieldset et legend.
- Ajouter un champ datalist avec 3 produits.
- Un champ de type number avec un min et un max pour le nombre souhaité
- Modifier votre champ number par un champ de type range
Pour afficher la valeur il faut ajouter du JavaScript dans la section <head>
<script> function showValue(newValue){ document.getElementById("range").innerHTML=newValue ;} </script>
- Dans le champs input du range, ajouter
onchange="showValue(value)"><span id="range"></span>
- Ajouter un champ pour que l’utilisateur choisisse la date d’envoi de sa commande. On utilisera la balise de type date.
- Réaliser un champ qui permette de choisir la couleur du produit sélectionné grâce à la balise color.
Exercice 5 :
Réaliser une page de description d’un produit.
- Cette page doit contenir un texte d’au moins une demi-page.
Se rendre sur le site https://fr.lipsum.com/ par exemple pour le texte
- Ajouter une balise header contenant un id. Cet header devra contenir un titre et une image représentant le logo de l’entreprise.
- Ajouter une image au milieu de votre texte grâce à la balise img. Encapsuler le dans la balise <figure> puis ajouter
<figure> … <figcaption> legende de l’image</figcaption> </figure>
- Ajouter un pied de page grâce à la balise footer.
- Ajouter une section aside contenant de la publicité.
Exercice 6 :
Réaliser une page présentation de l’entreprise.
- Ajouter une video grâce à la balise video avec comme attribut autoplay.
- Supprimer autoplay, mettre controls et ajouter l’attribut poster=’tata.jpg’ choisir son image.
- Lancer la page. Pour ajuster la taille de la video, ajouter width=’320’ height=’180’ dans la balise video.
- Utiliser loop pour une lecture en boucle.
- Ajouter un fichier audio grâce à la balise audio.