html-css Archives - frebourg.es

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 […]

mission HTML5

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 […]

En PHP

Rechercher le mot piano dans la phrase « j’adore le piano »
Modifier le mot piano pour le mettre en majuscule.
Tester si la première lettre de « j’adore la programmation » est une voyelle grâce à une expression comportant une classe de caractère.
Tester si le dernier mot correspond à programmation.
Tester si la phrase « youhou :) » contient « :) »
Vérifier si une adresse mail correspond au domaine sio.fr
Remplacer le mot Lili par Lulu.

En HTML

Vérifier qu’un champ input ne contienne que les mots home, tome, gomme.

En JS

Proposer à l’utilisateur de rentrer son nom via JS, tester si le nom ne contient que des lettres. On acceptera les minuscules et majuscules. Insérer la valeur dans un champ input dans votre page HTML.

En CSS

Ajouter à votre page HTML 3 phrases. Chaque phrase est entourée par une balise span possédant un id. On mettra comme id toto, tata puis lili.
Réaliser un code CSS qui ne sélectionne que les deux premiers div grâce à une expression et définit une couleur de fond à bleu.

Sous le SGBDR MySQL

Rechercher les noms des clients qui commencent par d et finissent par e.
Rechercher […]

mission CSS3

Etape 1 : sélecteur de balise HTML

Dans un fichier HTML, écrire un texte entouré de la balise h1.

Réaliser une page CSS qui modifie votre balise h1 de la forme maBaliseHTML{} pour la mettre en vert .

Inclure le fichier CSS dans la section head de votre fichier HTML

Etape 2 : classe CSS et élément <span>

Dans un paragraphe, encadrer un mot par les balises span définissant une classe « bleu » puis créer une classe CSS bleu qui définit la couleur à bleu grâce à .maClasse{}

Etape 3 : police de caractère

Grâce au selecteur de balise body, charger des polices de caracteres comme gigi puis century si la premiere n’est pas trouvée grâce à font-family.

Modifier la taille de la police d’un mot du texte en 18pt.

Modifier la taille de la police de tout le texte (sauf le mot) grâce à font-size par 10px et tester.

Changer par 1em et tester.

Etape 4 : les marges

Définir une marge en haut de 10% et sur les cotés de 30% grâce à margin en une seule ligne.

Réaliser 3 paragraphes grâce à la balise HTML <p>. Ajouter une marge en haut grâce à margin-top de 15em pour cettte balise.

Etape 5 : liste

Prendre une recette, puis réaliser une liste […]

Le langage CSS ou Cascading Style Sheets correspond à des feuilles de style en cascade. Ce langage existe depuis les années 90. Comme pour le HTML, c’est le W3C qui édite les normes. Le CSS permet de transformer l’apparence des pages HTML.

Notion de cascades

Le CSS permet de déclarer les styles seront différentes manières. Ils seront plus ou moins prioritaires selon l’endroit où ils sont déclarés. Il y a donc un effet de cascade qui remplace le précédent. Voici les trois façons de déclarer du CSS :

Déclarer les feuilles de styles dans un fichier externe. C’est la solution la plus utilisé mais c’est celle qui est le moins prioritaire.
Déclarer les styles en interne, dans l’en-tête de la page. Ils passent en second. Il ne faut réserver cette solution que pour des styles spécifiques.
Déclaration des styles en attributs des éléments HTML. C’est le plus prioritaire.

Déclarations

Pour les déclarations externes:

sélecteur {
propriété: valeur;
}

Puis dans le fichier HTML

<link href="style.css" rel="stylesheet" type="text/css">

Pour les déclarations dans l’en-tête :

<head>
<style type="text/css">
sélecteur {
propriété: valeur;
}
</style>
</head>

Dans une balise :

<balise style="text-align:center; color:red"> ... </balise>

mission Hearthstone 1