HTML - CSS - JS
Tout ce qui te faut pour devenir le meilleur en HTML - CSS - JS !
HTML - CSS - JS
Toutes les leçons proposées
HyperText Markup Language !
HyperText Markup Language !
1. STRUCTURE D'UNE PAGE WEB
Apprendre plus2. LES BALISES DE BASE
Apprendre plus3. LES BASES D'UN SITE WEB
Apprendre plus4. LA SYNTAXE HTML
Apprendre plus5. ELEMENTS DE STRUCTURATION DU CONTENU
Apprendre plus6. LES ELEMENTS DE "MISE EN FORME" DU TEXTE
Apprendre plus7. LES LIENS DANS LES DOCUMENTS HTML
Apprendre plus8. LES ELEMENTS DE LISTE
Apprendre plus9. AJOUTER DES IMAGES AVEC LA BALISE <img>
Apprendre plus10. LES TABLEAUX HTML
Apprendre plus11. LES FORMULAIRES
Apprendre plus12. CSS : INTRODUCTION ET NOTIONS DE BASE
Apprendre plus13. APPLIQUER UN STYLE
Apprendre plus14. LA SYNTAXE CSS
Apprendre plus15. QUELQUES METIERS DU WEB
Apprendre plus
La structure d'une page WEB !
Quelle est la structure d'une page WEB ?
|
<!DOCTYPE html> <html lang="fr"> mmm <head> <meta charset="UTF-8"> <title> Premiers pas HTML en ICN </title> <meta http-equiv="content-Language" content="fr"/> <link rel="stylesheet" href="style.css"/> </head> mmm <body> <header>Contenu de l’en-tête</header> <nav>Contenu du menu de navigation</nav> <section>Contenu section principale</section> <footer>Contenu du pied de page</footer> </body> mmm </html> |
Donne le type de code Début du code avec la langue mmm Infos non affichés sur la page (contient les informations destinées au navigateur) Encodage des caractères Titre de l’onglet Langage Liaison avec une feuille de style (CSS) Boucle de fermeture du HEAD mmm Corps du contenu (contient les informations destinées aux lecteurs de la page) Contenu de l'en-tête Contenu du menu de navigation Contenu de la section principale Contenu du pied de page Boucle de fermeture du corps BODY mmm Boucle de fermeture du code HTML |
La notion de doctype
• Permet au navigateur de savoir quelle version de HTML (ou XHTML) est utilisée sur la page.
• Obligatoire pour valider une page (validateur W3C).
• Pas de doctype = "Quirks" mode : le navigateur fait ce qu'il peut avec ce qu'il trouve, en mode rétrto-compatibilité (peut expliquer certains bugs sur IE).
<!DOCTYPE html>
Le doctype HTML5
• Plus simple, plus concis.
• "Future proof" : autant commencer aujourd'hui !
• <!DOCTYPE html>
• Vous pourrez utiliser des éléments HTML5 qui sont finalisés.
La balise <html>
• Tout document HTML commence par la balise <html> qui se ferme en fin de document : <html>.
• La balise <html> contient nécessairement deux balises définissant l'en-tête (<head>) et le corps (<body>) du document.
L'attribut lang
• Permet de spécifier la langue de traitement du document global.
• Indexation dans la bonne langue pour les moteurs de recherches (fr : Français, es : Espagnol, en : Anglais)
• Synthèse vocale.
• Vérification orthographique des formulaires.
<html lang="fr">
La balise <head>
• Détermine l'en-tête du document et contient les méta-informations.
La balise <title>
• On y trouve la balise <title> qui sera le titre du document.
• La balise <title> sert en référencement (repris dans les résultats de recherche).
• La balise <title> est affichée dans l'onglet du navigateur.
La balise <head> : les balises meta
• On y ajoutera également les appels pour les feuilles de style CSS et certaines JavaScripts.
• On peut y trouver des balises "meta" parmi lesquelles :
<meta charset="UTF-"/>
permet de définir l'encodage de caractère de la page (à mettre directement sous le <head>)
<meta name="description" content="description pour le référencement"/>
affiché dans les résultats de recherches
La balise <body>
• Délimite le contenu de la page.
• Le contenu est constitué de texte, images et autres éléments qui seront affichés.
<body>Contenu de la page</body>
Les commentaires dans le HTML
<!-- Création d'un commentaire -->
Il est possible d'écrire du texte qui ne sera visible que dans le code source et non sur le site : un commentaire.
<p>Ce texte apparait sur mon site <!-- Ce texte apparait que dans le code source --></p>
Les balises de bases !
Quelles sont les balises de bases ?
Comment sont construites les balises ?
< |
Balise ouvrante de la balise d'ouverture |
ELEMENT |
Nom de l'élément |
attribut |
Propriété de cet élément (obligatoire pour certains) |
valeur |
Valeur fermante de la balise d'ouverture |
> |
Balise fermante de la balise d'ouverture |
contenu |
Contenu apparaissant dans le navigateur |
</ELEMENT> |
Balise de fermeture |
mmm
|
Voici un exemple de balise. Celle-ci permet de créer un lien vers un site WEB <a href="https://www.om.fr/fr"l>Site Web de l'OM</a> |
Les balises de structures de texte !
Mise en page de commentaire en HTML <!-- Commentaires --> |
Insertion d'une image <img> src="URL_image" alt="nom_image"</img> |
Longueur de l'image en pixels (px) width = Longueur en pixels (px) |
Hauteur de l'image en pixels (px) height = hauteur en pixels (px) |
Aligner le texte à gauche, droite ou centrer align = left ou right ou center |
Insérer un lien et lui donner un titre <a href="lien">Titre</a> |
Titre de niveau 1 (header) <h1> ... </h1> |
Titre de niveau 2 <h2> ... </h2> |
Titre de niveau 3 <h3> ... </h3> |
Titre de niveau 4 <h4> ... </h4> |
Titre de niveau 5 <h5> ... </h5> |
Titre de niveau 6 <h6> ... </h6> |
Paragraphe <p> ... </p> |
Centrer le texte <center> ... </center> |
Ligne horizontale (séparation) <hr/> |
Saut de ligne <br/> |
Les listes !
Liste non ordonée (composé de point) <ul> ... </ul> |
Liste ordonée (composé de chiffres) <ol> ... </ol> |
Éléments d'une liste <li> ... </li> |
Les tableaux !
Début du tableau <table> ... </table> |
Création d'une cellule d'en-tête (colonne en-tête) <th> ... </th> |
Création d'une nouvelle ligne <tr> ... </tr> |
Création d'une cellule (colonne) <td> ... </td> |
Titre du tableau <caption> ... </caption> |
Section de l'en-tête du tableau <thead> ... </thead> |
Section du corps du tableau <tbody> ... </tbody> |
Section du pied du tableau <tfoot> ... </tfoot> |
Les bases d'un site WEB !
Quelles sont les bases d'un site WEB ?
Une page Web c'est...
○ Un fichier HTML est un format de fichier "texte" éditable dont les éléments ont du sens.
○ Un fichier HTML est au format .html
○ Un fichier HTML peut contenir du texte, des images, des liens, des médias...
○ Un fichier HTML peut être liée à une autre page via des liens.
○ Faites CTRL + U et vous verrez une page HTML.
Un site Web c'est...
○ Un ensemble de pages liées entre elles.
○ Accessible en ligne depuis n'importe où.
Mais pas que...
○ Contenus textuels dans le fichier HTML, mais aussi des images, du sons, des vidéos, du CSS, du JavaScript, des polices d'écriture... Tous ces fichiers sont chargés dans le navigateur pour créer une page Web.
Le principe de "serveur Web"
○ Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un serveur web (http://www.mondomaine.fr)
Le client FTP
○ FTP : File Transfer Protocol, protocol de communication destiné à l'échange de fichiers sur un réseau TCP/IP.
○ Permet de "mettre en ligne" son site Web
○ Une sorte d'explorateur sur un serveur à distance
○ Exemple: FileZilla
Définition HTML
○ Hypertext Markup Language (HTML)
○ Langage de balises qui permet de structurer des pages
○ Différentes versions depuis 1989
○ Aujourd'hui : XHTML (2000-2006), HTML5
Le W3C
○ W3C : World Wide Web Consortium (1994)
○ TBLEE, fondateur du W3C et inventeur du HTML
○ Chargé de promouvoir la compatibilité des technologies dans les navigateurs
○ 378 entreprises membres qui peuvent faire des propositions (Microsoft, Apple, Mozilla, Opera, Adobe...)
○ Il propose un validateur qui permet de nous informer des erreurs de notre code.
La syntaxe HTML !
Quelle est la syntaxe HTML ?
Le principe de balise
• Les balises structurent le contenu de la page (texte, image...).
• Chaque balise a un rôle et donne du sens au contenu présenté.
• On peut imbriquer les balises les unes dans les autres.
• Chaque balise a un rôle et donne du sens au contenu présenté.
Le principe de balise
• Touche < du clavier pour ouvrir la balise : <
• Touche maj + < du clavier pour ouvrir la balise : >
• Le nom des balises est préfini dans les spécifications HTML, on ne peut donc PAS en inventer !
• Quelques exemples : <html>, <body>, <imgé>, <p>, <div>, <a>...
Le principe de balise
• Par convetion et pour faciliter la lecture du code, toute balise ouverte doit être fermée (sauf exception).
• Certaines balises bien particulières n'ont pas besoin d'être fermées, on les dit "auto-fermantes", elles n'ont ni contenu ni balise fermante.
• Note : je mets le / final par convetion, mais pas obligatoire.
Attributs et valeurs
Certaines balises peuvent être compétées par des attributs précisant certains paramètres (l'adresse des liens, source d'une image à afficher...).
• Une balise peut contenir plusieurs attributs.
• Les attributs sont des éléments prédéfinis dans le HTML on ne peut en "inventer".
• On peut les mettre entre simple quote (' '), double quote (" ") ou rien. Par convention, nous choisissons les doubles quotes (" ").
<div id="kittens"> // <fiv id=kittens>
• Les attributs sont toujours dans la balise ouvrante.
Exemples d'attributs
• src="" : donner la source (d'une image par exemple)
<img src="monimage.png" width="400" height="250" alt="img_chiens" />
• href="" : donner la destination d'un lien
<a href="http://www.google.fr">Texte du lien</a>
• id="" : donner un identifiant à l'élément que l'on pourra utiliser en CSS. Les IDs doivent être uniques par page.
<p id="monid">contenu</p>
• class="" : donner une classe à l'élément que l'on pourra utiliser en CSS. Les classes peuvent être dupliquées sur la page.
<p class="maclasse">contenu</p>
Les éléments de structuration du conteu !
Les éléments de structuration du conteu ?
La balise "division" <div>
|
|
• <div> est un conteneur.
• Cette balise n'a aucune valeur sémantique (aucun "sens").
• Élément de type bloc qui peut inclure n'importe quel autre balise HTML.
• Suivi d'un passage à la ligne.
• Permet de regrouper d'autres blocs de HTML (paragraphes, tableaux...) et de leur donner un style CSS commun.
• On peut imbriquer les balises les unes dans les autres.
• Chaque balise a un rôle et donne du sens au contenu présenté.
La balise "paragraphe" <p>
|
|
• Les paragraphes sont des éléments de type "bloc", suivis d'un passage à la ligne et d'une marge par défaut.
• On peut imbriquer un paragraphe dans un div.
• On ne doit PAS mettre un paragraphe dans un paragraphe.
Espaces insécables
• Il existe des entités HTML pour encoder certains caractères spéciaux comme les espaces insécables : ici ils sont tous.
• D'autres entités HTML ici.
Les titres h1 - h6
|
Voici les différents titres possible en HTML : <h1>Titre de niveau 1 H1 </h1> <h2>Titre de niveau 2 H2 </h2> <h3>Titre de niveau 3 H3 </h3> <h4>Titre de niveau 4 H4 </h4> <h5>Titre de niveau 5 H5 </h5> <h6>Titre de niveau 6 H6 </h6> |
|
• Il existe six niveaux de titre <h1> <h2> <h3> <h4> <h5> et <h6> (pas un de plus !).
• Un nouveau niveau provoque un passage à la ligne, les éléments de titre étant des éléments de bloc.
• La hiérarchisation visuelle est automatique (peut être modifiée via CSS).
• Il est possible d'avoir plusieurs titres de même niveau.
• On ne peut pas mettre un Hn dans un p ou un p dans un Hn.
Blockquote, une citation
• La balise <blockquote> marque une citation.
• Une citation est suivie d'un retour à la ligne.
• Exemple de blockquote stylé ici.
Les éléments de "mise en forme" du texte !
Les éléments de "mise en forme" du texte ?
L'élément <strong>
• <strong> élément sémantique qui marque du texte comme fortement mis en valeur.
• En "gras" par défaut dans les navigateurs.
<p>Du texte normal et <strong>du texte fortement mis en valeur</strong></p>
Du texte normal et du texte fortement mis en valeur
L'élément <em>
• <em> balise sémantique qui marque du texte comme en emphase (mis en évidence) sert à "insister" sur une partie du texte.
• En "italique" par défaut dans les navigateurs.
<p>Du texte normal et <em>du texte mis en emphatique</em></p>
Du texte normal et du texte mis en emphatique
L'élément <span>
• Un élément "générique" structurant de type "inline".
• Permet de styler facilement des morceaux de texte en CSS.
• Par défaut affiche son contenu sans le modifier.
• Aucune valeur sémantique.
• (L'équivalent d'un div, en ligne).
<p>Des livres <span>à la une</span></p>
Des livres à la une
D'autres éléments
• L'élément <sup> permet d'afficher un texte en exposant.
<p>E = mc<sup>2</sup></p>
E = mc 2
mmm
• L'élément <sub> permet d'afficher un texte en indice.
<p>H<sub>2</sub>O</p>
H2O
mmm
• L'élément <small> représente des annotations et des petits caractères comme les informations légales ou liées au copyright.
<p>Des petits caractères comme <small>les information légales ou liées au copyright</small></p>
Des petits caractères comme les information légales ou liées au copyright
Les liens dans les documents HTML !
Les liens dans les documents HTML ?
Formation d'un lien
• Le lien est un élément cliquable qui renvoie l'utilisateur sur une nouvelle page (ou lui permet de télécharger un fichier).
• Il est souvent stylé différemment (bleu souligné par défaut).
• Il peut renvoyer : vers un autre site (site externe), vers une autre page du site (lien interne), vers des fichiers (image, PDF...).
La balise <a>
• On appelle "ancre de lien" le texte à l'intérieur de la base.
• On ajoute l'attribut href="cible_du_lien" pour indiquer vers quelle page on veut envoyer l'utilisateur.
• On peut ajouter l'attribut title="titre du lien" pour ajouter une infobulle au survol et indiquer à l'utilisateur où il va arriver.
<a href="index.html" title="titre">Ancre du lien</a>
Lien externe vers un autre site
• La cible sera l'url (ou adresse) complète du site, http:// compris.
• Il s'agit d'un lien absolu car on indique l'adresse complète.
<a href="http://www.google.fr" title="Moteur de recherche Google">Lien externe vers google</a>
Lien vers un fichier du même répertoire
• Lorsque deux fichiers sont dans le même répertoire, il suffit d'appeler le nom du fichier comme cible.
• Ce sont des liens relatifs, car relatifs au site et dossier dans lequel ils se trouvent.
<a href="page1.html" title="Ma 1ère page">Ma page</a>
<a href="index.html" title="Accueil du site">Accueil</a>
Lien vers un autre répertoire
• On peut avoir des répertoires et sous-répertoires.
• On ajoute le nom du répertoire pour descendre : monrepertoire/mapage.html
• On ajoute ../ pour remonter si on se trouve dans un sous répertoire : ../index.html
Descendre dans un sous répertoire
• Depuis la racine index vers la page2.
<a href="page_interne/page2.html">Page2</a>
• Si on avait d'autres sous-répertoires.
<a href="page_interne /autre_sous_rep/page2.html" >Page2</a>
Remonter d'un répertoire
• Depuis la page2 vers l'accueil :
<a href="../index.html">Accueil</a>
• Si on veut remonter plusieurs répertoires (autant de ../ que de répertoires) :
<a href="../../index.html">Accueil</a>
Ouvrir un lien dans un nouvel onglet
• L'attribut target="_blank" permet d'ouvreeir un lien dans une nouvelle fenêtre/onglet en fonction du navigateur.
<a href="index.html" target="_blank">
Des liens "internes" ou ancres internes
• Comme dans Word, permet de renvoyer l'utilisateur à l'intérieur d'une page.
• La cible est définie par un id="ancre_du_lien".
• On utilise <a href="#ancre_du_lien"> pour créer le lien.
• Utilisé pour les liens "retour en haut de page", wikipédia...
• L'ancre apparait dans l'url.
Un lien vers une adresse mail
<a href="mailto:monmail@gmail.com">
Permet de créer un lien qui ouvrira automatiquement le client mail de la personne (à éviter car mail en dur donc récupérable pour spam => formulaire de contact).
mmm
<a href="tel:0600000000">
Permet de définir un numéro de téléphone à appeler.
Les éléments de liste !
Quels sont les éléments de liste ?
Les listes non ordonnées <ul>
|
<ul> <li>Element de liste 1</li> <li>Element de liste 2</li> <li>Element de liste 3</li> <ul> |
• Element de liste 1 • Element de liste 2 • Element de liste 3 |
• La balise <ul> permet de créer une liste non ordonée (unordered list). Il faut l'ouvrir en début de liste et la fermer après le dernier élément de la liste.
• La balise <li> permet de créer UN élément de la liste.
Les listes ordonnées <ol>
|
<ol> <li>Element numéroté de liste 1</li> <li>Element numéroté de liste 2</li> <li>Element numéroté de liste 3</li> <ol> |
1. Element numéroté de liste 1 2. Element numéroté de liste 2 3. Element numéroté de liste 3 |
• La balise <ol> permet de créer une liste ordonée et numérotée (par défaut dans le navigateur). Il faut l'ouvrir en début de liste et la fermer après le dernier élément de la liste.
• La balise <li> permet de créer UN élément de la liste.
Contenu d'une liste
• Les éléments <ul> et <ol> ne peuvent contenir que des éléments <li>.
• Chaque élément <li> peut contenir des éléments de blog ou des éléments incorposés (p, div, blockquote, h1...).
• Les listes peuvent s'imbriquer.
• On peut mélanger <ul> et <ol> à condition de les fermer correctement.
Exemple d'imbrication
|
|
Ajouter des images avec la balise <img> !
Ajouter des images avec la balise <img> ?
Le format JPEG
• JPEG : Joint Photographic Experts Group
• Le JPEG (.jpg, .jpeg) : format compressé qui réduit le poids des images pour le web (donc temps de chargement).
=> Pour la compression avec pertes très efficace pour des images photographiques.
Le format GIF
• GIF : Graphics Interchange Format
• Utilise 256 couleurs
• Compression sans perte basée sur la succession de pixels de même couleur.
• Couleur de transparence sans couche alpha.
• Animation.
• Extension .gif
• Quelques jolis GIFs ici.
=> Utilisé pour les logos.
Le format PNG
• PNG : Portable Network Graphics
• PNG8 : 256 couleurs, utilisé pour les images nécessitant peu de couleurs et motifs répétitifs.
• PNG24 : 16 millions de couleurs, transparence extension .png
=> Utilisé pour les icônes, logos et fichiers qui ont besoin d'un fond transparent.
RESUME
• Une photo : JPEG
• Une illustration avec peu de couleurs sans transparence importante : PNG8
• Une illustration avec beaucoup de couleurs : PNG24
• Une image animée : GIF
La balise <img>
• Balise de type inline : pas de retour à la ligne, peut-être insérée dans le corps du texte. On la place généralement dans un <p> ou un <div> mais peut se placer m'importe où dans le body.
• Balise auto-fermante.
<img src="ref_image" alt="description de l'image"/>
La balise <img> et source de l'image
Un attribut src="image.jpg" pour donner le chemin vers la source de l'image (même principe que pour les liens).
La balise <img> et attribut "alt"
• Un attribut alt="description du contenu de l'image" texte alternatif qui décrit le contenu de l'image et la remplace si l'image n'est pas téléchargée.
• L'attribut est obligatoire, mais il peut être vide pour les images décoratives (aide les personnes en situation de déficience visuelle à comprendre).
Attributs width et height
• Les attributs width et height peuvent etre ajoutés pour donner une taille à l'image.
• Sans width/height le navigateur "devine" la taille ce qui crée des sauts de page quand l'image se charge.
• En général, il vaut mieux le redimensionner avant dans un logiciel, plutôt que charger une grande image et la rétécir (performance).
• Attention à garder les propositions !
<img src="monimage.jpg" alt="description de l'image" width="300" height="450" />
L'attribut title
Attribut facultatif qui permet d'afficher une info-bulle au survol de la souris sur l'image.
<img src="image/logo.png" width="250" height="188" alt="cupcakes" title="cupcakes décorés faciles à réaliser" />
Intégrer une vidéo
La plupart des sites de vidéo proposent une intégration via iframe qui se présente sous cette forme :
<iframe width="560" height="315" src="url de la vidéo" frameborder="0" allowfullscreen ></iframe>
Intégrer du son
Beaucoup de sites de partages audio proposent également une intégration via iframe qui se présente sous cette forme :
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="url du son" ></iframe>
D'autres types d'iframe
• Généralement les sites qui vous proposent d'intégrer leur contenu vont vous proposer une iframe.
• C'est le cas de Google Maps pour des cartes interactives.
• C'est le cas pour Slideshare pour partager des diaporamas et présentations.
• C'est le cas pour Vimeo, un autre service de partage de vidéos.
• C'est le cas les boites de partages de réseaux sociaux comme Facebook.
Les tableaux HTML !
Les tableaux HTML ?
Introduction
• Un tableau sert à organiser des informations structurées sous forme tabulaire.
• Il se compose de lignes organisées elle-mêmes en cellules.
Créer un tableau <table>
• La balise <table> </table> permet d'indiquer le début et la fin du tableau.
• La balise <tr> caractérise une nouvelle ligne.
• La balise <td> marque le contenu d'une cellule dans une ligne.
Exemple de tableau simple
Le nombre d'éléments <td> au sein des éléments <tr> doit rester le même dans la mesure ou chaque ligne possède le même nombre de cellules, nombre qui correspond au nombre de colonnes du tableau.
Un avant-gout de CSS
Pour la suite et y voir plus clair, nous allons ajouter une bordure à notre tableau avec la propriété CSS.
Ajouter une en-tête avec <th>
• <th> peut remplacer <td> pour créer une cellule d'en-tête au tableau.
• Par défaut affiché en gras et centré dans les navigateurs.
Ajouter une titre au tableau
• On utilise <caption> pour donner un titre au tableau.
• La balise se place au début du tableau.
Fusion de cellules
• Il est possible de fusionner certaines cellules entre elles avec l’attribut colspan="nombredecellules" qui se place sur la cellule (th ou td).
• La valeur numérique de cet attribut précise le nombre de colonnes du tableau que couvre la cellule.
Fusion de lignes
Il est possible de fusionner des lignes avec l’attribut rowspan="nombredelignes" qui se place sur la cellule (th ou td).
Les formulaires !
Les formulaires ?
Introduction
• Un tableau sert à organiser des informations structurées sous forme tabulaire.
• Il se compose de lignes organisées elle-mêmes en cellules.
Les formulaires sont partout autour de nous
Le formulaire sert à récupérer des données que l’utilisateur va entrer et les envoyer au serveur pour un traitement (en PHP par exemple) : login, formulaire de contact et même le chat de Facebook.
La balise <form>
• Balise principale du formulaire
• Première méthode : method="get" : limitée à 255 caractères, informations passées dans la barre d'adresse.
• Deuxième méthode : method="post" : envoie les données dans le corps de la requete sans passer par la barre d'adresse, c'est la méthode la plus utilisée.
• Action : l'adresse du fichier ou programme qui va traiter les données.
<form method="post" action="traitement.php">
Exemple de la balise form en action
Par défaut, si elle est vide, c'est comme n'importe quel élément, rien n'est affiché.
LA SUITE BIENTOT
CSS : Introduction et notion de base !
CSS : Introduction et notion de base ?
Introduction
• CSS : Cascading Style Sheets
• CSS : Feuille de style en cascade
• Permettent de générer la présentation d'une page HTML, séparer la strcture (HHTML) de sa présentation (CSS).
• Ensemble de régèles stylistiques applicables à un, ou plusieurs documents HTML (gain de taille du fichier HTML).
• Facilite la mise à jour graphique, favorise l'accessibilité.
• Gestion des différents médias possible (print, creen, mobile...).
• En bref, couleur de texte, image de fond, style de police, menu à gauche ou droite : c'est CSS qui va contrôler tout ca !
Un peu d'Histoire
• Le CSS est né en 1996.
• Avant, on utilisait des balises de présentation directement dans le HTML.
• CSS1, CSS2, aujourd'hui la version finalisée est CSS2.1
• CSS3, en cours de rédaction, certaines propriétés sont finalisées, d'autres moins (utilisable à différents degrès aujourd'hui).
Différents rendus entre les navigateurs
• C'est le navigateur qui va interpréter le CSS, des différences de rendus sont donc possibles.
• Le pixel perfect n'existe pas !
Différents degrès de compréhension
• Certains navigateurs ne connaissent pas (encore) toutes les propriétés.
• Tester le rendu graphique sur le plus de navigateurs possibles.
• Caniuse donne des listes de compatibilité de certaines propriétés.
Console de debut
CLIC DROIT + INSPECTER
Appliquer un style !
Appliquer un style, oui mais où ?
Le CSS "en ligne" dans la balise HTML
• Attribut style="...;"
• "Je veux des titres roses" : <h1 style="color:pink">
• "Je veux des sous titres avec une couleur de fond violette" : <h2 style="background-color:purple;">
Le CSS "interne" dans l'en-tête du HTML
• On place une balise <style> dans la balise <head> du document.
• "Je veux changer la couleur de tous les titres H2" :
<style type=text/css">
h2 {
color:#fff;
}
</style>
• Avantage : Possibilité d'appliquer une règle sur tous les mêmes éléments d'un même document.
• Inconvénient : Ne s'applique qu'à ce document, et non au site entier.
• Inconvénient : Il faut donc modifier le CSS sur chaque page (ex : si on a 10 pages, modifier les styles sur les 10 fichiers).
• MAIS certains plugins de CMS (WordPress par exemple) mal conçus l'utilisent encore. Vous le verrez aussi dans le code de newsletters.
La/les feuille(s) de styles externe(s)
• Nous utiliserons les mêmes conventions de chemin que pour les images et pages.
• Création d’un nouveau fichier appelé "style.css" (notez l’extension .css ici) et on lie la feuille de styles au HTML.
• On "lie" la feuille de style au document HTML avec une balise <link> dans le <head>.
< rel="stylesheet" href="style.css"/>
• Avantage : Séparation totale de la structure et de la présentation : possibilité d’avoir des présentations alternatives.
• Avantage : Possibilité d’appliquer la même feuille de style sur plusieurs pages (donc le site en entier) sans devoir la dupliquer.
• Avantage : Cohérence de la présentation sur tout le site et les pages futures.
RESUMER
• index.html : pour le contenu
• style.css : pour la mise en page / présentation
Le principe de règle CSS !
Qu'est-ce que le principe de règle CSS ?
Dans un code CSS !
Dans un code CSS, vous allez avoir 3 éléments importants et 1 notion à retenir.
Le sélecteur :
Le sélecteur peut être défini par le nom de la balise (h1, h2, p, div, section...) ou par une annotation spécifique à un attribut renseigné dans l’élément HTML tel que les attributs class et id.
N’oubliez pas après votre sélecteur de créer 2 accolades (une ouvrante et une fermante) et de définir vos règles de style (propriété + valeur) entre ces accolades.
Propriété :
Il existe différentes propriétés CSS possiblement redéfinissable ainsi que de multiples valeurs (au moins 2) pour chaque propriété.
Par exemple, pour un paragraphe HTML (balise <p> ... </p>) on va pouvoir modifier sa couleur (color), sa taille (font-size) ou son alignement (text-align) qui sont les propriétés de style de l’élément HTML « paragraphe ».
Valeur :
La valeur suit la propriété après deux points :, c’est la nouvelle mise en forme qui sera attribué à la propriété de l’élément HTML. Pour chaque propriété, il existe plusieurs valeurs définies possibles. Parfois une propriété pourra avoir une valeur variable non définie.
Exemple : la propriété text-align qui détermine l’alignement d’un textepeut prendre les valeurs définies suivantes : left, right, center ou justify.
Règle :
La règle (ou déclaration) est l’association d’une propriété et de sa valeur. Elle cible un ou plusieurs éléments HTML à travers un sélecteur et se termine tout le temps par un ;.
Commentaire
Pour mettre du texte en commentaire en CSS, il suffit de l'écrire de la manière suivante /* ... */.
Quelques métiers du WEB !
Quelques métiers du WEB ?
DEVELOPPEUR WEB♣ Recueille le besoin du client ♣ "Pisse" du code ♣ Crée des bugs ♣ Recherche la solution sur Google mmm Autres noms : ○ Développeur(se) FullStack ○ Développeur(se) Back-End ○ Développeur(se) Front-End |
WEB DESIGNER♠ Renvoie le besoin du client ♠ Conçoit le parcours utilisateur ♠ Réalise les maquettes graphiques ♠ Intègre sa propre maquette mmm Autres noms : ○ Graphiste ○ Info Graphiste |
COMMUNITY MANAGER♥ Recueille le besoin du client ♥ Conçoit la stratégie de communication ♥ Rédige les contenus Web ♥ Prie Google pour un bon référencement mmm Autres noms : ○ Brand manager ○ Rédacteur(trice) de contenus Web ○ Chargé(e) de communication |
ADMINISTRATEUR RESEAU♦ Attend la fin du développement ♦ Déploie l'application sur des serveurs ♦ Surveille le trafic ♦ Blâme les failles de sécurité sur les développeurs mmm Autres noms : ○ Administrateur réseau ○ Architecte des systèmes d'information |
Cascading Style Sheets !
Cascading Style Sheets !
1. LE PRINCIPE DE REGLE CSS
Apprendre plus2. LES SELECTEURS
Apprendre plus3. DES BOITES EN CSS ?
Apprendre plus4. LES PROPRIETES CSS
Apprendre plus5. LES PROPRIETES CSS
Apprendre plusGENERATEUR COULEUR
Apprendre plus
Le principe de règle CSS !
Qu'est-ce que le principe de règle CSS ?
Dans un code CSS !
Dans un code CSS, vous allez avoir 3 éléments importants et 1 notion à retenir.
Le sélecteur :
Le sélecteur peut être défini par le nom de la balise (h1, h2, p, div, section...) ou par une annotation spécifique à un attribut renseigné dans l’élément HTML tel que les attributs class et id.
N’oubliez pas après votre sélecteur de créer 2 accolades (une ouvrante et une fermante) et de définir vos règles de style (propriété + valeur) entre ces accolades.
Propriété :
Il existe différentes propriétés CSS possiblement redéfinissable ainsi que de multiples valeurs (au moins 2) pour chaque propriété.
Par exemple, pour un paragraphe HTML (balise <p> ... </p>) on va pouvoir modifier sa couleur (color), sa taille (font-size) ou son alignement (text-align) qui sont les propriétés de style de l’élément HTML « paragraphe ».
Valeur :
La valeur suit la propriété après deux points :, c’est la nouvelle mise en forme qui sera attribué à la propriété de l’élément HTML. Pour chaque propriété, il existe plusieurs valeurs définies possibles. Parfois une propriété pourra avoir une valeur variable non définie.
Exemple : la propriété text-align qui détermine l’alignement d’un textepeut prendre les valeurs définies suivantes : left, right, center ou justify.
Règle :
La règle (ou déclaration) est l’association d’une propriété et de sa valeur. Elle cible un ou plusieurs éléments HTML à travers un sélecteur et se termine tout le temps par un ;.
Commentaire
Pour mettre du texte en commentaire en CSS, il suffit de l'écrire de la manière suivante /* ... */.
Les sélecteurs en CSS !
Quels sont les sélecteurs en CSS ?
Les sélecteurs peuvent être de différents types et formés de différentes manières.
Ici, nous allons simplement nous intéresser aux principaux types de sélecteurs qui sont les suivants.
Les sélecteurs de type
(sélecteur d'élément ou sélecteur de balise)
Le premier sélecteur qui permet de cibler un ensemble d’éléments est le sélecteur de type. Ce sélecteur utilise le nom d’un élément, d’une balise HTML, pour appliquer une règle CSS sur toute les balises d’un même type.
Les sélecteurs d'identifiant
Les sélecteurs d'identifiants utilisent l’attribut « id » des éléments HTML pour les cibler.
Ajoutez un « # » devant la valeur d’un identifiant pour y ajouter ensuite des déclarations CSS.
Les sélecteurs de classe
Les sélecteurs de classe utilisent l’attribut « class » des éléments HTML pour les cibler.
En CSS, il faut ajouter un « . » devant le nom d’une classe pour pouvoir lui appliquer des propriétés et valeurs CSS. Tous les éléments avec la classe ciblée seront affectés pas la règle CSS définie.
Le sélecteur universel
Ce sélecteur est particulier, car il permet de cibler un ensemble d’éléments dans un document.
Utilisez-le seul pour pouvoir modifier tous les éléments d’un document dans une seule règle CSS.
Ce sélecteur est représenté par le caractère « * ».
Les sélecteurs d'attribut
Les sélecteurs d’attributs sont des sélecteurs simples permettent de cibler des éléments HTML précis en fonction de leurs attributs et de leurs valeurs.
Entourez le nom de l’attribut cible avec des « [ ] » pour cibler cet attribut puis vous pouvez préciser la valeur que l’attribut doit avoir pour être ciblé en ajoutant sa valeur à la suite précédée d’un « = ».
Les sélecteurs d’attribut peuvent être plus complexes en combinant le sélecteur d’attribut avec un autre type de sélecteur. Par exemple en sélectionnant un élément contenant une classe et un attribut précis.
Des boites en CSS ?
Qu'est-ce que les boites en CSS ?
En HTML, presque tous les éléments sont des sortes de boites (ou « conteneur » nommé « container » en anglais ») positionnées les unes au-dessus des autres ou même imbriquées entre-elles.
Grâce au CSS, on va pouvoir agir sur ces boites pour définir leurs dimensions, couleurs, bordures, positions et plus encore./p>
Il est facile de se rendre compte qu’un élément HTML comme un paragraphe <p>...</p> est seulement une « boîte » contenant du texte.
Vous pouvez définir une bordure à un élément HTML pour vous rendre compte des limites de ce conteneur.
Élément HTML <p>...</p> contenant du texte avec une bordure (border) et une largeur (width) définie en CSS.
Ces boîtes ou conteneurs permettent en CSS d’agencer la structure HTML de votre site comme vous le désirez. Chaque boîte a 3 propriétés « basiques » permettant de se définir dans un espace défini :
- padding : cette propriété permet de définir une marge entre le contenu d’une boîte et sa limite (marge intérieure ou « remplissage »)
- border : cette propriété agit sur la bordure ou « limite » de la boîte
- margin : Cette propriété sert à créer une marge entre la bordure de la boîte et les autres boîtes (marge extérieure).
Plein d’autres propriétés sont accessibles en CSS pour manipuler ces boîtes, voici un petit panel des possibilités :
- width et height : respectivement permet de manipuler la largeur et la hauteur de la boîte
- background-color : ajoute un fond de couleur au conteneur
- text-shadow : permet d’ajouter un ombrage à la boîte
- position : pour définir le type de positionnement du conteneur
Conclusion
Le code CSS est indispensable à l’HTML si vous désirez avoir un site web digne de ce nom.
C’est un tout nouveau code à apprendre et à maitriser qui peut paraître simple aux premiers abords mais qui renferme d’immenses possibilités en termes de design et même de performance web.
Pour maitriser le CSS et créer un « joli » site web, il est nécessaire de suivre tous mes conseils.
Si vous n’arrivez pas reproduire en CSS le résultat attendu sur votre maquette de site ou que vous n’avez pas le temps de créer par vous-même l’esthétique de votre site web, n’hésitez pas à me contacter !
Les principales propriétés CSS !
Quelles sont les principales propriétés CSS ?
Les propriétés de style TEXTE
color : permet de colorer le texte
color: red;
color: #ff0000;
font-size : premet de modifier la taille du texte
font-size: 16px;
font-size: 1em;
font-weight : change la graisse du texte
font-weight: 400;
font-weight: 700;
font-weight: bold;
text-align : permet d'aligner le texte à gauche, centré, à droite, justifié...
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
text-decoration : permet de souligner le texte
text-decoration: underline;
text-decoration: dashed underline overline;
text-decoration: line-through;
text-decoration: wavy overline red;
text-decoration: none;
Les propriétés pour le style des blocs
background : cette propriété permet d'ajouter un arrière plan àvos éléments, il peut être une image, un dégradé ou simplement une couleur linéaire (exemple :
background: url('/image.jpeg');
background: linear-gradient(to right, red, blue);
background: #efefef;
height : permet de définir une taille fixe pour la hauteur du blog
height: 250px;
height: 100%; //Pour que cet effet marche, son parent doit avoir une hauteur spécifiée.
height: 100vh; //Taille en rapport à la hauteur de l'écran.
width : permet de définir une taille fixe pour la largeur du blog
width: 250px;
width: 100%;
width: 100vw; //Taille en rapport à la largeur de l'écran
box-shadow : Permet d’ajouter une ombre derrière un bloc. Il demande au moins 4 valeurs : le décalage horizontal (px), le décalage vertical (px), la taille de l’ombre (px), la couleur (préférer l’utilisation du « rgba » afin d’avoir un contrôle direct sur son opacité).
box-shadow: 0 4px 15px rgba(0,0,0,0.4);
position : la manière dont se comporte un blog sur une page peut être différente
position: relative; : la position relative est la plus courante, cette position permet au bloc d’hériter de la position de son parent, le bloc devient donc relatif à son parent. Pour faire simple, la position relative permettra au bloc d’occuper la place, et des éléments frères avec la position relative feront qu’ils se suivront.
position: absolute; : la position absolute est le contraire de la position relative, elle permet au bloc de n’occuper aucune place par rapport à son parent. Attention du coup car le risque c’est que votre texte vienne s’enchevêtrer avec ses éléments frères. On défini fréquemment avec cette position un « top » et un « left » (ou « bottom », ou « right »). Ces définitions permettent de situer le bloc par rapport à son parent.
position: absolute;
top: 0;
left: -50px;
position: fixed; : cette position réagit exactement comme la position absolute, cependant son référent principal n’est plus son parent mais l’écran.
display : l’utilisation de la propriété display peut avoir plusieurs rôles : soit pour cacher un élément, soit pour organiser l’affichage de ses enfants, soit pour réagir de manière à n’utiliser que la largeur que ses enfants utilisent…
display: none; : cette valeur « none » cache complètement un élément et ses enfants de la page. Attention cependant car il ne supprime pas pour autant le HTML !
display: block; : le display block permet d’afficher un élément, et prend automatiquement toute la largeur disponible.
display: inline-block; : le inline-block permet d’afficher un élément, mais en utilisant que la largeur nécessaire pour ses enfants.
display: flex; : le display flex permet de faire réagir ses éléments enfants de manière automatique. Il est très utile pour le comportement responsive d’une page, ou bien pour organiser les sous-éléments de manière automatique.
display: grid; : le display grid permet d’afficher les sous-éléments sous forme de tableau, mais avec une structure choisie. L’utilisation du display grid peut devenir très complexe et nécessite un apprentissage à part entière, mais se révèle extrêmement puissante.
overflow : l’overflow permet d’autoriser ou non l’affichage des enfants du blocs en dehors de celui-ci. Par exemple, si un élément enfant contient une image plus grande que le bloc, l’utilisation d’un « overflow: hidden; » coupera tout ce qui dépasse !
overflow: hidden;
overflow: visible;
Les espacements/contours en CSS
margin : permet de contrôler les marges extérieures d'un bloc
margin: 15px; //Ajoute 15px à toutes les marges
margin: 15px 25px; //Ajoute 15px aux marges haut-bas, et 25px aux marges droite-gauche
margin: 15px 20px 25px 10px; //Ajoute des marges dans l'ordre respectif : haut-droite-bas-gauche;
margin-top: 15px;
margin-right: 20px;
margin-bottom: 25px;
margin-left: 15px;
padding : permet de contrôler les marges intérieurs d'un bloc
padding: 15px; //Ajoute 15px à toutes les marges
padding: 15px 25px; //Ajoute 15px aux marges haut-bas, et 25px aux marges droite-gauche
padding: 15px 20px 25px 10px; //Ajoute des marges dans l'ordre respectif : haut-droite-bas-gauche;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 25px;
padding-left: 15px;
border : permet de contrôler l’espace central d’un bloc, il se situe entre le margin et le padding. Cependant, contrairement à ces derniers, il est possible de lui attribuer un style et une couleur !
border: 10px;
border: 10px solid blue;
border-top: 5px solid green;
border-right: 5px solid red;
border-bottom: 5px solid orange;
border-left: 5px solid rgba(0,0,0,0.15);
border-radius : permet d'arrondir les angles d'un bloc
border-radius: 10px;
border-radius: 10px 15px 10px 25px;
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 25px;
Les effets en CSS
transition : permet d’adoucir l’état CSS d’un élément vers un autre. Il est souvent employé sur des éléments réagissant au survol de la souris. Il prend en paramètres : le nom de la propriété CSS sur laquelle on veut que la transition agisse (on peut aussi mettre « all » pour l’affecter sur toutes), le temps de transition en secondes, en dernier paramètre on peut mettre une valeur de courbe d’accélération ou de décélération sur la transition.
transition: all .15s ease-out;
transition: background 1s ease-in-out;
transition: box-shadow 0.5s ease-in;
cursor : permet de changer le curseur lorsqu’il survol un élément
cursor: pointer;
cursor: wait;
cursor: crosshair;
cursor: zoom-in;
pointer-events : permet de modifier la réaction d’un bloc par rapport à la souris. En spécifiant « none », le curseur ne pourra plus sélectionner de texte par exemple, car le curseur pourra passer au travers de l’élément.
pointer-events: none;
pointer-events: auto;
opacity : permet de gérer l’opacité d’un élément, de base les éléments affichés ont pour opacité « 1 » (opaque), mais nous pouvons ajouter de la transparence en spécifiant cette propriété en dessous de 1.
opacity: 1;
opacity: 0.5;
opacity: 0;
z-index : permet d’attribuer une valeur pour la profondeur d’un élément. Plus la valeur attribuée est élevée, et plus l’élément en question passera en premier plan par rapport aux autres éléments enchevêtrés. Pour fonctionner, son élément nécessite la propriété CSS « position ».
z-index: 50;
position: relative;
z-index: 80000;
position: absolute;
Les propriétés BACKGROUND !
Les propriétés BACKGROUND ?
Cliquez sur la propriété pour plus de renseignements...
PROPRIÉTÉS |
DÉFINITIONS |
|
×
background |
Ensemble de propriétés de l'arrière-plan. |
|
×
background-attachment |
Mode de défilement de l'image d'arrière-plan. |
|
×
background-color |
Couleur de l'arrière-plan. |
|
×
background-image |
Image d'arrière-plan. |
|
×
background-size |
Définit la taille des images en arrière-plan. |
|
×
background-position |
Position de l'image d'arrière-plan. |
|
×
background-clip |
Définit la façon dont une image ou couleur s'étend en arrière-plan d'un élément. |
|
×
background-repeat |
Mode de répétition de l'image d'arrière-plan. |
|
×
background-origin |
Mode de répétition de l'image d'arrière-plan. |
Générateur Couleur !
Générateur Couleur ?
Choisi ta couleur :
Code Hexadécimal :