creation d une page web

8/3/2019 Creation d Une Page Web

1/28

Cration des pages web 1

Creation dune page Web

Par Romica TRANDAFIR

Table des matires

4. Cration des pages web...................................................... 24.1. Prsentation gnrale du langage HTML...........................................................................2

4.2. Les principales balises du langage HTML.........................................................................24.3. Les listes ..................................................................................................................................44.4. Les liens...................................................................................................................................5

4.1.1. Lien externe.....................................................................................................................5

4.1.2. Lien local.........................................................................................................................64.1.3. Lien mixte........................................................................................................................6

4.5. Insertion des images ..............................................................................................................7

4.6. Le fond (background)............................................................................................................94.7. Les tableaux............................................................................................................................9

4.7.1. Le contenu des cellules dun tableau ........................................................................10

4.8. Les frames .............................................................................................................................104.9. Langages spcialiss en rdigeant des pages web..........................................................124.10. Conseils finals utiles..........................................................................................................12

4.11. Cration dun site Internet................................................................................................124.11. Application..........................................................................................................................13

Fichier EX.HTM........................................................................................................................16

Fichier TABLEAUX.HTM......................................................................................................18Fichier FRAMES.HTM............................................................................................................20Fichier DEP.HTM .....................................................................................................................21

Fichier AUF.HTM.....................................................................................................................22Fichier FRANAIS.HTM........................................................................................................22Fichier ANGLAIS.HTM ..........................................................................................................23

Fichier IMAGES.HTM.............................................................................................................24Fichier PH11.HTM....................................................................................................................25Fichier PH21.HTM....................................................................................................................25

Fichier PH22.HTM....................................................................................................................26

Fichier LISTECA.HTM ...........................................................................................................26Bibliographie...................................................................................................................................28


2/28

2 Utilisation des ordinateurs

4. Cration des pages web

Un site Internet est un ensemble de pages web, relies entre elles,gnralement consacres un sujet dtermin, et qui sont portes la libreconnaissance de la communaut des internautes. Un site Internet constitue l'outil leplus moderne de communication et de publication.

Pour la ralisation dune page web on a besoin dun langage specialis, le

langage HTML (Hyper TextMarkupLanguage).

4.1. Prsentation gnrale du langage HTML

HTML (HyperTextMaker Language) est le langage universel utilis pourcommuniquer sur le Web. Linformation sera transporte sur Internet, pour aboutirsur l'ordinateur dun lecteur grce un programme appel navigateurou browser.Un browser permet de surfer sur le Net et d'afficher sur cran les "pages" qu'il a

interceptes. Il y a beaucoup de marques et de types de browsers diffrents.Les plus connus sont Netscape et Internet Explorer de Microsoft mais il en existe beaucoup

d'autres. Chaque browser a sa propre faon de travailler.Html est un langage universel qui s'adapte toutes les plates-formes que cesoit Windows, Macintoch, Unix, OS/2...

Dans le texte de la page il faudra inclure des instructions pour le browserde celui-ci. Ces instructions seront diffrencies de texte par les signes < et > parexemple . Ces "instructions" s'appellent des tags ou des balises.Les balises de la page HTML marquent une action pour le browser et prcisent lesmodalits de faire cette action par les attributs.

Le langage Html tant un ensemble de balises et d'attributs, il parat utilede les passer en revue.

4.2. Les principales balises du langage HTML

Pour dfinir un document HTML ayant un titre et un corps on utilise les balises outags suivantes :


3/28


Balise Action le dbut d'un document de type HTML la fin d'un document de type HTML

le dbut de la zone d'en-tte

la fin de la zone d'en-tte le dbut du titre de la page

la fin du titre de la page le dbut du document proprement dit

la fin du document proprement dit

Remarques :1. chaque balise de dbut d'une action, soit , correspond (en toute logique)

une balise de fin d'une action 2. les balises ne sont pas "case sensitive" (par exemple, les formes suivantes sont

quivalentes : , , ).

Pour introduire un texte sous le format voulu on emploie les balises

Type En anglais Balises ActionsGras Bold Dbut et fin de

zone en gras

Italique Italic ; < /EM> Dbut et fin dezone en italique

Taille decaractre Font size Dbut et fin dezone avec cettetaille

Couleur decaractre

Font color

Dbut et fin dezone en couleur

A la ligne Line break
Aller la ligneCommentaires Comments Ne pas afficher

Centrage Center Centrer

Remarques.1. Le mme browser ne tient compte que d'un seul espace entre les mots.

Exemple :

