101 Réaliser et publier un site WEB

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

Download "101 Réaliser et publier un site WEB"

Transcription

1 101 Réaliser et publier un site WEB Rapport personnel de module EMF - Section informatique John Baudin Module du.2008 au.2008

2 Table des matières 1 Introduction Le XHTML Les balises Introduction Les paragraphes, les titres, les retours à la ligne Donner de l'importance à une suite de caractères Les attributs Le CSS C'est quoi le CSS Où le mettre? éléments dans la feuille Les propriétés utiles Préparation d images pour le WEB Quelques sortes de formats d'images JPEG GIF Comment mettre l'image dans le site Dans la page XHTML Dans la page CSS Les liens, la liste, le tableau et les blocs Les liens Lien vers une page d'un autre site Lien vers une page de notre site Les divisions Transformation Inline Bloc La taille Les bordures Les marges Faire flotter une div Positionner une (absolu, fixe et relatif)... 6 Absolu (absolute)... 6 Fixe (fixed)... 6 Relatif (relative)... 6 Où sera-t-elle positionner Validation des pages Introduction Structure et navigation C'est quoi un navigateur Web Internet Exploreur Mozilla Firefox... 8 Table des matières I

3 7.4 Ex: faire une bannière Web en gif Donnée Maquette Réalisation... 9 a) Nouveau document... 9 b) Les calques... 9 c) Enregistrer une image.gif Bilan synthèse Ex bouton flash Donnée Maquette Réalisation Bilan synthèse Exercice mon CV Donnée Maquette Le code Xhtml Code du CSS Bilan synthèse Ex image carte Donnée Maquette Réalisation Bilan synthèse Ex : menu CSS Donnée Maquette Réalisation Bilan synthèse Ex: corriger une boîte flottante avec spacer Donnée Maquette Réalisation Bilan synthèse Ex page à trois colonnes Donnée Maquette Réalisation Bilan synthèse Ex formulaire Donnée Maquette Réalisation a) Code b) Explication des balises Bilan synthèse Conclusion Table des matières II

4 1 Introduction Je viens de commencer le module 101 dans lequel nous allons apprendre à faire et à publier un site WEB. Avant d'arriver à ce module j'avais déjà fait un "site": un blog Mais ce qu'on va faire ce n'est pas du tout la même chose. Dans le cadre du module nous ferons des sites en XHTML tout en utilisant le CSS. Je ne m'y connais pas du tout en site mais je compte bien me lancer à fond dans ce module pour en apprendre le plus possible. 2 Le XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>bienvenue sur mon site</title> </head> <body> /* Rappel:c'est ici qu'on écrit le contenu de notre page web*/ </body> </html> <!DOCTYPE> <html> </html> <head> </head> <title> </title> <body></body> /*commentaire*/ indication que cette page sera une page en XHTML ce sont les balises principales de la page informations qui sont en en-tête entre ces balises il y a le titre de la page web c'est entre ces balises qu'on va taper le contenu de notre site le commentaire ne sera pas affiché sur le site car il n'est pas interprété par le navigateur 2.1 Les balises Introduction Une balise commence toujours par "<" et se finit toujours par ">". Il y a deux sortes de balises : Les balises paires Elles commencent par < balise> et se finit par </ balise> Les balises seules Elles sont plus rares que les balises paires et elles s'écrivent comme ça : <balise/> Les paragraphes, les titres, les retours à la ligne Les paragraphes La balise pour faire des paragraphes est <p> blabla </p> 101 Réaliser et publier un site WEB Page 1 sur 21

5 Les titres La balise de titre varie selon l'importance du titre elle va de <h1> Le titre le plus important </h1>..à. <h6> Le titre le moins important </h6> Le titre est obligé d'être dehors d'un paragraphe Les retours à la ligne La balise pour faire des retours à la ligne c'est On est obligé de la mettre dans un paragraphe Donner de l'importance à une suite de caractères <br/> Il existe plusieurs balises possibles pour mettre une suite de caractères en évidence (tout dépend de ce qu'on veut) En italique En gras En exposant En indice 2.2 Les attributs <em> mot en italique </em> <strong> mot en gras </strong> <sup> mot en exposant </sup> <sub> mot en indice </sub> Les attributs permettent de donner des précisions sur les balises. Exemple : si on insère une image avec la balise <img />. Cool on dit qu'on met une image mais l'ordinateur lui ne sait pas laquelle on va mettre donc on est obligé de préciser son emplacement. Ex: <img src="rootdir/multimedia/lim.jpg"> 3 Le CSS 3.1 C'est quoi le CSS Le CSS est un langage pour faire tout ce qui est design de notre site. On reprend toutes les balises pour donner des propriétés (police, fond, taille, ) et à ces propriétés on leur donne des valeurs (la police se sera du Arial, la taille sera de 12px, ). On va donc pouvoir créer facilement et simplement la mise en page du site. 3.2 Où le mettre? Il y a deux endroits où on peut mettre le CSS (trois en fait mais le troisième endroit n'est pas accepté en XHTLM strict). Dans un fichier.css Quand on le met dans un fichier.css il faut pas oublier de mettre un lien dans la feuille XHTML pour indiquer qu'il prendra le style de la feuille.css. Le lien est celui-ci: <link rel="stylesheet" media="screen" type="text/css" title="design" href="entrez le nom de la feuille ici" /> 101 Réaliser et publier un site WEB Page 2 sur 21

