Accueil > Capsules d'Aide Virtuose > Création de page Web vendredi 19 juillet
English


Création de page Web

Évaluer cette capsule sur 5
1. 2. 3. 4. 5.
- --++ +

Cette capsule enseigne les rudiments de la création d'un document HTML.

   Sections de la capsule

Présentation de la conception des pages Web
Notions de base sur HTML
Structure du code HTML
Les principales balises
Les hyperliens
Les tableaux
Les images et la couleur
Logiciels facilitant le codage HTML

   Présentation de la conception des pages Web

La conception d'une page WEB requiert l'utilisation du HTML (Hypertext Markup Language) qui n’est en fait qu’un fichier texte dans lequel il y a des balises de formatage. Les fureteurs Internet reconnaissent ces balises qui définissent l’affichage de la page telle qu’on l’aperçoit lorsqu’on navigue sur la Toile. Les documents HTML peuvent être lus sur tous les types d’ordinateur ainsi que toutes les plates-formes. Toutefois, la caractéristique première du HTML demeure la possibilité d’insérer des liens dans le texte vers d’autres documents ou fichiers. À cause de cette multiplicité des liens entre les documents disponibles sur Internet partout à travers le monde, ce réseau ressemble à une toile d’araignée très complexe. Voir le protocole HTTP

Un document HTML peut-être visualisé sans être connecté sur Internet. Il est possible de sauvegarder ces documents sur son disque dur pour consultation ultérieure. Pendant la création des pages on peut les tester à partir de son ordinateur avant de les placer sur un serveur. Ce type de fichier est idéal pour faire des références d’un texte à l’autre. Il est à mentionner que la suite Office de Microsoft offre aussi cette possibilité de faire des liens entre les documents.

Le HTML permet également d’embellir la présentation en insérant des images, des sons, des vidéos, des formulaires, etc. D’autres langages ou applications peuvent être intégrés à ces documents : Java, Flash, ASP, Cold Fusion, JavaScript, PHP, XML, DHTML, VBscript, etc. Aussi, les sites WEB supportent maintenant les transactions commerciales en lignes. Les possibilités sont immenses, mais débutons simplement par le HTML pur.

haut de la page

   Notions de base


Le HTML demeure un langage simple dont la connaissance est à la portée de tous.

Le HTML constitue un langage d'affichage plutôt qu’un langage de programmation. En effet, de simples balises imposent la mise en forme du document. Une balise s’établit comme une commande encadrée par les caractères (<) et (>), par exemple "<Title>".

La majorité des balises doivent posséder un début <balise> et une fin marquée par "/" </balise>. La balise s’applique donc entre ces deux bornes. Par exemple : <Center> Allo </Center>; ici "Allo" sera centré dans le milieu de la page et ce qui se retrouve à l’extérieur des bornes ne le sera pas. Parfois, il n’est pas nécessaire d’indiquer une fin. (<HR> trace une barre horizontale de séparation et il n’est pas nécessaire d’avoir le </HR>)

haut de la page

   Structure du code HTML

Tous les documents HTML se retrouvent sous cette forme:

Afin de vous familiariser avec le code HTML, regarder dans le menu Affichage de votre fureteur Internet il y a une option "Source" ou "Affichage du code source". Il s'affichera alors le code HTML du document. Modifier une page est facile et permet d'apprendre à utiliser les différentes balises en plus de donner des idées nouvelles pour la création de vos pages.

•Un document HTML commence toujours par <HTML> et se fini par </HTML>
• L’entête s’écrit dans <HEAD> …</HEAD>. À cet endroit, se retrouve entre autre le titre de la page qui s’affichera dans la barre de titre du navigateur Internet.
• C’est entre les balises <body> et </body> que l’on rédige le corps du document.

Les balises peuvent posséder des attributs du type :
<balise attribut="valeur">
Exemple :

<font color="blue">Le texte sera alors affiché en bleu</font>

La balise "<font>"est définie par l’attribut "blue". Le texte sera alors affiché en bleu.

Les attributs du <Body> :
Attributs Rôle de l'attibut
BGCOLOR="white" couleur du fond
BACKGROUND="background.jpg" image de fond
TEXT="black" couleur du texte
LINK="blue" couleur des liens
ALINK="red" couleur des liens actifs
VLINK="pink" couleur des liens visités

Exemple:

<body bgcolor="red" text="white">

L'arrière plan (bg = background) sera rouge et le texte sera écrit en blanc.

haut de la page

 

  Principales balises


