Rectorat 7 Novembre de Carthage FSEGN

Année Universitaire 2009/2010 Niveau: 2 L.A - IAG

M L L E . Z E I N E B C H E L LY

LE LANGAGE HTML
HyperText Markup Langage Langage de mise en forme à base de balises Les balises permettent d’organiser le contenu du site Les balises sont interprétées par le navigateur Internet Les pages du site sont liées par des liens hypertextes sur lesquels on clique pour naviguer.

MLLE. ZEINEB CHELLY

COMMENT ÉCRIRE DU CODE HTML
En utilisant un éditeur de texte basique de type bloc-notes ou note pad On peut aussi utiliser un éditeur spécialisé tel que le front page, un des plus puissant: Dreamweaver Enregistrer son programme et lui attribuer l’extension html ou htm Ouvrir avec votre navigateur Internet.

MLLE. ZEINEB CHELLY

LE DOCUMENT MINIMAL
Tag/Balise, Markup/Marqueur

Contenu

<HTML> <HEAD> C'est le conteneur de l'entête. </HEAD> <BODY> C'est le conteneur du corps. C'est ici que nous écrirons. </BODY> </HTML>

Une paire de balises

MLLE. ZEINEB CHELLY

EXEMPLE
<HTML>
<HEAD> <TITLE> Exemple de page html </TITLE> </HEAD> <BODY> <H1> première partie </H1> Ce document présente les fondamentaux <P> d'une création de page html <H2> le document de base </H2> </BODY>

</HTML>

Exemple de page html

première partie
Ce document présente les fondamentaux d'une création de page html

le document de base
MLLE. ZEINEB CHELLY

 Trois étapes : 1.fr/urfist"> l'urfist </A> lien doc. vers un autre document  Un lien permet de définir  une région sensible au clic souris dans un document  l'endroit ou l'on va se retrouver après ce clic. lien 3. B MLLE. <A HREF = "nom du fichier" ou HREF = "url du document"> 2. A doc..cict.html"> curriculum vitae </A> Visitez le site de <A HREF = "http://www.LES ÉLÉMENTS DU LANGAGE HTML : LES LIENS HYPERTEXTES Créer un lien . ZEINEB CHELLY .. </A>  Exemples : Consultez mon <A HREF = "cvoli.

. B MLLE. ZEINEB CHELLY .B # nom de la section"> lien </A> lien cible doc. A doc.. vers une section spécifique d'un autre document Définir la cible dans le document "cible" <A NAME = "nom de la section"> section </A> Créer son lien dans le document "source" <A HREF = "doc.LES ÉLÉMENTS DU LANGAGE HTML : LES LIENS HYPERTEXTES Créer un lien .

lien partie cible document A MLLE.. courant même procédé en supprimant le nom de fichier..LES ÉLÉMENTS DU LANGAGE HTML : LES LIENS HYPERTEXTES Créer un lien . vers une section spécifique du doc. ZEINEB CHELLY .

ert@caramail. ZEINEB CHELLY .com?subject=renseignement">adresse</A> <A HREF="mailto:oli.exe"> cliquez ici pour télécharger </A> Lien e-mail <A HREF="mailto:oli.com">adresse_e_mail</A> <A HREF="mailto:oli.ert@caramail.com?subject=renseignement&BODY=votre message">adresse_e_mail</A> MLLE.ert@caramail.LES ÉLÉMENTS DU LANGAGE HTML : AUTRES LIENS  Lien vers un fichier à télécharger <A HREF="fichier.

<h6>. ZEINEB CHELLY . <h4>. MLLE. <h3>. <h5>.  Il existe six niveaux de titres d'importance décroissante : <h1>. <h2>.TITRE & SOUS-TITRE  Il s'agit ici des titres qui s'afficheront dans la page (et non dans la barre de titre comme la balise <title> précédemment) : ce sont les en-têtes de sections ou paragraphes.

ZEINEB CHELLY .MLLE.

ZEINEB CHELLY . La balise <p> provoque un saut de ligne avant le paragraphe.PARAGRAPHES : LA BALISE <P>  Fonction : Un paragraphe est délimité par les balises <p> et </p>.  Attributs : Attributs de la balise <p> MLLE.

