Découverte d’HTML et du CSS
Hearthstone est un jeu de carte en ligne de Blizzard apparu en 2014.
Partie 1
- Réaliser le diagramme de classe correspondant au schéma physique suivant :
https://gitlab.com/cherryclass/hearthstone/blob/master/hearthstone.png - Réaliser une page index.html. On insèrera les liens correspondant aux autres pages réalisées par la suite.
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>wawa</title> </head>
- Réaliser un tableau affichant les différentes raretés disponibles sur index.html.
INSERT INTO `rarity` (`idr`, `libeller`) VALUES (4, 'COMMON'), (5, 'RARE'), (6, 'EPIC'), (7, 'LEGENDARY'), (8, 'FREE');
- Ajouter une vidéo grâce à la balise video avec comme attribut autoplay à cette page.
- 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.
Partie 2
- Réaliser un formulaire qui permet d’enregistrer un nouveau type de rareté formRarity.html. Les champs sont requis.
- Ajouter un champ couleur et un champ date de création à la carte sur votre diagramme.
- Réaliser un formulaire qui permet d’enregistrer une nouvelle carte formCarte.html en fonction des champs de votre diagramme . Le choix de la race se fera grâce à une liste déroulante. Tester l’affichage, notamment de l’input couleur avec différents navigateurs.
- Réaliser une page viewCarte.html qui présente les différents champs d’une carte de votre choix. Ajouter une image grâce à la balise img. Encapsuler cette image grâce à la balise <figure>
<figure> <img src="dragon-feu.jpg" alt="dragon de feu" /> <figcaption>Légende associée</figcaption> </figure>
- Enregistrer les fichiers dont les diagrammes de classes dans un répertoire hearthstone1 sur Gitlab et partager le dépôt avec cherryclass.
Partie 3
- Ajouter un titre h1 au fichier index.html.
- Réaliser un fichier hearthstone.css qui ajoute une couleur à votre balise h1 et inclure celui-ci dans la section head de votre fichier index.html.
- Encadrer le nom de la carte dans viewCarte par les balises span définissant une classe “bleu” puis créer la classe correspondante dans hearthstone.css
- Changer la couleur directement grâce à la console du navigateur
- Grâce au selecteur de balise body, charger des polices de caractères comme gigi puis century si la première n’est pas trouvée grâce à font-family.
- Modifier la taille de la police d’un mot du texte en 18pt et modifier la taille de la police de tout le texte (sauf le mot) grâce à font-size par 10px.
- Changer par 1em et tester.
- Définir une marge en haut de 10% et sur les cotés de 30% grâce à margin en une seule ligne.
- Entourer la description de la carte viewCarte par une balise div. Ajouter une couleur de fond en transparence à cette div grâce à un identifiant (id=).
- Réaliser la liste des factions (neutre, horde, alliance) grâce aux balises ul et li
- Faire en sorte que la liste n’apparaisse qu’au passage de la souris.
- Permettre à l’image de la carte sur viewCarte d’être zoomée au passage de la souris.
Partie 4
- Changer d’image pour les définitions supérieurs à 1024px. Tester en changeant la taille de la fenêtre.
- Ajouter le cdn de Bootstrap à votre page formLogin.html.
- Réaliser un formulaire de connexion avec login, mot de passe, email et validation dans formLogin.html en ajoutant les classes de Bootstrap . On respectera l’input type correspondant. Autofocus dans le champ email.
<form method="get" action="zaza.php"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
Partie 5
- Enregistrer les fichiers sur Gitlab dans un répertoire hearthstone1 et partager avec cherryclass.
- Déployer votre application en ligne (hors localhost).