Réalisation de sites web

Sommaire du site

Présentation
Comment apprendre
L'équipement
La page web
  Styles et CSS
  HTML, structure de la page
  HTML, éléments du corps
Le langage JavaScript
  JavaScript, objets "core"
  JavaScript, DOM, les bases
  JavaScript, DOM, node
  JavaScript, compléments
Le langage PHP, les bases
  PHP, fonctions utiles
  PHP pour le web
  PHP, compléments
SQL, introduction
  MySQL et PHP pour le web
  MySQL, plus loin...
Applications AJAX
Annexes utiles
  Fichier .htaccess
  Sécurité des sites web
  Conception d'un site web
  Référencement, syndication

Sommaire détaillé

Mentions légales.

Chapitres de cette page
Contenu  -> 

Page mise à jour le : 12-08-2015

Haut de la page

Présentation
Structure de la page
Quelques spécifications d'en-tête
Le cas des pages de cadres
A suivre...

HTML (structure de la page)

Il ne s'agit pas ici de présenter toutes les spécificités de HTML mais d'indiquer la structure de ce langage et de voir l'essentiel de ses possibilités.

Présentation

Lors de la consultation d'une page web par un utilisateur, le serveur envoie à son navigateur le contenu de la page sous la forme d'un fichier texte contenant, outre le contenu de la page les informations de sa présentation. Cette description est faite en HTML.

HTML signifie " HyperText Markup Language " : langage de balises (pour) hyper-texte. C'est un langage de description de page et pas un langage de programmation.

Le langage est normalisé par un organisme international le " World Wide Web Consortium " (ou W3C) afin que les pages soient affichées de la même manière indépendamment des machines et des navigateurs. Cet objectif n'est pas vraiment atteint car la plupart des navigateurs n'implémentent pas toutes les fonctionnalités requises par la norme et, certains en ajoutent qui leur sont propres.

Il peut sembler inutile de décrire HTML alors que l'on a vu qu'il existait des logiciels facilitant la création des pages web.
Cependant ces logiciels ne sont pas parfaits et, parfois, il peut être judicieux voire nécessaire de charger la page dans un éditeur de texte pour améliorer le code généré, souvent pour ajouter quelques informations que le logiciel de composition ne permet pas de faire.
De plus, l'écriture de programmes côté serveur de génération de page (en PHP par exemple) nécessite une bonne connaissance de l'HTML car le programme devra produire des instructions correctes pour les navigateurs.

Principes de base du langage

* Le langage est constitué de caractères lisibles, à l'origine du " pur ASCII ", donc pas de caractères nationaux (é, à, ç...) ceux-ci sont remplacés par des codes spécifiques ('&eacute' pour 'é').

Désormais cette codification est devenue inutile car il est maintenant possible d'informer le navigateur de la page de code à utiliser pour l'affichage.
On utilise toujours certains codes spéciaux qui ne sont pas représentables tels "&nbsp;" (espace insécable) ou pour des caractères qui ont une signification particulière en HTML comme '&lt;' pour la caractère '<'.

* Les sauts de ligne et espace multiples sont présentés comme un espace unique.

* La structure du langage est organisée en éléments HTML identifiés par les balises. Celles-ci ont un nom encadré par les caractères < et >.
La plupart des balises existent en deux exemplaires : balise ouvrante pour marquer le début d'un passage et balise fermante pour la fin, celle-ci comporte le même nom que la balise ouvrante mais préfixé par une barre oblique /. Pour quelques unes la balise fermante n'existe pas.

 <i> ce texte est en italique</i>

* Les éléments peuvent comporter des "attributs" qui spécifient un comportement particulier. Ceux-ci suivent le nom de l'élément dans la balise ouvrante. Normalement les attributs sont associés à une valeur qui doit être encadrée de guillemets ou d'apostrophes.

<p align="center"> Ce paragraphe est au centre. </p>

* Le nom de la balise et ses attributs peut être en majuscules ou minuscules.

* Si le navigateur ne reconnaît pas (ou ne sait pas traiter) un élément, il l'ignore. Cependant il prend en compte ce qui est entre la balise ouvrante et la fermante.

* Les balises peuvent être imbriquées, mais ne doivent pas se chevaucher.

<p> Il y a de l'<i>italique</i> dans ce paragraphe. </p>

* Si le navigateur trouve des erreurs dans la structure, il "se débrouille au mieux" mais n'affiche pas de message d'erreur.

Structure de la page

