Voici un peu d'aide pour vous permettre de faire des pages web





    Pour commencer la programmation HTML il faut savoir comment construire un Fichier HTML :). Pour cela bien, je vous présente les quelques balises parmis bien d'autres. Il y a certaine balise nommé Balise conteneur ce qui veux dire qu'il faut une balise de fermeture et le code doit être à l'intérieur des deux balises.
Exemple : <HTML> </HTML>

Balise Conteneur Attribut FONCTION
<HTML></HTML>Oui
 


Indique le début et la fin du document html

<HEAD></HEAD>Oui
 


En-tête. cette balise peut contenir beaucoups d'information. Nous allons en parler plus loins
<TITLE></TITLE>Oui
 


Cette balise est intégré à l'intérieur des balises <HEAD> et permet d'afficher un titre dans la barre de titre du navigateur

<META>Nonlang=" "
dir="..."
http-equiv="..."
Name="..."
content="..."
scheme="..."

Fournit des informations concernant le document
Exemple de balise <META> et explication
<BODY></BODY>Oui
BackGround = nom_de_fichier
bgcolor = couleur
Texte = couleur
link = couleur
vlink = couleur
alink = couleur
bgproperties = fixed

Cette balise est le corp de votre document. Les informations que vous désirez partager avec les autres par le site web que vous voulez construire se retrouve à l'intérieur de ces balises.
<XMP></XMP>Oui
 


Cette balise vous permets de faire afficher le code de votre page, cela empêche votre internet explorateur d'interpréter le code, si vous désirez partager vos connaissances.


[ TOP ]

Ici vous retrouverez un exemple.


Maintenant voici quelque balise qui vous donnera un peu de style dans vos pages web.

BaliseType de baliseAttributExemple
<H1>texte</H1>
<H2>texte</H2>
Jusqu'à
<H6>texte</H6> 		Balise d'en-tête qui permet de subdiviser un document, un peu comme les chapitres d'un livreAlign=
<H1 Aling=Center>

texte

</H1>
Left, Right aussi disponible pour l'alignement
<BR>
<P>		Retour de chariot et
Espacement d'un paragraphe		  Texte....(nouvelle ligne)
<BR>Texte...
<P>

Texte...
<I></I>
Balise qui mute le texte en caractère Italique

  <I>Italique</I>
<B></B>
Balise qui mute le texte en caractère

GRAS 		 <B><I>Gras italique</I></B>
<U></U>
Balise de Soulignement

  <U>Soulignement</U>
<HR Color="Blue"
Width=50% Size=12>		Balise qui permet de faire une ligne
Color=
width="100"
Aling="Center"
Size="3"
Noshade

 <HR Width="40%">
<HR Size=6 Color="blue">
<Font></Font>
Balise qui permet de spécifier la taille, le type, la couleur

Size = 3
Face = "Arial
Color = ="Red"		 <Font Size = 2 Face ="Arial" Color ="Red">Texte </Font>

<SUP></SUP>

Balise qui permet de mettre en exposé une portion de texte  82+3=19
1erJanvier 20041<SUP>er</SUP>Janvier 2004

<SUB></SUB>

Permet de faire la fonction inverse de la précédente  82+3=19
1erJanvier 20041<SUB>er</SUB>Janvier 2004

<em></em>

Cette balise sert à marquer un texte sur lequel on veut insister.  Bonjour Toi ! ca va bien ?
Bonjour toi ! ca va bien ?
<PRE>...</PRE>
Permet d'obliger le contenu de s'afficher sur la même ligne

 <PRE>Affcihage sur le même ligne</PRE>
<Marquee></Marquee>
Balise qui permet de faire une bannière

Direction = défilement du texte
Behavior = Mode de déplacement
V||H/space = pixel d'espacement entre les marges
loop = Nombre de loop exécuter
scrollamount = vitesse de défilement
Scrolldelay : précise le délai de régénération
z-index=3 : Réglage de la superposition des images.

 Aling="top"
