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

Création d un site Internet (partie 2 )

Création d un site Internet (partie 2 ) Création d un site Internet (partie 2 ) Objectif : Apprendre les bases des langages XHTML et CSS pour réaliser un site CV Site ressource : http://jleu10.free.fr Adresse mail : jleu10@free.fr Jean-Louis

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

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

Conception de sites web. Feuille de styles CSS

Conception de sites web. Feuille de styles CSS Conception de sites web Feuille de styles CSS M i s e e n p a g e : s o l u t i o n «v i e i l l e é c o l e» Mise en page par et par Long Vite illisible Peu souple Difficile à modifier

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

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

Création d un Site Web

Création d un Site Web Session2 Etapes Faciles Pour Réussir Sur Internet Création d un Site Web Mounir_ahlyege@hotmail.com 1 CSS :Cascading Style Sheets en français feuilles de style en cascade C'est un autre langage qui vient

Plus en détail

Gérer les formulaires

Gérer les formulaires 195 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel sur les formulaires Le formulaire est un outil de base indispensable pour les sites web dynamiques puisqu'il

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

Formation (X)HTML-CSS avancé

Formation (X)HTML-CSS avancé Formation (X)HTML-CSS avancé Table des matières 1 Introduction 3 1.1 La philosophie W3C.................................. 3 1.2 Du HTML au XHTML................................. 3 1.3 Et dans la pratique...................................

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

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; }

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; } Enregistrer la feuille de style "style.css" mettre dans l'en-tête de la page html (entre les balises ) : mettre dans l'en-tête de

Plus en détail

Personnaliser et adapter SPIP Développeur SPIP

Personnaliser et adapter SPIP Développeur SPIP Personnaliser et adapter SPIP Développeur SPIP En pratique Pour réaliser ce TD vous avez besoin de :. Un navigateur web. Un client FTP ou une invite de commande Unix. Un éditeur de texte Pour le TD nous

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

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

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

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

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

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Conception de Sites Web Dynamiques : TD 2 HTML5 statique, feuille de style CSS, Mise en page, Framework Bootstrap http://www.labri.fr/perso/preuter/cswd2015

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

Créons le design de votre site web!

Créons le design de votre site web! Créons le design de votre site web! Enfin nous y voilà C'est un chapitre un peu particulier, assez différent de ce que vous avez lu jusqu'à maintenant. En fait, c'est ce que j'appelle un "TP" (= Travaux

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

XHTML et CSS. 17 et 18 mai 2006 CRI-IUT 2006 METZ - Jérôme LANDRÉ - IUT Le Creusot 1

XHTML et CSS. 17 et 18 mai 2006 CRI-IUT 2006 METZ - Jérôme LANDRÉ - IUT Le Creusot 1 XHTML et CSS 17 et 18 mai 2006 CRI-IUT 2006 METZ - Jérôme LANDRÉ - IUT Le Creusot 1 1) Introduction 2) HTML, XML 3) XHTML 4) CSS 5) Exemples 6) Outils 7) Conclusion Sommaire 17 et 18 mai 2006 CRI-IUT 2006

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

Télécharger Notepad++ et l installer http://www.01net.com/telecharger/windows/internet/editeur_de_site/fiches/29119.html

Télécharger Notepad++ et l installer http://www.01net.com/telecharger/windows/internet/editeur_de_site/fiches/29119.html Programmation langage objet Création d une page html Site de référence : http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-etcss3 1. Structure d une page html 1.1.

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

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

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

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

CSS. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) CSS 1 / 50

CSS. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) CSS 1 / 50 CSS Thierry Lecroq Université de Rouen FRANCE Thierry Lecroq (Univ. Rouen) CSS 1 / 50 Plan 1 Généralités sur les CSS 2 Les sélecteurs 3 Les propriétés 4 le dimensionnement et le positionnement Thierry

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

Mise en page CSS avec KompoZer

Mise en page CSS avec KompoZer But de la leçon Mise en page CSS avec KompoZer Dans la conception actuelle de la conception des pages web, il est indispensable de séparer clairement le contenu d'un document de l'ensemble des directives

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

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

Création d un Site WEB

Création d un Site WEB RAPPORT DE STAGE DE L INFORMATIQUE POUR L INGÉNIEUR Création d un Site WEB Réalisé par : Badie SAADA Med Amine BAATOUT Surveillé par : Mme Syrine CHARFI Mme Sonia ALOUANE 25 septembre 2013 Table des matières

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

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

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

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

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

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

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 feuilles de style en cascade (CSS) Lévis Thériault, hiver 2009 CSS (feuilles de style en cascade) CSS: Cascading

