Visiteurs : 1 | Connecté : 0 | Inscrits : 74 |

Accueil

Contact

Forum

Download

Votre Avis

Login :
Passe :
	Connex. Auto
S'inscrire \| Passe perdu \| Pourquoi ?

Saisie :
Dans :

Recherche Avancée


	Les Cours/Tutoriels
	Dossiers & Astuces
	Les tests matériels
	Les logiciels à l'essais

Vous aimez et désirez aider le site dans son développement.
Une page "don" entièrement sécurisée est à votre disposition.

Votre don en quelques clics

Le design du site vous plaît-il ?

	Cours Software : Les langages de programmation


	Vous êtes ici ---> univers du pc > Les Cours/tutoriels > La programmation HTML

La programmation HTML

Information :

Auteur : Univerien le 23 Apr 09 à 23h53
Niveau du cours : Débutant, Aucun risque pour votre système.
Descritpion : Apprendre à gérer et créer ses propres page Web.
Avencement : 100 %

Sommaire :

Le langage
Squelette HTML du document
Les listes
Les liens hypertextes
Les images
Les tableaux
Les formulaires
Les couleurs
Les frames (Cellules)

Le langage

Retour | Remonter

Présentation

Le langage HTML permet de manière simple et efficace de réaliser des docoments mise en forme afin d'être disponible via un navigateur internet. HTML est un langage à balises c'est-à-dire que l'on réalise des actions sur un mot ou un groupe de mots. Un document HTML est donc un essemble d'instruction permettant de mettre en forme un texte, tableau, image et bien d'autre encore dans le but de le rendre attractif et consultable via un navigateur internet.

De façon générale, les instructions sont de la forme :

Formatage du code HTML :

<marqueur> texte </marqueur>
<marqueur attribut="argument"> texte </marqueur>
<marqueur attribut1="argument1" attribut2="argument2"> texte </marqueur>

En langage HTML il n'y a aucune importance que la taille d'écriture des marqueurs. Ils peuvent être si bien écrits en majuscules ou en minuscules. Cependant aujourd'hui il convient de mettre les balises en minuscules pour être en phase avec la norme XHTML (W3C). Tant prendre de bonne habitude de suite.

Exemple :

<b> equivaut <B>

Les outils

Le developpement en HTML n'a pas besoin d'outil extraordinaire. La plupart de la programmation pourra se faire via le bloc-note de windows. Bien évidement il existe des éditeurs permettant de programmer des pages HTML, il met ainsi plus en évidence le code sous forme de couleur. Certain éditeur permette même de retranscrire directement le texte en lagage HTML ainsi vos n'avez pas besoin de taper de code. Mais sachez qu'il sera toujours plus efficace de créer son code, car cela permet d'être plus maitre de ce que l'on créé et evite certaine surprises. Il vous faudra donc quelques connaissances et règles afin de créer vos propres pages Web.

Donc la création d'une page HTML se fait généralement via le bloc-note et une fois terminé il vous suffit d'enregistrer le document mais avec l'extension .html ou .htm.

Le codage des caractères accentués

Attention une règle à bien connaître avant de commencer sachez que dans un code HTML les carratères accentués sont sont mal interprété il faut utiliser des syntaxes prévues à cet effet pour réaliser les accentuations.

Caractère	Codage
&	&
é	é
è	è
ê	ê
<	<
>	>
É	É
È	È
Ê	Ê

Squelette HTML du document

Retour | Remonter

Topographie du document

Pour faire simple on peut dire qu'un document HTML et constitué de deux parties. L'une s'appellant l'entête et l'autre le corps.
Le premier servant à tout ce qui concerne les paramètres du document (Généralement c'est tout ce qui n'est pas affiché).
Le second la partie principale de la page la ou va être affiché vos différents textes, images, tableaux...

Topographie d'une page HTML :

<html>					<!-- Un document HTML -->
<titre>Titre de la page</titre>		<!-- Titre de la page HTML -->
<head>...</head>			<!-- Entête du document -->
<body>...</body>			<!-- Corps du document -->
<html>

Les entêtes

Les entêtes en langage HTML se sont les différentes instructions élémentaires pour le bon fonctionnement de la page Web. On peut appeller cela plus simplement le coeur, c'est-à-dire le code principal d'un page HTML.
Chaque entête possède un début et une fin <balise>...</balise>.

Entête <html></html> : Correspond à la commande de début et de fin du document HTML.

Entête <head></head> : Correspond aux informations non affichées du document.

Entête <titre></titre> : Correspond au titre du document HTML. Cette information apparaît dans la barre de titre du navigateur.

Entête <meta...> : Ces commandes guident les moteurs de recherche pour indexer votre page.

Entête <link...> : Permet de définir un style à votre document. non obligatoire.

Entête <body></body> : Correspond au corps du document. Tout ce qui vient apres cette entête est affiché dans le navigateur.

Entête  : Permet de mettre du commentaire dans le code du document. N'est pas affiché dans le navigateur.

Voici un exemple de code constituant votre première page HTML :

Exemple d'une page HTML :

<head>
<title>Première page </title>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
    Ceci est ma première page HTML !
<p>sdsd</p>
     <!-- Pas si compliqué --> Commentaire non affiché..
<form>
	<input type="ratio">
</form>
<table width="90%">
	<tr>
		<td>
		</td>
	</tr>
</table>
</body>
</html>

Les délimiteurs

Les délimiteurs dans un code HTML permettent de mettre en forme le texte et de le formater. En effet le navigateur n'interprète pas les retour à la ligne, les espaces...

Délimiteur de paragrahe <p> ... </p> : Permet de réaliser des sauts de paragraphe.
Délimiteur de bloc <div></div> : Permet de cadrer un bloc de ligne. La différence avec <p> c'est qu'il n'y a pas de saut de ligne.
Délimiteur de saut de ligne <br> : Permet de réaliser un saut de ligne.
Délimiteur de ligne <hr> : Permet d'insérer une ligne horizontale pour séparer du texte.
Délimiteur d'adresse <adresse></adresse> : Ceci permet d'afficher une adresse.
Délimiteur de citation <cite></cite> : Permet de réaliser des citation de texte.
Délimiteur de citation <var></var> : Permet d'afficher du texte de type variables.
Délimiteur de citation <code></code> : Permet d'afficher du code.
Délimiteur de centrage <center></center> : permet de centrer un élément sur la page.

Les espaces multiples, les sauts de lignes et les tabulations sont ignorés et réduits à 1 espace.

Les balises styles

