Bienvenue!
Salut!
Sylvain
Ludovic
Une page web
Une page web
C'est...
du contenu
de la structure
du style
Contenu
Structure
Paragraphe
Paragraphe
Paragraphe
Titre
Image
Style
Taille du titre
Couleur des liens
Couleur de fond
...
Contenu et structure
HyperText Markup Language
Structure = balises
<p>Ma première page</p>
Balise d'ouverture
Balise de fermeture
Contenu
<h1>Ma première page</h1>
<p>Bonjour!</p>
Chaque balise a une signification
Une page est un arbre
<html> <body> <h1>...</h1> <p>...</p> <p>...</p> <div> <a>...</a> </div> </body> </html>
Amusons-nous!
| <p> | Paragraphe |
| <em> | Italique |
| <strong> | Gras |
| <a href="..."> | Lien |
| <h1>, <h2>, ... | Titres |
| <img src="..."> | Image |
tinyurl.com/ictgirlshtml
- Ajoutez un lien vers votre site préféré
- Remplacez l'image par une image de votre animal préféré
- Personnalisez le titre et le texte
Style
Cascading Style Sheets
Syntaxe CSS
Sélecteur de balise
<html>
<body>
<p>Bienvenue!</p>
<div>...</div>
<div class="question">
<div>...</div>
<p>Quel est ton nom?</p>
</div>
</body>
</html>
Sélecteur de classe
<html>
<body>
<p>Bienvenue!</p>
<div>...</div>
<div class="question">
<div>...</div>
<p>Quel est ton nom?</p>
</div>
</body>
</html>
Sélecteurs multiples
<html>
<body>
<p>Bienvenue!</p>
<div>...</div>
<div class="question">
<div>...</div>
<p>Quel est ton nom?</p>
</div>
</body>
</html>
Amusons-nous!
Modifiez votre page pour qu'elle ressemble à ça :
Amusons-nous!
| color | Couleur du texte, p.ex. blue |
| background-color | Couleur de fond, p.ex. yellow |
| font-size | Taille de police, p.ex. 16px |
| text-align | Alignement du texte, p.ex. left, right, ou center |
| border | Style de bordure, p.ex. 2px solid red |
Amusons-nous!
Solution: tinyurl.com/ictgirlscss
La barre de développement
Félicitations!
Vous connaissez les bases du développement web
Aller plus loin
codecademy.com
flukeout.github.io
teamtreehouse.com
flexboxfroggy.com
Girls in ICT - FR
By Sylvain Roflmao
