Université Hassan 1 Faculté Polydesciplinaire...

Développement web

Université Hassan 1er Faculté Polydesciplinaire

Khouribga

Mr. M. Elmehdi

2

L’objectif du module est de faire acquérir les connaissances et les compétences nécessaires pour la conception des pages web à l’aide du code HTML et des script clients.

3

Introduction HTML :

HyperText Markup Language Langage de balisage:

<balise attribut1=valeur1 attribut2=valeur2 ….>

Contenu à afficher sur le navigateur

</balise>

• Un document HTML doit avoir un suffixe .html ou .htm

• Le contenu de fichiers HTML est placé dans des éléments HTML

• Les éléments HTML s’appellent balises

• Tous les éléments HTML comprennent un repère (tag) d'ouverture et un repère de fermeture

4

Balises d’en-tête : <meta>

Définit des infos spécifiques au site web

<head>

<meta name= "author" content= " Nom de l’auteur " >

<meta name= "keywords" content= "html" >

<meta name= " description " content= " cours sur le développement de sites web " >

</head>

5

<body> </body>

Attributs :

Text : Définir une couleur pour le texte.

Bgcolor : Définir une couleur pour l’arrière plan

Background : Définir une image pour l’arrière plan

Exemple : Exemple :

<body text="#FFFFFF" bgcolor="blue" >

6

Formatage <b>...</b> : Texte en gras <i>...</i> : Texte en italic <u>...</u> : Texte souligné <strike>...</strike> : Texte barré <sup>...</sup> : Texte en exposant <sub>…</sub> : Texte en indice <big>…</big> : Texte plus grand que la police normale <small>…</small> : Texte plus petit que la police normale

7

Les titres HTML distingue 6 niveaux de titres pour former une hiérarchie dans les

documents. – <h1> Titre N°1 </h1> – <h2> Titre N°2 </h2> – <h3> Titre N°3 </h3> – <h4> Titre N°4 </h4> – <h5> Titre N°5 </h5> – <h6> Titre N°6 </h6>

<h[1-6]> (h = heading = Titre) introduit un titre. Le N° indique le niveau du titre. 1 est le niveau le plus élevé, 6 le niveau le plus bas. Après vient le texte du titre .

Par défaut, les titres sont alignés à gauche; HTML permet d’aligner les titres à l’aide de l’attribut align

– <h1 align="center"> Titre N°1 centré </h1> – <h1 align="right"> Titre N°1 à droite </h1>

8

Formatage

<br> : break = passage à la ligne <center> </center> : Centrer le contenu <hr> : Mettre les lignes de séparation

– L'attribut width= (width = largeur) : Permet de définir la largeur du trait en pourcentage (width= 50%)

– L'attribut size= (size = taille) : Permet de fixer la hauteur (épaisseur) d'une ligne de séparation.

– L'attribut align : Permet d’aligner la ligne de séparation.

– A gauche (align = left)

– A droite (align="right")

– Au centre (align="center")

9

Formatage

<font>...</font> : permet le formatage de l'écriture <font color=...> : Fixe la couleur de police (font color =

couleur de police). <font face=...> : Détermine la police (font face = genre de

police). <font size=...> : Détermine la taille de la police

Exemple : Exemple :

<font size="2" color= "green" face="Verdana"> …</font>

10

Paragraphe

<p>…</p> : Permet de définir des paragraphes

Exemple :Exemple :

<p align="center"> Ceci est un paragraphe centré. </p>

<p align="right"> Ceci est un paragraphe aligné à droite. </p>

11

LISTESListe de définition

<DL>

<DT> Navigateurs : </DT><DD> Internet Explorer </DD>

<DD> Netscape </DD>

<DT> Serveurs d’application : </DT>

<DD> ISS </DD>

<DD> Tomcat </DD>

<DD> WAMP </DD>

<DD> ZOPE </DD>

</DL>

12

LISTES

Liste numérotée

<OL Type="I" / 1 / A /a start= "valeur_initiale">

<LI> HTML </LI>

<LI> JAVASCRIPT </LI>

<LI> VBSCRIPT </LI>

<LI> ASP </LI>

<LI> JAVA </LI>

</OL>

13

LISTES

Liste non ordonnée (Avec des puces)

<UL Type=disc/square/circle>

<LI> HTML </LI>

<LI> JAVASCRIPT </LI>

<LI> VBSCRIPT </LI>

<LI> ASP </LI>

<LI> JAVA </LI>

</UL>

14

Balise spéciale : <Marquee>

La balise MARQUEE permet de faire défiler un texte.

