Créé en 2018 et modifié le 17 Dec 2019

Créé en 2018 et modifié le 17 Dec 2019

Découverte d’HTML et du CSS

Hearthstone  est un jeu de carte en ligne de Blizzard apparu en 2014.

Partie 1

<!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).