Download - Cours d'introduction aux HTML5 & CSS3
![Page 1: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/1.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16 Introduction aux HTML5 & CSS3
Abel L. MBULA
![Page 2: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/2.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
A propos
@abelmbula
• Responsable Informatique @ ISTM/Kis
• Développeur Full Stack freelance
• Authorized ICDL Tester
• Formateur informatique @ NTEB, INPP
• Auteur• 1 MOOC
• 2 livres en préparation
![Page 3: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/3.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Objectifs
Créer des pages web en HTML5 & CSS3
Uploader son site sur un serveur web
![Page 4: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/4.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Plan
L’essentiel d’HTML5
L’essentiel de CSS3
Publier son site
Capston: créer son CV en HTML/CSS
![Page 5: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/5.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16 INTRODUCTION
![Page 6: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/6.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Outils de développement
Éditeurs Navigateurs Clients FTP Versionning
Dans ce cours: Brackets + Chrome + FileZila
Notepad++
![Page 7: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/7.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Documentations
• Cours HTML5/CSS3 sur www.openclassrooms.com
• Tuto HTML5/CSS3 sur www.alsacreations.com
• Cours HTML5/CSS3 sur www.w3schools.com
• Livre Apprenez à créer votre site web avec HTML5/CSS3 (Mathieu N)
• Documentation officielle: www.w3c.org
• Documentation sur www.developpez.mozilla.org
• CSS Zen Garden: www.csszengarden.com
![Page 8: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/8.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
HTML vs CSSForme vs
![Page 9: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/9.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Lignes blanches & Indentation
• Ne pas mettre des lignes vides sans raisons valables
• Prévoir une ligne vide entre 2 blocs de codes longs ou logique
• Prévoir 2 espaces d’indentation
• N’utilisez pas la touche tab pour indenter
• Evitez des lignes et vides indentations non nécessaires. Il n’est pas nécessaire d’indenter chaque élément
![Page 10: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/10.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16 HTML5 - ESSENTIEL
![Page 11: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/11.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Structure de base d’une page HTML5
![Page 12: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/12.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Hello world!
• Ouvrir éditeur de texte
• Taper la structure de base ci-haut
• Ajouter « Hello world! » dans <body>
• Enregistrer le document au format .html
• Visualiser le document avec le navigateur
• Vous avez enfin créer une page html, bravo!!
![Page 13: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/13.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Code source
Ne pas mettre les infos confidentielles dans le document html: mot de passe, etc,
![Page 14: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/14.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Balises
• Permettent de structurer un document html
• Elles sont entourées de chevrons (< et >)
• 2 types: paires et orphelines• Paires: balises ouvrantes et fermantes (<h1>Titre 1 </h1>)
• Orphelines: servent à insérer un élément (<img />)
• Les noms de balises sont toujours en anglais
• Exercice: rechercher quelques balises paires et orphelines
![Page 15: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/15.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Attributs
• Se placent après les balises
• Donnent des informations supplémentaires
• Contiennent des valeurs
• Syntaxe: <balise attribut=“valeur”>
• Exemple: <img src=“logo-universitic.jpg” alt=“”>
• Exercice: chercher les attributs des balises de l’exercice précédent
![Page 16: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/16.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Quelques balises
![Page 17: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/17.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
TP1: reproduire ce document
![Page 18: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/18.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16 CSS3 - ESSENTIEL
![Page 19: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/19.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Mettre en place la CSS
• Dans une fichier .css
• Dans l’en-tête <head>
• Directement dans les balises
![Page 20: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/20.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Appliquer le style: syntaxe
Sélecteur {
propriété: valeur;
}
Commentaire dans CSS:
/* Commentaire */
![Page 21: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/21.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Appliquer le style: sélecteurs
• Balise sans les chevrons
• Plusieurs sélecteurs pour même propriété: , (virgule)• Sélecteur1, sélecteur2
• Balise contenue dans une autre: balise1 balise2 (espace)
• Propriété class: .nom_class
• Propriété id: #nom_id
![Page 22: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/22.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Balises universelles, class, id
• Balises universelles: pas de sens sémantique• <span> </span>: balise du type inline comme <strong></strong>
• <div> </div>: balise du type block comme <p></p>
• Attributs class et id: s’utilisent sur n’importe quelle balise• Class: +++ balises peuvent avoir meme class (.)
• Id: unique dans la page (#)
![Page 23: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/23.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Quelques propriétés CSS
• Formatage du texte:• Taille: font-size• Police: font-family
• Couleur et fond:• Couleur de texte: color• Couleur de fond: background-color
• Bordures et ombres:• Bordure: border• Ombre: box-shadows
• Apparance• Survol: :hover• Sélectionné: :focus
![Page 24: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/24.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
TP2: mettre en forme le TP1
![Page 25: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/25.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16 PUBLIER SON SITE WEB
![Page 26: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/26.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Ce qu’il vous faut
Nom de domaine
Hébergeur
Client FTP
![Page 27: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/27.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Nom de domaine
• C’est une adresse sur le web: unikis.ac.cd, w3c.org
• Pour réserver: passer par un registrar: Ovh, Gandi, 1&1
• Coût: 7 à 12 euros
Il est conseillé de commander le nom de domaine en même temps que l’hébergement
![Page 28: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/28.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Hébergement
• Permet à votre site d’être en ligne 24h/24, 7j/7
• 3 offres d’hébergement:• Mutualisé: vous louez un espace serveur en même temps que
d’autres sites (une centaine) (moins cher, trafic limité)• Dédié virtuel: vous partagez un serveur avec d’autres sites (une
dizaine seulement)• Dédié: vous avez un serveur entier à votre disposition (connaissance
en Linux)
• Il existe des hébergeurs gratuits et payants• Gratuit: Hostinger, …• Payant: Ovh, Gandi, 1&1, …
![Page 29: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/29.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Offre d’hébergement: OVH
![Page 30: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/30.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Utiliser un client FTP: FileZila
![Page 31: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/31.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
En résumé
• HTML est un langage de balise qui permet de créer la structure d’une page web
• CSS est un langage de style qui permet de mettre en forme une page web
• Pour que votre site soit accessible 24h/24 7j/7, il faut un nom de domaine et un hébergement
![Page 32: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/32.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16 BONUS: CAP SUR LE PROFIL DES WEBDEV*
*Je me base sur le cours de Mathieu Nebra: « Comprendre le web » (www.openclassrooms.com)
![Page 33: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/33.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Profil des développeurs
![Page 34: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/34.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Ce qu’ils aiment
Résoudre des problèmes complexes
Télétravail
![Page 35: Cours d'introduction aux HTML5 & CSS3](https://reader031.vdocuments.us/reader031/viewer/2022021502/58a9e0a11a28aba05b8b63a9/html5/thumbnails/35.jpg)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Merci!
www.abelmbula.url.ph