Aling="bottum"
Aling="middle"
Loop=5
BGColor="blue"
Direction="left"
Direction="right"
Height et width
Behavior="Scroll"
Behavior="slide"
Behavior="alternate"
vspace=10% hspace=10%
Scrollamount=50
Scrolldelay=5		<Marquee Aling="top" Loop=5 BGColor="blue" onmouseover='this.stop()' onmouseout='this.start()'> Texte </Marquee>

<DT>
<DD>
<Dt>
<DD>

 Balise de définition qui permet de créer une liste de définition  Exemple
<OL Type="square">
<LI>
<LI>
</OL>
Cette balise permet de faire de la mise en page C'est identique à une balise de définition mais avec des puces.

 Type="circle"
Type="square"
Type="disc"
Type="1"
Type="a"

Exemple
<BGSOUND SRC= "NomDuFichier.wav">
Cette balise n'est pas utilisé pour la mise en forme mais permet d'ajouter de la musique de fond dans vos page web. IE uniquement.
SRC= Précise le nom et le chemin d'un fichier à charger dans une page web. Cette balise permet trois formats de fichier son WAV, AV et MIDI.
 <BGSOUND SRC="NomDuFichier.midi">
<embed src= "NomFichier"> </embed>
Cette balise permet d'intégrer le lecteur Windows Media Player.
src="NomFichier"
autostart= True ou False

 <embed src= "./Music/Suce_ma_chienne.mp3" autostart=false> </embed>

<img src = "nom_du_fichier">
Cette balise permet d'intérger une image dans vos pages web

SRC : Nom et chemin du fichier au besoin.

ALT : Affiche un message si image non présente.

h et v space : espace autour l'image

Alignement : Permet d'aligner l'image avec le texte à côté


src = " "

Alt = " "

height= pixel ou %
width = pixel ou %

hspace = px
vspace = px

border = px

align=top
align=middle
align=botton
align=left
align=right
Trou blanc
< img src= "./Image/Trou_Blanc.GIF" alt="Trou blanc" width=200 height=150>


[ TOP ]



Construction d'un tableau

Pixel équivaut à un petit point sur l'écran
% équivaut à un pourcentage de l'utilisation du document.
BaliseDescriptionAttribut
<TABLE></TABLE> Cette balise permet la création du tableau. C'est l'en-tête pour la création du tableau

Align = Left, center ou right
bgcolor = red, blue, ...
width = au choix, pixel ou %
border = pixel
bordercolor = #000080
cellspacing = pixel ou %
cellpadding = pixel ou %
Frame = void
Rules = none

<TH></TH>
Cette balise indique que c'est l'en-tête du tableau. Placer le même nombre de TH que de TD pour avoir une en-tête pour chaque colonne

 <TABLE></TABLE><TH></TH>
<TR></TR>
Cette balise doit être comprise entre les balises d'ouverture et de fermeture TABLE.

Elle permet de créer chaque ligne du tableau
Aling = left, center, right, justify, char left
Valing = top, middle, bottom, baseline middle
bgcolor = "Red" ...
<TD></TD>
Cette balise entre les balise TR permet de créer chaque colonne du tableau. Chaque TD produit une colonne comme résultat
rowspan = 0, Permet de fusionnées les lignes
colspan = 5 fusionne, 5 colonnes
nowrap indique que le contenue de la cellule ne doit pas revenir à la ligne automatiquement

width = pixel ou %
height = pixel ou %
aling = left, center, right, justify
valing = top, middle, bottom
bgcolor = "red", ...
<caption></caption>
Cette balise permet d'intégrer une légende pour afficher au bas du tableau ou dans le haut Doit être comprise entre les balises TABLE

 <table><caption></caption></table>


Exemple de tableau Tableau

[ TOP ]



Les Liens

    On retrouve deux types de liens. Les liens relatifs et absolus. Les liens relatifs font référence aux pages html sur le serveur local.

     Les liens Abosolus font référence aux pages html qui sont stockés sur un autre serveur

       Relatif : <a href= "accueil.html">
       Absolu : <a href="www.telecharger.com">

    Attribut de la balise HREF
  • target
    • L'attribut target nous permet d'indiquer à quel endroit nous voulons ouvrir la page web
  • title
    • Cette attribut nous permet de laisser à l'usager une information du lien à l'aide d'un info-bulle


