Introduction CSS,
HTML5(pt.2)
HTML Styles - CSS
Cascading Style Sheets (CSS) ou bien feuilles de style en cascade sont utilisées pour
formater la mise en page d'une page Web.
Avec CSS, vous pouvez contrôler la couleur, la police, la taille du texte, l'espacement entre
les éléments, la façon dont les éléments sont positionnés et disposés, les images
d'arrière-plan ou les couleurs d'arrière-plan à utiliser, les différents affichages pour
différents appareils et tailles d'écran, etc.
Using CSS
• Le CSS peut être ajouté aux documents HTML de 3 manières différentes:
Inline - en utilisant l'attribut style à l'intérieur des éléments HTML
Internal - en utilisant l’élément <style> dans la section <head>
External - en utilisant l’élément <link> pour créer un lien vers un fichier CSS externe
• Le moyen le plus courant d'ajouter du CSS est de conserver les styles dans des fichiers
CSS externes. Cependant, dans ce cours, nous utiliserons des styles inline et internal,
car cela est plus facile à démontrer et plus facile pour vous de l'essayer vous-même.
HTML Tables
• Les tableaux HTML permettent aux développeurs Web d'organiser les données en
lignes et en colonnes.
Define an HTML Table
La balise <table> définit un tableau HTML.
Chaque ligne de tableau est définie avec une balise <tr>.
Chaque en-tête de table est défini avec une balise <th>.
Chaque cellule de table est définie avec une balise <td>.
Par défaut, le texte des éléments <th> est en gras et centré.
Par défaut, le texte des éléments <td> est régulier et aligné à gauche.
HTML Table - Add a Border
• Pour ajouter une bordure à un tableau, utilisez la propriété CSS border:
HTML Table - Ajouter une caption
• Pour ajouter une légende à un tableau, utilisez la balise <caption>:
HTML Lists
• Les listes HTML permettent aux développeurs Web de regrouper un ensemble
d'éléments associés dans des listes.
HTML Block and Inline Elements
Chaque élément HTML a une valeur d'affichage par défaut, en fonction du type
d'élément dont il s'agit.
Il existe deux valeurs d'affichage: block et inline.
Block-level Elements
• Un élément block-level commence toujours sur une nouvelle ligne et occupe toute la
largeur disponible (s'étend aussi loin que possible vers la gauche et la droite).
Inline Elements
• Un élément inline ne commence pas sur une nouvelle ligne et ne prend que la
largeur nécessaire.
• Par exemple, un élément <span> à l'intérieur d'un paragraphe.
HTML class Attribute
L'attribut class est utilisé pour spécifier une classe pour un élément HTML.
Plusieurs éléments HTML peuvent partager la même classe.
L'attribut class est souvent utilisé pour pointer vers un nom de classe dans une
feuille de style.
Il peut également être utilisé par une fonction JavaScript ou CSS pour accéder et
manipuler des éléments avec un nom de classe spécifique.
Using The class Attribute
Dans l'exemple
suivant, nous avons
deux éléments
<span> avec un
attribut class avec
la valeur "note".
Les deux éléments
<span> seront
stylés de la même
manière selon la
définition du style
.note dans la
section head:
HTML id Attribute
L'attribut id est utilisé pour spécifier un identifiant unique pour un élément HTML.
Vous ne pouvez pas avoir plus d'un élément avec le même identifiant dans un
document HTML.
L'attribut id est utilisé pour pointer vers une déclaration de style spécifique dans une
feuille de style.
Il est également utilisé par JavaScript pour accéder et manipuler l'élément avec l'ID
spécifique.
Using The id Attribute
Dans l'exemple suivant, nous avons un élément <h1> qui pointe vers le nom d'id
"myHeader".
Cet élément <h1> sera stylisé selon la définition de style #myHeader dans la section
head.
HTML File Paths
Un chemin de fichier décrit l'emplacement d'un fichier dans la structure de dossiers
d'un site Web.
Les chemins de fichiers sont utilisés lors de la liaison à des fichiers externes, comme
les pages webs, images, Feuilles de style et JavaScripts.
HTML Responsive Web Design
• La conception Web Responsive consiste à créer des pages Web qui semblent bien sur tous les
appareils!
• HTML Responsive consiste à utiliser HTML et CSS pour redimensionner, masquer, réduire ou
agrandir automatiquement un site Web, pour le rendre bien sur tous les appareils (ordinateurs
de bureau, tablettes et téléphones):
HTML Responsive Web Design
• Pour créer un site Web responsive, ajoutez la balise <meta> suivante à toutes vos pages Web:
• Cela définira la fenêtre d'affichage de votre page, ce qui donnera au navigateur des
instructions sur la façon de contrôler les dimensions et la mise à l'échelle de la page.
Responsive Images
• Responsive images sont des images qui s'adaptent à toutes les tailles de navigateur.
• Si la propriété CSS width est définie sur 100%, l'image sera responsive et sera mise à l'échelle
de haut en bas.
Show Different Images Depending on Browser Width
• L'élément HTML <picture> vous permet de définir différentes images pour différentes
tailles de fenêtre de navigateur.
Responsive Text Size
• La taille du texte peut être définie avec une unité "vw", ce qui signifie la "largeur de la fenêtre".
• De cette façon, la taille du texte suivra la taille de la fenêtre du navigateur:
HTML Forms
Un formulaire HTML est utilisé pour collecter les entrées utilisateur.
Les données entrées par l’utilisateur sont souvent envoyées à un serveur pour
traitement.
<form> Element
L'élément <form> est utilisé pour créer un formulaire
HTML pour l'entrée utilisateur
L'élément <form> est un conteneur pour différents
types d'éléments d'entrée, tels que: champs de texte,
cases à cocher, boutons radio, boutons d'envoi, etc.
The <label> Element
• Le tag <label> définit une étiquette pour de nombreux éléments de formulaire.
• L'élément <label> est utile pour les utilisateurs de lecteurs d'écran (personne non-voyante) , car le
lecteur d'écran lira à haute voix l'étiquette lorsque l'utilisateur se concentrera sur l'élément
d'entrée.
• L'élément <label> aide également les utilisateurs qui ont des difficultés à cliquer sur de très petites
régions (telles que des boutons radio ou des cases à cocher) - car lorsque l'utilisateur clique sur le
texte dans l'élément <label>, il bascule le bouton radio / case à cocher.
• L'attribut for de la balise <label> doit être égal à l'attribut id de l'élément <input> pour les lier.
<input> Element
L'un des éléments de formulaire les plus utilisés est l'élément <input>.
L'élément <input> peut être affiché de plusieurs manières, selon l'attribut type.
Input Types Text
• <input type = "text"> définit un champ de saisie de texte sur une seule ligne:
Input Type Password
• <input type = "password"> définit un champ de mot de passe:
Input Type Radio
• <input type = "radio"> définit un bouton radio.
• Les radio buttons permettent à un utilisateur de sélectionner UNIQUEMENT UN choix
parmi un nombre limité de choix:
Input Type Checkbox
• <input type = "checkbox"> définit une case à cocher.
• Les cases à cocher permettent à un utilisateur de sélectionner ZERO ou PLUS
d'options d'un nombre limité de choix.
Input Type Date
• <input type = "date"> est utilisée pour les champs de saisie qui doivent contenir une
date.
• En fonction de la prise en charge du navigateur, un sélecteur de date peut apparaître
dans le champ de saisie.
Input Type Submit
<input type = "submit"> définit un bouton pour soumettre des données de formulaire à un
gestionnaire de formulaire (form-handler).
Le form-handler est généralement une page de serveur avec un script pour traiter les données
d'entrée.
Le form-handler est spécifié dans l'attribut action du formulaire.
HTML Input Attributes- size
L'attribut size spécifie la largeur visible, en caractères, d'un champ d'entrée.
La valeur par défaut de la taille est 20.
L'attribut size fonctionne avec les types d'entrée suivants: text, search, tel, url, email, and
password.
HTML Input Attributes- pattern
L'attribut pattern spécifie une expression régulière par rapport à laquelle la valeur du champ
d'entrée est vérifiée, lorsque le formulaire est soumis.
L'attribut pattern fonctionne avec les types d'entrée suivants: text, date, search, url, tel, email, and
password.
Un champ de saisie qui ne peut contenir que trois lettres (pas de chiffres ni de caractères spéciaux):
HTML Input Attributes- placeholder
L'attribut placeholder spécifie un indice court qui décrit la valeur attendue d'un champ
d'entrée (un exemple de valeur ou une brève description du format attendu).
L’indice s'affiche dans le champ de saisie avant que l'utilisateur n'entre une valeur.
L'attribut placeholder fonctionne avec les types d'entrée suivants: text, search, url, tel, email,
and password.
HTML Input Attributes- required
L'attribut required spécifie qu'un champ de saisie doit être rempli avant de soumettre le
formulaire.
L'attribut required fonctionne avec les types d'entrée suivants: text, search, url, tel, email,
password, date pickers, number, checkbox, radio, and file.
HTML Input Attributes- list
• L'attribut list fait référence à un élément <datalist> qui contient des options
prédéfinies pour un élément <input>.
HTML Multimedia
Le multimédia sur le Web comprend le son, la musique, les vidéos, les films et les animations.
Il peut s'agir de presque tout ce que vous pouvez entendre ou voir, comme des images, de la
musique, du son, des vidéos, des disques, des films, des animations, etc.
Les fichiers multimédias ont des formats et différentes extensions comme: .wav, .mp3, .mp4, .mpg,
.wmv et .avi.
HTML Audio
L'élément <audio> est utilisé pour lire un fichier audio sur une page Web.
Il existe trois formats audio pris en charge: MP3, WAV et OGG. Le support du navigateur pour les
différents formats est:
HTML Video
Il existe de nombreux formats vidéo.
Les formats MP4, WebM et Ogg sont pris en charge par HTML.
L’élément <video> est utilisé pour afficher une vidéo sur une page Web.
HTML Video
Il existe trois formats vidéo pris en charge: MP4, WebM et Ogg.
Le support du navigateur pour les différents formats est:
HTML YouTube Videos
Définissez un élément <iframe> dans votre page Web.
Laisser l' attribut src pointer vers l'URL de la vidéo.
Utilisez les attributs width et height pour spécifier la dimension du lecteur.