Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. CSS - Le Flexbox
  5. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

Chapitre précédent

Chapitre suivant

Question n°1 :

Lorsqu'on définit "width:75%" pour un élément en CSS, cela signifie...

  1. Que l'élément va occuper une 75% de la largeur totale de la page
  2. Que l'élément va occuper une 75% de sa largeur par défaut
  3. Que l'élément va occuper une 75% de la largeur de son élément parent

Réponse 3. Lorsqu'on définit des valeurs en pourcentage en CSS, cela est toujours relativement à la valeur de l'élément conteneur ou parent.



Question n°2 :

Quel va être l'aspect d'une bordure si on la crée en utilisant la valeur dashed ?

  1. Bordure en pointillés
  2. Bordure sous forme de tirets
  3. Bordure avec un effet 3D

Réponse 2. La valeur dashed de la propriété border sert à créer des bordures constituées de tirets.



Question n°3 :

Quelle propriété nous permet de créer des bordures arrondies ?

  1. Border-style
  2. Border-radius
  3. Radius

Réponse 2. La propriété border-radius va nous permettre d'arrondir une bordure déjà définie avec la propriété border.



Question n°4 :

Que représente le padding d'un élément ?

  1. La marge intérieure
  2. La marge extérieure
  3. Le contenu de l'élément

Réponse 1. La padding représente la marge intérieure d'un élément HTML. La marge extérieure est définie par margin.



Question n°5 :

Si on ne donne que deux valeurs à la propriété padding, la première valeur représente...

  1. La marge intérieure haute
  2. Les marges intérieures droite et gauche
  3. Les marges intérieures haute et basse

Réponse 3. Lorsqu'on indique que deux valeurs à padding (ou à margin), la première valeur représente la taille des marges haute et basse, tandis que la seconde représente celle des marges droite et gauche.



Question n°6 :

A quoi sert la valeur inset de la propriété box-shadow ?

  1. A créer une ombre centrée autour de la boîte
  2. A créer une ombre intérieure
  3. A déterminer le rayon de projection de notre ombre

Réponse 2. La valeur inset va nous servir à projeter une ombre vers l'intérieur de notre boîte.



Question n°7 :

Que se passe t-il si j'applique "display:none" à un élément ?

  1. L'élément est effacé du code de ma page HTML
  2. Le type de display de l'élément n'est pas modifié
  3. L'élément ne sera pas affiché dans le navigateur

Réponse 3. Appliquer un display:none à un élément va faire que l'élément ne s'affichera pas lors de l'affichage de la page dans un navigateur.



Question n°8 :

On ne peut pas utiliser les propriétés top, right, bottom et left sur un élément quand...

  1. Nous n'avons pas utilisé la propriété position sur l'élément
  2. L'élément a été positionné avec position:relative
  3. L'élément a été positionné avec position:absolute

Réponse 1. Les propriétés top, right, bottom et left ne s'appliqueront pas sur un élément possédant un positionnement "static". Or, les éléments HTML possèdent justement ce positionnement par défaut.



Question n°9 :

Appliquer un "clear:left" à un élément est utile pour...

  1. Empêcher l'élément de se placer à côté d'un élément possédant un float:left
  2. Empêcher l'élément de se placer à côté d'un élément possédant un float:right
  3. Faire flotter l'élément à gauche

Réponse 1. La propriété clear est utilisée pour empêcher des éléments de venir se placer aux côtés d'éléments positionnés avec float. clar:left va neutraliser l'effet d'un float:left.

Chapitre précédent

Chapitre suivant

2015-2017 - Tous droits réservés à Pierre Giraud.

Il est strictement interdit de copier et de distribuer le contenu de ce site sans l'accord express de son propriétaire.

En continuant votre navigation sur ce site, vous acceptez l'utilisation des cookies.

N'oubliez pas de me suivre !

Lien vers ma page Facebook Lien vers ma chaine YouTube Lien vers mon compte Twitter