Le Langage HTML+Formulaires

LE LANGAGE HTML
M. BOUKERS
Dfinition
HTML : Hyper Text Markup Language. Langage de description. Permet de coder une page web l aide de commandes de mises en forme appeles balises . Permet de dfinir la forme du texte (gras, italique, polices, ...). Permet d inclure des images, du son, implanter des liens vers d'autres pages... interprt par le navigateur. Le code html qui gnre une page web est visible ct client L extension d une page html : .html ou .htm .
M. BOUKERS
Balises
attribuent une fonction spcifique au segment encadr. pratiquement toutes les balises vont par paire (balises d'ouverture et de fermeture, exemple : <b> et </b>).
M. BOUKERS
Attributs
Une balise peut avoir un ou plusieurs attributs. prcisent la fonction ou le mode d'application des balises. sont spars par un espace. sont mentionns uniquement dans la balise d'ouverture. leur ordre n'a pas d'importance. peuvent avoir une valeur (nom, unit de mesure ...) inscrite entre guillemets.
M. BOUKERS 4
Syntaxe
<balise> Objet </ balise>
<Nom de la balise de dbut Attribut1 = "valeur1" Attribut2 = "valeur2" ... Attribut n = "valeur n"> texte mis en forme </Nom de la balise de fin>
M. BOUKERS
Le document HTML minimal

<HTML> <HEAD> Entte : Informations gnrales sur le document </HEAD> <BODY> Corps : Texte du document + commandes de formatage </BODY> </HTML>
Remarque
Les balises ne sont pas sensibles la casse <BODY> = <BodY> = <body>
M. BOUKERS Exemple1.html
Les balises courantes de l HTML

<a> : Lien hypertexte. <b> : Texte en gras. <i> : Texte en italique. <u> : Texte soulign. <h1> <h6> : Titre de niveau 1 6. <br>: <br>: Saut de ligne. <p>: <p>: Dbut d un paragraphe (saut de deux lignes).
M. BOUKERS
Les balises courantes de l HTML

<center> : Centrer <table> <tr> <td> : Structure d un tableau : Ligne d un tableau : Cellule d un tableau
<font > et ses attributs <img> et ses attributs
Remarques - <! Commentaire --> --> Les caractres accentus et spciaux sont cods
M. BOUKERS
Exemple
<HTML> <HEAD>
<u>Entte</u> <u>Entte</u> : Informations gnrales sur le document <br><br>

</HEAD> <BODY> <b><u><i>Corps</i></u> <b><u><i>Corps</i></u> : Texte du document + commandes de formatage</b> formatage</b> </BODY> </HTML>
Exemple2.html M. BOUKERS
Exemple
<HTML> <HEAD> <TITLE> Exemple3 de pages html </TITLE> </HEAD> <BODY> <B> Premire partie :</B><BR> Ce document prsente les fondamentaux d'une cration de page html <BR><BR><U> le document de base </U>  paragraphe--> <P><H1> Titre de niveau1 </H1> <H2> Titre de niveau2 </H2> <H3> Titre de niveau3 </H3> <H4> Titre de niveau4 </H4> <H5> Titre de niveau5 </H5> <H6> Titre de niveau6 </H6></P> Exemple de caractères spéciaux </BODY> </HTML>
M. BOUKERS
Exemple3.html
10
<FONT> et ses attributs

<font> : Mise en forme du texte Face : Attribut une police au texte Size : Taille du texte Color : Couleur du texte (soit avec le nom de la couleur soit avec la valeur hexadcimale correspondante).
<FONT> et ses attributs

Exemple
<HTML> <HEAD> <u>< <u><font color="#FF0000" face="Courier New, Courier, mono" size=" size="4"> Entte : Informations gnrales sur le document </font><br></u><p> </HEAD> <BODY> <b> <font color="red" face="verdana" size=" 2"> 2"> Corps : Texte du document + commandes de formatage </font> </b> </BODY> </HTML>
M. BOUKERS
Font.html
12
<IMG> et ses attributs

<img> : insertion d images SRC : indique l emplacement du fichier image. ALIGN (top, middle,bottom) : l alignement de l image. ALT : propose un texte de remplacement. BORDER : donne une bordure l image. Etc .. Exemple <img src= "fleure.Gif" align="middle" alt="image introuvable" border="1">
Remarque La balise <IMG> ne possde pas de balise de fermeture. Dans certains cas, aprs une modification avec sauvegarde, et afin d avoir une actualisation, le redmarrage du WampServer est trs demand.
M. BOUKERS
13
Exemple <HTML> <HEAD> <u>

<font color="#FF0000" face="Courier New, Courier, mono" size="3">
Insertion d'une image Gif </font><br> </u> <br><br> </HEAD> <BODY> <img src= "Fleure.Gif" align="middle" alt= "L'image fleure.Gif est introuvable" border="2"> </BODY> </HTML>
Insert_Image.html
Crer un lien ...
Les liens permettent de faire la liaison entre les pages web. Pour changer de page, il faut cliquer sur un lien, le navigateur chargera alors la nouvelle page.
Syntaxe d un lien
<A HREF = "nom du fichier ou url du document">lien</A> document">lien</A>
Crer un lien ...

Il y a 3 types de liens : - Les liens internes un site (=> utilisation trs frquente des chemins relatifs car plus court taper). - Les liens internes une page (ou ancre) (=> utilisation de chemins absolus ou relatifs). - Les liens externes (=> uniquement des chemins absolus !)
Les types de liens

Liens internes mme page: Dfinir la cible d un lien(l ancre): <a name= " nom de la cible"></a> Associer un lien une ancre <a href="#nom de la cible">cliquez ici</a> Liens internes pages diffrentes: Lien vers une page situe dans le mme rpertoire <a href="nom.htm">Cliquez ici</a> Lien vers une page situe dans un rpertoire diffrent <a href="sujet/nom.htm">Cliquez ici</a> Liens externes: <a href="http://www.allhtml.com">Dcouvrez ALL HTML</a> y y Accs un ancre d'une page situe sur un autre site etc.
<A href="http://www.un-autre site.com/repertoire/fichier.html#nom_ancre">lien</A> href="http://www.un-
Exemple de cration de liens <HTML><HEAD><u><font color="#FF0000" face="Cration des liens Liens internes et externes </font><P></u> </HEAD> <BODY> La page vers laquelle est faite le lien se trouve dans le mme rpertoir que la page en cours : br> <A HREF = "Algerie.jpg">Algrie</A><br><br> --> La page vers laquelle est faite le lien se trouve dans un sous--> sousrpertoire de celui de la page courante : <br> <A HREF = "Test2/fleure.gif">Fleure</A><br><br> --> Lien Vers des Sites externes <br> --> <A HREF = "http://fr.yahoo.com/">Yahoo</A><br> <A HREF = "http://bboukers.ifrance.com/html/">Boukers</A><br <A href="#ancre1">Lien vers l'ancre 1</A> <P><P><P><P><P><P><P><P><P><P> <A name="ancre1">Ce-ci est le texte de l'ancre 1</A> name="ancre1">Ce</BODY></HTML>
Liens.html
TABLEAUX
Intrt :
Permettent une meilleure prsentation de l information. Balises principales <TABLE> </TABLE>
attribut BORDER = "px" attribut ALIGN = "top" (valeur par dfaut) ou "bottom"
ligne <TR> </TR> cellule <TD> </TD>
La description d'un tableau en HTML se fait ligne par ligne et pour chaque ligne, cellule par cellule. Chaque cellule peut contenir n'importe quel lment HTML (image, texte, lien, applet, tableau ...).
TABLEAUX
Cellules vides <TD></TD> ou <TD> <TD> Affichage ALIGN = "LEFT" "RIGHT" "CENTER" "JUSTIFY" Alignement dans les cellules <TD ALIGN = "left/center/right"> "left/center/right"> <TD VALIGN = "top/middle/bottom"> "top/middle/bottom"> un attribut dans <TD> affecte tous les lments de la cellule un attribut dans <TR> affecte tous les lments de la ligne left
center
right align
top middle bottom valign
M. BOUKERS
TABLEAUX
cellules fusionnes une cellule sur plusieurs lignes ou colonnes ROWSPAN 1 cellule sur hauteur de plusieurs lignes valeur de l'attribut dfinit hauteur en ligne de la cellule COLSPAN 1 cellule sur largeur de plusieurs colonnes valeur de l'attribut dfinit largeur en colonne de la cellule
cellule fusionne
<TD COLSPAN="2">cellule fusionne</TD>
M. BOUKERS
TABLEAUX
paisseur de quadrillage CELLSPACING = "px" (2 par dfaut)
espacement des donnes CELLPADDING = "px" (1 par dfaut)
M. BOUKERS
Voici un exemple de tableau HTML :

<TABLE BORDER="1"> <CAPTION> Voici le titre du tableau </CAPTION> <TR> <TH> Titre A1 </TH> <TH> Titre A2 </TH> <TH> Titre A3 </TH> <TH> Titre A4 </TH> </TR> <TR> <TD> Valeur B1 </TD> <TD> Valeur B2 </TD> <TD> Valeur B3 </TD> <TD> Valeur B4 </TD> Voici le titre </TR> </TABLE>
Titre A1 Titre A2 Valeur B2
du tableau
Titre A4 Valeur B4
Titre A3 Valeur B3
Ce code donne le rsultat suivant :
Valeur B1
Tableau1.html M. BOUKERS
Exploitation des modes CREATION, CODE et CREATION du menu Affichage sous Macromedia Dreamweaver Procdure
- Fichiers>Nouveau>HTML>Page de base>Crer. - Se positionner l intrieur du corps. - Affichage>Cration>Insertion>Tableau. - Renseigner les diffrents champs. - Afficher le Code et apporter les modifications en
fonction de vos besoins etc.
Cf. Tableau2.html M. BOUKERS
Les Formulaires
Les formulaires sont dlimits par la balise
<FORM> Les lments du formulaire </FORM>
Les attributs de la balise <form>: <form>: METHOD : Indique sous quelle forme seront envoyes les rponses
POST" "POST" est la valeur qui correspond un envoi de donnes stockes dans le corps de la requte, tandis que "GET" correspond un envoi requte, "GET" de donnes codes dans l'URL, et spares de l'adresse du script par l'URL, un point d'interrogation.
ACTION : Indique l'adresse d'envoi (script
ou adresse email).
M. BOUKERS
Les Formulaires
Les lments de la balise<FORM>
La balise INPUT : un ensemble de boutons et de champs de saisie La balise TEXTAREA : une zone de saisie La balise SELECT : une liste choix multiples
M. BOUKERS
Les Formulaires
La balise INPUT et ses attributs
<INPUT type = "Type du champ" name = "Nom de l'lment" l'lment" value = "Valeur par dfaut" >
La balise TEXTAREA et ses attributs

<textarea name = "nom de llment" > Valeur </textarea>
La balise SELECT et ses attributs

<select name <option value <option value <option value </select>
M. BOUKERS
= = = =
"liste"> "Valeur 1">Valeur 1</option> "Valeur 2">Valeur 2</option> "Valeur 3">Valeur 3</option>
M. BOUKERS
Exemple 1 <body> <FORM method="" action=""> nom"><BR> <INPUT type="text" name= "nom"><BR> <INPUT type="text" name="prenom"><BR> name="prenom"><BR> <INPUT type="radio" Sexe="value"="M"><BR> Sexe="value"="M <INPUT type="radio" Sexe="value"="F"><BR><BR> Sexe="value"="F <SELECT name= "Fonction"> <OPTION value="enseignant">Enseignant</OPTION> <OPTION value="etudiant">tudiant</OPTION> <OPTION value=" ingnieur" SELECTED>Ingnieur</OPTION> <OPTION value="retraite">Retrait</OPTION> <OPTION value="marie">Autre</OPTION> </SELECT><BR><BR> <TEXTAREA rows="3" name="commentaire"> Tapez ici vos commentaires</TEXTAREA><BR><BR> <INPUT type="checkbox" name="checkbox" value="checkbox"><BR><BR> <INPUT name "submit" type="submit" value="Envoyer"><BR> </FORM> </body> Formulaire1.html
M. BOUKERS
<body><FORM method="" action=""> <td>Nom</td> <INPUT type="text" name="Nom" value="Le Nom"><BR><BR> <td>Prnom</td> <INPUT type="text" name="Prenom" value="Le Prnom"><BR><BR> <td>Sexe</td><BR> <td>Homme</td> <INPUT type="radio" name="Sexe" value="M"><BR> <td>Femme</td> <INPUT type="radio" name="Sexe" value="F"><BR><BR>
Formulaire2.html
M. BOUKERS
30
<td>Fonction</td> <SELECT name="fonction"> <OPTION value="enseigant">Enseignant</OPTION> <OPTION value="etudiant">Etudiant</OPTION> <OPTION value="ingenieur" SELECTED>Ingnieur</OPTION> <OPTION value="retraite">Retrait</OPTION> <OPTION value="marie">Autre</OPTION> </SELECT><BR><BR><BR><BR><BR><BR> <td>Commentaire</td> <TEXTAREA rows="3" name="commentaire"> Tapez ici vos commentaires </TEXTAREA><BR><BR><BR> <td>Confirmer l'inscription</td> <INPUT type="checkbox" name="checkbox" value="checkbox"><BR><BR><BR> <INPUT name "submit" type="submit" value="Envoyer"><BR> </FORM></body>
Formulaire2.html
M. BOUKERS
31
Exemple 2 : Essayer de crer un code permettant d avoir le rsultat suivant :
Formulaire2.html M. BOUKERS
Exemple 2 : Essayer de crer un code permettant d avoir le rsultat suivant : Nom Prnom Sexe Homme Femme Fonction
Ingnieur Le Nom Le Prnom
Commentaire
Tapez ici vos commentaires
Confirmer l'inscription
Envoyer
M. BOUKERS 33
<FORM method="" action=""> <td>Nom</td> <INPUT type="text" name="Nom" value="Le Nom"><BR><BR> <td>Prnom</td> <INPUT type="text" name="Prenom" value="Le Prnom"><BR><BR> <td>Sexe</td><BR> <td>Homme</td><INPUT type="radio" name="Sexe" value="M"><BR> <td>Femme</td><INPUT type="radio" name="Sexe" value="F"><BR><BR>
34
<td>Fonction</td> <SELECT name="fonction"> <OPTION value="enseigant">Enseignant</OPTION <OPTION value="etudiant">Etudiant</OPTION> <OPTION value="ingenieur" SELECTED>Ingnieur</OPTION> <OPTION value="retraite">Retrait</OPTION> <OPTION value="marie">Autre</OPTION> </SELECT><BR><BR><BR><BR><BR><BR> <td>Commentaire</td> <TEXTAREA rows="3" name="commentaire"> Tapez ici vos commentaires </TEXTAREA><BR><BR><BR> <td>Confirmer l'inscription</td> <INPUT type="checkbox" name="checkbox" value="checkbox"><BR><BR><B <INPUT name "submit" type="submit" value="Envoyer"><BR></FORM>
35
Exercice 1 crire le code HTML correspondant l'affichage de la page web suivante : Ordinateur portable HP Pavilion Srie HDX
Prsent dans le tout nouveau style HP Imprint Dragon ce portable puissant aux lignes pures offre un home cinma de grande classe, une exprience informatique hautes performances, le premier cran HP 20,1 pouces et une conception innovante et lgante
M. BOUKERS
Exercice 2 : Cration de formulaire

Crez un formulaire HTML qui contient quatre (04) champs de saisie et une liste 04) de choix de la profession (cadre, cadre moyen et cadre suprieur) comme suit :
Nom
Prnom
Age
E-mail
Quelle est votre profession ?
<--Votre Profession-->
Envoyer
M. BOUKERS
Solution de l exercice 1
<table border="0" cellspacing="0" cellpadding="0" width="838"> <tr> <td> </td> <td></td> </tr> <tr> <td width="418" height="250" > <img src="hp.jpg" alt="hp" border="0"> </td> <td width="404" height="378" valign="middle" >
<font size="4" color="3366CC" >Ordinateur portable HP Pavilion srie HDX</font>
<p><font size="3" color="003366" >Prsent dans le tout nouveau style HP Imprint <br> " Dragon " ce portable puissant aux lignes pures offre un home cinma de
grande classe, une exprience informatique hautes performances, le premier cran HP 20,1 pouces et une conception innovante et lgante </font></p> </td> </tr> </table>
M. BOUKERS
Solution de l exercice 2 <body> <form id="form1" name="form1" method="post" action=""> <table width="100%" border="1"> <tr> <td width="23%">Nom</td> <td width="77%"><input type="text" name="textfield" /></td> </tr> <tr> <td>Prenom</td> <td> <input type="text" name="textfield2" /> </td> </tr> <tr> <td>Age</td> <td> <input type="text" name="textfield3" /> </td> </tr> <tr> <td>E<td>E-mail</td> <td> <input type="text" name="textfield4" /> </td> </tr>
M. BOUKERS
Solution Exercice 2 (suite)
<tr> <td>Quelle est votre profession ? </td> <td><select name="select"> <option><--Votre Profession--></option> <option><--Votre Profession--></option> <option value="1">cadre</option> <option value="2">cadre moyen</option> <option value="3">cadre superieur</option> </select> </td> </tr> <tr> <td> </td> <td><label> <input type="submit" name="Submit" value="Envoyer" /> </label></td> </tr> </table> <p> </p> </form> <p> </p> </body>
M. BOUKERS

