Télécharger en tant que PDF, PPTX
Téléchargé parAbel LIFAEFI MBULA
Cours d'introduction aux HTML5 & CSS3
Le document présente une introduction aux langages HTML5 et CSS3, visant à aider à la création de pages web et à leur publication sur un serveur. Il couvre des éléments clés comme la structure de base d'une page HTML, les balises, les attributs, ainsi que les principes de mise en forme avec CSS. Enfin, il aborde les aspects pratiques de l'hébergement et du choix d'un nom de domaine pour rendre le site accessible en ligne.
Cours d'introduction aux HTML5 & CSS3
- 1. UniversiTICTraining–october2016 Introduction aux HTML5& CSS3 Abel L. MBULA
- 2. UniversiTICTraining–october2016 A propos @abelmbula • ResponsableInformatique @ 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 pagesweb en HTML5 & CSS3 Uploader son site sur un serveur web
- 4. UniversiTICTraining–october2016 Plan L’essentiel d’HTML5 L’essentiel deCSS3 Publier son site Capston: créer son CV en HTML/CSS
- 5.
- 6. UniversiTICTraining–october2016 Outils de développement ÉditeursNavigateurs Clients FTP Versionning Dans ce cours: Brackets + Chrome + FileZila Notepad++
- 7. UniversiTICTraining–october2016 Documentations • Cours HTML5/CSS3sur 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
- 8.
- 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
- 10.
- 11. UniversiTICTraining–october2016 Structure de based’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 pasmettre les infos confidentielles dans le document html: mot de passe, etc,
- 14. UniversiTICTraining–october2016 Balises • Permettent destructurer 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 placentaprè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
- 16.
- 17.
- 18.
- 19. UniversiTICTraining–october2016 Mettre en placela 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 enforme le TP1
- 25.
- 26. UniversiTICTraining–october2016 Ce qu’il vousfaut 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, …
- 29.
- 30. UniversiTICTraining–october2016 Utiliser un clientFTP: FileZila
- 31. UniversiTICTraining–october2016 En résumé • HTMLest 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 SURLE PROFIL DES WEBDEV* *Je me base sur le cours de Mathieu Nebra: « Comprendre le web » (www.openclassrooms.com)
- 33.
- 34. UniversiTICTraining–october2016 Ce qu’ils aiment Résoudredes problèmes complexes Télétravail
- 35.