texteen bleu est quivalent texteenbleuAttention lutilisation des balises imbriques. Ainsi ... estcorrect et ... risque de vous crer des ennuis.

2. La taille dans peut tre indique de deux faons :a) avec un nombre de 1 7. La valeur par dfaut tant 3.b) de faon relative par rapport la valeur par dfaut (ici 0). Soit -3 -2 -1 0 +1

+2 +3.3. Quelques codes des couleurs sont donnes dans le tableau


4/28


Couleur Code Couleur CodeBleu #0000FF Blanc #FFFFFFRouge #FF0000 Gris clair #C0C0C0

Vert #00FF00 Violet #8000FF

Jaune #FFFF00 Noire #000000

Pour introduire une citation ayant un lger retrait gauche et droite onutilise le tag .

La balise ... affiche un texte dit prformat. Le browserprend ainsi en compte tous les espaces et sauts de ligne dfinis l'cran. Parexemple :

U t i l i s a t i o n d e s o r d i n a t e u r

Le tag ... est utilis pour indiquer une adressepostale (gnralement en fin de document).Exemple :Universit Tchnique de Constructions

Bdoul Lacul Tei, 124, Bucarest 2 , Ro 72302

La balise texte souligne le texte.

Par la balise ... on introduit un texte clignotant.

Les tags ... et ... placent le texterespectivement en indice et en exposant.Ainsi, indexbasepuissence aura comme rsultat

indexbasepuissence .

Pour aligner du texte, on a utilis l'attribut ALIGN ou le tag . Ilexiste une balise permettant d'aligner diffrents lments. C'est le tag :

... ......

4.3. Les listes

Tout document d'une certaine consistance se doit de prsenter, par exempledans la table des matires, le s diffrents niveaux de son expos. Html disposed'outils spcialement conus cet effet. Le tableau ci-dessus les prsentes.


5/28


Pour crer En anglais La balise ActionEn-ttes [Heading] avecn=1 6

Afficher un en-ttede niveau n etsauter une ligne

Liste non-ordonne [Bullet list] Afficher le textesous forme d'uneliste non-ordonne.

Liste ordonne [Numbered list] Afficher le textesous forme d'uneliste ordonne.

Elment de liste [List items] Voici un lmentde la liste

Paragraphe [Paragraph]
Saut de ligne,insrer une lignevierge etcommencer unparagraphe
4.4. Les liens

Html est un langage hypertexte (et hypergraphique) qui permet en cliquantsur un mot, gnralement soulign (ou une image) de transporter :

vers un autre endroit du document vers un autre fichier Html situ sur le mme ordinateur vers un autre ordinateur situ sur le Web.

Ce systme d'hypertexte est pareil comme les fichiers d'aide de Windows.Ce sont les liens qui permettent de surfer de page en page qui constituent l'essencedes documents Html.

La syntaxe de ces liens entre plusieurs pages, est simple mais entranera denombreux commentaires :...

4.1.1. Lien externe

Tout ordinateur situ sur le rseau Internet possde une adresse ou uneURL (Universal Ressource Locator). Html permet d'accder toutes les machineset toutes les ressources du Net. Ces sont les adresses du type :http://serveur/chemin.../fichierftp://serveur/chemin.../fichiermailto:utilisateur@hte


6/28


4.1.2. Lien local

L'organisation classique et plus que conseille d'un site Web consiste regrouper l'ensemble des lments de celui-ci (fichiers htm, images, ...) dans unmme rpertoire. On pourrait ainsi "transporter" aisment un site pour le prsentersur un autre ordinateur et le charger sur un serveur. Cette faon de procder est laplus aise et vitera pas mal de problmes. L'adresse du lien sera alors toutsimplementfichier.htm

4.1.3. Lien mixte

On entend par-l un lien vers un fichier situ un autre ordinateur quecelui qui contient le site. Il est peut probable que le serveur Web qui hbergera lesite, possde la mme arborescence que le disque local. L'adresse prendra la forme

file:///lecteur:/rpertoire/fichier.htm(en adressage absolu)../../../fichier.htm (en adressage relatif).

Cette matire d'adressage absolu et relatif dpasse le cadre du ce cours et ilest indiqu de consulter la documentation relative ce sujet.

Des liens peuvent aussi pointer vers un endroit prcis du mme document ou d'unautre fichier. C'est ce qu'on appelle les ancres, ancrages oupointeurs [Anchor].

Lien La balise Effet

Point d'ancrage ... Ceci est une cibleVers une ancre dansla mme page

... Lien vers la cible ***dans la mme page

Vers une ancre dansune autre page

... Lien vers la cible ***dans une autre page

Rgle pratique

