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

Laquelle de ces propriétés CSS nous permet de changer la couleur de fond d'un élément ?

  1. color
  2. background-color
  3. background-image

Réponse 2. On va pouvoir changer la couleur de fond d'un élément avec la propriété CSS background-color.



Question n°2 :

Par défaut, une image de fond se répète...

  1. Horizontalement
  2. Pas du tout
  3. Horizontalement et verticalement

Réponse 3. Par défaut, une image de fond va se répéter jusqu'à remplir le fond de l'élément auquel elle est appliquée, en largeur comme en hauteur.



Question n°3 :

Comment ajouter plusieurs images de fond pour un même élément ?

  1. En réécrivant toutes les déclarations CSS deux fois
  2. En n'écrivant qu'une fois les propriétés et en séparant les valeurs pour chaque image par une virgule
  3. Ce n'est pas possible

Réponse 2.On va pouvoir ajouter autant d'images de fond qu'on le souhaite à un même élément HTML. Il suffit dans ce cas de séparer les différentes valeurs relatives à chaque image par une virgule pour chaque propriété.



Question n°4 :

A quoi sert un préfixe vendeur ?

  1. A vendre plus pour un site e-commerce
  2. A forcer la compatibilité d'une propriété CSS pour certaines versions de certains navigateurs
  3. A créer des dégradés pour tous les navigateurs

Réponse 2. Les préfixes vendeurs vont pouvoir être utilisés afin que d'anciennes versions de certains navigateurs puissent lire certaines propriétés CSS récentes.



Question n°5 :

Quel est le préfixe vendeur de Mozilla Firefox ?

  1. -webkit-
  2. -o-
  3. -moz-

Réponse 3. -webkit- est la préfixe utilisé pour Chrome et Safari tandis que -o- est le préfixe pour le navigateur Opéra.



Question n°6 :

Quelle syntaxe allons nous utiliser pour créer un dégradé linéaire jaune/orange/rouge du coin supérieur gauche vers le coin inférieur droit d'un élément ?

  1. background: -webkit-linear-gradient(top left, yellow,orange,red);
    background: -o-linear-gradient(bottom right, yellow,orange,red);
    background: -moz-linear-gradient(bottom right, yellow,orange,red);
    background: linear-gradient(to bottom right, yellow,orange,red);
  2. background: -webkit-linear-gradient(bottom right, yellow,orange,red);
    background: -o-linear-gradient(bottom right, yellow,orange,red);
    background: -moz-linear-gradient(bottom right, yellow,orange,red);
    background: linear-gradient(to bottom right, yellow,orange,red);
  3. background: -webkit-linear-gradient(top left, yellow,orange,red);
    background: -o-linear-gradient(bottom right, yellow,orange,red);
    background: -moz-linear-gradient(bottom right, yellow,orange,red);
    background: linear-gradient(bottom right, yellow,orange,red);

Réponse 1. Avec le préfixe -webkit-, il faut bien indiquer le point de départ du dégradé. La propriété non préfixée nécessite elle l'emploi du mot clef "to".



Question n°7 :

Qu'est-ce qu'un dégradé radial ?

  1. Un dégradé qui se fait dans toutes les directions à partir d'un point central
  2. Un dégradé qui part d'un centre dans une certaine direction
  3. Un dégradé qui part d'une direction vers une autre

Réponse 1. Un dégradé radial part d'un point central dans toutes les directions.



Question n°8 :

Un dégradé radial ne peut pas être de forme...

  1. Circulaire
  2. Elliptique
  3. Triangulaire

Réponse 3. On peut définir un dégradé radial afin qu'il soit en forme de cercle ou d'ellipse uniquement.

Chapitre précédent

Chapitre suivant