MEZOTICAM - Développement & Évolution numérique

Introduction

Créer une page web, rien de plus simple. Elle doit être délimitée par des TAGs. Un tag se trouve presque toujours en deux parties, l'un ouvrant et l'autre fermant. S'il n'y a pas de tag fermant, le tag se termine par un slash (exemple: <br>).

Mais le 1^er tag qui délimte la page est :

<html>

et la page se termine par un 2^ème tag :

</html>

A l'intérieur de ces tags principaux, peuvent s'en trouver des dizaines d'autres, mais les principaux pour former une page de base sont :

 <head>
  <title></title>
 </head>
 <body>
 </body>

Composition d'une page

<!DOCTYPE html>
<html>
 <head>
  <title></title>
 </head>
 <body>
 </body>
</html>

Autres balises (TAGS)

Une section

 <div>
 </div>

Un paragraphe

 <p>
 </p>

Une image

 <img />

Cette balise prend des paramètres

Source de l'image:
src="chemin et nom du fichier"
Taille de l'image:
width="largeur_image_en_pixels"
height="hauteur_image_en_pixels"
Alternative:
alt="Texte_alternative"
Titre:
title="Texte_du_titre_de_l_image"

Balise complète

Haut

Protocole

Le language utilisé pour créer une page web est le HTML (HyperText Marckup Langage). Le navigateur contient une partie qui interprète le texte du document afin d'afficher les éléments voulus. Comme sont l'indique, ce language comporte des "marqueurs", (en anglais Tag).

Une page web commence toujours par le premier Tag <html> (début),
et se termine par le dernier Tag </html> (fin).

Entre ces deux Tags viennent se placer plusieurs autres, notamment, <body> (début) et </body> (fin), qui délimitent le corps de la page.
Une partie supérieure constitue la tête de la page et utilise les Tags <head> (début) et </head> (fin).

Entre les tags <head> (début) et </head> (fin), se trouve plusieurs autres qui servent à la descriptions de la page et autre titre. Exemple pour le titre, on aura : <title> (début) et </title> (fin)

Le HTML consiste en un partitionnement du document, par marquage à l'aide de Balises. Certaines parties sont obligatoires et d'autres optionnelles. Toutes se trouvent dans des Étiquettes marquant généralement le début et la fin de la marque. Ces étiquettes permettent de différencier et d'identifier chaque partie.

A cause de la disparité des ordinateurs, il a fallu que l'auteur leur trouve un point commun à tous, afin que le langage soit compatible. Ce point commun est la plage de caractères utilisée pour écrire le texte du script du document HTML.

Le code ASCII est un standard connu de tous les systèmes informatiques et utilise les valeurs numériques de 32(2⁵) à 128 (2⁷).

Le Navigateur a besoin des commandes que sont les étiquettes pour afficher le document.

Exemple

Lors de la création d'un document il est inutile de faire des "retour à la ligne" en appuyant sur la touche entrée, le navigateur ne comprendra pas. La commande qui permet un retour à la ligne dans celui-ci est : <br>. Cette commande est solitaire, c'est à dire qu'il ne comporte pas de commande de fermeture.

Les paramètres acceptés par certaines étiquettes se placent à l'intérieur de celles-ci.

Exemple

L'étiquette de lien HyperTexte <a> admet plusieurs type de paramètres, vers l'extérieur ou à l'intérieur du document lui-même, dont l'un d'entre-eux peut être
<a href="http://www.nomsite.com/nomdocument.html">Document </a>

Il est très important de réaliser un bon codage du document, car tous les pays ne disposent pas des mêmes caractères pour les mêmes valeurs numériques. L'utilisateur n'a besoin que d'une chose, c'est de comprendre très rapidement ce qu'il a sous les yeux.

<html>...</html>

Début et Fin d'un Document HTML. Sans ces deux étiquettes, le document n'est pas reconnu en tant que tel.
(Implicitement, si la première balise se trouve au début du document, celui-ci est reconnu en tant que page web.)

Étiquettes contenues entre les marques <html> et </html>

Balises entre <html> et </html>
<head> </head>	En-tête du document. Contient un grand nombre d'informations sur celui-ci. Ces deux marques sont contenues comme toutes les autres, entre les marques de Début et de Fin de document.
<body> </body>	Contient tout ce qui sera affiché dans le Navigateur, c'est le corps du document.

