Exercices en CSS le positionnement Série 01
Exercices en CSS le positionnement Série 01
-
Objectifs
- Connaitre la syntaxe du langage HTML5.
- Connaitre la syntaxe du langage CSS3.
- Comprendre les techniques de de positionnement des blocs avec le CSS.
-
Exercice 01
-
Énoncé
- Créez une page en HTML5 index.html que vous sauvegarderez dans le sous-répertoire tp03 et commencez à la remplir, avec sa déclaration de document, son en-tête et le corps du document ne contenant qu’un titre de niveau 1 « Introduction à la programmation web ».
- Vérifiez l’encodage de votre page : attention à déclarer dans votre document Html que l’encodage est UTF-8, ainsi que lorsque vous sauvegardez votre fichier.
- Complétez votre page afin qu’elle contienne les éléments suivants:
- Le titre de la page « Programmation web » doit se trouver en titre sur le navigateur ;
- Un paragraphe de présentation de la page expliquant son objectif, comme par exemple « Cette page a pour objectif de faire le point sur quelques informations en Html/Css. ». Une partie de ce texte devra être mise en valeur en italique ;
- Un tableau de trois colonnes et au moins 4 lignes présentant plusieurs éléments.
- Ce tableau doit comporter la légende « Cours de développement Web« , et avoir une ligne d’en-têtes comportant « Prénom & nom » en première colonne, « HTML » en deuxième colonne, et « CSS » en troisième colonne.
- Remplissez le tableau par les informations correspondantes
- Un lien vers une autre page, page detail_notes.html, comportant le même titre, un unique paragraphe contenant le texte suivant : « Cette page est une page d’examen. », et un lien retour vers index.html.
- Créez une feuille de style CSS « style.css » à laquelle vous ferez appel dans votre fichier Html afin de prendre en compte les éléments suivants de présentation :
- Les titres principaux doivent être de couleur bleue (#58acfa par exemple) et au centre de la page ;
- Le tableau doit ;
- Comporter une bordure visible bleue (#58acfa par exemple);
- Occupera toute la zone horizontale d’affichage,
- Les cellules d’entête seront centrées et écrites en gras et en blanc sur fond noir,
- Les cellules du corps seront en vert clair et en texte justifié,
- Les cellules vides seront d’une couleur différente,
- La légende sera positionnée en bas du tableau avec une couleur « #060 » positionnée à gauche.
- Faire en sorte que votre tableau doit ressembler à celui de la figure suivante:
- Faire en sorte que la police utilisée dans le paragraphe soit celle contenue dans ce fichier (police au format truetype)(Utilisez La règle @font-face).
- La règle
@font-facepermet de définir les polices d’écriture à utiliser pour afficher le texte de pages web. Cette police peut être chargée depuis un serveur distant ou depuis l’ordinateur de l’utilisateur. - Si la fonction
local()est utilisée, elle indique à l’agent utilisateur de prendre en compte une police présente sur le poste de l’utilisateur. - Exemple:
@font-face {
font-family:'ma-police-ttf';
src:local('ma-police'), url('ma_police.ttf') format('truetype');
} - Les liens doivent s’afficher en cyan lorsque l’utilisateur passe sa souris dessus avec une taille de police double ;
- Le texte mis en valeur doit s’afficher en rouge (en plus d’être en italique) ;
- Créez une classe qui change lien des pages pour être un bouton comme celle-ci ;
- Et toute autre modification de style qui vous semblera pertinente.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la solution !
-
Exercice 02
-
Énoncé
- Créez un fichier structure.html que vous sauvegarderez dans le sous-répertoire tp03.
- La page html sera divisée en 4 blocs, chaque bloc correspondra à une balise <div> dans le fichier html.
- La figure suivante présente la structure de la page à réaliser dans ce TP.
- Il faut réaliser 2 fichiers :
- structure.html : utilisation de balise <div> pour créer le 4 blocs;
- structure.css : nécessaire pour placer correctement le 4 blocs.
- On utilisera des valeurs en pourcentage pour spécifier les mesures des différents blocs afin d’obtenir une page web adaptable à toutes les résolutions.
- Pour obtenir la division en blocs on utilisera que de balise <div> (pas de tableau pour structurer la page)
- Le fichier de style doit contenir les spécifications pour le texte (police) et la couleur.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la solution !
-
Exercice 03
-
Énoncé
- Créez deux pages la première est de type HTML5 (index.html) et la deuxième est de type css3 (style.css).
- Ces deux pages contiendront les éléments présents dans la maquette présentée ci-dessous.
- Dans la deuxième page créez le code CSS qui va permettre de réaliser une mise en page correspondant à l’illustration suivante :
- Vous réalisez cet exercice de deux façons, en utilisant : le positionnement absolu et le positionnement relatif.
- Utilisez le code html crée précédemment et créez le code CSS qui va permettre de réaliser une mise en page correspondant à l’illustration suivante :
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la solution !
-
Exercice 04
-
Énoncé
- Créer un document web avec un modèle minimaliste HTML5/CSS3.
- Le modèle sera basé sur l’utilisation de nouveaux éléments sémantiques HTML5 d’organisation des contenus, c’est-à-dire des éléments de section.
- La mise en page globale (design) sera contrôlée par une approche CSS simple, soit la propriété float pour des éléments de type block, ou de préférence, en utilisant la propriété display de valeur inline-block, et en fixant la largeur width des éléments.
- N’utilisez les propriétés CSS Grid, ni Flexbox. que vous n’avez pas utilisées jusqu’à présent (ce sera le sujet de notre prochain cours).
- Dans un premier temps la figure suivante sera le premier rendu de votre travail.
- Dans une deuxième page « page2.html« , créez le code html et le code CSS qui vont permettre de réaliser l’illustration suivante :
- En fin votre page sera identique à la figure suivante
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la solution !
-
Exercice 05
-
Énoncé
- Créer un document web avec un modèle HTML5/CSS3.
- Le modèle sera basé sur l’utilisation de nouveaux éléments sémantiques HTML5 d’organisation des contenus, c’est-à-dire des éléments de section.
- La figure suivante représente le résultat souhaité
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la solution !
Contraintes:
Je vous recommande de créer un nouveau dossier dans vos documents, qui contiendra les fichiers de votre site. Pour ma part, j’ai créé un dossier tp03_ex04 dans lequel j’ai mis mes fichiers.