Les balises styles en HTML permettent d'enrichir votre texte en le souligant, le grossissant... Pour réaliser cette enrichissement sur le texte vous devez utiliser les balises styles d'HTML.

Balise gras <b></b> : Cette balise permet de mettre le texte en gras.

Code source :

<b>Mon texte en gras</b>

Résultat :

Mon texte en gras

Balise italique <i></i> : Cette balise permet de mettre le texte en italique.

Code source :

<i>Mon texte en italic</i>

Résultat :

Mon texte en italic

Balise souligné <u></u> : Cette balise permet de souligner le texte.

Code source :

<u>Mon texte souligné</u>

Résultat :

Mon texte souligné

Balise barré <strike></strike> : Cette balise permet de barrer du texte.

Code source :

<strike>Mon texte barré</strike>

Résultat :

~~Mon texte barré~~

Balise clignotante <blink></blink> : Cette balise permet de faire clignoter le texte.

Code source :

<blink>Mon texte clignotant</blink>

Résultat :

Mon texte clignotant

Balise très grande taille <h1></h1> : Cette balise permet de mettre en très grande taille votre texte.

Code source :

<h1>Mon texte en très grande taille</h1>

Résultat :

Mon texte en très grande taille

Balise grande taille <h2></h2> : Cette balise permet de mettre en grande taille votre texte.

Code source :

<h2>Mon texte en grande taille</h2>

Résultat :

Mon texte en grande taille

Balise moyenne taille <h3></h3> : Cette balise permet de mettre en taille moyenne votre texte.

Code source :

<h3>Mon texte en taille moyenne</h3>

Résultat :

Mon texte en taille moyenne

Balise petite taille <h4></h4> : Cette balise permet de mettre en petite taille votre texte.

Code source :

<h4>Mon texte en petite taille</h4>

Résultat :

Mon texte en petite taille

Balise très petite taille <h5></h5> : Cette balise permet de mettre en très petite taille votre texte.

Code source :

<h5>Mon texte en très petite taille</h5>

Résultat :

Mon texte en très petite taille

Balise minuscule taille <h6></h6> : Cette balise permet de mettre en taille minuscule votre texte.

Code source :

<h6>Mon texte en minuscule taille</h6>

Résultat :

Mon texte en minuscule taille

Les listes

Retour | Remonter

Les listes permettent comme sous un document Word d'ordonner ou non un sommaire ou texte. Sous HTML une syntaxe existe afin de créer ces listes. Différente listes existes, elles sont tous énumérées ci-dessous.

Les listes standards

Il existe quatres types de liste standards simple-ordonnées-répertoire-menu. Ces liste vont vous permettre de créer vos différentes mise en page assez simplement.

Dans chaque liste vous retrouverez la balise <LI></LI> qui permet de faire un retour à la ligne. Il ne sera donc pas necessaire d'utiliser <BR>.

Liste ordonnées <ol type="1,a,A ou I", start="1">...</ol> : Cela permet de créer une liste numérotée. L numérotation sera automatiquement faite par HTML. Dans une liste ordonnée il est possible d'ajouter des paramètres afin de choisir le type de numérotation (Chiffre ou chiffre romain) ainsi que le début de l'incrémentation de la numérotation.

Code source :

<head>
<titre>Exemple liste ordonnée</titre>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
<p>Exemple d'une liste ordonnée en lettre</p>
 
<!-- Ouverture de la liste avec quelques paramètres-->
 
    <ol start="1", type="A">   
 
<!-- on commence le liste -->
 
      <li>                        
          Element 1
      </li>
      <li>
          Element 2
      </li>
      <li>
          ...
      </li>
    </ol>     
 
<!-- Fermeture de la liste -->
 
<p>Exemple d'une liste ordonnée en lettre</p>
 
<!-- Ouverture de la liste avec quelques paramètres-->
 
   <ol start="1", type="1">     
 
<!-- on commence le liste -->
 
      <li>                        
          Element 1
      </li>
      <li>
          Element 2
      </li>
      <li>
          ...
      </li>
    </ol>   
 
<!-- Fermeture de la liste -->
 
</body>
</html>

Résultat :

Exemple d'une liste ordonnée en lettre

Element 1
Element 2
...

Exemple d'une liste ordonnée en chiffre

Element 1
Element 2
...

Liste simple <ul type="Disc, Circle ou square">...</ol> : Cela permet de créer une liste constituée de puces (ou pastilles) comme sous Word. Comme pour la liste ordonnée il est possible de modifier la puce soit par un autre symbole.

Code source :

<head>
<titre>Exemple liste simple</titre>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
<p>Exemple d'une liste simple avec la pouce cercle</p>
 
<!-- Ouverture de la liste avec quelques paramètres-->
 
    <ul type="Circle">                
 
<!-- on commence le liste -->
 
	  <li>                                     
          Element 1
      </li>
      <li>
          Element 2
      </li>
      <li>
          ...
      </li>
    </ul>                                     
 
<!-- Fermeture de la liste -->
 
<p>Exemple d'une liste simple avec la pouce disque</p>
 
<!-- Ouverture de la liste avec quelques paramètres-->
 
   <ul Type="Disc">                    
 
<!-- on commence le liste -->
 
      <li>                                      
          Element 1
      </li>
      <li>
          Element 2
      </li>
      <li>
          ...
      </li>
    </ul>                                     
 
<!-- Fermeture de la liste -->
 
<p>Exemple d'une liste simple avec la pouce carré</p>
 
<!-- Ouverture de la liste avec quelques paramètres-->
 
   <ul type="Square"> 
 
<!-- on commence le liste -->
 
      <li>                                     
          Element 1
      </li>
      <li>
          Element 2
      </li>
      <li>
          ...
      </li>
    </ul>  
 
<!-- Fermeture de la liste -->
 
</body>
</html>

Résultat :

Exemple d'une liste simple avec la puce cercle

Element 1
Element 2
...

Exemple d'une liste simple avec la puce disque

Element 1
Element 2
...

Exemple d'une liste simple avec la puce carré

Element 1
Element 2
...

Liste menu <menu>...</menu> : La particularité d'une liste menu réside sur le fait que la liste est justifier sur la gauche les unes en dessous des autres et aucune indentation n'est présent.

Code source :

<head>
<titre>Exemple liste menu</titre>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
<p>Exemple d'une liste menu</p>
 
<!-- Ouverture de la liste -->
 
    <menu>                                
 
<!-- on commence le liste -->
 
	  <li>                                     
          Element 1
      </li>
      <li>
          Element 2
      </li>
      <li>
          ...
      </li>
    </menu>  
 
