La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Quelques concepts clés  Page Web Page Web Page Web  Site Web Site Web Site Web  Lien hypertexte Lien hypertexte Lien hypertexte  HTML HTML La conception.

Présentations similaires


Présentation au sujet: "Quelques concepts clés  Page Web Page Web Page Web  Site Web Site Web Site Web  Lien hypertexte Lien hypertexte Lien hypertexte  HTML HTML La conception."— Transcription de la présentation:

1 Quelques concepts clés  Page Web Page Web Page Web  Site Web Site Web Site Web  Lien hypertexte Lien hypertexte Lien hypertexte  HTML HTML La conception et la mise en place de sites Web (Le langage HTML) ©Mokhtar Ben Henda, DUTICE 2000

2 La page WEB texte  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 Structure entière du Document HTML Entête Contenu La page Web est conçue par un éditeur HTML et affichée par un navigateur Webéditeur HTML 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 Les outils de conception d’une page Web Un éditeur HTML Un 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,

6 Le site WEB ensemble de pages interreliées  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 La liaison entre les pages Web locales et distancées se fait par les liens Hypertextes LES LIENS HYPERTEXTES

8 Les structures des ressources Hypertexte Hypertexte en grappe interne (Le plus classique) Hypertexte linéaire interne Hypertexte linéaire distribué

9 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 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.navigateur balise  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 à ( ). Par exemple, pour obtenir balisage ecrit en gras : balisage, je tape : balisage  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 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

13 A-STRUCTURE D’UN DOCUMENT HTML  Un document HTML commence par et fini par.  Le document se compose de deux parties : la tête (Head) et le corps (Body).  Sa structure globale est donc : Le titre du document corps du document Remarque : *Entre 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 Ma page d’accueil BIENVENUS A NOTRE SITE  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  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 :  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 : B-LE FONDS D’UN DOCUMENT HTML

16 Exercice pratique Étape 2  Ouvrez votre navigateur HTML (IE ou Netscape)  Ajoutez les attributs suivants à la balise Ma page d’accueil BIENVENUS A NOTRE SITE  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 : )  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 Il suffit de l'écrire entre et. 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 : Le texte à mettre au format 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 : pour les paragraphes et pour les retour à la ligne. isole le texte en insérant une ligne vide avant et après. provoque juste un passage à la ligne. Règles horizontales Le marqueur insère une ligne ombrée sur toute la largeur de la fenêtre du navigateur. C-LE TEXTE DANS UN DOCUMENT HTML

18 Exercice pratique Étape 3.1 Ajout d’attributs pour le titre principal dans la partie BODY : Mettez le titre entre les balises et, sauvegardez et actualisez au niveau du navigateur. Mettez de nouveau le titre entre les deux balises et, sauvegardez et actualisez au niveau du navigateur. Mettez une ligne horizontale sous le titre en ajoutant la balise après la ligne du titre et ses attributs, Ma page d’accueil BIENVENUS A NOTRE SITE

19 Exercice pratique Étape 3.2 Rupture de texte : paragraphes et retour à la ligne :  Ajoutez après la balise le texte suivant (voir exemple dessous), sauvegardez et actualisez au niveau du navigateur, Ma page d’accueil BIENVENUS A NOTRE SITE 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.  Observez que le texte sous le navigateur est continu. Pour le structurer, ajoutez la balise derrière le sous titre « Introduction : » et la balise derrière la première phrase. Sauvegardez et actualisez au niveau du navigateur :

20  Pour insérer une image il suffit d'écrire : Exemple :  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 HTML

21 Ma page d’accueil BIENVENUS A NOTRE SITE 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. 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 et le titre « Introduction ». Sauvegardez et actualisez au niveau du navigateur.  Centrez l’image en lui ajoutant les balise de centrage

22 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 Texte texte texte texte texte texte texte texte texte texte texte Sous titre 3 Texte texte texte texte texte texte texte texte texte texte texte Titre d’une page ST1 | ST2 | ST Sous titre1 Texte texte texte texte texte texte texte texte texte texte texte Sous titre 2 Texte texte texte texte texte texte texte texte texte texte texte Sous titre 3 Texte texte texte texte texte texte texte texte texte texte texte E-LES LIENS HYPERTEXTES

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 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 : Titre de la rubrique  Entourez chaque élément du sommaire par les balises de liaison comme dans l’exemple suivant : Introduction

24 Ma page d’accueil BIENVENUS A NOTRE SITE SOMMAIRE Introduction Identification Contact 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 Identification : Nous sommes un groupe d’étudiants en formation professionnelle sur les techniques multimédia et ressources internet. Contacts : Pour nous contacter veuillez adresser un courrier sur l’adresse de l’ULP ou nous envoyer un mail sur notre adresse électronique :

25 Lien Externe : URL (Uniform Ressource Locator) Support du Lien JOURNEAUX EN LIGNE Le Monde Libération La Presse … Journaux en ligne Le Monde Libération La Presse

26 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 WebMailFTPNewsTelnet Source Cible URL Http; mailto; ftp; nntp; telnet Document Source Cible (Document ou service) Structure et nature des liens


Télécharger ppt "Quelques concepts clés  Page Web Page Web Page Web  Site Web Site Web Site Web  Lien hypertexte Lien hypertexte Lien hypertexte  HTML HTML La conception."

Présentations similaires


Annonces Google