101 Réaliser et publier un site WEB

Save this PDF as:
 WORD  PNG  TXT  JPG

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

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

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

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

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

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

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

Programmation Web TP2 CSS i

Programmation Web TP2 CSS i Programmation Web TP2 CSS i Objectifs : Construction d'une page web : comprendre et utiliser un fichier CSS ; définir la structure d'une page web ; Consignes et Pré-requis Lire attentivement cet énoncé

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

Par défaut, les éléments de type bloc seront affichés dans une succession verticale.

Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Le positionnement Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Une boîte jaune Une boîte verte Les principaux éléments de type bloc sont : l'élément div ; les titres

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

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

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

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

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

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

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

Programmation Web IMAC 2015-2016 TD 1 : HTML. 30 septembre 2015

Programmation Web IMAC 2015-2016 TD 1 : HTML. 30 septembre 2015 Programmation Web IMAC 2015-2016 TD 1 : HTML 30 septembre 2015 Objectif: Ce TD a pour but d aborder les premières notions du langage HTML. Il est important de noter que le HTML n est pas un langage 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

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

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Les bonnes pratiques du concepteur web moderne requièrent l usage des CSS pour la réalisation des mises en page. Les mises

Plus en détail

Mode d emploi du site Internet «Mediawiki»

Mode d emploi du site Internet «Mediawiki» Mode d emploi du site Internet «Mediawiki» École Libre du Soleil Levant La technologie MediaWiki a été choisie pour sa flexibilité et une simplicité d utilisation ne demandant que de connaître quelques

Plus en détail

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

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

Plus en détail

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

Personnaliser vos écrans

Personnaliser vos écrans Personnaliser vos écrans Sommaire 1 Présentation 2 Mécanisme 3 Création du custom 3.1 Note 4 Création du dossier contenant les images personnalisées 4.1 Note 5 Création du dossier contenant le fichier

Plus en détail

LES TABLES. Exemple de table :
cellule 1 cellule 2
cellule 3 cellule 4

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> LES TABLES Les tables servent pour l'affichage de «données tabulaires», c'est-à-dire des informations présentées logiquement en rangées et en colonnes. Son intégration peut paraitre fastidieuse mais c'est

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

TD 3 : Intégration HTML

TD 3 : Intégration HTML Programmation Web IMAC 2015-2016 TD 3 : Intégration HTML 14 octobre 2015 Objectif: Ce TD a pour but de se servir des concepts appris dans les TDs précédents pour intégrer entièrement une maquette de site

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

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

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

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

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

Plus en détail

Introduction à 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é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

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

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

Cycle Bureautique 2/6 Traitement de texte

Cycle Bureautique 2/6 Traitement de texte Quel logiciel de traitement de texte utiliser? Deux logiciels sont principalement utilisés pour le traitement de texte : Microsoft Word : Commercialisé par la société Microsoft, c'est le logiciel le plus

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

Aller plus loin avec le tableur : réaliser un suivi du budget du ménage

Aller plus loin avec le tableur : réaliser un suivi du budget du ménage 26 février 2013 p 1 Aller plus loin avec le tableur : réaliser un suivi du budget du ménage Pour permettre au plus grand nombre de réaliser cet exercice, nous utiliserons le logiciel libre Libre Office

Plus en détail

TP2 : PHP. Exercice 1 : Premiers pas en PHP Voici un exemple de code PHP.

TP2 : PHP. Exercice 1 : Premiers pas en PHP Voici un exemple de code PHP. TP2 : PHP Exercice 1 : Premiers pas en PHP Voici un exemple de code PHP. 1 3

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

Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3

Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3 Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3 9 Les règles de styles Il est nécessaire de bien connaître les règles de styles mais, pour un usage performant de Dreamweaver, il est aussi utile de bien

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

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

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

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

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

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

Plus en détail

Comment intégrer des images dans un texte

Comment intégrer des images dans un texte Quoi de plus utile que de pouvoir ajouter une image, un graphique à un commentaire afin d étoffer celui-ci. C est possible de le faire de plusieurs façon dans le forum Météocentre. Cependant il faut limiter

Plus en détail

Création de site Web à l aide de l outil SimpliSite

Création de site Web à l aide de l outil SimpliSite Centre de documentation sur l éducation des adultes et la condition féminine (CDÉACF) Création de site Web à l aide de l outil SimpliSite Par François Dallaire CDÉACF Décembre 2006 Création de site Web

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

Créer une carte de visite Avec Open Office Writer

Créer une carte de visite Avec Open Office Writer Introduction Créer une carte de visite Concurrent direct de Microsoft Office, OpenOffice.org est une suite bureautique gratuite. Aujourd hui nous voyons le programme Writer (comparable à Word), c'est-à-dire

Plus en détail

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

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