<!-- Fermeture de la liste -->
 
</body>
</html>

Résultat :

Exemple d'une liste menu

Element 1

Element 2

...

Entrée de type disctionnaire (Listes de définition)

Les listes de type dictionnaire permettent de réaliser une liste comportant sous chaque liste une définition ou description de la celle-ci.

Liste dictionnaire <dl><dt></dt><dd></dd></dl> : On remarque que ce type de liste possède un peut plus de balise que les autres cela réside sur le fait de la structure même de la liste.

Code source :

<head>
<titre>Exemple liste dictionnaire</titre>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
<p>Exemple d'une liste dictionnaire</p>
 
<!-- Ouverture de la liste -->
 
    <dl>                                        
 
<!-- Balise pour la liste -->
 
	  <dt>                                      
          Element 1
      </dt>
 
<!-- Balise pour la description-->
 
      <dd>                                     
          Description 1
      </dd>
      <dt>
          ...
      </dt>
      <dd>
          ...
      </dd>
    </dl>       
 
<!-- Fermeture de la liste -->
 
</body>
</html>

Résultat :

Exemple d'une liste disctionnaire

Element 1: Description 1

l'ambrication de listes

En HTML il est possible de faire l'inbrication de liste. Pour cela il vous suffit de combiner les différentes listes vues précédement et les mettre en forme pour obtenir le résutat désiré.

Code source :

<head>
<titre>Exemple listes ambriquées</titre>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
<p>Exemple de listes ambriquées</p>
 
<!-- Ouverture de la liste principale -->
    <ol>     
<!-- Balise pour la liste -->
      <li>                                       
          Elément 1
<!-- Ouverture de la liste secondaire -->
          <ul>       
<!-- Balise pour la liste -->
              <li>                              
                  Sous élément 1
              </li>
<!-- Balise pour la liste -->
              <li>                               
                  Sous élément 2
              </li>
<!-- Fermeture de la liste secondaire -->
          </ul>                                 
      <li>
          Elément 2
      </li>
    </ol> 
 <!-- Fermeture de la liste principale -->                                     
</body>
</html>

Résultat :

Exemple listes ambriquées

Elément 1

Sous élément 1
Sous élément 2

Elément 2

Les liens hypertextes

Retour | Remonter

Présentation

La notion de liens est très importante dans le langage HTML. En effet la grande particularité du HTML c'est de pouvoir voyager sur différentes pages via de lien incrusté dans le texte. Un lien c'est tout simplement du texte cliquable qui lors du clic sur celui-ci le navigateur nous dirige ver la page pointé par ce lien. On est comme transporter sur différentes page d'un bouquin.
Un lien est facilement reconnaissable par son style, en effet généralement un lien change d'état lors du passage de la sourie dessus (change de couleur, devient souligné...).

il existe trois type de lien :

Soit les liens internes à un site (Chemin relatif).
Soit les liens interne à une page ou ancre nommée (Chemin absolu).
soit les liens externes pointant vers des pages d'autres sites, fichiers... (Chemin externe).

Les liens et ancre se construisent avec la balsie <a attribut...></a>.

Attribut de la balise lien

La construction d'un lien ou ancre se fait toujours par la balise <a></a>, ensuite les attribut insérés dans la balise de début <a> permette de paramètrer le type de lien la destination...

Attribut	Effet
href	Hypertexte Reference, permet de définir la destination du lien.
name	Etiquette de l'ancre
target	Permet de choisir de type d'ouverture
title	Permet de mettre une description du lien lors du survole de celui-ci

L'attribut Target, permet selon le paramètre choisi d'ouvrir la page du lien de manière différente.

target="_self" fenêtre ou cadre d'appel (utilisé pour les frame).
target="_parent" fenêtre ouvrant le <frameset> du <frame> (utilisé pour les frames).
target="_top" Remplace la fenêtre actuel par celle du lien.
target="_blank" ouvre la page du lien dans une nouvelle fenêtre.

Types de liens

Les liens internes à un site (chemins relatifs) : Les liens internes à un site pointes vers une page web du site présente dans un répertoire (On appelle cela en local). Le lien permettra donc de faire appelle à une page du site mais avec le chemin relatif.

Code source :

<head>
<titre>Exemple d'un lien interne à un site</titre>
</head>
<meta name="Author" content="Dupont">
 
<body>
<p>Exemple d'un lien interne à un site (même page)</p>
<!-- On créer le lien -->
    <a href="pages/premier lien.html" target="_top" >     
<!-- Texte qui sera le lien -->    
      Cliquez ici pour ouvrir la page  
<!-- On referme la balise lien -->                                   
    </a>
<p>Exemple d'un lien interne à un site (page différente)</p>
<!-- On ouvre la balise lien -->
    <a href="pages/premier lien.html" target="_blank">        
<!-- Texte qui sera le lien -->	
      Cliquez ici pour ouvrir la page  
<!-- On referme la balise lien -->
    </a>              
</body>
</html>

Résultat :

Exemple d'un lien interne à un site (même page)

Cliquez ici pour ouvrir la page

Exemple d'un lien interne à un site (page différente)

Cliquez ici pour ouvrir la page

Les liens internes à une pageou une ancre (Chemins absolus ou relatifs) : Les liens internes à une page ou une ancre permettent de créer des liens pointant ver une page du site ou une ancre d'une page du site local. Le chemine peut être soit relatif ou absolu.

Code source :

<head>
<titre>Exemple d'un lien interne à une page ou une ancre</titre>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
<p>Exemple d'un lien interne à une page en chemin relatif et description</p>
    <a href="../pages/programmation html.php">      
      Cliquez ici pour ouvrir la page           
    </a>                                                       
<p>Exemple d'un lien interne à une ancre en chemin relatif</p>
   <a href="../pages/programmation html.php">  
      Cliquez ici pour ouvrir la page            
    </a>                                                       
    <a name="mon ancre">                       
      Lors du clic sur le lien celui-ci pointra sur cette ancre
    </a>                                                     
</body>
</html>

Résultat :

Exemple d'un lien interne à une page en chemin relatif et description

Cliquez ici pour ouvrir la page

Exemple d'un lien interne à une ancre en chemin relatif

En cliquant sur ce lien celui-ci vous ammenera vers l'ancre de la page qui se situ en debut de page

Les liens externes : Les liens externes permettent de pointer vers un au autre site.

Code source :

<head>
<titre>Exemple d'un lien interne à un site</titre>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
<p>Exemple d'un lien externe pointant vers un autre site</p>
    <a href="http://www.google.fr" target="_blank">        
      Cliquez ici pour ouvrir la page            
    </a>                                                       