[ TOP ]


Ancre - Anchor

      Un ancre est un point sur une page web que nous référencons.

      Comme dans un journal où on retrouve la page des sports, de la bourse, ... Nous donnons un nom à un endroit précis dans une page et avec la balise de lien (<a HREF="NomAncre">) nous pouvons interpeller cette section.

      Exemple : <a name="sport"></a> et pour appeller ce point nous utilisons le lien

<a HREF="#sport">

[ TOP ]





Frame, Cadre en francais

      Le Cadre nous permet de pouvoir diviser notre page web en section. L'utilisation des balises <HTML></HTML> au moment le d'initialisation du document est suffisant.

      Définir un cadre dans un page web.

<html> <FRAMESET rows="25%,75%" marginheight="30"> <Frame name="top" src="Haut.html"frameborder="3"> <FRAMESET Cols="*,*"> <Frame name="gauche" src="gauche.html" frameborder="10" > <Frame name="affichage" src="Commande.html" frameborder="10" > <noframes> <p>Ce projet utilise des cadres. Chez vous les cadres ne sont pas affichés.</p> </noframes> </FRAMESET> </FRAMESET> </html>

      Voici les attributs de la balise FRAME

    Frame
  • Name
    • Nous permet à partir d'un lien de faire afficher la page web dans la partie désiré du frame que vous venez decréer
  • SRC
    • Cette attribut nous permet de faire afficher la page web à l'interpelation de votre page Cadre
  • Mardginwidth
    • Cette attribut contrôle l'espace horizontal séparant le contenu d'un cadre de ses bordures gauche et droite.
  • Marginheight
    • Cette attribut nous permet de contrôler la distance séparant le contenu du cadre de ses bordures supérieure et inférieure.
  • Scrolling
    • Cette attribut contrôle la barre de défilement du cadre. Il est possible de mettre cette attribut à no, yes et auto.
  • Noresize
    • Cette attribut nous permet de contrôler la fonction de redimensionnement du cadre. Il suffit de rajouter tout simplement cette attribut dans la balise sans lui attribuer de valuer, car elle n'en prend pas


      L'exemple de code pour la fabrication de ce 'FRAME' comporte deux frameset.

Le premier frameset permet de diviser la page web à l'horizontal en deux sections. Section 'TOP' qui me permettra de mettre une banière ou autre en-tête d'acceuil. et le reste de la fenêtre seras utiliser par le second framset.

Le second Frameset permet de diviser la fenêtre à la vertical. Ou on retrouvers à la gauche un menu pour naviguer dans le site web. et à droit la section d'affichage des informations que je veux partager au usager.

Dans chaque section nous retrouvons un fichier HTML rattacher à elle même. dans chaque fichier le code HTML sera ainsi afficher dans sa fenêtre respective.

      Vous aurez ainsi la chace de vous faire une page web avec, un en-tête, un menu à votre gauche et le message que vous voulez véhiculer à vos usagés.

Cliquez sur L'Exemple pour voir.

[ TOP ]

Les caractères spéciaux

Caractère en code ASCII permettant à l'usager de voir un caractère au lieux qu'il soit interpréter par le navigateur internet
< >" &Espace blanc£ ¥Ç
&lt;&gt;&quot;&AMP;&nbsp;&pound;&yen;&Ccedil;
©®@ ¼½¾ ™
&copy;&reg;&#64;&frac14;&frac12;&frac34;&trade;&para;
É Ê È ËÀ Á ÂÃ
&Eacute; &Ecirc; &Egrave;&Euml;&Agrave; &Aacute;&Acirc;&Atilde;
Ä Å ¿ ¬°± 5²5³
&Auml; &Aring; &iquest; &not;&deg;&plusmn;5&sup2;5&sup3;


Légende
Caractère rechercher
Code ASCII


[ TOP ]


Travailler dans des dossiers différents pour une page web

      Exemple : Avoir un dossier image et faire un raccourcis vers se dossier dans un URL

      Acceuil.html Balise image avec un <IMG SRC = "../Image/image.gif">

