Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
La conception et la mise en place
de sites Web (Le langage HTML) Quelques concepts clés Page Web Site Web Lien hypertexte HTML ©Mokhtar Ben Henda, DUTICE 2000
2
La page WEB Un fichier texte 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.
3
La 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> Entête Structure entière du Document HTML A-Structure d'un document Un document HTML commence par <HTML> et fini par </HTML>. En fait ce n'est pas encore obligatoire, mais il vaut mieux le mettre car cela pourrait changerun jour. 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 (ex : corps du document). *De nombreux éditeurs HTML se chargent d'insérer ces directives. Contenu La page Web est conçue par un éditeur HTML et affichée par un navigateur Web
4
Données et Métadonnées dans les codes sources de la page HTML
Affichage des données et des équivalents métadonnées par le navigateur HTML
5
Mosaic, Internet Explorer, Netscape,
Les outils de conception d’une page Web Un éditeur 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 … Un navigateur HTML 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,
6
Le site WEB Un site Web est un ensemble de pages HTML interrelié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 de relier les pages HTML dans une unités logique appelée SITE WEB
7
LES LIENS HYPERTEXTES La liaison entre les pages Web locales et distancées se fait par les liens Hypertextes
8
Les structures des ressources Hypertexte
Hypertexte linéaire interne Hypertexte en grappe interne (Le plus classique) Hypertexte linéaire distribué
9
Aucune règle d’organisation séquentielle;
HYPERTEXTE DISTRIBUE (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 navigation Historique; Favoris (signets, bookmarks)
10
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);
11
<b>balisage</b>
LE 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 balise (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.
12
Créer sous la racine C:\ un répertoire « Mon_site »
Exercice pratique Étape 1 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 »;
13
A-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.
14
Exercice pratique É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.
15
B-LE FONDS D’UN DOCUMENT HTML
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. <BODY BACKGROUND="/FichiersHtml/Images/fond.gif" >
16
Exercice pratique É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 »
17
C-LE TEXTE DANS UN DOCUMENT HTML
Il suffit de l'écrire entre <BODY> et </BODY>. QUELQUES 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.
18
Exercice pratique Étape 3.1
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>
19
Exercice pratique Étape 3.2
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 :
20
D-LES IMAGES DANS UN DOCUMENT HTML
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.
21
Exercice pratique Étape 4 Insertion 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. <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> Centrez l’image en lui ajoutant les balise de centrage <center><img src=«images\votre image.gif »></center><p>
22
E-LES LIENS HYPERTEXTES <A HREF=""></A>
Lien Local : Ancre (signet) A HREF=« #Nom de l’ancre » A NAME=« Nom de l’ancre » Titre d’une page ST1 | ST2 | ST3 | Sous titre1 Texte texte texte texte texte texte texte texte texte texte texte Sous titre 2 Sous titre 3 <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>
23
Exercice pratique Étape 5.1 Cré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 : Introduction Identification Contacts 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>
24
<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 : </BODY> </HTML>
25
Lien Externe : URL (Uniform Ressource Locator)
<A HREF="URL">Support du Lien</A> JOURNEAUX EN LIGNE Le Monde Libération La 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= Monde</A> <A href= <A href=" Presse</A> </BODY> </HTML>
26
Cible (Document ou service)
Support de cours Structure et nature des liens 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, image, Icône Http; mailto; ftp; nntp; telnet Web Mail FTP News Telnet Qu'est-ce que l'Hypertexte ? Un lien hypertexte permet d'accéder, partant d'une page Web, à une autre page Web ou à une partie précise de la page courante. Un lien hypertexte est constitué d'un point d'appel - appelé une ancre (concrètement, un mot, un groupe de mots, une image ou une icône) et de l'adresse du document ciblé. Particularité : 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. A chaque fois que vous verrez votre souris changer de forme pour devenir une main, vous saurez qu'il s'agit d'un lien qui peut vous emmener vers des informations complémentaires, que ces informations soient sur le même site ou non. Ceci est tout à fait transparent pour vous. On appelle ce principe de déplacement à l'intérieur d'un site ou entre sites, les liens hypertextes. URL Cible Source Document Source Cible (Document ou service) © Mokhtar BEN HENDA ISD de Tunis / CEM-GRESIC, Bordeaux 3 21
Présentations similaires
