HTML5 & CSS3
Apprendre les bases de HTML et le style CSS
[Link]
[Link] 1
Contenu du cours
• Concepts fondamentaux pour le développement Web
• Concepts avancés
• Création d’une page Web (Belle, responsive et rapide)
[Link] 2
Editeur de code
• Visual studio code ***
• Sublime text
• Notepad++
[Link] 3
Visual studio code-Extensions
Pratique
• Télécharger le logiciel VS Code
• Télécharger les extensions au logiciel
• Prettier : Formatage du code
• Live Server : Server Web local
• Elm Emmet : Abréviation code
[Link] 4
Concepts fondamentaux du Web
• Les langages et les outils du développement web
• Les concepts clé (URL, HTTP, DOM, etc.)
• Comment fonctionne les sites
• Inspection du traffic réseau utilisant DevTools
• Les bases de HTML et CSS
• Validateur des pages Web
[Link] 5
Les langages et les outils du développement web
• Tout site Web contient les trois composantes :
• Front-end : HTML, CSS et Javascipt
• Back-end :
• Full-stack
Front-end Back-end Full-Stack
[Link] 6
Front-end developpement
• HTML : Hypertext Markup Language construction et organisation de la
page Web
• CSS : Cascading stylesheet mettre du style sur la page Web
• JAVASCRIPT: un langage de programmation qui permet l’animation et
l’intéraction sur une page Web
[Link] 7
Back-end : Framworks
REACT ANGULAR VUE
[Link] 8
Comment fonctionne le WEB?
• URL : [Link] Uniform Resource Location
• Resources :
• Fichiers des pages Web (HTML documents)
• Fichiers images
• Fichiers vidéos
• Fichiers de la police de caractères
[Link] 9
Comment fonctionne le WEB?
Modèle client-serveur
• Lorsqu’on tape une URL sur un navigateur Web?
• Exemple: [Link]
Chrome, Requête
Opéra, IIS, Apache,
Firefox, etc.
Edge, etc.
Réponse
Côté : CLIENT Côté : SERVEUR
[Link] 10
DOM : Document object Model
• Il représente tous les objets dans un document HTML dont :
• Les paragraphes,
• Les images
• Formulaires, etc.
• la structure du document HTML est représentée par l’imbrication des
objets dans le but d’une meilleure organisation de l’information.
[Link] 11
Dom : Document object Model
• <!Doctype HTML>
<HTML>
...
…
…
</HTML>
[Link] 12
Inspecter les requêtes et les réponses http
Pratique
• Chaque navigateur à son propre inspecteur
• Sur Google Chrome > Ctrl+Shift + I ou Plus d’outils > Outils de
développement
[Link] 13
Les bases HTML
Pratique
• Créons un dossier nommé HTML sur le bureau
• Dans Explorer de VS Code, sélectionner le dossier HTML, puis créer un fichier nommé
[Link]
• Masquer le volet Explorateur en tapant sur l’icone Explorateur ou Ctrl + B
• Générer la structure de la page en tapant : ! (Abréviation Emmet)
• Modifier le texte de l’élément Title par « Ma première page Web »
• Exécuter la page sur VS Code en tapant clique droit > Live server
• Visualiser la page titre et contenu
• Expliquer l’@ URL protocole, domaine, port
[Link] 14
Les bases HTML
• La plupart des balises HTML ont une balise de fin, excepter certaines balises qu’on
appelle orphelines.
• Exemple de balises orphelines:
• Br
• Img
• Input, etc.
• Une balise nommée aussi Tagname ou élément HTML définit certains attributs :
• Exemple :
<img src="" alt="">
Src et alt représentent respectivement le chemin où est stocké l’image et la description de l’image
[Link] 15
Pratique
• Créer un dossier sur l’explorateur VS, puis y insérer une image
• Ajouter 2 petits paragraphes affichant des textes
• Visualiser l’aperçue de la page Web (aucun style n’est appliquée)
[Link] 16
Apprendre CSS
Style des pages Web
• Trois endroits pour placer le style CSS :
Dans la balise Style dans le bloc Head (entête de la page HTML)
Dans la balise (l’élément) actuelle dans l’attribut style de n’importe quelle balise
Dans un fichier CSS externe référencé par la balise Link
• Démonstration par l’enseignant
[Link] 17
Quelques exemples de propriétés CSS
<style>
img{
width: 100px;
border-radius : 50px;
float: left;
margin-right: 10px;
}
</style>
[Link] 18
Formattage du texte avec Prettier
Pratique
• Mettre les lignes du code HTML sur la même ligne et visualiser si
l’aperçue de la page a changé.
• Sachant que le plug-in Prettier Formater est déjà installé.
• Dans le menu Affichage (View), taper le menu Palette de commandes,
puis chercher Format Document. Une barre de progréssion cherche les
formateurs disponible, mais affiche une fenêtre avec un bouton pour
configurer le plug-in Prettier Formater, cliquer-le et choisir Prettier
Formater
[Link] 19
Inspecter les pages avec DevTools
Pratique
• Un page Web est codée en respectant le modèle d’objets de document
DOM.
• Voyons comment accéder à l’outils DevTools : Shift+Ctrl+i
• Dans l’onglet Elements observer le code html en sélectionnant un
élément, puis voir son style dans le volet à droite.
[Link] 20
Validation des pages Web
[Link]
Pratique
• Trois façons pour valider une page Web :
Validation par URL si le site est hébergé sur Internet
Validation par fichier local
Validation directe par insertion de code
[Link] 21
Validateur CSS
[Link]/css-validator
• Il y a trois façons pour valider CSS:
Validation par URL si le site est hébergé sur Internet
Validation par fichier local
Validation directe par insertion de code
[Link] 22
Apprendre les éléments HTML
• Texte
• Liens
• Images
• Listes et tables
• Conteneurs
• Éléments de structure
[Link] 23
La section Head
• Indique des informations sur la page dont :
• Type d’encodage UTF-8 : <meta charset="UTF-8" />
• Échelle d’affichage 100% :
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
• Description Lors d’une recherche sur Google, on voit la description de la page.
<meta name="description" content="Mon site blabla">
• Mots clés : Mots clés disponibles sur la page
<meta name="keywords" content="HTML, CSS">
[Link] 24
Section Body-éléments textes
• P : paragraphe
• em, i, u, strong, span :
• H1, h2, h3, h4, h5, h6 : Titres
[Link] 25
Section Body-Les entités ou les caractères
[Link]
• Afficher les caractères < et > < , >
• : montrer un exemple pour deux mots qui doivent être ensemble
dans la même ligne.
[Link] 26
Section body-Les liens : hyperlinks
• L’élément a <a href="">cliquer ici</a>
• Montrer un exemple avec un fichier local et un URL
• Chemin relatif de referencement
• attributs : href, download, target
<a href="" download target=« _Blank"></a>
[Link] 27
Navigation dans une page
avec l’élément a
• Parfois les contenus des pages web dépassent la limite de l’écran, dans ce
cas, il est conseillé de penser à gérer la navigation. L'attribut ID est
cependant important pour faciliter la navigation.
• <a href="#section-css">CSS</a> navigue vers la section ayant
l’identifiant section-css
• <a href="#">Accueil</a> navigue vers le top de la page
[Link] 28
Les [Link]
• Toutes les images sont créées avec une ou plusieurs dimensions spécifiques.
• Taper une catégorie puis télécharger l’image gratuite dans le dossier images de
l’explorateur VS
• <img src="images\[Link]" alt="Café à table" >
• Afficher la page Web pour visualiser l’image (l’image ne s’affiche pas)
• Pour remedier le problème, on applique le style pour img {width: 200px;height: 200px}
on constate que l’affichage n’est pas conforme à l’originale.
• On ajoute le style object-fit: cover; pour mieu visualiser l’image. Vérifier dans
l’inspecteur DevTools.
[Link] 29
Fin du tutoriel
[Link] 30