Cours d'introduction aux HTML5 & CSS3
2 j'aime3,763 vues
Ceci est le support de cours offert aux stagiaires de l'Univesité de Kisangani / service informatique
Contenu connexe
Tendances (20)
En vedette (20)
Similaire à Cours d'introduction aux HTML5 & CSS3 (20)
Cours d'introduction aux HTML5 & CSS3
- 1. UniversiTICTraining–october2016 Introduction aux HTML5 & CSS3 Abel L. MBULA
- 2. UniversiTICTraining–october2016 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
- 3. UniversiTICTraining–october2016 Objectifs Créer des pages web en HTML5 & CSS3 Uploader son site sur un serveur web
- 4. UniversiTICTraining–october2016 Plan L’essentiel d’HTML5 L’essentiel de CSS3 Publier son site Capston: créer son CV en HTML/CSS
- 6. UniversiTICTraining–october2016 Outils de développement Éditeurs Navigateurs Clients FTP Versionning Dans ce cours: Brackets + Chrome + FileZila Notepad++
- 7. UniversiTICTraining–october2016 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
- 9. UniversiTICTraining–october2016 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
- 11. UniversiTICTraining–october2016 Structure de base d’une page HTML5
- 12. UniversiTICTraining–october2016 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!!
- 13. UniversiTICTraining–october2016 Code source Ne pas mettre les infos confidentielles dans le document html: mot de passe, etc,
- 14. UniversiTICTraining–october2016 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
- 15. UniversiTICTraining–october2016 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
- 17. UniversiTICTraining–october2016 TP1: reproduire ce document
- 19. UniversiTICTraining–october2016 Mettre en place la CSS • Dans une fichier .css • Dans l’en-tête <head> • Directement dans les balises
- 20. UniversiTICTraining–october2016 Appliquer le style: syntaxe Sélecteur { propriété: valeur; } Commentaire dans CSS: /* Commentaire */
- 21. UniversiTICTraining–october2016 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
- 22. UniversiTICTraining–october2016 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 (#)
- 23. UniversiTICTraining–october2016 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
- 24. UniversiTICTraining–october2016 TP2: mettre en forme le TP1
- 26. UniversiTICTraining–october2016 Ce qu’il vous faut Nom de domaine Hébergeur Client FTP
- 27. UniversiTICTraining–october2016 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
- 28. UniversiTICTraining–october2016 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, …
- 30. UniversiTICTraining–october2016 Utiliser un client FTP: FileZila
- 31. UniversiTICTraining–october2016 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
- 32. UniversiTICTraining–october2016 BONUS: CAP SUR LE PROFIL DES WEBDEV* *Je me base sur le cours de Mathieu Nebra: « Comprendre le web » (www.openclassrooms.com)
- 34. UniversiTICTraining–october2016 Ce qu’ils aiment Résoudre des problèmes complexes Télétravail