</body>
</html>

Résultat :

Exemple d'un lien externe pointant vers un autre site

Cliquez ici pour ouvrir la page

Liens vers des ressources

En HTML les liens ne sont pas utilisés seulement pour pointer vers des pages. D'autres option son disponible afin de pointer vers des ressources comme adresse mail, FTP...

La ressouce FTP : Permet de créer un lien vers un serveur FTP.

Code source :

<head>
<titre>Exemple de la ressource FTP</titre>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
    <a href="ftp://ftp.serveurftp.fr" target="_blank">        
      Cliquez ici pour accéder au serveur            
    </a>                                                       
</body>
</html>

La ressouce MAILTO : Permet lors du clic sur le lien d'ouvrir votre logiciel mail et d'envoyer un message au destinateur défini dans le mailto.

Code source :

<head>
<titre>Exemple de la ressource Mailto</titre>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
    <a href="mailto:universdupc@free.fr"" target="_blank">        
      Envoyer un message à l'univers du pc            
    </a>                                                       
</body>
</html>

La ressouce TELNET : Permet de créer un lien pour la connexion avec d'autres ordinateurs.

Code source :

<head>
<titre>Exemple de la ressource Telnet</titre>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
    <a href="telnet:nom_de_machine " target="_blank">        
     Accèder au pc            
    </a>                                                       
</body>
</html>

Les liens images

Tous les exemple que je vous ai montré ici on était fait avec du texte. Mais vous pouvez utiliser une image pour votre lien. C'est-à-dire au lieu de mettre du texte pour le lien c'est une image qui s'affichera.

Code source :

<head>
<titre>Exemple d'un lien en image</titre>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
    <a href="../pages/programmation html.php " target="_blank">        
     <img src="images_grande/zoom.gif" width="16" height="16" 
	 border="0" align="absmiddle"/>
    </a>                                                       
</body>
</html>

Résultat :

Exemple d'un lien externe en image pointant vers un autre site

Les images

Retour | Remonter

HTML permet d'insérer des images dans votre document. Pour cela on fait appelle à une balise nommées <img> avec différents attribut permettant d'inclure des options.

Avant de vous présenter la balise en elle même, il convient de détaillé un peux les différents formats d'images acceptés par HTML.

Conseils avant de débuter

Il faut savoir qu'il y a deux formats d'image reconnus pour le Web qui sont le .GIF et le .JPEG. Ces deux formats possède au maximum 256 couleurs. Le plus recommandé et le format JPEG, mais le format GIF à pour avantage de gérer la transparence. Ainsi une image sans find et plus facile à intégrer au design de votre site qu'un image avec un fond plein de couleur.

Il faut aussi avoir en tête la taille des images. En effet l'insertion d'image dans vos pages Web ralentit parfois considérablement la vitesse d'affichage de celle-ci. Je vous conseil donc de bien travailler vos images pour quelles soient la plus petit possible du point de vu taille. Comme je vous conseil de favorisé des miniatuer sur vos page et lors du clic sur l'image l'afficher en taille réel, cela permet d'éviter d'avoir une page trop longue à l'affichage.

Autre chose a avoir en tête, ne pas rechigné à ce procurer un logiciel de retouche d'image comme photoshop par exemple. Cela vous permettra de retoucher vos photos et de diminuer leur taille.

La balise image

Pour afficher une image dans une page Web, vous devez utilisé la balsie <img> dans votre code HTML. Cette balise possèdes différents attributs permettant de jouer sur les pramètres de l'image.

Balise image <img src="chemin de l'image" attribut....>

Les attributs

Voici la liste des différents attribut possible dans la balise image :

Attribut	Effet
width=x height=y	Permet de jouer sur la taille de l'image (Hauteur, largeur)
border=x (en pixels)	Permet de définir un cadre autour de l'image
alt="xxxx"	Texte afficher lors du survole de l'image
align	Permet de jouer sur la l'alignement de l'image (bas, haut, gauche, droite, centrer...)

A savoir :

Dans le HTML l'image ne fait pas partir du document, c'est le navigateur qui va chercher l'image à l'adresse définit dans la balise <img src="adresse">.
Les images peuvent être dans un répertoire différent des pages. D'ailleur je vous conseil pour un souci d'ergonomie placé vos images dans un répertoire nommé images à la racine du site ainsi vous serez toujours ou elles sont placés.
Il est important pour le navigateur que vous précisez dans les attribut de taille la taille de l'image à afficher. Ainsi le navigateur aloue l'espace nécessaire et peux continuer à afficher le texte correctement pendant le téléchargement de l'image.
Comme nous l'avons vu dans la partie lien il est bien sur possible de créer un lien sur une image.

Exemple d'application

Code source :

<head>
<titre>Exemple d'insertion d'images</titre>
</head>
<meta name="Author" content="Dupont">
<link href="../style.css" rel="stylesheet" type="text/css" />
 
<body>
<p><b>Insertion d'un image avec l'attribut bordure et taille :</b></p>
    <img src="../images/avatars/Alienaqua diskv2.png" border="1" 
	width="50" height="50" >        
 
<p><b>Insertion d'un image avec l'attribut taille et alt pour une description 
de celle-ci. Mettez le curseur sur l'image :</b></p>
 
    <img src="../images/avatars/Alienaqua diskv2.png" border="0" 
	width="50" height="50" alt="Attributs alt" >
 
<p><b>Insertion d'un image aligné en haut par rapport au texte :</b></p>
    <img src="../images/avatars/Alienaqua diskv2.png" border="0" 
	width="50" height="50" align="top">Alignement haut
 
<p><b>Insertion d'un image aligné au centre par rapport au texte :</b></p>
    <img src="../images/avatars/Alienaqua diskv2.png" border="0" 
	width="50" height="50" align="center">Alignement au centre
 
<p><b>Insertion d'un image aligné en bas par rapport au texte :</b></p>
    <img src="../images/avatars/Alienaqua diskv2.png" border="0" 
	width="50" height="50" aligne="bottom">Alignement en bas
 
</body>
</html>

Résultat :

Insertion d'un image avec l'attribut bordure et taille :

Insertion d'un image avec l\'attribut taille et alt pour une description de celle-ci. Mettez le curseur sur l'image :

Insertion d'un image aligné en haut par rapport au texte :

Alignement haut

Insertion d'un image aligné au centre par rapport au texte :

Alignement au centre

Insertion d'un image aligné en bas par rapport au texte :

Alignement en bas

