Programmation Des Pages Web Statiques

PROGRAMMATION DES PAGES WEB STATIQUES
I. Choix et téléchargement d’un éditeur de texte et d’un navigateur
L’éditeur de texte est le logiciel ou l’utilitaire qui permet de saisir son code HTML, on
en distingue plusieurs, on peut citer notepad++, bloc note, adobe dreamweaver, web expert,
Html Editor…
Un navigateur (ou browser) quant à lui est une application permettant d’ouvrir des
pages web, on peut citer entre autre Mozilla Firefox, internet explorer, opéra mini, Google
chrome, Netscape, ucbrowser.
Le téléchargement s’effectue grace à un moteur de recherche ou à partir du site de

l’editeur.
II. Structure de base et syntaxe d’un document HTML
La structure basique d’un document HTML est la suivante :
-
La signature initiale,
-
Un entête contenant le titre,
-
Un corps de programme
Quant à la syntaxe, elle procède sous forme de balises ; chaque balise ouverte doit être
refermée (éventuellement) pour être prise en considération dans le programme. Elle est
ouverte comme suit : <nom de la balise> et refermée comme suit : </nom de la balise>.
Ce qui correspond à la structure de base suivante :
<HTML> /* début du programme*/
<HEAD> /* début de l’entête */
<TITLE> Titre de la page </TITLE> /* titre de la page*/
</HEAD> /* fermeture de l’entête*/
<BODY> /* début du corps du
programme */
/ * CORPS DU
PROGRAMME */
</BODY> /* fermeture du corps */
</HTML> /* fermeture du
programme */
Une fois la page web éditée, l’enregistrement devrait se faire avec l’utilisation de
l’extension .html ou .htm. Ainsi, à son ouverture, c’est le navigateur qui prendra la relève. Ce
dernier affichera la page web correspondante.
III. Le HTML dans son ensemble
NOTES DE COURS M. KEUDEM 1

1- Balises de division de texte :
On dispose en HTML d’un grand nombre de stratégie de division de texte dont les

plus importantes sont :
- <hr> : crée une nouvelle ligne horizontale (saut d’une ligne)

- <BR> : retourne à la ligne.
- <P> : crée un nouveau paragraphe (saut de 2 lignes)
- <PRE> : texte pré-formaté (dont le format a déjà été défini).
Attributs des balises
Comme dans des logiciels de traitement de texte, certains éléments permettent de

disposer le texte comme on le souhaite, il s’agit des attributs, ils sont situés dans les balises.
On peut citer (liste non exhaustive) :
- Size : qui permet de définir la taille des caractères ; exp : size = 15

- Width : qui permet de définir une largeur ; exp : width = 15, width = 15%
- Align : qui permet d’aligner un objet : exp : align = « left|center|right »
- Bgcolor : qui permet de définir la couleur d’arrière-plan ; exp : bgcolor= « black »
- Textcolor : qui permet de définir la couleur d’un texte. Exp : textcolor= « red ».
L’attribut est utilisée à l’intérieur de la balise.
Exemple : <BODY bgcolor= « blue » textcolor= « black » >
2- Balises de liste :
A balise permettant de lister des éléments est la balise <UL> ; celle-ci ne fait que
ouvrir la liste, le listing de chaque élément est précédé de la balise <LI> ; une fois la liste des
éléments terminée, la balise <UL> doit être refermée grâce à </UL> ; la balise <OL> quant à
elle permet d’établir une liste numérotée, tout comme les listes non numérotées, chaque
élément de la liste doit être précédée de <LI>.
3- Balises de mise en valeur du texte :

- <B> permet de mettre en gras
- <U> permet de souligner
- <Strong> permet de mettre un texte en gras
- <q> permet de marquer une longue citation
- <sub> permet de mettre en indice

- <sup> permet de mettre en exposant
- <blockquote> permet de créer une petite marge à gauche
4- Insertion d’un lien dans une page :
Le lien est l’élément en HTML qui permet de basculer d’une page à une autre. Il est le
plus souvent souligné et écrit en bleu. A l’approche de la souris sur un lien, ce dernier se
transforme et prend la forme d’un doigt. Il peut s’agir d’un texte ou d’une image. Plus
communément, la syntaxe d’insertion d’un lien est la suivante :
- <A HREF="URL"> texte à utiliser comme lien </A> ;s’il s’agit d’un site ou d’une
autre page web
- <A HREF="#Titre">lien sur le texte plus bas </A> ; s’il s’agit d’une partie dans le
même document.
- <A HREF="chemin de l’image"> nom de l’image </A> ; ou encore <A
HREF="référence de la page"> <img src= « chemin de l’image » > </A> s’il s’agit d’une
image.
5- Gestion des images
Tout comme lors de la saisie d’un texte, une page web peut être enrichie avec des
images, aussi, la syntaxe d’insertion d’une image dans une page HTML est la suivante :
<img src="nom du fichier" height="hauteur" width="largeur" >

Les attributs « height » et « width » sont cependant facultatifs, ils permettent tout
simplement de redimensionner l’image, celle-ci pouvant ne pas correspondre à nos attentes.
6- Les tableaux en HTML
Les tableaux sont éléments presqu’incontournable en HTML, surtout lorsqu’il s’agit