Dossier enfant : "image/lofoten.jpg"
Dossier petit-fils : "image/animaux/ours.jpg
Dossier parent : "../image.jpg
Dossier grand-parent : "../../image.jpg
Dossier cousin : "../autre/image.jpg




[ TOP ]

Formulaire

     Il est parfois oubligatoire de communiquer avec l'utilisateur de la page web. Pour recueillir les informations pour l'intervention de l'usager. Il faut alors créer un formulaire. Le tableau suivant vous parleras des ses balises. Il y a deux méthode pour envoyer de l'information d'une page web à une autre et par le même fait de travailler avec une base de données. Méthode POST ou GET.

      La méthode POST est la méthode la plus sécuritaire et surment la plus utilisée. Cette méthode permet de passer les informations dans l'en-tête du fichier qui contrairement à la méthode GET qui passe les informations dans le URL

Exemple : www.enregistrement.html     dans cette page vous retrouvez un formulaire pour vous inscrire dans groupe de discution
          www.enregistrementNou.html?Prenom=alain&Nom=Bernier

Alors qu'avec la méthode POST le résultat aurait été

      www.enregistrementNou.html



Formulaire mailto<form action="mailto:bozo@bozo.com?subject=Bienvenue name="envoi" method=POST enctype="text/plain">
    <FORM ACTION = "" NAME = "frmDemo" METHOD="POST">
  • Action
    • L'attribut Action de la balise form sert à spécifier l'URL de l'application responsable du traitement des données saisies dans un formulaire. En règle générale, cette application réside sur le server.
  • Method
    • Les valeurs possibles de cet attribut sont POST ou GET
      La méthode POST est la plus fiable point de vue sécurité. Les informations passe dans l'en-tête du fichier html. Alors que GET l'information passe dans le URL à la suite du signe d'intérogation.
      Exemple : www.accueil,com?nom=Meme&prenom=yoyo
  • Name
    • Cette attribut permet d'identifier d'une façon unique chaque formulaire.
<FORM NAME="frmClient" Action="Enregistrezcommande.html" Method="post">



Balise <INPUT Type= "" Name="" Value="">

Tableau des balises input

Type d'objetDescriptionFonction
button
Bouton de commande
Bouton ordinaire
reset

Bouton de commande
Permet d'initialiser le formulaire
submit
Bouton de commande


Transmet les données du formulaire à un serveur
checkbox
Case à cocher


Permet de faire la sélection d'un choix
radio
Bouton option


Permet de sélectionner un seul option. Mais les boutons doivent porter tous le même nom
text
Zone de texte


Permet de saisir des caractères
password
Zone réservé aux mots de passe


Masque l'entrée au clavier de l'usager
hidden
Zone de texte masqué à l'usager


Utilisé pour stoker des données masquées
<select>
Zone de liste déroulante
Permet à l'usager de faire une sélection dans la liste et il est possible de faire une sélection mutiple
<textarea>
Zone de texte


Permet de créer une zone de texte Pouvant contenir plusieurs lignes


Formulaire : Exemple

Bouton option : Exemple


      Après avoir compris le fonctionnement de la construction d'un formulaire voici des explications sur le traitement. Dans l'en-tête du formulaire
<FORM
  • Action : Est l'action que le formulaire exécuteras en appuyant sur le bouton submit. Vous inscrivez votre page de traitement de votre formulaire. Cette page récoltera les informations incrit par l'usager Il vous resteras alors à faire ce que bon vous semble :). IMPORTANT : Pour le traitement du fichier en ASP ou PHP cette page de traitement devrait pas affiche Rien avant la fin de l'exécution de mise à jour ou d'ajout d'informations dans la base de donnée.
  • NAME:On retrouve ici le nom de votre forumlaire. Ce qui vous permetteras de pouvoir traiter plusieurs formulaires à partir de nom différent. dans le cas d'un gestion plus complexe. Mais obligatoire même si juste un formulaire existe
  • METHOD : Devrait être assez largement traiter plus haut.


[ TOP ]





Copyright © 2003-2008 Dave J.