// HTML, Javascript XHTML & CSS

Please download to get full document.

View again

of 23
65 views
PDF
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Document Description
design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact // sommaire HTML 01. Introduction au langage HTML 02. Introduction
Document Share
Documents Related
Document Transcript
design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact // sommaire HTML 01. Introduction au langage HTML 02. Introduction aux principes généraux du webdesign et première maquette 03. HTML, les bases 04. La balise BODY 05. Texte / alignement, formatage, listes 06. Liens 07. Images & Map 08. Tableaux 09. Frames & I-Frames 10. Formulaires 11. Récapitulatif des balises les plus courantes JAVASCRIPT 13. Introduction au Javascript 14. Menus dynamiques 15. Popup 16. Full screen 17. Restriction d accès au contenu XHTML 18. Introduction au XHTML CSS 19. Introduction et principe de base 20. Sélecteurs 21. Propriétés 22. Cascades et conflits d héritage 23. Positionnement 24. Feuille de style pour l impression 25. Trucs & astuces LEXIQUE GENERAL // page. 03 // page. 06 // page. 11 // page. 15 // page. 16 // page. 24 // page. 27 // page. 32 // page. 36 // page. 40 // page. 46 // page. 47 // page. 50 // page. 54 // page. 57 // page. 58 // page. 59 // page. 64 // page. 68 // page. 72 // page. 81 // page. 82 // page. 91 // page. 92 // page. 97 2 01. Introduction au langage HTML I. HISTORIQUE II. qui utilise le html? III. apprendre le html 3 01. Introduction au HTML Le HTML ou HyperTexte Markup Language est le langage de publication utilisé sur le World Wide Web. Très facile à maîtriser, il s agit tout simplement d un langage à balises («tags au format ASCII), délimitées entre crochets et affinées dans leur formes par des attributs ; ces instructions placées dans un simple fichier texte au format.html (ou.htm) sont ensuite interprétées par les différents navigateurs pour en faire apparaitre le contenu sur votre écran I. HISTORIQUE C est Tim Berners-Lee qui a écrit et développé ce langage pour répondre aux besoins du système d échange d informations qu il venait d inventer : le World Wide Web. Pour expliciter physiquement ces échanges entre machine, un protocole spécifique a été mis en place, c est le HTTP (Hyper Text Transfert Protocol) ; moyen simple et efficace d accéder sur un réseau à des documents liés entre eux par des hyperliens. Ecrits en HTML, les documents s enchaînent les uns les autres par un simple clic de souris et sont transportés jusqu au lecteur grâce au protocole HTTP. Un leger point historique / HTML 1.0 Le language HTML voit le jour au au CERN (Centre d études et de recherches nucléaires) situé près de Genève. Il y a peu de balises : on peut cependant insérer des images, créer des liens hypertextes, mais tout cela en noir, sur un fond gris, et sans interface graphique! 1995 / HTML 2.0 Cette norme voit apparaître des possibilités de mise en page avec des tableaux / HTML 3.0 De nouvelles balises et de nouveaux attributs sont insérées. Listes, Cartes cliquables, Frames / HTML 4.0 Outre de nouvelles commandes (I-Frames), un nouveau principe révolutionnaire de mise en page séparant le fond et la forme est mis en place, ce sont les feuilles de style en cascade (css / cascading style sheet) / XHTML Mise à jour majeure du langage qui devient XHTML. C est l avènement du Web / HTML 5.0 (?) La mise en place d une nouvelle standardisation du langage XHTML est prévue pour la nouvelle décennie à venir. Que nous réserve t elle?! II. qui utilise le html? Avant d arriver au stade de produit fini permettant la consultation par l internaute des informations qu il contient, la vie d un site Internet se construit en suivant plusieurs étapes dont la construction HTML n est qu un des jalons. Dans le process moderne de la construction d un produit de communication interactive, ce sont les intégrateurs, situés juste après les infographistes et juste avant les developpeurs (ingénieurs informaticiens responsables de l implémentation des fonctions dynamiques du produit) qui sont en charge de la construction des pages HTML. Ils y incluent textes, images, documents flash, sons et vidéos en fonction des recommandations graphiques des studios créatifs et c est à eux tout particulièrement que l on demande une excellente connaissance du code. 4 01. Introduction au HTML III. apprendre le html Si vous n avez jamais consulté le code source d une page HTML, connectez-vous sur une page avec votre navigateur favori et consultez son fichier «source (Affichage/Source, ou «Afficher la source avec le clic droit de la souris lorsque le pointeur est sur la page). De par sa structure des plus élémentaire ainsi que par sa simplicité physique, apprendre le HTML pour integrer un ensemble de pages web et les rendre cohérentes entre elles ne nécessite aucune compétence en terme de langage de programmation. On peut écrire du HTML avec un éditeur de texte de base (Notepad, ou Simple Text), ou en utilisant un traitement de texte à condition d enregistrer le fichier au format «texte seulement , avec l extension.html. On peut également utiliser des éditeurs à interface d intégration accompagnée de type Dreamweaver, mais il est toutefois recommandé de bien connaître la base du langage pour les utiliser correctement afin d en optimiser les flux de production. A l arrivée, la phase la plus délicate de la construction d un produit de communication interactive ne réside pas dans son intégration mais plus dans la compréhension et l application des process et méthodes qui vont rendre sa création plus fonctionnelle, fluide et efficace. Ce que nous allons voir ensemble... 5 02. Introduction auw principes généraux du webdesign & première maquette I. GENERALITES II. III. IV. un peu d ordre et de méthode le contenu l architecture 1. Arborescence 2. Liens 3. Modularité V. la forme 1. Zoning 2. Format technique 3. Format visuel 6 02. Introduction au webdesign I. GENERALITES Avant de se lancer dans l habillage graphique ou même l intégration d un produit, il convient de réfléchir à sa finalité et d en définir le contenu, l architecture, et la forme générale... Pour ce faire des outils sont à votre disposition : le brief créatif, le benchmark de referencement sectoriel, une bonne connaissance de la typologie, des contraintes d intégration et de l architecture de l information des sites internet (cf. Methodologie des metiers du design interactif). Ajoutez à l ensemble un gout prononcé pour la culture design et ses publications, votre curiosité naturelle, une bibliothèque de sources graphiques bien fournie (images bitmap & vectorielles, fontes, brosses photoshop...) et un peu de talent... mais n oubliez jamais qu au début tout commence toujours par une page blanche et un stylo pour esquisser vos premières recherches. II. un peu d ordre et de méthode Avant même d envisager toute activité productive, prenez le temps d adopter une logique de traitement et d ordonnancement de vos dossiers de travail. Travailler avec une nomenclature de classification redondante vous permettra de gagner un temps précieux lors du développement de projets futurs. Bien qu en la matière il n existe aucune règle pré-établie, il vous est conseillé d adopter la nomenclature suivante : # production # année # n de dossier_nom du client # admin tous documents de travail fournis ou crées (brief, benchmark, charte graphique etc...) # logos docs.jpg basse définition en racine # eps docs illustrator # psd docs photoshop # maquette docs.jpg en racine # psd docs photoshop # print docs.jpg basse définition en racine # indd docs indesign # eps docs illustrator # pdf docs exportés au format pré-print # psd docs photoshop # sources # images docs images (.jpg,.tiff,.png, etc...) # flash docs.fla et.swf # textes docs redactionnels (.txt,.doc, etc...) # web docs.html finaux # arborescence variable (cf. IV. l architecture) Quitte à optimiser votre process de developpement, vous pouvez même créer un répertoire «_dossier type contenant les dossiers pré-crées que vous n aurez plus qu a dupliquer er renommer à la création de tout nouveau projet 7 02. Introduction au webdesign III. le contenu La définition du contenu de tout produit de communication interactive est certainement un des points les plus important à dégager en amont du projet. C est sa définition exhaustive qui vous permettra de calibrer correctement le contenu de chaque rubrique et donc de le valoriser de façon la plus efficace possible. Il n est en effet rien de plus désagréable à consulter qu une page au contenu mal calibré, soit parce que trop «vide soit parce que trop «riche en information. Une bonne définition des contenus donnera à vos visiteurs l envie de revenir sur votre produit, c est donc une phase de construction à ne surtout pas négliger. Maîtrisez le sujet abordé : Même si vous n êtes pas familier du produit traité, prenez le temps de vous renseigner sur ce dernier, vous serez pâr la suite plus à l aise lorsqu il s agira d architecturer l info. Dégagez les principales rubriques : Soyez à même de proposer un rubriquage le plus cohérent possible par rapport au produit à traiter ; ce faisant en devancant la demande du client vous eviterez l ecueil d une arborescence mal équilibrée. Préparez vos sources : Réunissez et contrôlez textes, paragraphes, orthographe, images, contenus interactifs... plus vous aurez une vision complète de la quantité de contenu à integrer, plus votre produit sera cohérent et efficace. IV. l architecture Sous peine de courir très vite à la catastrophe (dans le cas de produits à la profondeur conséquente et/ou évolutive) et de perdre un temps précieux lors de la phase d intégration, dégagez au plus tôt l architecture physique (arborescence) de votre site. 1. Préparez l arborescence de votre site. Dans le dossier «web . Il s agit en fait de la création/localisation physique des dossiers qui vont accueillir vos pages. A l instar de votre dossier de travail une bonne nomenclature de dénomination de toute arborescence est essentielle à l accompagnement d un travail propre et clair. # web index.html fichier html de la page d accueil style.css feuille de style du produit javascript.js moteurs javascript du produit # images dossier des images communes à TOUTES les pages du site (fonds, navigation, etc...) # nom de rubrique_01 dossier de la rubrique index.htm fichier html de la page de la rubrique # images dossier des images communes à la rubrique UNIQUEMENT # nom de rubrique_02 dossier de la rubrique index.htm fichier html de la page de la rubrique # images dossier des images communes à la rubrique UNIQUEMENT # etc... dossier de la rubrique index.htm fichier html de la page de la rubrique # images dossier des images communes à la rubrique UNIQUEMENT NB : En raison des standards referentiels (google et autres moteurs de recherche), votre première page (page d accueil, homepage,...), doit se nommer index.html. Il est de plus préférable que les noms de vos pages é dossiers ne dépassent pas 8 caractères. 8 02. Introduction au webdesign 2. Spécifiez les liens vers vos différentes pages. Pour bien visualiser la navigation entre les pages de votre produit, rien ne vaut un bon croquis qui vous permettra de formaliser correctement cette dernière lorsque vous la formaliserez physiquement dans votre code (cf. Methodologie des metiers du design interactif / 08. Architecture de l information). 3. Modularité du produit. En fonction de sa profondeur et/ou de la commande client, pensez à architecturer votre produit pour qu il puisse, au cas échéant, accueillir de nouvelles rubriques. Dans cette optique votre maquette se doit de ne pas être trop «rigide graphiquement parlant. V. la forme 1. Zoning Afin de faciliter l intégration du code avec un éditeur html, n hésitez pas à réaliser un gabarit structurant de votre future maquette faisant apparaitre le «zoning de votre produit ; ceci également dans le but d affecter aux éléments des côtes en pixels pour une mise en page soignée. Dessinez un premier croquis de votre produit Spécifiez les côtes en pixels 2. Format technique Le developpement d un produit de communication interactive, de par la finalité de son support de diffusion (écran) ne s envisage pas de la même manière qu un produit imprimé. Voiçi un rappel des différences principales à prendre en considération lors de la création de la maquette : (cf. Methodologie des metiers du design interactif / 09. Contraintes html des projets de communication interactive) 9 02. Introduction au webdesign 3. Format visuel A contrario de l édition de documents destinés à l imprimerie (dans un format fixe donc), l un des paramètres les plus importants à prendre en compte lors de la construction d un produit de communication interactive est la modularité du support final. En effet, dans l univers de la création interactive vous allez vous heurter à la modularité de... La multiplicité des plateformes MAC / PC La multiplicité des système d exploitation MAC OS X / WINDOWS XP, Vista, Seven / LINUX La multiplicité navigateurs OPERA / SAFARI / FIREFOX / INTERNET EXPLORER 6, 7, 8 La diversité des définitions d écrans 1024x768 / 1152x864 / 1280x1024 / 1600x pour ne citer que les paramètres les plus importants à considerer. Nous aurions pû aussi citer la puissance des connexions proposées par les fournisseurs d accès ou bien encore la qualité d affichage des couleurs à l écran et la puissance des machines. Il est donc essentiel lors de la création d une interface de penser à tout ces paramètres pour éviter de vous confronter à un conflit (voir une impossibilité) d intégration d élément lors de la découpe de ce dernier. Pour eviter les migraines, et dans le cadre de la construction d un produit classique à diffusion d information verticale (ceci excluant de facto les formats et expérimentation plus exotiques) il est conseillé de travailler à partir d un gabarit au format max de 1600x1200 pixels incluant une «zone utile centrée de 1000 pixels de large 03. HTML, les bases I. introduction II. III. IV. LE squelette d une page 1. L en tête / HEAD 2. Le corps / BODY les balises 1. Généralités 2. Balises BLOC vs. INLINE les attributs V. quelques regles simples pour débuter 11 03. HTML, les bases I. introduction Comme nous l avons vu dans le premier chapitre, le HTML est un langage de description qui pour formater et mettre en page ses contenus utilise des balises (tags) délimitées entre crochets et affinées dans leur formes par des attributs. A l aide de ces attributs et des valeurs insérées, vous allez définir la forme de votre texte (gras, italique, polices...), inclure des images, des animations, de la vidéo, du son, et des liens vers d autres pages... qui seront ensuite interprétées par les différents navigateurs pour en faire apparaitre le contenu sur votre écran II. LE squelette d une page Une page HTML est divisée en deux parties : l en-tête (HEAD) et le corps (BODY) de la page... html head title Le titre de la page /title /head body font face= arial size= 1 texte /font /body /html 1. L en tête / HEAD Invisible à l écran, cette partie regroupe toutes les informations nécessaires à un bon affichage de votre page par les différents navigateurs Internet. Dans cette partie vont se joindre : La balise title : Pour le titre de la page title titre de la page /title Les balises meta : Aussi appellées «meta-balises . Principalement utilisées pour l indexation et le référencement des sites par les moteurs de recherche, ces dernières sont devenues facultatives, voire obsolètes. Les seules balises absolument nécessaires à une page sont TITLE et DESCRIPTION. meta title= nom du site meta description= description du site Le character set : HTML etant optimisé pour une utilisation en langue anglaise (langage n utilisant pas d accent), il vous est plus que fortement conseillé d appliquer une méta balise de définition d alphabet prenant en compte ces derniers sous peine d être condamné à les signigfier physiquement dans le code meta http-equiv= content-type content= text/html; charset=iso L appel des feuilles de style : style type= text/css ... /style pour un style interne à la page et appliqué à une balise de type inline link rel= stylesheet type= text/css href= monstyle.css pour une feuille de style externe à la page L appel des javascript : Utilisé pour les parties dynamiques de votre page script src= javascript.js type= text/javascript charset= iso /script 2. Le corps / BODY C est la partie où, toujours grâce à l utilisation des balises, vous intégrerez les différents éléments de votre page visibles à l écran : texte, hyperliens, images, animations, vidéo, son... 12 03. HTML, les bases III. les balises 1. Généralités Les balises sont des séquences de caractères interprétées par les navigateurs Web. Lorsque l on regarde le contenu d une page HTML, on repère assez facilement les balises HTML, ce sont les portions de texte semblables à celle-ci : B ceci est du gras /b Une balise est facilement identifiable, elle est constituée d un mot (ou plusieurs dans certain cas) encadrée par les signes inférieur et supérieur . La plupart des balises doivent être fermées. La majorité des balises servent à la mise en page (texte en gras, tableaux...), mais toutes ne sont pas dédiées à la mise en page des documents, en effet, le HTML permet par exemple de donner des informations sur le document lui même (informations qui ne seront pas affichées), d appeler des fichiers externes comme des images, des animations Flash, des sons... Etant donné que c est un langage de description, il n est pas sensible à la casse, en effet on peut aussi bien écrire : B mot en gras /b que b mot en gras /b 2. Balises BLOC vs. INLINE Bien que la définition de cette notion soit un peu prématurée à ce stade (nous y reviendrons lorsque nous aborderons l utilisation des CSS), il s agit d une notion essentielle à prendre en considération. Dans l immédiat gardez en memoire qu il y a deux type de balises : les balises de type BLOC : dont le développement vertical est généralement dédié aux définitions structurelles des contenus de votre page (listes, tableaux, etc...) TABLE TR /TR /TABLE TD /TD les balises de type INLINE : dont le développement horizontal est généralement dédié aux définitions d apparence des contenus de votre page (images, textes, etc...) FONT SIZE= 1 COLOR= black I B texte /B /I /FONT 13 03. HTML, les bases IV. les attributs Ce sont les spécifications particulières de chaque balise (dont nous verrons la liste afférente à chacune lorsque abordé). Ils permettent de modifier l effet de la balise ou précisent son action. Les attributs figurent après le nom des balises dans les ; ils sont séparés par des espaces et leur valeur est indiquée entre guillemets. font face= arial size= 1 texte /font Dans cet exemple concernant une ligne de texte, cette dernière a reçu une balise de définition de police de caractère font qui elle-même a reçu un attribut de famille face et de taille size V. quelques regles simples pour débuter Pratiquement toutes les balises vont par paire (balises d ouverture et de fermeture) par exemple : b et /b Ecrivez vos balises en minuscules, cela peut faciliter le transfert de votre code vers le XHTML Essayer d aérer votre code au maximum en utilisant la tabulation de votre clavier à chaque implementation descendante de code (cf. exemple de squelette de page au début de ce dossier) 14 04. La balise BODY Structure fondatrice des éléments qui seront visibles sur votre page, la balise BODY est à même de recevoir un certain nombre d attributs dont certains sont incontournables balise attribut valeurs effet body topmargin pixel définit les marges haute et basse de la page (pour I.E) leftmargin pixel définit les marges gauche et droite de la page (pour I.E
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks
SAVE OUR EARTH

We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

More details...

Sign Now!

We are very appreciated for your Prompt Action!

x