HTML Flashcards
to memorise HTML
Quels sont les objectifs du cours de Compétences Numériques (2CN) ?
Maîtriser les langages HTML5 et CSS3, Apprendre à concevoir des sites web statiques de qualité acceptable
Qu’est-ce que le streaming de médias ?
Diffusion d’un flux audio ou vidéo
Quels protocoles sont utilisés pour la messagerie électronique ?
SMTP et POP3
Qu’est-ce que le World Wide Web (WWW) ?
Un réseau de serveurs d’informations reliés par des liens physiques et logiques
Comment le web permet-il de naviguer ?
Grâce à un navigateur et des pages mises en ligne reliées par des liens hypertextes
Quel est le rôle du protocole HTTP ?
Protocole de communication entre les navigateurs et les serveurs
Quelles sont les caractéristiques d’un serveur web ?
Possède une connexion permanente, une adresse IP fixe, rend un service
Quels sont les avantages d’une architecture client/serveur ?
- Données et services centralisés
- Sécurité accrue
- Maintenance et administration facile
- Réseau évolutif
Quels sont les inconvénients d’une architecture client/serveur ?
- Serveur comme maillon faible
- Coût très élevé des serveurs
Qu’est-ce qu’une URL ?
Uniform Resource Locator, identifie l’endroit d’une ressource sur le Web
Qu’est-ce qu’un site web ?
Ensemble de pages web liées, publiées par un propriétaire et hébergées sur un ou plusieurs serveurs
Qu’est-ce qu’un navigateur web ?
Logiciel conçu pour consulter le web et analyser le code HTML et CSS
Qu’est-ce que HTML ?
HyperText Markup Language, langage de balisage pour créer et structurer le contenu des pages web
Quelles sont les étapes de création d’un site web ?
- Objectifs du site
- Contenu
- Mise en œuvre
- Conception
- Réalisation
- Suivi
Quels types d’éditeurs existent pour créer des sites web ?
- Éditeurs de texte
- Éditeurs WYSIWYG
- Systèmes de gestion de contenus (CMS)
Comment le code HTML est-il interprété par les navigateurs ?
Le navigateur reçoit le code HTML, l’interprète et génère la page pour l’utilisateur final
Qu’est-ce que le W3C ?
World Wide Web Consortium, organisme de standardisation pour promouvoir la compatibilité des technologies du Web
Quelles sont les extensions de fichiers pour les documents HTML ?
.htm et .html
Vrai ou Faux : Un hyperlien est un élément qui permet de se déplacer vers un autre document sur le même site.
Vrai
Dans quel contexte le terme ‘hypertexte’ est-il utilisé ?
Organisation des documents textuels informatisés avec des liens dynamiques
Quelles sont les principales fonctions d’un navigateur web ?
- Lancer des recherches
- Échanger des e-mails
- Faire des achats
- Consulter un compte bancaire
- Visionner des vidéos
Quel est le rôle des balises dans HTML ?
Définir le contenu de la page web en encadrant le contenu entre une balise ouvrante et une balise fermante
Quelle est la version d’HTML qui a été publiée en 1995?
HTML 2.0
Quel langage a été conçu comme un moyen de partager des données via les navigateurs web?
HTML
Quel est l’objectif principal d’HTML5?
Rajouter de nombreuses possibilités au langage HTML
Quelles fonctionnalités HTML5 a-t-il introduites?
- Support des options multimédia
- Feuilles de style
- Facilités d’impression
- Langages de script supplémentaires
Vrai ou Faux: Les éléments HTML sont toujours délimités par des balises d’ouverture et de fermeture.
Vrai
Quel type d’éléments n’a pas de balise de fermeture?
Éléments vides
Complétez: Le document HTML commence par une instruction spéciale appelée _______.
[DOCTYPE]
Qu’est-ce qu’une balise dans le langage HTML?
Une instruction entourée par des chevrons angulaires identifiée par un nom
Comment les balises doivent-elles être ouvertes et fermées?
Dans l’ordre
Quel attribut est utilisé pour spécifier des informations supplémentaires sur les éléments HTML?
Attributs
Quelles informations peut contenir l’en-tête d’un document HTML?
- Titre
- Encodage de la page
- Mots clés
Quel est l’objectif de la balise <meta></meta> avec l’attribut ‘charset’?
Codage des caractères
Quel encodage est l’un des plus couramment utilisés dans les balises <meta></meta>?
UTF-8
Quel est le rôle de la balise <title> dans un document HTML?</title>
Indique le titre de la page web
Quel type de contenu est spécifié dans les balises <meta></meta> avec les attributs ‘name’ et ‘content’?
Informations complémentaires pour les moteurs de recherche
Vrai ou Faux: Les balises HTML peuvent avoir des espaces avant le chevron de fermeture.
Vrai
Complétez: Un document HTML est composé d’un ensemble d’éléments organisés sous forme d’une _______.
[hiérarchie]
Quel est un exemple d’élément vide en HTML?
<br></br>
Dans quel élément HTML se trouve le contenu principal de la page?
<body>
</body>
Quel est l’utilisation de la balise <link></link> dans l’en-tête d’un document HTML?
Référence à un autre document
Quel est le but principal de l’attribut ‘http-equiv’ dans une balise <meta></meta>?
Fournir des informations supplémentaires sur le contenu HTML
Quel est l’objectif principal de la culture physique ?
Améliorer la santé et le bien-être par l’entraînement.
Quel est l’effet positif de l’entraînement en salle de sport sur la santé ?
Il contribue à la santé physique et au bien-être.
Que fait la balise <meta></meta> dans un document HTML ?
Fournit des informations supplémentaires au navigateur.
Quel attribut de la balise <meta></meta> permet de rafraîchir une page HTML ?
http-equiv
Complétez : La balise <meta></meta> permet de ______.
rafraîchir la page toutes les 30 secondes
Quel est l’usage de la balise <link></link> dans un document HTML ?
Référencer des ressources externes.
Que représente la balise <style> dans un document HTML ?</style>
Déclare un style CSS directement dans la page.
Quel type de contenu peut être inclus avec la balise
?
JavaScript.
Quel est l’exemple de balise pour inclure une feuille de style ?
<link></link>
Quelle balise encadre le contenu visible d’un document HTML ?
<body> ... </body>
Quelle balise est utilisée pour créer un saut de ligne ?
<br></br>
La balise <hr> est utilisée pour ______.
tracer une ligne horizontale
Quelle balise indique un texte avec une importance particulière ?
<strong></strong>
Que fait la balise <mark> dans un document HTML ?</mark>
Met en surbrillance du texte.
Vrai ou Faux : La balise <s> indique que le texte est obsolète.</s>
Vrai
Quel attribut de la balise <u> indique que le texte est souligné ?</u>
u
Que représente la balise <ins> dans un document HTML ?</ins>
Un texte qui a été ajouté.
Complétez : La balise <small> indique que le texte est ______.</small>
de taille réduite
Que fait la balise dans un document HTML ?
Affiche du texte en indice.
Que fait la balise dans un document HTML ?
Affiche du texte en exposant.
Quel est le but de l’entête d’un document HTML ?
Fournir des métadonnées et des liens vers des ressources.
Quel est le rôle de l’attribut ‘content’ dans la balise <meta></meta> ?
Définir la valeur associée à l’attribut ‘http-equiv’.
Quel est l’exemple de balise pour déclarer l’encodage des caractères ?
<meta></meta>
Quel attribut de la balise <link></link> permet de spécifier une version alternative d’un document ?
rel=’alternate’
Quelle balise est utilisée pour créer un paragraphe dans un document HTML ?
<p> ... </p>
Quel est le rôle de la balise ?
Afficher du texte en indice par rapport au bloc de texte environnant
Généralement plus petit que le texte normal.
Quel est le rôle de la balise ?
Afficher du texte en exposant par rapport au bloc de texte environnant
Généralement plus petit que le texte normal.
Quelle balise est utilisée pour appliquer un style d’emphase au texte?
<i> ou <em></em></i>
<em> est également sémantiquement significatif.</em>
Quels types de balises sont utilisés pour les textes spéciaux?
- <q>: entre guillemets</q>
- <blockquote>: partie en retrait
</blockquote> - <cite>: référence de citation</cite>
- <pre>: partie préformatée
</pre> - <code>: code source</code>
- <kbd>: touche de clavier</kbd>
- <var>: variable</var>
Comment commencent et se terminent tous les caractères spéciaux en HTML?
Commencent par l’esperluette (&) et se terminent par un point-virgule.
Exemples : &, <, >.
Combien de types de listes existe-t-il en HTML?
4 types
Liste non ordonnée, Liste ordonnée, Liste de définition, Listes imbriquées.
Quelle balise est utilisée pour une liste non ordonnée?
<ul>
## Footnote
Les éléments sont délimités par <li>.
</li></ul>
Quelle balise est utilisée pour une liste ordonnée?
<ol>
## Footnote
Les éléments sont également délimités par <li>.
</li></ol>
Quelles balises définissent une liste de définition?
- <dl>: définit la liste
</dl> - <dt>: définit le terme
</dt> - <dd>: décrit chaque terme
</dd>
Quel attribut peut modifier l’apparence d’une liste non ordonnée?
type
Valeurs possibles : square, circle, disc.
Quelles sont les options d’attributs pour une balise <ol>?
- type=”A”: lettres majuscules
- type=”a”: lettres minuscules
- type=”I”: chiffres romains majuscules
- type=”i”: chiffres romains minuscules
- type=”1”: chiffres par défaut
- start=”n”: valeur de départ
Qu’est-ce qu’une liste imbriquée?
Utilisation de balises de liste à l’intérieur d’autres balises de liste.
Cela permet de créer des structures hiérarchiques.
Quelle balise est utilisée pour créer un tableau en HTML?
<table>
## Footnote
Les tableaux sont structurés avec <tr>, <th>, et <td>.
</td></th></tr></table>
Quelle est la structure simple d’un tableau?
<table>
<tr>
<th>...</th>
<th>...</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
Quel attribut est utilisé pour ajouter une bordure à un tableau?
border
Peut être spécifié avec une valeur numérique.
Quel est le rôle de la balise <caption> dans un tableau?
Fournir un titre ou une légende au tableau
Affiché au-dessus du tableau dans la plupart des navigateurs.
Où peut-on placer le tableau dans un document HTML?
Soit juste après la balise d’ouverture <table>, soit juste avant la fermeture de la balise </table>.
Qu’est-ce que la fusion de cellules dans un tableau HTML?
Technique qui permet de regrouper plusieurs cellules en une seule cellule plus grande.
Quels sont les attributs utilisés pour la fusion de cellules dans un tableau HTML?
- rowspan
- colspan
À quelles balises s’appliquent les attributs colspan et rowspan?
- <td> (cellule de données)
</td> - <th> (cellule d'en-tête)
</th>
Quel est l’usage de l’attribut colspan?
Utilisé pour fusionner des cellules horizontalement (sur plusieurs colonnes).
Quel est l’usage de l’attribut rowspan?
Utilisé pour fusionner des cellules verticalement (sur plusieurs lignes).
Quelles balises sont utilisées pour structurer un tableau HTML?
- <thead>
</thead> - <tbody>
</tbody> - <tfoot>
</tfoot>
Quel est l’avantage de diviser un tableau en <thead>, <tbody>, et <tfoot>?
Fournit une meilleure compréhension de la structure du tableau et facilite la maintenance.
Quel attribut définit l’alignement horizontal d’un tableau?
align
Que définit l’attribut cellpadding dans un tableau?
L’espacement entre le bord de la cellule et le contenu à l’intérieur de la cellule.
Que définit l’attribut cellspacing dans un tableau?
L’espacement entre les cellules de la table.
Quel attribut définit la largeur d’un tableau?
width
Quel attribut définit la hauteur d’un tableau?
height
Quel attribut définit la couleur de fond d’un tableau?
bgcolor
Qu’est-ce qu’un lien hypertexte?
Éléments interactifs qui permettent de naviguer vers d’autres pages ou ressources.
Quelle balise est utilisée pour créer des liens hypertextes?
<a></a>
Quel attribut de la balise <a> spécifie la cible du lien?</a>
href
Que spécifie l’attribut href?
L’adresse de la page de destination du lien.
Que fait l’attribut target=’_blank’ dans un lien?
Ouvre la page dans un nouvel onglet ou une nouvelle fenêtre.
Qu’est-ce qu’une URL?
Adresses utilisées pour identifier de manière unique des ressources sur Internet.
Quels sont les deux types principaux d’URL?
- Relatives
- Absolues
Qu’est-ce qu’une URL absolue?
Adresse complète qui spécifie l’emplacement exact d’une ressource sur Internet.
Qu’est-ce qu’une URL relative?
Spécifie le chemin d’accès d’une ressource par rapport à l’emplacement de la page web courante.
Comment crée-t-on un lien vers une page dans le même dossier?
Utiliser un chemin relatif sans slash au début.
Comment crée-t-on un lien vers une page dans un sous-dossier?
Utiliser un chemin relatif avec le nom du sous-dossier, par exemple ‘sous-dossier1/page1.html’.
Comment crée-t-on un lien vers une page dans le dossier parent?
Utiliser ‘./index.html’ pour pointer vers la page dans le dossier parent.
Quel attribut est utilisé pour spécifier les destinations des liens hypertextes?
L’attribut href
Il peut pointer vers des URL absolues, relatives, des ancres hypertextuelles, des adresses email ou des numéros de téléphone.
Qu’est-ce qu’une ancre hypertextuelle?
Un lien vers une section spécifique de la même page ou d’une autre page
Elle utilise une référence d’ancrage (ID) pour identifier la section cible.
Quelle est la syntaxe d’un lien d’ancrage interne?
<a href=”#nom_de_l’ancre”>Texte du lien</a>
L’ID de la section cible est défini par <Nombalise id=”nom_de_l’ancre”></Nombalise>.
Quelle est la syntaxe d’un lien d’ancrage externe?
<a href=”URL_de_la_page#nom_de_ancre”>Texte du lien</a>
Cela permet de lier à une section spécifique d’une autre page.
Comment créer un lien pour envoyer un email avec l’attribut href?
En ajoutant le schéma “mailto:” avant l’adresse email
Exemple: <a href=”mailto:exemple@mail.com”>Envoyer un email</a>.
Comment créer un lien vers un numéro de téléphone avec l’attribut href?
En ajoutant le schéma “tel:” avant le numéro de téléphone
Exemple: <a href=”tel:+123456789”>Appeler</a>.
Quelle balise est utilisée pour afficher des images en HTML?
La balise <img>
Elle utilise l’attribut src pour spécifier l’URL ou le chemin local de l’image.
Quel attribut fournit une description textuelle d’une image?
L’attribut alt
Il est utilisé pour fournir un texte alternatif lorsque l’image ne peut pas être affichée.
Quels attributs sont utilisés pour définir les dimensions d’une image?
Les attributs width et height
Ils spécifient la largeur et la hauteur de l’image en pixels.
Quel attribut fournit un texte qui apparaît sous forme de tooltip sur une image?
L’attribut title
Il apparaît généralement lorsque l’utilisateur survole l’image avec la souris.
Quels sont les différents formats d’images que la balise <img> peut afficher?
- JPEG
- PNG
- GIF
- SVG
- WebP
- BMP
Chaque format a ses caractéristiques spécifiques en termes de compression et d’utilisation.
Quel est un format d’image couramment utilisé pour les photographies?
JPEG (Joint Photographic Experts Group)
Il utilise une compression avec perte pour réduire la taille du fichier.
Quel format d’image prend en charge la transparence?
PNG (Portable Network Graphics)
Il utilise une compression sans perte et est idéal pour les graphiques sur le web.
Quel format d’image prend en charge les animations simples?
GIF (Graphics Interchange Format)
Il utilise une compression avec perte et est limité à 256 couleurs maximum.
Quel format d’image est basé sur XML et est utilisé pour les graphiques vectoriels?
SVG (Scalable Vector Graphics)
Il peut être redimensionné sans perte de qualité.
Quel format d’image développé par Google offre une meilleure compression que JPEG et PNG?
WebP
Il maintient une qualité d’image élevée et est pris en charge par les navigateurs modernes.
Comment une image peut-elle être utilisée comme un lien hypertexte?
En encapsulant la balise <img> dans une balise <a>
Exemple: <a href=”https://www.example.com”><img src=”image.jpg”></a>.
Qu’est-ce qu’une carte d’image en HTML?
Une technique permettant de définir des zones spécifiques d’une image comme des liens hypertexte
Les utilisateurs peuvent cliquer sur différentes parties de l’image pour accéder à des liens différents.
Quelle balise est utilisée pour définir des zones interactives sur une image?
La balise <map>
Elle est utilisée en conjonction avec la balise <area> pour créer des zones cliquables.
Quel attribut de la balise <img> est lié à la balise <map>?
L’attribut usemap
Il associe l’image à une carte d’image définie par la balise <map>.
Quels attributs définissent les zones cliquables dans la balise <area>?
- shape
- coords
- href
- alt
‘shape’ spécifie la forme (circle, rect, poly), ‘coords’ indique les coordonnées, ‘href’ spécifie le lien, ‘alt’ fournit un texte alternatif.
Quel est le but de la balise <figure> en HTML?
Définir une section pour présenter des illustrations telles que des images ou des diagrammes
Elle peut être associée à un titre avec la balise <figcaption>.
Quelle balise est utilisée pour incorporer un fichier audio dans une page HTML?
La balise <audio>
Elle permet d’ajouter des fichiers audio à la page web.
Quel est l’objectif de la balise <audio> en HTML?</audio>
Incorporer un fichier audio dans une page web.
La balise <audio> prend en charge plusieurs formats audio, y compris MP3, WAV, OGG, etc.</audio>
Quels types de contrôles sont offerts par la balise <audio>?</audio>
- Lecture
- Pause
- Stop
- Avance rapide
- Retour en arrière
- Volume
Ces contrôles permettent aux utilisateurs de contrôler la lecture de l’audio.
Quel attribut de la balise <audio> spécifie l'URL de la source audio?</audio>
src
L’attribut src est utilisé pour spécifier le chemin vers le fichier audio à lire.
Que signifie l’attribut ‘preload’ dans la balise <audio>?</audio>
Spécifie si l’audio doit être chargé au chargement de la page ou seulement sur demande.
Les options incluent ‘auto’ ou ‘none’.
Quels sont les attributs booléens de la balise <audio>?</audio>
- controls
- muted
- loop
- autoplay
Ces attributs modifient le comportement de la lecture audio.
Quel est le but de la balise <video> en HTML?</video>
Intégrer une vidéo dans la page web.
La balise <video> prend en charge différents formats comme MP4 et WebM.</video>
Quel attribut de la balise <video> permet d'ajouter des contrôles de lecture?</video>
controls
Cet attribut permet aux utilisateurs de contrôler la lecture de la vidéo.
Quelles sont les principales méthodes HTTP utilisées avec la balise <form>?
- POST
- GET
POST envoie les données dans le corps de la requête, tandis que GET les envoie dans l’URL.
Quel attribut de la balise <form> spécifie l’URL vers laquelle les données seront envoyées?
action
L’attribut action définit où les données du formulaire seront traitées.
Quel est le rôle de la balise <label> dans un formulaire HTML?</label>
Étiqueter les éléments de formulaire afin d’améliorer l’accessibilité.
La balise <label> associe un texte descriptif à un élément de formulaire.</label>
Quel attribut de la balise <label> spécifie l’ID du champ de formulaire associé?</label>
for
Cet attribut permet de lier le label à un champ de formulaire spécifique.
Quels attributs sont nécessaires pour la balise <input></input>?
- type
- id
- name
Ces attributs définissent le type de champ de saisie et permettent de référencer l’élément.
Quel est l’effet de l’attribut ‘required’ dans la balise <input></input>?
Rend la saisie du champ obligatoire.
Si cet attribut est présent, l’utilisateur doit remplir le champ avant de soumettre le formulaire.
Complétez la phrase: La balise <input></input> avec type=’text’ est utilisée pour créer un _______.
[champ de texte]
Un exemple d’utilisation de la balise <input></input> pour un champ de saisie de texte.
Quel attribut permet de fournir un texte indicatif dans un champ de saisie?
placeholder
L’attribut placeholder fournit une courte description de ce qui est attendu dans le champ.
Quel attribut de la balise <input></input> détermine le nombre maximum de caractères autorisés?
maxlength
Cet attribut limite le nombre de caractères que l’utilisateur peut entrer.
Quel est le format de base pour la balise <audio>?</audio>
<audio>
Votre navigateur ne supporte pas l'élément audio.</audio>
Ce format inclut l’attribut ‘controls’ pour afficher les contrôles de lecture.
Quel attribut de la balise <video> spécifie une image de remplacement?</video>
poster
L’attribut poster est utilisé pour afficher une image avant que la vidéo ne soit lue.
Quel type de champ permet de saisir une adresse e-mail ?
<input></input>
Quel type de champ est utilisé pour saisir un numéro de téléphone ?
<input></input>
Quel est le rôle de l’attribut ‘pattern’ dans un champ de saisie ?
Définir une expression régulière qui spécifie le format attendu pour l’entrée.
Quel type de champ permet de créer un champ de recherche dans un formulaire ?
<input></input>
Quel type de champ permet aux utilisateurs de sélectionner une date ?
<input></input>
Quel type de champ permet de sélectionner une date et une heure sans spécifier de fuseau horaire ?
<input></input>
Quel type de champ permet de sélectionner une heure ?
<input></input>
Quel type de champ permet de sélectionner un mois ?
<input></input>
Quel type de champ permet de sélectionner une semaine ?
<input></input>
Quel type de champ est utilisé pour spécifier une URL ?
<input></input>
Quel type de champ permet de sélectionner une valeur numérique dans une plage spécifiée ?
<input></input>
Quel type de champ permet aux utilisateurs de sélectionner une couleur ?
<input></input>
Quel type de champ est utilisé pour permettre aux utilisateurs de sélectionner et d’envoyer des fichiers ?
<input></input>
Quel attribut doit être ajouté pour envoyer des fichiers via un formulaire HTML ?
enctype=”multipart/form-data”
Quel type de champ est utilisé pour spécifier un champ de saisie qui ne permet que des entrées numériques ?
<input></input>
Quel attribut spécifie la valeur minimale autorisée pour un champ numérique ?
min
Quel attribut spécifie la valeur maximale autorisée pour un champ numérique ?
max
Quel attribut spécifie l’incrément utilisé pour augmenter ou diminuer la valeur d’un champ numérique ?
step
Quel type de champ permet de stocker des données invisibles pour l’utilisateur ?
<input></input>
Quel type de balise est utilisée pour créer un champ de texte multi-lignes ?
<textarea>Votre message…</textarea>
Quel type d’élément permet aux utilisateurs de sélectionner une ou plusieurs options parmi un ensemble de choix ?
Case à cocher (checkbox)
Quel attribut indique que la case à cocher est initialement cochée ?
checked
Quel type d’élément permet de sélectionner une seule option parmi un ensemble d’options mutuellement exclusives ?
Bouton radio (radio button)
Qu’est-ce qu’une option dans un groupe d’options?
Lorsqu’une option est choisie, toute autre option dans le même groupe est automatiquement désélectionnée.
Quelle balise HTML est utilisée pour créer des formulaires?
La balise <input></input>.
Quel type de bouton est un bouton radio?
Un bouton permettant de choisir une seule option parmi plusieurs.
Qu’est-ce qu’une liste de sélection simple?
Permettre aux utilisateurs de sélectionner une seule option parmi plusieurs dans une liste déroulante.
Syntaxe d’une liste de sélection simple?
<select>
<option>Texte affiché</option>
<option>Texte affiché</option>
…</select>
Qu’est-ce qu’une liste de sélection multiple?
Une liste déroulante permettant à l’utilisateur de sélectionner plusieurs options en maintenant la touche Ctrl enfoncée.
Syntaxe d’une liste de sélection multiple?
<select>
<option>Texte affiché</option>
<option>Texte affiché</option>
…</select>
Quel est le rôle d’un bouton de soumission?
Utilisé pour soumettre les données d’un formulaire.
Syntaxe d’un bouton de soumission?
<input></input>
Quel est le rôle d’un bouton de réinitialisation?
Utilisé pour réinitialiser les valeurs d’un formulaire à leurs valeurs par défaut.
Syntaxe d’un bouton de réinitialisation?
<input></input>
Quel est le rôle d’un bouton d’image?
Utilisé pour créer un bouton avec une image.
Syntaxe d’un bouton d’image?
<input></input>
À quoi sert la balise <fieldset>?
Grouper plusieurs éléments de formulaire dans un cadre visuel avec une légende optionnelle.
Syntaxe d’une balise <fieldset>?
<fieldset>
<legend>Légende du groupe de champs</legend>
...</fieldset>
