Post on 03-Apr-2015
1
Le langage HTML
Hyper Text Markup LanguageLangage hypertexte à balises
Eric HittiEric.Hitti@univ-rennes1.fr
2
L'origine de la page WEB 3Balises de documents 8Balises de mise en page 11Balises de mise en forme 13Balise de listes 15Caractères spéciaux 16Les images 17Les liens 21Les tableaux 23Les cadres (frames) 28Les formulaires 36Exemple de php 44Exemples de javascript 47Les styles 51
Tables des matières
3L'origine de la page WEBTransmettre des informations à l'autre bout du mondeLe code ASCII=255 caractères
L'éditeur de texte(Bloc-notes)
Le traitement de texte(Word)
Le fichierinformatique
01000101 01110010 01101001 01100011
E r i c
E r i c Instructions de mise en forme balises
4L'origine de la page WEB : éditeur simple
- Je veux : Eric
- Je visualise le résultat à l'aide d'un navigateur (Netscape) qui interprète le code
- Je créé un fichier .HTML Et j'utilise des balises de mise en forme
<i> Eric </i>
5L'origine de la page WEB : éditeur évolué
- Je veux : Eric en gras
- L'éditeur modifie le code en insérant les balises au bon endroit
- Je sélectionne le texte avec ma souris
- J'utilise le bouton adéquat
Eric
-Et en même temps donne un aperçu du résultat
Fichier.html
<b> Eric </b>
6L'origine de la page WEB : un fichier complet
La page source en .htm ou .htmlElle est créé à l'aide d'un simple éditeur de texteHTML n'est pas un langage de programmation !Ce n'est qu'un langage de description de documents.
Le navigateur (Netscape) permet de visualiser la page web en interprétant le code
7Règles simples•HTML est un langage à balises
•Les balises permettent de réaliser des actions sur un groupe de mots<début balise> texte affecté par la balise </fin de la balise>Ex : <b> HTML </b> met HTML en gras
•Les balises en minuscules
•Les balises peuvent recevoir des attributs (options) en Ex :<body bgcolor=red> le font d'écran sera en rouge
balise option
8Balises de documents
<html> … </html> début et fin de document<head> … </head> l’entête du document<! ………………> commentaires
Dans la section head<title> … </title> barre de titre et sauvegarde de signet <meta> les moteurs de recherche utilisent ces
informations pour l'indexationExemples :<meta http-equiv="author" content="Eric Hitti"><meta http-equiv="Description" content="Ce documentblabla"><meta http-equiv="Keywords" content="Hitti;recherche;…"><meta http-equiv="Copyright" content="Super labo">
9Balises de documents
<body> … </body> le corps du document
Options :background="image" image de fond d’écranbgcolor="couleur" couleur du fond d’écrantext="couleur" couleur du textelink ="couleur" couleur des liens non consultésalink ="couleur" couleur des liens actifs
couleur=(aqua, black, fuschia, gray, green, lime, marroon, navy, olive, purple, red, silver, teal, white, yellow) Les autres couleurs sont définie en hexa (#FF0000 =rouge)
10Exemple<html> <head> <title> Mon super site </title> </head> <body bgcolor="yellow" text="blue"> <! A partir de là ma page commence> bla bla bla et que je te raconte ma vie </body></html>
11Balises de mise en page
<p options > </p> saut de paragraphealign="Justify/left/right"
<br> passage à la ligne<center> …</center> centrage
<hr options> Insertion d’une ligne de séparationOptions :size="+n" épaisseur du traitnoshade sans ombrewidth="n%" largeur de la lignealign="left | rigth"centré par défaut
12Balises de mise en page
<body> <center>Un paragraphe </center> <p> Premiere ligne <br> Deuxieme ligne</p> <hr size="3" width="50%" align="left"></body>
Exemple
13Balises de mise en forme
<hn> … </hn> titre de niveau n (1 à 6)<b> … </b> afficher en gras<i> … </i> afficher en italique<u> … </u> afficher en souligné<s> … </s> barrer le texte<big> … </big> Le texte est agrandi d’une unité de taille<small> … </small> Le texte est diminué d’une unité de taille<blink> … </blink> afficher en clignotant<sup> … </sup> exposants<sub> … </sub> indices
14Balises de mise en forme
<body> <h1> C’est un titre de niveau 1 </h1> <h2> C’est un titre de niveau 2 </h2> <b> c’est gras </b> <br> <u> <i> en italique souligne </i> </u><br> 1<sup>er</sup></body>
Exemple
15Balises de listes
Les listes ordonnées<ol start="2">
<li type="A"> coucou </li><li type="i">recoucou</li>
</ol>
Les liste non ordonnées<ul type="square"ou"disc"ou"circle">
<li>coucou</li><li>recoucou </li>
</ul>
16Caractères spéciaux
< <
> >
& &
&nspb; (un blanc)
<< «
>> »© ©
é é
è è
ê ê
à à
ï ï
ç ç
ñ ñ
17Les images
• Images de types GIF ou JPEG (PNG)
• Conseils- Pas d’images de tailles trop importantes- Des petites images cliquables pour voir les grandes- Récupérer les icônes et images sur d’autres sites- Spécifier les valeurs de width et de heigth des images (en pixels) afin d'accélérer l'affichage.
• Sites d’icôneshttp://www.gifworld.com/http://www.iconbazaar.com/
18Les images
Pour insérer une image <img src=" Nom du fichier " >
Optionsalign=" attibut " (middle, top, bottom) position verticale
(left, right) permettent au texte de s’enrouler autour de l’image
alt=" titre " apparaît si la souris s’arrête sur l’imageborder="n" cadre noir autour de l’image d’épaisseur nwidth="y" largeur du tableau (en pixel)height="y" hauteur du tableau (en pixel)
Exemple<img src="mafoto.jpg" align="middle" border="2" alt="Ma photo">
19Les images réactives
•Permettent de lier des documents en fonction de la zone cliquée (une carte de France où chaque région est reliée à un document)• 2 éléments indispensables:
un fichier image définir les zones réactives, de 3 types :
- cercle : coordonnées du centre + rayon : Xc,Yc,R coordonnées du centre et d'un point du
cercle - rectangle : points supérieur gauche et inférieur droit
: X1,Y1,X2,Y2- polygone : coordonnées de chaque sommets
Les coordonnées sont définies en pixelspour définir les zones on utilise Mapedit
(http://www.boutell.com/mapedit) ou Dreamweaver
20Les images réactives : exemple
Définition des zones cliquables<map name="NomPartition">
<area shape="rect"href="lelien"alt="textepourlasouris"coords="les coordonnées">
<area … ></map>
Image associée à la partition<img src="nomdufichierimage"
usemap="#NomPartition" >Exemplehttp://www.univ-rouen.fr/pharmacie/facultes/france2.html
Options:Circlepoly
21Les liens
• vers un document distant :<a href="url du document cible"> zone cliquable </a> option: target="_blank" ou "nomduframe"
• vers un document local :<a href="nom du fichier"> zone cliquable </a>
• vers une partie précise du document :<a href="#NomAncre"> zone cliquable </a><a href="url#NomAncre"> zone cliquable </a><a href="fichier#NomAncre"> zone cliquable </a>
Le point à atteindre doit être marqué par :<a href="NomAncre"> texte </a>
Image ou texte
22Les liens : autres
• vers un courier électronique :<a href="mailto:email"> zone cliquable </a>exemple<a href="mailto:Eric.Hitti@univ-rennes1.fr ?
Subject=Cours&Body=Coucou"> pour m'ecrire </a>
• vers un serveur ftp :<a href="ftp://nomduserveur"> zone cliquable </a>
• vers un serveur telnet :<a href="telnet://nomduserveur"> zone cliquable </a>
Image ou texte
23Les tableaux
Ils permettent d’organiser le texte et les images avec ou sans visualisation des cadres
<table (liste des options)> … <\table>
border="n" contour d’épaisseur n (0 pas de contour)cellpading="x" espace entre le texte et le contour de cellulescellspacing="x" épaisseur du trait entre les celluleswidth="y" largeur du tableau (en pixel ou en %)height="y" hauteur du tableau (en pixel ou en %)bgcolor="red" couleur de fond du tableaualign="left" left, center ou right
24Tableau : les éléments
Titre d’un tableau : caption
<caption options> le titre du tableau </caption> align="bottom" (ou "top") position du titre
Les lignes : tr
<tr options> … </tr>align= "center" (right, left) alignement horizontalvalign="top" (middle, bottom) alignement vertical
25Tableau : les éléments
Les éléments de la lignes : td
<td options> … </td>colspan="n" la cellule s’étend sur n colonnes rowspan="n" la cellule s’étend sur n lignes<td></td> donne une cellule vide sans bordure<td> </td> donne une cellule vide avec bordure
Cellule titre : th
<th options> … </th>Équivalent à td mais le texte est automatiquement centré et gras
26Tableau : exemple
27Tableau : exemple
Pour construire un tableau on raisonne par ligne.
On commence par construire un tableau avec le maximum de lignes et de colonnes nécessaires, ici 4 lig 5 col
Puis ligne par ligne on définit les fusions s'il y en a, et on ne redéfinit pas une cellule qui a déjà été fusionné à la ligne précédente
3c en lig 2c col
rien
2c col
rien1c 1c 1c
1c 1c 1c 1c 1c
1c 1c 1c 1c 1c
28
<table border="0" bgcolor="yellow"> <caption align="top"> Comparatif modèle économique </caption> <tr> <th colspan=3> Modèle </th> <th rowspan=2> Vitesse <br> en km/heure </th> <th rowspan=2> Consommation <br> en litre/100 km </th> </tr> <tr> <th> Marque </th> <th> Type </th> <th> Numéro de serie </th> </tr> <rt> <td> Peugeot 106 </dt> <td>b2 </td> <td align=middle> 234.34 </td><td> 132 </td> <td> 5,7 </td> </tr> <tr> <td> Citroën AX</td> <td> AT67B8</td> <td align=middle> 6789 </td><td> 126 </td> <td> 5,5 </td> </tr></table>
Tableau : exemple
29Les cadres ou Frames
• permettent de diviser une page HTML en plusieurs zones (ou cadres), chacune pouvant afficher, indépendamment des autres, une pages HTML
• Intérêt afficher en permanence certaine informations :
- boutons de navigations,- table des matières,- logos,- …
30Les frames : syntaxe
• un fichier définit la partition de l’écran
• il n’y a plus de balise « body »
• la balise FRAMESET partitionne une fenêtre
• la balise FRAME définie le contenue d’une fenêtre
31Les frames : syntaxe
FRAMESET 1 FRAMESET 2
FRAME 1
FRAME 2
FRAME 3
32Les frames : structure
<html> <head> …</head>
<frameset attributs> <frame attributs> … … </frameset> <noframe> … </noframe>
</html>
d’autres frames ou d’autres
frameset
pour les navigateurs ne gérant pas les frames
33Les frames : attributs de FRAMESET
rows = "n, n%, …,*"divise la zones en cellules horizontalesn hauteur en nombre de pixelsn% hauteur en % de l’écran* hauteur restante
cols = "n, n%, …,*"divise la zones en cellules verticales
border="n"taille de la bordure en pixels
frameborder =" yes" | "no"détermine si la frontière entre deux cadres doit être visible ou non (yes par défaut)
bordercolor = "couleur" détermine la couleur des frontières
34Les frames : attributs de FRAME
name="nom" le nom du cadre
src = "url" le document à afficher
marginwidth="n" taille de la marge (pixels)
marginheight = "n" nombre pixels entre la frontière haute/basse et le document
scrolling ="yes/no/auto" barre de déroulement
noresize empêche de modifier la taille à l’aide de la souris
35Les frames : exemple
<html> <head> …</head> <frameset cols ="25%,*"> <frame scrolling="YES" name="cadre1"
src= " documents1.html"> <frameset rows ="50%,50%">
<frame scrolling="YES" name="cadre2" src="documents2.html">
<frame scrolling="NO" name="cadre3" src="documents3.html">
</frameset> </frameset> <noframe>
Dommage votre <I> Browser </I> ne permet pas les frames</noframe> </html>
36Les frames : exemple
cadre1
cadre2
cadre3
37Les formulaires
Entre les balises <form> </form> on trouveles balises définissant les éléments du formulairedu texte précisant le rôle des éléments
Attributsmethod = GET ou POST
Définit la méthode de transfert des donnéesaction quel script doit être appelé pour traiter le formulaire
action ="mailto:Eric.Hitti@univ-rennes1.fr" action="confirmation.php3"
name="nom_du_formulaire"enctype="MULTIPART/FORM-DATA" (pour le php)
="text/plain" (pour le mail)target si nécessaire il précise l'endroit ou doit être renvoyé les
informations
38Les formulaires : les éléments
<input> définit un élément du formulaire
<input type="TEXT">Attribut name="Nom_Champ" nom de la variableAttribut size="nb", taille en nb de caractèresAttribut value="Valeur" valeur par défaut
<unput type="PASSWORD">Permet la saisie avec affichage * à la place de chaque caractèreAttribut name="Nom_Champ" nom de la variable
<input type="BUTTON">Attribut name="Nom_Champ" nom de la variableAttribut value="Texte" texte affiché sur le bouton
39Les formulaires : les éléments
<input type="SUBMIT"> provoque le transfert des données du formulaire vers le serveurAttribut name="Nom_Champ" nom de la variable
< input type ="RESET"> Réinitialise le formulaireAttribut name ="Nom_Champ" nom de la variableAttribut value="Texte" texte affiché sur le bouton
< input type ="RADIO">Attribut name ="Nom_Champ" nom de la variableAttribut value ="valeur" valeur fourni au serveurAttribut checked, il permet de sélectionner un bouton par défaut dans un ensemble de boutons portants le même nom (NAME), un seul bouton peut avoir cette valeur
40Les formulaires : les éléments
< input type ="CHEKBOX"> ensemble de cases à cocher Attributs :
name="Nom_Ensemble" nom de la variablevalue="valeur" valeur associé à la casechecked, état initial de la case,plusieurs cases peuvent être cochées
<textarea> … </textarea> permet de créer une zone de saisie de texte de plusieurs lignesAttributs :
name="Nom_Zone" nom de la variablerows="nl" nombre de lignes cols="nc" nombre de colonnes
41Les formulaires : les éléments
<select> … </select>Liste à options, menus déroulant ou ascenseur, choix définit par <option>Attribut name="Nom_Liste"Attribut size="nb" nb d'éléments visibles simultanéments
si nb>1 ascenseur, si nb=1 menu déroulantAttribut multiple autorise la sélection de plusieurs items
<option>Attribut value="valeur" valeur transmise au serveur Attribut selected valeur d'option qui apparaît en premier
Exemple <SELECT name="Liste1" size="1"><OPTION value="1" >Bleu<OPTION value="2" selected>Blanc<OPTION value="3" >Rouge
</SELECT>
42Les formulaires : exemple<form method="post" action="mailto:Eric.Hitti@univ-rennes1.fr?subject=reservation"
enctype="text/plain" >Nom :<input type="text" name="NOM" size="20"><br>Mot de passe <input type="password" name="PASS"><br><br>Enseignant <input type="radio" name="STATUT" value="prof">Etudiant <input type="radio" name=" STATUT " value="etudiant" checked> <br><br>Choisir le mois du stage<br><select name="MOIS" size="2"> <option value="septembre">septembre</option> <option value="octobre">octobre</option> <option value="novembre">novembre</option> <option value="decembre">decembre</option></select><br>Taper vos commentaires <br><textarea name="COMMENTAIRES" rows="10" cols="50"> </textarea><br><input type="submit" value="Envoyer" name="submit"><input type="reset" name="reset" value="Effacer">
</form>
43Les formulaires : exemple
44Les formulaires : résultat
45Un exemple de php : confirmation.php3
Je veux que l'envoie du formulaire provoque les actions suivantes :
Vérifier que le mot de passe est bonVérifier que tous les Nom et Mois ont été rempli
Donner les erreurs correspondantesConfirmer le bon déroulement de l'inscription
Ajouter l'inscription dans un fichier texte
Envoyer un mail spécifiant l'inscription
On modifie le formulaire précédent <form method="POST" action="confirmation.php3" enctype=" MULTIPART/FORM-DATA " >
46Un exemple de php : confirmation.php3<html><body><center><h1>Prise en compte d'une inscription</h1></center><? echo"<h2>$NOM</h2>"; $erreur="0"; if (empty($NOM) or empty(PASS) or empty(MOIS))
{echo"Tous les champs n'ont pas été rempli <P>";$erreur="1";} if ($PASS<>"toto"){echo"Le mot de passe n'est pas bon <P>";$erreur="1";} if ( $erreur=="0") {
mail("Eric.Hitti@univ-rennes1.fr","Inscription_cours_html","$NOM $STATUT, $MOIS, $COMMENTAIRES");$F=fopen("inscrits.txt","a");$LIGNE= "$NOM $STATUT, $MOIS, $COMMENTAIRES" ;fputs($F,"$LIGNE\n");fclose($F);echo"Votre etes inscript pour le mois de $MOIS";
}?></body></html>
47Les formulaires : avec php
48Un exemple de javascript
Dans ma bibliographie je veux que lorsque l'on cherche à télécharger un de mes articles, une fenêtre s'ouvre rappelant qu'il y a un copyright sur ce document et ne lançant le téléchargement que si l'utilisateur a appuyé sur un bouton de confirmation
49Un exemple de javascript :copyright.html
<HTML><HEAD> <SCRIPT Language="Javascript"> function Autorisation (nomfichier) { var resultat=window.confirm('Il y a un copyright sur ce document blablabla'); if (resultat==true) { open(nomfichier); } } </SCRIPT></HEAD><BODY> <A HREF="JavaScript:Autorisation('toto.txt')"> CLIQUER pour avoir l'article </A></BODY></HTML>
50Un exemple de javascript : résultat
51
<BODY onload="OuvrirEvt(evenement.htm','doc','location=no,toolbar=no,status=no,directories=no,scrollbars=yes,width=440,height=350,bgcolor=#FF2D00')">
Un autre exemple de javascript
52
Avec les feuilles de style c'est le créateur du document qui impose sa conception de la mise en page et non plus le visiteur ou le navigateur que ce dernier utilise.
<head> <title> Bloc style incorporé </title>
<link ref="STYLESHEET" type="text/css" href="style.css"> <style type="text/css">
H1 {font-size:20pt; font-family:arial; color:red} H2 {font-size:15pt; text-align:right; color:maginta}
</style></head><body><p style="margin-left: 2 cm">
Les feuilles de style
53
Titre de la page
Ma page persoUniversité rennes1
adresse
Enseignement
Recherchea
b
Biblio1
2
TitreMots clésDescription
En-tête 1
En-tête 2
Lien site univ
Lien courrier
Tableau invisibleCentré, réduit
Liste à puces abc
Liste à puces 123
Fond d'écran
Exemple de page à réaliser
TableauCellule de taille et couleurs
Une photo