// HTML, Javascript XHTML & CSS

Dimension: px
Commencer à balayer dès la page:

Download "// HTML, Javascript XHTML & CSS"

Transcription

1 design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact

2 // 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

3 01. Introduction au langage HTML I. HISTORIQUE II. qui utilise le html? III. apprendre le html 3

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 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

13 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

14 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

15 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) marginwidth marginheight bgcolor background style bgproperties scroll text link alink vlink pixel pixel hexadecimale url relatif url absolu background-repeat: no-repeat; background-repeat: x; background-repeat: y; fixed yes / no / auto hexadecimale hexadecimale hexadecimale hexadecimale définit les marges haute et basse de la page définit les marges gauche et droite de la page définit la couleur du fond définit la source relative de l image de fond définit la source absolue de l image de fond définit la non répétition du bkg (css intégrée) définit la répétition du bkg sur l axe X (css intégrée) définit la répétition du bkg sur l axe Y (css intégrée) définit si la capacité du fond à scroller avec la page définit la présence de la barre de scroll sur la page définit la couleur du texte pour la page définit la couleur des liens pour la page définit la couleur des liens actifs pour la page définit la couleur des liens visités pour la page <BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#aaaaaa" background="images/ bkg.jpg" style="background-repeat:no-repeat;" bgproperties="fixed" link="#ff0000" alink="#33ff00" vlink="#ff9900" > 15

16 05. Le texte I. Les styles II. III. IV. Les accents Les en têtes Les paragraphes V. Alignement / FERRAGE VI. VII. Les lignes horizontales Les listes 1. Les listes non numérotées 2. Les listes numérotées 16

17 05. Le texte Au sein d une page HTML le texte s implémente dans le <body> de cette dernière. Ce dernier se doit d être bien entendu lui aussi codé. Voici les codes de mise en page de texte les plus courant I. Les styles gras <b> ou <strong> <strong>texte</strong> italique <I> ou <em> <em>texte</em> souligné <u> <u>texte</u> exposant <sup> 11<sup>e</sup> siècle indice <sub> H<sub>2</sup>O Bien entendu, les styles peuvent se cumuler pour une même portion de texte. Dans ce cas, l ordre de définition des balises de style importe peu. gras & italique <em> et <strong> <em><strong>texte<strong></em> ou <strong><em>texte</em><strong> II. Les accents Même si l utilisation judicieuse d un character set Européen (gérant les les accents) placé en meta balise dans votre header est censé vous eviter ce genre de désagrément... il faut savoir que dans l absolu les accents se codent! il se peut donc que vous ayez besoin de coder un accent au format ascii ou d utiliser un caractère spécial. Pour ce faire, le principe est le suivant commencez par & puis la lettre à accentuer puis le codage de l accent et terminez par un point virgule. Ainsi pour é : vous écrirez é Ci-dessous un tableau récapitulatif des principaux codes : é é espace forcé è è à à ô ô â â ï ï ü ü œ œ ç ç ««õ õ "» Pour une liste plus exhaustive des charactères spéciaux : 17

18 05. Le texte III. Les en têtes Utilisés pour le titrage, ils changent la taille des caractères et génèrent un retour à la ligne automatique. h1 h2 h3 h4 h5 h6 <h1>titre</h1> <h2>titre</h2> <h3>titre</h3> <h4>titre</h4> <h5>titre</h5> <h6>titre</h6> IV. Les paragraphes Un document lu, c est avant tout un document aéré : il faut donc diviser le contenu de votre texte en plusieurs paragraphes. En terme de gestion du texte, les retours à la ligne dans le code, de même que les sauts de ligne et les tabulations ne sont pas pris en compte. Il faudra donc les signifier par des balises spécifiques dédiés. Lorsque vous développez vos pages, il existe deux balises qui permettent d obtenir, soit un saut de ligne, soit le commencement d un nouveau paragraphe. La balise <p> exprime le début d un paragraphe et génère un double espace. La balise de fermeture </p> est facultative La balise <br> effectue un retour à la ligne et génère un simple espace. <br> est une balise orpheline et donc ne se ferme pas.. V. Alignement / Ferrage Pour ferrer un ou plusieurs bloc de texte, on appliquera l attribut align soit aux en-têtes, soit au paragraphe. En l absence de l une ou l autre de ces balises il est toujours possible de ferrer un texte en utilisant la balise universelle <div>... balise attribut valeurs effet <Hx> <p> <div> align left right center justify aligne le texte sur la marge de gauche aligne le texte sur la marge de droite centre le texte entre les marges justifie le texte ferrage avec en-tête : <h1 align="center">titre</h1> ferrage avec paragraphe : <p align="left">texte</p> ferrage avec balise universelle : <div align="justify">texte</div> NB : Par défaut, comme toujours, l alignement du texte se fait sur la gauche. 18

19 05. Le texte VI. Les lignes horizontales Utiliser des lignes ou des filets horizontaux est très pratique pour séparer les différentes parties de votre document. Cette méthode s obtient avec la balise <hr> et ne nécessite pas de balise de fermeture. Elle possède plusieurs attributs : balise attribut valeurs effet <hr> align left aligne la ligne horizontale à gauche right aligne la ligne horizontale à droite center aligne la ligne horizontale au centre width size color noshade pixel, % de 1 à 10 hexadecimale sans définit la largeur de la ligne définit l épaisseur de la ligne définit la couleur de la ligne (uniquement I.E) s il est présent, l effet d ombre 3D est annulé <hr width="200" align="left" color="#ff0000" noshade> VII. LISTES La liste est une balise de type bloc relativement facile à mettre en place en html. On en distingue deux type. Toutefois, nous verrons par ailleurs que ce formatage sera géré de façon plus complète avec les CSS 1. Les listes non numérotées <ul> Avec <ul> pour «unordered list" les élements apparaissant entre les balises <li> 2. Les listes numérotées <ol> Avec <ol> pour «ordered list" les élements apparaissant entre les balises <li> balise attribut valeurs effet <ul> type disc puce circle cercle square carré <ol> sans type sans I A a chiffres arabes par défaut chiffres rommains lettres alphabétiques majuscules lettres alphabétiques minuscules <ul type="disc"> <li>premier</li> <li>deuxième</li> </ul> <ol type="a"> <li>premier</li> <li>deuxième</li> </ol> 19

20 06. Les liens I. GENERALITES II. III. IV. DENOMINATIFS DES FICHIERS ET DOSSIERS LIENS RELATIFS LIENS ABSOLUS V. liens internes à la page VI. CAS particulier, l attribut «MAIlto" 20

21 06. Les liens I. GENERALITES A l intérieur de votre document, la balise <a> permet d établir un lien hypertexte (l essence même du Web) vers un autre document ou encore vers l extérieur (vers un autre site web). Tout ce qui se trouve entre la balise <a> et </a> sera considéré un lien et apparaîtra par défaut souligné à l écran. balise attribut valeurs effet <a> href url relatif définit la source relative du document url absolu définit la source absolue du document target title name style _self _blank _parent _top variable à définir variable à définir variable à définir appelle la page cible dans le cadre d appel appelle la page cible dans une nouvelle fenêtre appelle la page cible dans le cadre parent (de niveau immédiatement supérieur) appelle la page cible dans la fenêtre hôte (par-dessus le FRAMESET) définit une description du lien (identique à l attribut ALT pour une image) définit une identité au lien définit une feuille de style <a href="fichier.html" title="nomdufichier" target="_blank">texte</a> II. DENOMINATIFS DES FICHIERS ET DOSSIERS Les noms de vos fichiers et de vos dossiers vont constituer vos urls ; sachant que c est un des premiers endroits que les moteurs de recherche vont analyser pour trouver les mots-clés, il est judicieux de choisir des noms de dossiers en rapport avec le contenu de vos pages. Par exemple une page portfolio, aura plus de chances d être trouvée si l url est portfolio/index.htm que 02/index.htm Les accents, les espaces et les caractères de ponctuation sont INTERDITS dans les noms de dossiers et de fichiers, il est néanmoins possible d inclure des tirets et des tirets bas (underscore). Il est recommandé de n utiliser que des minuscules, car une fois vos pages sur un serveur, les urls deviennent sensibles à la casse. index.htm" N EST PAS la même chose que INDEX.htm" 21

22 06. Les liens III. LIENS RELATIFS Lorsqu on crée des liens il faut indiquer le chemin du fichier. Si on se trouve dans le même répertoire, il suffit d indiquer le nom de la page. <a href="ficher.html">texte</a> Si le fichier se trouve dans un autre dossier, il faut indiquer le chemin d accès au fichier. En cas d arborescence descendante <a href="dossier/fichier.html">texte</a> En cas d arborescence montante <a href="../index.html">texte</a> Ici../ permet de remonter d un niveau dans l arborescence. En cas d arborescence à 2 niveaux <a href="../../index.html">texte</a> Pour aller d un fichier qui se trouve dans un dossier vers un fichier qui se trouve dans un autre dossier, il faut monter l arborescence pour redescendre. <a href="../dossier/fichier.html">texte</a> Ici../ permet de sortir du dossier en cours, puis il faut redescendre dans l arborescence et indiquer dans quel dossier on veut aller. IV. LIENS ABSOLUS Généralement lorsque l on cherche à placer un lien vers un site externe à celui qui est en cours de développement, il faut indiquer ce dernier dans sa version complète et conforme au protocole HTTP (ou autre). Le principe de création des liens absolus est le même que pour les liens relatifs. <a href="http://www.google.com">texte</a> V. liens internes à la page Les liens internes permettent de se déplacer à l intérieur d un même fichier html sans que le visiteur soit obligé de faire «scroller" la fenêtre du navigateur. L utilisateur va donc cliquer sur un lien et il sera amené vers la destination du lien interne. Pour cela deux étapes sont nécessaires : Définir la cible de destination du lien grace à l attribut name <a name="haut">texte</a> et associer ce même nom de destination au lien précédé d un diese. <a href="#haut">lien vers le haut de la page</a> Il n est pas nécessaire, dans ce cas précis, de mettre un texte ou une image, entre les balises d ouverture et de fermeture, mais le nom ne doit pas contenir d espaces, ni d accents, ni de caractères spéciaux. 22

23 06. Les liens VI. cas particulier, l attribut «MAIlto" Cas particulier parmis les attributs de la balise <a>. Il s agit d un lien de messagerie qui fait apparaître le client de messagerie du navigateur (Outlook Express pour IE par exemple). <a Pour prédéfinir l objet du mail vous pouvez rajouter?subject= au corps de l attibut... <a objet de votre mail">contact</a> 23

Introduction à Expression Web 2

Introduction à Expression Web 2 Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer

Plus en détail

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

Plus en détail

Version 4.0. Multinet Ressources Inc. Page 1 sur 13

Version 4.0. Multinet Ressources Inc. Page 1 sur 13 Version 4.0 Page 1 sur 13 Introduction Lorsque vous obtenez l accès à Méganet, votre site est déjà construit. C est-à-dire qu il a fait l objet d une étude de style selon les couleurs de votre entreprise

Plus en détail

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

Compte rendu de PHP MySQL : création d un formulaire de base de données

Compte rendu de PHP MySQL : création d un formulaire de base de données REVILLION Joris Décembre 2009 3EI Compte rendu de PHP MySQL : création d un formulaire de base de données Objectifs : Le principal objectif de ce cours est de découvrir et de nous familiariser avec le

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. 1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

Partie HTML TD 6 : Liens hypertexte et formulaires

Partie HTML TD 6 : Liens hypertexte et formulaires Partie HTML TD 6 : Liens hypertexte et formulaires 1. Les liens hypertextes Ils permettent la navigation dans les sites Web. Il y a 3 types de liens : - Les liens internes à un site - Les liens internes

Plus en détail

TP 8 : Créer son site web de D à Z...

TP 8 : Créer son site web de D à Z... TP 8 : Créer son site web de D à Z... Présentation Nous allons tenter de créer en 2 ou trois séances un site WEB de toute pièce. Vous devrez choisir un thème (ce que vous voulez, ou presque...). Vous établirez

Plus en détail

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne.

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne. Généralités Dans le générateur d états des logiciels Ciel pour Macintosh vous avez la possibilité de créer différents types d éléments (texte, rubrique, liste, graphiques, tableau, etc). Nous allons détailler

Plus en détail

Créer un site internet (ou des pages)

Créer un site internet (ou des pages) Ce qu il faut savoir avant de commencer Driss SABRI Une page Web est un outil de communication pour lequel on a des contraintes spécifiques 1. avant d en créer il faut se poser les questions habituelles

Plus en détail

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet!

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet! Créez en quelques minutes votre site Internet! SOMMAIRE : Choisir une interface graphique - Nommez votre site... page 03 5 étapes de création... page 04 Les outils de création graphique... page 05 Mise

Plus en détail

Optimiser les e-mails marketing Les points essentiels

Optimiser les e-mails marketing Les points essentiels Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement

Plus en détail

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS En renommant, déplaçant ou supprimant des images déjà insérées dans des pages, ou en renommant, déplaçant ou supprimant des sous-dossiers, les images

Plus en détail

GUIDE DE L UTILISATEUR

GUIDE DE L UTILISATEUR GUIDE DE L UTILISATEUR Version 3 C est parti pour gérer, modifier et mettre à jour votre site I-set! Avec simplicité, rapidité et en toute autonomie SOMMAIRE DÉMARRER CONSTRUIRE & GÉRER CONSULTER 1. Introduction:

Plus en détail

Le HTML. Structure de Base... 2

Le HTML. Structure de Base... 2 Le HTML Structure de Base... 2 Balise ... 2 Balise ... 2 Autres balises de mise en forme du texte... 2 Balise ... 2 Balise ... 3 Balise ... 3 ...

Plus en détail

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation Interactive 2.0 Manuel d utilisation 1 Contenu Chapitre 1 : L Arborescence... 3 Créer un menu.... 3 Ordonner les menus... 6 Destruction d un menu.... 6 Chapitre 2 : Les pages... 7 Titre de votre page....

Plus en détail

Portail des communes Guide Référent ville

Portail des communes Guide Référent ville Portail des communes Guide Référent ville Services aux communes Introduction Vous êtes Référent pour votre commune et venez de recevoir vos identifiants de connexion à l ENT école. Ce document va vous

Plus en détail

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

Nvu - KompoZer. Table des matières. Tuto rapido

Nvu - KompoZer. Table des matières. Tuto rapido Nvu - KompoZer Table des matières 1. Démarrage rapide...2 1.1. Créer une nouvelle page...2 1.2. Ouvrir une page existante...2 1.3. Enregistrer une page...2 2. Utiliser KompoZer...3 2.1. L'interface...3

Plus en détail

Fiche n 4 Utilisation de Kompozer Table des matières

Fiche n 4 Utilisation de Kompozer Table des matières Fiche n 4 Utilisation de Kompozer Table des matières 1-Travail préparatoire...1 1.1-Contraintes sur les noms de fichier...1 1.2-Préparation du dossier de stockage...1 1.3-Barre d'outils...1 1.4-Création

Plus en détail

1 Module 1 : feuille de style, position des blocs, nombre d éléments

1 Module 1 : feuille de style, position des blocs, nombre d éléments Plugin d'habillage d'eva-web 4 Le plugin d'habillage d'eva-web permet de : adapter la position, la taille des divers éléments la composant choisir les couleurs de fonds des divers secteurs choisir la taille,

Plus en détail

Activation et personnalisation de votre site mobile

Activation et personnalisation de votre site mobile Activation et personnalisation de votre site mobile Page 1 / 1 Table des matières 1. Activation de la version mobile 3 2. Personnalisation de la version mobile : premiers pas 2.1. Apparence générale et

Plus en détail

Sites web propriétaires

Sites web propriétaires Ce document est disponible à : C:\Users\pc_samba\Documents\Doc sites prop.docx Sommaire 1 Introduction... 3 2 Création du mini-site... 4 2.1 Autorisation de création... 4 2.2 Création de votre site Web...

Plus en détail

Vade-mecum des «raccourcis typographique» dans SPIP

Vade-mecum des «raccourcis typographique» dans SPIP Vade-mecum des «raccourcis typographique» dans SPIP Fonctionnalités Méthodes Commentaires Intertitre {{{le titre}}} Le texte entre triples accolades est affiché comme un titre. Changement de Cliquer deux

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

Plus en détail

Bernard Lecomte. Débuter avec HTML

Bernard Lecomte. Débuter avec HTML Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.

Plus en détail

Prise en main du traitement de texte : écrire une lettre

Prise en main du traitement de texte : écrire une lettre 22 janvier 2013 p 1 Prise en main du traitement de texte : écrire une lettre Pour permettre au plus grand nombre de réaliser cet exercice, nous utiliserons le logiciel libre Libre Office. Vous pouvez le

Plus en détail

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86 Plan du travail Chapitre 1: Internet et le Web Chapitre 2: Principes d Internet Chapitre 3 : Principaux services d Internet Chapitre 4 : Introduction au langage HTML 2014/2015 Cours TIC - 1ère année MI

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

>> Ajouter une page web Ordre Lien urlpage titre description Actif Lien au menu niveau cliquable type Consulter Enregistrer

>> Ajouter une page web Ordre Lien urlpage titre description Actif Lien au menu niveau cliquable type Consulter Enregistrer 1 C R É AT I O N D E S PAG E S D É S I R É E S > Pour ajouter des pages au site, cliquer sur >> Ajouter une page web > Des champs blancs à remplir apparaissent. L Ordre est le rang qu occupera cette page

Plus en détail

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

Plus en détail

Création WEB avec DreamweaverMX

Création WEB avec DreamweaverMX Creation Web avec DreamweaverMX MX Initiation Sommaire.preparation.mise en forme.liens hypertextes.images.liens sur images.images avec zones sensibles.images survolees.liens de type courriel.apercu dans

Plus en détail

Aide à l utilisation du logiciel IziSpot.Mobi

Aide à l utilisation du logiciel IziSpot.Mobi 1 Sommaire 1. Description logiciel (explication des menus)... 3 1.1. Description de la barre de menu... 3 2. Onglet configuration... 4 2.1. Gestion du logo... 4 2.1.1. Affichage du zoom... 4 2.1.2. Disposition

Plus en détail

Réaliser une page du site http://la-ba.lyceegutenberg.net

Réaliser une page du site http://la-ba.lyceegutenberg.net Réaliser une page du site http://la-ba.lyceegutenberg.net Réaliser une page du site http://la-ba.lyceegutenberg.net Récupérer les éléments récupérer sur le bureau de votre ordinateur à partir du serveur

Plus en détail

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Olivier BOEBION 12/02/2004 1 Le point de départ 1.1 Et la lumière fut... A la fin des années 1980, Tim Berners-Lee travaillant

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

Publier des données sur le Web

Publier des données sur le Web Publier des données sur le Web Introduction Microsoft Excel fournit les outils dont vous avez besoin pour créer et enregistrer votre classeur sous forme d une page web et le publier sur le Web. La commande

Plus en détail

Création de page web avec Dreamweaver 2.0

Création de page web avec Dreamweaver 2.0 Création de page web avec Dreamweaver 2.0 Guide d accompagnement pour Windows avril 2002 Suzanne Harvey Responsable RÉCIT suzanne.harvey@prologue.qc.ca http://www.apinfo.qc.ca http://www.cssh.qc.ca/se/recit

Plus en détail

MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA

MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA OBJECTIFS : manipuler les fenêtres et l environnement Windows, gérer ses fichiers et dossiers, lancer les applications bureautiques présentes sur son poste. PUBLIC

Plus en détail

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...

Plus en détail

Guide Ultra-book / 2012

Guide Ultra-book / 2012 Guide Ultra-book / 2012 Avant de commencer Le logiciel Ultra-book est optimisé pour les derniers navigateurs web standards : Firefox 10 ou 11 Chrome 18 Safari 5 Vous trouverez ces navigateurs en téléchargement

Plus en détail

Utilisation de l éditeur.

Utilisation de l éditeur. Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7

Plus en détail

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles Index A affichage, CSS 180 album photos, créer 83 arrière-plan, CSS 152 images 152 Attributs de balises HTML action 90 align 71 attributs communs 131 background 39 border 39, 70 cellpadding 70 cellspacing

Plus en détail

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une

Plus en détail

Initiation à Dreamweaver

Initiation à Dreamweaver Benjamin Godefroy Redouane Zarghoune Initiation à Dreamweaver SI28 Ecriture interactive et multimédia Automne 2004 Organisation du TD Préambule : Introduction au HTML Présentation de Dreamweaver Exercices

Plus en détail

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée. Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le

Plus en détail

OPEN OFFICE.org. Sommaire :

OPEN OFFICE.org. Sommaire : Le traitement de texte avec : OPEN OFFICE.org OpenOffice Writer est la partie traitement de texte d'openoffice. org, la suite bureautique libre. Cette suite bureautique est téléchargeable librement et

Plus en détail

Publier dans la Base Documentaire

Publier dans la Base Documentaire Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

Plus en détail

Gérer un site internet simple

Gérer un site internet simple TUTORIEL Gérer un site internet simple Pourquoi avoir un site internet? Table of Contents Table of Contents... 2 Étape 1 : créer un compte Google (Gmail)... 3 Etape 2 : créer un site internet Google...

Plus en détail

Web HTML. Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr

Web HTML. Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr Web HTML Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr 1 Plan Fonc-onnement du web Le langage HTML 2 Web : Introduc;on Réseau : mise en commun de ressources (données, imprimantes, ) Internet : Interconnexion

Plus en détail

SITE WEB. Définition. Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau

SITE WEB. Définition. Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau SITE WEB Définition Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau Comment mon site est sur internet Je crée mon site sur mon ordinateur, en local.

Plus en détail

EXCEL 1 - PRISE EN MAIN

EXCEL 1 - PRISE EN MAIN EXCEL 1 - PRISE EN MAIN I - Qu est-ce qu un tableur? Excel est un logiciel permettant d élaborer des feuilles de calculs automatiques présentées la plupart du temps sur de grandes feuilles quadrillées.

Plus en détail

Créer un nouveau site internet Lions e-clubhouse

Créer un nouveau site internet Lions e-clubhouse Créer un nouveau site internet Lions e-clubhouse L application Lions e-clubhouse www.e-clubhouse.org/application.php Nous sommes très heureux de pouvoir diffuser une nouvelle image du Lions Club International

Plus en détail

Un portail-cdi avec Google.

Un portail-cdi avec Google. Un portail-cdi avec Google. Le moteur de recherche Google, tout le monde connaît. Mais Google c est aussi un ensemble de services souvent gratuits tels qu une messagerie (Gmail), un agenda en ligne, la

Plus en détail

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1 Guide d'administration du site Internet Page 1 Scolasite permet de créer rapidement un site Internet, sans connaissances techniques particulières. Spécialement destiné aux établissements scolaires, son

Plus en détail

Collège Lionel-Groulx Service du soutien à l enseignement. PowerPoint 2007. Note de formation

Collège Lionel-Groulx Service du soutien à l enseignement. PowerPoint 2007. Note de formation Collège Lionel-Groulx Service du soutien à l enseignement PowerPoint 2007 Note de formation Johanne Raymond Automne 2009 Table des matières Interface... 1 Éléments de l interface graphique... 2 Bouton

Plus en détail

Introduction à HTML et CSS

Introduction à HTML et CSS ENS de Cachan Introduction à HTML et CSS Françoise Tort Chargement d'une page Web h"p://site.chemin./page.html navigateur requête.html.css.jpg.mp3 serveur web fichiers Le navigateur web traduit les pages,

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

Guide d utilisation de l application Atlantis

Guide d utilisation de l application Atlantis Guide d utilisation de l application Atlantis Sommaire : - Saisir une journée, page 3 - Cartographie, page 5 - Rapports, page 8 - Carnet de suivi, page 9 - Veille sanitaire, page 10 - Rappel, page 12 Page

Plus en détail

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0)

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0) G U I D E D U T I L I S AT I O N Publishare Plate-forme de gestion de contenu Module Article PubliShare utilise la librairie javascript (AJAX - Web.0) Sommaire Généralités Schéma de navigation Identification

Plus en détail

Internet. Principes généraux Création de site web Langage HTML

Internet. Principes généraux Création de site web Langage HTML Internet Principes généraux Création de site web Langage HTML Internet Principes généraux L a n o t i o n d e r é s e a u Réseau : ensemble d interconnections permettant une communication Ex : réseau téléphonique,

Plus en détail

Initiation Word_ Mod 1.doc Module 1. Avant propos.

Initiation Word_ Mod 1.doc Module 1. Avant propos. Initiation WORD. Module 1 : La présentation de Word Système d exploitation utilisé : Windows XP Service Pack 2 Créé par Xavier CABANAT Version 1.0 Document créé par Xavier CABANAT Page 1 sur 9 Avant propos.

Plus en détail

MANUEL D UTILISATION DE VOTRE SITE INTERNET

MANUEL D UTILISATION DE VOTRE SITE INTERNET MANUEL D UTILISATION DE VOTRE SITE INTERNET SOMMAIRE PRESENTATION 3 IDENTIFICATION.. 4 LE MENU (paramètres, contenu, divers).... 5 MENU PARAMETRES (mes coordonnées, mes photos, mes menus, mon bandeau).

Plus en détail

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

Plus en détail

Création du site dans Dreamweaver :

Création du site dans Dreamweaver : CHARGER, CREER et ENREGISTRER 1. Se connecter au RESEAU du COLLEGE avec tes 2 mots de passe 2. Charge le logiciel Au lancement du logiciel, l écran suivant s affiche : Palette des objets Lanceur Zone de

Plus en détail

PROCÉDURES D ÉDITION. Guide de l usager TYPO3

PROCÉDURES D ÉDITION. Guide de l usager TYPO3 Guide de l usager TYPO3 Sommaire Connexion à TYPO 3...5 Gestion des pages dans TYPO 3...6 Ajouter une nouvelle page...7 Déplacer ou copier une page de l arborescence... 11 Supprimer une page... 12 Ouvrir

Plus en détail

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

Procédurier des principales fonctions

Procédurier des principales fonctions SYSTÈME DE PUBLICATION POUR L INTERNET PARTAGÉ SQUELETTE SARKA Procédurier des principales fonctions 2012-2013 avec éditeur de texte TinyMCE DOCUMENT DE TRAVAIL Le site de référence pour les formations

Plus en détail

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet Création de sites web INF0326 Outils bureautiques, logiciels et Internet Plan Création de pages web HTML et CSS Création de sites web avec WordPress Créer des pages web Partie 1 Système hypertexte Un système

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

Microsoft WORD. Sommaire :

Microsoft WORD. Sommaire : Le traitement de texte avec : Microsoft WORD Sommaire : 1 Le traitement de texte : usages typographiques ITALIQUE Règles Typographiques On se sert de l italique pour attirer l attention sur un mot, sur

Plus en détail

Créer des tableaux. Définir un style de tableau PRATIQUE. AutoCAD 2005

Créer des tableaux. Définir un style de tableau PRATIQUE. AutoCAD 2005 AutoCAD 2005 Créer des tableaux Un tableau est un cadre dans lequel des données texte peuvent être disposées en colonnes et en rangées. Ses propriétés, mémorisées dans un style, lui permettent de pouvoir

Plus en détail

Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche?

Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche? 9 Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche? Le trafic d un site internet Le référencement naturel Les freins

Plus en détail

OP4. BD & Web. Résumé de cours. Partie II : HTML 4.0

OP4. BD & Web. Résumé de cours. Partie II : HTML 4.0 Univ.Montpellier II 2005 M. Hascoët OP4 BD & Web Résumé de cours Partie II : HTML 4.0 M. Hascoët mountaz@lirmm.fr Université Montpellier II Place Eugène Bataillon 34095 Montpellier Cedex 05 2/5 1. Introduction

Plus en détail

Utilisation de Sarbacane 3 Sarbacane Software

Utilisation de Sarbacane 3 Sarbacane Software Tutorial par Anthony Da Cruz Utilisation de Sarbacane 3 Sarbacane Software Ambiance Soleil 17 Rue Royale 74000, Annecy Sommaire 1. Présentation générale 2. Guide étape par étape 3. Astuces de l éditeur

Plus en détail

La Clé informatique. Formation Word XP Aide-mémoire

La Clé informatique. Formation Word XP Aide-mémoire La Clé informatique Formation Word XP Aide-mémoire Septembre 2003 Table des matières Édition et insertion de texte... 4 Manipulation d un document Exploration de la fenêtre de travail Bouton de maximisation

Plus en détail

Comment accéder à d Internet Explorer

Comment accéder à d Internet Explorer Comment accéder à d Pour ouvrir l application, vous n avez qu à doublecliquer sur l icône de celle-ci : ou vous pouvez encore allez le chercher par le raccourci dans la barre des tâches : Lorsque l application

Plus en détail

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web.

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web. Document 1 : client et serveur Les ordinateurs sur lesquels sont stockés les sites web sont appelés des serveurs. Ce sont des machines qui sont dédiées à cet effet : elles sont souvent sans écran et sans

Plus en détail

Manuel de mise en page de l intérieur de votre ouvrage

Manuel de mise en page de l intérieur de votre ouvrage Manuel de mise en page de l intérieur de votre ouvrage Merci de suivre strictement les recommandations de ce manuel qui a pour but de vous aider à préparer un livre dont la qualité de mise en page est

Plus en détail

TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM

TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM V1.0 TUTORIEL JCE - EDITEUR Le nouvel outil pour vos articles... Pour les plus anciens d entre vous, vous avez connu la transmission des

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

Plus en détail

Manuel utilisateur du site www.cg-corsedusud.fr. 1. L Interface Typo 3 (version 4.4.x)

Manuel utilisateur du site www.cg-corsedusud.fr. 1. L Interface Typo 3 (version 4.4.x) Manuel utilisateur du site www.cg-corsedusud.fr 1. L Interface Typo 3 (version 4.4.x) Version 1 Le contenu de ces pages est relatif à TYPO3, CMS/Framework sous licence GNU/GPL disponible sur www.typo3.com

Plus en détail

Création d un catalogue en ligne

Création d un catalogue en ligne 5 Création d un catalogue en ligne Au sommaire de ce chapitre Fonctionnement théorique Définition de jeux d enregistrements Insertion de contenu dynamique Aperçu des données Finalisation de la page de

Plus en détail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE. Documentation utilisateur Octobre 2005

MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE. Documentation utilisateur Octobre 2005 MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE Documentation utilisateur Octobre 2005 I. Principes 1.1 - Généralités Les personnes autorisées à intervenir sur le site sont enregistrées par

Plus en détail

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

Publier une Actualité ou un Evenement

Publier une Actualité ou un Evenement Site Web de l association des ingénieurs INSA de Lyon Publier une Actualité ou un Evenement Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008

Plus en détail

Institut Méditerranéen de Biodiversité et d Ecologie marine et continentale

Institut Méditerranéen de Biodiversité et d Ecologie marine et continentale Documentation pour l administration de Pages personnelles sur www.imbe.fr Update : 05/12/2013 Les pages personnelles Ouverture d une page personnelle La demande de création d une page personnelle doit

Plus en détail

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau) CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.

Plus en détail

Comment utiliser votre espace association

Comment utiliser votre espace association PORTAIL ASSOCIATIF DE LA MAIRIE DE PESSAC http://portailasso.pessac.fr/ Comment utiliser votre espace association SOMMAIRE 1 ACCES A VOTRE COMPTE... 3 2 PAGE DE BIENVENUE... 4 3 RUBRIQUE «MES INFORMATIONS»...

Plus en détail

Guide de l administrateur de rubriques du site communal d ORCHAISE

Guide de l administrateur de rubriques du site communal d ORCHAISE Guide de l administrateur de rubriques du site communal d ORCHAISE Sommaire Comment est organisé le site?... 1 Comment accéder à l interface privée?... 2 Comment se connecter?... 2 Comment modifier son

Plus en détail

4. Créer des compteurs, des curseurs ou des bandes déroulantes : a) Création des objets. b) Affectation à une cellule et réglage du pas.

4. Créer des compteurs, des curseurs ou des bandes déroulantes : a) Création des objets. b) Affectation à une cellule et réglage du pas. Logiciel Excel version Office 2007. Voici une liste non exhaustive de fonctions de ce logiciel en relation avec le stage. Au sommaire : 1. Créer des boutons de raccourci dans une barre d outils: a) Sélection

Plus en détail

Utilisation d un traitement de texte

Utilisation d un traitement de texte SÉANCE 4 Utilisation d un traitement de texte But de ce TP Ce TP a pour but de vous apprendre à utiliser les fonctionnalités de base d un logiciel de traitement de textes. Nous allons utiliser Writer est

Plus en détail

Les frames ou cadres. Prérequis. Introduction. Avec le soutien de la Commission européenne

Les frames ou cadres. Prérequis. Introduction. Avec le soutien de la Commission européenne ou cadres Dans cette fiche, nous allons vous apprendre à faire des frames ou en français «cadres». Tout et son contraire a été dit à propos des frames. En tout état de cause, tous les navigateurs Internet

Plus en détail

Formation > Développement > Internet > Réseaux > Matériel > Maintenance

Formation > Développement > Internet > Réseaux > Matériel > Maintenance Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE

Plus en détail

CMS Modules Dynamiques - Manuel Utilisateur

CMS Modules Dynamiques - Manuel Utilisateur CMS Modules Dynamiques - Manuel Utilisateur 1. Introduction Le modèle CMS Le modèle des «Content Management Systems» proposé par MUM est un type particulier de sites web dynamiques, ayant comme avantage

Plus en détail

Le tableur de la suite Open Office

Le tableur de la suite Open Office Le tableur de la suite Open Office Open Office est une suite bureautique qui comporte traitement de texte, tableur, Présentation Assistée par Ordinateur (PréAO), dessin et édition de pages Web au format

Plus en détail