Les tableaux

Retour | Remonter

Construire un tableau

Les tableaux sont sur ment la partie la plus importante en HTML. En effet il n'est pas toujours aisé de créer des alignement en HTML mais avec les tableaux cela devient plus simple et plus fiable. Les tableaux permettent de mettre en forme tout un document HTML d'ailleur la page de l'univers du pc est remplie de tableaux afin de mettre en forme le design et autre.

La construction d'un tableau ce fait avec trois balises de bases :

Balise	But	Effet
<table></table>	Définition du tableaux	Début et fin du tableau
<tr></tr>	Définition de ligne dans le tableau	Ajoute les lignes dans le tableau
<td></td>	Définition de cellule dans le tableau	Ajoute des cellue au tableau

La balise <table></table> permet d'initialiser le tableau, ces dans cette balise que la plupart des attributs pour la configuration du tableau sont définis. Comme la taille, bordure, alignement...

La balise <tr></tr> permette de débuter une ligne, c'est à dire que pour une ligne définit on pourra lui attribuer plusieurs cellules.

La balise <td></td> permet de créer les cellules.

Ci-dessous est présenté la structure d'un tableau :

Celui-ci représente un tableau de deux lignes à deux cellules.

Code source :

 
<table>
    <tr>
    	<td>ligne 1 cellule 1</td>
        <td>ligne 1 cellule 2</td>
    </tr>
    <tr>
    	<td>ligne 2 cellule 1</td>
        <td>ligne 2 cellule 2</td>
    </tr>
</table>

Vous voyon donc qu'il n'est pas très difficile de construire un tableau mais sachez qu'il existe une multitude d'attributs permettant de paramètrer le tableau, ligne et cellule afin de le rendre plus attrayant.

Les attributs des balises

La balise <table></table> possède les attributs suivants :

L'attibut bgcolor="code de la couleur" : permet de définir une couleur de fond au tableau.
L'attribut border="1" : Permet de définir la bordure du tableau. C'est-à-dire rendre visible le quelette du tableau.
L'attribut width="px ou %" ou height="px ou %" : Permettre de définir la taille du tableau exprimé soit en pixel ou en pourcentage.
L'attribut align="center, left, right" : Permettre de jouer sur l'alignement du tableau par rapport à la page (centrer, à gauche ou à droite).
L'attribut cellpadding="pixels" :Détermine la marge d'une cellule. Cette marge est la même de tous les cotés de chaque cellule.
L'attribut cellspacing="pixels" :Détermine la largeur en pixels entre chacune des cellule (à l'extérieur de la cellule).

La balise <tr></tr> possède les attributs suivants :

L'attibut bgcolor="code de la couleur" : Permet de définir une couleur de fond au à la ligne.
L'attribut width="px ou %" ou height="px ou %" : Permettre de définir la taille de la ligne exprimé soit en pixel ou en pourcentage.
L'attribut align="center, left, right" : Permettre de jouer sur l'alignement du tableau par rapport à la page (centrer, à gauche ou à droite).
L'attribut valign="top, bottom, middle" : Permettre de jouer sur l'alignement verticale du tableau par rapport à la page (centrer, à gauche ou à droite).

La balise <td></td> possède les attributs suivants :

L'attibut bgcolor="code de la couleur" : Permet de définir une couleur de fond au à la cellule.
L'attribut width="px ou %" ou height="px ou %" : Permettre de définir la taille de la cellule exprimé soit en pixel ou en pourcentage.
L'attribut align="center, left, right" : Permettre de jouer sur l'alignement du tableau par rapport à la page (centrer, à gauche ou à droite).
L'attribut valign="top, bottom, middle" : Permettre de jouer sur l'alignement verticale du tableau par rapport à la page (centrer, à gauche ou à droite).
L'attribut rowspan="x" : Permet la fusion de lignes (Voir chapitre fusion).
L'attribut colspan="x" : Permet le fusion de cellules (Voir chapitre fusion).

Ci-dessous est présenté quelques exemples afin de mieux comprendre la création de tableaux.

Commençons par réaliser un tableau avec une seule ligne mais plusieurs cellules et en jouant sur l'attribut de taille et bordure.

Code source :

<html>
<title>Mon premier tableau</title>
<head>
</head>
<body>
<table width="70%" border="1" align="center">
	<tr>
		<td>cellule 1</TD>
		<td>cellule 2</TD>
		<td>cellule 3</TD>
	</tr>
</table>
</body>
</html>

Résultat :

cellule 1

cellule 2

cellule 3

Maintenant on va réaliser un tableau dont la taille des cellules varies.

Code source :

<html>
<title>Mon premier tableau</title>
<head>
</head>
<body>
<table width="70%" height="5" border="1" align="center">
	<tr>
		<td width="10%">cellule 1</TD>
		<td width="40%">cellule 2</TD>
		<td width="24%">cellule 3</TD>
	</tr>
</table>
</body>
</html>

Résultat :

cellule 1

cellule 2

cellule 3

Pour terminer cette série d'exemple rajoutons quelques lignes supplémentaires à notre tableau.

Code source :

<html>
<title>Mon premier tableau</title>
<head>
</head>
<body>
<p>Avec bordure :</p>
<table width="90%" border="1" align="center">
	<tr>
		<td width="30%">cellule 1 de la ligne 1</TD>
		<td width="30%">cellule 2 de la ligne 1</TD>
		<td width="30%">cellule 3 de la ligne 1</TD>
	</tr>
	<tr>
		<td width="30%">cellule 1 de la ligne 2</TD>
		<td width="30%">cellule 2 de la ligne 2</TD>
		<td width="30%">cellule 3 de la ligne 2</TD>
	</tr>                 
</table>
<p>Sans bordure :</p>
<table width="90%" border="0" align="center">
	<tr>
		<td width="30%">cellule 1 de la ligne 1</TD>
		<td width="30%">cellule 2 de la ligne 1</TD>
		<td width="30%">cellule 3 de la ligne 1</TD>
	</tr>
	<tr>
		<td width="30%">cellule 1 de la ligne 2</TD>
		<td width="30%">cellule 2 de la ligne 2</TD>
		<td width="30%">cellule 3 de la ligne 2</TD>
	</tr>                 
</table>
</body>
</html>

Résultat :

Avec bordure :

cellule 1 de la ligne 1	cellule 2 de la ligne 1	cellule 3 de la ligne 1
cellule 1 de la ligne 2	cellule 2 de la ligne 2	cellule 3 de la ligne 2

Sans bordure :

