Apprenons le HTML

Un peu d'histoire

Afin de comprendre le langage HTML, il faut se replonger dans la naissance de ce langage.

Tout a commencé par la DARPA (Advanced Research Projects Agency Network) qui crée ARPANET, ce fût le premier réseau à transférer des paquets, développé aux Etats-Unis par la DARPA.

Le concept de transfert de paquets deviendra la base de transfert des données sur Internet, avant la communication était basée sur la communication par circuits électroniques (par exemple l'utilisation du téléphone).

Naissance du HTML

Partie 1

Dans les années 1980, le réseau est scindé en deux "Milnet": Réseau militaire et "NSFnet": réseau universitaire, l'échange d'information se faisait par le bais du protocole FTP ou par mail sur des serveurs dont la vitesse ne dépassait pas les 56 kbit/s.

Taper une adresse IP était contraignante et lourde, il fallait toujours se rappeler des chiffres comme 173.194.67.94, suite à une demande de la DARPA, Jon Postel et Paul Mockapetris ont inventés en 1983 un système de résolution de nom DNS (Domain Name System), plus besoin de taper une adresse IP par exemple 173.194.67.94, mais tout simplement google.fr.

Partie 2

En 1984, le CERN adopte le même type de réseau utilisé par MILNET et NSF pour ses échanges d'informations, ce réseau est partagé à un laboratoire américain via Internet.

Une équipe au sein de Tim Berners-Lee est chargé de réorganisé l'information afin de créer un nouveau protocole permettant la mise en page de document puis l'installation de ceux-ci sur Internet.

Sur Internet, plusieurs types de communication ont vu le jour, celui qui supplantera tout le monde sera bien sûr le World Wide Web.

Partie 3

Grâce à l'ingéniosité de Tim Berners-Lee, on est maintenant capable de transférer des informations sous formes de documents comportant des mises en forme de texte, incluant même des images, puis vient ensuite la création des liens hypertextes permettant de naviguer d'un endroit à un autre dans une même page ou alors tout simplement ouvrir une nouvelle page, ce nouvel échange d'information sur INTERNTET va révolutionner le monde, maintenant tout le monde pourra voir le contenu d'une page web juste en tapant un nom comme google.fr

Partie 4

En 1990, une première version du HTML 1.0 voit le jour, c'est le début d'un langage en plein développement sans aucune standardisation, les pages utilisent le protocole HTTP afin de naviguer sur le réseau, le premier serveur a hébergé les pages HTML fût IETF.

Fut ensuite inventé le premier navigateur MOSAIC de NCSA avec une interface graphique, celui-ci fût disponible en 1993 pour les ordinateurs UNIX.

A tout cela il manquait une standardisation, celle-ci fût mise en place par TIM afin de créer la W3C.

En 1995, une version HTML 2.0 arrive sur le marché tout en sachant qu'une version 3.0 est en préparation.

En 1996 un nouveau standard CSS est mis sur le marché, ce nouveau standard permet d'améliorer la mise en forme des documents tout en séparant la forme du contenu. En 1997, une version HTML 3.2 arrive sur le marché, des améliorations sont apportées afin de prendre en compte toutes les dernières nouveautés des derniers navigateurs, malheureusement seul dont les nouveautés de Microsoft sont prises en compte d'où la mise place d'Internet Explorer 4.0 dans la version Windows 98.

Introduction

Afin de jouer avec le langage HTML, nous allons avoir besoin en premier d'un éditeur de texte.

Je vais au départ vous faire une petite introduction du langage HTML en partant de la version plus ancienne afin de bien comprendre le fonctionnement de ce langage.

Voici une petite liste d'éditeur pour (Windows/Mac OS/Linux)

  • Windows: on trouve l'éditeur Notepad.exe ou alors notepad++ dont voici le lien Notepad++
  • Mac Os: on a l'éditeur fourni avec le Mac dont le nom TextEdit mais je préfère le logiciel SublimeText dont voici le lien SublimeText
  • Linux: on a le logiciel vi d'origine sur Linux ou vous pouvez essayer SublimeText

Bon maintenant que nous avons vu les éditeurs de texte, voyons la suite

Nota: un fichier HTML finira toujours par l'extension htm ou html.

Pour la petite histoire l'extension htm s'est transformé en html une fois que windows a accepté l'extension de plus de trois caractères cela nous fait revenir au temps de windows 3.11, pour les plus anciens ces personnes comprendront de quoi je parle par contre pour les plus jeunes il ne vous reste plus qu'aller faire un tour sur le site WIKIPEDIA.

Création d'un fichier HTML

Nous allons donc créer un fichier avec l'éditeur de votre choix que nous appelerons index.html

Gestion des balises

Votre fichier index.html est crée, voyons maintenant le principe des balises car c'est là desssus que la structure HTML repose.

Prenons l'exemple de la structure suivante puis nous allons enrichir celle-ci au fur et à mesure de l'apprentissage du HTML.

Nota: j'ai fait en sorte de mettre pleins de commentaires afin de mieux comprendre les quelques lignes de ci-dessous:

Voyons les balises en détail:

Dans une page web on a des balises composées d'un mot clef qui permettra de définir un paragraphe, un lien ou tout autre élément, celles-ci commence toujours par un <p> puis </p> dans le cas del balise de type paragraphe.

  • - Balise !DOCTYPE html: permet de définir le type de document
  • - Balise html: permettra de commencer et finir la page Web
  • - Balise head: permettra de définir le titre de la page, le type de fichier CSS et pleins d'autres options que nous verrons par la suite.
  • - Balise title: permettra de donner un nom à la page Web
  • - Balise body: permettra de mettre le contenu de la page web.

Remarque: ne vous inquiétez pas nous allons faire pleins d'exemples afin que la compréhension soit comprise.

Syntaxe

Nous allons maintenant voir un exercice ou l'on va insérer des paragraphes, un lien et une liste à puce.

Comme pour le premier exemple, il y a beaucoup de commentaires afin de bien comprendre ce qui se passe.

Remarque: les commentaires au fur et à mesure de l'apprentissage disparaîtront, car j'estime que vous aurez compris.

Donc si on résume nous venons d'insérer 3 paragraphes avec un lien pour le dernier, puis une liste à puce.

Nota: dans le cas de la liste à puce <ul> permet de définir une liste à puce par contre <ol> permet de définir une liste numérotée.
mais ne vous inquiétez pas nous verrons cela dans d'autres exercices.

Voyons ce petit tableau qui indiquera quelques balises intéressantes:

Balise Définition
<b> ou <strong> Permet de mettre en gras votre mot, texte
<i> ou <em> Permet de mettre votre mot, texte en italique
<u> Permet de souligner votre mot ou texte
<h1> Permet de créer un titre, on a h1 à h6 par grandeur de taille.
<br> Permet de créer un saut de ligne dans votre balise de type paragraphe <p>.

Bien évidemment vous l'aurez compris ce n'est que quelques balises, car avec le HTML actuelle (HTML5), on utilise de moins en moins de balises car tout se fait par le biais du CSS, mais pour l'instant il faut passer par la case HTML avant d'attaquer le langage CSS qui permettra de faire de la mise en forme.

Vous savez manier un peu votre texte, mais il est toujours intéressant de pouvoir mettre des images.

Pour insérer une image il faudra insérer la balise <img src="" avec entre guillemets l'adresse de l'image puis la balise alt afin d'indiquer le nom de l'image.

Mais voyons les options de la balise <img src=""

Nota: l'option alt donne le nom de l'image au cas où si celle-ci ne s'affiche pas.

Balise Définition
<img Permet d'insérer une balise de type image.
src Permet de décrire la source de l'image sur votre disque dur ou autre.
width Permet de définir la largeur de l'image.
height Permet de définir la hauteur de l'image.
alt Permet de définir un nom pour l'image.

Insertion d'un tableau

Il est souvent intéressant de pouvoir insérer un tableau dans une page web, là aussi je vais mettre le code à disposition afin vous puissiez faire un copier/coller de celui-ci.

Balise Définition
<table> Permet d'insérer la balise table
<tr> Permet d'insérer une ligne
<th> Permet d'insérer les entêtes
<td> Permet d'insérer les colonnes

Nota: là aussi lorsque nous aborderons le CSS, on pourra mettre des bordures, couleur et pleins d'autres choses.

Création d'un formulaire

Nous arrivons bientôt à la fin de l'apprentissage du HTML, non je plaisante et ne croyez pas que je puisse présenter tout ce qu'il existe en code HTML, cela me prendrait plusieurs livres, cependant si vous suivez mes cours de A à Z, en passant en premier par l'apprentissage du HTML puis le CSS et ainsi de suite vous serez capable de créer une page Web donc revenons à la création d'un formulaire.

Vous rencontrez trés souvent dans la page contact, un formulaire ou vous pourrez indiquer votre nom, adresse email et message et même pour ceux qui sont intéressés la carte google MAPS de l'endroit où est votre logement ou votre entreprise.

Un formulaire de contact commencera toujours par la balise <form>, ensuite on y mettra ce que l'on appelle des LABELS et des INPUTS.

Le tout pourra être envoyé à la personne de votre choix par le bouton submit, mais là aussi voyons cela en exemple.

Dans l'exemple de ci-dessus, j'ai mis 2 labels composés de 2 input, ensuite on trouve une option <select> qui permettra d'avoir un choix.

Pour finir il reste une case à cocher, là aussi je ne vais pas loin dans l'explication de la gestion d'un formulaire, nous verrons cela plus en détail par la suite

Pour finir on crée un bouton <submit> qui permettra d'envoyer le formulaire.

Rédaction en cours

BACK TO TOP