cours developpement web, Slides of Internet and Information Access

Download cours developpement web and more Slides Internet and Information Access in PDF only on Docsity!

PROGRAMMATION

WEB

2 IG

Olfa Jabri

Institut Supérieur de

Gestion de Gabés

Qu'est-ce que le HTML?

HTML , HyperText Markup Language , qu'on peut traduire par 'langage à balises hypertextes', est

un langage qui, interprété par les navigateurs, décrit le contenu et la mise en forme d'une page

sur le Web.

Outre la mise en forme de texte, le langage HTML permet l'insertion d'images, de sons,

d'animations et de scripts de différents langages (JavaScript, ASP, PHP).

Comment utiliser les balises HTML?

Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le

caractère supérieur (>). par exemple « ».

A chaque ouverture de balise, on doit avoir une balise de fermeture à l’exception de

quelque uns telles que ,,…

Exemple :

HTML : Mise en forme du texte

• (^) Paragraphes et Alignements
• (^) Titres
• (^) Mises en forme simple
• (^) Utilisation des polices
• (^) Les listes

Les paragraphes

 Les balises

et

permettent de définir un paragraphe.

On peut définir l'alignement du paragraphe en utilisant l'attribut ALIGN="alignement" où

alignement peut prendre les valeurs LEFT, CENTER et RIGHT ,JUSTIFY.

 Les balises et permettent de définir un paragraphe préformaté : le texte

apparait dans le document comme dans le texte source.

Les Mises en formes simples

Utilisation des polices

On peut modifier la police d'un paragraphe, d'une phrase, d'un mot, d'une lettre en utilisant

la balise votre texte dans le .

Les listes

Liste ordonnée: délimitée par la balise , pour préciser les éléments de la liste on utilise la

balise

Les listes Imbriquées

Pour imbriquer des listes, il suffit de commencer une liste, puis d’en ouvrir une seconde à

l’intérieur d’un élément de la première (on peut évidemment imbriquer plus de deux listes en

répétant le même processus).

Exemple :

Lien vers une autre page ancre: permettent d’atteindre un endroit précis dans la page

 On marque d'abord la cible avec une ancre en utilisant le tag : et l'attribut name.

Texte qui sera ciblé .

 On réalise le lien vers cette cible : Pour cela, on marque un texte ou une image avec

le tag et l'attribut href :

Texte de l'hyper lien vers une ancre

Lien vers une adresse mail: C'est atteindre un internaute en lui envoyant un message.

On utilise le tag avec l'attribut href.

Contacter TOTO

Les images

On peut inclure une image dans le corps du document en utilisant la balise IMG.

Cette balise admet un certain nombre d'attributs :

 ALT : permet de spécifier un petit texte associé à l'image

Exemple :

BORDER : permet d'encadrer l'image

WIDTH et HEIGHT : permet de spécifier les dimensions de l'image en pixels

 ALIGN: permet de spécifier l’allignement de l’image par rapport au texte

Les tableaux

 …: définit un tableau.

 …: spécifie une ligne.

 … : spécifie une cellule.

 … : spécifie une cellule d’entête.

 …:donner un titre au tableau.

Les attributs de la balise sont:

 BORDER : Permet de fixer la taille des bordures en pixels.

 WIDTH : Permet de fixer la largeur du tableau en pixels ou en pourcentage.

 ALIGN : Permet de définir l'alignement du tableau dans la largeur de l'espace disponible. Les valeurs

possibles sont LEFT, CENTER et RIGHT.

 CELLSPACING: Permet de définir l'espace de séparation des cellules.

 CELLPADDING :Permet de définir l'espace séparant le bord des cellules de leur contenu.

Les attributs de la balise sont:

WIDTH : permet de définir la largeur de la cellule en pixels ou en pourcentage de la largeur

du tableau.

 BGCOLOR : permet de définir la couleur de fond de la cellule.

 VALIGN : permet de définir l'alignement vertical dans la cellule. Les valeurs possibles sont

TOP, MIDDLE et BOTTOM.

 COLSPAN: permet de définir le nombre de colonnes fusionner.

ROWSPAN: permet de définir le nombre de lignes a fusionner.

Exemple 1: Ecrire le code HTML permettant la définition du tableau suivant:

Les formulaires

 Création d'un formulaire

Un formulaire est toujours défini entre les balises et .

La balise est accompagnée des attributs :

NAME : pour donner un nom au formulaire

ACTION : URL qui indique le traitement à effectuer avec le contenu; on peut donner l'adresse d'un

script CGI, le nom d'une commande JavaScript ou une adresse d'E-Mail.

METHOD : pour indiquer la méthode de traitement qui sera GET ou POST;

« POST » est la valeur qui correspond à un envoi de données stockées dans le corps de la requête,

tandis que « GET » correspond à un envoi des données codées dans l'URL, et séparées de l'adresse

du script par un point d'interrogation.

__

__

Les éléments de formulaires

Ligne de saisie :Elle correspond au type TEXT. Elle peut être accompagnée des attributs

SIZE pour définir la taille de la ligne en caractères et MAXLENGTH pour définir le nombre

maximal de caractères à saisir.

Textarea : Zone de saisie de texte qui peut avoir plusieurs lignes. Cette balise possède les

attributs suivants :

cols: représente le nombre de caractères que peut contenir une ligne

rows: représente le nombre de lignes