La balise fermante est facultative. MLLE. ZEINEB CHELLY .PARAGRAPHES : LA BALISE <BR>  Fonction : Force un retour en début de ligne suivante à l'intérieur d'un même paragraphe.

MLLE.  Cette balise possède des attributs. et généralement pourvu d'un ombrage.LA BALISE <HR>  Elle est destinée à séparer différentes parties d'un document au moyen d'un trait horizontal de longueur et d'épaisseur variables. ZEINEB CHELLY .

MISE EN FORME DU TEXTE MLLE. ZEINEB CHELLY .

ZEINEB CHELLY .AUTRES BALISES  La balise <center> permet de centrer son contenu.  <blockquote>. MLLE. Il est recommandé d'utiliser plutôt l'attribut align="center". prévu pour des citations de plusieurs lignes. cette balise permet de produire un effet d'indentation sur les deux marges latérales.

ZEINEB CHELLY .PRÉSENTATION D'UNE ENTITÉ DE CARACTÈRE MLLE.

CODAGE DE LA COULEUR .

LES BALISES DE LISTE Type de liste Exemple de code Représentation Liste non ordonnée Quelques fruits <UL> <LI>Pommes <LI>Poires </UL> Les premières villes de France <OL> <LI>Paris <LI>Lyon </OL> Quelques fruits • Pommes • Poires Liste ordonnée Les premières villes de France 1. ZEINEB CHELLY . Paris 2. Lyon Liste de Définition <DL> Quelques définitions de Quelques définitions de termes termes HTML <DT>HTML Hypertext Markup Language <DD>Hypertext Markup Language WWW <DT>WWW World Wide Web <DD>World Wide Web </DL> MLLE.

REMARQUES ET COMPLÉMENTS Le paramètre TYPE de la balise <UL> permet de choisir la puce affichée pour chaque entrée de liste : Type Représentation <UL TYPE="disc"> <LI> <LI> </UL> <UL TYPE="circle"> <LI> <LI> </UL> <UL TYPE="square"> <LI> <LI> </UL> • • o o   MLLE. ZEINEB CHELLY .

b. 2. <OL TYPE="a"> <LI> <LI> </OL> <OL TYPE="I"> <LI> <LI> </OL> a. I. MLLE. II. Représentation A. ZEINEB CHELLY .Le paramètre TYPE de la balise <OL> permet de choisir le type de numérotation : Type <OL TYPE=1> <LI> <LI> </OL> <OL TYPE="A"> <LI> <LI> </OL> 1. B.

bordeaux  villes étrangères 1. londres 3. toulouse sud c. toulouse a.périphérie 3.Donner le code html du plan suivant  villes françaises 1. ZEINEB CHELLY . toulouse nord 2. munich Exercice MLLE. paris .arrondissements . toulouse centre b.centre ville . new-york 2.

ZEINEB CHELLY .<UL> <LI> Villes françaises <OL> <LI> Toulouse <OL TYPE = "a"> <LI> toulouse centre <LI> toulouse sud <LI> toulouse nord </OL> <LI> Paris <UL WRAP = "horiz"> <LI>centre ville <LI>arrondissements <LI>périphérie </UL> <LI> Bordeaux </OL> <LI> Villes étrangères <OL> <LI> New-York <LI> Londres <LI> Munich </OL> </UL> Solution MLLE.

FORME DU TABLEAU  Un tableau commence par <TABLE> et finit par </TABLE>  Une ligne dans un tableau commence par <TR> et finit par </TR>  Une cellule dans une ligne commence par <TD> et finit par </TD>  Une cellule d'en-tête dans une ligne commence par <TH> et finit par </TH>  <Caption> et </Caption> servent à définir un titre pour le tableau. ZEINEB CHELLY . MLLE.

3</TD> </TR> <TR> <TD>C e l l u l e 2 .1</TD> <TD>C e l l u l e 2 .<TABLE> <TR> <TD>C e l l u l e 1 .2</TD> <TD>C e l l u l e 2 . ZEINEB CHELLY .3</TD> </TR> </TABLE> MLLE.2</TD> <TD>C e l l u l e 1 .1</TD> <TD>C e l l u l e 1 .