Principales Balises de Structure
Syntaxe Effet
<HTML>.....</HTML>
Ouvre et ferme le document HTML
<HEAD></HEAD>
Permet d'inscrire une entête au document
<TITLE>Titre</TITLE>
Affiche le titre, les caractères inscrits entre les deux balises: Titre
<META>
Permet l'ajout de l'information relative à la page comme les mots clés pour les moteurs de recherche. Cette balise offre aussi des possibilités plus avancées. Voir: http://www.commentcamarche.com/html/htmlmeta.php3
<BODY> ... </BODY>
Le contenu du document se retrouvera entre ces deux balises.


Princiapales Balises de Paragraphes
Syntaxe Effet
<P>... </P>
Cette balise divise le texte en paragraphe. Avec les attributs, on peut modifier les caractéristiques d'un paragraphe.
<BR>
Cet élément brise le paragraphe
<HR>
"Horizontal Rule" dessine une ligne horizontale de séparation dans le document.
<CENTER>...</CENTER
Marqueur qui centre les éléments dans l'écran.

Principales Balises des Tables
Syntaxe
Effet
<TABLE>...</TABLE>
Cette balise permet d'afficher des données dans un tableau comme celui que vous voyez présentement.
<TR>...</TR>
Ajoute une ligne dans le tableau.
<TH>...</TH>
Permet de faire des titres dans une cellules afin de donner un nom à une ligne ou à une colonne.
<TD>...</TD>
Ajoute des cellules dans le tableau. On peut diviser une ligne en autant de cellules que l'on veut. C'est entre ces deux éléments que des données se retrouve.


Principales Balises de Textes
Style Syntaxe Effet
Gras <b>Gras</b> Gras
Italique <i>Italique</i> Italique
Souligné <u>Souligné</u> Souligné
Combiné <b><i>Gras et Italique</i></b> Gras et Italique
Exposant Nombre<sup>exposant</sup> Nombreexposant
Indice Nombre<sub>indice</sub> Nombreindice

Balises de titres

<H1>Titre de niveau 1</H1>

<H2>Titre de niveau 2<H2>

<H3>Titre de niveau 3<H3>

<H4>Titre de niveau 4<H4>

<<H5>Titre de niveau 5</H5>

Certains éléments n’ont pas de balise de fin, voici les principales:
Ligne Horizontale (Horizontal rule) <HR>
Image (img) <img src=image.gif>
Retour à la ligne (Break) <BR>

haut de la page

   Hyperliens

Une possibilité fondamentale des documents HTML est la capacité à relier des documents présents sur un même ordinateur ou sur un serveur accessible via Internet. Par conséquent, la maîtrise du concept fichiers/répertoires est impérative pour utiliser adéquatement les hyperliens.

Chaque fichier possède un chemin d’accès sur un disque dur : C:\windows\media. C’est le même système qui se retrouve sur Internet où chaque serveur possède son adresse unique. Voir protocole TCP/IP Cette adresse se nomme URL (Uniform Resource Locator). Par exemple : http://www.hec.ca/evenements/ Ce URL conduit au répertoire "evenements" du site de HEC Montréal dont l’adresse du serveur est http://www.hec.ca. Remarquer que la barre oblique (/) qui indique les différents niveaux de répertoires, est de sens contraire au chemin d’accès. Cela est dû au fait que les URL utilisent la convention UNIX. De plus, les espaces blancs ne seront pas tolérés pour nommer des fichiers. On aperçoit les URL dans le champ Adresse en haut du fureteur Internet.


Insérer des liens dans un document HTML

La balise <A> </A> (ancrage) définit un hyperlien.
La nomenclature pour établir un lien : <a HREF="valeur">Le libellé du lien </a>
HREF est l’attribut de l’élément d’ancrage.
"valeur" détermine la cible du lien.
Exemple :

<a HREF= "http://www.hec.ca/virtuose">Page de Virtuose</a>
Résultat : Page de Virtuose

Avec cette balise, il est possible de lier un document situé sur un autre ordinateur ou sur le même ordinateur. Aussi, un lien à l’intérieur du même document peut-être créé de cette façon. On peut utiliser cette dernière méthode pour faire un menu au début d’une longue page. Toutefois, une variante s’impose. Chaque section du menu doit posséder un ancrage indiquant l’emplacement de cette section dans la page. L’attribut "name" de la balise <a> permet de nommer une section et le fureteur reconnaîtra cet élément comme le début de la section :

<a NAME= "evaluations">Évaluations</a>

Pour atteindre cette section :

