HTML/CSS - Cours et Tutoriels

Apprenez à créer votre site Web avec HTML5 et CSS3 - Intro

par THE NIGHTWALKER X - vues: 346 fois - Note: 1/5
Donnez une note à ce tutoriel:


HTML5 LOGO
Logo de HTML5

INTRODUCTION



Le Web, c’est quoi ?



Le Web est une partie d’Internet, à ne pas confondre avec Internet qui lui est un ensemble plus vaste et comprend le Web, les e-mails, etc. Pour accéder au Web, on utilise un navigateur Web dans lequel il faut introduire l’adresse de la page Web que l’on souhaiterait consulter. Internet Explorer est le navigateur Web intégré par défaut dans les ordinateurs qui tournent sous Windows ; et Safari pour les Mac.

HTML et CSS pour créer des sites web



Pour créer un site Web, il faut avant tout écrire les codes sources des pages du site. Mais ces codes sources, on ne les écrit pas comme on écrit un texte de courrier, On le fait dans le (ou les) langage(s) que le navigateur Web pourra comprendre et traduire pour les gens qui visiteront notre site: HTML et CSS.
Ce sont là les deux langages universels et incontournables du Web. Ils sont à la base même des sites Web.

HTML signifie Hyper Text Markup Language, il a été créé en 1991 par Sir Tim Berbers-Lee à travers un document appelé « HTML Tags » dans lequel il a proposé moins d’une douzaine d’éléments qu’on pourrait utiliser pour écrire des pages Web. C’était le HTML 1.0
HTML a jusque là été un langage en pleine évolution. Ses spécifications ont changé au cours des années avec des améliorations à chaque version, tendant à rendre la création Web beaucoup plus aisé.
La dernière version à ce jour où nous écrivons ces lignes, est la version 5, ce que nous allons apprendre…
HTML5 a été finalisé et publié le 28 octobre 2014 par le World Wide Web Consortium (W3C), l’organisation en charge de la définition des standards et des spécifications du HTML. Les avantages de HTML sont nombreux : un langage facile à comprendre et utiliser, un langage supporté par quasiment tous les navigateurs, un langage très utilisé et donc offrant une très large communauté mondiale, un langage gratuit ! Vous ne payerez pas d’argent pour acheter une licence logicielle, et pleins d’autres.
HTML ne peut malheureusement pas produire des effets dynamiques, c’est un langage statique ; les options de sécurités offertes sont limitées et parfois la structure des pages est difficile à mettre en place.


CSS signifie Cascading Style Sheets, feuilles de style en cascade. C’est une extension de HTML qui permet de styler les pages Web. Il décrit la façon dont les éléments HTML doivent être disposés à l’écran, sur papier ou autres média.
CSS a été inventé par Häkon Wium Lie, le 10 octobre 1994. Il est maintenu par un groupe au sein du W3C appelé « The CSS Working Group ». Il évolue au fil des années et est à son 3e niveau actuellement.
CSS3 est la version que nous allons apprendre ici.
Ses avantages sont multiples : gain remarquable de temps dans la création Web, Chargement plus rapide des pages, maintenance facile des pages Web, Compatibilité sur multiples appareils, utilisation hors ligne par mise en cache...


Aperçu de HTML



Lorsque vous visitez un site Web, vous voyez une page en clair comme sur cet exemple :

Page web demo
Figure 1: Aperçu de la Page d’accueil de http://www.inspirates.cf



Bien, maintenant faites Clic droit avec votre souris dans un endroit de la page Web active (désolé pour ceux qui sont sur mobile) et Afficher le code source de la page (Ctrl+U, les fanas des raccourcis sont où là ?).
Le résultat est quelque chose qui ressemble à ceci :

View source demo
Figure 2: Ctrl+U affiche le code source du site Web que vous visitez à cet instant



Ce que vous allez apprendre, c’est d’écrire comme sur la figure 2 pour obtenir un rendu comme sur la figure 1.


Ce qu’il nous faut



  • du temps,
  • un navigateur Web installé sur votre machine. Chez moi c’est Opera. Vous pouvez utiliser celui qui vous plait le plus, l’essentiel c’est qu’il puisse afficher des pages Web…
    Icone 4 navigateurs
    Quatre navigateurs Web populaires (Google Chrome, Opera, Internet Explorer et Mozilla Firefox),
  • Un éditeur de texte. Je ferai avec Notepad++ mais vous êtes libre de choisir lequel vous convient le mieux. Seulement qu’il permette d’écrire du texte brut. Mais il serait plus intéressant de choisir un éditeur qui vous facilite la tâche ; c’est-à-dire qui est spécialisé dans l’édition de code source.
    icones editeurs de texte
    Quatre éditeurs de texte populaires (Notepad++, Adobe DreamWeaver, Microsoft Word et Bloc Note)

    Chacun de ces éditeurs a ses particularités, pour en donner des exemples, Notepad++ colore le code que vous saisissez afin de vous aider à le faire plus simplement et il est gratuit. Vous le trouverez au lien en dessous de page. DreamWeaver colore également le code et a la particularité d’être très performant pour l’édition de code avec son auto complétion (fermeture auto des balises) et en plus il est doté d’une interface WYSIWYG (What You See Is What You Get, en français : Ce que vous voyez est ce que vous obtenez) ainsi que MS Word. Un souci avec les logiciels WYSIWYG c’est que parfois, le code HTML généré donne un rendu pas vraiment le même que lors de sa création. Néanmoins, avec eux, tout le monde peut se faire un site Web sans même avoir une seule notion de HTML. Si vous voulez vraiment créer un site Web, je vous conseille alors de vous passer des interfaces WYSIWYG mais pas carrément du logiciel parce qu’à la place de Notepad++, je recommanderais à ceux qui ont leur portefeuille de s’acheter une licence de DreamWeaver ! C’est très chic. Peut être que je vous mettrai un tutoriel pour avoir DW gratis, (peut être)…
2 Cours en tout