L'attribut BEHAVIOR de la balise MARQUEE définit le type de glissement / défilement.

Exemple :

<MARQUEE BEHAVIOR="slide"> </MARQUEE>

Il peut prendre la valeur de : - slide : défile - alternate : défilement alternatif

15

Balise spéciale : <Marquee> L'attribut BGCOLOR de la balise MARQUEE définit la couleur de font

de la zone de défilement. <MARQUEE BGCOLOR="red"> </MARQUEE>

L'attribut DIRECTION de la balise MARQUEE définit le type de glissement.

<MARQUEE DIRECTION="left"> </MARQUEE>

Il peut prendre la valeur de : - right : défile vers la droite. - left : défile vers la gauche. - down : défile vers le bas. - up : défile vers le haut.

16

Balise spéciale : <Marquee> L'attribut HEIGHT de la balise MARQUEE définit la hauteur de la

zone de défilement. <MARQUEE HEIGHT="10"> </MARQUEE>

L'attribut WIDTH de la balise MARQUEE définit la longueur de la zone de défilement.

<MARQUEE WIDTH="20"> </MARQUEE>

L'attribut LOOP de la balise MARQUEE définit le nombre de répétions de l'animation.

<MARQUEE LOOP="10" > </MARQUEE>

Il peut prendre la valeur de : - 0,-1 : défilement infini- un nombre entier : spécifie le nombre de répétitions.

17

Atelier 1

En utilisant le bloc note, Concevoir votre CV en format HTML.

Appliquer des balises de mise en forme / listes pour améliorer votre CV.

18

IMAGES

<img src=" logo.gif "

width=largeur en pixel

height=hauteur en pixel

alt=texte de remplacement

border= épaisseur du cadre

align=middle / left / right

>

19

HYPERLIENS

Les liens sont une partie essentielle de tout projet

hypertexte, permettant de structurer les sites web et

faciliter la navigation entre les pages / Sites.

Il existe quatre types de liens :

Liens internes au site

Liens internes à la page

Liens vers email

Liens externes

20

HYPERLIENS

La tag a (a = anchor = ancre) : permet de définir le lien

Pour que cet élément devienne un lien toutefois, l'attribut href= est nécessaire

(href = hyper reference = référence hypertexte).

L’attribu href permet de définir la cible

<a href="index.html"> texte ou image </a>

<a href="http://www.menara.ma"> texte ou image </a>

<a href="mailto:[email protected]"> Contact </a>

21

HYPERLIENS

Liens internes à la page :

Définition de l’ancre:

<a name="ancre1"> paragraphe </a>

Définition du lien:

<a href="accueil.htm#ancre1"> texte </a>

22

TABLEAUX Vous pouvez définir des tableaux en HTML pour y présenter des

données ou bien pour rendre plus attractive la présentation des données à l'écran.

<table>

<tr>

<th> En-tête1 </th>

<th> En-tête2 </th>

</tr>

</tr>

<td> Donnée 1.1 </td>

<td> Donnée 1.2 </td>

</tr>

…..

</table>

23

TABLEAUX Le graphique suivant montre l'action des éléments HTML qui créent un

tableau :

24

TABLEAUX

Légende :<table><caption> Quelques statistiques </caption>…… </table>

align=left/right/center Bgcolor Background border bordercolor

25

TABLEAUX

Largeur du tableau :

<table width =100%>

…..

</table >

Hauteur du tableau :

<table height =100%>

…..

</table >

26

TABLEAUX

Marge intérieure des cellules :<table cellpadding=6>…..</table >

Espacement de cellules:<table cellspacing=8>…..</table >

27

TABLEAUX L'attribut colspan= [nombre de colonnes ] vous obtenez qu'une cellule

s'étende sur plusieurs colonnes (colspan = column span = tendre des colonnes).

Exemple :

<table border="1" bordercolor= "red "> <tr><th colspan="2"> L'humanité est composée de </th> </tr><tr> <td> Hommes </td> <td> Femmes </td> </tr> </table>

28

TABLEAUX L'attribut rowspan= [nombre de rangées] vous obtenez qu'une cellule

dans une colonne s'étende sur plusieurs rangées (rowspan = tendre des rangées).

Exemple :

<table border="1" bordercolor=green> <tr>

<td rowspan="2">L'humanité est composée de </td> <td>Hommes</td>

</tr> <tr> <td>Femmes</td> </tr></table>

29

CADRES A l'aide de cadres il est possible de diviser l'affichage du navigateur en

différentes parties définissables librement . Chaque partie peut avoir son propre contenu. Les différentes parties d'affichage sont appelées cadres (frames) et peuvent avoir un contenu.

