Introduction Html Css

Les langages Html et Css

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.

Compatibilité des navigateurs

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 %
-

Les comportements et l'affichage peuvent être différents d'un navigateur à un autre. Lors de la conception d'un site web, il est important de télécharger tous les navigateurs et de faire plusieurs tests d'affichage.

L'organisation W3C

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.

Quelques Outils

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 :

• Firefox (navigateur)
• Firebug (extension qui permet d'observer et d'éditer un code-source en direct)
• Webdevelopper (extension qui fournit des outils pour le développeur web)
• Notepad++ ou sublime text (editeur de texte - simple lors d'une première utilisation)

Nous utiliserons donc Firefox pour la suite du cours, cependant si vous êtes attaché à Google Chrome ou un autre navigateur, vous pourrez sans aucun doute télécharger les extensions équivalentes.

Comment créer un fichier ?

Comment créer un fichier avec notepad ?

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.

Travailler avec les extensions de fichiers visibles

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 :