Plusieurs liens l'intrieur d'un mme document supposent que ce

document prsente une certaine longueur sinon une longueur certaine (et donc untemps de chargement assez long). Ainsi, on prfrera gnralement cettetechnique le dcoupage d'une longue page en un ensemble de plusieurs pages dedimension plus rduite.


7/28


4.5. Insertion des images

Il y a deux formats d'image reconnus sur le Web, qui sont le format GIF(version 89a) et le format JPEG. Pour le format GIF (maximum 256 couleurs), onretiendra la caractristique "entrelac" qui permet de charger progressivementl'image lors de l'ouverture de la page. Ces deux formats donnent des rsultats assezquivalents bien que JPG soit plutt recommand pour des images avec des tonsnuancs ou dgrads.

Plus l'image sera grande, plus le temps de chargement sera long... au risquede dcourager les visiteurs de la page. Si cela est possible, une image en 16couleurs peut trs bien faire l'affaire. On peut prsenter une petite image indiquant

un lien vers l'image complte.Pour insrer une image qui se trouve ladresse de limage le codeHTML est

Le tableau suivant donne les attributs de la balise IMG

Action Attribut Effet

Texte alternatif alt="****" Pour les browser n'ayant pas l'option "image"active

width=?Dimensionsheight=?

Hauteur et largeur (en pixels)

Bordure border=? (en pixels)

align=topalign=middle

align=bottonalign=left

Alignement

align=right

Etablie la position

4.5.1. Commentaires

En Html, l'image ne fait pas partie de document. Le browser va la chercher

l'adresse indique. Gnralement, on place les images dans le mme rpertoireque les pages Html.Le fait d'utiliser la mme image plusieurs reprises dans un fichier Html

ne modifie en rien sa taille.Prvoir un texte pour les browsers n'ayant pas l'option image active,

permet au lecteur de ne pas perdre le fil de l'expos.Il est important pour la fluidit de l'affichage de prciser la taille en hauteur

et largeur de l'image car le browser peut ainsi connaissant l'emplacement rserverpour celle-ci, continuer afficher le texte. Cette information est donne par PaintShop Pro.


8/28


4.5.2. L'attribut Align

L'attribut align positionne l'image par rapport au texte :Exemple.Fichier d'adresseFichier d' adresseFichier d' adresse

4.5.3. Lien sur image

Les balises sont :

En cliquant sur l'image, on ouvre un fichier nomm "UTCB".Remarquons que les images cliquables sont entoures d'une bordure.

4.5.4. Les sparateurs

Les browsers intgrent un outil de mise en forme intressant pour clarifierla prsentation du texte. C'est la ligne horizontale.

La syntaxe en est simple:

Sparateur En anglais Balise Effet

Ligne horizontale Horizontal Rule Insrer une ligne horizontale

Ce tag simple, permettra de comprendre un peu mieux le fonctionnementdu navigateur. D'abord, vous avez dj dcouvert au fil de vos erreurs qu'il estplutt gentil car il s'efforce toujours d'afficher quelque chose. Ensuite, il vousmnage le travail en prenant sa charge des valeurs par dfaut d'un certain nombred'attributs. Dans le cas prsent, les valeurs par dfaut de la balise sont : unepaisseur de trait de 2 pixels, un alignement centr et une largeur de 100% de la

fentre. Vous pouvez trs bien modifier au gr de votre fantaisie les valeurs de cesdiffrents attributs

Action Balise Remarques

Epaisseur en pixels

Largeur HR width=?> en pixels en % de la fentre

gauche droiteAlignement

centr


9/28


CommentairesOn prfrera spcifier la largeur en % de la fentre plutt qu'en pixels car

l'affichage s'adaptera ainsi toutes les tailles et rsolutions d'cran.On peut prfrer l'usage d'images comme sparateur pour personnaliser

louvrage.

4.6. Le fond (background)

Le langage Html permet d'agrmenter la prsentation du document d'unarrire-plan [background] color ou compos d'une image. Ce qui apporte un

lment "artistique" la page. Les balises sont donnes dans le tableau suivant.

Etablir BaliseCouleur du fond

Texture du fond

Il y a des balises pour modifier les couleurs utilises par dfaut par lebrowser pour le texte et les liens (voir le tableau suivant).

Couleur de Balise

Couleur de texte

Couleur de lien

Lien actif


10/28


Elment modifier BaliseL'espace entre les cellules ou l'paisseurdes lignes du quadrillage

L'enrobage des cellules ou l'espace entre lebord et le contenu

La largeur de la table

4.7.1. Le contenu des cellules dun tableau

