Introduction Html Css

Temps d'étude : 30 min. Niveau : Facile.
Tags : Introduction Html Css
Fichier(s) utile(s) pour ce cours : /
Pré-Requis
fléche Culture Web et Informatique
Objectifs
fléche Savoir créer et mettre à jour des pages web en HTML en respectant les normes W3C, et définir l’aspect graphique du site à l’aide des 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.

fléche Informations
vous ne pourrez pas voir le code PHP d'un site car il s'agit d'un langage interprété côté serveur

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.

fléche Informations
Un navigateur permet de se connecter à un nom de domaine (ou adresse IP) afin de consulter des pages web hébergées sur un serveur (serveur = ordinateur allumé 24h/24h) quelque part dans le monde, et raccordé au réseau Internet.

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.

fléche Bon à savoir
Les avantages d'un code valide et propre : meilleure compatibilité assurée entre les navigateurs et prédisposition améliorée pour un référencement naturel.

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) :

explications Html / Css

Ensuite vous vous retrouvez dans un nouvel onglet (vous pouvez aussi en ouvrir un nouveau avec ctrl+n ou fichier > nouveau)

explications Html / Css

Vous pouvez écrire ce que vous voulez à l'intérieur :

explications Html / Css

Cliquez sur l'icône en forme de disquette pour enregistrer et choisissez un emplacement pour votre nouveau fichier :

explications Html / Css

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 :

explications Html / Css

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.

explications Html / Css

Puis ensuite vous rendre dans l'onglet affichage pour décocher > Masquer les extensions des fichiers dont le type est connu.

explications Html / Css

Nous apercevons l'extension de vos fichiers :

explications Html / Css