HTML5 CSS3

HTML5 & CSS3
Apprendre les bases de HTML et le style CSS

W3schools.com
https://www.youtube.com/watch?v=qz0aGYrrlhU 1
Contenu du cours
• Concepts fondamentaux pour le développement Web
• Concepts avancés
• Création d’une page Web (Belle, responsive et rapide)
Editeur de code
• Visual studio code ***
• Sublime text
• Notepad++
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
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
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
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
Back-end : Framworks
REACT ANGULAR VUE
Comment fonctionne le WEB?
• URL : http://www.google.ca  Uniform Resource Location
• Resources :
• Fichiers des pages Web (HTML documents)
• Fichiers images
• Fichiers vidéos
• Fichiers de la police de caractères
Comment fonctionne le WEB?
Modèle client-serveur
• Lorsqu’on tape une URL sur un navigateur Web?
• Exemple: https://Moodle.emica.ca
Chrome, Requête
Opéra, IIS, Apache,
Firefox, etc.
Edge, etc.
Réponse
Côté : CLIENT Côté : SERVEUR

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.
Dom : Document object Model
• <!Doctype HTML>
<HTML>
...
…
…
</HTML>
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
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é
index.html
• 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
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
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)
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
Quelques exemples de propriétés CSS
<style>
img{
width: 100px;
border-radius : 50px;
float: left;
margin-right: 10px;
}
</style>
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
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.
Validation des pages Web
validator.w3.org
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
Validateur CSS
jigsaw.w3.org/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
Apprendre les éléments HTML
• Texte
• Liens
• Images
• Listes et tables
• Conteneurs
• Éléments de structure
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">
Section Body-éléments textes
• P : paragraphe
• em, i, u, strong, span :
• H1, h2, h3, h4, h5, h6 : Titres
Section Body-Les entités ou les caractères
dev.w3.org
• Afficher les caractères < et >  &lt , &gt
• : montrer un exemple pour deux mots qui doivent être ensemble
dans la même ligne.
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>
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
Les images-unsplash.com
• 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\coffe.jpg" 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.
Fin du tutoriel

HTML5 CSS3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML5 CSS3

Transféré par

Droits d'auteur :

Formats disponibles

HTML5 & CSS3

Apprendre les bases de HTML et le style CSS

• Tout site Web contient les trois composantes :

• HTML : Hypertext Markup Language  construction et organisation de la

REACT ANGULAR VUE

Côté : CLIENT Côté : SERVEUR

• Trois façons pour valider une page Web :

Vous aimerez peut-être aussi