Notions pour bien débuter en Web Design
HTML, CSS, W3C des abréviations qui peuvent avoir l’air bien compliquées et obscures à première vue. Mais pas d’inquiétudes, elles ne cachent rien de trop compliquées et se maitrisent facilement avec de bonnes explications et un peu de pratique.
Le langage HTML, qu’est-ce que c’est ?
Toutes les pages possèdent un code HTML. C’est ce code que lit votre navigateur (Internet Explorer, Chrome, Safari, Firefox ou autres) lors que vous allez sur un page web, il lui indique comment afficher le contenu. Un code HTML est composé de différentes balises (ou ‘tags’ en anglais), les balises sont facilement repérables, elles sont toujours entre les symboles ‘ < ’ et ‘ > ’. Par exemple, la balise <html> signifie le début du code html, la balise </html> signifie la fin du code.
Un code html est organisé en deux parties distinctes :
• La tête du code, en anglais « head », se trouve entre les balises <head> et </head>. Elle va donner les paramètres et informations nécessaires pour afficher correctement le contenu de la page internet.
• Le corps du code, en anglais « body », est contenu entre les balises <body> et </body>. Il s’agit de la partie visible de site. Nous pourrons dans cette partie intégrer du texte, des images, des liens.
Les origines de l’HTML
Durant la guerre froide, qui opposait l’ex-URSS aux États-Unis, une course effrénée à la technologue s’était mise en place. Les américains ont créé en 1969, ARPANET, l’ancêtre d’internet. Son objectif était de limiter la diffusion d’informations par les ondes radios et de faire transiter les informations par des réseaux physiques.
A partir de 1991, une équipe du CERN invente le http (Hyper Text Transfert Protocol) directement inspiré d’ARPANET en ajoutant le principe des liens hypertextes. Ce sont les liens qui existent aujourd’hui et sur lesquels on clique pour naviguer d’une page à une autre. Internet était en train de naitre, pour ce projet d’envergure il fallait créer un protocole pour que les machines puissent se comprendre à travers le monde, c’est ainsi que le HTML voit le jour (HyperText Markup Language) en français ‘langage de balisage hypertexte’.
Pourquoi le CSS ?
Le HTML a considérablement évolué depuis 1991, il est devenu plus simple d’utilisation en allégeant les balises de mise en forme. En effet, avant les informations esthétiques d'une page étaient contenues dans chaque page. Donc, pour modifier l’aspect général d’un site il fallait modifier le code de chaque page, si cela ne pose pas de problème pour un site de 4 ou 5 pages, cela devient très compliqué pour un site de plusieurs milliers de pages.
La solution a été de séparer les informations de mise en page et les informations de contenu. C’est ainsi qu’apparait le CSS, Cascade Style Sheet, soit feuilles de style en cascades. Les pages CSS contiennent les informations de mise en forme et esthétiques d’une page web. Elles peuvent ainsi dicter la mise en page de plusieurs pages en même temps. En modifiant le code CSS, on modifie la mise en forme de toutes les pages du site qui lui sont rattachées. Dans le cadre d’un site de plusieurs milliers de pages, on peut ainsi modifier la couleur de fond de toutes les pages du site en ne modifiant qu’une seule ligne du fichier CSS. Il s’agit d’un gain de temps considérable.
Les Standards W3C
Internet n’évolue pas dans n’importe quel sens, des normes existent. Le W3C (World Wide Web Consortium) dirigé par le co-inventeur d’internet Tim Berners Lee, édicte des normes et recommandations pour une bonne évolution d’Internet. Le HTML5 et le CSS3 sont des standards mis en place par W3C. Les éditeurs de navigateurs éditent également des propositions pour rendre internet plus simple d’utilisation et accessible.
Les standards mis en place peuvent, par exemple, permettre aux personnes déficientes sensorielles d’avoir accès aux mêmes informations que les personnes valides grâce à des navigateurs internet spécifiques avec lecture vocal ou impression en braille. Certains standards permettent de faciliter l’exploration du contenu par les moteurs de recherche, ce qui permet d’être mieux référencé. Il est donc important de connaitre et de respecter ces standards.
Pour vérifier si le code de votre page web répond bien aux standards W3C, allez sur l'adresse: validator.w3.org. Vous pourrez valider directement en ligne votre page en entrant son adresse ou en uploadant. Si la page ne répond pas aux critères, le site vous signale chacune des erreurs commises dans le code. Un outil très pratique lorsqu'on débute avec un nouveau langage comme HTML5 pour vérifier que l'on n'a pas fait d'erreur de syntaxe ou utilisé des balises obsolètes.
Merci pour cet article! Des informations à savoir.