MLLE. ZEINEB CHELLY .  Pour lier plusieurs cellules sur une colonne. utiliser ROWSPAN (avec les tags TH et TD). utiliser COLSPAN (avec les tags TH et TD).LIAISON DE CELLULES  Vous pouvez lier des cellules sur une ligne ou une colonne : Pour lier plusieurs cellules sur une ligne.

EXEMPLE <TABLE BORDER=1> <TR> <TD colspan="2" >Liaison de 2 colonnes</TD> </TR> <TR> <TD>Information 1</TD> <TD rowspan="2">Liaison de 2 lignes</TD> </TR> <TR> <TD>Information 2</TD> </TR> </TABLE> MLLE. ZEINEB CHELLY .

en pixels ou pourcentage. MLLE.MISE EN PAGE DU TABLEAU  WIDTH : largeur du tableau ou d'une cellule. ZEINEB CHELLY . en pixels ou pourcentage.  HEIGHT : hauteur du tableau ou d'une cellule.  CELLSPACING : l'espace entre les cellules.  CELLPADDING : l'espace la bordure et le contenu de la cellule.  BORDER :taille en pixels de la bordure du tableau.

 BACKGROUND l'URL de l'image à afficher comme image d'arrière plan du tableau.  BORDERCOLORLIGHT :couleur claire de la bordure du tableau. ligne ou tableau. ZEINEB CHELLY .  BORDERCOLORDARK : couleur de l'ombre de la bordure du tableau.  BORDERCOLOR : couleur de la bordure du tableau.  NOWRAP : empêche le retour à la ligne du texte de la cellule. MLLE.MISE EN PAGE DU TABLEAU  BGCOLOR : couleur d'une cellule.

ZEINEB CHELLY . (@ e-mail) ou à un script de page web dynamique tel que PHP. puis appuie sur un bouton de soumission (submit) pour l'envoyer soit à un URL. MLLE.LES FORMULAIRES HTML Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internaute. Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons.

champs de saisie.  Action: action à exécuter lors de l’envoi des données.fr/cgi-bin/script">…. </FORM>..<FORM> MLLE. <FORM METHOD="POST" ACTION= « http://www.. ZEINEB CHELLY ...serveur..LA BALISE PRINCIPALE Les formulaires sont délimités par la balise <FORM> . une balise qui permet de regrouper plusieurs éléments de formulaire (boutons.) et qui Possède les attributs obligatoires suivants :  Method (GET / POST): permet de définir la méthode de transfert des données vers le serveur.

ZEINEB CHELLY .MLLE.

 MAXLENGTH : la taille maximale de la chaîne de caractère qu'il peut contenir. ZEINEB CHELLY . Syntaxe : <INPUT TYPE="text" NAME="nom_du_champ" SIZE="taille" MAXLENGTH="taille_maximum" VALUE="texte_par_défaut"> MLLE.CHAMP DE SAISIE SIMPLE : CHAMP DE TEXTE SIMPLE  Il permet d'entrer un texte très court comme le nom..  SIZE : la taille du champ en nombre de caractères. l'âge..  Il a pour syntaxe : <INPUT TYPE="text"> et pour attributs :  NAME : le nom du champ.  VALUE : le texte à mettre par défaut à l'intérieur du champ. l'email.

A.fr Votre e-mail : <INPUT TYPE="text" NAME="nom" SIZE="20" MAXLENGTH="30" VALUE="L.A. ZEINEB CHELLY .IAG@yahoo.EXEMPLES Votre nom : Yesmin Votre nom : <INPUT TYPE="text" NAME="nom" SIZE="20" MAXLENGTH="30" VALUE="Yesmin"> Votre e-mail : L.fr"></FONT> MLLE.IAG@yahoo.

