Fonctionnement d'Internet et HTML 5

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?

0 (B) 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?

max-width: 800px (C) Signup and view all the answers

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

<a> (C) Signup and view all the answers

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

JPEG (A), GIF (C) Signup and view all the answers

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

Instruction (A) Signup and view all the answers

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

<footer> (C) Signup and view all the answers

Quel est le rôle principal du langage CSS ?

Décrire l’apparence des éléments HTML (D) Signup and view all the answers

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

<content> (D) Signup and view all the answers

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

download (C) Signup and view all the answers

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

256 couleurs (C) Signup and view all the answers

Quelle est la fonction principale d'un navigateur web ?

Accéder aux serveurs web et lire des pages au format html (D) Signup and view all the answers

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

<!DOCTYPE html> (D) Signup and view all the answers

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

Étiqueter des éléments de contenu pour le navigateur (C) Signup and view all the answers

Quelle description correspond le mieux à une adresse IP ?

Une représentation de l'emplacement d'un ordinateur sur Internet (B) Signup and view all the answers

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

Les informations visibles dans le document (D) Signup and view all the answers

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

Un fournisseur d'accès à Internet (A) Signup and view all the answers

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

Décrire la structure et le contenu de la page web (B) Signup and view all the answers

Que signifie l'acronyme HTML ?

Hyper Text Markup Language (A) Signup and view all the answers

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

#id {property : value;} (D) Signup and view all the answers

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

font-size (A) Signup and view all the answers

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

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

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

background-color (B) Signup and view all the answers

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

border: 2px solid red; (C) 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 ?

tag1 > tag2 {property : value;} (B) Signup and view all the answers

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

text-align (D) Signup and view all the answers

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

background-image: url('chemin_vers_image'); (D) 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?

fixed (B) 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?

flex-grow (C) Signup and view all the answers

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

Il est positionné par rapport à son parent le plus proche qui a une position définie. (C) Signup and view all the answers

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

Elle contrôle la distribution de l'espace entre les éléments sur l'axe principal. (A) 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?

wrap (C) Signup and view all the answers

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

stretch (A) Signup and view all the answers

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

Pour spécifier l'ordre des couches en cas de chevauchement. (C) Signup and view all the answers

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

Il reste dans le flux mais se fixe à une position définie lors du défilement. (D) 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
-  : 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
-  et  : 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.

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.