HTML et CSS sont des langages permettant la structuration et mise en forme de page web.
Les dernières évolutions nous conduisent à HTML 5 et CSS 3.
Pour observer un code HTML, il suffit de se rendre sur une page web quelconque et d'effectuer un clic droit > code source de la page.
Il s'agit d'une suite d'instructions qui forme un Code Source.
Le code-source forme une suite de lignes qui sera interprétée et donnera le rendu que vous voyez à l'écran.
Voici les statistiques d'utilisations des navigateurs sur les 10 dernières années :
Navigateur | Google Chrome | FireFox | Internet Explorer / Edge | Safari | Opera |
---|---|---|---|---|---|
2016 | 68 % | 19.1 % | 6.3 % | 3.7 % | 1.5 % |
2015 | 63.9 % | 21.6 % | 8 % | 3.8 % | 1.5 % |
2014 | 55.7 % | 26.9 % | 10.2 % | 3.9 % | 1.8 % |
2013 | 48.4 % | 30.2 % | 14.3 % | 4.2 % | 1.9 % |
2012 | 35.3 % | 37.2 % | 20.1 % | 4.3 % | 2.4 % |
2011 | 23.8 % | 42.8 % | 26.6 % | 4 % | 2.5 % |
2010 | 10.8 % | 46.3 % | 36.2 % | 3.7 % | 2.2 % |
2009 | 3.9 % | 45.5 % | 44.8 % | 3 % | 2.3 % |
2008 | Inexistant | 36.4 % | 54.7 % | 1.9 % | 1.4 % |
2007 | Inexistant | 31 % | 58.6 % | 1.7 % | 1.5 % |
2006 | Inexistant | 25 % | 66 % | Inexistant | 1.6 % |
- | ![]() |
![]() |
![]() |
![]() |
![]() |
Le W3C est une organisation chargée de standardiser et faire évoluer le langage HTML.
Le W3C dicte des normes d'interprétation que les navigateurs doivent suivre (un peu comme le code de la route). L'objectif recherché est qu'un même code s'affiche de la même manière sur tous les moteurs de rendus.
Le W3C met à disposition un espace de validation pour savoir si le code que l'on écrit respecte bien les régles. Un code totalement valide (dit « code propre ») permet une meilleure interprétation des navigateurs et peut contribuer à un meilleur positionnement sur les moteurs de recherche (référencement).
Pendant sa création et lorsque le site est terminé, il est important de « le tester » sur tous les navigateurs et sur l'espace de validation W3C.
Avant de démarrer l'apprentissage et l'écriture de code Html / Css, nous allons devoir nous équiper. Avez-vous déjà vu un jardinier sans sa pelle ou son rateau ? et bien c'est pareil pour nous, nous allons récupérer quelques outils sur le web :
Pour créer un nouveau fichier, vous devez vous rendre dans le logiciel notepad (accessible par le bouton démarrer de windows) :
Ensuite vous vous retrouvez dans un nouvel onglet (vous pouvez aussi en ouvrir un nouveau avec ctrl+n ou fichier > nouveau)
Vous pouvez écrire ce que vous voulez à l'intérieur :
Cliquez sur l'icône en forme de disquette pour enregistrer et choisissez un emplacement pour votre nouveau fichier :
Choisissez l'extension .html
afin de créer votre toute première page web !
Vous pouvez double-cliquer sur votre fichier pour le lancer dans le navigateur.
A tout moment, vous pouvez reconsulter et éditer votre fichier :
Maintenant que nous pouvons écrire du code dans notepad, il nous faut apprendre la structure d'une page web Html et Css.
Si vous souhaitez travailler avec les extensions de fichiers visibles (préférable lorsqu'on fait de l'informatique), vous devrez rentrer dans l'un de vos dossiers et cliquer sur le bouton organiser > Options des dossiers et de recherche.
Puis ensuite vous rendre dans l'onglet affichage pour décocher > Masquer les extensions des fichiers dont le type est connu.
Nous apercevons l'extension de vos fichiers :
HTML CSS
1. Introduction Html Css 2. Structure D'une Page Html 3. Structure D'un Fichier Css 4. Les Polices D'ecriture 5. Les Selecteurs 6. Firebug 7. Styles Css 8. L'heritage 9. Les Images 10. Les Positionnements 11. Le Zoning 12. Les Tableaux 13. Les Listes 14. Les Liens Et Ancres 15. Menu De Navigation 16. Les Formulaires 17. Donnees Multimedia 18. Balises Html Et Proprietes Css 19. Cas Pratique 20. Creation D'un Site Web