Plus en détail

Copyright : Philippe STEINER Licence : GNU / GPL http://joomla.buldozer.fr

Copyright : Philippe STEINER Licence : GNU / GPL http://joomla.buldozer.fr Copyright : Philippe STEINER Licence : GNU / GPL http://joomla.buldozer.fr Table des matières I Introduction...3 Logiciels nécessaires :...3 Petit rappel...3 Les fichiers nécessaires au template...4 II

Plus en détail

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl IAE - Web Marketing Créer un site internet «simple» Publier un site internet Référencer un site internet Olivier Toscano Gérant WebCMS Sàrl HTML HTML est un langage à balisage Les balises permettent de

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

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

Rapport de Conception

Rapport de Conception Rapport de Conception Métier : Développement Membres du groupe Granier Maxime Imbert Jérémy Lansac Ludovic Tionohoue Yann Axone Métiers consultés IHM Contenu cispmptut_rapportdeconception_developpement_20110111

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

L3 - Sites Web dynamiques : Mini-Wall MINI-WALL

L3 - Sites Web dynamiques : Mini-Wall MINI-WALL L3 - SITES WEB DYNAMIQUES MINI-WALL 1 Introduction L'objectif de ce TD est de mettre en place un mini "livre d'or", permettant à vos visiteurs de vous laisser des messages sur votre site. Une page affiche

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

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

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

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

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

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

11. ANNEXE 3 : SPECIFICATIONS TECHNIQUES

11. ANNEXE 3 : SPECIFICATIONS TECHNIQUES 11. ANNEXE 3 : SPECIFICATIONS TECHNIQUES 11.1 Hébergement : Plan Antilope Hosteur Caractéristiques détaillées : Hébergement web : - Temps d'exécution de script PHP : 30 secondes - Taille maximale en mémoire

Plus en détail

Projets Web - L3STEP

Projets Web - L3STEP Projets Web - L3STEP Laurent Pouilloux : pouillou@ipgp.jussieu.fr Forum en place Projets disponible sur le serveur de cours Plan du cours Rappels Le HTML Le CSS PHP/MySQL Rappels Fonctionnement d'un ordinateur

Plus en détail

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP.

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. TP5: LES FORMULAIRES OBJECTIFS : 1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. PARTIE 1: Formulaire

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

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

INTERNET CRÉER UN SITE EN HTML ET CSS

INTERNET CRÉER UN SITE EN HTML ET CSS INTERNET CRÉER UN SITE EN HTML ET CSS Nous allons vous proposer de créer un site Web de plusieurs pages en utilisant du code HTML et une feuille de style CSS. Toutefois, l utilisation du HTML et du CSS

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

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

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

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

Créer des styles CSS simples

Créer des styles CSS simples Créer des styles CSS simples Les styles CSS mémorisent les attributs de caractère et de paragraphe comme la police, la taille, la couleur, l alignement du texte, etc... Vous pouvez ensuite les appliquer

Plus en détail

Créer des pages «Web»

Créer des pages «Web» Créer des pages «Web» I) OBJECTIF Nous allons créer une page Web en utilisant un «patron» HTML et CSS à l aide du module d inspection Firebug pour le navigateur Firefox. Tutoriel HTML : http://fr.html.net/tutorials/html/

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

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

Fiche n 4 Utilisation de Kompozer Table des matières

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

Plus en détail

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

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

1 En route vers HTML 5 et CSS3

1 En route vers HTML 5 et CSS3 IUT de Bobigny 2015-2016 Licence CIWM-I TD n 3 Conception de Pages Web orientée Client Table des matières 1 En route vers HTML 5 et CSS3 1 1.1 La structure d un document HTML 5.................... 2 1.2

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

Créer des visites virtuelles avec Google Earth

Créer des visites virtuelles avec Google Earth Créer des visites virtuelles avec Google Earth Parmi les outils géomatiques, Google Earth se distingue par la possibilité de créer des parcours, des visites virtuelles et de les enregistrer sous forme

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

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

Jeudi 13 Janvier Jean-Marie Favreau Thomas Petazzoni

Jeudi 13 Janvier Jean-Marie Favreau Thomas Petazzoni XHTML / CSS Un duo gagnant pour un Web moderne Jeudi 13 Janvier Jean-Marie Favreau Thomas Petazzoni XML : extensible Markup Language Meta-language : permet de définir des languages Normalisé par le W3C

Plus en détail

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS Courrielleur privilégie l usage des courriels HTML pour les envois marketing. En effet, le HTML permet d organiser graphiquement l information de manière

