LPGTE

Le web constitu parmi les plus importants ancêtre de l'histoire de l'informatique, depuis sa création, il ne cesse de progresser en permanence dans tous les secteurs techniques qu'il englobe, en effet, la présence des sites webs de haute qualités montrent bien l'immense évolution en question qui est favorisé par les différents progrès techniques liés au monde de l'informatique en particulier les innovations qui concernent les équipements mobiles (Smartphones,Tablets) qui ont constitués le point d'orgue pour les nouveaux types des sites webs.

Toutefois,une confusion souvent existante entre Internet et le Web, en effet, le Web n'est qu'une partie d'Internet qui comprend : le Web, les e-mails, le FTP,le Peer-to-Peer, etc...

Le web se base sur le langage de programmation HTML qui n'a cessé d'évoluer aussi depuis sa pramière version crée en 1991 et une nouvelle version de HTML est apparu depuis 2010 qui est baptisé sous le nom HTML5 et qui constitu l'objet de cette présentation.

HTML (HyperText Markup Language) : C'est un langage de conception et de création des sites webs , il a été inventé par Tim Berners-Lee en 1991 qui est le créateur de World Wide Web Consortium (W3C) et de World Wide Web Foundation qui s'occupent de la définition des nouvelles versions des langages liés au Web ainsi que le suivi de l'évolution du web.

Les versions de HTML:

HTML 1 : Première version créée par Tim Berners-Lee en 1991,
HTML 2 : Deuxième version du HTML apparaît en 1994 et prend fin en 1996 ,
HTML 3 : Apparue en 1996 pour contenir des nouvelles fonctionalités telque les tableaux, les applets, les scripts, le positionnement du texte autour des images etc...,
HTML 4 : Apparu en 1998 et propose l'utilisation de frames), des tableaux plus complexes, des améliorations sur les formulaires ainsi que l'exploitation de CSS,
HTML 5 :La dernière version.

Les feuilles de style en cascade CSS (Cascading Style Sheets) est un langage informatique apparu en 1996 qui sert à décrire la présentation des documents HTML, XHTML et XML. Les standards définissant CSS sont publiés par le W3C (World Wide Web Consortium).

Les versions de CSS

CSS 1 : Dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce langage qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères etc...,
CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de CSS rajoute de nombreuses options. On peut désormais utiliser des techniques de positionnement très précises, qui nous permettent d'afficher des éléments où on le souhaite sur la page,
CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement attendues comme les bordures arrondies, les dégradés, les ombres etc...

Créé à l'origine par Netscape et adopté à la fin de l'année 1995, par la firme Sun, principalement employé dans les pages web interactives. C'est un langage interprété, c'est-à-dire que le texte contenant le programme est analysé au fur et à mesure par l'interprète du browser.

jQuery est une bibliothèque JavaScript libre et multiplateforme crée pour faciliter l'écriture de scripts côté client dans le code HTML des pages web. La première version est lancée en janvier 2006 par John Resig. C'est un open-source gratuit qui utilise la license permissive MIT License.

< meta>	Fournir des informations sur le document HTML pour l'analyse automatique des documents par les robots en vue d'éffectuer l'analyse du réseau Internet et l'indexation des pages Web.
<style>	Inclure une feuille de style CSS dans la page.
<script>	Ajouter un script à la page.

Éléments textuels du corps
< p>	Passage au paragraphe suivant.
<pre>	Pour du texte pré-formaté,permet de respecter la mise en page précise d'un texte.
<blockquote>	Le bloc de texte sera entièrement décalé vers la droite et des espaces de type paragraphe seront générés.
<em>	Permet de mettre en valeur un texte, en effet, c'est le navigateur qui choisit comment afficher les mots et pour les ressortir il change l'apparence du texte en italique.
<strong>	Permet de mettre un texte en valeur en utilisant des caractères gras.
<sub>	Pour exposants.
<sup>	Pour les indices.
<h>	De <h1> à <h6> pour les titres.
<br>	Retour à la ligne .
<abbr>	Abbréviation.
<q>	citation .
<time>	Date et/ou heure.
Listes
<ul>...</ul>	Liste à puces: <ul> <li>Elem 1</li> <li>Elem 2</li> <li>Elem 3</li> </ul>
<ol>...</ol>	Liste ordonnée: <ol> <li>Elem 1</li> <li>Elem 2</li> <li>Elem 3</li> </ol>
<dl>...</dl>	Listes de définition: <dl> <dt>Elem 1</dt> <dd>Elem 2</dd> </dl>
Tables
<table>...</table>	Permet la création d'un tableau: ‣<table> ... </table> élément général ‣ <caption> ... </caption> table caption ‣ <th> ... </th> table header ‣ <tr> ... </tr> table row ‣ <td> ... </td> table cell
Images
<img>	Permet d'inclure une image dans la page web.
Formulaires
<form>	‣<form> ... </form> : Définit un formulaire ‣<input> ... </input> : Entrée de formulaire ‣<textarea> ...</textarea> : Zone de texte ‣<select> ... </select> : Liste déroulante ‣<option> ... </option> : Option du sélect
Liens
<a>	Lien Relatif ‣ utilisent ".." ou "/" ‣ <a href="../../file.html">file.html</a> Lien Absolu ‣ <a href="http://google.com">Google</a>
Commentaires
<!— >...<-->	Commentaires dans une page web
Div et Span
<span>...</span>	Elle se place au sein d'un paragraphe de texte, pour sélectionner et formater certains mots uniquement, c'est un elément de type inline.
<div>...</div>	Elle Crée un nouveau « bloc » dans la page et provoque un retour à la ligne, c'est un elément de type block.

