cours d'introduction aux html5 & css3
TRANSCRIPT
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16 Introduction aux HTML5 & CSS3
Abel L. MBULA
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
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
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
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16 INTRODUCTION
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++
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
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
HTML vs CSSForme vs
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
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16 HTML5 - ESSENTIEL
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Structure de base d’une page HTML5
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!!
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,
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
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
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Quelques balises
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
TP1: reproduire ce document
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16 CSS3 - ESSENTIEL
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
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Appliquer le style: syntaxe
Sélecteur {
propriété: valeur;
}
Commentaire dans CSS:
/* Commentaire */
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
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 (#)
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
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
TP2: mettre en forme le TP1
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16 PUBLIER SON SITE WEB
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Ce qu’il vous faut
Nom de domaine
Hébergeur
Client FTP
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
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, …
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Offre d’hébergement: OVH
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Utiliser un client FTP: FileZila
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
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)
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Profil des développeurs
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Ce qu’ils aiment
Résoudre des problèmes complexes
Télétravail
Un
iver
siTI
CTr
ain
ing
–o
cto
ber
20
16
Merci!
www.abelmbula.url.ph