cellule 1 de la ligne 1	cellule 2 de la ligne 1	cellule 3 de la ligne 1
cellule 1 de la ligne 2	cellule 2 de la ligne 2	cellule 3 de la ligne 2

Pour le moment nous n'avons pas encore mis trop d'effet dans nos cadres, mais vous verrez dans la suite du cours que l'on peut mettre plus joliment en forme ces tableaux.

Les quadrillages et bordures

Comme nous l'avons vu précédement on a la possibilité d'afficher les bordures du tablau ou non grave à l'attribut border="0 ou 1" sachez qu'il est possible de mettre une valeur différente de 1 cela aura pour conséquence d'augmenter l'epaisseur de la bordure.

Code source :

<html>
<title>Tableau avec une bordure de 4</title>
<head>
</head>
<body>
<table width="70%" border="4" align="center">
	<tr>
		<td>cellule 1</TD>
		<td>cellule 2</TD>
		<td>cellule 3</TD>
	</tr>
</table>
</body>
</html>

Résultat :

cellule 1

cellule 2

cellule 3

Puis nous avons vu la possibilité de mettre les attributs cellspacing ou cellpadding qui ont pour conséquence de modifier l'épaisseur du quadrillage et l'espace entre le texte et le quadrillage.

Code source :

<html>
<title>Modification des attributs cellpadding et cellspacing</title>
<head>
</head>
<body>
<p>Modification de l'attribut cellspacing</p>
<table width="70%" border="1" cellspacing="0" bgcolor="#FFFFFF">
	<tr>
		<td bgcolor="#E4E4E4">cellule 1</TD>
		<td bgcolor="#E4E4E4">cellule 2</TD>
		<td bgcolor="#E4E4E4">cellule 3</TD>
	</tr>
</table>
 
<p>Modification de l'attribut cellpadding</p>
<table width="70%" border="1" cellpadding="10" bgcolor="#FFFFFF">
	<tr>
		<td bgcolor="#E4E4E4">cellule 1</TD>
		<td bgcolor="#E4E4E4">cellule 2</TD>
		<td bgcolor="#E4E4E4">cellule 3</TD>
	</tr>
</table>
 
<p>Modification de l'attribut cellspacing et border pour créer une variante</p>
<table width="70%" border="0" cellspacing="1" bgcolor="#FFFFFF">
	<tr>
		<td bgcolor="#E4E4E4">cellule 1</TD>
		<td bgcolor="#E4E4E4">cellule 2</TD>
		<td bgcolor="#E4E4E4">cellule 3</TD>
	</tr>
</table>
</body>
</html>

Résultat :

Modification de l'attribut cellspacing

cellule 1

cellule 2

cellule 3

Modification de l'attribut cellpadding

cellule 1

cellule 2

cellule 3

Modification de l'attribut cellspacing et border pour créer une variante

cellule 1

cellule 2

cellule 3

Les couleurs dans un tableau

Dans un tableau il est tout à fait possible d'enrichire la texture des cellule ou du tableau entier. Pour cela l'attribut bgcolor permet de mettre du texte dans un tableaux. Cela permet de donner une jolie présentation à vos tableaux.

Il suffit de savoir que l'attribut bgcolor accepte les couleur de facons hexadecimales. Vous devrez donc connaitre le code de la couleur pour l'insérer comme dans l'exemple ci-dessous.

L'attribut bgcolor="#ffffff" correspond à la couleur blanche, vous devez toujours précéder du symbôle # avant le code de la couleur.

Voyon ce que cela donne dans un tableau.

Code source :

<html>
<title>De la couleur dans un tableau</title>
<head>
</head>
<body>
<table width="70%" border="4" align="center">
	<tr>
		<td bgcolor="#ffffff">cellule 1</TD>
		<td bgcolor="#99FFCC" >cellule 2</TD>
		<td bgcolor="#999999" >cellule 3</TD>
	</tr>
</table>
</body>
</html>

Résultat :

cellule 1

cellule 2

cellule 3

Les alignements

Grace aux attributs align et valign il est possible de jouer sur l'alignement du texte d'une cellule d'un tableau.

Code source :

<html>
<title>Alignemement dans un tableau</title>
<head>
</head>
<body>
<p>Modification de l'alignement horizontale du contenu des cellules</p>
<table width="70%" border="1" cellspacing="0" bgcolor="#FFFFFF">
	<tr>
		<td bgcolor="#E4E4E4" align="center">cellule 1</td>
		<td bgcolor="#E4E4E4" align="left">cellule 2</td>
		<td bgcolor="#E4E4E4" align="right">cellule 3</td>
	</tr>
</table>
<p>Modification de l'alignement verticale du contenu des cellules</p>
<table width="70%" border="1" cellspacing="0" bgcolor="#FFFFFF" align="center">
	<tr>
		<td bgcolor="#E4E4E4" valign="bottom">cellule 1</td>
        	<td bgcolor="#E4E4E4" valign="middle">cellule 2</td>
        	<td bgcolor="#E4E4E4" valign="top">cellule 3</td>
	</tr>
</table>
</body>
</html>

Résultat :

Modification de l'alignement du contenu des cellules

cellule 1

cellule 2

cellule 3

Modification de l'alignement du contenu des cellules

cellule 1

cellule 2

cellule 3

Fusion

Pour le moment on a vu la construction de tableau simple. C'est-à-dire des tableau symétrique sans aucune présentation particulière. Mais il faut savoir qu'il est possible de créer des tableaux plus compliqué en utilisant les attributs de fusion rowspan et colspan.

Code source :

<html>
<title>Fuison dans les tableaux</title>
<head>
</head>
<body>
<p>Fusion de deux colonnes</p>
<table width="70%" border="1" cellspacing="0" bgcolor="#FFFFFF">
	<tr>
		<td bgcolor="#E4E4E4" align="center" colspan="2">cellule 1</td>
	</tr>
	<tr>
		<td bgcolor="#E4E4E4" align="left">cellule 2</td>
		<td bgcolor="#E4E4E4" align="right">cellule 3</td>
	</tr>
</table>
 
<p>Fusion de deux lignes</p>
<table width="70%" border="1" cellpadding="10" bgcolor="#FFFFFF">
	<tr>
		<td bgcolor="#E4E4E4" rowspan="2">cellule 1</td>
		<td bgcolor="#E4E4E4" >cellule 2</td>
	</tr>
	<tr>
		<td bgcolor="#E4E4E4" >cellule 3</td>
	</tr>
</table>
</body>
</html>

Résultat :

Fusion de deux colonnes

cellule 1
cellule 2	cellule 3

