Web - Travaux Pratiques 1

Size: px

Start display at page:

Download "Web - Travaux Pratiques 1"

Gordon Lane
8 years ago
Views:

1 Web - Travaux Pratiques 1 Pour rappel, le squelette d une page HTML5 est la suivante : Syntaxe <html lang="fr"> <meta charset="utf-8"/> <title>... </title> <body>... Une fois qu une page est terminée, il est nécessaire de vérifier si elle est valide en utilisant le validateur W3C sur : Par ailleurs, les sites qui peuvent vous être utiles sont : alsacreations at (site français) W3School at 1 Exercice Pour commencer en douceur, analysez et testez le code suivant : Syntaxe <html lang="en"> <meta charset="utf-8"> <title>html5 Feature Detection</title> <script src="modernizr-latest.js"></script> 1

<body> <p>the verdict is... <span id="result"></span></p> <script> var result = document.getelementbyid("result"); if (Modernizr.draganddrop) result.innerhtml = "drag-and-drop supported.

2 <body> <p>the verdict is... <span id="result"></span></p> <script> var result = document.getelementbyid("result"); if (Modernizr.draganddrop) result.innerhtml = "drag-and-drop supported."; else result.innerhtml = "drag-and-drop not supported."; </script> 2 Exercice On souhaite écrire le code pour le formulaire suivant : Au niveau HTML, on utilisera des <fieldset> avec <legend>, des <label> et des <input> HTML5 chaque fois que possible. Au niveau CSS, on utilisera la valeur inline-block pour la propriété display des <label>, et les <input> et <textarea> qui sont required et invalid auront une couleur de fond jaune pale. 2

3 Au niveau JavaScript, on contrôlera (avec modernizr) la validité des données lors d un onsubmit pour les navigateurs qui ne reconnaissent pas la propriété required. On contrôlera également qu au moins 20 caractères ont été tapées dans le <textarea> en utilisant la fonction JavaScript setcustomvalidity. Solution: zoo.html <html lang="en"> <meta charset="utf-8"> <title>zookeeper Form</title> <link href="zoo.css" rel="stylesheet"> <script src="modernizr-latest.js"></script> <body> <h1>zoo Keeper Application Form</h1> <form id="zookeeperform" action="#" > <p><i>please complete the form. Mandatory fields are marked with </i><em>*</em></p> <fieldset> <legend>contact Details</legend> <label for="name">name <em>*</em></label> <input id="name" placeholder="jane Smith" autofocus required><br> <label for="telephone">telephone</label> <input id="telephone" placeholder="(xxx) xxx-xxxx"><br> <label for=" "> <em>*</em></label> <input id=" " type=" " required><br> </fieldset> <fieldset> <legend>personal Information</legend> <label for="birthdate">birth Date<em>*</em></label> <input id="birthdate" type="date" required><br> <label for="age">age<em>*</em></label> <input id="age" type="number" min="0" max="120" step="1" required><br> <label for="gender">gender</label> <select id="gender"> <option value="female">female</option> <option value="male">male</option> </select><br> <label for="comments">when did you first know you wanted to be a zoo-keeper?<em>*</em>< /label> <textarea id="comments" required></textarea> </fieldset> <fieldset> <legend>pick Your Favorite Animals</legend> <label for="zebra"><input id="zebra" type="checkbox"> Zebra</label> <label for="cat"><input id="cat" type="checkbox"> Cat</label> <label for="anaconda"><input id="anaconda" type="checkbox"> Anaconda</label> <label for="human"><input id="human" type="checkbox"> Human</label> <label for="elephant"><input id="elephant" type="checkbox"> Elephant</label> <label for="mouse"><input id="mouse" type="checkbox"> Mouse</label> <label for="pigeon"><input id="pigeon" type="checkbox"> Pigeon</label> <label for="crab"><input id="crab" type="checkbox"> Crab</label> </fieldset> <p><input type="submit" value="submit Application"></p> </form> <script src="zoo.js"></script> Solution: zoo.js var form = document.getelementbyid("zookeeperform"); form.onsubmit=validateform; var area = document.getelementbyid("comments"); area.oninput=validatecomments; function validatecomments() { 3

4 if (area.value.length < 20) area.setcustomvalidity("commentaire trop court."); else area.setcustomvalidity(""); function validateform() { if (!Modernizr.input.required) { var inputelements = form.elements; for(var i = 0; i < inputelements.length; i++) { if (inputelements[i].hasattribute("required")) { if (inputelements[i].value == "") { alert("custom required-field validation failed. The form won t be submitted."); return false; return true; Solution: zoo.css body { max-width: 530px; margin: 0 auto; fieldset { margin-bottom: 1.5rem; padding: 1,5rem; legend { font-weight: bold; font-variant: small-caps; label { width:30%; min-width: 100px; max-width: 200px; display: inline-block; vertical-align: top; em { font-weight: bold; font-style: normal; color: red; input:focus { background: #eaeaea; input, textarea, select { width: 65%; max-width: 300px; margin: 0.5rem; textarea { height: 100px; input[type=checkbox] { width: 1rem; 4

input[type=submit] { width: 15rem; padding: 1rem; textarea:required:invalid, input:required:invalid { background-color: lightyellow; 3 Exercice 1. Ecrire le code pour la page suivante : 2.

5 input[type=submit] { width: 15rem; padding: 1rem; textarea:required:invalid, input:required:invalid { background-color: lightyellow; 3 Exercice 1. Ecrire le code pour la page suivante : 2. Intégrer des informations Microdata pour les types suivants : http ://schema.org/person http ://schema.org/organization http ://schema.org/postaladdress 3. Vérifier sur Solution: microdata.html <html lang="en"> <meta charset="utf-8"> <title>a propos de Tux</title> <style> body { margin-left: 25px; margin-right: 25px; </style> <body> <h1>about Me</h1> <div itemscope itemtype=" <img itemprop="image" src="figures/penguin.jpeg" alt="photo de Tux"> <p> Ce website est le travail de <b itemprop="name">tux the Penguin</b>. Ses amis le nomment aussi <b itemprop="additionalname">tuxy</b>. <span itemprop="jobtitle" style="display:none">mascotte Linux</span> </p> 5

6 <div itemprop="affiliation" itemscope itemtype=" Vous pouvez le contacter à <span itemprop="name">la compagnie Linuxienne</span> <ul> <li> tel : <span itemprop="telephone"> </span> (et demander après Tux) </li> <li> <span itemprop=" ">tux at linux.com</span> </li> </ul> </div> <p>ou alors, visitez Tux sur son lieu de travail : </p> <address itemprop="address" itemscope itemtype=" <span itemprop="streetaddress">3, rue de Paris</span><br> <span itemprop="addresslocality">lille</span>, <span itemprop="postalcode">59000</span><br> <span itemprop="addresscountry">france</span><br> </address> <a itemprop="url" href=" </div> 6

CSS : petits compléments

CSS : petits compléments Université Lille 1 Technologies du Web CSS : les sélecteurs 1 au programme... 1 ::before et ::after 2 compteurs 3 media queries 4 transformations et transitions Université Lille