<a HREF= "cours.htm#evaluations">Liste des évaluations de ce cours</a>

Résultat : Liste des évaluations de ce cours
Dans la page que vous consultez présentement, il y a des liens de ce type: haut de la page permet d'accéder au haut de la page.

Faire un lien vers une adresse E-mail pour expédier un message.
Il s’agit d’utiliser la même balise <a> avec son attribut href. Toutefois, il faut insérer un "mailto : " en avant de l’adresse électronique :

<a HREF="mailto :nomde.lapersonne@hec.ca">Contacter le responsable</a>
Résultat : Contacter le responsable

haut de la page

   Comment créer des tableaux en HTML :

<TABLE BORDER="1“ width=“100%”>

<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>
<TH> Titre B1 </TH>
<TD> Valeur B2 </TD>
<TD> Valeur B3 </TD>
<TD> Valeur B4 </TD>
</TR>
</TABLE>
Voici le titre du tableau
Titre A1 Titre A2 Titre A3 Titre A4
Titre B1 Valeur B2 Valeur B3 Valeur B4

La balise associée aux tables est <TABLE> …. </TABLE>. Entre ces deux éléments il est possible de créer un tableau de la forme voulue en ajoutant des lignes ou des colonnes. Il demeure même possible de fusionner certaines colonnes ou lignes à certains endroits avec l'attribut "colspan". Pour cette dernière fonction il est plus facile d'utiliser un logiciel d'édition de page web.

L’attribut "Border" permet d’ajouter ou non une bordure au tableau. Ainsi, la valeur 0 associée à cet attribut effacera les lignes qui délimitent les cellules du tableau. La balise <Caption> est utilisée si on veut écrire un titre au tableau. Cette balise est complètement optionnelle dans un tableau. Les tableaux peuvent aussi être utilisés dans le but de structurer les éléments sur la page. De cette façon le créateur possède un meilleur contrôle sur la disposition des objets de sa page. Avec cette méthode il est possible de positionner côte à côte images et textes.

haut de la page

   Ajouter de la vie à sa page


L’ajout d’images à sa page permet d’y insuffler de la vie en plus de la rendre plus attrayante. Néanmoins, il demeure sage de ne pas en insérer à outrance et de conserver uniquement celles qui sont pertinentes pour le document. Trop d’images ou d’animations nuisent à l’harmonie en plus d’augmenter le temps de téléchargement de la page. Conserver la simplicité dans la création de vos pages pour une lecture facile.

Les formats JPEG (Joint Photographic Expert Group) et GIF (Graphical Image Format) se veulent les formats les plus utilisés sur Internet. Normalement le JPEG sert de format pour les photographies et le GIF pour les petites images, les logos, ou les icônes. La différence entre les deux formats se situe au niveau de la compression des images. Le GIF ne perdra pas de qualité. Le JPEG pour sa part subira une légère perte de qualité au profit d’une réduction de la taille du fichier.

Extensions des JPEG : (.jpg, .jpeg, .jif, .jfif)
Extension du GIF : (.gif)


Voici la balise qui permet l'intégration d’images à un document HTML : <IMG>
Cet élément possède plusieurs attributs afin de pouvoir modifier la taille, l’emplacement, ou la bordure de l’image.

Principaux Attributs de <IMG>
Balise Effet Syntaxe
SRC Chemin d'accès et nom du fichier (URL de l'image) SRC="virtuose.gif"
BORDER Permet d’ajouter une bordure à son image (mesure en Pixels) border=1
ALT Affiche un texte alternatif dans le cas où l’image ne s’affiche pas alt="Ma photo"
ALIGN Indique l’alignement de l’image ALIGN=TOP ou (Middle,Bottom,Left,Right)
HEIGHT Impose une hauteur à l’image height=60 (pixels ou pourcentage)
WIDTH Impose une largeur à l’image width=60 (pixels ou pourcentage)
HSPACE Créé un espace blanc à droite et à gauche HSPACE=8
VSPACE Créé un espace blanc en haut et en bas VSPACE=5

 

<img src="logocool.gif">

Affiche de l’image logocool.gif sans définir sa position, sa taille ou une bordure. Par défaut, il n’y aura pas de bordure, la taille sera la taille naturelle de l’image, et la position sera déterminée par le reste du document.

 

<img src=" logocool.gif" border=1 alt=" petit logo" align=Left Height=80%>

Ici, une petite bordure apparaîtra, l’image sera disposée à gauche de l’écran, sa taille sera réduite de 20%, et l’image sera remplacée par "Petit Logo" si elle ne se charge pas.

 