Fusion de deux lignes

cellule 1	cellule 2
	cellule 3

Légende

Lors de la création d'un tableau il savère utile de pouvoir mettre une petite légende à ce tableau. Pour cela HTML à donné la poosibilté de rajouter cette légende facilement en passant par la balise <caption></caption>.

Reprenons un exemple de tableau précedent et rajouton quelques légendes.

Code source :

<html>
<title>Légendes sur tableaux</title>
<head>
</head>
<body>
<p>Légende en en-tête </p>
<table width="70%" border="1" cellspacing="0" bgcolor="#FFFFFF">
<caption valign="top">Légende centrer et en en-tête</caption>
	<tr>
		<td bgcolor="#E4E4E4" >cellule 1</td>
		<td bgcolor="#E4E4E4" >cellule 2</td>
		<td bgcolor="#E4E4E4" >cellule 3</td>
	</tr>
</table>
 
<p>Légende en pied</p>
<table width="70%" border="1" cellpadding="10" bgcolor="#FFFFFF">
	<tr>
		<td bgcolor="#E4E4E4" >cellule 1</td>
		<td bgcolor="#E4E4E4" >cellule 2</td>
		<td bgcolor="#E4E4E4" >cellule 3</td>
	</tr>
	<caption valign="bottom" align="left">Légende en pied de page</caption>
</table>
</body>
</html>

Résultat :

Légende en en-tête

Légende centrer et en en-tête
cellule 1	cellule 2	cellule 3

Légende en pied

Légende en pied de page
cellule 1	cellule 2	cellule 3

Les formulaires

Retour | Remonter

Structure du formulaire

Les formulaire sont très utilisés en HTML car cela offre une certaine intéractivité avec les visiteur d'un site. Le formulaire peut vous permettre de créer en espace contact pour que les visiteures puisse vous envoyer un mail via votre page du site ou bien autres choses...

Un formulaire sera toujours définit par la balise <form></form> et à l'intérieur de cette balises d'autres blise vous permettant de construire les éléments de votre formulaire. La balise principale contient l'action çà réaliser pour le formulaire elle est donc indispansable.

Cette balise et définit par deux attributs :

L'attribut Action : Il indique l'action à exécuter pour l'envoi des données. Ce sera souvent un logiciel du serveur activé en utilisant la passerelle CGI. On peu aussi utiliser un script JAVAscript.
L'attribut Method : Il permet de définir la méthode de transfert des données. Les deux valeurs de transfert possibles sont GET et POST.

Voici donc la syntaxe type d'un formulaire :

Code source :

<html>
<title>Légendes sur tableaux</title>
<head>
</head>
<body>
	<form method="post" action="www.univers-du-pc.com">
           ...
	</form>
</body>
</html>

Les éléments d'un formulaire

Pour construire le formulaire en HTML il existe des balises. Ils sont réparties en trois groupes.

Les éléments Input : Correspond aux différents champs de saisie de texte et les boutons.
Les éléments Select : correspond à tout ce qui est listes (menu déroulants, ascenseurs...).
L'élément Textarea : correspond à une zone de saisie de texte libre (comme le contenu d'un mail par exemple).

De manière générale les éléments de votre formulaire devront contenir deux attributs.

Attribut name : Qui permet de définir un nom pour l'identification lors de l'envoi des données. Le nom doit être unique et utilisé une seule fois.
Attribut value : est commun aux balises, mais son rôle est différent selon le type d'élément utilisé.
Attribut type : Permet de définir le type d'éléments à créer.

Ci-dessous est présenté l'ensemble des ces éléments ainsi que le type associé.

Les éléments Input :

Type	Syntaxe	Résultat
Saisie de texte	<input name="identification"> <input name="identification" value="defaut">
Submit	<input type="submit" value="envoie">
Checkbox	<input type="checkbox" name="choix" value="femme" checked> Femme<br> <input type="checkbox" name="choix" value="homme"> Homme	Femme Homme
Radio	<input type="checkbox" name="choix" value="oui" checked>non<br> <input type="radio" name="choix" value="non"> non	oui non
Password	<input type="password" name="pass">
Reset	<input type="reset" value="Efface">

Les éléments Select :

Type	Syntaxe	Résultat
Liste déroulante	<select name="menu"> <option selected="selected">1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select>
	<select name="menu" size="5" > <option selected="selected">1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select>

Les éléments Textarea :

Type	Syntaxe	Résultat
Saisie Texte	<textarea name="texte" row="10" col="30"> Voici un exemple de textarea </textarea>	Voici un exemple de textarea

Il faut savoir que pour chaque élément d'autres attributs sont disponibles afin de modifier soit la taille, le style... Pour les consulter je vous renvois sur la documentation en ligne du HTML.

Exemple d'un formulaire de transfert de données

Dans cette partie je vais vous montrer un formulaire de contact qu'un visiteur pourrait remplir sur votre site. Ainsi vous reçevrez son message par mail à l'adresse définit dans la balise <form></form>.

Code source :

<html>
<title>Formulaire de contact</title>
<head>
</head>
<body>
<form action="contact.php" method="POST" name="formulaire">
<div align="center">
  <table border="0" cellspacing="0" cellpadding="3">
    <tr align="left">
        <td nowrap class="texte">
            &nbsp;* Votre Nom/Pseudo :
        </td>
        <td>
            <input type="text" name="nom" size="20" value="nom">
        </td>
    </tr>
    <tr align="left">
        <td class="texte">
            &nbsp;* Votre E-Mail :
        </td>
        <td>
            <input type="text" name="mail" size="20" value="mail">
        </td>
    </tr>
    <tr align="left">
        <td class="texte">
            &nbsp;*Votre age :
        </td>
        <td>
            <input type="text" style="border : 1px solid rgb(123,168,204)" 
			name="age" size="20" value="age">
        </td>
    </tr>
    <tr align="left">
        <td class="texte">
            &nbsp;* Votre sexe :
        </td>
        <td class="Contenu">
            <input type="hidden" name="sexe" value="Indéfinie">
            <input type="radio" name="sexe" value="Femme">Femme<br>
            <input type="radio" name="sexe" value="Homme">Homme<br>
        </td>
    </tr>
    <tr align="left">
        <td colspan="2" align="center">
           <hr>
        </td>
    </tr>
    <tr align="left">
        <td valign="top" class="texte">
           &nbsp;* Votre Message :
        </td>
        <td>
            <textarea style="border : 1px solid rgb(123,168,204)" rows="3" 
			name="messages" cols="27" value="messages"></textarea>
        </td>
    <tr align="left">
        <td colspan="2" align="center"><hr></td>
    </tr>
    <tr align="left">
        <td valign="top" class="texte">
            &nbsp;Questions :
        </td>
        <td class="texte">
            Etes-vous membre du site ?<br><br>
            <select style="border : 1px solid rgb(123,168,204)" 
			size="1" name="membre">
            <option value="oui">oui</option>
            <option value="non">non</option>
            </select>
            <br><br>
            comment avez-vous connu ce site ?
            <br><br>
            <select style="border : 1px solid rgb(123,168,204)" 
			size="1" name="connu">
            <option value="hazard">Hazard</option>
            <option value="Moteurs de recherches">Moteurs de recherches</option>
            <option value="Liens sur un autre site">Liens sur un autre site</option>
            </select>
            <br>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <hr>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center" class="texte">
            -----------------
            <br>
            * Champs obligatoires
            <br>
            -----------------
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <input name="ok" type="Submit" value="Envoyer" id="formulaire">
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 
&nbsp;&nbsp; &nbsp;&nbsp;
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 
&nbsp;&nbsp; &nbsp;&nbsp;
            <input type="reset" value="Effacer">
        </td>
    </tr>
  </table>
