![Page 1: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/1.jpg)
CréationCréation d’une page d’une page
WebWeb
Natacha EspinosaNatacha Espinosa8 Octobre 20048 Octobre 2004
ED 268 : Savoir- Faire
![Page 2: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/2.jpg)
Création d’une page WEBCréation d’une page WEB
Prévoir la disposition du contenu
Prévoir les différents liens possibles entre les pages
Connaître les bases du langage HTML
![Page 3: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/3.jpg)
Il existe de nombreux logiciels de création deIl existe de nombreux logiciels de création depage WEB mais la connaissance du langage page WEB mais la connaissance du langage HTML permet une plus grande autonomie de HTML permet une plus grande autonomie de création.création.
OBJECTIFS DE LA JOURNEE
– Découvrir les bases du langage HTML (CM)
– Appliquer les connaissances à la création de pages simples (TD)
![Page 4: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/4.jpg)
IntroductionIntroduction
Le langage HTML (HyperText Markup Language)
C’est un langage de description (ou de formatage) de
Documents.
Ce n’est pas un véritable langage de programmation
Il décrit les structures logiques d’un document : il a une grammaire, une syntaxe et un vocabulaire.
C’est un langage à balises (ou tag)
![Page 5: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/5.jpg)
Un langage de descriptionUn langage de description
Les éléments d’une structure logique d’un document sont :– Les textes,– Les titres,– Les images,– Les liens,– Les chapitres,– Les éléments multimédias (son, vidéo, etc.)
![Page 6: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/6.jpg)
Le langage HTMLLe langage HTML
Le langage HTML est issu du langage SGML (Structured Generalized Markup Language, 1969)
Il existe différentes versions du langage en fonction de son évolution : HTMLversion 2.O, 3.0, 3.2 et 4.0.
HTML est le langage le plus présent sur le World Wide Web.
Il se concentre essentiellement sur les fonctions d’hypertexte. Il est facile à apprendre.
![Page 7: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/7.jpg)
Pour créer des pages WEB, il n’est pas nécessaire d’être connecté sur le WEB
Deux programmes sont nécessaires :– Un éditeur de textes (Bloc Note);– Un logiciel de navigation (Internet explorer,
Netscape Navigator …)
![Page 8: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/8.jpg)
Description d’un document html Description d’un document html (1)(1)
– HTML est un langage permettant de mettre en forme du texte, des images, du sons, etc. (la liste s’allonge presque tous les jours) destinés à être visualisés grâce à un navigateur (les plus connus étant Microsoft Internet Explorer Netscape Navigator, HotJava de Sun, on pourrait en citer d’autres comme Mosaïc de SpyGlass, etc.).
![Page 9: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/9.jpg)
Description d’un document htmlDescription d’un document html(2)(2)
– Ce langage de description de page utilise des tags - ou balises - pour spécifier la façon dont un élément doit apparaître, pour afficher des images ou définir des actions. C’est une façon de formater le texte.
– Ces tags sont spécifiés par des chevrons “<” et “>” et agissent très souvent par paire : la première spécifie le début d’application du style (ou de l’action), la seconde, qui comporte le signe “/”, marque la fin d’application du style (ou de l’action).
Ex : <b> cette partie du texte sera écrite en gras </b> mais pas celle-ci.
![Page 10: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/10.jpg)
Description d’un document htmlDescription d’un document html(3)(3)
– Remarque : les balises peuvent être saisies indifféremment en majuscule ou minuscule, tous les éditeurs de documents html, ainsi que les navigateurs, reconnaissent les deux type de syntaxe.
– L’utilisation des minuscules ou majuscules est donc un choix personnel, qui doit rester cohérente.
On évitera : *<B> blablabla </b>
![Page 11: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/11.jpg)
Conception : objectifs Conception : objectifs générauxgénéraux
Objectif du site = QUOI Objectif de conception = COMMENT
– Critères ergonomiques– Critères d ’évaluation quantifiables– Exemples et applications
« L’utilisateur doit toujours percevoir ce qu ’il y a à explorer »
« L’utilisateur doit toujours savoir où il se trouve »
![Page 12: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/12.jpg)
Conception d’un siteConception d’un site
6 étapes– Spécifier Objectifs généraux de conception– Conception structure du site– Conception navigation dans le site– Conception du contenu des pages– Conception de la présentation de la page
d ’accueil– Conception de la présentation des autres pages
![Page 13: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/13.jpg)
Conception : structure (1)Conception : structure (1)
Définir la structure et organisation générale des informations à représenter. – Principe récursif partant de la page d ’accueil :
Identifier toutes les pages accessibles depuis une page
Identifier les liens entre pages identifiées et de même niveau
![Page 14: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/14.jpg)
Conception : navigation (1)Conception : navigation (1)
Fournir une description des moyens offerts pour se déplacer dans la structure du site
Très important car équivalent aux processus de manipulation des objets réels
Définit la navigation possible et autorisée dans le site
![Page 15: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/15.jpg)
Principe – Pour chaque bouton, lien, forme cliquable, lister les
effets perçus par l ’utilisateur– Déterminer le sens à donner (back, top, front, …) et le
type à utiliser (bouton, hypertext, menu, …) 3 formes de navigation
Globale : navigation présente sur chaque page Parallèle : navigation entre pages sœurs Locale : navigation à l’intérieur d ’une page
![Page 16: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/16.jpg)
Conception : navigation (2)Conception : navigation (2)
Caractérisation de la navigation Hiérarchisée = arborescence sous forme d ’arbre
– Navigation globale et parallèle Linéaire = contraignante
– Navig. globale réduite à un lien vers la Home Page– Navig. parallèle réduite à suivant et précédent
Linéaire avec des choix– Pb signification du back (en fin …)
Hiérarchique et linéaire combinée– Linéarité pour succession de chapitres, – Hiérarchisation pour les sous-chapitres
Toile d ’araignée = liberté absolue, pas de structure
![Page 17: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/17.jpg)
Conception : contenuConception : contenu
Définir la nature des informations et leurs arrangements
OutilsStory BoardAnalogie aux journaux : titre + description
brèveAnalogie aux brochures : tables des matières
+ liens sur la page
![Page 18: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/18.jpg)
RemarquesLecture fatiguante = nb caractères limités
(2500 pour un article important OnLine)Vérifier compatibilité avec l ’impression
(format A4)– S ’assurer de la clarté du message pour
l ’utilisateur visé (vocabulaire, abréviations -lexique?-, …)
![Page 19: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/19.jpg)
Conception : page d’accueilConception : page d’accueil
– 1ère page à concevoir Soucis de cohérence interne Explique et couvre complètement le contenu du site
– Doit ... Respecter les requis non fonctionnels Tenir compte des spécifications techniques (liens sur
plugins) Etre évaluée sur écran ! C’est une étape capitale qui requiert le collaboration de tous
les membres de l ’équipe
![Page 20: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/20.jpg)
Écrire et visualiser Écrire et visualiser une page HTMLune page HTML
Nous allons écrire une page HTML dans un éditeur de texte (Bloc notes)
[Démarrer/Programmes/ Accessoires/Bloc notes]
En parallèle, nous allons visualiser cette page dans un navigateur (Internet Explorer)
![Page 21: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/21.jpg)
Description d’un document htmlDescription d’un document html(3)(3)
<html>
</html>
<head>
</head>
<body>
Texte du document
</body>
En-tête
Corps
Structure d’une page HTMLStructure d’une page HTML
![Page 22: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/22.jpg)
Présentation des Tags Présentation des Tags les plus courantsles plus courants
<b> gras </b><i> italique </i><u> souligné </u><strike> texte barré </strike> <center> texte centré </center> ( de même <right> <left>)<H1> Titre de niveau 1 </H1> (il existe 6 niveaux, 6 étant le plus faible
niveau)<br> retour à la ligne<p> paragraphe<hr> insertion d’une ligne horizontale( ce tag peut avoir un attribut largeur <hr width=« 16% » et largeur de
ligne ex = <hr size=3>)
![Page 23: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/23.jpg)
Créer une liste numérotée :
<ol>
<li> point n°1 </li>
<li> point n°2 </li>
</ol>
Créer une liste à puces :<ul> <li> 1er point </li><li> 2ème point </li></ul>
Présentation des Présentation des Tags les plus Tags les plus
courantscourants
1. Point n°1
2. Point n°2
• 1er point
• 2ème point
![Page 24: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/24.jpg)
•Les Tags peuvent se combiner mais il est préférable de conserver l’ordre des instructions :
Ex : <H1><i><u> texte </u></i></H1>
Et non * <H1><i><u> texte <H1></u></i>
![Page 25: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/25.jpg)
Les liens dits relatifsLes liens dits relatifsLes liens permettent de passer d’une page à une autre
si celles ci se situent dans le même dossier.
Avant de concevoir les liens, il faut penser à la structure de
son site.
Exemple :
Mon_site Ma_page.html (avec des liens vers les deux fichiers)
Mes_publication.html
Mon_CV.html
![Page 26: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/26.jpg)
Les liensLes liens
• Insérer une image : <img src= « fichier_image.jpg » >
Ce tag peut aussi avoir des attributs : ex: <img src=«…» border=X align= X >
• Insérer un lien :
vers une page2 : <a href= « ma_page2.html » > lien vers page2 </a>
Vers une page Web : <a href= «http://… » > lien vers une page Web </a>
vers une adresse électronique : <a href=« mailto:[email protected] »> </a>
![Page 27: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/27.jpg)
Les liensLes liens
Pour insérer un pointeur (lien hypertexte-hypermédia), il faut indiquer une référence (appelée URL pour Uniform Ressource Locator) et un élément, texte ou image, visible à l'écran sur lequel on doit cliquer pour y accéder. Voici un exemple de code pour obtenir un pointeur:
<A HREF="dossier/menu_du_jour.HTML">Menu du jour</A> Le pointeur apparaît alors en couleur contrastée et souligné dans le
navigateur. Il suffit ensuite de cliquer sur le texte Menu du jour pour activer le lien vers le fichier spécifié "dossier/menu_du_jour.HTML">. Le lien ne sera plus actif après le tag de fermeture </a>.
![Page 28: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/28.jpg)
Pour créer un pointeur, il s'agit tout simplement de définir le type de document dans la commande A HREF comme dans les exemples qui suivent:
Site HTTP (WWW)– Le code:<A HREF="http://WWW.fsaa.ulaval.ca">Serveur
WWW de la FSAA</A>donne accès à un serveur WWW, notamment à celui de la Faculté des sciences de l'agriculture et de l'alimentation de l'Université Laval.
Site FTP– Le code:<A HREF="ftp://ftp.apple.com/pub">Site FTP de la
compagnie Apple</A>donne accès à un dossier public sur un serveur FTP de la compagnie Apple inc.
![Page 29: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/29.jpg)
Faisons un petit test…Faisons un petit test…
-Ouvrez l’éditeur de textes :
Bloc- notes (Démarrer/Programme/Accessoires)
- Puis, un navigateur (ex :IE)
![Page 30: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/30.jpg)
<html><head>
<title> Ma page WEb</title></head><body><center> <H1> <u> Ma page Web </u> </h1> </center><br><ul>
<li><i>Mes coordonnées </i></li><br><div align=right> Dupont laurent<br> 4 allée des platanes<br> 65087 monvila
<br><a href="mailto:"[email protected]">Mon adresse électronique </a>
</div><li><b>mon CV </b></li><li><strike>mes domaines de recherche</strike> </li><li><a href=« publication.html »>Mes publications </a> </li>
</ul><hr size=7><H5>dernière mise à jour Octobre 2002 </H5><hr></body></html>
![Page 31: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/31.jpg)
Ajoutons un peu de Ajoutons un peu de mise en formemise en forme
Ajoutez des attributs au Tag <body> :Couleur de fond : <body bgcolor=[couleur]>Du corps du texte : <body text=[couleur]>Des liens visités : <body vlink=[couleur]>
Ces attributs peuvent se combiner :Ex : <body bgcolor=[couleur] text=[couleur] vlink=[couleur]>
Définir des couleurs pour des élémentsparticuliers de la page :<font color=[couleur]> texte </font>On peut travailler la mise en forme de la police :<font size=[nombre de 1à7 avec 3 la taille par défaut]> texte </font>
![Page 32: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/32.jpg)
<html><head>
<title> Ma page WEb</title></head><body bgcolor=blue Text=silver vlink=red><center> <H1> <u> Ma page Web </u> </h1> </center><br><ul>
<li><i>Mes coordonnées </i></li><br><div align=right><font color=black size=6> Dupont laurent</font><br><font color=green size=4> 4 allée des platanes<br> 65087 monvila<br><a href="mailto:"[email protected]">Mon adresse
électronique </a></font></div>
<li><b>mon CV </b></li><li><strike>mes domaines de recherche</strike> </li><li><a href=publication.html>Mes publications </a> </li>
</ul></body></html>
![Page 33: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/33.jpg)
Les ancresLes ancres
La commande A NAME ou ancre– La commande A NAME enregistre un point d'accès à
l'intérieur d'un document HTML. On peut parler de lien interne au document.
Par exemple si on souhaite permettre à l’utilisateur de retourner à un endroit précis du document, on va spécifier cette action par les tags suivants :
<a name="hautpage"> </a> ce qui indique au navigateur où se trouve la section visée. (ici le début de la page)
Pour se rendre à cet endroit, il faut taper la référence comme ceci à différents endroits du texte :
<a href="#hautpage">Retour en haut de page</a>
![Page 34: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/34.jpg)
Quelques commandes…Quelques commandes…
– La commande <BLOCKQUOTE></BLOCKQUOTE> permet d'emprisonner un paragraphe telle une citation en alinéa
– La commande <STRIKE></STRIKE> permet de rayer un texte
– La commande <SUB></SUB> permet d'utiliser les indices dans des formules comme dans l'exemple qui suit: H 2 O. (2 sera noté en plus petit)
– La commande <SUP></SUP> permet d'utiliser les exposants dans des formules
![Page 35: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/35.jpg)
Caractères spéciaux dans HTMLCaractères spéciaux dans HTML
– Certains caractères ont une signification spécifique dans HTML.
– Pour les utiliser comme tels dans une page, il faut utiliser les commandes alternatives pour les afficher correctement à l'écran. Ces commandes sont:
< pour: < > pour: > & pour: & " pour: "
![Page 36: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/36.jpg)
À propos des accents...À propos des accents...
– L'utilisation des caractères accentués sur le WWW pose un certain nombre de problèmes car il y a plusieurs façons de traiter les caractères diacritiques.
– On peut en effet utiliser une des deux méthodes suivantes:
Les caractères référencés (entity references en anglais) Les caractères ISO Latin-1 (ISO-8859-1)
![Page 37: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/37.jpg)
Les caractères référencésLes caractères référencés
– Avec cette méthode, on utilise seulement le jeu de caractères ASCII standard.
– Ce dernier ne contient que 127 caractères (non-accentués) et n'utilise que sept bits sur les huit que contient Un octet (l'unité fondamentale permettant de représenter un caractère latin sur les ordinateurs).
![Page 38: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/38.jpg)
ImagesImages
Les navigateurs HTML reconnaissent généralement deux formats d'images; les images GIF et les images JPEG. Ces deux formats d'images sont comprimés.
– L'insertion d'une image est possible en tapant la commande suivante: <img src="images/telephone.gif">
Le segment IMG SRC indique qu'il s'agit de la source d'une image, le premier terme entre les guillemets indique le nom du dossier où se trouve la ou les images, le deuxième terme indique le nom du fichier contenant l'image et le format de celle-ci.
Une image en format GIF se termine par .GIF alors qu'une image en format JPEG se termine par .JPEG ou .JPG .
![Page 39: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/39.jpg)
TableauxTableaux
Il est possible de créer un ou plusieurs tableaux dans une page Web.
Le tableau permet par exemple d’afficher des données indépendantes les unes des autres (frames).
Commandes de baseLes commandes de base pour créer des
tableaux en HTML sont les suivantes:<TABLE> </TABLE> Cette commande est la commande principale
pour ouvrir une zone de tableaux.
![Page 40: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/40.jpg)
TableauxTableaux
· <TR></TR> Commande pour définir chaque ligne du tableau.
· <TD></TD> Commande pour spécifier les données pour chaque cellule de données.
· <TH></TH> Commande pour spécifier les cellules d’en tête du tableau.
![Page 41: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/41.jpg)
<table> <tr> <th> titre de la colonne 1</th> <th> titre de la colonne 2</th> </tr> <tr> <td> contenu dela deuxième
ligne de la colonne 1</td> <td> contenu dela deuxième
ligne de la colonne 2</td> </tr> </table>
![Page 42: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/42.jpg)
![Page 43: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/43.jpg)
Nous pouvons ajouter des attributs au Tag
<Table> afin d’appliquer une mise en forme à notre tableau :
<table border=[chiffre] bgcolor=[couleur] bordercolor= [couleur] > … </table>
![Page 44: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/44.jpg)
![Page 45: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/45.jpg)
Quelques éditeurs Quelques éditeurs
First Page Front page Publisher
Il est utile de connaître le langage HTML pour
utiliser aisément ces éditeurs.
![Page 46: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/46.jpg)
First pageFirst page
![Page 47: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/47.jpg)
![Page 48: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/48.jpg)
![Page 49: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/49.jpg)
Front PageFront Page
Front Page est un éditeur HTML intégré au pack office de Microsoft.
Très grande comptabilité avec le navigateur Internet Explorer
Interface et barre d’outils proches de celles des logiciels de Microsoft.
Éditeur complet car proche des éditeurs de type Wysiwyg (What you see is what you get)
![Page 50: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/50.jpg)
Même barre d’outils que les autres logiciels de Microsoft
3 modes d’affichage :
Composition de la page par le concepteur
La transcription en langage HTML
L’aperçu de la page (= à un navigateur)
![Page 51: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/51.jpg)
Composition de la page à l’aide des outils :
Mise en forme (proches de ceux des logiciels
Microsoft) :
Taille de caractère,
couleur,
police,
Style (cette fonction permet de choisir style titre, style liste à puce…)
Etc.
Création de liens
Insertion d’images
![Page 52: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/52.jpg)
Aperçu de la transcription HTML de la page composée
![Page 53: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/53.jpg)
Aperçu de la page dans un navigateur
![Page 54: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/54.jpg)
Créer des Tableaux avec Front Créer des Tableaux avec Front pagepage
![Page 55: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/55.jpg)
PublisherPublisher
Publisher est un programme de publication assistée par ordinateur : mise en page professionnelle
Deux possibilités : – Convertir une composition existante en une
page Web.– Créer une page Web (Assistant disponible)– Limite : pages volumineuses
![Page 56: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/56.jpg)
Utilisez l’Assistant
![Page 57: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/57.jpg)
Visualisation dans un navigateur
![Page 58: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/58.jpg)
La visualisation du langage HTML peut se faire dans le navigateur
Vous remarquerez que le codage est beaucoup plus complexe…
Une page HTML conçue avec Publisher est un peu plus volumineuse.
![Page 59: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/59.jpg)
Créer des Tableaux avec Créer des Tableaux avec PublisherPublisher
![Page 60: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/60.jpg)
Créer des FramesCréer des Frames
Les Frames permettent de diviser la zone d’affichage du navigateur en plusieurs zones de données indépendantes les unes des autres.
(un fichier HTML dans chaque Frame)
Plusieurs Frames associés s’appellent un Frameset
Soit : <Frameset>….</Frameset>
![Page 61: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/61.jpg)
Exemple de FramesetExemple de Frameset<html>
<head><title>Ma page personnelle</title>
</head>
<frameset border="0" framespacing="0" frameborder="0" rows= "25%,75%" >
<frame src="sommaire.html" name="sommaire" scrolling="none" target="principal" marginwidth=1>
<frame src="accueil.html" name="accueil" scrolling="auto" >
</frameset>
</html>
![Page 62: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/62.jpg)
Créer des FramesCréer des Frames
Les Frames ont longtemps été à la mode chez les concepteurs de sites.
Aujourd’hui, la composition à l’aide de tableau est davantage appréciée.
![Page 63: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/63.jpg)
Mettre en ligne sa page WEBMettre en ligne sa page WEB
Pour héberger votre page il suffit de s’inscrire auprès d’un fournisseur d’accès, gratuits (free.fr) ou payants.
Puis il faut transférer un dossier contenant vos pages, en utilisant un logiciel FTP (ex : FTP expert : http://www.visic.com/ )
![Page 64: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/64.jpg)
FTP ExpertFTP ExpertAdresse de l’hébergeur Identifiant et mot de passe
Pages créées dans C:
Déplacement des fichiers
Visualisation des fichiers transférés
![Page 65: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/65.jpg)
Leech FTPLeech FTP
![Page 66: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/66.jpg)
Leech FTPLeech FTP
![Page 67: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/67.jpg)
De nombreux fournisseurs proposent leur propre logiciel FTP;
Ainsi que des outils pour optimiser votre site (compteur, CGI, etc.)
![Page 68: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/68.jpg)
–Pour aller plus loin, manuels en lignes :sur le site TAL
–http://www.cavi.univ-paris3.fr/ilpga/ilpga/tal/html/index.htm
–balises HTML : http://www.cavi.univ-paris3.fr/ilpga/ilpga/tal/html/balise.htm
etc...
http://guidewebmaster.free.fr
![Page 69: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/69.jpg)
Vous possédez maintenant les outils de base pour concevoir une ou plusieurs pages Web
Quand vous serez familiarisé avec ces outils, vous pourrez ajouter des Tags dynamiques pour animer votre site
Il n’est pas nécessaire de se connecter au réseau pour créer des pages!
![Page 70: Création dune page Web Natacha Espinosa 8 Octobre 2004 ED 268 : Savoir- Faire](https://reader035.vdocuments.net/reader035/viewer/2022062511/551d9d8f497959293b8c4d4c/html5/thumbnails/70.jpg)
TD du 8 Octobre 2004TD du 8 Octobre 2004
Rendez-vous au LABO C à 14h (inscription souhaitable)
N’hésitez pas à apporter votre CV ou d’autres idées de pages personnelles.
Merci.