Couleurs

Les codes de couleurs Hexadécimales permettent d'utiliser une très large gamme de couleurs différentes. Le code est composé de lettres et de chiffres. Le tableau qui suit relate quelques uns de ces codes. Ainsi, on peut définir la couleur du texte(ou portion de texte), des liens, ou de l'arrière plan. Il est aussi possible d'écrire directement le nom de la couleur en anglais, toutefois pour aller chercher des teintes plus subtiles le code hexadécimal demeure très utile. Il y a donc plus de 16 millons de couleurs théoriquement disponibles. Plus d'informations sur ce sujet

Tableau de quelques couleurs Hexadécimales :

Bleu #0000FF   Lime #00FF00
Blanc #FFFFFF   Olive #808000
Noir #000000   Jaune #FFFF00
Rouge #FF0000   Marine #000080
Vert #008000   Vert pâle #008080
Argent #C0C0C0   Aqua #00FFFF
Gris #808080   Marron #800000
Fuchsia #FF00FF   Violet #800080

haut de la page

   Utilisation de logiciel de création

Il est possible de coder en HTML avec Bloc Note toutefois, certains logiciels facilitent la création de page en offrant plusieurs options automatiques. Le travail devient alors plus facile notament à cause de la fenêtre qui permet de voir le résultat tel que le fureteur Internet l'affiche. Par exemple, ces logiciels permettent l'insertion simplifiée de tableaux sur une page Web. Voici un exemple de fonction présente dans le logiciel Dreamweaver MX de Macromedia:

 
Cette fonction créé automatiquement un tableau comportant 18 rangées, 26 colonnes, et le tableau occupera 90% de la largeur de l'écran. De plus, il spécifie une bordure de taille "2", un espacement entre le contenu des cellules et son encadrement de 4 pixels, et l'épaisseur de la grille intérieure de "2".
Évidemment ces chiffres sont énormes. L'utilisateur aura rarement voire jamais à utiliser un tableau si complexe. Par contre, cette fonction fait apparaître un tableau dans lequel il ne reste qu'à disposer les données. Ce procédé demeure beaucoup plus rapide que le codage ligne par ligne d'un tableau.
 
 

 

Plusieurs logiciels de programmation HTML demeurent disponibles gratuitement sur Internet. D'autres logiciels qui réclament être pour usage professionel possèdent une licence payante. Les logiciels les plus faciles à utiliser sont ceux qui offrent la possibilité de faire la création des pages web en mode visuel. Le Web offre une large gamme de produits. Des sites tels que Download.Com,et Tucows.Com offrent la possibilité de télécharger des logiciels gratuitement ou pour une période d'essai.

Voici une liste de certains éditeurs HTML populaires sur Internet
WebExpert Essai gratuit de 30 jours
WebExpert est un excellent éditeur HTML en français. Il possède un visionneur interne mais il ne supporte pas la création en mode visuel. Facile à utiliser pour les néophytes. Aussi, il dispose de plusieurs options pour le développement avancé. (feuilles de styles, support PHP, JavaScripts) Il possède aussi un large éventail de scripts intéressants accessible aux débutants.
Frontpage
Présent dans la suite Office Developper de Microsoft
Frontpage est un excellent logiciel pour apprendre à créer des documents html. Il s'occupe très bien des fonctions HTML de bases comme l'insertion d'images. De plus, il permet de voir les liens entres les différentes pages d'un site. Cela peut être utile lorsque l'on construit un site volumineux.
Dreamweaver
Onéreux
Macromedia offre une panoplie de logiciels pour le développement d'application web. Dreamweaver s'établit comme un outils professionel dans la création de fichier HTML.
1st Page
Gratuit
Ce logiciel n'utilise pas la création en mode visuel. Il permet énomément de flexibilité et garde le code propre de tout ajouts indésirés qui peuvent survenir avec un éditeur en mode visuel (WYSIWYG). Par analogie, ce logiciel serait comme la conduite automobile manuelle puisqu'elle permet un meilleur contrôle de son véhicule.

http://www.evrsoft.com/1stpage/

CoffeeCup HTML Editor
Version d'essai Gratuite 45 jours
Ce logiciel semble être un outils populaire. Il possède une banque de scripts en DHTML impressionnante. Il semble être moins facile d'accès.

Allez-y, laisser votre créativité à l'oeuvre! Le Html c'est pas sorcier!

haut de la page



Évaluer cette capsule sur 5
1. 2. 3. 4. 5.
- --++ +

HEC Montréal