Le Langage HTML+Formulaires

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Le Langage HTML+Formulaires

Hochgeladen von

Copyright:

Verfügbare Formate

LE LANGAGE HTML

Le document HTML minimal

Les balises courantes de l HTML

Les balises courantes de l HTML

<font > et ses attributs <img> et ses attributs

<u>Entte</u> <u>Entte</u> : Informations gnrales sur le document <br><br>

<FONT> et ses attributs

<FONT> et ses attributs

<IMG> et ses attributs

Exemple <HTML> <HEAD> <u>

Crer un lien ...

Crer un lien ...

Les types de liens

ligne <TR> </TR> cellule <TD> </TD>

top middle bottom valign

<TD COLSPAN="2">cellule fusionne</TD>

paisseur de quadrillage CELLSPACING = "px" (2 par dfaut)

espacement des donnes CELLPADDING = "px" (1 par dfaut)

Voici un exemple de tableau HTML :

Ce code donne le rsultat suivant :

ACTION : Indique l'adresse d'envoi (script

La balise TEXTAREA et ses attributs

La balise SELECT et ses attributs

Exemple 2 : Essayer de crer un code permettant d avoir le rsultat suivant :

Tapez ici vos commentaires

Exercice 2 : Cration de formulaire

Quelle est votre profession ?

Solution Exercice 2 (suite)

Das könnte Ihnen auch gefallen