1 Le langage HTML Hyper Text Markup Language Langage hypertexte à balises Eric Hitti...

1

Le langage HTML

Hyper Text Markup LanguageLangage hypertexte à balises

Eric [email protected]

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)

<< «

>> »© &copy

é é

è è

ê ê

à à

ï ï

ç ç

ñ ñ

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:[email protected] ?

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>&nbsp</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:[email protected]" 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


<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


< 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


<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:[email protected]?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("[email protected]","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

mail

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

1 Le langage HTML Hyper Text Markup Language Langage hypertexte à balises Eric Hitti...

Documents

Transcript of 1 Le langage HTML Hyper Text Markup Language Langage hypertexte à balises Eric Hitti...