En tout début de page (il ne doit y avoir rien d'écrit avant) on trouve une ligne indiquant le type de document. Généralement c'est :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Cela indique que la page est en HTML 4.01 de transition et que la page est structurée selon le document "http://www.w3.org/TR/html4/loose.dtd".

Le reste de la page qui doit se trouvé encadré par le jeu de balises <html>...</html> est constitué de deux parties : la tête et le corps.

La tête : balise <head>, indique les spécifications globales pour la page. Normalement aucun affichage ne se fait dans cette partie.

Le corps : balise <body> est le contenu effectif de la page.

Exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>
      Bienvenue
    </title>
  </head>
  <body>
    <h1>Bonjour à tous</h1>
  </body>
</html>

Qui affiche tout simplement "Bonjour à tous";

Commentaires HTML

Il est possible et souvent utile de placer des commentaires dans la page. Il s'agit de textes qui ne seront pas affichés le navigateur.

Les commentaires sont identifiés par un système de "balises" particulier. Le commentaire est encadré par "<!--" et "-->"..

<!-- Ceci est un commentaire
sur deux lignes
-->

Quelques spécifications d'en-tête

Eléments 'meta'

Leur balise n'a pas d'équivalent de fermeture, toutes les informations sont dans les attributs.

Il y en a de toutes sortes, pour indiquer l'auteur de la page, le résumé de son contenu à l'usage des robots des moteurs de recherche, etc.

En voici un assez importante et destinée au navigateur.

<meta content="text/html; charset=UTF-8" http-equiv="content-type">

Cet élément 'META' indique par ses attributs qu'il s'agit d'un fichier texte-html contenant des caractères du jeu " UTF-8 ". Ainsi on pourra utiliser les caractères accentués sans problèmes.

Certains utilisent 'meta' pour rediriger la page, par exemple :

<meta http-equiv="refresh" content="2; URL=http://www.ailleurs.org/">

Ainsi la page courante ne sera affichée que pendant 2 secondes puis remplacée par la page du site spécifié.

Cette pratique est contestée, tout au moins dans le cas où l'on veut changer de page. Pour cela, il vaut mieux utiliser un mécanisme de redirection sur le serveur.

En revanche, cette technique est intéressante dans les cas où les contenus de la page sont fréquemment modifiés, on souhaite que la page se recharge automatiquement régulièrement. On utilise alors la  forme simplifiée :

<meta http-equiv="refresh" content="60">

Ainsi la page sera rechargée chaque minute.

Elément 'title'

Il indique le titre de page qui s'affichera dans la fenêtre du navigateur. Cette mention est importante car ce titre sera aussi celui de la fenêtre du navigateur et celui du raccourci (signet, favori) si l'utilisateur en place un sur cette page.

<title>Bienvenue</title>

Feuilles de styles

Feuille de style interne, elle est introduite par l'élément 'style' :

<style type="text/css">
  p {
    font-size: 12pt;
    font-family: "Times New Roman",Times,serif;
  }
  .avertissement {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18pt;
  }
 </style>

Qui crée un style de paragraphe et une classe "avertissement".

Feuille de style externe avec l'élément 'link' :

<link rel="stylesheet" href="global.css" type="text/css">

La feuille de style est dans le même répertoire que la page, son nom de fichier est "global.css".

Le cas des pages de cadres (ou "frames")

Cette technique consiste à partager la fenêtre du navigateur en plusieurs "sous-fenêtres" : cadres ou frames. Celles-ci accueillent chacune leur propre document HTML.

Pour réaliser ce partage, on crée un document HTML "principal" : la page de cadres qui indique la forme du partage et les pages HTML à placer dans chaque cadre.

Controverses

Cette technique, bien que définie et non déconseillée par le W3C, est très controversée car elle peut poser quelques problèmes aux utilisateurs.

* L'adresse de la page, indiquée dans la barre d'adresse du navigateur, ainsi que le titre de la page de la barre de titre sont ceux de la page de cadre. Par conséquent si l'on utilise des liens qui modifient le contenu d'un des cadres ce changement n'est pas répercuté dans les informations directement visibles du navigateur.
En particulier si l'utilisateur place un signet / favori / raccourci dans ce contexte celui-ci l'amènera toujours à la configuration de départ du système de cadres. 

* Si l'utilisateur imprime la page, il risque d'être surpris car son navigateur peut imprimer une seule des pages d'un des cadres et ce ne sera pas nécessairement celle souhaitée.

* Certains navigateurs ne gèrent pas correctement les pages de cadres et n'afficheront rien. Ce n'est pas très grave car de tels navigateurs ne sont plus utilisés, sauf....

Remarquons que cette structure peut être remplacée dans la plupart des cas par l'utilisation des styles de boîte qui donnera une visualisation du même ordre en évitant les inconvénients cités.

Méthode

Naturellement, il faut réaliser "classiquement" les pages qui seront placées dans les cadres.  Seule la page de cadre, qui décrit l'agencement est particulière.

Pour la réaliser, on utilise à la place de l'élément <body>, l'élément 'frameset'.
Celui-ci, par ses attributs, indique la composition de page : nombre de lignes et de colonnes.

Les "frameset" peuvent être imbriqués : il peut y avoir des cadres dans des cadres.

Et à l'intérieur de 'frameset' on utilise, pour chaque cadre,  un élément 'frame' (sans balise de fermeture) qui donne, par l'attribut "src=" l'adresse de la page à placer dans le cadre.

A la suite de l'élément 'frameset' il est possible de placer un élément 'noframes' qui contiendra un texte s'affichant si le navigateur ne gère pas les cadres.

Voici un exemple.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>
<title>Page de cadres</title>
</head>

<frameset rows="92,*" cols="*">
  <frame name="banniere" scrolling="NO" noresize
      src="outils.html" >
  <frameset cols="20%,*">
      <frame name="sommaire" marginheight="0" marginwidth="2"
          src="sommaire.html" scrolling="AUTO">
      <frame name="info_pers_cont" marginheight="0" marginwidth="5"
          src="rubriques.html" scrolling="AUTO">
  </frameset>
</frameset>

<noframes>
    Votre navigateur n'affiche pas les cadres !<br>
    <a href="simple.html">Utilisez la version simplifiée</a>
</noframes>
</html>

Utilisateurs de Kompozer.

Ce logiciel de dispose pas de fonctions pour créer des pages de cadres. La seule solution est de prendre un éditeur de texte et d'écrire directement un contenu tel que celui-présenté.

A suivre...

Après avoir vu la structure de la page et l'en-tête, il reste le corps de la page à examiner. C'est une grosse partie car les possibilités sont nombreuses.
=> le corps de la page HTML