<link rel =" stylesheet " type =" text / css " href =" monstyle. css " />

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "<link rel =" stylesheet " type =" text / css " href =" monstyle. css " />"

Transcription

1 Programmation Web AGRAL-3 et MTX-3, 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 et votre fichier CSS dans un répertoire quelconque. Il vous suffira pour les lire d ouvrir le fichier html avec votre navigateur web. Le but de ce TP est de créer une page web et de l agrémenter au fur. Nous allons nous appuyer sur les éléments structurants (HTML) afin de le formater correctement, ce qui est l objectif du CSS. Exercice 1 [Intégration du CSS dans une page HTML] Soit la page web suivante la plus simple possible (simple.htm) : <html > <head > <title > Simple </ title > </ head > <body > <H1 >Page simple <H1 > </ body > </ html > 1 1. Ajoutez à l intérieur de la balise body bgcolor= "gray". Et dans la balise H1 text="green" 2. Qu observez-vous? 3. Ceci est une première méthode pour modifier le style au sein des pages web, la deuxième méthode est de faire appel au feuilles de style. Revenez à la page simple.htm du début et insérez les lignes qui permettront d avoir le même résultat avec une feuille de style CSS. Créez pour cela un fichier qui s appelle : monstyle.css Dans le header : Dans le fichier CSS : <link rel =" stylesheet " type =" text / css " href =" monstyle. css " /> body { background - color : gray ; H1 { color : green ; Exercice 2 [Background] 1. Syntaxe en CSS : selection propriété : valeur ; Sélection correspond au groupe de balise sur lesquels le style va être appliqué, propriété à la propriété qui va entrer en jeu et la valeur, est la valeur qui va être appliquée à cette propriété.

2 1. Maintenant que nous avons manipulé la couleur de fond ainsi que le titre de niveau 1, nous allons afficher une image en image de fond de la page. On utilisera toujours les feuilles de style. L image à ajouter se trouve à l url suivant : http :// Faire en sorte que l image ne se répète pas. ajouter dans le CSS : body { background - color : gray ; background - image : url (" http :// www. babeejardin. com / upload / rub / gazon. jpg "); background - repeat : no - repeat ; Exercice 3 [Polices] Comme vous le savez font est le mot qui signifie police en anglais. C est avec ce mot clé qu on modifie les propriétés des polices en CSS. Toutefois, il existe une exception puisque la couleur n est pas modifiée avec le mot clé font. 1. Rajoutez un titre de niveau 2 (balise H2) qui sera : " moins simple " 2. Faites en sorte d avoir une police pour ce titre qui sera du arial sans serif de taille De la même manière faites en sorte que le titre de niveau 1 soit du Times new Roman serif de taille 18 et en gras et de couleur noire. H1 { color : green ; font - family : arial, sans - serif ; font - size : 18 pt; H2 { color : black ; font - family : " Times New Roman ", serif ; font - size : 14 pt; font - weight : normal ; 4. Que se passe-t-il si vous ajouter un deuxième titre de niveau 2 " de moins en moins "?. Le même style est appliqué Exercice 4 [Classes et id] Nous avons vu que nous pouvons attribuer à plusieurs balises les mêmes formats. Toutefois, au niveau sémantique des balises de même niveau peuvent avoir des rôles différents. Les classes servent à tenir compte de cette différence. Prenons l exemple suivant : 1. Ajouter le code suivant dans votre page. <p>psg :</p> <li ><a href =" toto1. htm ">Ibrahimovic </a></li > <li ><a href =" toto2. htm ">Menez </a></li > <li ><a href =" toto3. htm ">Beckham </a></li > 2. les deux mots clés à utiliser sont background-image et url. c Nizar Ouarti SpÃl cialitãl AGRAL-3 et MTX-3 Page 2 sur 6

3 <p>barcelona :</p> <li ><a href =" titi1. htm ">Messi </a></li > <li ><a href =" titi2. htm ">Iniesta </a></li > <li ><a href =" titi3. htm ">Villa </a></li > Travaux Pratiques SÃl ance TP 5 <p> Et l arbitre est :<a href =" tutu. htm " > Wolfgang Stark </a> </p> 2. Modifier le code de telle manière que le lien vers les pages des joueurs du PSG soit écrit en noir et en gras et que les liens des joueurs du Barca soient écrit en rouge et en gras. 3. Que se passe-t-il pour le lien de la page de l arbitre? Nous avons vu qu une classe permet de généraliser une propriété avec différent éléments qui partagent leur appartenance à cette classe. L ID pour sa part est un identifiant unique dans la page. 4. Faites les changements requis au niveau html et CSS pour que le meilleur joueur de chaque groupe soit écrit en italique, sachant que les meilleurs sont Ibrahimovic et Messi. 3 Ajout dans la page html : <p>psg :</p> <li ><a href =" toto1. htm " class =" psg " id=" best1 " > Ibrahimovic </a></li > <li ><a href =" toto2. htm " class =" psg ">Menez </a></li > <li ><a href =" toto3. htm " class =" psg ">Beckham </a></li > <p>barcelona :</p> <li ><a href =" titi1. htm " class =" barca " id=" best2 ">Messi </a></li > <li ><a href =" titi2. htm " class =" barca ">Iniesta </a></li > <li ><a href =" titi3. htm " class =" barca ">Villa </a></li > <p> Et l arbitre est :<a href =" tutu. htm " > Wolfgang Stark </a> </p> Ajout dans la page css : a. psg { color : black ; a. barca { color : red ; a# best1 { font - style : italic ; a# best2 { font - style : italic ; Exercice 5 [Pseudo-Classes] 1. Dans une pseudo-classes contrairement à une classe la notion d évènement est prise en compte. Vous allez écrire un lien (balise <a>) vers la page http ://news.google.fr/ après le titre de niveau 2, ceci peut servir pour avoir des informations sur un évènement sportif Ce lien devra devenir vert et écrit en gras lors du survol. La pseudo classe du survol est hover. Mais bien sûr il en existe d autres qui définissent si la page du lien a été visité ou non, ou si l utilisateur est en train de cliquer sur le lien. 3. font-style : italic pour mettre en italique. c Nizar Ouarti SpÃl cialitãl AGRAL-3 et MTX-3 Page 3 sur 6

4 Côté HTML Côté CSS <a href =" http :// news. google.fr/" >News Google </a> a: hover { color : green ; Exercice 6 [Span et Div] Span s utilise pour encadrer un mot ou un groupe de mot. De son côté Div sert à encadrer un groupe d élément html. La grosse différence entre les deux est que span ne modifie pas l affichage au sein d un texte. Ces éléments structurant ont été créé principalement afin de normaliser le formatage. Dans le passé, les tableaux étaient utilisés pour organiser le visuel d une page html. Or, les tableaux ont une fonction bien défini au niveau sémantique et n aurait pas dû être utilisé de la sorte. Ceci est en grande partie la raison d exister des balises div et span. Une des particularités de div est le fait de pouvoir avoir une action sur les éléments html quel englobe. Soit le code html suivant : <div????= " stylized "????= " myform "> <form id=" form " name =" form " method =" post " action =" toto. html "> <h1 > Formulaire d achat </h1 > <p > Vous pouvez acheter un billet pour le Parc des Princes </ p > <label >Nom <span????= " small ">Ecrivez votre nom </ span > <input type =" text " name =" name " id=" name " /> <label > <span????= " small ">Votre addresse </ span > <input type =" text " name =" " id=" " /> < label > Mot de passe <span????= " small ">Minimum 6 caractères </ span > <input type =" text " name =" password " id=" password " /> < button type =" submit ">Paiement </ button > <div????= " spacer "></ div > </ form > </ div > Et le code CSS suivant : p, h1, form, button { border :0; margin :0; padding :0;. spacer { clear : both ; height :1 px ; /* My Form */. myform { margin :0 auto ; width :400 px; padding :14 px; /* stylized */ # stylized { border : solid 2px # b7ddf2 ; background :# ebf4fb ; # stylized h1 { c Nizar Ouarti SpÃl cialitãl AGRAL-3 et MTX-3 Page 4 sur 6

5 font - size :14 px; margin - bottom :8 px; # stylized p{ font - size :11 px; color :#666666; margin - bottom :20 px; border - bottom : solid 1px # b7ddf2 ; padding - bottom :10 px; # stylized label { display : block ; text - align : right ; width :140 px; float : left ; # stylized. small { color :#666666; display : block ; font - size :11 px; font - weight : normal ; text - align : right ; width :140 px; # stylized input { float : left ; font - size :12 px; padding :4 px 2px; border : solid 1px # aacfe4 ; width :200 px; margin :2 px 0 20 px 10 px; # stylized button { clear : both ; margin - left :150 px; width :105 px; height :51 px; background :# FFFFFF ; text - align : center ; line - height :31 px; color : red ; font - size :18 px; 1. Remplacer???? par un code html valide de telle manière que le code CSS s applique correctement. c Nizar Ouarti SpÃl cialitãl AGRAL-3 et MTX-3 Page 5 sur 6

6 Dans la partie HTML : <div id=" stylized " class =" myform "> <form id=" form " name =" form " method =" post " action =" toto. html "> <h1 > Formulaire d achat </h1 > <p > Vous pouvez acheter un billet pour le Parc des Princes </ p > <label >Nom <span class =" small ">Ecrivez votre nom </ span > <input type =" text " name =" name " id=" name " /> <label > <span class =" small ">Votre addresse </ span > <input type =" text " name =" " id=" " /> < label > Mot de passe <span class =" small ">Minimum 6 caractères </ span > <input type =" text " name =" password " id=" password " /> < button type =" submit ">Paiement </ button > <div class =" spacer "></ div > </ form > </ div > 2. Modifier le code CSS de manière à ce que le bouton affiche la photo qui est à cette adresse : http ://img10.xooimage.com/files/8/6/4/ballon-23e20e.jpg et que la couleur de police et la couleur de fond change lorsque l on passe la souris sur le bouton. Dans la partie CSS : # stylized button { clear : both ; margin - left :150 px; width :105 px; height :51 px; background :# FFFFFF url ( http :// img10. xooimage. com / files /8/6/4/ ballon -23 e20e. jpg ) no - repeat center center ; border : none ; text - align : center ; line - height :31 px; color : red ; font - size :18 px; # stylized button : hover { background : gray ; color : red ; c Nizar Ouarti SpÃl cialitãl AGRAL-3 et MTX-3 Page 6 sur 6

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

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

Tice -Seconde-Page Web 2015-2016

Tice -Seconde-Page Web 2015-2016 Ouvrez une page web, cliquer doit sur la souris et faite afficher le code source de la page. Quelqu un a écrit ce code pour faire afficher cette page. Nous allons nous aussi écrire du code pour faire afficher

Plus en détail

Programmation WEB. HTML et Javascript

Programmation WEB. HTML et Javascript Programmation Web : HTML et Javascript Michaël Krajecki Université de Reims Champagne-Ardenne Département de Mathématiques et Informatique Moulin de la Housse - BP 1039 51687 Reims Cedex 2. Tél. : 03 26

Plus en détail

Introduction à la Simulation

Introduction à la Simulation ou comment créer votre premier jeu vidéo Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Aspect visuel souhaité Aspect visuel souhaité Code source de la page HTML Feuille

Plus en détail

Objectifs. Programmation Tablette. Journée type. Organisation. Dominique Rossin Cours 1 - HTML / CSS

Objectifs. Programmation Tablette. Journée type. Organisation. Dominique Rossin Cours 1 - HTML / CSS Objectifs Programmation Tablette Dominique Rossin Cours 1 - HTML / CSS Comprendre le fonctionnement d une application Web Comprendre le fonctionnement d une application Smartphone Programmer et déployer

Plus en détail

Prog. Web TP2 Année universitaire 2012 2013 - Formulaires - suite

Prog. Web TP2 Année universitaire 2012 2013 - Formulaires - suite Prog. Web TP2 Année universitaire 2012 2013 - Formulaires - suite 1 INSCRIPTION À UN SITE On suppose que l'inscription à un site offre de nombreux avantages. Pour s'inscrire à ce site il faut saisir :

Plus en détail

Programmation Tablette. Dominique Rossin Cours 1 - HTML / CSS

Programmation Tablette. Dominique Rossin Cours 1 - HTML / CSS Programmation Tablette Dominique Rossin Cours 1 - HTML / CSS Objectifs Comprendre le fonctionnement d une application Web Comprendre le fonctionnement d une application Smartphone Programmer et déployer

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

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

PROGRAMMATION HTML. Baccalauréat S -Spécialité ISN. Objectifs. Prérequis. Du code à la page. 4.3 : Langages de programmation : langage HTML

PROGRAMMATION HTML. Baccalauréat S -Spécialité ISN. Objectifs. Prérequis. Du code à la page. 4.3 : Langages de programmation : langage HTML PROGRAMMATION HTML Baccalauréat S -Spécialité ISN 4.3 : Langages de programmation : langage HTML Objectifs L'élève doit être capable o de créer une page WEB en langage HTML o d'analyser une page WEB en

Plus en détail

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014 1 Le langage JavaScript TD N 3 Module IntegWEB MMI 1 2013/2014 Jeu les tables de multiplication 2 Code HTML 3 apprendre les tables de multiplication

Plus en détail

Arbres Mathématiques Informatique et Navigateurs Internet

Arbres Mathématiques Informatique et Navigateurs Internet Arbres Mathématiques Informatique et Navigateurs Internet Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Arbres Expressions Mathématiques Structure arborescente de l expression

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

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

LES TABLEAUX. Créer un tableau élémentaire

LES TABLEAUX. Créer un tableau élémentaire LES TABLEAUX Il y a deux façons de créer dans un article : directement dans SPIP pour des tableaux élémentaires avec un éditeur html pour des tableaux complexes. Créer un tableau élémentaire Les colonnes

Plus en détail

LES FORMULAIRES. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr

LES FORMULAIRES. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr LES FORMULAIRES Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr LES FORMULAIRES Permet de récupérer les informations saisies par l'internaute sur votre site Nécessite un traitement des données : php mail

Plus en détail

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv>

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv> Réalisation d'un site web Première partie : Création des pages HTML 1 Objectifs Se familiariser avec le codage HTML Acquérir une pratique minimale Être capable de mener à bien la construction d'un site

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

L objectif de cette étape est de se familiariser avec la création de site web sous VS 2012.

L objectif de cette étape est de se familiariser avec la création de site web sous VS 2012. L objectif de ce tutoriel est de créer un site web statique avec Visual Studio. Le site sera composé d une page HTML, une feuille de style CSS et d un fichier Javascript. Etape 1 Lancer Visual Studio L

Plus en détail

TP JAVASCRIPT OMI4 jquery et ses Plungins

TP JAVASCRIPT OMI4 jquery et ses Plungins TP JAVASCRIPT OMI4 jquery et ses Plungins Objectifs de ce TP : découvrir quelques exemples d utilisation de la bibliothèque jquery et également quelques plugins. Exercice 1 : gestion d un bouton rollover

Plus en détail

FORMATION CONTINUE IGSO GLOBES VIRTUELS MÉCANISMES ET APPLICATIONS MONTAGE D UNE INTERFACE SUR LA BASE DES API S GOOGLE EARTH ET GOOGLE MAPS

FORMATION CONTINUE IGSO GLOBES VIRTUELS MÉCANISMES ET APPLICATIONS MONTAGE D UNE INTERFACE SUR LA BASE DES API S GOOGLE EARTH ET GOOGLE MAPS FORMATION CONTINUE IGSO GLOBES VIRTUELS MÉCANISMES ET APPLICATIONS MONTAGE D UNE INTERFACE SUR LA BASE DES API S GOOGLE EARTH ET GOOGLE MAPS CODE COMPLET ET COMMENTÉ DE L INTERFACE TABLE DES MATIÈRES 1.

Plus en détail

Tutoriel : Feuille de style externe

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

Plus en détail

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

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles Index A affichage, CSS 180 album photos, créer 83 arrière-plan, CSS 152 images 152 Attributs de balises HTML action 90 align 71 attributs communs 131 background 39 border 39, 70 cellpadding 70 cellspacing

Plus en détail

Introduction à PHP. Formulaires HTML et PHP, interactions avec le client. monnerat@u-pec.fr. 6 avril 2015. IUT de Fontainebleau. Introduction à PHP

Introduction à PHP. Formulaires HTML et PHP, interactions avec le client. monnerat@u-pec.fr. 6 avril 2015. IUT de Fontainebleau. Introduction à PHP Formulaires HTML et PHP, interactions avec le client IUT de Fontainebleau 6 avril 2015 1 Formlaire et traitement 2 Texte Cases à cocher Listes Upload de fichiers Sommaire Formlaire et traitement 1 Formlaire

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

Chapitre 3 : Le langage HTML Fascicule TIC Page 33

Chapitre 3 : Le langage HTML Fascicule TIC Page 33 33 I. Introduction Les pages Web visualisées dans un navigateur Internet sont écrites avec un langage nommé HTML (HyperText Markup Language). C est un langage de description de contenu et de structure.

Plus en détail

Exercices et corrections. Licence QCI - module O21

Exercices et corrections. Licence QCI - module O21 Exercices et corrections Licence QCI - module O21 Exercice 1 Ecrivez le squelette d une page avec les caractéristiques suivantes - encodage : utf-8 - titre de la page : première page XHTML - auteur : vous

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

STRUCTURE D UNE PAGE HTML/CSS

STRUCTURE D UNE PAGE HTML/CSS STRUCTURE D UNE PAGE HTML/CSS C01 1. STRUCTURE Le langage Html est composé de balises ou (tags) qui permettent de structurer le texte, de le mettre en forme et d insérer des images. Ces instructions sont

Plus en détail

Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à changement

Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à changement Gestion des images Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à changement Ce chapitre vous montre comment ajouter et afficher des images dans un site Web

Plus en détail

Tutoriel sur les bases de HTML et de PHP

Tutoriel sur les bases de HTML et de PHP Tutoriel sur les bases de HTML et de PHP Cours : Inf7214 Développement de logiciel Date : Hiver 2009 Ce tutoriel vous donne un aperçu du développement d application WEB avec les langages HTML et PHP. Vous

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

Développement Partie Cliente

Développement Partie Cliente ISI 1022 : Jean-Noël Sorenti. Année 2002/2003 Développement Partie Cliente ISI 1022 : 1 ISI 1022 : Développement Partie Cliente Le développement partie cliente concerne tout développement étant interprété

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

TP N 4. Par défaut, la page d accueil affiche les 10 derniers articles publiés.

TP N 4. Par défaut, la page d accueil affiche les 10 derniers articles publiés. TP N 4 Page d accueil Wordpress Ojectif Gérer du texte avec des images Accueil par défaut Par défaut, la page d accueil affiche les 10 derniers articles publiés. Nous souhaitons une page d accueil avec

Plus en détail

HTML : Mini tutoriel

HTML : Mini tutoriel HTML : Mini tutoriel I. Introduction HTML est un langage de formatage de texte adapté à la conception de pages web. Le HTML est un langage balisé, fondé en particulier sur la notion de lien hypertexte,

Plus en détail

CSS. Alexandre Benoit TS10. D après openclassrooms

CSS. Alexandre Benoit TS10. D après openclassrooms CSS D après openclassrooms Alexandre Benoit TS10 I Les bases du CSS 2 / 31 Introduction Où écrit t on le CSS? : 3 / 31 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons

Plus en détail

pour apprendre le langage html

pour apprendre le langage html pour apprendre le langage html introduction : Voici ce que vous devez savoir avant de continuer : Tout d' abord, il faut préciser que le langage HTML est relativement simple mais que celui ci impose au

Plus en détail

Java EE - Cours 7. Cours de 2 e année ingénieur Spécialisation «Génie Informatique»

Java EE - Cours 7. Cours de 2 e année ingénieur Spécialisation «Génie Informatique» Java EE - Cours 7 Cours de 2 e année ingénieur Spécialisation «Génie Informatique» Rappels 2 Feuilles de Styles : CSS Lorsque l on réalise un site Web, il faut dissocier la partie forme de la partie fond.

Plus en détail

CSS. Alexandre Benoit TS 2016/2017. D après openclassrooms

CSS. Alexandre Benoit TS 2016/2017. D après openclassrooms CSS D après openclassrooms Alexandre Benoit TS 2016/2017 I Les bases du CSS 2 / 29 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons dans le fichier style.css Dans

Plus en détail

Formation Site Web : CSS et PHP

Formation Site Web : CSS et PHP Formation Site Web : CSS et PHP Valentin Roussellet Joachim Jablon Chahine Benchorha VIA Centrale Réseaux 1 er décembre 2008 Qu'est-ce que CSS Les sélecteurs La mise en page et le box-model Une CSS (Cascading

Plus en détail

Examen d'informatique module INF112. 1ère session 2003-2004. sans calculatrice, sans document

Examen d'informatique module INF112. 1ère session 2003-2004. sans calculatrice, sans document Examen d'informatique module INF112 1ère session 2003-2004 sans calculatrice, sans document Le barème est indicatif Sauf indiqué contraire, dans les questions à choix multiples, il peut (ou non) y avoir

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

Présentation et explications

Présentation et explications Présentation et explications 1 SOMMAIRE I) Introduction... 3 II) Installation... 3 1) Localement... 3 2) Chez un hébergeur... 4 Installation automatique... 4 Installation manuelle... 4 III) Interface de

Plus en détail

GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS

GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS Table des matières Présentation de la plateforme d envoi de courriels... 4 1- Gestion des contacts... 5 1.1. Base de données... 5 1.1.1- Création

Plus en détail

Les feuilles de styles

Les feuilles de styles Qu'est-ce que les feuilles de style? Les feuilles de style CSS pour Cascading Style Sheets en anglais est un langage informatique qui sert à décrire la présentation des documents HTML. L'un des objectifs

Plus en détail

Module 133 Développer des application Web

Module 133 Développer des application Web Module 133 Développer des application Web Validation des formulaires Lab #5 et #6 Version 0.1 EPAI / Frédéric Free Powerpoint Mauron Templates Page 1 Introduction Les formulaires HTML sont omnis présents

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

Afin de réaliser l exercice ci-dessus, suivre les étapes suivantes :

Afin de réaliser l exercice ci-dessus, suivre les étapes suivantes : - Appliquer un formatage conditionnel. Durée : une période pour les pages -3 - Ouvrir la Base de données «identification_produits» qui a été créée à la leçon précédente - Générer un rapport à partir de

Plus en détail

INITIATION HTML et CSS 3

INITIATION HTML et CSS 3 INITIATION HTML et CSS 3 Stéphane Malachane. 1 Structure de base d un page HTML titre Ordre des balises

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

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

Groupe Eyrolles, 2006, ISBN : 2-212-11771-X

Groupe Eyrolles, 2006, ISBN : 2-212-11771-X Groupe Eyrolles, 2006, ISBN : 2-212-11771-X Création de pages dynamiques courantes CHAPITRE 3 169 Figure 3-39 La boîte de dialogue de l objet Liste/Menu permet de configurer les options de l affichage

Plus en détail

CSS. Karima Boudaoud IUT- R&T

CSS. Karima Boudaoud IUT- R&T CSS Karima Boudaoud IUT- R&T Plan Plan Références bibliographiques Introduction à CSS Sélecteurs Propriétés et valeurs Responsive design Conclusion Karima Boudaoud IUT R&T - Sophia Antipolis 3 Références

Plus en détail

CSS 3. Julien David. A101 - Julien David (A / 27

CSS 3. Julien David. A101 - Julien David (A / 27 CSS 3 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 27 Feuilles de styles Cascading Style Sheets CSS est un langage de feuilles de styles.

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

CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Conclusion TD/TP 2 / 16 CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style.

CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Conclusion TD/TP 2 / 16 CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Cascading style sheets () pour XML Plan de la séance BDISE XML Mathieu Sassolas 1 IUT de Sénart Fontainebleau Département Informatique 2 La sélection des éléments où s applique le style Année 2015-2016

Plus en détail

Créer mon premier squelette

Créer mon premier squelette Créer mon premier squelette Avec ce tutoriel, découvrez progressivement le fonctionnement de SPIP en construisant votre premier squelette. Pas à pas, comment créer un SPIP qui défie les limites. Créer

Plus en détail

Cours HTML pour débutant

Cours HTML pour débutant Cours HTML pour débutant Guilhem PAROUX 09-10 Mai 2007 I. FONCTIONNEMENT CLIENT-SERVEUR... 3 II. STRUCTURE D UN SITE WEB... 4 III. LE LOGICIEL NVU... 4 IV. METTRE EN LIGNE AVEC LE CLIENT FTP "FILEZILLA"...

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

TECHNIQUE DE CONSTRUCTION D UN MODULE

TECHNIQUE DE CONSTRUCTION D UN MODULE TECHNIQUE DE CONSTRUCTION D UN MODULE Pilotage Infographie Description générale Romuald LORTHIOIR Stéphane RIO Aurélie PASSILLY Date de création du document 20 nov. 2006 Version 1.1 Validation pour le

Plus en détail

Travaux pratiques de M2105 Web dynamique

Travaux pratiques de M2105 Web dynamique Travaux pratiques de M2105 Web dynamique L objectif des séances de TP du module M2105 est de créer un mini site web d annuaire permettant à différents utilisateurs de gérer leurs contacts. Les informations

Plus en détail

Les frames ou cadres. Prérequis. Introduction. Avec le soutien de la Commission européenne

Les frames ou cadres. Prérequis. Introduction. Avec le soutien de la Commission européenne ou cadres Dans cette fiche, nous allons vous apprendre à faire des frames ou en français «cadres». Tout et son contraire a été dit à propos des frames. En tout état de cause, tous les navigateurs Internet

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

Une rapide introduction à HTML / CGI

Une rapide introduction à HTML / CGI Une rapide introduction à HTML / CGI Patrick Fuchs Université Paris 7 Equipe de Bioinformatique Génomique et Moléculaire PLAN 1. Généralités 2. Les Bases d HTML 3. Outils HTML avancés 4. HTML dynamique

Plus en détail

Présentation. Les surnoms de JS. Historique. Programmation Web

Présentation. Les surnoms de JS. Historique. Programmation Web Présentation Programmation Web JavaScript Jean-Christophe Deneuville jean-christophe.deneuville@xlim.fr Historique JavaScript est un langage reprenant quelques éléments de syntaxe de Java On l intègre

Plus en détail

Utilisation des sessions avec PHP

Utilisation des sessions avec PHP Utilisation des sessions avec PHP Qu est ce que c est et à quoi sa sert? Les sessions sont un moyen de stocker des informations relatives au visiteur. Il s agit d une alternative aux cookies. La différence

Plus en détail

Publication (avancée) de données spatiales dans Internet

Publication (avancée) de données spatiales dans Internet Publication (avancée) de données spatiales dans Internet GMT-20859 & SCG-66408 HTML & CSS Thierry Badard & Frédéric Hubert Université Laval, Dép. des sciences géomatiques Québec, Canada {Thierry.Badard;

Plus en détail

5 décembre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/com2580/

5 décembre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/com2580/ 5 décembre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/com2580/ La semaine dernière Les formulaires Les champs de formulaire Et donc on fait quoi aujourd hui? Intégration Web Éléments complexes

Plus en détail

Création de page Web. Microsoft Publisher. 1. Ouvrez Microsoft Publisher. 2. Cliquez sur Sites Web. 3. Choisissez un modèle

Création de page Web. Microsoft Publisher. 1. Ouvrez Microsoft Publisher. 2. Cliquez sur Sites Web. 3. Choisissez un modèle Création de page Web Microsoft Publisher 1. Ouvrez Microsoft Publisher 2. Cliquez sur Sites Web 3. Choisissez un modèle 4. Personnalisez votre jeu de couleurs et les options 5. Cliquez sur «créer», lorsque

Plus en détail

Formation VBA. Grâce au VBA il est possible de réaliser à peu près tout ce que l'on souhaite avec Excel...

Formation VBA. Grâce au VBA il est possible de réaliser à peu près tout ce que l'on souhaite avec Excel... Formation VBA Table des matières Introduction... 1 Les macros... 2 Sélections de colonnes... 4 Propriétés... 6 Les couleurs... 7 Les variables... 9 Introduction Le VBA (Visual Basic for Applications) est

Plus en détail

Fiche 6 - Le langage HTML

Fiche 6 - Le langage HTML Fiche 6 - Le langage HTML I Introduction HTML est un langage universel utilisé pour communiquer sur le Web. C est un langage dit de «marquage» (de «structuration» ou de «balisage») qui permet d écrire

Plus en détail

Manuel utilisateur du site IReMus

Manuel utilisateur du site IReMus Manuel utilisateur du site IReMus Adresse du site : http://www.iremus.cnrs.fr CONNEXION AU SITE DU LABORATOIRE... 2 DEMANDER UN MOT DE PASSE... 4 CHANGER DE MOT DE PASSE APRÈS CONNEXION... 6 VOS ACCÈS...

Plus en détail

Eclipse et quelques notions de Jquerry

Eclipse et quelques notions de Jquerry Eclipse et quelques notions de Jquerry Tout d abord, une petite présentation s impose. Eclipse est un outil de développement qui permet d éditer du code et de visualiser le résultat grâce à des émulateurs

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

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

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

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

Plus en détail

Plateforme Systempay v1.24 Personnalisation avancée de la page paiement. Version 1.2a

Plateforme Systempay v1.24 Personnalisation avancée de la page paiement. Version 1.2a Plateforme Systempay v1.24 Personnalisation avancée de la page paiement Version 1.2a Rédaction, Vérification, Approbation Rédaction Vérification Approbation Nom Date/Visa Nom Date/Visa Nom Date/Visa Lyra-Network

Plus en détail

Rapport des modifications techniques effectuées

Rapport des modifications techniques effectuées Club Alpin Français Nantes-Atlantique Rapport des modifications techniques effectuées BERROU Quentin BRUNED Boris QUEVA Caroline 11 I CMS choisi : Nous avons choisi d utiliser Joomla! de par sa communauté

Plus en détail

CIM120. Http:// (Creation Web) Page 1

CIM120. Http:// (Creation Web) Page 1 CIM120 Http:// (Creation Web) Page 1 Organisation du module CIM120 Evaluation: 1 eval sur table 1 eval des TP Page 2 Le Web: un peu d'histoire D'Arpanet à Internet... http://fr.wikipedia.org/wiki/histoire_d'internet

Plus en détail

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript AJAX Ajax 1 AJAX Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript Utilise: HTML pour le marquage XML pour représenter les résultats

Plus en détail

2) Combien de tableaux apparents ont été tracés dans le site et de combien de cellules?

2) Combien de tableaux apparents ont été tracés dans le site et de combien de cellules? Travail dirigé : éléments de correction Item B53 du C2I Lycée M. Ponty II- Travail d analyse technique d un site Afin de vous proposez une présentation cohérente, votre entreprise à mis en ligne une illustration

Plus en détail

my.epfl.ch Connexion

my.epfl.ch Connexion my.epfl.ch Connexion Sur la page http://my.epfl.ch, saisissez votre username GASPAR et votre mot de passe associé. 1 Partage de vos document Le premier onglet de l'application my.epfl vous permet de stocker

Plus en détail

Observons un site... Une entête. Le corps de la page. Un à-côté. Un pied de page

Observons un site... Une entête. Le corps de la page. Un à-côté. Un pied de page Créer une page web Observons un site... Une entête Le corps de la page Un à-côté Un pied de page Un logo Un menu Un autre menu Une entête La fenêtre de gauche La partie principale de la page Plusieurs

Plus en détail

LOG4420 Conception de sites web dynamiques et transactionnels. Contrôle périodique. Automne 2009. 28 octobre 2009

LOG4420 Conception de sites web dynamiques et transactionnels. Contrôle périodique. Automne 2009. 28 octobre 2009 LOG4420 Conception de sites web dynamiques et transactionnels Contrôle périodique Automne 2009 28 octobre 2009 Directives : Durée de l examen : 2h30 ; Le questionnaire comporte 5 questions sur 8 pages

Plus en détail

Conception et création de pages web. Gérald Collaud Centre NTE, Université de Fribourg

Conception et création de pages web. Gérald Collaud Centre NTE, Université de Fribourg Conception et création de pages web Gérald Collaud Centre NTE, Université de Fribourg Ecole Normale, 23 août 2000 Programme! Quelques notions importantes! Comment créer des pages web! Aller plus loin!

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

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation Interactive 2.0 Manuel d utilisation 1 Contenu Chapitre 1 : L Arborescence... 3 Créer un menu.... 3 Ordonner les menus... 6 Destruction d un menu.... 6 Chapitre 2 : Les pages... 7 Titre de votre page....

Plus en détail

Manipulation # 02.1 : Réaliser un Mini Traitement de Texte

Manipulation # 02.1 : Réaliser un Mini Traitement de Texte Manipulation # 02.1 : Réaliser un Mini Traitement de Texte Objectifs : A travers cette manipulation, vous allez apprendre à mettre en œuvre quelques fonctionnalités relatives au traitement de texte. Vous

Plus en détail

A.-M. Cubat Installation d un éditeur html intégré à PMB : TinyMCE Page 1 Source : http://amcubat.be/docpmb/pmb-installation-editeur-html-tinymce

A.-M. Cubat Installation d un éditeur html intégré à PMB : TinyMCE Page 1 Source : http://amcubat.be/docpmb/pmb-installation-editeur-html-tinymce A.-M. Cubat Installation d un éditeur html intégré à PMB : TinyMCE Page 1 Pour créer des infopages dans PMB, ou pour profiter pleinement des possibilités offertes par le portail inclus dans la version

Plus en détail

Les nouveautés de JSP 2.0

Les nouveautés de JSP 2.0 Les nouveautés de JSP 2.0 1 Introduction Nous avons déjà vu quelques nouveautés de la version 2.0 dans les travaux pratiques précédents (JSTL et langage d expressions). Il nous reste deux améliorations,

Plus en détail

Présentation L ÉDITEUR D ÉTAT SUR PÉRICLÈS 5

Présentation L ÉDITEUR D ÉTAT SUR PÉRICLÈS 5 Présentation L ÉDITEUR D ÉTAT SUR PÉRICLÈS 5 Sommaire Questions fréquentes (Cliquez sur la question pour accéder directement à la réponse.) - Introduction... 3 - Présentation de la barre d outils... 4

Plus en détail

Implémentation dans Active Tags d'un module Web pour XUnit

Implémentation dans Active Tags d'un module Web pour XUnit Implémentation dans Active Tags d'un module Web pour XUnit Table des matières 1. Introduction... 2 2. Application Web interactive en Reflex... 2 3. Module Web pour XUnit... 3 3.1. Principes... 3 3.2. Implémentation

Plus en détail

MANUEL GESTIONNAIRE DU GAPIBD

MANUEL GESTIONNAIRE DU GAPIBD MANUEL GESTIONNAIRE DU GAPIBD Générateur de sites Internet/Intranet à distance GAPI Software est une marque déposée par la Société ALLNET ALLNET 1 rue Henri Spriet 14120 Mondeville TABLE DES MATIERES TABLE

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

Tutoriel d utilisation

Tutoriel d utilisation Tutoriel d utilisation JCE est l éditeur le plus complet pour Joomla! JCE est capable de gérer les mise en page comme un éditeur de type Word ou Open Office. Il permet d insérer des images et médias de

Plus en détail

Questions à choix multiples Page 1 de 10

Questions à choix multiples Page 1 de 10 INF2005 Programmation web Examen intra hiver 2015 Question #1 Qui a gagné la guerre des fureteurs dans les années 1990? a) Netscape b) Internet Explorer c) Firefox d) Chrome e) Opera f) Mosaic g) Aucune

Plus en détail