Haut

Étiquettes contenues entre les marques <head> et </head>

Attributs de la balise <head>

Titre du Document. Le Navigateur affiche ce texte dans la barre de titre de la fenêtre.

<meta >

Permet l'insertion de commandes destinées au navigateur et autres recherches.

name	Indique le nom de la méta commande à utiliser.
content	Définit le contenu de name.

<link >

Permet l'insertion d'un lien vers des fichiers destinées à la mise en page du navigateur et autres .

href	Indique le chemin à suivre pour atteindre le fichier.
type	Définit le type de contenu de href.
rel	Définit la relation entre le document en cours et cette ressource.

Utilisation

	<meta charset="utf8" >
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="nom auteur" >
	<link href="https://www.mezoticam.fr/style.css" type="text/css" rel="stylesheet" >

Zone réactive | Tableau | Section

Étiquettes contenues entre les marques <body> et </body>

Ancre

<a>lien</a>

Établi un lien avec un autre document,
ou sert de point de repère dans un document.

Attributs de la balise <a>
href='url'	Adresse de la cible
title='texte'	Spécifie un titre pour le document cible.
name='texte'	Identifie et nomme une partie du document. Celle-ci peut-être référencée dans une URL ('#lenom').
target=nom	Spécifie le *nom* de la fenêtre où sera affiché la page. nom est : *_blank* Ouvre une nouvelle fenêtre de navigation. *_self* Ouvre dans le même fenêtre que le document source. *_parent* Le document est chargé dans la frame parent. *_top* Force le chargement du document dans la fenêtre de niveau le plus élevé.
coords='coordonnées x,y'	Spécifie les coordonnées d'une zone cliquable d'une image réactive. (utilisé avec l'attribut shape).
shape='zone'	Spécifie les coordonnées et la forme d'une zone cliquable d'une image réactive. *circle x,y,r* *rect x,y,w,h* *poly x1,y1,x2,y2...* *polygon x1,y1,x2,y2...*

Zone réactive

<area>

Utilisé à l'intérieur du marqueur map afin de définir une zone réactive d'une image.

Attributs de la balise <area>
coords='valeur'	Spécifie uune liste de coordonnées (en pixels), séparées par des virgules. En fonction de la valeur de *shape, cette zone sera : rectangulaire* circulaire polygonale
href='url'	URL d'une zone
nohref	Zone réactive sans action lors d'un clic.
shape=forme	Le nom prédéfini de la forme peut être : rect ou rectangle circ ou circle poly ou polygon Il est nécessaire d'utiliser coords

Tableau

Permet de construire un tableau pour une présentation structurée. D'autres étiquettes viennent entre ces marques, pour définir les cellules composant le tableau. Ce sont les étiquettes de ligne et de colonne. Toutes peuvent contenir des .

Attributs de la balise <table>
<tr>...</tr>	Définit une ligne dans un tableau.
<th>...</th>	Définit une cellule d'un tableau comme en-tête.
<td>...</td>	Définit une colonne dans un tableau.

Section

Début et fin d'une division de page.

Attributs de la balise <div>
align=left/center/right	Aligne le texte se trouvant dans cette zone, à gauche, au center ou à droite.

Haut

Étiquettes contenues entre les marques <body> et </body>

Imagerie

<img>

Insère une image dans la page. balise simple

Attributs de la balise <img>

src='nomfichier'

Indique la source de l'image

alt='Texte'

Texte remplaçant l'image le temps du chargement.

border='valeur'

Indique si l'image doit comporter une bordure pour signaler un lien.

align=type

Alignement de l'image

absbottom	Le bas de l'image avec le bas de la ligne
absmiddle	Le milieu de l'image avec le milieu de la ligne.
baseline	Le bas de l'image avec le bas de la ligne courante.
bottom	Le bas de l'image avec le bas de la ligne. (valeur par défaut)
center	Centre l'image horizontalement dans la page.
left	L'image se trouve placé à gauche et le texte à sa droite.
middle	La base du texte avec le milieu de l'image.
right	L'image à droite et le texte se déroule à sa gauche.
texttop	Le haut de l'image avec le haut du texte.
top	Le haut de l'image avec l'élément le plus haut.

height=valeur

Hauteur en pixels

ismap

indique l'utilisation d'une zone sensible sur une image réactive.

usemap=url

Carte contenant les coordonnées de la zone sensible.

width=valeur

Largeur de l'image en pixels.

Button | Input | Option

Étiquettes contenues entre les marques <body> et </body>

Formulaire

  <form>...</form>

Un formulaire est une zone toujours délimitée pour la saisie de données. Les éléments placé à l'intérieur de ces marques font tous partie d'un seul et même ensemble.

Attributs de la balise <button>

Bouton identique au bouton standard créé avec <input>, mais sur lequel il est possible insérer une image.

name=texte	Donne un nom au contrôle.
value=texte	Valeur initiale du bouton.
type = submit / reset / button	Suivant le type, le bouton servira à : Soumettre le formulaire. Effacer le formulaire. Réaliser une définit par le webmaster.

Attributs de la balise <input />

Bouton "push" dont le comportement est fonction du type choisi.

En fonction du TYPE
=button	Bouton name=texte -> Donne un nom au formulaire à traiter. value=texte -> Valeur initiale du paramètre.
=checkbox	Case à cocher checked -> La case est cochée par défaut. name=texte -> Donne un nom à la case à cocher, pour le traitement. value=texte -> Valeur initiale.
=file	Transmet un fichier avec le formulaire accept=type MIME -> Spécifie une liste de type de contenus. Permet aussi de filtrer les fichiers. name=texte ->Donne un nom au contrôle. value=texte -> Spécifie le nom du fichier initial.
=hidden	Contrôles cachés servant à transmettre des informations au serveur pour le traitement. name=texte -> Nom du paramètre passé. value=texte -> Valeur du paramètre soumis.
=image	Subtitut une image au bouton submit align=top/middle/bottom -> Aligne le texte en fonction des lignes de texte. name=texte -> Nom du paramètre à soumettre. src=url -> Donne l'adresse de l'image.
=password	Elément de saisie de mot de passe. Tous les caractères sont remplacés par un (*). Rien à voir avec l'encryptage. maxlength=nombre -> Nombre maxi de caractères. name=texte -> Nom de l'élément à soumettre. size=nombre -> Taille de la zone de saisie (ne pas confondre avec nombre maxi de caractères). value=texte -> Contenu initial de la zone.
=radio	Bouton pouvant être activé ou désactivé. Si plusieurs portent le même nom (groupe), un seul peut-être activé. checked -> Force l'activation du bouton. name=texte -> Nom du contrôle. Value=texte -> Valeur du paramètre soumis à traitement.
=reset	Remet tous les éléments d'un formulaire à leur valeur initiale. value=texte -> Texte apparaîssant sur le bouton.
=submit	Envoie l'ensemble des données du formulaire au programme de traitement. value=texte -> texte apparaîssant sur le bouton.
=text	Zone de saisie de texte. maxlength=nombre -> Nombre maxi de caractères pouvant être saisies. name=texte -> Nom de l'élément. size=nombre -> Taille de la zone de saisie. value=texte -> Valeur initiale apparaîssant dans la zone.

Attributs de la balise <option>

Une proposition de liste à choix multiple placée entre les marques<select>...</select>.

selected	Présélection d'un item dans la liste.
value=texte	Valeur transmise à la place du contenu de <option>.
width=nombre	Largeur de l'objet (en pixel).

Attributs de la balise <select>

Menu à choix multiples ou liste déroulante.
Contient <option>.

multiple	Permet la sélection de plusieurs éléments dans la liste proposée.
name=texte	Nom de l'élément de <option>.
size=nombre	Si =1 (multiple non utilisé), la liste est sous forme de menu. Une valeur autre présente la liste sous forme de liste déroulante.

Attributs de la balise <textarea>

Zone de texte à plusieurs lignes.

cols=nombre	Largeur visible du champs (en nombre de caractères).
name=texte	Nom de l'élément, qui sera transmis au traitement.
rows=nombre	Hauteur visible de la zone (en nombre de lignes).
warp=soft/hard/off	Retour à la lignes. (Traitement logiciel, physique, désactivé)

Haut

Etiquettes contenues entre les marques <body> et </body>

Formulaire (suite)

Attributs de la balise <select>

Menu à choix multiples ou liste déroulante.
Contient <option>.

multiple	Permet la sélection de plusieurs éléments dans la liste proposée.
name=texte	Nom de l'élément de <option>.
size=nombre	Si =1 (multiple non utilisé), la liste est sous forme de menu. Une valeur autre présente la liste sous forme de liste déroulante.

Attributs de la balise <textarea>

Zone de texte à plusieurs lignes.

cols=nombre	Largeur visible du champs (en nombre de caractères).
name=texte	Nom de l'élément, qui sera transmis au traitement.
rows=nombre	Hauteur visible de la zone (en nombre de lignes).
warp=soft/hard/off	Retour à la lignes. (Traitement logiciel, physique, désactivé)

Le contenu des pages web devront forcément tenir compte de la technologie mise en œuvre par le Protocole de communication prévu, ainsi que le Format de contenus. En l'occurence, le HTTP (HyperText Transfert Protocole), et le HTML (HyperText Markup Language).

Quand un client demande une page (Requête), le serveur la lui fait parvenir. Ceci se fait grâce au protocole HTTP et TCP (Tranfert Controle Protocole)

Réponse :

 <!DOCTYPE html>
 <html>
  <head>
   <title>Example</title>
   <meta charset="utf-8"
  </head>
  <body>
   <p>Ceci est une page d'exemple.</p>
  </body>
 </html>

Avec ce code, entre autres choses, le navigateur web pourra afficher la page. C'est grâce au nom de la page (URI Uniform Resource Identifier) que le serveur a pu permettre au navigateur d'afficher cette page. À noter que l'URI peut contenir l'URL (Uniform Resource Locator) ou l'URN (Uniform Resource Name) ou les deux. D'une manière générale, seule l'URL sera évoquée et utilisée pour passer une requête avec le navigateur.

URL : Permet de localiser physiquement le document recherché.
URN : Identifie le document, mais ne le localise pas.

Le fichier que le serveur recherche par défaut dans la racine d'un site web se nomme index avec pour extension .html, .htm ou .php
Ainsi, le premier fichier du site devra porter le nom index.

Exemple :

index.html ou index.htm ou index.php

Les autres fichiers peuvent avoir n'importe quel nom (en respectant la convension) et se situer ou bien dans la racine du site ou dans des dossiers.

Une chose importante, la mise en forme de la page. Pour ce faire, le language HTML peut être suppléé par le CSS (Cascading Style Sheet).

Le CSS reprend les tags du HTML et permet à l'utilisateur d'en créer autant qu'il le désire. Ce language de script respecte une syntaxe bien définie, et permet de réaliser une mise en page selon la norme W3C.

Exemple :

 /*--- Tag HTML ---*/
 body{ 
  color: #0023ef;
  background-color: #06fe0f;
 }

 /*--- Tag Personnalisé ---*/
 .monstyle{
  font-family: Verdana;
  color: #f6feff;
 }

Ce qui donne une couleur de fond verte et une couleur de texte bleue pour le corps de la page et une couleur très claire pour la définition .monstyle .
À l'affichage de la page, le tag HTML est automatiquement utilisé comme défini dans le style, tandis que le tag personnalisé sera actif selement aux endroits définis par le programmeur.
Résultat :

Ceci est un exemple.
mon style

Ce style de mise en page peut-être inséré dans la page même ou mis dans un fichier à part. L'intérêt de mettre toute la mise en page dans un fichier à part, est de tout centraliser et de s'assurer une mise au point simplifiée.

Exemple 1

Exemple de fichier index.html :

<!DOCTYPE html>
<html>
 <head>
  <title>Page d'accueil du site</title>
 </head>
 <body>
  <p>Bonjour le monde</p>
  <p>
   Je suis heureux de vous acueillir sur mon site, où je vous présenterai
    mes photos de vacances.<br>
   Voilà ma première image.<br>
  </p>
  <div align="center"><img src="images/maphoto.jpg" alt="Ma photo de vacances"></div>
  </body>
</html>

Voir l'

Exemple 2

Exemple de fichier index.html avec une mise en page dans le fichier même :

<!DOCTYPE html>
<html>
 <head>
  <title>Page d'accueil du site</title>
  <style type="text/css" rel="stylesheet">
  /*--- Tag HTML ---*/
  body{ 
   color: #0023ef;
   background-color: #06fe0f;
  }

  /*--- Tag Personnalisé ---*/
  .monstyle{
  font-family: Verdana;
  color: #f6feff;
  }
 </style>
 </head>
 <body>
  <p>Bonjour le monde</p>
  <p class="monstyle">
   Je suis heureux de vous acueillir sur mon site, où je vous présenterai
    mes photos de vacances.<br />
   Voilà ma première image.<br />
  </p>
  <div align="center"><img src="images/maphoto.jpg" alt="Ma photo de vacances"></div>
 </body>
</html>

Voir l'

Exemple 3

Exemple de fichier index.html avec une mise en page dans un fichier .css :

<!DOCTYPE html>
<html>
 <head>
  <title>Page d'accueil du site</title>
  <link href="monexemple.css" type="text/css" rel="stylesheet" />
 </head>
 <body>
  <p>Bonjour le monde</p>
  <p class="monstyle">
   Je suis heureux de vous acueillir sur mon site, où je vous présenterai
    mes photos de vacances.<br />
   Voilà ma première image.<br />
  </p>
  <div align="center"><img src="images/maphoto.jpg" alt="Ma photo de vacances" /></div>
 </body>
</html>

Contenu du fichier monexemple.css :

 /*--- Tag HTML ---*/
 body{ 
  color:#0023ef;
  background-color:#06fe0f;
 }

 /*--- Tag Personnalisé ---*/
 .monstyle{
  font-family: Verdana;
  color: #f6feff;
 }

Voir l'

Le résultat entre l'exemple 2 et l'exemple 3 est absolument identique, mais la différence est grande. En effet, à l'aide d'un fichier .css, tous les fichiers du site pourront accéder à la même mise en page. Et ce grâce, d'une part, à la ligne incluse dans l'en-tête des pages :

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

et d'autre part, à l'utilisation des class définies par le programmeur dans ce fichier .css.

...
  <p class="monstyle">
...

Pour exister, un site web doit se trouver sur un Serveur web. Il s'agit d'un ordinateur dont la seule fonction sera de répondre à la demande d'un autre ordinateur nommé "Client". En l'occurence, transmission d'un document à afficher, à l'aide d'un navigateur.

Ces documents (ou pages), régit par une structure interne très précise, peuvent contenir du texte seul ou des images, ou les deux.

Dans un site web, le nombre de pages n'est pas limité, mais il faut faire de telle sorte que l'essentiel soit sur chaque page, le plus clairement possible.
À mesure que le nombre de pages augmente, le travail de maintenance s'intensifie et les difficultés sont proportionnelles.

Il convient de bien structurer son site pour une bonne maintenance et une bonne navigation de page en page. Pour celà, le "rangement" permet de classer en rubriques chaque thème abordé.

Un site écrit en scripts PHP allège la maintenance et facilite l'optimisation.

Rappels

Le document qui compose une page, comporte des éléments de délimitation, appelés Balises. Chaque balise a une fonction bien définie.

Délimitation du document : <html></html>

Délimitation de l'en-tête et du corps de la page à l'aide des tags <head></head> et <body></body>

<!DOCTYPE html>
<html>
 <head>
  <title>Exemple</title>
  <link href="lestyle.css" type="text/css" rel="stylesheet">
 </head>
 <body>
  <p class="lestyle">
   Le texte qui doit être afficher.
  </p>
 </body>
</html>

Autres contenus essentiels dans l'en-tête

Pour une bonne prise en charge de la page par le navigateur, il est important de lui indiquer le type de données et les caractères à utiliser pour l'affichage.
Pour celà, on utilise des Métas commandes. Celles-ci servent aussi à d'autres marquages.

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
...
  <meta name ="description" content ="Les Cours de Ma zone web" />
  <meta name ="keywords" content ="Cours informatique, création, site, serveur, client" />
...

C'est aussi dans cette zone que l'on inclus certains fichiers externes, grâce aux commandes link (pour un fichier .css) et script (pour un fichier .js Javascript).

  <link href="nomfichier.css" rel="stylesheet" type="text/css" />
  <script language="JavaScript" src="nomfichier.js"></script>

Le titre de la page permet de l'identifier, et celui-ci apparaît dans la barre de titre de la fenêtre.

  <title>Titre de la page</title>

Des liens hypertextes sur la page permet d'accéder aux autres pages, grâce à la balise
<a href="URL_de_la_Page">Texte_du_lien</a>

...
  <a href="decouv.htm">Découverte</a>
...

Haut

Étiquettes contenues entre les marques <body> et </body>

Tableau : Paramètres

Paramètres de Tableau

<table>

Début de la Table.

*align=left/center/right*	Centre un tableau dans une page.
*background=url*	Place une image dans le fond du tableau.
*bgcolor=#rrvvbb ou nom de couleur*	Couleur de fond de la table.
*border=valeur*	Spécifie la largeur de la bordure à placer autour de la table.

<tr>

Définit une ligne.

*align=left/center/right*	Aligne le texte de la ligne.
*bgcolor=#rrvvbb*	Couleur de la ligne de la table.
*valign=top/middle/bottom/baseline*	Alignement verticale du texte des cellules de la ligne.
*background=url*	Image pour le fond de la ligne.
*border=#rrvvbb*	Couleur de bordure pour la ligne.
*bordercolorlight=#rrvvbb*	Couleur du liseré ombré de la bordure de la ligne.
*bordercolordark=#rrvvbb*	Couleur du liseré clair de la bordure de la ligne.

<td>

Définit une cellule.

*align=left/center/right*	Aligne le texte dans la cellule concernée.
*background=url*	Image de fond de la cellule.
*bgcolor=#rrvvbb*	Couleur de fond de la cellule.
*colspan=valeur*	Spécifie le nombre de colonnes sur lesquelles cette cellule s'étend.
*height=valeur*	Hauteur de la cellule (en nombre de pixels ou pourcentage).
*rowspan=valeur*	Spécifie le nombre de lignes sur lesquelles s'étend la cellule courante.
*valign=top/middle/bottom/baseline*	Alignement verticale du texte dans la cellule.
*width=valeur*	Largeur de la cellule (en nombre de pixels ou pourcentage).

<th>

Définit une cellule d'en-tête de table. Sera mise en gras, alignée verticalement et horizontalement dans la cellule.

Mêmes balises que <td>

Voir liste de <td>.

Haut

Étiquettes contenues entre les marques <body> et <body>

Formulaire (suite)

Utilisation de <select>

Créé un élément de liste proposant un choix aux utilisateurs.

Script


	<select>
	<option>Faites un choix</option>
	<option>Proposition #1</option>
	<option>Proposition #2</option>
	<option>Proposition #3</option>
	</select>

Résultat

Etiquettes contenues entre les marques <body> et </body>

Formulaire (suite)

Utilisation de <textarea>

Créé un élément de saisie de texte pour les utilisateurs.

Script

warp="hard" Permet de transmettre les retours à la ligne au serveur.
name="message" Transmet une variable nommé message, contenant le texte saisi.

Résultat

Composition d'une page HTML

Introduction

Composition d'une page

Autres balises (TAGS)

Cette balise prend des paramètres

Balise complète

Protocole

Exemple

Exemple

<html>...</html>

Étiquettes contenues entre les marques <html> et </html>

Étiquettes contenues entre les marques <head> et </head>

Étiquettes contenues entre les marques <body> et </body>

Ancre

Zone réactive

Tableau

Section

Étiquettes contenues entre les marques <body> et </body>

Imagerie

Button | Input | Option

Étiquettes contenues entre les marques <body> et </body>

Formulaire

Etiquettes contenues entre les marques <body> et </body>

Formulaire (suite)

Réponse :

Exemple :

Exemple 1

Exemple 2

Exemple 3

Rappels

Autres contenus essentiels dans l'en-tête

Étiquettes contenues entre les marques <body> et </body>

Tableau : Paramètres

Étiquettes contenues entre les marques <body> et <body>

Formulaire (suite)

Utilisation de <select>

Créé un élément de liste proposant un choix aux utilisateurs.

Etiquettes contenues entre les marques <body> et </body>

Formulaire (suite)

Exemple 1

Exemple 2