ZEINEB CHELLY .CHAMP DE SAISIE SIMPLE : MOT DE PASSE Il vous est aussi donné d'utiliser ce champ afin de contrôler des mots de passe qui apparaitront en astérix grace à la balise <INPUT TYPE="password">. Syntaxe : <INPUT TYPE="password" NAME="nom_du_champ" SIZE="taille" MAXLENGTH="taille_maximum"> MLLE.

EXEMPLE A password field: < INPUT TYPE="password" NAME="secret" SIZE="8" MAXLENGTH="8"> MLLE. ZEINEB CHELLY .

 ROWS : le nombres de lignes. ZEINEB CHELLY .  COLS : le nombres de colonnes. MLLE.CHAMP DE SAISIE MULTI-LIGNE Il est souvent nécessaire à l'intèrnautre d'écrire un commentaire assez long: On utilise le conteneur <TEXTAREA> pour offrir au visiteur un espace multi-lignes. Il a pour attributs :  NAME : le nom du champ.  READONLY : le champs se trouve alors en mode lecture seule c'est-à-dire que le texte par défaut qui s'y trouve ne peut en être effacé.

Syntaxe : <TEXTAREA NAME="nom_du_champ" ROWS="nombre_de_lignes" COLS="nombre_de_colonnes"> </TEXTAREA> Exemples : Que faites-vous dans la vie ? Que faites-vous dans la vie ? <TEXTAREA NAME="vie_internaute" ROWS="5" COLS="50"> </TEXTAREA> MLLE. ZEINEB CHELLY .

Montons sur Paris. Dressons les baricades ! </TEXTAREA> Voici ce que j'en pense : C'est un scandale. Montons sur Paris.Voici ce que j'en pense : <TEXTAREA NAME="pense" ROWS="5" COLS="50" READONLY> C'est un scandale. c'est inadmissible. Dressons les baricades ! MLLE. c'est inadmissible. ZEINEB CHELLY .

 CHECKED : facultatif car indique le bouton coché par défaut. On utilise pour cela la balise <INPUT TYPE="radio"> Les attributs sont:  NAME : le nom du champ dans lequel ira la valeur finalement sélectionnée. Syntaxe : <INPUT TYPE="radio" NAME="nom_du_groupe" VALUE="valeur" [CHECKED]> MLLE. ZEINEB CHELLY .BOUTON RADIO Le bouton radio sert à faire un choix à l'internaute parmi plusieurs propositions. Un seul choix est possible et le nombre de propositions n'est pas limité.  VALUE : le texte qui sera inscrit dans le champ.

ZEINEB CHELLY .EXEMPLE Exemple : Votre qualité : Monsieur Madame Mademoiselle Votre qualité : <BR> <INPUT TYPE="radio" NAME="qualite" VALUE="M" CHECKED>Monsieur<BR> <INPUT TYPE="radio" NAME="qualite" VALUE="Mme">Madame<BR> <INPUT TYPE="radio" NAME="qualite" VALUE="Mlle">Mademoiselle MLLE.

BOUTON CHECKBOX Le bouton checkbox est très semblable au bouton radio à la seule différence qu'il est possible d'en sélectionner plusieurs appartenant au même groupe. Les attributs sont strictement les mêmes. ZEINEB CHELLY . Mais on utilise cette fois-ci la balise <INPUT TYPE="checkbox">. Syntaxe : <INPUT TYPE="checkbox" NAME="nom_du_groupe " VALUE="valeur" [CHECKED]> MLLE.

EXEMPLE Exemple : Vos sports préférés : Vos sports préférés : <BR> <INPUT TYPE="checkbox" NAME="qualites" VALUE="natation" CHECKED>Natation<BR> <INPUT TYPE="checkbox" NAME="qualites" VALUE="cyclisme">Cyclisme<BR> <INPUT TYPE="checkbox" NAME="qualites" VALUE="ski">Ski<BR> <INPUT TYPE="checkbox" NAME="qualites" VALUE="petanque" CHECKED>Pétanque<BR> <INPUT TYPE="checkbox" NAME="qualites" VALUE="basket">Basket MLLE. ZEINEB CHELLY .

