Post on 14-Jul-2020
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 <!-- Commentaire -->
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:jellal@jellal.com"> 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 ...> <!-- définition d'un jeu de cadres --> <frame ...> <!-- définition d'un cadre --> …….<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
Éléments du formulaire
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
Éléments du formulaire
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" >