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