Les cellules dun tableau peuvent contenir tous les lments Html djpasss en revue soit :

du texte des images des liens des arrire-plans

et mme des tableaux.On peut modifier les cellules en utilisant les balises suivantes.

Modification Balise Remarque

En pixelsLargeur d'une cellule

en pourcentageFusion de lignes TD rowspan=?>Fusion de colonnes

On peur arranger le contenu du tableau par les balises :

Arrangement Balise Remarque

HorizontalementLigne de tableau Verticalement

HorizontalementCellule de tableau Verticalement

Couleur de la cellule

4.8. Les frames

Pour diviser l'cran en plusieurs fentres, sont utilises les balisessuivantes.


11/28


Arrangement Balise Dfinition Dbut de zone avec des fentresZone avec desfentres Fin de zone avec des fentres

FRAMESET ROWS="..."> Fentres horizontalesAgencementdes fentres Fentres verticales

Attention! remplace Pour dfinir les caractristiques dune fentre on utilise les attributs de la

balise FRAME.

L'attribut ROWS="hauteur1,hauteur2,...,hauteurN" dfinit la hauteur desdiffrentes fentres en cas de division horizontale. La hauteur s'exprime en pixels

ou en %. Dans ce cas, on veillera ce que le total soit gal 100%.Le mme pour un agencement vertical.

L'attribut COLS="largeur1,largeur2,...,largeurN" dfinit la largeur desdiffrentes fentres en cas de division verticale. La hauteur s'exprime en pixels ouen %. Dans ce cas, on veillera ce que le total soit gal 100%

Pour remplir une fentre on utilise lattribut SCR . La syntaxe de cetattribut est SRC="URL", o URL donne ladresse du document afficher dans lafentre.

Une barre de dfilement dans une fentre est indique par lattribut

SCROLLING.SCROLLING="yes/no/auto" indique si la fentre doit ou non possder une barrede dfilement.

Un autre attribut de cette balise est NAME="NOM". Nameindique le nom de la fentre de telle sorte que cette frame puisse tre utilisecomme cible d'un lien hypertexte.

L'attribut TARGET peut aussi prendre certaines valeurs prdfinis :

_blank qui indique au browser qu'il doit crer une nouvelle fentre afin d'yafficher le fichier. Dans ce cas, on ouvre en fait un nouveau browser.

_self qui indique que le fichier sera charg dans la mme fentre que celledans laquelle se trouve le lien.

_top qui implique l'affichage du fichier sur toute la surface de la fentre dubrowser.

Par dfaut, les cadres sont spars par des bordures. Il est possible desupprimer ces bordures mais les attributs utiliser diffrent selon Netscape ouInternet Explorer. Netscape utilise l'attribut "border=0" et Explorer, les attributs"frameborder=no" et "framespacing=0" (pour enlever l'espace entre les cadres). Letout cohabite sans problme. La balise devient alors par exemple


12/28


Il y a pour terminer la balise ... qui estutilise pour indiquer le texte que doivent afficher les browsers incapables de grerles frames. Il est mme indiqu de prvoir une page sans fentres pour que cesvisiteurs puissent profiter quand-mme de site.

4.9. Langages spcialiss en rdigeant des pages web

Il y a des langages spcialiss en rdigeant des pages web, par exemple :Dreamweaver, FrontPage 2000, WebExpert 4.0, Adobe Golive, Na mo, WebEditor,Netscape, Composer, FrontPage, Express, HotDog, Webfast, HotMetal, HomePage,

PageMill, 1st Page 2000, CoffeeCup HTML, HomeSite.

4.10. Conseils finals utiles

Il faut tester la fin de la cration dune page web les suivantes :

Tous les liens sont-ils bien dfinis? Toutes les images sont-elles bien prsentes? Que se passe-t-il avec un browser diffrent? Si le site change d'emplacement? Que se passe-t-il avec une autre rsolution d'cran?

4.11. Cration dun site Internet

En cration dun site Internet il est mieux de suivi les tapes ci-dessous :

Trouver un contenu ; Structurer le contenu :La ralisation d'un site est que chaque page Html ne peut dpasser 3 5 crans,pour des raisons de temps de chargement et de lisibilit. Il faudra donc dcouper lecontenu en pages et sous-pages (qui ne correspondront pas forcment auxchapitres). Ensuite il faudra relier ses diffrentes pages de faon logique afin que le

lecteur puisse naviguer avec aisance dans le site.Des petits repres graphiques rendront cette navigation plus intuitive pour le

