Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

01 02 Objectifs Savoir créer et mettre à jour des pages web en HTML en respecta

01 02 Objectifs 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. Html et 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. 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 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. RETROUVEZ L’INTÉGRALITÉ DES COURS SUR EPROJET.FR EVOGUE.FR LIAM TARDIEU 03 04 05 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. 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) : 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 : 06 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. 07 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 : Structure d'une page Html Qu'est-ce qu'un langage ? 08 09 10 Un langage c'est comme une langue, si vous partez en vacances et que voulez vous faire comprendre en Espagne il faudra apprendre et parler Espagnol ! Et bien, si vous souhaitez créer un site web il faudra apprendre et parler html / css. (à la différence que ce sera une langue écrite uniquement) Qu'est-ce qu'un code ? Un code est un morceau de texte suivant des normes et les conventions d'un langage, introduit à l'intérieur d'un fichier possédant l'extension du langage (exemple : .html, .css, etc.). l'ensemble de ces lignes de code sont exécutées et lues (par un navigateur ou l'interpréteur d'un serveur) et permettent d'obtenir un affichage en retour. Qu'est-ce qu'une balise ? Une balise est un mot entre chevron, par exemple : La balise permettant de contenir des paragraphes s'ouvre avec : Cette même balise se ferme avec : Certaines balises sont auto-fermantes (elles ne se ferment pas), par exemple : Parmis les balises autofermantes nous pouvons noter les suivantes : , <hr> , <img> , <meta> , <input> , <link> ... Qu'est-ce qu'un chevron ? Un chevron ouvrant c'est ce caractère : < Un chevron fermant c'est ce caractère : > Qu'est-ce qu'un attribut ? Un attribut est un mot complémentaire venant se glisser à l'intérieur d'une balise. Exemple avec l'attribut charset : La balise Meta, peut servir à plusieurs utilisations... Nous lui ajoutons donc l'attribut charset pour préciser que nous souhaitons régler l'encodage des caractères sur UTF-8 (attention il faudra que votre éditeur soit également réglé sur UTF-8 sans bom). <mabalise> </mabalise> <mabaliseautofermante> <meta charset="utf-8"> ? ? ? ? 11 12 Un autre exemple avec l'attribut content : Comme la balise Meta peut servir dans plusieurs situations, nous lui ajoutons donc l'attribut description pour préciser que nous souhaitons ajouter une description qui soit prise en compte par Google et les autres moteurs de recherche. L 'attribut description de la balise meta permettra de fournir à Google (et aux autres moteurs de recherche) une description. Qu'est-ce qu'une valeur ? Une valeur est un mot ou un ensemble de mots venant renseigner un attribut. Dans notre code ci-dessus, les balises apparaissent en bleu, les attributs en blanc, les valeurs en vert. Exemple : Une valeur est un morceau de texte saisi dans les guillemets d'un attribut. comme ici avec le nom de notre feuille de style css : structure.css. Cette ligne nous permettra plus tard de lier le fichier Html au fichier Css. Qu'est-ce qu'un commentaire ? Un commentaire est une portion de texte (souvent une note ou une indication) ignorée par l'interpréteur, exemple : Les commentaires sont des morceaux de texte ignorés par le navigateur, c'est en quelque sorte des annotations que l'on peut ajouter pour y voir plus clair et se repérer plus rapidement dans un code-source. Les commentaires sont également très pratiques lors d'un travail d'équipe de manière à ce qu'un nouveau développeur arrivant sur un projet comprenne rapidement avec quelques indications le travail ayant été réalisé. <link rel="stylesheet" href="structure.css">  Mon Texte   ? ? ? 13 14 Qu'est-ce que l'indentation ? L 'indentation consiste à se décaler (du bord gauche) vers la droite pour indiquer que l'information se trouve à l'intérieur. Dans notre cas « Mon Texte » se trouve à l'intérieur des balises et . Il est important de respecter cette méthodologie en entreprise (pour soi, mais aussi lorsque l'on collabore avec plusieurs personnes). Si vous ne voyez pas l'intérêt de l'indentation, posez-vous cette question : aimeriez-vous que l'on vous partage 200 lignes de code totalement dé-indentées et quasi illisibles ? Même si cela n'est pas obligatoire pour rendre un code personnel fonctionnel, cela reste hautement recommandé pour améliorer la lecture. Débuter et créer une première page uploads/S4/ html-css-support.pdf