Structuration de la page
<header>...</header>	Entête de la page ou d’un sousélément.
<nav>...</nav>	Menu de navigation.
<article>...</article>	Composition autonome, indépendante dans un document, exemple un post dans un forum,un article de presse, une entrée, un commentaire .
<aside>...</aside>	Informations complémentaires d'une page qui seront placés dans une coté.
<div>...</div>	C'est une balise de type block, qui entoure un bloc de contenue dans uen page web.
<footer>...</footer>	Pied de la page ou d’un sousélément.
Formulaire
<form>...</form>	Création de formulaire.
<input type=”text”>	Création de champ de texte basique .
<input type=”number”>	Création d'un champ de type Nombre.
<input type=”email”>	Création d'un champ de type Adresse email.
<input type=”url”>	Création d'un champ de type Adresse web.
<input type=”tel”>	Création d'un champ de type Numéro de téléphone.
<input type=”password”>	Création d'un champ de type Mot de passe .
<input type=”search”>	Création d'un champ de recherche.
<input type=”checkbox”>	Création d'un Case à cocher.
<input type=”submit”>	Création de Bouton d’envoi du formulaire.
<input type=”textarea”>	Création d'un champ de texte à plusieurs lignes.
<input type=”select”> et <input type=”option”>	Création d'un Menu déroulant.
<label for=”...”>	Création de Libellé d'un champ.
Attributs des champs de formulaire
value	Valeur par défaut du champ.
placeholder	Indication grisée dans le champ.
readonly	Champ en lecture seule,
disabled	Chanmp non modifiable,
maxlength	Nombre de caractères autorisé,
autofocus	Champ selectionné au chargement de la page,
required	Champ obligatoire,

Les balises HTML peuvent se ranger en deux catégories :

Les versions de HTML:

Les balises block : Une balise de type block crée automatiquement un retour à la ligne avant et après,
Les balises inline : Une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block et elle ne crée pas de retour à la ligne,

Le tableau suivant illustre la répartition des différents balises entre les deux catégories:

Balise de Type Block	div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, table.
Balise de type Inline	span, a, img, span, em, strong, cite, code, abbr.

Audio et video: Prise en charge directe des des format de fichiers audios et videos sans plugins supplémentaires,
Mobile: Facilités pour le développement mobile,
Canvas : Permet de dessiner au sein de la page web des formes (triangles, cercles...) mais aussi ajouter des images, les manipuler, appliquer des filtres graphiques,
Drag & Drop : Permet de faire « glisser-déposer » des objets dans la page web,
Géolocalisation : Pour localiser le visiteur et lui proposer des services,
Web Storage : Permet de stocker un grand nombre d'informations sur la machine du visiteur. C'est une alternative plus puissante aux traditionnels cookies,
Appcache : Permet de demander au navigateur de mettre en cache certains fichiers, qu'il ne cherchera alors plus à télécharger systématiquement. Utile pour les application fonctionnant en mode « hors ligne » (déconnecté),
Web Sockets : Permet des échanges plus rapides, en temps réel, entre le navigateur du visiteur et le serveur qui gère le site web (c'est une sorte d'AJAX amélioré),
WebGL : Pour l'introduction de la 3D dans les pages web en utilisant le standard de la 3D OpenGL.

HTML5 est la nouvelle version successeur de HTML4 qui est introduit depuis 2010 pour faciliter la création et la gestion des contenues des sites webs statiques et dynamiques. Plusieurs aspects techniques ont été incorporés en vue de garantir la flexibilté du monde du web que pour les développeurs en leurs procurant des méthodes de développements plus rapides et optimales (Les canvas,Web sockets,Web Storege), que pour les utilisateurs en leurs offrant des sites webs plus rapides et adaptés aux nouvelles technologies(smartphone, tablets... etc).

Apprenez à créer votre site web avec HTML5 et CSS3
HTML et Javascript
Jquery

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License

Introduction à HTML5