lecteur. On prvoit gnralement sur chaque page, un retour vers la page d'accueilou table des matires pour venir au secours des lecteurs gars ou encore ceux (etcela arrive plus souvent qu'on le pense) qui entrent dans le site par le thme d'unepage dtermine. Communiquer avec le publicCommuniquer avec des mots, des couleurs, la mise en page et les images. L'auteurd'un site Web se voit confront avec la forme la plus aboutie de ce qu'on appelle la


13/28


communication. Sobrit des mots et de la prsentation graphique, concision,efficacit seront les lments dterminants. Mais ce ne sera pas forcment la rgle

Connatre le langage HtmlLe Web parle en langage Html. Il n'empche que mme avec le meilleur diteur,vous devrez tt ou tard plonger dans le code source Html. C'est pourquoi unebonne connaissance du Html se rvlera trs vite comme indispensable.

Avoir quelques connaissances graphiquesLa bonne connaissance d'un logiciel comme Paint Shop Pro, est une bonneintroduction en matire de traitement graphique.Le temps de chargement dune page, que la plus petite image correspond une ouplusieurs pages de texte. L'utilisation des images, aussi indispensable soit-elle pourla prsentation, est donc toujours un compromis.

4.11. Application

Nous allons faire un site en appliquant les questions prsentes ci-dessus.On utilise lditeur MS DOS pour rdiger le fichier HTM avec les instructions pour obtenir ce site. Les commentaires expliquent les actions faites pour obtenir lesite.


14/28



15/28



16/28


Les fichiers suivants contiennent les instructions pour raliserlexemple ci-dessus.

Fichier EX.HTM

Creation d'un site

Construction d'un site

Un site Internet est un ensemble de pages web,

Wi reliees entre elles,et constitue l'outil le plus moderne de communication et de publication

On peut introduire:


17/28


listes, texte, tableaux,

frames,images, liens

Nous allons montrer comment s'utilisent la plupartdes tags et leurs attributs

E X E M P L E S

Aller au document qui present les tableaux


18/28


Fichier TABLEAUX.HTM

Tableaux

Aller a l'ecran precedent

Presentation generale del'UTCB

Univesite Technique de Constructions

Facultes

Genie Civil


19/28


Hydrotechnique

Ponts et Chausses

Equipaments

Outilages en Constructions

Geodesie

Departament de sciences de

l'ingenieur

Section francaise

Genie Civil

Equipaments en Constructions


20/28


Section anglaise

Colege

universitaire

9 Sections qui ne sont pas toujours activees

Aller au document qui present lesframes

Fichier FRAMES.HTM

Frames vericales


21/28


Fichier DEP.HTM

departement


Departement de Science de l'Ingenieur

Aller a la presentation desimages


22/28


Fichier AUF.HTM

auf

Le sylabus

Fichier FRANAIS.HTM

francaise

Section francaise

Premier annee

Analyse Mathematique I, II Algebre lineaire I, II Chimie Topographie Geometrie descriptive Utilisation des ordinateurs


23/28


Langues etrangeres Mecanique I Physique des constructions I Materiaux de constructions Genie graphique I Sport

Deuxieme annee

Mathematiques Avancees Physique des constructions II Resistence des materiaux Statique Hydraulique Langues etrangeres Mecanique II Analyse Numerique Langages de programmation Genie graphique II Sport

Fichier ANGLAIS.HTM

anglaise


24/28


Section Anglaise

First year

Mathematical Analysis Linear Algebra Chimie Topographie Geometrie descriptive Physics I Mechanics Programming languages

Programming languages Sports

Fichier IMAGES.HTM

Images


25/28


Fichier PH11.HTM

Photo

Aller a l'ecranprecedent

R E C T O R A T

Aller a la presentation deslistes caches

Fichier PH21.HTM

Photo

Genie Civil


26/28


Fichier PH22.HTM

Photo

Hydrotechnique

Fichier LISTECA.HTM

Listes caches>

Genie Civil Hydrotechnique Ponts et Chasses


27/28


Equipaments Outilages en constructions Geodesie Departement de Sciences d'ingenieur Colege universitaire

Merci de votre attention!

Au revoir!



28/28


Bibliographie1.Apprendre le langage HTML, Van Lancker Luc, http://www.ccim.be/ccim328/html 2000.2. Crez vos propres sites Web , Pete Muller, Ed. Data Becker GmbH&co. KGDusseldorf, Micro Application Paris, 1999.3.HTML The Definitive Guide, Chuck Musciano & Bill Kennedy, Ed. OREILLYBeijing Cambridge Koln Paris Sebastopol Taipei Tokyo, Third Edition, 1998.

creation d une page web

Documents