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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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

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

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

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

Plus en détail

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

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

Plus en détail

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

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

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

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

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

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

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

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

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

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

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

Liste des propriétés CSS

Liste des propriétés CSS Liste des propriétés CSS Cette page est une liste non exhaustive des propriétés CSS qui existent, le but étant de réunir sur une même page un maximum de propriétés CSS. Cette liste se concentre sur les

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

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

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

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

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

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

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

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

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

Plus en détail

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

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

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

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

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

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

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

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

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

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

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

Site de la spécialité ISN du lycée Louis Marchal

Site de la spécialité ISN du lycée Louis Marchal 1 sur 10 07/01/2014 17:46 Site de la spécialité ISN du lycée Louis Marchal Licence Creative Commons Attribution - Pas d Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 France. Ecrire des

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

Il faudra absolument séparer le contenu de la page web (le fichier HTML) de son apparence (le fichier CSS).

Il faudra absolument séparer le contenu de la page web (le fichier HTML) de son apparence (le fichier CSS). ISN- semaine 10 HTML 1. Introduction HTML et CSS : deux langages pour créer un site web Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le texte

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

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

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

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

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

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

CSS. CSS : propriétés. Texte : text-align, text-decoration, text-indent, font-weight, font-family, font-style, font-size

CSS. CSS : propriétés. Texte : text-align, text-decoration, text-indent, font-weight, font-family, font-style, font-size CSS s de propriétés en CSS Manuele Kirsch Pinheiro Manuele.Kirsch-Pinheiro@univ-paris1.fr Remerciements Mes sincères remerciements aux collègues de l IUT Nancy Charlemagne pour leur aide lors de mon passage

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

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

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation.

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation. 1 Mega Menu Avec le du Worldsoft CMS, vous pouvez créer des menus de navigation. Vous pouvez mettre en place autant de menus que vous le désirez et les adapter graphiquement. Avec votre propre contenu

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

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

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

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12 Pages et sites Web Table des matières 1 Microsoft Expression Web S'orienter vers l'accessibilité...12 Espace de travail Installer le logiciel...13 Lancer/quitter Microsoft Expression Web 2...13 Découvrir

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

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le de la page :

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le <head> de la page : CSS La présentation Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le de la page : body { background: orange;

Plus en détail

Le HTML. Structure de Base... 2

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

Plus en détail

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

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

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

Utilisation d un traitement de texte

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

Plus en détail

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

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

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

Plus en détail

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

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

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

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

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

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

Plus en détail

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