Plus en détail

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

Les feuilles de Style HTML : CSS

Les feuilles de Style HTML : CSS Les feuilles de Style HTML : CSS Tarek Melliti Laboratoire IBISC (Informatique Biologie Intégrative et Systèmes Complexes) tarek.melliti@ibisc.univ-evry.fr Plan du cours Séances 1 : Introduction à l informatique

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

Formation Joomla 3 Réalisez votre Template

Formation Joomla 3 Réalisez votre Template Formation Joomla 3 Réalisez votre Template Flash-comet.com Cours version 2015 1 Sommaire Contenu du cours... 3 Création d'un template avec "Template Créator CK"... 3 Principe de fonctionnement... 3 Ce

Plus en détail

Leçon N 2E Utilisation d un traitement de texte (2 ème partie)

Leçon N 2E Utilisation d un traitement de texte (2 ème partie) Leçon N 2E Utilisation d un traitement de texte (2 ème partie) Nous allons travailler sur la MISE EN FORME d un document. 1 Mise en forme des caractères Les logiciels Word et Writer regroupent les commandes

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

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

Mode d'emploi. À l'usage des chefs, cheffes de courses et membres des comités autorisés à gérer les pages 'Récits de courses'.

Mode d'emploi. À l'usage des chefs, cheffes de courses et membres des comités autorisés à gérer les pages 'Récits de courses'. Mode d'emploi À l'usage des chefs, cheffes de courses et membres des comités autorisés à gérer les pages 'Récits de courses'. Les récits de courses sont gérés avec le module 'Articles' Table des matières

Plus en détail

Guide utilisateur Imagine moviesolutions 2011

Guide utilisateur Imagine moviesolutions 2011 Guide utilisateur Imagine moviesolutions 2011 Les premiers pas avec Imagine Après avoir téléchargé le programme, double- cliquez sur l icône : Lors du premier lancement d Imagine, vous allez pouvoir modifier

Plus en détail

Guide Ultra-book / 2012

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

Plus en détail

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

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

Plus en détail

GUIDE 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

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

-Le traitement de texte. -Le courrier électronique

-Le traitement de texte. -Le courrier électronique 1/17 SOMMAIRE : -Windows -Le traitement de texte -Internet -Le courrier électronique 2/17 WINDOWS PRISE EN MAIN DE WINDOWS Lorsque vous démarrez votre ordinateur vous devez voir arriver un écran qui ressemble

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

LibreOffice Draw. Découvrir. Sommaire LV08001

LibreOffice Draw. Découvrir. Sommaire LV08001 Découvrir LibreOffice Draw LV08001 Sommaire 1. Dessiner une forme...3 2. Changer la couleur ou la ligne d'une forme...7 3. Insérer une image...8 4. Redimensionner une image ou une forme...16 5. Aligner

Plus en détail

<link rel = stylesheet  type = text / css  href = monstyle. css  /> Programmation Web AGRAL-3 et MTX-3, 2012-13 SÃl ance TP N o 5 Mars 2013 Objectifs Langage CSS Interactions HTML/CSS Manipulation [Où mettre ses fichiers? ] Pour ce TP vous allez mettre votre fichier HTML

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

Dossier d utilisation

Dossier d utilisation Dossier d utilisation Lancer le logiciel Microsoft WORD. Page 1 Ouvrir Un fichier existant Page 1 Créer (ou Ouvrir) un nouveau document Page 2 Sauvegarder un nouveau fichier Page 2 Enregistrer un document

Plus en détail

Traitement de texte et publipostage

Traitement de texte et publipostage Outils Informatiques Mias 1 TP 3 Traitement de texte et publipostage Première partie : principes du traitement de texte Cette séance de travaux pratiques va commencer par quelques manipulations de l éditeur

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

EDITEUR DE PAGE HTML NETSCAPE COMPOSER

EDITEUR DE PAGE HTML NETSCAPE COMPOSER EDITEUR DE PAGE HTML NETSCAPE COMPOSER Utilisation Netscape Composer est un éditeur de pages HTML : il vous permet de modifier et créer des pages au format HTML pour les diffuser sur le Web. Il est intégré

Plus en détail

METTRE EN FORME. Modifier style, couleurs, taille et police d'un texte

METTRE EN FORME. Modifier style, couleurs, taille et police d'un texte METTRE EN FORME Modifier style, couleurs, taille et police d'un texte Style du texte On appelle style, les options de mises en forme suivantes : Italique Gras Souligné Ces options se trouvent dans la barre

Plus en détail

Utiliser OpenOffice.org V.2 bbenard - wwwpages@free.fr. Table des matières. A propos de ce manuel. A savoir sur les barres de menu