</div>
</form>
</body>
</html>

Résultat :

* Votre Nom/Pseudo :
* Votre E-Mail :
* Votre age :
* Votre sexe :	Femme Homme

* Votre Message :

Questions :	Etes-vous membre du site ? comment avez-vous connu ce site ?

----------------- * Champs obligatoires -----------------

Les couleurs

Retour | Remonter

Nous avons vu qu'il était possible de mettre de la couleur dans un tableau, cellule à l'aide de l'attribut bgcolor. Mais généralement il vous faudra le code hexadecimal de la couleur que vous désirez mettre. Il est impossible de se souvenir de tous les code je vous ai mis pour cela le code des couleurs principales que vous pourrez utiliser pour vos tableaux.

#FFFFFF	#CCCCFF	#FFCCFF	#FFCCCC	#FFFFCC	#CCFFCC
#999999	#0000FF	#FF00FF	#FF0000	#FFFF00	#00FF00
#000000	#000099	#990099	#990000	#999900	#009900

Les frames (Cellules)

Retour | Remonter

Les frames permettent de diviser une page en plusieurs parties, c'est à dire que vous aurez par exemple une partie gauche donnent le menu et une partie centrale (droite) d'ou les pages s'afficheront lorsque vous cliquez sur un menu de gauche. Seul les frames permettent cette manipulation de page, c'est une méthode très pratique lorsque l'on veut avoir toutes les page qui s'affiche toujours au même endroit mais l'inconvénient c'est que les frames ne sont pas accepté par tous les navigateurs.
La division d'une fenêtre en plusieurs frames se fait grâce à la balise <FRAMESET>. Cette balise admet un certain nombre d'attributs comme ROWS qui permet d'indiquer le nombre et la taille respective de chaque frame horizontalement et COLS qui est utilisé pour spécifier la disposition de frames verticales.
Ces deux attributs, ROWS et COLS, respectent la même syntaxe, sous forme d'une liste définissant la taille de chaque frame, séparée par une virgule, le tout entre guillemets "".

La taille de chaque frame peut être indiquée de l'une des façons suivantes :

En pourcentage.
En pixel, la taille de la frame étant alors toujours la même, quelque soit la taille de la fenêtre du navigateur.
En proportions, en utilisant le caractère "*", éventuellement précédé d'un facteur multiplicateur entier.

Méthode pour utiliser les frames :

Pour créer une structure de cadres avec une partie droite et une gauche, vous devez commencer par créer une page web qui décrive cette structure de cadre, c'est la source des cadres. Ensuite il vous faudra créer une page web pour la partie droite et une autre pour la partie gauche. C'est pour cela que lorsque vous voulez divisez en 2 une page vous aurez en tout 3 pages web.
Je vais vous montrer comment on fabrique une frame comportant deux parties.

Création de la structure du cadre

Code source :

<html>
<head>
<title>framset</title>
</head>
<frameset framespacing="0" border="false" frameborder="0" rows="0,*">
<frame name="haut" src="haut.htm" scrolling="0" 
marginwidth="0" marginheight="0">
<frameset cols="200,*">
<frame name="gauche" src="gauche.htm" scrolling="auto" 
marginwidth="5" marginheight="5">
<frame name="droite" src="droite.htm" scrolling="auto">
</frameset>
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

Il suffit maintenant de créer les pages droite et gauche qui doivent être affichées lorsque vous cliquez sur la première page.

Création de la page gauche et droite

Page de gauche :

Cette page est souvent créée pour accueillir un menu, donc créée une page avec deux, trois titres de menu qui lorsque l'on cliquera dessus une page s'affichera à droite.

Code source :

<html>
<head>
<title>Menu</title>
</head>
<body bgcolor="#FF0000">
<p>&nbsp;</p>
<p>
	<a href="essai1.htm" target="droite">
		<font color="#0000FF" size="4" face="Smudger LET">
    		<em>-essai1</em>
    	</font>
	</a>
</p>
<p>
	<a href="essai2.htm" target="droite">
    	<font color="#0000FF" size="4" face="Smudger LET">
    		<em>-essai2</em>
    	</font>
	</a>
</p>
</body>
</html>

Page de droite :

Cette page est souvent créée pour accueillir toutes les pages du menu, mettez le texte que vous désirez.

Code source :

<html>
<head>
<title>centre</title>
</head>
<body bgcolor="#000000">
	<p><h1><center>page d'essai</center></h1>
</body>
</html>

résultat

Maintenant vos pages sont créé ainsi que votre structure de cadre vous pouvez visualiser le résultat dans votre navigateur ou cliquez sur l'icone pour vois le résultat

Ceci n'est n'été qu'un exemple plusieurs autre style de cadres sont possible, en changent les "col" par "row" pour du verticale et horizontale, puis la disposition ect... Il suffit de suivre l'exemple que je vous ai montré.

Avec la page de structure de page il est possible de rajouter une partie haut pour mettre par exemple une banière....

Il vous suffit de remplacer dans la partie <frame name="haut" src="haut.htm" scrolling="0" marginwidth="0" marginheight="0"> de la page structure de cadres, les "o" par des valeurs par exemple "50" ect. Vous aurait ainsi une page divisé en 3 parties, surtout n'oublié pas de créer une page haut.htm comme montrer précédemment.

Retour

Remonter

1.313947 secondes | 7 Requêtes