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


Création d'une première page
Mise en forme du texte
Les liens
Les tableaux
Les images
A suivre...

Page web

Création d'une première page web simple

Ici, on va utiliser l'éditeur de pages, c'est bien plus simple que d'écrire en HTML.

Les commandes présentées dans cette page sont celles de l'éditeur Kompozer.

L'utilisation est assez proche du traitement de texte, dès que l'éditeur est lancé, une page blanche est affichée dans sa fenêtre. Il suffit d'écrire.

Avant d'enregistrer cette page, il est utile de lui donner un titre : menu " Format", commande "Titre et propriétés de la page".

Titre de page et nom de fichier page

Le titre de page est important car lors de sa lecture avec un navigateur, le titre de la page apparait comme titre de la fenêtre du navigateur. Et si l'utilisateur marque cette page (signets / favoris / raccourcis), le titre de la page sera le nom de l'élément de marquage.

A l'enregistrement, il est souhaitable d'indiquer un nom de fichier qui ne contienne que des lettres ou des chiffres (éventuellement le souligné '_'). Car, si elle est ensuite envoyée à un serveur distant, il n'est pas certain que celui-ci gère les autres caractères. Laisser aussi comme extension du nom de fichier ".html" afin que le navigateur la reconnaisse.

Tester

Il suffit de lancer un navigateur, de sélectionner "Fichier / Ouvrir" pour ouvrir la page que l'on vient de créer.

Si un serveur local est installé, il est judicieux d'enregistrer le fichier dans le répertoire web de ce serveur, habituellement "www".
On accède à la page en indiquant son adresse de la page (URL) dans la barre d'adresse du navigateur.

On doit voir alors le texte que l'on a écrit.

Mise en forme du texte

Pour ce qui est de la représentation des caractères : police, taille, couleur et attributs, on trouve dans le menu "Format" tout ce qui convient. Il faut toutefois éviter d'utiliser des polices rares car il est probable qu'elles ne seront pas installées sur la machine de l'internaute lecteur.

Il est possible et utile d'indiquer plusieurs polices pour un même élément, par exemple "Helvetica, Arial, sans-serif". Dans ce cas si le système de l'internaute ne dispose pas de "Helvetica" il utilisera "Arial" et s'il ne l'a pas, il prendra "sans-serif".
Si aucune des polices proposées n'est disponible, le système utilise une police arbitraire (par défaut).

En revanche, la mise en forme des paragraphes est assez différente de celle que l'on trouve dans un traitement de texte. En effet, il n'est pas possible ici de définir des retraits et espacements. On ne trouvera que certains "types" de paragraphes : titre 1, titre 2, etc... Mais, on le verra plus tard, on pourra réaliser une mise en forme précise en utilisant les styles.

Il en est de même en ce qui concerne la mise en page générale.

Lien

Les liens vers d'autres sites posent un problème d'ordre déontologique.

En effet, ces sites ne souhaitent pas nécessairement que votre site "pointe" vers eux. Par conséquent , il serait utile de demander leur accord. Mais la plupart du temps ils ne répondent pas à cette demande.

Un principe qui semble correct est de placer des liens uniquement vers les sites référencés par les moteurs de recherche.

En revanche si vous connaissez un site non référencé, ne placez pas un lien vers lui sans son accord. En effet si votre site est référencé, celui vers lequel vous "pointez" le sera aussi.

Le mot "web" signifie "toile d'araignée", toile dont les fils sont les liens (hyperliens) entre différentes pages, parfois sur d'autres sites ou, au contraire, vers différents endroits de la page (ancres).

Créer un lien sur un élément est très simple : on sélectionne l'élément (source du lien) et, depuis le menu "Insertion" on lance la commande "Lien...", il existe aussi un bouton "Lien" dans la barre d'outils.

S'il s'agit d'un lien vers une autre page du site, il suffit d'utiliser le bouton de parcours à droite de la case d'emplacement du lien afin de sélectionner la page cible.

Si c'est un lien vers un autre site, on entre son adresse complète dans la case d'emplacement du lien (commençant par "http://").

La boîte de dialogue de création de lien propose une zone "cible" où l'on peut indiquer que la page doit s'ouvrir dans une nouvelle fenêtre.
Si l'on choisi cette option, l'utilisateur qui clique sur ce lien ne verra pas sa page actuelle remplacée mais aura, selon sa configuration, une nouvelle fenêtre de navigateur ou un nouvel onglet qui accueillera la page.
Cette pratique, bien que controversée, est souvent utilisée pour les liens vers d'autres sites.
Voici un  exemple :
http://fr.selfhtml.org/html/liens/projetexterne.htm

Liens internes à la page (vers ancre)

Dans le cas de pages longues, on peut souhaiter faire des liens vers des emplacements de la page (comme ceux placés ici dans la marge de droite).

Il faut commencer par définir l'emplacement cible du lien : l'ancre. Pour cela on place le curseur à cet emplacement ou on sélectionne une zone (de texte) le définissant. On utilise la commande "Insertion / Ancre..." ou on clique sur le bouton "Ancre" de la barre d'outils. Il suffit de donner un nom à l'ancre (lettres, chiffres ou '_' uniquement).

Pour créer le lien, on procède comme précédemment sauf qu'au lieu d'utiliser le bouton de parcours, on clique sur la flèche à droite de la case d'emplacement et on sélectionne le nom de l'ancre qui est préfixé par le caractère '#'.

Les tableaux

Les tableaux sont utilisés pour une présentation sous la forme lignes-colonnes. Ils servent aussi souvent à réaliser une mise en page structurée.

On crée un tableau par la commande "Tableau / Insérer /Tableau" ou le bouton "Tableau" de la barre d'outils. Il faudra spécifier le nombre de lignes et de colonnes désiré, mais cela peut être changé par la suite.

Le logiciel affiche le tableau dans la page.

Il y a un grand nombre de possibilités pour la mise en forme et l'organisation du tableau. Elles se trouvent dans le menu "Tableau" (il faut que le curseur soit placé dans le tableau avant d'appeler ces commandes).

On peut fixer l'espace entre les cellules fusion de cellules horizontales
Ici une cellule et les marges dans les cellules fusion de cellules
verticales
---
Utiliser un fond de couleur ou une image

Les images

Papillon

Les données d'images ne sont pas incluses la page. Elles sont dans un fichier. La page contient seulement un lien vers ce fichier.

Les seuls formats d'image reconnus par les navigateurs sont JPEG, GIF et  PNG.

Il est possible d'attribuer à l'image une taille différente de celle qu'elle a réellement, dans ce cas le travail de ré-échantillonnage sera fait par le navigateur de l'utilisateur. Donc, il vaut mieux que le fichier contienne l'image à sa taille d'affichage et de laisser les attributs de taille à la valeur d'origine.

L'insertion d'une image dans la page se fait par le menu "Insertion" ou par le bouton "Image" de la barre d'outils.

               

A suivre...

Les styles nous offrent des possibilités plus étendues de mise en forme.

On peut aussi concevoir des feuilles de styles afin de ne pas devoir redéfinir les styles sur chaque page du site.

=> Les styles et feuille de styles.