Utiliser OpenOffice.org V.2 bbenard - wwwpages@free.fr. Table des matières. A propos de ce manuel. A savoir sur les barres de menu Table des matières A propos de ce manuel... 1 A savoir sur les barres de menu...1 insérer un tableau...2 insérer une image...2 modifier la taille d'une image...2 modifier les relations entre une image

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

Manuel de mise en page de l intérieur de votre œuvre

Manuel de mise en page de l intérieur de votre œuvre Manuel de mise en page de l intérieur de votre œuvre Le strict suivi de ce manuel vous permettra de ne pas avoir à payer les frais de mise en page. Le but de ce manuel est de vous aider à préparer un livre

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

SUPPORT DE FORMATION WORD : niveau 2

SUPPORT DE FORMATION WORD : niveau 2 SUPPORT DE FORMATION WORD : niveau 2 Espace public multimédia Le Cyber 49, rue Maurice Thorez 92000 Nanterre - Tél. : 01 41 20 08 41 www.nanterre.fr Sommaire Introduction...3 I. Bordures et trame... 4

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

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

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

Manipulations avec le traitement de texte

Manipulations avec le traitement de texte Manipulations avec le traitement de texte Je vais aborder dans ce tutoriel de petites manipulations qui sont fréquentes dans le traitement de texte. Elles concernent la casse, les caractères spéciaux,

Plus en détail

Tutoriel Camtasia 7 ( version française )

Tutoriel Camtasia 7 ( version française ) Tutoriel Camtasia 7 ( version française ) Ce logiciel permet de filmer votre écran et d enregistrer votre voix si vous avez un microphone ( à main ou via votre webcam ). Avant même de commencer un enregistrement,

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

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine Gérer un site avec Kompozer Organisation, plan de travail Création de pages Tout les fichiers, dossiers, images auront des noms (ex. nouveautes.htm ; ces noms ne devront comporter ni espaces, ni caractères

Plus en détail

Feuille de style sous open office.

Feuille de style sous open office. Feuille de style sous open office. Une feuille de style permet de mettre en page un cours, un exposé ou un rapport en lui gardant la même présentation du début à la fin. Elle se programme avant de taper

Plus en détail

(Version complète et illimitée en anglais) ou Faire du Flash sans Flash! Eh oui, on peut le faire!

(Version complète et illimitée en anglais) ou Faire du Flash sans Flash! Eh oui, on peut le faire! (Version complète et illimitée en anglais) ou Faire du Flash sans Flash! Eh oui, on peut le faire! En effet, les développeurs web, graphistes, webdesigners et webmasters pro ou amateurs connaissent Flash

Plus en détail

Writer. Le logiciel se présente directement avec une page vierge, prête à l emploi pour créer votre nouveau document.

Writer. Le logiciel se présente directement avec une page vierge, prête à l emploi pour créer votre nouveau document. Writer Attention : Les documents faits avec Writer ne pourront être lu qu avec Writer, sauf manipulation permettant l échange avec d autres logiciels. Le logiciel se présente directement avec une page

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

-- Stage Auteur 2.0 -- Comment créer un blog d auteur avec blogger Bases techniques

-- Stage Auteur 2.0 -- Comment créer un blog d auteur avec blogger Bases techniques -- Stage Auteur 2.0 -- Comment créer un blog d auteur avec blogger Bases techniques Ce support vous présente les bases pour créer un blog avec Blogger, c est extrêmement simple et intuitif, mais Blogger

Plus en détail

Travailler l audio seul avec un ordinateur et en classe.

Travailler l audio seul avec un ordinateur et en classe. Travailler l audio seul avec un ordinateur et en classe. Les logiciels qu il faut avoir dans sa boite à outils: AUDACITY SUPER OPEN OFICE VDOWNLOADER I Téléchargement du logiciel sur: http://audacity.sourceforge.net/

Plus en détail

Gérer un site internet simple

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

Plus en détail

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

Création de page web avec Dreamweaver 2.0

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

Plus en détail

Traitement de texte niveau 2. Avec Writer. Cette suite bureautique est GRATUITE et téléchargeable au lien ci-dessous : http://fr.openoffice.

Traitement de texte niveau 2. Avec Writer. Cette suite bureautique est GRATUITE et téléchargeable au lien ci-dessous : http://fr.openoffice. Introduction Concurrent direct de Microsoft Office, OpenOffice.org est une suite bureautique, c est-à-dire un programme pour créer des documents de toutes sortes, tels que des articles, des lettres, des

Plus en détail

COURS PRATIQUE DE WORD

COURS PRATIQUE DE WORD COURS PRATIQUE DE WORD Le présent cours se rapporte à Word 2003. Sachez qu il existe d autres versions de cet outil. Il y a Office Pro, Office 2000, Office 2003, 2007 et 2010 (non commercialisé à ce jour).

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