Embed Size (px)
Citation preview
Quelques concepts clés
Page Web Site Web Lien hypertexte HTML
La conception et la mise en place La conception et la mise en place de sites Webde sites Web(Le langage HTML)(Le langage HTML)
©Mokhtar Ben Henda, DUTICE 2000
La page WEBLa page WEB
Un fichier textetexte avec extension HTM ou HTML qui contient des données et des métadonnées
•Les données sont le texte que le concepteur saisit comme contenu informationnel de sa page;
•Les métadonnées sont le texte qui :
Renvoie aux données non textuelles dans la page; Définit les attributs d’affichage des données (couleurs, tailles etc.) Est ajouté au niveau de l’entête du document HTML pour faciliter
son référencement.
La structure physique d’une page WebLa structure physique d’une page Web
<html>
<head><meta http-equiv="Content-Type" content=""><meta name="GENERATOR" content=""><meta name="ProgId" content=""><title></title>
</head>
<body>
</body></html>
Structure Structure entière du entière du Document Document HTMLHTML
Entête
Contenu
•La page Web est conçue par un éditeur HTML et affichée par un navigateur Web
Données et Métadonnées dans Données et Métadonnées dans les codes sources de la page les codes sources de la page
HTMLHTML
Affichage des données et des Affichage des données et des équivalents métadonnées par le équivalents métadonnées par le
navigateur HTMLnavigateur HTML
Les outils de conception d’une page Web
Un éditeur HTMLUn éditeur HTML
Un navigateur HTMLUn navigateur HTML
• Permet de saisir le texte informationnel de la page;• Permet de saisir les codes correspondants aux données non textuelles;• Permet de saisir les attributs des données informationnelles (textes,
images, son, vidéo) de la page;• Permet de saisir les éléments d’information sur la page (Structure et
Métadonnées).
Bloc Notes, MS Word, WebExpert, Dream Weaver, Page Mill, front page etc …
•Affiche directement les données textuelles;•Interprète les codes sources pour afficher les données non textuelles;•Interprète les codes sources pour donner la forme nécessaire aux données informationnelles (couleur, position, taille etc.)
Mosaic, Internet Explorer, Netscape,
Le site WEBLe site WEB
Un site Web est un ensemble de pagesensemble de pages HTML interreliéesinterreliées par des liens Hypertextes;
Les pages HTML peuvent être regroupées dans le même dossier, sur la même machine;
Les pages HTML peuvent être aussi éparpillées dans des dossiers différents sur des machines différentes;
Les pages HTML peuvent être aussi un ensemble de pages locales interreliées avec des pages décentralisées;
Les liens hypertextes permettent Les liens hypertextes permettent de relier les pages HTML dans une de relier les pages HTML dans une unités logique appelée SITE WEB unités logique appelée SITE WEB
Les liens hypertextes permettent Les liens hypertextes permettent de relier les pages HTML dans une de relier les pages HTML dans une unités logique appelée SITE WEB unités logique appelée SITE WEB
La liaison entre les pages Web locales et distancées se fait par les liens HypertextesLa liaison entre les pages Web locales et distancées se fait par les liens Hypertextes
LES LIENS HYPERTEXTESLES LIENS HYPERTEXTES
Les structures des ressources HypertexteLes structures des ressources HypertexteLes structures des ressources HypertexteLes structures des ressources Hypertexte
Hypertexte Hypertexte en grappe en grappe
interneinterne(Le plus
classique)
Hypertexte Hypertexte linéaire linéaire interneinterne
Hypertexte Hypertexte linéaire linéaire
distribuédistribué
HYPERTEXTE DISTRIBUEHYPERTEXTE DISTRIBUE((Le plus courant)Le plus courant)
• Aucune règle d’organisation séquentielle;
• Virtualité des voies de navigation;
• Navigation illimitée dans l’espace et dans le temps.
Repères de navigationRepères de navigation
• Historique;• Favoris (signets, bookmarks)
PREREQUIS DE CREATION HTML
La création HTML est la dernière phase de tout un processus préalable d’organisation :
Créer un emplacement (répertoire) fixe sur machine pour y stocker tous les fichiers ressources (Texte, images, sons, vidéo) qui serviront à la création du site Web;
Préparer ses fichiers des ressources textuelles (html, pdf) et audiovisuelles dans les formats adéquats (gif, jpg, png / wav, au, ra / avi, mov) pour l’édition sur le Web;
Élaborer une maquette du site à créer;
Définir une charte graphique pour le site;
Définir une arborescence adéquate pour le site (linéaire, verticale ou horizontale etc.)
Déterminer une stratégie navigationnelle (ergonomie);
LE LANGAGE HTMLLE LANGAGE HTML
C'est un langage de description de documents éléctroniques qui indique à votre navigateur comment afficher les documents qu'il reçoit.
Dans le système HTML, l'unité de base est la balisebalise (le marqueur).
Les balises sont délimitées par les signes inférieur à et supérieur à (< et > ).Par exemple, pour obtenir balisage ecrit en gras : balisage , je tape :
<b>balisage</b>
Pour écrire des pages HTML, soit on utilise un éditeur de textes quelconque (Note Pad, MSWord etc) soit on utilise un éditeur spécialisé pour HTML.
Exercice pratique
Créer sous la racine C:\ un répertoire « Mon_site »
Créer dedans un sous répertoire « Images »Avec un utilitaire graphique (Photoshop,
illustrator ou autre), ouvrez ou créez une image (ou plusieurs) que vous enregistrez sous son propre nom en format GIF ou JPG dans le sous répertoire images de votre répertoire principal « Mon_Site »;
Étape 1Étape 1
A-STRUCTURE D’UN DOCUMENT HTMLA-STRUCTURE D’UN DOCUMENT HTML
Un document HTML commence par <HTML> et fini par </HTML>.
Le document se compose de deux parties : la tête (Head) et le corps (Body). Sa structure globale est donc :
<HTML><HEAD><Title>Le titre du document</title></HEAD><BODY>corps du document</BODY></HTML>
Remarque :*Entre < et > pas de différence entre minuscules et majuscules.*En dehors il suffit de taper du texte pour qu'il s'affiche.
Exercice pratique
Étape 2Étape 2
Ouvrez le Bloc Notes à travers le bouton Démarrer Programmes Accessoires Bloc-Notes
Ouvrez votre navigateur HTML (IE ou Netscape)
Rédigez dans Bloc-Notes la structure de base d’un document html<HTML><HEAD><Title>Ma page d’accueil</title></HEAD><BODY>BIENVENUS A NOTRE SITE</BODY></HTML>
Sauvegardez le fichier sous le nom « homepage.htm » dans le répertoire c:\mon_site\
Allez vers le navigateur et faites Fichier ouvrir puis pointez vers le fichier que vous venez de sauvegarder.
La première chose dont on peut avoir envie, c'est d'ajouter un fond d'écran : une couleur unie ou une image.
Pour une couleur unie on utilise l'attribut BGCOLOR de BODY.
Exemple :
<BODY BGCOLOR="#FFFFFF" >
Le codage de la couleur se fait en hexadécimal sous la forme "#Rouge vert Bleu".
Ainsi,"#FFFFFF" donne donc du blanc, "#000000" du noir.
Pour une image de fond, l'attribut de BODY est BACKGROUND qui prend comme argument l'URL de l'image.
Exemple :
<BODY BACKGROUND="/FichiersHtml/Images/fond.gif" >
B-LE FONDS D’UN DOCUMENT HTMLB-LE FONDS D’UN DOCUMENT HTML
Exercice pratique
Étape 2Étape 2 Ouvrez votre navigateur HTML (IE ou Netscape)
Ajoutez les attributs suivants à la balise <BODY><HTML><HEAD><Title>Ma page d’accueil</title></HEAD><BODY BGCOLOR=«#0099FF»>BIENVENUS A NOTRE SITE</BODY></HTML>
Changez par paire de chiffres le code de la couleur de fonds pour retrouver la couleur qui vous convient le plus; vous pouvez remplacer ce code par le nom d’une couleur (Exemple : <BODY BGCOLOR=« Yellow »>)
Sauvegardez le fichier sous le même nom « homepage.htm » dans le répertoire c:\mon_site\
Allez vers le navigateur et cliquez sur le bouton « Actualiser »
Il suffit de l'écrire entre <BODY> et </BODY>.
QUELQUES REGLES A TENIR EN COMPTEQUELQUES REGLES A TENIR EN COMPTE
Caractères accentués
On ne peut pas écrire directement les caractères accentués et le c cédille. De nombreux éditeurs se chargent de transformer les caractères accentués en codes :
Exemple : pour afficher à il faut écrire à. Pour le copyright écrire ©
Six niveaux d'en-tête
Il existe six niveaux d'en-tête : de h1 (le plus grand) à h6. On les utilise en écrivant : <h4> Le texte à mettre au format h4 </h4>
Rupture de texte
Le navigateur ne prend en compte ni les retours à la ligne ni les espaces supplémentaires. On a donc recours à des marqueurs : <P> pour les paragraphes et <br> pour les retour à la ligne.
<P> isole le texte en insérant une ligne vide avant et après.<br> provoque juste un passage à la ligne.
Règles horizontales
Le marqueur <HR> insère une ligne ombrée sur toute la largeur de la fenêtre du navigateur.
C-LE TEXTE DANS UN DOCUMENT HTMLC-LE TEXTE DANS UN DOCUMENT HTML
Exercice pratique
Étape 3.1Étape 3.1
Ajout d’attributs pour le titre principal dans la partie BODY :Ajout d’attributs pour le titre principal dans la partie BODY :
Mettez le titre entre les balises <H1> et </H1>, sauvegardez et actualisez au niveau du navigateur.
Mettez de nouveau le titre entre les deux balises <Center> et </center>, sauvegardez et actualisez au niveau du navigateur.
Mettez une ligne horizontale sous le titre en ajoutant la balise <HR> après la ligne du titre et ses attributs,
<HTML><HEAD><Title>Ma page d’accueil</title></HEAD><BODY BGCOLOR=«#0099FF»><Center><H1>BIENVENUS A NOTRE SITE</H1></center><HR></BODY></HTML>
Exercice pratique
Étape 3.2Étape 3.2Rupture de texte : paragraphes et retour à la ligne :Rupture de texte : paragraphes et retour à la ligne :
Ajoutez après la balise <HR> le texte suivant (voir exemple dessous), sauvegardez et actualisez au niveau du navigateur,
<HTML><HEAD><Title>Ma page d’accueil</title></HEAD><BODY BGCOLOR=«#0099FF»><Center><H1>BIENVENUS A NOTRE SITE</H1></center><HR>Introduction : Ce site est notre première expérience avec la langage HTML.Nous pensons parvenir en peu de temps à maîtriser l’édition HTML et toutes les techniques qui lui sont connexes.</BODY></HTML>
Observez que le texte sous le navigateur est continu. Pour le structurer, ajoutez la balise <p> derrière le sous titre « Introduction : » et la balise <br> derrière la première phrase. Sauvegardez et actualisez au niveau du navigateur :
Pour insérer une image il suffit d'écrire :<IMG SRC="URL de l'image à insérer">
Exemple :
<IMG SRC="/FichiersHtml/Images/image.gif" >
Les fichiers .gif sont des fichiers graphiques compressés en 256 couleurs.
On peut les obtenir avec des logiciels comme Adobe Photoshop et Gif Converter sur Macintosh,Paint Shop Pro sous Windows, XV sous Xvision.
On peut bien-sûr utiliser un autre format 5JPG, PNG etc) mais le format GIF est reconnu par tous les navigateurs.
D-LES IMAGES DANS UN DOCUMENT HTMLD-LES IMAGES DANS UN DOCUMENT HTML
<HTML><HEAD><Title>Ma page d’accueil</title></HEAD><BODY BGCOLOR=«#0099FF»><Center><H1>BIENVENUS A NOTRE SITE</H1></center><HR><img src=«images\votre image.gif »><p>Introduction :<p> Ce site est notre première expérience avec la langage HTML.<br>Nous pensons parvenir en peu de temps à maîtriser l’édition HTML et toutes les techniques qui lui sont connexes.</BODY></HTML>
Exercice pratique
Étape 4Étape 4Insertion d’imagesInsertion d’images
Insérez l’image que vous avez sauvegardée dans votre sous répertoire entre la ligne horizontale <HR> et le titre « Introduction ». Sauvegardez et actualisez au niveau du navigateur.
Centrez l’image en lui ajoutant les balise de centrage
<center><img src=«images\votre image.gif »></center><p>
Lien Local : Ancre (signet)Lien Local : Ancre (signet)A HREF=« #Nom de l’ancre »A NAME=« Nom de l’ancre »
Titre d’une pageTitre d’une pageST1 | ST2 | ST3 |
------------------------------Sous titre1
Texte texte texte texte texte texte texte texte texte texte texte
Sous titre 2Texte texte texte texte texte texte texte texte texte texte texte
Sous titre 3Texte texte texte texte texte texte texte texte texte texte texte
<HTML><HEAD><TITLE></TITLE><META NAME="Description" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Author" CONTENT="Usager non enregistré"><META NAME="Generator" CONTENT="WebExpert"></HEAD><BODY><B>Titre d’une page</B><A HREF="#ST1">ST1</A> | <A HREF="#ST2">ST2</A> | <A HREF="#ST3">ST3</A>------------------------------<A NAME="ST1"><B>Sous titre1</B></A>Texte texte texte texte texte texte texte texte texte texte texte <A NAME="ST2"><B>Sous titre 2</B></A>Texte texte texte texte texte texte texte texte texte texte texte <A NAME="ST3"><B>Sous titre 3</B></A>Texte texte texte texte texte texte texte texte texte texte texte</BODY></HTML>
<A HREF=<A HREF=""""></A>></A>
E-LES LIENS HYPERTEXTESE-LES LIENS HYPERTEXTES
Exercice pratique
Étape 5.1Étape 5.1Création de liens à base d’ancres internesCréation de liens à base d’ancres internes
Complétez la rédaction de votre page en créant un sommaire de navigation entre l’image et l’introduction :
SOMMAIRE :
IntroductionIdentificationContacts
Faites suivre ces lignes par la balise <br> pour qu’elles occupent des lignes séparées;
Créez ces rubriques dans votre texte à la suite de la rubrique Introduction déjà saisie dans l’exercice précédent;
Mettez devant le titre de chaque rubrique la balise suivante : <A NAME=«titre de l’ancre»>Titre de la rubrique</A>
Entourez chaque élément du sommaire par les balises de liaison comme dans l’exemple suivant :
<A HREF=«#titre de l’ancre»>Introduction</A>
<HTML>
<HEAD>
<Title>Ma page d’accueil</title>
</HEAD>
<BODY BGCOLOR=«#FF0000»>
<Center><H1>BIENVENUS A NOTRE SITE</H1></center><HR>
<img src=«images\votre image.gif »><p>SOMMAIRE<p><A HREF="#Introduction">Introduction</A><br><A HREF="#Identification">Identification</A><br><A HREF="#Contact">Contact</A><p><A NAME="Introduction">Introduction :</A><p> Ce site est notre première expérience avec la langage HTML.<br>Nous pensons parvenir en peu de temps à maîtriser l’édition HTML et toutes les techniques qui lui sont connexes<P><A NAME="Identification">Identification :</A><p> Nous sommes un groupe d’étudiants en formation professionnelle sur les techniques multimédia et ressources internet.<p><A NAME="Contacts">Contacts :</A><p> Pour nous contacter veuillez adresser un courrier sur l’adresse de l’ULP ou nous envoyer un mail sur notre adresse électronique : [email protected]<p></BODY>
</HTML>
Lien Externe : URL (Uniform Ressource Locator)Lien Externe : URL (Uniform Ressource Locator)
<A HREF="URL">Support du Lien</A>
JOURNEAUX EN LIGNEJOURNEAUX EN LIGNELe MondeLibérationLa Presse…
<HTML><HEAD><TITLE></TITLE><META NAME="Description" CONTENT=« Liste des…"><META NAME="Keywords" CONTENT=« journaux, quo…"><META NAME="Author" CONTENT=« ULP Strasbourg"><META NAME="Generator" CONTENT="WebExpert"></HEAD><BODY><B>Journaux en ligne</B><A href=http://www.lemonde.fr>Le Monde</A><A href=http://www.liberation.fr>Libération</A><A href="http://www.LaPresse.tn>La Presse</A></BODY></HTML>
http://www.lemonde.fr
http://www.liberation.fr
http://www.LaPresse.tn
• Il s’agit d’un point d'appel ou ancre (un mot, un groupe de mots, une image ou une icône) et de l’adresse de la ressource ciblée.
• Les documents référencés peuvent se trouver sur un autre serveur Web que sur celui que l'on est en train de consulter, ou encore sur un serveur FTP, un serveur de News ou un site accessible par TELNET.
• Dans le World Wide Web, on parle de document hypermédia car les liens peuvent également référencer des fichiers sons, images ou des séquences vidéo.
Texte,Texte,
image,image,
IcIcôônene
WebWebMailMailFTPFTPNewsNewsTelnetTelnetSource Cible
URLURL
Http; mailto; ftp; nntp; telnet
Document SourceDocument Source Cible (Document ou service) Cible (Document ou service)
Structure et nature des liens
