Fonctionnement d'Internet et HTML 5
37 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Quelle propriété CSS permet à un élément de s'aligner indépendamment sur l'axe secondaire dans une flexbox?

  • order
  • flex-grow
  • align-self (correct)
  • flex-basis

    • Quelle fonction permet d'ajouter une ombre portée à un élément en CSS?

  • box-shadow (correct)
  • transition
  • flex
  • opacity

    • Comment commence-t-on une media query pour appliquer des styles en fonction de certaines conditions?

  • @query
  • @request
  • @style
  • @media (correct)

    • Quelle valeur pour 'opacity' rend un élément complètement transparent?

    <p>0</p> Signup and view all the answers

    Dans une règle de media query, quelle condition permet de cibler un écran dont la largeur maximale est de 800 pixels?

    <p>max-width: 800px</p> Signup and view all the answers

    Quelle balise est principalement utilisée pour créer un lien vers une autre page web ?

    <a> Signup and view all the answers

    Lesquels des types d'images suivants sont utilisés en HTML5 ?

    <p>JPEG</p> Signup and view all the answers

    Quel type de lien est spécifié par une adresse mail dans HTML ?

    <p>Instruction</p> Signup and view all the answers

    Quelle balise est utilisée pour structurer le pied de page d'un document HTML5 ?

    <footer> Signup and view all the answers

    Quel est le rôle principal du langage CSS ?

    <p>Décrire l’apparence des éléments HTML</p> Signup and view all the answers

    Le quel des éléments suivants n’est pas une balise structurante en HTML5 ?

    <content> Signup and view all the answers

    Quel attribut est utilisé dans les balises d'image pour autoriser le téléchargement ?

    <p>download</p> Signup and view all the answers

    Quel est le nombre maximum de couleurs supporté par un fichier GIF ?

    <p>256 couleurs</p> Signup and view all the answers

    Quelle est la fonction principale d'un navigateur web ?

    <p>Accéder aux serveurs web et lire des pages au format html</p> Signup and view all the answers

    Quel élément définit un document comme étant en HTML5 ?

    <!DOCTYPE html> Signup and view all the answers

    Quel est le rôle des balises HTML dans un document web ?

    <p>Étiqueter des éléments de contenu pour le navigateur</p> Signup and view all the answers

    Quelle description correspond le mieux à une adresse IP ?

    <p>Une représentation de l'emplacement d'un ordinateur sur Internet</p> Signup and view all the answers

    Quel type de contenu est spécifié par la balise ?

    <p>Les informations visibles dans le document</p> Signup and view all the answers

    Qu'est-ce qu'un FAI dans le contexte d'Internet ?

    <p>Un fournisseur d'accès à Internet</p> Signup and view all the answers

    Quel est le but de la structure d'une page web en HTML ?

    <p>Décrire la structure et le contenu de la page web</p> Signup and view all the answers

    Que signifie l'acronyme HTML ?

    <p>Hyper Text Markup Language</p> Signup and view all the answers

    Quel sélecteur CSS permet de cibler un élément ayant un identifiant spécifique ?

    <p>#id {property : value;}</p> Signup and view all the answers

    Quelle propriété est utilisée pour définir la taille de la police dans CSS ?

    <p>font-size</p> Signup and view all the answers

    Quelle règle utilise la syntaxe correcte pour définir une police personnalisée en CSS ?

    <p>@font-face { font-family: 'MyFont'; src: url('...'); }</p> Signup and view all the answers

    Quelle propriété est utilisée pour changer la couleur de fond d'un élément ?

    <p>background-color</p> Signup and view all the answers

    Comment définir une bordure solide de 2 pixels de couleur rouge en CSS ?

    <p>border: 2px solid red;</p> Signup and view all the answers

    Quel type de sélection CSS permet de cibler tous les éléments enfants directs d'un élément particulier ?

    <p>tag1 &gt; tag2 {property : value;}</p> Signup and view all the answers

    Quelle propriété ajuste l'alignement du texte dans un élément ?

    <p>text-align</p> Signup and view all the answers

    Quel est le format correct pour intégrer une image d'arrière-plan dans CSS ?

    <p>background-image: url('chemin_vers_image');</p> Signup and view all the answers

    Quel type de positionnement CSS est utilisé pour un élément qui doit rester fixe par rapport à la fenêtre même lors du défilement?

    <p>fixed</p> Signup and view all the answers

    Quelle propriété CSS permet de spécifier comment un élément flex s'étend ou se rétrécit par rapport aux autres éléments flex?

    <p>flex-grow</p> Signup and view all the answers

    Quelle option décrit correctement le comportement d'un élément positionné en 'absolute'?

    <p>Il est positionné par rapport à son parent le plus proche qui a une position définie.</p> Signup and view all the answers

    Quel est l'effet de la propriété 'justify-content' dans une flexbox?

    <p>Elle contrôle la distribution de l'espace entre les éléments sur l'axe principal.</p> Signup and view all the answers

    Quelle valeur de 'flex-wrap' permet aux éléments d'une flexbox d'aller à la ligne si nécessaire?

    <p>wrap</p> Signup and view all the answers

    Quelle est la valeur par défaut de la propriété 'align-items' dans une flexbox?

    <p>stretch</p> Signup and view all the answers

    Comment la propriété 'z-index' est-elle utilisée en CSS?

    <p>Pour spécifier l'ordre des couches en cas de chevauchement.</p> Signup and view all the answers

    Quel est l'effet d'un positionnement 'sticky' sur un élément?

    <p>Il reste dans le flux mais se fixe à une position définie lors du défilement.</p> Signup and view all the answers

    Study Notes

    Le fonctionnement d'Internet

    • Le web est composé d'ordinateurs en réseau.

    • Les fournisseurs d'accès à internet (FAI) connectent les utilisateurs à internet via un modem.

    • Les clients accèdent aux serveurs web qui stockent les pages web.

    • Chaque ordinateur possède un nom de domaine (DNS) et une adresse IP.

    • Le navigateur web permet aux clients de lire des pages web au format HTML (Hyper Text Markup Language).

    Le HTML 5

    • Le langage HTML est le langage de balisage standard pour la création de pages web.

    • Il décrit la structure d'une page web et se compose d'une série d'éléments (balises).

    • Les éléments HTML indiquent au navigateur comment afficher le contenu.

    • Balises html de base :

      • <html> : définit le document comme un document HTML5
      • <head> : contient les méta-informations
      • <title> : définit le titre de la page
      • <body> : contient le contenu visible
      • <h1> à <h6> : définit les titres
      • <p> : définit un paragraphe
      • <meta> : définit les métadonnées
      • <a> : définit un lien hypertexte
      • <img> : insère une image
      • <div> : définit une division
      • <ul> ou <ol> : définit une liste
      • <strong> et <b> : met en avant du texte
      • <table>, <tr>, <th>, <td> : définit un tableau

    • Les attributs HTML fournissent des informations supplémentaires sur les éléments.

    • Balises structurantes :

      • <header> : définit l'en-tête
      • <main> : définit le contenu principal
      • <footer> : définit le pied de page
      • <section> : définit une section dans un document
      • <article> : définit un article dans un document
      • <aside> : définit le contenu annexe
      • <figure> : définit un contenu autonome (image et légende)
      • <figcaption> : définit la légende d'un élément <figure>
      • <time> : définit la date ou l'heure

    • Types de liens :

      • Externe
      • Interne (absolu ou relatif)
      • Ancre (#id)
      • Instruction (mailto:[email protected])
      • Téléchargement (attribut download)

    • Types d'images :

      • JPEG
      • PNG
      • GIF
      • SVG
      • WEBP
      • APNG

    Préparer son ordinateur

    • Un navigateur web : Google Chrome ou Firefox
    • Un éditeur de texte avancé : VS Code

    Le CSS3

    • Le langage CSS (Cascading Style Sheets) définit la présentation des éléments HTML.

    • Il repose sur des sélecteurs et des propriétés.

    • Les propriétés sont appliquées aux éléments en utilisant des sélecteurs.

    • Sélecteurs :

      • Nom de balise : tagname {property : value;}
      • Classe : .class {property : value;}
      • ID: #id {property : value;}

    • Autres sélecteurs :

      • Sélecteur universel : * {property : value;}
      • Balise contenue dans une autre : tag1 tag2 {property : value;}
      • Balise enfant direct : tag1 > tag2 {property : value;}
      • Balise ayant un attribut : [attr] {property : value;}

    Formatage du texte (CSS)

    • Taille de la police : font-size (taille absolue ou relative).

    • Police d'écriture : font-family (police par défaut, police personnalisée).

    • Propriétés de style :

      • font-style : italique, oblique, normal
      • font-weight : gras, normal
      • text-decoration : souligné, barré, surligné
      • text-transform : majuscules, minuscules, première lettre en majuscule

    • Alignement : text-align (gauche, centre, droite, justifié)

    La couleur (CSS)

    • Défini par un mot-clé, une valeur hexadécimale, ou une valeur RGB.

    • Propriétés de couleur:

      • color : couleur du texte
      • background-color : couleur de l'arrière-plan

    L'image de fond (CSS)

    • Défini par la propriété background-image.

    • Autres propriétés pour l'image de fond:

      • background-size : taille de l'image
      • background-position : position de l'image
      • background-repeat : répétition de l'image
      • background-attachment : défilement de l'image

    Les bordures (CSS)

    • Défini par la propriété border.

    • Types de bordures :

      • none: aucune bordure
      • solid : bordure pleine
      • dotted : bordure pointillée
      • dashed : bordure tiretée
      • double : bordure double
      • groove : bordure gravée
      • ridge : bordure en relief
      • inset : bordure enfoncée
      • outset : bordure en relief

    Le positionnement en CSS

    • Défini par la propriété position.

    • Types de positionnement :

      • static : position par défaut dans le flux du document
      • relative : positionné dans le flux mais peut être décalé
      • absolute : positionné par rapport à son plus proche ancêtre positionné
      • fixed : positionné par rapport à la fenêtre du navigateur
      • sticky : positionné dans le flux mais "collé" en haut par rapport au parent

    • Positionnement sur l'axe Z : z-index

    Les flexboxes (CSS)

    • Un conteneur flex (flexbox) possède la propriété display: flex.

    • Propriétés de base des flexboxes :

      • flex-direction : direction des éléments (ligne ou colonne)
      • flex-wrap : permet aux éléments de passer à la ligne

    • Propriétés d'alignement :

      • justify-content : alignement sur l'axe principal
      • align-items : alignement sur l'axe secondaire
      • align-self : alignement individuel d'un élément

    • Propriétés d'un élément flex :

      • flex : regroupe flex-grow, flex-shrink et flex-basis
      • order : positionnement de l'élément dans le conteneur

    Autres propriétés CSS

    • box-shadow : ombre portée
    • opacity : transparence
    • transition : animation d'un changement de valeur CSS

    Mise en page adaptative (CSS)

    • Les media queries permettent d'appliquer des propriétés CSS en fonction des conditions (largeur de l'écran, orientation, etc.).

    • Syntaxe : @media (property:value) {...}

    • Exemples :

      • @media screen and (max-width:800px) {...}

    • La meta viewport est importante pour le responsive design.

    Studying That Suits You

    Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

    Quiz Team

    Related Documents

    Support de cours html css (1).pdf

    Description

    Ce quiz explore le fonctionnement d'Internet, y compris les connexions des utilisateurs via des FAI et la structure des pages web en HTML 5. Testez vos connaissances sur les éléments de base du HTML et la manière dont les ordinateurs interagissent sur le web.

    More Like This

    HTML History and Standards True or False
    3 questions

    HTML History and Standards True or False

    Building Your First Web Page
    5 questions

    Building Your First Web Page

    MiraculousMaroon avatar
    MiraculousMaroon
    HTML Basics Quiz
    1 questions

    HTML Basics Quiz

    ToughEternity avatar
    ToughEternity
    Historical Roots of HTML Quiz
    16 questions

    Historical Roots of HTML Quiz

    EloquentLove avatar
    EloquentLove
    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser