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

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

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

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

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

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

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

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

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

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

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

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

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

Introduction à HTML. A. HTML et le web

Introduction à HTML. A. HTML et le web Introduction à HTML Isabelle Debled Renesson Marie-Dominique Devignes LORIA 1 2 1 Fonctionnement en mode client/serveur 1. Construction d une requête ex web : http://www.loria.fr/news CLIENT 5. Mise en

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

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

HTML. La structure habituelle d un fichier HTML. Le bloc en tête (Head)

HTML. La structure habituelle d un fichier HTML. Le bloc en tête (Head) HTML Le code HTML peut être écrit sous le Bloc Notes en format ASCII sous l extension htm et html, ou dans un éditeur HTML. Les éditeurs HTML permettent de se passer de la saisie des marqueurs, mais il

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

COURS D'INITIATION A LA CREATION DE PAGES INTERNET EN HTML

COURS D'INITIATION A LA CREATION DE PAGES INTERNET EN HTML COURS D'INITIATION A LA CREATION DE PAGES INTERNET EN HTML Denis Bourdon dbourdon@dbourdon.com Étudiant 2ème année Département Télécommunications ENSIMAG/ENSERG 1 PLAN Introduction Qu'est-ce que HTML?

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

TP 1 : HTML 4. EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows

TP 1 : HTML 4. EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows TP 1 : HTML 4 EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows : Bloc-notes ou bien EDIT en mode MS-DOS suivant votre ordinateur. Les utilisateurs

Plus en détail

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES...

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES... Diffusion de l information dans Internet Guide de création de documents Word accessibles 5 novembre 2009 OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT...

Plus en détail

LE LANGAGE HTML TODO : v1.2.1.0 07/05/2010 peignotc(at)arqendra(dot)net / peignotc(at)gmail(dot)com

LE LANGAGE HTML TODO : v1.2.1.0 07/05/2010 peignotc(at)arqendra(dot)net / peignotc(at)gmail(dot)com LE LANGAGE HTML TODO : - v.2..0 07/05/200 peignotc(at)arqendra(dot)net / peignotc(at)gmail(dot)com Toute reproduction partielle ou intégrale autorisée selon les termes de la licence Creative Commons (CC)

Plus en détail

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées HTML 5 Page de base Meta Outils pour Firefox Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées Les 6 niveaux de titre Indices et exposants Les liens L arborescence

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

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

SITE WEB Service Client. Charte graphique et technique

SITE WEB Service Client. Charte graphique et technique Service Client Charte graphique et technique 1 Sommaire a / MISE EN FORME Introduction... 3 Les logos Veolia... 4 Police & taille - généralité... 6 Police & taille gabarits principaux... 7 Palette de couleur...

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

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

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

.. 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

INITIATION AU LANGAGE HTML

INITIATION AU LANGAGE HTML INITIATION AU LANGAGE HTML I INTRODUCTION Seules les bases du langage HTML sont abordées ici. Cette initiation a pour but de "démarrer", les nombreuses ressources concernant ce langage vous permettront

Plus en détail

Bases de données et Sites Web. Li345

Bases de données et Sites Web. Li345 Bases de données et Sites Web. Li345 Remerciements à: Stéphane Gançarski et Philippe Rigaux. Ces transparents sont fortement inspirés du très bon livre : Pratique de MySQL et PHP, troisième édition Philippe

Plus en détail

Introduction à Dreamweaver

Introduction à Dreamweaver Introduction à Dreamweaver Dreamweaver est un logiciel d édition de page web. Un site est un ensemble de pages [souvent en format html, ce qui signifie HyperText Markup Language, reliées entre elles par

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

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas...

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas... Introduction et HTML Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Université Lille 1 Introduction Objectifs : Présentation des bases de la création de documents web par la découverte des

Plus en détail

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve Intro Web 2011-2012 «nous donnerons tout d'abord les définitions de l'internet, du Web et du langage XHTML. Nous expliquerons ensuite ce qu'est une url et les différentes actions induites lorsque je demande

Plus en détail

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL Prise en main de NVU et Notepad++ (conception d application web avec PHP et MySql) Propriétés Intitulé long Formation concernée Matière Présentation Description Conception de pages web dynamiques à l aide

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

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Objectifs Introduction aux langages à balises Introduction à (X)HTML / CSS Introduction à la gestion

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

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

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 le langage HTML Maxime Morge Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 Plan Pourquoi est-il nécessaire de connaître le langage HTML? Comment stucturer le contenu d une page? Données

Plus en détail

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

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

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des

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

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

La vocation purement sémantique de la page HTML a été pervertie avec les années.

La vocation purement sémantique de la page HTML a été pervertie avec les années. Bruxelles Formation CEPEGRA Olivier Céréssia 2012 PRÉAMBULE A mille lieues de la vision structuraliste de ses créateurs, la page HTML est devenue un document hybride mêlant structure, contenu, mise en

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

10 Etats rapides. Introduction

10 Etats rapides. Introduction 10 Etats rapides Introduction La génération d états récapitulatifs est l une des tâches les plus courantes et les plus élémentaires en matière de gestion de données. L éditeur d états rapides est l un

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

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

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Introduction au Web D'après les cours de Andrea G. B. Tettamanzi Fabien Givors Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Fabien Givors, 2014 1 Planning des cours

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

1. HTML. Cours Web. HyperText Markup Language (HTML) 1. HTML 1. HTML. HyperText Markup Language (HTML) Lionel Seinturier

1. HTML. Cours Web. HyperText Markup Language (HTML) 1. HTML 1. HTML. HyperText Markup Language (HTML) Lionel Seinturier Cours Web HyperText Markup Language (HTML) Lionel Seinturier Université Pierre & Marie Curie Lionel.Seinturier@lip6.fr HyperText Markup Language (HTML) HTML : langage de balisage issu de SGML Document

Plus en détail

Un code simplifié, plus léger, moins bavard. Il est plus facile à manipuler et à mettre à jour.

Un code simplifié, plus léger, moins bavard. Il est plus facile à manipuler et à mettre à jour. XHTML : introduction 1. Présentation et historique Le HTML à l origine est un langage simple destiné à la présentation des documents hypermédias. Toutefois au fil des ans, il s est avéré que le HTML ne

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

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

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

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

Introduction. Rappel : conception, interrogation et mise à jour d une base de données

Introduction. Rappel : conception, interrogation et mise à jour d une base de données Introduction Rappel : conception, interrogation et mise à jour d une base de données De nombreux sites Web ont une (ou plusieurs) BD pour gérer leur données 2/51 Pages Web statiques L utilisateurice demande

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

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 réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent La

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La

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

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

Microsoft Word barres d outils. Par : Patrick Kenny

Microsoft Word barres d outils. Par : Patrick Kenny Microsoft Word barres d outils Par : Patrick Kenny 17 novembre 2004 Table des matières Mode affichage :... 3 Barre d outils Standard :... 4-5 Barre d outils Mise en forme :... 6-7 Activation de la barre

Plus en détail

Créez votre premier site web De la conception à la réalisation

Créez votre premier site web De la conception à la réalisation Chapitre 1 : Introduction A. Introduction 17 Chapitre 2 : Les langages A. L objectif 21 B. L HTML 21 1. L état des lieux 21 2. Les éléments HTML 21 3. Les attributs 22 4. Les caractères 23 5. Les espaces

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

NPDS. Theme-Dynamic. Faite votre thème pour NPDS en HTML

NPDS. Theme-Dynamic. Faite votre thème pour NPDS en HTML NPDS Theme-Dynamic Faite votre thème pour NPDS en HTML Theme-Dynamic pour NPDS v 5.x Thèmes en HTML Réalisé par namoureuxtransi Relecture et Corrections par developpeur : developpeur@npds.org http://www.npds.org

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

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

Cours n 3 : Microsoft WORD

Cours n 3 : Microsoft WORD Cours n 3 : Microsoft WORD I. Introduction Il y a longtemps que l ordinateur a remplacé la machine à écrire, pour la saisie du texte. En effet, les gens on vite compris les apports et avantages que cela

Plus en détail

Gestion des articles. L éditeur TinyMCE CHAPITRE 10

Gestion des articles. L éditeur TinyMCE CHAPITRE 10 CHAPITRE 10 Gestion des articles INFO Dans Joomla 1.5, les contenus rédactionnels sont hiérarchisés sur trois niveaux : les sections, qui englobent les catégories, qui elles-mêmes contiennent les articles.

Plus en détail

WORD 2010 - INTRODUCTION

WORD 2010 - INTRODUCTION WORD 2010 - INTRODUCTION 1. FENETRE PRINCIPALE Les différents modes d affichage Il existe 5 modes d affichage d un document. Leurs commandes sont présentes à l onglet Affichage, dans le groupe «Affichages

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

Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr

Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr Introduction Tableaux La balise (DIV) Polices en HTML Body (corps) et Head (en-tête) attributs Forms(formulaires):

Plus en détail

Guide de l interface utilisateur d Optymo

Guide de l interface utilisateur d Optymo Guide de l interface utilisateur d Optymo Notes de lecture : dans ce document, les textes soulignés font référence à des libellés des fenêtres ou aux libellés associés à des boutons d Optymo. Les textes

Plus en détail

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?

Plus en détail

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML tableau Lévis Thériault, hiver 2009 Structure d un tableau

Plus en détail

Manuel utilisateur. Mini-site régions. Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source.

Manuel utilisateur. Mini-site régions. Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source. Manuel utilisateur Mini-site régions Version 07/2012 Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source. Un CMS est un logiciel qui permet de gérer le contenu d un

Plus en détail

Créer des pages WEB à l aide de KompoZer.

Créer des pages WEB à l aide de KompoZer. Document élève 1/14 Créer des pages WEB à l aide de KompoZer. Document élève 2/14 INTERNET : CREATION D UN SITE PRESENTATION Un site web (aussi appelé site internet par abus de langage) est un ensemble

Plus en détail

PROGRAMMER UNE PAGE WEB EN HTML ET CSS

PROGRAMMER UNE PAGE WEB EN HTML ET CSS Lycée Felix Le Dantec - Lannion PROGRAMMER UNE PAGE WEB EN HTML ET CSS 1STI2D TP8-3H NOM : PRÉNOM : CLASSE : Condition de réalisation : Travail seul Durée : 3 heures Matériel : un ordinateur sous Ubuntu

Plus en détail

Travailler avec les éléments de navigation

Travailler avec les éléments de navigation Travailler avec les éléments de navigation 10 Dans cette leçon, vous allez appliquer plusieurs types de liens à des éléments de page et notamment : créer un lien texte vers une page du même site ; créer

Plus en détail

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec

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

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

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

Microsoft Word 2003. Il existe plusieurs moyens de lancer votre traitement de texte, en voici deux :

Microsoft Word 2003. Il existe plusieurs moyens de lancer votre traitement de texte, en voici deux : 1. Lancer et fermer Word Microsoft Word 2003 Il existe plusieurs moyens de lancer votre traitement de texte, en voici deux : Double-cliquer sur l icône Word de votre bureau Windows : Microsoft Word.lnk

Plus en détail

Une fois l installation d OE faite, lancez-le. Vous tomberez sur ce premier visuel qui vous permettra de choisir de créer votre premier site web.

Une fois l installation d OE faite, lancez-le. Vous tomberez sur ce premier visuel qui vous permettra de choisir de créer votre premier site web. Le logiciel openelement est un éditeur de nouvelle génération qui vous aidera à créer un site internet quels que soient vos besoins (sites particuliers, sites vitrines, sites associatifs, sites d entreprise,

Plus en détail

Projet SITEPERSO. Activité A1 Apprentissage du langage HTML par l'exemple Tous. Compétences mises en œuvre : Ressources utiles :

Projet SITEPERSO. Activité A1 Apprentissage du langage HTML par l'exemple Tous. Compétences mises en œuvre : Ressources utiles : Compétences mises en œuvre : C 4.2.2.2 Concevoir les mises à jour à effectuer C 5.2.4.1 Se documenter à propos d une technologie, d un composant, d un outil ou d une méthode Ressources utiles : http://slaout.linux62.org/html_css/html.html

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

Langages du Web. Que savez vous???

Langages du Web. Que savez vous??? Langages du Web Que savez vous??? Le WEB World Wide Web ouwww ouweb Toile d'araignée mondiale ou la toile Le Web utilise le réseau Internet pour relier des serveurs qui, grâce aux protocoles HTTP, HTTPS,

Plus en détail

WEBDESIGNER PROGRAMME WEBDESIGNER ARTISTE ET TECHNICIEN LUMIÈRE SUR LA FORMATION

WEBDESIGNER PROGRAMME WEBDESIGNER ARTISTE ET TECHNICIEN LUMIÈRE SUR LA FORMATION ARTISTE ET TECHNICIEN LUMIÈRE SUR LA FORMATION DURÉE 70 jours de formation Module 1 - Infographiste PAO : 4 semaines de cours intensifs + 2 semaines d atelier pédagogique Module 2 Concepteur de site internet

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

Petite histoire d Internet

Petite histoire d Internet À la base, Internet est défini par des ordinateurs qui sont reliés entre eux grâce à des câbles, du WiFi ou encore des satellites, créant ainsi un réseau à échelle mondiale. Les ordinateurs communiquent

Plus en détail

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr MODULE HTML CSS Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr ORGANISATION DU MODULE 13 séances de 2 heures une partie cours une partie exercices sur machine. Modalités de contrôle : partiel en fin

Plus en détail

Cours Web nº1. P. Yger (pierre.yger@unic.cnrs-gif.fr) 14 et 18 septembre 2009. Introduction au World Wide Web et à XHTML. Internet et le Web

Cours Web nº1. P. Yger (pierre.yger@unic.cnrs-gif.fr) 14 et 18 septembre 2009. Introduction au World Wide Web et à XHTML. Internet et le Web Internet et le Web Cours Web nº1 Introduction au World Wide Web et à XHTML P. Yger (pierre.yger@unic.cnrs-gif.fr) 14 et 18 septembre 2009 P. Yger (IFIPS) Web et XHTML 14-18 Sep 2009 1 / 37 Internet et

Plus en détail