MLLE. mieux vaut utiliser les listes déroulantes avec le conteneur <SELECT> Les attributs sont:  NAME : le nom de la liste.LISTES Les boutons radio et checkbox sont bien mais quand on a un choix à faire entre 36 valeurs différentes.  SIZE (facultatif) dont la valeur unité (par défaut) signifie qu'on a affaire à une liste déroulante sinon c'est une liste normale mais avec barre de défilement. ZEINEB CHELLY .  MULTIPLE (facultatif) qui signifie qu'il est possible de sélectionner plusieurs valeurs.

ZEINEB CHELLY .Syntaxe : <SELECT NAME="nom_de_la_liste" [SIZE] [MULTIPLE]> <OPTION VALUE="valeur_1">Choix_1 <OPTION VALUE="valeur_2">Choix_2 <OPTION VALUE="valeur_X" [SELECTED]>Choix_X </SELECT> MLLE.

EXEMPLE 1 Quel est votre type de femme : Quel est votre type de femme : <SELECT NAME="femme"> <OPTION VALUE="blondes">Blondes <OPTION VALUE="brunes">Brunes <OPTION VALUE="rousses">Rousses </SELECT> MLLE. ZEINEB CHELLY .

ZEINEB CHELLY .EXEMPLE 2 A quels jeux avez-vous déjà joué : A quels jeux avez-vous déjà joué : <BR> <SELECT NAME="jeux" SIZE=4 MULTIPLE"> <OPTION VALUE="dd">Destruction Derby <OPTION VALUE="racer">Moto Racer <OPTION VALUE="doom" SELECTED>Doom <OPTION VALUE="duke">Duke Nukem <OPTION VALUE="quake">Quake <OPTION VALUE="civ" SELECTED>Civilisation <OPTION VALUE="sim">Sim City </SELECT> MLLE.

Pour cela il lui faudra cliquer sur un bouton comme dans une boite de dialogue windows et dont la balise correspondante est <INPUT TYPE="submit"> dont l'attribut VALUE a pour valeur le texte affiché sur le bouton. il faut qu'il puisse vous l'envoyer. ZEINEB CHELLY . Syntaxe : <INPUT TYPE="submit" VALUE="texte_à_afficher"> MLLE.BOUTONS DE FONCTION : BOUTON ENVOYER Une fois que votre visiteur a fini de remplir le formulaire.

EXEMPLE Envoyer <INPUT TYPE="submit" VALUE="Envoyer"> MLLE. ZEINEB CHELLY .

ZEINEB CHELLY . L'utilisation de la balise <INPUT TYPE="reset"> fera apparaître un bouton qui permet d'initialiser le formulaire.BOUTONS DE FONCTION : BOUTON EFFACER L'internaute pourra aussi vouloir effacer toutes les réponses qu'il aura donné. Syntaxe : <INPUT TYPE="reset" VALUE="texte_à_afficher"> MLLE.

EXEMPLE Effacer <INPUT TYPE="reset" VALUE="Effacer"> MLLE. ZEINEB CHELLY .

BOUTONS DE FONCTION : BOUTON SIMPLE Pour des besoins de contrôle du formulaire avec JavaScript. pour pouvez être amené à créer un bouton qui ne soit dédié ni à l'envoit du formulaire ni à son ré-initialisation. Syntaxe : <INPUT TYPE="button" VALUE="texte_à_afficher" onClick="fonction_JavaScript()"> MLLE. L'utilisation de la balise <INPUT TYPE="button"> fera apparaître un bouton simple qui peut appeler une fonction JavaScript. ZEINEB CHELLY .

ZEINEB CHELLY .EXEMPLE Cliquer ici ! <INPUT TYPE="button" VALUE="Cliquez ici !" onClick="fctjs(this.form)"> <INPUT TYPE="text" NAME="texte"> MLLE.

ATTRIBUTS DE LA BALISE FORM ET TYPES D'ENTRÉES MLLE. ZEINEB CHELLY .

MLLE. ZEINEB CHELLY .

EXERCICE MLLE. ZEINEB CHELLY .

ZEINEB CHELLY .CORRECTION MLLE.

ZEINEB CHELLY .MLLE.

Sign up to vote on this title
UsefulNot useful