Essai du contenu sur différent navigateur
télécharger 367.39 Kb.
|
Introduction au HTML 4.0 Construction d'un site web Plan de formation 
1. L'IDÉE... ( 30 min. ) Tout ce qu'il faut savoir sur l'idée qui va animer votre site. Un thème général, ça se prépare, ca se peaufine, comment faire ? Avant de commencer quoi que ce soit, il faut avoir une idée de base, mais une bonne idée ! 2. Planification pour différent public ( 30 min. ) - Définissez à qui s'adresse votre site. - Langue - Client ou ami(e) - Vitesse de transfert des fichiers - Fournir des options d'affichage 3. Apprentissage du langage HTML (14 hrs.) Objectif : comprendre et utiliser les techniques de base nécessaires à la création de pages web au moyen du langage HTML et des éditeurs de pages web. Introduction : Le langage HTML, pour Hypertext Markup Language, est le code de base utilisé pour construire des documents hypertexte (pages web). Ces documents sont mis à la disposition de la communauté ouverte des serveurs et des lecteurs de documents hypertexte de l'internet (le World Wide Web) lorsqu'on les transfert sur un serveur approprié. Approche pédagogique: le cours se déroulera dans une alternance d'exposés, de démonstrations et d'exercices pratiques. 4. CONSTRUCTION DU SITE AVEC DIFFÉRENTES MÉTHODES ET OUTILS ( 2 Hrs. ) - Quelques pièges fondamentaux à éviter absolument pendant la phase de création... - Survol des différents programmes maisons et utilisations. - Équilibre du contenu de la page. - Choix des fonds d’écran. - Le choix des couleurs. - Dessin sans droit d’auteur. - Ajout de contenu multimédia au besoin. - Ajout de différent script pour agrémenter les pages - Essai du contenu sur différent navigateur. 5. Trouver un hébergeur / Publication sur le Web ( 2 Hrs ) - Démonstration des différents outils de transfert sur un site FTP. - Démonstration de l’administration d’un site WEB avec création de sous-répertoire. - Méthode de transfert des données chez le fournisseur.
- Méthodologie du référencement sur le WEB. - Utilisation des ressources internet afin de se faire connaître. Index
Première maquette de votre site Web Avant de se lancer dans la réalisation du code html, ou dans l'habillage graphique de votre site, il convient de réfléchir et définir le contenu, l'architecture, et la forme générale de votre site... Pour cela rien ne vaut une page blanche et un stylo pour esquisser une première maquette de votre site. 1. Le contenu C'est certainement le point le plus important, il ne faut surtout pas le négliger car c'est celui qui donnera envie à vos visiteurs de revenir sur votre site Web. a ) Maîtriser le sujet que l'on va aborder b ) Dégagez les principales rubriques c ) Préparez vos textes (paragraphes, orthographe...) 2. L'architecture Sous peine de courir très vite à la catastrophe et, de perdre un temps précieux pour l'avenir, dégagez au plus tôt une architecture (arborescence) de votre site. a  ) Préparez une arborescence de votre site b ) Spécifiez les liens vers vos différentes pages c ) Votre site doit être modulable (pour accueillir de nouvelles rubriques) Note : Votre première page (page d'accueil, home page, ...) doit se nommer index.htm ou index.html. Il est de plus préférable que les noms de vos pages ne dépassent pas 8 caractères. 3. La forme Afin de faciliter plus tard la création du code avec un éditeur html, n'hésitez pas à griffonner une première esquisse de vos pages, ceci également dans le but d'affecter aux éléments des côtes en pixels pour une mise en page soignée. a ) Dessinez un premier croquis graphique de votre page d'accueil b ) Spécifiez les côtes en pixels c ) L’agencement des couleurs est très importante. Note : Pour que votre site soit correctement visible dans une résolution de 800 x 600, basez vous sur une largeur de 771 pixels maximum. En ce qui concerne la hauteur, la taille maximale préconisée est 1200 pixels. CE QU'IL FAUT FAIRE ! a) Cherchez si des sites traitent du même sujet sur la toile. b) S'il en existe, essayez de les compléter en information. c) Maîtrisez a fond le sujet que vous allez traiter. d) Soyez motivé dans la durée, car un site ça se met à jour... e) Si vous traitez d'un thème déjà repris beaucoup de fois, pensez a parler d'une de vos passions et approfondissez. CE QU'IL NE FAUT PAS FAIRE ! 1) Changer d'idée en cours de route et tout mélanger. 2) Traiter un sujet à la fois si vous en avez plusieurs. 3) Et surtout, ne jamais pomper un site ! D'une part vous risquez gros, mais en plus vous n'aurez aucune satisfaction personnelle... Page 1 Introduction au HTML Un peu d'histoire Comment le HTML est-il né ? En fait, tout commence quand TIM BERNERS-LEE crée une méthode pour relier des documents à l'aide de liens hypertextes, sur un réseau appelé à l'époque "la mère de tous les réseaux" : Internet. Le World Wide Web (W.W.W.) est constitué de pages Web. Ces pages sont conçues avec le langage HTML ou HyperText Markup Language ou encore Langage dit à balises. Le HTML est donc un simple "langage à balises", comme les premiers traitements de texte (Wordstar). Ce langage permet de coder une page à l'aide de commandes de mise en forme. Ces dernières sont ensuite interprétées par un navigateur (ou browser en anglais) et apparaissent sur votre écran. Les pages HTML sont aujourd'hui le système de base d'Internet. Les sites peuvent inclure du texte ainsi que des images fixes ou animées, du son , de la vidéo et même des programmes interactifs (à l'aide de Java ou Javascript). Le langage HTML ne se rencontre pas exclusivement sur le web, celui ci est également utilisé pour fournir une Interface aux CD-ROM multimédia et maintenant aux DVD ROM. L'évolution du langage Les différentes versions du HTML, qui sont encore en vigueur à l'heure actuelle, sont : 1. HTML 2.0 (très rare). 2. HTML 3.0 (rare). 3. HTML 3.2 (souvent). 4. HTML 4.0 (dernière version, donc de plus en plus rencontrée). Page 2 Architecture HTML1. Règles HTML et balises Toutes les instructions HTML sont exprimées dans des balises (ou "tags"), délimitées par des crochets (signe inférieur < et signe supérieur >). Cette structure est toujours la même. Cependant, chaque balise doit être ouverte et fermée (sauf rares exceptions). Notez que la balise de fermeture est toujours identique à la balise d'ouverture sauf qu'elle comporte une barre oblique après le signe <. Exemple : Les majuscules et les minuscules dans les instructions n'ont aucune importance, même s'il vaut mieux écrire toutes ses balises en minuscules afin de faciliter le futur transfert en XHTML de votre code HTML. De même, veillez à bien respecter les ordres d'ouverture et de fermeture sinon vous risquez de perdre en lisibilité. 2. Schéma des relations conteneur - contenu entre les éléments d'un document HTML  3. Commandes doctype pour les différentes versions HTML
La balise est utilisée afin d’indiquer au navigateur la version du langage HTML utilisé, et cette balise s’appelle ‘DTD element’ où ‘Document type Definition’, elle est toujour placé sur la première ligne du document si elle est utilisé. Ensuite, vous devez entrer la balise qui indique le début de votre fichier, puis la balise dans laquelle sont résumées des informations générales, c'est à dire le titre de votre page (c'est aussi le titre qui apparaîtra dans les favoris du visiteur, s'il vous ajoute à sa liste de favoris) et les balises qui permettent d'indexer (référencer) votre site (ces balises seront étudiées dans la rubrique suivante). 4. Structure et en-tête du document () Le Tag contient les informations au sujets du document, incluant le titre, les scripts utilisés, définition du style et ainsi que la description du document. 5. Le corps du document () Il est à noter que, pour l'instant, le navigateur ne visualisera rien, car les véritables données qu'il va afficher vont se trouver dans la balise . Cette balise détermine le corps du document : c'est ici que vous allez intégrer titres, textes, images, tableaux, liens... Le tag a de nombreux attributs : - bgcolor : Définit la couleur du fond de l'écran - text : Définit la couleur du texte Page 3 - link : Définit la couleur des liens - vlink : Définit la couleur des liens déjà visités - alink : Définit la couleur des liens activés, c'est à dire quand le pointeur de la souris passe haut dessus - background : Définit l'image (gif ou jpeg) à utiliser comme fond d'écran - bgproperties : Si définie comme "fixed", l'image de fond ne défile pas (uniquement avec I’Explorer) - leftmargin : Définit la largeur de la marge de gauche en pixels - topmargin : Définit la largeur de la marge du haut en pixels 6. Exemple typique d'une page HTML (sans les balises meta) Voici votre première page |
similaire:
 | | ||
| | ||
|  | «essai» : nom, taille, … ? Prenez une capture d’écran de la fenêtre qui vous permet de trouver ces informations et collez-la dans... | |
| | ||
| «Essai sur l’évolution de l’économie globale à partir de l’étude de sa composante pétrolière» [23] | | «Essai sur l’évolution de l’économie globale à partir de l’étude de sa composante pétrolière» [23] |