Demo 5
Exercice de la semaine
À propos des éditeurs de texte
Aides mémoires + ressources de la semaine
Validateur HTML (!!!!!)
Structurer l'info: Comprendre la hierarchie parent-enfant:
Pourquoi "encapsuler" les éléments?
Exemple ci-dessus: la taille possible d'un <div> relative à celle de son parent
Autres exemples cool de structures d'info
-
laTex et MathML -> vos meilleurs amis pour les prochaines 3 années!
-
JSon (JavaScript object notation )
-
SVG
- Demo illustrator de notre logo!
La magie d'un site web
Une briève histoire
Premiere apparence de Google, 1998
Google, meme requete mais en 2015
Premiere apparence de Facebook (The Facebook), 2004
Fun fact: la page web du diro n'a presque pas change en 10 ans lol
(nostalgic corner)
HTML
Anatomie du HTML
Elements importants d'une page
Diviseur: <div>
x
<!-- on l'utilise pour diviser notre page en sous-parties.
On peut en utiliser autant qu'on en veut tant qu'on sache bien structurer notre information ET que notre CSS tienne en compte notre structure (et vice-versa)
Normalement, on n'a PAS un <div> global qui englobe tous les divs - ceci est (normalement) la job du <body></body>
-->
<body>
<div class="partie">
<!-- contenu de partie 1 ici-->
</div>
<div class="partie">
<!-- contenu de partie 2 ici -->
</div>
</body>
Remarquez les attributs class de valeur "partie" dans les <div>.
Paragraphe: <p>
x
<div>
<p>
Ici l'on met du texte. C'est une bonne pratique d'essayer de ne jamais ecrire du texte "libre" sans balises paragraphe ou autres balises englobantes.
</p>
</div>
La famille de headers: pour créer des titres de différentes grandeurs: <h1>, <h2>, etc.
Plus le chiffre est grand, plus la taille est petite
Les images
x
<img src="LIEN_DE_LIMAGE" alt="Un texte au cas ou limage ne saffiche pas">
Exemple de la boîte à chatons:
xxxxxxxxxx
<img src="https://i.pinimg.com/736x/cf/81/aa/cf81aa6fa9ce0303e8d05163de1dc044--crazy-cat-lady-crazy-cats.jpg" alt="Les chatons qui te regardent avec pitie">
Aller chercher le lien d'une image (demo)