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
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!!
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
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
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, …
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