30

CADRES

La définition des cadres se fait de la manière suivante :

<html> <head> </head> <frameset ...>  <frame ...>  …….<noframes> Est affiché quand le navigateur ne peut pas afficher de cadres</noframes> </frameset> </html>

31

Attributs de la balise <FRAMESET>

Attribut Valeur Action

Rows

pourcentage (entre 1 et 100) valeur en pixelsEn fixant une seules des valeurs et en donnant à l'autre la valeur *, la valeur s'ajuste automatiquement

Cadre horizontal

Cols

pourcentage (entre 1 et 100)valeur en pixelsEn fixant une seules des valeurs et en donnant à l'autre la valeur *, la valeur s'ajuste automatiquement

Cadre vertical

FrameborderYESNO

Indique si le cadre aune bordure ou non

Border=nn est une valeur définissant la taille de la

bordure

Indique la taille de la

bordure

BordercolorNom de la couleurValeur de la couleur en hexadécimal

Indique la couleur de la

bordure

Framespacing=n

n est une valeur définissant l'espace entre lescadres

Indique l'espace entre

les cadres

32

Attributs de la balise <FRAME>

Attribut Valeur Action

Src URLDéfinit l'emplacement de la page à afficher dans le cadre

Name "nom"Définit un nom qui permettra d'afficher un autre document dans le cadre gâce à l'attribut Target

Marginwidth=n

n est un entier spécifiant le nombre de pixels

Taille des marges latérales

Marginheight=n

n est un entier spécifiant le nombre de pixels

Taille des marges du haut et du bas

FrameborderYESNO

Détermine si les cadres auront ou non une bordure

Border=nn est un entier spécifiant le nombre de pixels

Taille de l'espace entre les cadres (uniquement pour Netscape)

Noresize (Aucune)Interdit à l'utilisateur de redimensionner les cadres

ScrollingYESNOAUTO

Permet ou non l'affichage d'une barre de défilement

33

Désigner un cadre avec un lien hypertexte

Pour faire afficher des liens dans un des cadres, il suffit d'utiliser l'attribut target dans la balise <A HREF ..> pour spécifier le nom du cadre qui a été spécifié dans la balise <FRAME> par l'attribut NAME.

Par exemple:

<A HREF="page.htm" TARGET="gauche">

ValeurValeur ActionAction

_self Affiche la cible dans le même cadre que le lien

_parentAffiche la cible dans le cadre de niveau supérieur

_blank Affiche la cible dans une nouvelle fenêtre

_topAffiche la cible dans la fenêtre entière du navigateur

34

Exemples

<FRAMESET COLS="20%,80%"><FRAME SRC="frame1.htm" NAME="gauche"><FRAME SRC="frame2.htm" NAME="droite"></FRAMESET>

<FRAMESET ROWS="20%, 80%"><FRAME SRC="frame1.htm" NAME="haut"><FRAME SRC="frame2.htm" NAME="bas"></FRAMESET>

35

FORMULAIRES

Déclaration d’un formulaire :

<form name="formulaire1" method=get/post

action="ajout.asp">

Éléments du formulaire

</form>

name = un nom : définir un nom pour le formulaire.

action = un fichier HTML : sera appelé à l'envoi du formulaire

pour traiter les données du formulaire.

method = get / post : Il vous sert à déterminer d'après quelle

méthode de transmission HTTP les données du formulaire.

36

FORMULAIRES

Get : Les données du formulaire sont jointes comme

paramètres à l'adresse appelée.

Post : Les données du formulaire rempli sont mises à la disposition par le serveur Web

37


Champ de saisie:<input type="text" name="nom" value=" " size=20 maxlength=32>

Champ de mot de passe :

<input type="password" name="Mot de passe">

Champ d’action :<input type="submit" name="valider" value="Envoyer"><input type="Reset" name="Annuler" value="Annuler">

38

Éléments du formulaireZones de texte multiligne :<textarea name="textarea" cols="40" rows="4"> … </textarea>

Cases à cocher :<input type="checkbox" name="A" value="Ok">

Boutons radio :<input type="radio" name="A" value="OK" >

Liste de sélection simple :<select name="s1" >

<option value="1"> 1 </option> <option value="2"> 2 </option>

</select>

39


Liste de sélection multiple :

<select name="s1" size ="2" multiple>

<option value="1"> 1 </option>

<option value="2"> 2 </option>

</select>

Champ masqué :

<input type="hidden" name="h1" value ="Hello" >

Université Hassan 1 Faculté Polydesciplinaire...

Documents

Transcript of Université Hassan 1 Faculté Polydesciplinaire...