de classer des éléments dans des pages. La création d’un tableau se fait suivant la balise
<Table> , une fois ce dernier créé, il va falloir le mettre en forme et attribuer des valeurs à ses
cellules.
- <table> : Définit au navigateur la création d'un tableau

- <th> : Définit l'en-tête de chaque colonne
- <tr> : Définit une ligne
- <td> : Définit une cellule
Exemple :
<table border = 1>

<tr>
<th>entete col 1</th>
</tr>
<tr>
<th>entete ligne 2</th>
<td>contenu 1</td>
<td>contenu 2</td>
<td>contenu 3</td>
</tr>
</table>
7- Les boutons
Il existe 2 balises différentes pour présenter les boutons : la balise « button » et la

balise « input » ; la différence est que la première est double (il existe une balise fermante).
<input type="button" name=”addition” value=”additionner” onClick=”addition();” >
<button type="submit" name= “multiplication” onclick = “multiplication()” > Multiplier

</button >
Le boutton d’envoi quant à lui est caractérisé par le “submit” de l’attribut “type”.
8- Les formulaires
Les formulaires servent à envoyer au serveur des données préalablement saisies ou

entrées par l’utilisateur. Ils sont dotés de divers contrôles comme les champs de saisie, les
boutons, les listes… les formulaires sont introduites dans le HTML par la balise <form> et
refermées par </form>. S’il y a plusieurs formulaires dans un document HTML alors ils ne
doivent pas être imbriqués.

La balise « input » permet dans un formulaire de définir une zone de texte, un bouton
ou une case à cocher à travers son attribut « type », elle contient nombreux autres attributs à
savoir name (nom), value (valeur).
Exemple
<input name="identité" value="valeur par defaut" >
<input type="submit" value="envoi" > <BR>
<input type="checkbox" value="windows" > WINDOWS <BR>
<input type="radio" name="media" value ="DISK" checked> DISQUETTE <BR>
N.B: le type radio permet d’offrir la possibilité de ne faire qu’un seul choix
Le type checkbox offre la possibilité de cocher plusieurs réponses.
Le type submit permet de soumettre un formulaire (l’envoyer).
Une autre balise « sélect » permet de définir des choix (liste déroulante) ; elle est
définie comme suit :
<select name= "_" >
<option>element 1
<option>element 2
<option>element …
IV. Limites du HTML
Bien que permettant de créer des pages web qui permettront à l’utilisateur tant de
s’informer que de s’abonner au monde du web, le HTML n’est cependant pas le langage le
plus complet qui soit et il est d’ailleurs loin de l’être. Sa principale limite est que l’utilisateur
interagit très peut avec le site, le rendant donc statique. Il faut donc ajouter au langage des
éléments beaucoup plus importants comme le JavaScript ou encore changer de langage pour
obtenir un site beaucoup plus intéressant : le coté dynamique.

Langue

Programmation Des Pages Web Statiques

Transféré par

Informations du document

Description :

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Description :

Droits d'auteur :

Programmation Des Pages Web Statiques

Titre original :

Transféré par

Description :

Droits d'auteur :

PROGRAMMATION DES PAGES WEB STATIQUES

I. Choix et téléchargement d’un éditeur de texte et d’un navigateur

Le téléchargement s’effectue grace à un moteur de recherche ou à partir du site de

II. Structure de base et syntaxe d’un document HTML

La structure basique d’un document HTML est la suivante :

III. Le HTML dans son ensemble

NOTES DE COURS M. KEUDEM 1

On dispose en HTML d’un grand nombre de stratégie de division de texte dont les

- <hr> : crée une nouvelle ligne horizontale (saut d’une ligne)

Attributs des balises

Comme dans des logiciels de traitement de texte, certains éléments permettent de

- Size : qui permet de définir la taille des caractères ; exp : size = 15

L’attribut est utilisée à l’intérieur de la balise.

Exemple : <BODY bgcolor= « blue » textcolor= « black » >

3- Balises de mise en valeur du texte :

NOTES DE COURS M. KEUDEM 2

4- Insertion d’un lien dans une page :

5- Gestion des images

<img src="nom du fichier" height="hauteur" width="largeur" >

6- Les tableaux en HTML

Les tableaux sont éléments presqu’incontournable en HTML, surtout lorsqu’il s’agit

- <table> : Définit au navigateur la création d'un tableau

<table border = 1>

NOTES DE COURS M. KEUDEM 3

<th>entete col 1</th>

<th>entete col 2</th>

<th>entete col 3</th>

<th>entete col 4</th>

<th>entete ligne 2</th>

Il existe 2 balises différentes pour présenter les boutons : la balise « button » et la

<input type="button" name=”addition” value=”additionner” onClick=”addition();” >

<button type="submit" name= “multiplication” onclick = “multiplication()” > Multiplier

Les formulaires servent à envoyer au serveur des données préalablement saisies ou

NOTES DE COURS M. KEUDEM 4

<input name="identité" value="valeur par defaut" >

<input type="submit" value="envoi" > <BR>

<input type="checkbox" value="windows" > WINDOWS <BR>

<input type="radio" name="media" value ="DISK" checked> DISQUETTE <BR>

Le type checkbox offre la possibilité de cocher plusieurs réponses.

Le type submit permet de soumettre un formulaire (l’envoyer).

<select name= "_" >

IV. Limites du HTML

NOTES DE COURS M. KEUDEM 5

Centres d'intérêt liés

Vous aimerez peut-être aussi