Plus en détail

D'UN ENREGISTREMENT TÉLÉ à UNE VIDÉO sur une page WEB Ou le passage d'un fichier.vob à un fichier flash.swf

D'UN ENREGISTREMENT TÉLÉ à UNE VIDÉO sur une page WEB Ou le passage d'un fichier.vob à un fichier flash.swf D'UN ENREGISTREMENT TÉLÉ à UNE VIDÉO sur une page WEB Ou le passage d'un fichier.vob à un fichier flash.swf Je ne prétends pas que ce soit LA MEILLEURE SOLUTION mais ça fonctionne. Il faut, bien entendu,

Plus en détail

Rapport de projet tuteuré Première année

Rapport de projet tuteuré Première année Rapportdeprojettuteuré Premièreannée «AtelierArchitecture» IUTdeTroyes DépartementSRC AgenceImagine: CRESPINKevin SCHERMANNJulien THIEBAUTJean Philipp -1- Remerciements Nous tenons à remercier l ensemble

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

Ce code peut s insérer à plusieurs endroits entre les balises head (le plus souvent) ou directement à l intérieur des balises body.

Ce code peut s insérer à plusieurs endroits entre les balises head (le plus souvent) ou directement à l intérieur des balises body. A/ Utilisation de Javascript UE Libre : Internet et composition de pages Web TP n 3 Le Javascript est un langage de script incorporé dans un document HTML. Historiquement il s'agit même du premier langage

Plus en détail

Initiation à la fabrication de sites web. Table des matières. Plantons le décor!... 1 Concepts de base du HTML... 2

Initiation à la fabrication de sites web. Table des matières. Plantons le décor!... 1 Concepts de base du HTML... 2 Table des matières Plantons le décor!... 1 Concepts de base du HTML... 2 1. Les liens hypertexte... 2 2. Les balises... 2 3. Ossature d une page HTML... 3 Une première page web... 5 1. Les balises indispensables...

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

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

Manuel d utilisation de la personnalisation avancée des pages web

Manuel d utilisation de la personnalisation avancée des pages web Manuel d utilisation de la personnalisation avancée des pages web Version 1.B Payline PROPRIETAIRE Page 1/15 Version du modèle : DocStd_50 Page des évolutions Le tableau ci-dessous liste les dernières

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

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design A.F.L.I.M. Ateliers de Formations Linguistique Informatique Multimédia Formation HTML5 et CSS3 - Pour des sites Responsive Web Design Formation : Présentation du HTML5 Bref historique du HTML5 Lignes de

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

Licence Pro MPST 2008. Création de sites Web avec les outils SPIP, HTML, et CSS

Licence Pro MPST 2008. Création de sites Web avec les outils SPIP, HTML, et CSS Licence Pro MPST 2008 Création de sites Web avec les outils SPIP, HTML, et CSS Camille Diou, LICM Juin 2008 Table des matières Avertissement...5 1. Introduction...7 2. Environnement de conception...7

Plus en détail

Atelier d introduction à l informatique Dates : les 19, 20 et 21 août 2008 Heures : de 9h à 10h30 Local : A5.25

Atelier d introduction à l informatique Dates : les 19, 20 et 21 août 2008 Heures : de 9h à 10h30 Local : A5.25 Page 1 /8 Atelier d introduction à l informatique Dates : les 19, 20 et 21 août 2008 Heures : de 9h à 10h30 Local : A5.25 Section 1 Utilisation de l ordinateur Identification de l utilisateur o Ctrl+alt+suppr

Plus en détail

AdOps Spécifications techniques publicitaires

AdOps Spécifications techniques publicitaires AdOps Spécifications techniques publicitaires Matériel publicitaire HTML5 (Desktop) Les spécifications suivantes doivent être respectées pour la fourniture de matériel publicitaire HTML. Si vous utilisez

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

Multimédia - Partie WEB. Syllabus de 6 ème PHOTO

Multimédia - Partie WEB. Syllabus de 6 ème PHOTO Multimédia - Partie WEB Syllabus de 6 ème PHOTO Edition : 2015 Professeur : J. Pochet 2 Table des matières Table des matières... 3 Introduction... 5 Manipulation 1 : Page d introduction... 6 Objectif général...

Plus en détail

Création d un forum en Php et Mysql

Création d un forum en Php et Mysql Birane SECK Création d un forum en Php et Mysql Cahier des charges : Nous allons mettre en place un espace membre assez classique à savoir un système que l on retrouve sur la majorité des sites Internet.

Plus en détail