6 Dans la feuille XHTML Pour ce dernier il faut le mettre dans la balise <head> puis dans la balise <style type="text/css"> Ex: <head> <style type="text/css"> le contenu de la page CSS se trouve ici </style> </head> Nous allons le mettre dans une feuille séparé. Ainsi tous le CSS de notre site sera dans la même page. Ce qui fera que ainsi l ordinateur n aura besoin de charger le CSS qu une seul fois. 3.3 éléments dans la feuille Comme je le disais la feuille aura plusieurs éléments Ex: Les balises (les mêmes que dans la feuille XHTML) Les propriétés (ce qu'on veut modifier dans la feuille) Les valeurs (précision sur les propriétés) Balise{ p{ Propriété : valeurs ; text-align:center ; 3.4 Les propriétés utiles Texte Sorte de police Taille du texte En gras En Italique Tous en un {font-family: police1,police2, ; {font-size:indiquez la taille du texte en % ou en em; {font-weight:bold; {font-style:italic; {font: valeurs ci-dessus dans n'importe quel ordre entre virgule; Alignement du texte horizontalement A droite Centré Justifié Couleur Couleur de fond {text-align:right; {text-align:center; {text-align: justify; {color: méthode rgb ou méthode hexa ou méthode décimal; {background-color: méthode rgb ou méthode hexa ou méthode décimal; 101 Réaliser et publier un site WEB Page 3 sur 21

7 Image de fond {background-image: url de l'image Image de fond fixe {background-attachement : fixed ; Ex: {background-image:url("rootdir/multimedia/fond.png";) Décoration (lien) Décoration {text-decoration:underline (souligné) ; blink (clignotant) ; Attention le blink ne fonctionne pas sur le navigateur IE7 Autres Faire disparaître une balise {display:none; 4 Préparation d images pour le WEB 4.1 Quelques sortes de formats d'images JPEG JPEG est un format d'image très répandu. Il est bien adapté pour les photos GIF Ce format est très vieux mais il est encore utilisé par beaucoup de gens. Le seul avantage à utiliser le format.gif c'est qu'il peut être animé. 4.2 Comment mettre l'image dans le site Dans la page XHTML <div class="image"> <img src="situation de l'image " /> </div> src : donne le lien où se situe l'image Dans la page CSS.image{ float:left; width:20%; float : left; place l'image dans le texte à gauche widht : 20% ; arrange la grandeur de l'image à 20% 101 Réaliser et publier un site WEB Page 4 sur 21

8 5 Les liens, la liste, le tableau et les blocs La liste et le tableau sont des blocs donc pas besoin de les mettre dans un paragraphe contrairement au lien. 5.1 Les liens Lien vers une page d'un autre site Un lien vers un autre site s'appelle aussi un lien absolu <a href="http:// le site voulu.com">le nom du site</a> Lien vers une page de notre site Un lien vers un page de son propre site s'appelle aussi un lien relatif Il y a plusieurs sortes: Normal: Dans un sous-dossier Vers un titre <a href= "fichier.html">le nom du ficher</a> <a href= "dossier/fichier.html">le nom du ficher</a> <a href="#ancre">nom du titre</a> Ne pas oublier de mettre dans le titre : <h3 id="ancre"> nom du titre </h3> Vers un titre d'une autre page <a href="fichier.html#le titre">nom titre</a> Pour la bulle d'aide il suffit d'ajouter dans la balise <a> un title="texte d'aide" <a href= "fichier.html" title= " Ceci est un lien" > Le nom du ficher</a> 5.2 Les divisions Transformation Inline Bloc Balise(inline){ display: block; Balise (block){ display: inline; On peut mettre aussi la balise <div> Mon block </div> La taille La largeur de la div { widht : la valeur en px ; La hauteur de la div { height : la valeur en px ; Barres de défilement si trop grand { owerflow : scroll ; Barres de défilement automatiquement { owerflow : auto ; Les bordures Bordure normale noire {border: 1px solid black Bordure 3d noire { border: 1px ridge black Bordure double noire { border: 1px double black 101 Réaliser et publier un site WEB Page 5 sur 21

9 5.2.4 Les marges Marge en haut { margin-top : valeur en px, em, ; Marge en bas { margin-bottom: valeur ; Marge à gauche { margin-left: valeur ; Marge à droite { margin-right: valeur ; Marge entre les div {margin: marge du haut, marge de droite, marge du bas,marge de gauche ; La marge dans la div { padding: indem que margin ; Faire flotter une div On peut faire facilement faire flotter un block grâce à la propriété float Ex : Faire flotter à gauche {float : left ; Stopper un flottant {clear: both ; Positionner une (absolu, fixe et relatif) Pour les positionnements de div on doit tout d'abord noter comment on veut le positionner puis où on va le positionner sur la page. Absolu (absolute) Le positionnement absolu nous permet de mettre la div où on veut sur la page web. Sorte de positionnement {position : absolute Fixe (fixed) Le positionnement fixe est pareil au positionnement absolu sauf que celui-ci reste sur la fenêtre même si on descend plus bas dans la page. Sorte de positionnement {position : fixed Relatif (relative) Le positionnement fixe pour déplacer une div par rapport à sa position normale. Sorte de positionnement {position : relative Où sera-t-elle positionner Par rapport au haut de la page Par rapport à la droite de la page Par rapport à la gauche de la page Par rapport au bas de la page {top : valeur en em {right : valeur en em {left : valeur en em {bottom : valeur en em 101 Réaliser et publier un site WEB Page 6 sur 21

10 6 Validation des pages 6.1 Introduction Quand nous faisons une page nous voudrions que tout marche comme nous le voulons. Que la page s'affiche comme on le souhaite est une bonne chose mais il faut encore qu'elle suive certaines conventions. C'est pourquoi il existe des sites pour vérifier si nos pages sont dans les normes. En classe nous utilisons un module de firefox. WEB DEVELOPERc est une module téléchargeable de firefox. Avec ce module nous pouvons non seulement vérifier notre code HTML mais également notre CSS On peut aussi utiliser le system de validation du DremWeaver. Allez dans outils puis sous les modules complémentaires " Cette fenetre apparaitra. Pour le télécharger allez sous catalogue et entre «Web Developer. Installez le et voila, vous pourrez corriger votre site 101 Réaliser et publier un site WEB Page 7 sur 21

11 Grâce à "parcourir" on peut aller chercher notre page à valider Encodage : suivant l'endroit ou on habite les caractères, les valeurs, ne sont pas les mêmes alors on doit préciser. Docdiong : on précise le niveau de tolérance de la correction Puis on valide... 7 Structure et navigation 7.1 C'est quoi un navigateur Web Un navigateur web est un programme qui permet de lire le langage codé qui forme les sites (html, xhtml, ) ensuite il affiche ce que le code représente. 7.2 Internet Exploreur 7 Microsoft a enfin mis à jour IE 6 en sortant IE 7. Sortie le 8 octobre 2006 (beta), la nouvelle version d'ie répond à la concurrence. Elle implémente une grande partie du CSS et gère la transparence du PNG tout en renforçant la sécurité du logiciel. IE7 intègre un filtre anti-phishing qui permet de vérifier si le site qu'on visite n'est pas sur la liste noire de sites web falsifiés. 7.3 Mozilla Firefox Mozilla Firefox est le deuxième navigateur le plus utilisé. Il est gratuit et mis à jour par des bénévoles. Il gère très bien le CSS et le XHTML. 7.4 Ex: faire une bannière Web en gif Donnée Dans cet exercice on devait faire une bannière en image gif. Pour réussir cet exercice il faut utiliser le programme ImageReady Maquette Une bannière web ressemble à ceci bien évidement elle est animée. (La grandeur 860px sur 140px est universelle). 101 Réaliser et publier un site WEB Page 8 sur 21

12 7.4.3 Réalisation a) Nouveau document b) Les calques Ensuite on créer chaque image qu on modifie par la suite pour faire une sorte de mini film. Chaque calque est une image différente. Pour chaque calque on choisit de mettre (ou pas) les calques précédents puis on fait l animation selon nos envies. (Pour afficher l animation : fenêtre animation) c) Enregistrer une image.gif Une fois votre bannière terminée, pour l enregistrer en fichier.gif, vous devez faire un enregistrement optimisé : 101 Réaliser et publier un site WEB Page 9 sur 21

13 7.4.4 Bilan synthèse Dans l'exercice il fallait bien maîtriser l'animation. Ce n'est pas difficile mais il faut bien comprendre le système avec les yeux : si il y a "l'œil", le calque est superposé sur celui d'avant. 7.5 Ex bouton flash Donnée Dans cet exercice on devait faire un bouton flash qui changeait (si on n'est pas dessus, si on est dessus, si on clique dessus) Maquette Bouton inactif : Bouton actif Bouton clic : Réalisation Tout d'abord on doit créer ses trois images avec Photoshop. Puis on importe dans la bibliothèque du programme flash, les images. Ensuite on met quel bouton on veut dans haut, dessus, abaissé. 101 Réaliser et publier un site WEB Page 10 sur 21

14 Pour mettre le lien dans le bouton il faut aller dans fenêtre : action. Puis on tape le code suivant. on(press){ geturl("http://www.lesite.com"); Et pour finir on exporte l'animation et on le met dans notre site voici le code <p> <object type="application/x-shockwave-flash" data="nomdufichier.swf" width="150" height="35"> <param name="play" value="true" /> <param name="movie" value="accueil.swf" /> <param name="menu" value="true" /> <param name="quality" value="high" /> <param name="scalemode" value="noborder" /> <p> Texte de remplacement </p> </object></p> Bilan synthèse Je trouve que quand on fait un bouton flash comme celui-ci ça prend pas mal de temps mais à la fin on peut avoir des résultats superbes. Il ne faut pas oublier qu'on peut déjà prendre des boutons tout faits sur flash mais on a un choix limité et il n'y a jamais exactement ce qu on veut. 7.6 Exercice mon CV Donnée Dans cet exercice nous devions faire notre CV avec une photo dans le tableau mais notre photo devait être collée contre les bords et être insérée dans un tableau Maquette Le code Xhtml <table> <tr> Pour le code Xhtml je mets que le tableau car c'est le plus intéressant- </tr> <tr> </tr> <tr> <td rowspan="4" class="img1"> <img class="img1" src="image/butty_lucas.jpg" alt="moi"/> </td> <td class="td1">nom :</td> <td class="td2" >Butty</td> <td class="td1">prénom : </td> <td class="td2" >Lucas </td> <td class="td1">date de <br/>naissance : </td> <td class="td2"> </td> 101 Réaliser et publier un site WEB Page 11 sur 21

15 </tr> <tr> </tr> </table> <td class="td1"> Domicile : </td> <td class="td2">estavayer-le-lac</td> Code du CSS body{ margin: 0px; background-color:#00ff66; color:#000000; text-align:center; //obliger pour coller la page en haut #page{ border: 0px solid black; background-color:#ffcc00; padding:1em; margin:10em; margin-top:0em; table{ border-collapse:collapse; border:1px solid #000000; width:80%;.img1{.img2 {.td{.td2{.td1{ margin:auto; width:8em; vertical-align:middle; padding:0px; width: 20em; float:right; margin:1em; text-align:left; border-collapse:collapse; border:1px solid #000000; width:70%; padding: 0.5em ; font-weight:bold; width:30%; padding:0.5em; //obliger pour coller la page en haut // le tableau prendra 805 de la page //centre l'image //suprime le padding // le width du td1 + le width du td2 = 100% donc l'image prendra la place qui reste p{ text-align:justify; 101 Réaliser et publier un site WEB Page 12 sur 21

16 7.6.5 Bilan synthèse Il est difficile d'annuler complètement la marge de pixels autour de l'image il faut y aller point par point et ne pas se lancer à fond sans bien comprendre la donnée. 7.7 Ex image carte Donnée Dans cet exercice on devait créer une image qui avait des liens certains endroits Maquette Ex: si je clique dans un des carrés (on ne les vois pas sur le site) ça nous envoie sur une page qui présente la personne sélectionnée Réalisation Pour faire une image carte ce n'est pas dur car nous avons sur DremWear un outil qui le fait très bien : On sélectionne les zones qui seront des liens Puis on fait click droit lien Bilan synthèse Grâce au programme DremWear c'est facile de faire une image carte mais sans ce programme il faut taper un code 4-5 lignes 7.8 Ex : menu CSS Donnée Nous devions faire un menu qui a des éléments qui changent quand on passe dessus tout ça grâce au CSS Maquette 101 Réaliser et publier un site WEB Page 13 sur 21

17 7.8.3 Réalisation Tout d'abord il faut faire une image de par exemples 6Opx de hauteur XHTML <ul id="menu"> <li><a href="#">item n 1</a></li> <li><a href="#">item n 2</a></li> <li><a href="#">item n 3</a></li> </ul> CSS ul#menu li a{ display:block; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */ width:170px; line-height:30px; font-weight:bold; text-indent:40px; /* On décale le texte de 40px du bord gauche */ text-decoration:none; background:url(endroit ou il y l image) no-repeat 0 0; /* On met une image en background, que l'on positionne à 0px du bord gauche et 0px du bord haut */ border:1px solid #fa7979; ul#menu li a:hover{ background:url(endroit ou il y l image) no-repeat 0-30px; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */ border:1px solid #76ade0; Bilan synthèse Ce qui assez bien quand on fait un menu CSS on donne beaucoup de style au menu et contrairement aux boutons flash il ne faut qu'une image. 7.9 Ex: corriger une boîte flottante avec spacer Donnée Dans cet exercice on devait une correction d'esthétique. 101 Réaliser et publier un site WEB Page 14 sur 21

18 7.9.2 Maquette Réalisation <html xmlns="http://www.w3.org/1999/xhtml"> <!--Lucas Butty le 8 novembre > <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>boîte flottante</title> <style type="text/css"> #vert{ background-color:#00ff33; #jaune{ margin:0px; margin-right:0px; background-color:#ffff66; float:right; width:20%; #spacer{clear:both // annule le float p{ padding:1em; </style> </head> <body> <div id="vert"> <p id="jaune"> plus grand paragraphe de 20% de la largeur de la fenêtre plus grand paragraphe de 20% de la largeur de la fenêtre </p> <p > Les informaticiens et informaticiennes développent, à partir de spécifications fonctionnelles définies au préalable, </p> <div id="spacer"> &nbsp </div> //&nbsp = espace (obligatoire) </div> </body> 101 Réaliser et publier un site WEB Page 15 sur 21

19 </html> Bilan synthèse Pour cet exercice je vais retenir que &nbsp = espace et que pour annuler un float il faut utiliser {clear:both 7.10 Ex page à trois colonnes Donnée Dans cet exercice nous devions disposer plusieurs conteneurs sur la page pour que ceux-ci soient jolis à voir Maquette Réalisation Je vous présente que le Css car c'est le plus important body{ font-family:veranda, sertif; background-color:#33ffcc; margin:0px; // obliger pour coller la page en haut div{ padding:0px; margin:0px; border:0px; #conteneur{ background-color:#ffffff; width:75%; margin:auto; margin-top:0px; // obliger pour coller la page en haut 101 Réaliser et publier un site WEB Page 16 sur 21

20 h1{ h3{ border:1px solid black; text-align:center; margin-left:1em; p{ margin:1em; #entete{ margin:1em; #droite{ float:right; #milieu{ border:1px solid black; margin:0.7em; width:14%; margin:auto; width:54%; #gauche{ margin:0px; margin-left:0.7em; padding-left:0px; border:1px solid black; background-color:#ccff99; #pied{ // permet de faire fotter l'image à droite // centre le block float:left; // permet de faire fotter le menu à gauche list-style-type: none ; // suprime les puces de la liste width:18%; li{ list-style-type: none ; li a{ text-decoration:none; color:#ff0000; li a:hover{ color:#00cc33; text-decoration:underline; img{ margin-left:0.7em; width:6em; #df{ text-align:center;.spacer{ clear:both; height:1px; font-size:1px; border:none; background:transparent; // quand la souris passe dessus il fait les modification 101 Réaliser et publier un site WEB Page 17 sur 21

21 Bilan synthèse Faire le design de son site est assez difficile il ne faut pas abuser du Css et vouloir mettre tous ce qui existe dans la page. Des fois il faut savoir rester simple. La notion la plus importante dans cet exercice est de savoir comment coller la page en haut (il ne faut pas oublier de mettre dans le "body" que la marge est égale à 0 et que dans le conteneur de la page la marge du haut est aussi égale à 0) Ex formulaire Donnée Pour l'exercice des formulaires nous devions analyser la signification de chaque balise du formulaire Maquette Réalisation Css a) Code body{ margin:0em; background-color:gray; #page{ margin-top:0em; margin:auto; margin-left:3em; margin-right:3em; paddin g-left:1em; padding-top:2em; padding-bottom:2em; background:yellow; #boutoncentrer{ //suprime la marge du haut //suprime la marge du haut 101 Réaliser et publier un site WEB Page 18 sur 21

22 width:auto; text-align:center; </style> Xhtml // centre les boutons </head> <body> <div id="page"> <form //envoie le mail à l'adresse <p>nom : <input type="text" name="text1" id="text1" size="30"/> </p> <p>mot de passe : <input type="password" name="psw1" size="10"/> // zone de texte </p> <p> <textarea name="text2" rows="10" cols="40"></textarea> // zone de texte </p> <p>vos bois préférés :<br/> <input type="checkbox" name="bois" value="cerisier" checked="checked"/> Cerisier<br/> <input type="checkbox" name="bois" value="érable" checked="checked"/> Erable<br/> <input type="checkbox" name="bois" value="chêne" checked="nochecked"/> Chêne</p> <p>votre couleur préférée :<br/> <input type="radio" name="couleur" value="bleu" checked="checked"/> Bleu<br/> <input type="radio" name="couleur" value="vert"/> Vert<br/> <input type="radio" name="couleur" value="rouge"/> Rouge</p> <p>choisir un outil :<br/> <select name="outils"> <option value="1">marteau</option> <option value="2" selected="selected">tournevis</option> <option value="3">perceuse</option> </select> </p> <p>votre animal préféré :<br/> <select name="animaux" multiple="multiple" size="3"> <option value="a">chien</option> <option value="b" selected="selected">chat</option> <option value="c">lapin</option> </select> </p> <div id="boutoncentrer"> <p> <input type="reset" name="effacer" value="effacer"/> </p> <p> <input type="submit" name="envoyer" value="envoyer"/> </p> </form> </div> </div> </body> 101 Réaliser et publier un site WEB Page 19 sur 21

23 b) Explication des balises <from > </from> le contenu sera dans ces balises <form id="monform" enctype="text/plain" automatique" method="post" > Zone de texte <input type=" le type " name="le nom" value="se qu'on veut" /> Sorte de type : type="text" type="password" type="checkbox" type="radio" type="submit" type="reset" zone de texte sur une ligne texte caché (mot de passe) bouton radio bouton d'option bouton envoyer remise à zéro On peut aussi mettre une valeur par défaut <input type="radio" name="couleur" value="bleu" checked="checked"/> <textarea rows="nbr lignes" cols="nbr colonnes"> </textarea> Barre déroulement <select name="ce qu'on veut" > </select> <option value="france">france</option> <option value="espagne">espagne</option> <option value="italie">italie</option> On peut ajouter la taille de la barre dans la balise d'ouverture <select name="ce qu'on veut" multiple="multiple" size "nbr lignes" > On peut aussi mettre une valeur par défaut <option value="b" selected="selected">chat</option> zone de texte (présiser nbr de ligne et de colonne balise d'ouverture contenu contenu contenu fermeture de la balise Bilan synthèse Le formulaire est assez intéressant à mettre dans un site mais comme on n'utilise pas le PHP son utilisation est limitée par exemple on ne peut pas utiliser dans la balise <from> la méthode get (method="get") on est obliger d'utilisé méthode post (method="post"). Ex : <form enctype="text/plain" automatique" method="post" > 8 Conclusion Quand je suis arrivé à ce module je pensais que tout ce qui était Xhtml, Css serait très compliqué et que j allais être complètement largué mais au fur et à mesure que j avançais dans le module je me suis rendu compte que tout ce qui était compliqué pour moi au début devenait simple et évident. 101 Réaliser et publier un site WEB Page 20 sur 21

24 J ai eu beaucoup de plaisir à faire ce module. C est beaucoup plus simple d apprendre quand on a du plaisir a le faire 101 Réaliser et publier un site WEB Page 21 sur 21

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

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

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

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

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

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

Plus en détail

Commençons. (Bonjour, mon nom est Stéphane)

Commençons. (Bonjour, mon nom est Stéphane) Commençons (Bonjour, mon nom est Stéphane) Objectif - Vue claire de la dynamique d'une page web - Compréhension de la logique des CMS - Quelques réflexes de «bonne pratique» - La réponse à un maximum de

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

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

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

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE 11/02/14 CONTEXTE SITE WEB RÉACTIFS S. LANQUETIN ENVIRONNEMENT Clavier (standard, mini, virtuel) Souris / doigt / stylet Rotation de l écran Performances CPU et GPU Capacité de stockage GPS Mobile/fixe

Plus en détail

Introduction Web : Cours. IUT de Villetaneuse.

Introduction Web : Cours. IUT de Villetaneuse. Introduction Web : Cours 1ère année IUT de Villetaneuse. Mathieu Lacroix 1 9 septembre 2014 1. E-mail : mathieu.lacroix@iutv.univ-paris13.fr, Page Web : http://www.lipn.univ-paris13.fr/~lacroix/ IUT de

Plus en détail

LE POSITIONNEMENT CSS. Quelques notions essentielles

LE POSITIONNEMENT CSS. Quelques notions essentielles LE POSITIONNEMENT CSS Quelques notions essentielles Pour éviter ça....element{ padding: 15px; width: 98.32%; /* pas compris, mais ça déborde à 98.33% */ position: relative; /* faut pas enlever */ overflow:

Plus en détail

ANNEXE 2a : plus loin avec CSS, notion de boite

ANNEXE 2a : plus loin avec CSS, notion de boite ANNEXE 2a : plus loin avec CSS, notion de boite Tout contenu d'une balise HTML se représente à l'écran sous forme d'une boite. Cette boite est composée de 3 éléments : un conteneur, une marge intérieure

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

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

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8 Cours CSS 2013 tv - v.1.1 Sommaire Introduction aux feuilles de style 2 Constituants des pages web..................................... 2 Définition...............................................

Plus en détail

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le

Plus en détail

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises

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

UTILISATION CMS LINKEO

UTILISATION CMS LINKEO UTILISATION CMS LINKEO Table des matières 1 Synopsis... 3 2 Connexion à l'interface d'administration...4 3 Edition d'une page...5 3.1 Edition d'une page...5 3.2 Ajout d'une image...5 3.2.1 Transfert d'une

Plus en détail

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

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

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

Normes techniques 2011

Normes techniques 2011 Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique

Plus en détail

1 Utilisation du logiciel Quanta+ 2

1 Utilisation du logiciel Quanta+ 2 COURS HTML-CSS Cours HTML Page 1 Table des matières 1 Utilisation du logiciel Quanta+ 2 2 Les feuilles de style CSS 4 2.1 Définition et principe................................. 4 2.2 Mais pourquoi donc

Plus en détail

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page

Plus en détail

STID 2ème année : TP Web/PHP

STID 2ème année : TP Web/PHP STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction

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

WEB DEVELOPMENT/DESIGN

WEB DEVELOPMENT/DESIGN Samuel Delacre CONSUTECH 37 rue Henri Barbusse 255 rue de Pont de Pierre 59750 Feignies 59600 Maubeuge samuel.d@free.fr consutech@consutech.fr UNIVERSITÉ DE VALENCIENNES ET DU HAINAUT CAMBRÉSIS IUT INFORMATIQUE

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

Programmation Web TP1 - HTML

Programmation Web TP1 - HTML Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML

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

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

ENVOI EN NOMBRE DE Mails PERSONNALISES

ENVOI EN NOMBRE DE Mails PERSONNALISES ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Le compte courriel 23 L historique 25 La gestion des adresses brûlées 35 Utilitaires 38 Utilisation

Plus en détail

Initiation à html et à la création d'un site web

Initiation à html et à la création d'un site web Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le

Plus en détail

KompoZer. Un éditeur de pages Web. M r Castanet - Année scolaire 2007/2008 - page 1

KompoZer. Un éditeur de pages Web. M r Castanet - Année scolaire 2007/2008 - page 1 KompoZer Un éditeur de pages Web M r Castanet - Année scolaire 2007/2008 - page 1 I. Introduction : Au cours de cette formation, nous allons utiliser le logiciel KompoZer, qui gratuit et libre de droit,

Plus en détail

Développement Web pour mobiles

Développement Web pour mobiles Développement Web pour mobiles Les bases du HTML par Eric Sarrion Date de publication : 11/08/2010 Dernière mise à jour : Le langage HTML est le langage de base permettant de construire des pages web,

Plus en détail

Création de maquette web

Création de maquette web Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte

Plus en détail

Fabrication de site web Damien Nouvel

Fabrication de site web Damien Nouvel Fabrication de site web Plan Gestion de projets informatiques Acteurs de la fabrication de sites web Travail du designer Travail du développeur 2 / 30 Plan Gestion de projets informatiques Acteurs de la

Plus en détail

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers Introduction Ma première page Web (2/2) Ce document est l'étape 2 d'un didacticiel qui a pour but de donner un aperçu de la création d'une page Web. Une ou deux pages seront créées et présenteront leur

Plus en détail

Création de site Internet avec Jimdo

Création de site Internet avec Jimdo Création de site Internet avec Jimdo Ouvrez votre navigateur internet ou Internet Explorer ou Mozilla Firefox Rendez vous sur la page http://fr.jimdo.com/ voici ce que vous voyez. 1=> 2=> 1. Le nom que

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

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

Formulaire pour envoyer un mail

Formulaire pour envoyer un mail Formulaire pour envoyer un mail AVERTISSEMENT : Ce tuto est une compilation de plusieurs sources trouvées sur internet, dont les références sont données à la fin de cet article. Le but de ce tutoriel n'est

Plus en détail

Un mini-site internet en une après-midi

Un mini-site internet en une après-midi Prérequis Posséder un ordinateur équipé d un logiciel pour écrire des fichiers texte simples, (SimpleText, BlocNotes, etc...), d un logiciel de Navigation Internet (InternetExplorer, Netscape, Mozilla,

Plus en détail

TD HTML AVEC CORRECTION

TD HTML AVEC CORRECTION TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez

Plus en détail

Activités HTML. Code: act-html

Activités HTML. Code: act-html Activités HTML act-html Activités HTML Code: act-html Originaux url: http://tecfa.unige.ch/guides/tie/html/act-html/act-html.html url: http://tecfa.unige.ch/guides/tie/pdf/files/act-html.pdf Prérequis:

Plus en détail

Tutorial des barres d'outils dans Mozilla Firefox

Tutorial des barres d'outils dans Mozilla Firefox Version 2.1 24. septembre 2007 Tutorial des barres d'outils dans Mozilla Firefox Responsable du projet : Auteur : Collaborateurs : Marc Johannot Cide Cyrille Verdon, Pouly Romain TUTORIIAL Les barres d'outils

Plus en détail

Gestion Électronique de Documents et XML. Master 2 TSM

Gestion Électronique de Documents et XML. Master 2 TSM Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document

Plus en détail

Comment créer des GIF animés en dix étapes?

Comment créer des GIF animés en dix étapes? Comment créer des GIF animés en dix étapes? Tutoriel GIF Movie Gear Septembre 2002 Rédigé par :Visicom Média inc. 1 TABLE DES MATIERES PRÉSENTATION DE GIF MOVIE GEAR... 2 BARRE DE MENUS... 2 BARRE D'OUTILS

Plus en détail

Programmation Web - HTML

Programmation Web - HTML Programmation Web - HTML Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2014-2015 http://liris.cnrs.fr/fabien.duchateau/ens/lif4/ 1/69 Introduction De nombreux sites

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

UN SITE WEB RESPONSIVE EN UNE HEURE?

UN SITE WEB RESPONSIVE EN UNE HEURE? UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N

Plus en détail

ENVOI EN NOMBRE DE Mails PERSONNALISES

ENVOI EN NOMBRE DE Mails PERSONNALISES MAILING ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Envoi d un document HTML crée avec Word (envoi en base 64) 25 Le compte courriel

Plus en détail

Chapitre 1 HTML et le Web... 15. Chapitre 2 Les navigateurs du marché... 31. Chapitre 3 Les bases du langage HTML... 49

Chapitre 1 HTML et le Web... 15. Chapitre 2 Les navigateurs du marché... 31. Chapitre 3 Les bases du langage HTML... 49 Chapitre 1 HTML et le Web... 15 1.1 Pourquoi apprendre le langage HTML?... 17 1.2 Trois concepts étroitement liés : WWW, HTML et HTTP... 18 1.3 Principes généraux et versions de HTML... 20 Utilisation

Plus en détail

Traitement de texte : Quelques rappels de quelques notions de base

Traitement de texte : Quelques rappels de quelques notions de base Traitement de texte : Quelques rappels de quelques notions de base 1 Quelques rappels sur le fonctionnement du clavier Voici quelques rappels, ou quelques appels (selon un de mes profs, quelque chose qui

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

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL 1. Avant de commencer Il existe plusieurs éditeurs de pages Web qui vous permettent de construire un site Web. Nous vous conseillons toutefois de

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

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques Contenu Statique Le client envoie une requête avec un nom de fichier Le serveur répond en lui retournant

Plus en détail

1. La notion de cascade

1. La notion de cascade HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir

Plus en détail

Préface 3. Conventions typographiques... 3 Feedback... 4. Introduction 5. Se familiariser avec l'interface de SiteBuilder 6. Créer un site Web 8

Préface 3. Conventions typographiques... 3 Feedback... 4. Introduction 5. Se familiariser avec l'interface de SiteBuilder 6. Créer un site Web 8 Parallels Panel Table des matières Préface 3 Conventions typographiques... 3 Feedback... 4 Introduction 5 Se familiariser avec l'interface de SiteBuilder 6 Créer un site Web 8 Editer un site Web 9 Utiliser

Plus en détail

Débuter avec un ordinateur

Débuter avec un ordinateur Débuter avec un ordinateur 1) L'ordinateur En fonction de l'ordinateur que vous avez il y a plusieurs petites choses à savoir : 1.1) L'ordinateur fixe Deux choses à allumer quand vous voulez allumer un

Plus en détail

Intégrateur Web HTML5 CSS3

Intégrateur Web HTML5 CSS3 Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou

Plus en détail

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA DHTML Sommaire Introduction Compatibilité du DHTML Les layers Les balises dynamiques Balise Balise et La balise Animer de éléments Le Document Object Model (DOM) Modifier une

Plus en détail

Documentation SPIP. Modifier l'habillage graphique

Documentation SPIP. Modifier l'habillage graphique Documentation SPIP Modifier l'habillage graphique Modifier l'habillage graphique 1. Introduction aux feuilles de style...4 Pourquoi les feuilles de style?...4 Concrètement...5 Notes...5 2. Les feuilles

Plus en détail

Création de formulaires interactifs

Création de formulaires interactifs SESSION 16 Création de formulaires interactifs Programme de la session Lancer un sondage en utilisant divers éléments d'entrée de formulaire Traiter les entrées utilisateur Activer un script à partir d'un

Plus en détail

Guide pour la réalisation d'un document avec Open Office Writer 2.2

Guide pour la réalisation d'un document avec Open Office Writer 2.2 Guide pour la réalisation d'un document avec Open Office Writer 2.2 1- Lancement de l'application : Le Traitement de textes de la Suite OpenOffice peut être lancé : soit depuis le menu «Démarrer / Programmes/OpenOffice2.2/Writer

Plus en détail

Manuel d utilisation du module Liste de cadeaux PRO par Alize Web

Manuel d utilisation du module Liste de cadeaux PRO par Alize Web Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer

Plus en détail

SYSTEME D INFORMATION

SYSTEME D INFORMATION AgroParisTech Grignon 1A SYSTEME D INFORMATION MMIP - UFR d'informatique ufr.informatique@agroparistech.fr Support rédigé par David DOUSSOT : doussot@agroparistech.fr SOMMAIRE Système d'information : Présentation

Plus en détail

CREATION D UN SITE WEB. Comment créer facilement soi-même un site web pour son activité touristique.

CREATION D UN SITE WEB. Comment créer facilement soi-même un site web pour son activité touristique. CREATION D UN SITE WEB Comment créer facilement soi-même un site web pour son activité touristique. QUELLE EST VOTRE STRATÉGIE WEB? Quelques questions à vous poser avant de foncer LES BULLES DU E-TOURISME

Plus en détail

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles,

Plus en détail

Manuel d'utilisation de l'administration du site Japo.ch - 1

Manuel d'utilisation de l'administration du site Japo.ch - 1 Manuel d'utilisation de l'administration du site Japo.ch 1. Identification L'administration est protégée par une identification. Veuillez saisir ici votre nom d'utilisateur et votre mot de passe. Manuel

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

Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design

Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design Grilles Fluides CSS CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR

Plus en détail

CLARISWORKS 5. ÉTAPE 1 Créer un document. Lancer l application. (Windows 95 ou 98) Créer un document en utilisant le traitement de texte

CLARISWORKS 5. ÉTAPE 1 Créer un document. Lancer l application. (Windows 95 ou 98) Créer un document en utilisant le traitement de texte ÉTAPE 1 Créer un document Lancer l application Mettre l ordinateur en route. Double cliquer sur l icône ClarisWorks 5 qui se trouve sur le bureau ou cliquer sur Démarrer Programmes ClarisWorks5 Vous arrivez

Plus en détail

GUIDE D UTILISATION DU BACKOFFICE

GUIDE D UTILISATION DU BACKOFFICE GUIDE D UTILISATION DU BACKOFFICE 1. Modifier les pages du site : - Aller dans l onglet «PAGE HTML», puis «Liste des pages HTML» - Pour visualiser votre page, cliquer sur le nom écrit en vert, dans la

Plus en détail

Panel des technologies Web

Panel des technologies Web Panel des technologies Web pierre.jean@mines-ales.fr version 0.14 Objectif Un panorama des technologies Web pour comprendre leurs positionnements et leurs utilisations Questions Evaluation Sommaire Avant

Plus en détail

PHP et les Bases de données - Généralités

PHP et les Bases de données - Généralités PHP et les Bases de données - Généralités Conception d une base de données Méthodes utilisées : MERISE, UML Modèle conceptuel des données MCD, Modèle logique MLD, Modèle Physique MPD. Ces aspects seront

Plus en détail

Séance d ED n 5 : HTML et JavaScript

Séance d ED n 5 : HTML et JavaScript Séance d ED n 5 : HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: une réponse : 1)

Plus en détail

.CREER SON BLOG SUR LA PLATE-FORME ELUNET

.CREER SON BLOG SUR LA PLATE-FORME ELUNET .CREER SON BLOG SUR LA PLATE-FORME ELUNET Mai 2009 Tout d abord bienvenue sur la plate-forme de blogs d Elunet. Ce petit document a pour but de vous aider à créer votre blog. I. Présentation des différents

Plus en détail

Le service de création de site Internet : Mode d emploi. La Création de Site Internet

Le service de création de site Internet : Mode d emploi. La Création de Site Internet Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de

Plus en détail

Pack Fifty+ Normes Techniques 2013

Pack Fifty+ Normes Techniques 2013 Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié

Plus en détail

SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5

SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 5 ADMINISTRER SON SITE WEBGAZELLE CMS 2.0 5 5.1 Configuration minimale

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

Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.

Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue. Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.net/857 Intégrateur de STPo - Robot de Gordon Bennett 2 L'intégrateur XHML,

Plus en détail

Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam

Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam 6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de projet Le piratage informatique DEJOUR Kévin SOUVILLE Jean-François Suivi : Mokhtari-Brun Myriam 2 e semestre 2005-2006

Plus en détail

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 E mail : bij@agasc.fr www.agasc.fr. Word: La présentation

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 E mail : bij@agasc.fr www.agasc.fr. Word: La présentation Word: La présentation Introduction 2 ième partie Bien que le contenu du document soit le plus important, Word vous offre plusieurs options pour améliorer la présentation du texte. Cette page va vous montrer

Plus en détail

VOCABULAIRE LIÉ AUX ORDINATEURS ET À INTERNET

VOCABULAIRE LIÉ AUX ORDINATEURS ET À INTERNET VOCABULAIRE LIÉ AUX ORDINATEURS ET À INTERNET Brancher / débrancher l ordinateur de la prise Allumer / éteindre l ordinateur : pour allumer ou éteindre l ordinateur vous devez appuyer sur le bouton On/off

Plus en détail

Formation au logiciel Typo3, pour les rédacteurs.

Formation au logiciel Typo3, pour les rédacteurs. 1 Formation au logiciel Typo3, pour les rédacteurs. 1 Accéder au système 2 1.1 Configuration du navigateur 2 1.2 Identification 2 2 L interface 2 2.1 Le module Web 3 2.2 Le module Media 3 2.3 Le module

Plus en détail

Les outils de création de sites web

Les outils de création de sites web Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site

Plus en détail

Media queries : gérer différentes zones de visualisation

Media queries : gérer différentes zones de visualisation 2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d

Plus en détail

// HTML, Javascript XHTML & CSS

// HTML, Javascript XHTML & CSS design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact mr@sweeen.com // sommaire HTML 01. Introduction au langage HTML 02. Introduction

Plus en détail

Guide de base WordPress

Guide de base WordPress Guide de base WordPress Pour créer et gérer votre blogue ou site Internet 1- La création du blogue Wordpress Créez votre propre compte Wordpress.com en quelques secondes. C est gratuit. Entrez cette adresse

Plus en détail

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation

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