Création d un Site Web

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Création d un Site Web"

Transcription

1 Session2 Etapes Faciles Pour Réussir Sur Internet Création d un Site Web 1

2 CSS :Cascading Style Sheets en français feuilles de style en cascade C'est un autre langage qui vient de compléter le HTML. Gérer la mise en forme de votre site. Utilité et avantages D'avoir une présentation homogène sur tout un site. Modifier l'aspect d'une page ou d'un site sans modifier le contenu et cela en quelques lignes plutôt que de devoir changer un grand nombre de balises. Réduire le temps de chargement des pages Un "langage" neuf, compréhensible et logique par rapport au Html 2

3 Page Web Sans CSS Page Web Avec CSS 3

4 Syntaxe d'un style La syntaxe de base d'un style est simple : balise propriété de style1: valeur; propriété de style2: valeur; propriété de style3: valeur; Exemple : H3 font-family: Arial; font-style: italic Donc ici, la balise H3 sera en Arial et en italique. Et dans la page Web, toutes les balises <H3> auront comme style Arial et italique. 4

5 Où écrit-on le CSS? Vous avez le choix car on peut écrire du code en langage CSS à deux endroits différents : Style Interne : dans l'en-tête <head> et </head>du fichier HTML ; Style Externe : dans un fichier.css (méthode la plus recommandée) ; Style Interne : <HTML> <HEAD> <STYLE type="text/css"> La ou les feuille(s) de style </STYLE> </HEAD> <BODY>... </BODY> </HTML> <HTML> <HEAD> <STYLE type="text/css"> h3 font-family: Arial; font-style: italic ; Color : Blue ; </STYLE> </HEAD> <BODY> <h3>text en blue en arial et italique</h3> </BODY> </HTML> 5

6 Style Externe 1. On crée d'abord, dans le répertoire du site, un fichier avec l'extension.css soit styles.css qui contiendra toutes les feuilles de style. 2. On fait l appel de ce fichier <HTML> <HEAD> <link rel="stylesheet" type="text/css" href="styles.css"> <\HEAD> Exemple : Index.html <HTML> <HEAD> <link rel="stylesheet" type="text/css" href="styles.css"> </HEAD> <BODY> <h3>text en blue en arial et italique</h3> </BODY> </HTML> h3 Styles.css font-family: Arial; font-style: italic ; Color : Blue ; 6

7 Quelle méthode choisir? Le code CSS est répété dans chaque fichier HTML 7

8 Quelle méthode choisir? Le code CSS est donné une fois pour toutes dans un fichier CSS 8

9 Problème! Comment mettre en forme uniquement le mot «bienvenue» dans le paragraphe suivant: <p>bonjour et bienvenue sur mon site!</p> Solution : Cela serait facile à faire s'il y avait une balise autour de «bienvenue» mais, malheureusement il n'y en a pas. Par chance, on a Deux balises qui-ne-ser-à-rien. <span> </span> <div> </div> <p>bonjour et <span class="salutations">bienvenue</span> sur mon site!</p> <div>(boîte ou conteneur) est une balise fréquemment utilisée dans la construction d'un design 9

10 Notion de classes Les feuilles de style proposent la solution des classes [class] pour affecter plusieurs styles à une même balise Exemple: Code Html <p class="introduction">bonjour et bienvenue sur mon site!</p> <p>pour le moment, mon site est un peu <em>vide</em>.patientez encore un peu!</p> Code Css.introduction color: blue; 10

11 Notion Id Fonction de la même manière qu une classe,la seul différence est que l id exploite une seul fois dans une balise.class. #id. 11

12 Les sélecteurs avancés A B : une balise contenue dans une autre h3 em Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3> Exemple : <h3>titre avec <em> important</em></h3> 12

13 Les sélecteurs avancés A[attribut] : une balise qui possède un attribut a[title] Exemple : Sélectionne tous les liens <a> qui possèdent un attribut title. <a href=" title="infobulle"> 13

14 Taille du font-size : Taille ; Vous pouvez par exemple écrire la taille avec des mots en anglais comme ceux-ci: xx-small : minuscule ; x-small : très petit ; small : petit ; medium : moyen ; large : grand ; x-large : très grand ; xx-large : euh gigantesque. On peut indiquer la taille en «em». Si vous écrivez 1em, le a une taille normale. Si vous voulez grossir le, vous pouvez inscrire une valeur supérieure à 1, comme 1.3em. Si vous voulez réduire le, inscrivez une valeur inférieure à 1, comme 0.8em. 14

15 Exemple p font-size: 0.8em; h1 font-size: 1.3em; balise font-family: police; Taille du La police 15

16 Italique, gras, souligné font-style :valeur ; italic : le sera mis en italique. oblique : le sera passé en oblique (les lettres sont penchées, le résultat est légèrement différent de l'italique proprement dit). normal : le sera normal Soulignement et autres décorations text-decoration : valeur ; underline : souligné. line-through : barré. overline : ligne au-dessus. blink : clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome, notamment). none : normal (par défaut). 16

17 L'alignement text-align :valeur ; left : le sera aligné à gauche (c'est le réglage par défaut). center : le sera centré. right : le sera aligné à droite. justify : le sera «justifié». Justifier le permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les s des journaux, par exemple, sont toujours justifiés. Les flottants Flotter(habillage) un élément autour du float : valeur ; left : l'élément flottera à gauche. right : l'élément flottera à droite! Oui, bravo. 17

18 Exemple: Code Html <p><img src="flash.gif" class="imageflottante" alt="image flottante»/> Ceci est un normal de paragraphe, écrit à la suite de l'image et qui l'habillera car l'image est flottante.</p> Code CSS.imageflottante float: left; Remarque : Pour stopper le float on exploite la proprièté clear, Clear. both ; both : le se poursuit en-dessous, que ce soit après un float: left; ou après un float: right;. 18

19 La couleur et le fond Couleur de fond background-color : couleur ; body background-color: black; color: white; Images de fond background-image : url("nom_de_l_image.png") body background-image: url("neige.png"); 19

20 La couleur et le fond répétition du fond background-repeat background-repeat : valeur; no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page. repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement. repeat-y : le fond sera répété uniquement sur la première colonne, verticalement. repeat : le fond sera répété en mosaïque (par défaut). background-position background-position : valeur ; top : en haut ; bottom : en bas ; left : à gauche ; center : centré ; right : à droite. Remarque : background-position: 30px 50px; votre fond sera placé à 30 pixels de la gauche et à 50 pixels du haut 20

21 La couleur et le fond Remarque : Plusieurs images de fond body background: url("soleil.png") fixed no-repeat top right, url("neige.png") fixed; Opacity opacity: valeur; Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut. Avec une valeur de 0, l'élément sera totalement transparent. Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6, votre élément sera opaque à 60% et on verra donc à travers! 21

22 Les différents styles Bordures standard Border : border-width border-color border-style; La couleur et le fond Les bordures et les ombres Si vous voulez mettre des bordures différentes en fonction du côté border-top : bordure du haut ; border-bottom : bordure du bas ; border-left : bordure de gauche ; border-right : bordure de droite. 22

23 La couleur et le fond Les bordures et les ombres Bordures arrondies Border-radius : Taille en px; On peut aussi préciser la forme de l'arrondi pour chaque coin: Border : haut gauche haut droite haut gauche haut droite; Exemple : P border-radius: 10px 5px 10px 5px; 23

24 La couleur et le fond Les bordures et les ombres Les ombres box-shadow : valeur; La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant : 1. le décalage horizontal de l'ombre ; 2. le décalage vertical de l'ombre ; 3. l'adoucissement du dégradé ; 4. la couleur de l'ombre. On peut aussi préciser la forme de l'arrondi pour chaque coin: Exemple : P box-shadow: 6px 6px 0px black; 24

25 La couleur et le fond CSS nous permet aussi de modifier l'apparence des éléments de façon dynamique, c'est-àdire que des éléments peuvent changer de forme. Changer l'apparence : Au survol : quand on pointe dessus; Lors du clic ; Lors du focus (élément sélectionné) ; Lorsqu'un lien a été consulté. Les bordures et les ombres Apparences dynamiques Au survol a:hover Lors du clic a:active Lors du focus a:focus Le lien a été consulté a:focus 25

26 Structuration de la page Dans ce chapitre, nous allons nous intéresser aux nouvelles balises HTML dédiées à la structuration du site La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page 26

27 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Le modèle des boîtes Une page web peut être vue comme une succession et un empilement de boîtes, qu'on appelle «blocs». La plupart des éléments vus au chapitre précédent sont des blocs : <header>, <article>, <nav> Mais nous connaissions déjà d'autres blocs : les paragraphes <p>, les titres <h1> On distingue deux principaux types de balises en HTML : Le type block (<p>, <h1> ) : ces balises créent un retour à la ligne et occupent par défaut toute la largeur disponible. Elles se suivent de haut en bas. Le type inline (<a>, <strong> ) : ces balises délimitent du au milieu d'une ligne. Elles se suivent de gauche à droite. Les dimensions width : c'est la largeur du bloc. À exprimer en pixels (px) ou en pourcentage (%). height : c'est la hauteur du bloc. Là encore, on l'exprime soit en pixels (px), soit en pourcentage (%). 27

28 La couleur et le fond Les bordures et les ombres Apparences dynamiques Le modèle des boîtes Les dimensions width : c'est la largeur du bloc. À exprimer en pixels (px) ou en pourcentage (%). height : c'est la hauteur du bloc. Là encore, on l'exprime soit en pixels (px), soit en pourcentage (%). Remarque: Pour que notre site s'adapte aux différentes résolutions d'écran de nos visiteurs : min-width : largeur minimale ; min-height : hauteur minimale ; max-width : largeur maximale ; max-height : hauteur maximale. La mise en page Exemple width: 50%; min-width: 400px; 28

29 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Les marges Le modèle des boîtes Il faut savoir que tous les blocs possèdent des marges. Il existe deux types de marges : les marges intérieures : margin : taille en px ; les marges extérieures: padding : taille en px ; Regardez bien le schéma qui se trouve à la figure suivante. Marge externe (Margin-left) Marge externe (Margin-top) Css Css Css Css Css Css Css Css Css Css Css Css Css Css Css Css Css Css Marge interne Marge interne (Padding-right) (Padding-bottom) Bloc Conteneur 29

30 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Le modèle des boîtes Remarque: On peut préciser les marges aux quatre côté : padding-top : marge intérieure en haut ; padding-bottom : marge intérieure en bas ; padding-left : marge intérieure à gauche ; padding-right : marge intérieure à droite. Centrer les blocs Pour centrer, il faut respecter les règles suivantes : 1. donnez une largeur au bloc (avec la propriété width) ; 2. indiquez que vous voulez des marges extérieures automatiques, comme ceci : margin: auto; Exemple : p width: 350px; /* On a indiqué une largeur (obligatoire) */ margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */ margin-bottom: 20px; Border : red 2px solide ; 30

31 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Overflow : couper un bloc Le modèle des boîtes Pour contrôler les dépassements d un qui se trouve à l intérieur d un bloc. Overflow : valeur ; visible (par défaut) : si le dépasse les limites de taille, il reste visible et sort volontairement du bloc. hidden : si le dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le. scroll : là encore, le sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement pour qu'on puisse lire l'ensemble du. C'est un peu comme un cadre à l'intérieur de la page. auto : c'est le mode «pilote automatique». En gros, c'est le navigateur qui décide de mettre ou non des barres de défilement (il n'en mettra que si c'est nécessaire). C'est la valeur que je conseille d'utiliser le plus souvent. word-wrap : couper les s trop larges p word-wrap: break-word; 31

32 La couleur et le fond Le positionnement en CSS Display Elle est capable de transformer n'importe quel élément de votre page d'un type vers un autre. display : valeur ;. Les bordures et les ombres Apparences dynamiques La mise en page 32

33 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Le positionnement en CSS Vertical-align Elle est capable de transformer n'importe quel élément de votre page d'un type vers un autre. Vertical-align : valeur ;. baseline : aligne de la base de l'élément avec celle de l'élément parent (par défaut) ; top : aligne en haut ; middle : centre verticalement ; bottom : aligne en bas ; valeur en px ou %: aligne à une certaine distance de la ligne de base (baseline). Exemple : nav display: inline-block; width: 150px; border: 1px solid black; vertical-align: top; section display: inline-block; border: 1px solid blue; vertical-align: top; 33

34 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Le positionnement en CSS Le positionnement absolu Le positionnement absolu permet de placer un élément (réellement) n'importe où sur la page. Pour effectuer un positionnement absolu, on doit écrire : position: absolute; Il faut donc utiliser la propriété position et au moins une des quatre propriétés ci-dessus (top, left, right ou bottom). Si on écrit par exemple : position: absolute; right: 0px; bottom: 0px; Remarque: Par ailleurs, si vous placez deux éléments en absolu vers le même endroit, ils risquent de se chevaucher. Dans ce cas, utilisez la propriété z-index pour indiquer quel élément doit apparaître au-dessus des autres.. 34

35 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page Le positionnement en CSS Le positionnement fixe Le principe est exactement le même que pour le positionnement absolu sauf que, cette fois, le bloc reste fixe à sa position, même si on descend plus bas dans la page. position: fixe; Le positionnement relatif Le positionnement relatif permet de décaler un bloc par rapport à sa position normale. position: relatif; 35

36 Mise en page adaptative avec les Media Queries Les media queries sont donc des règles qui indiquent quand on doit appliquer des propriétés CSS La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page les Media Queries <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" /> Exemple : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <!-- Pour tout le monde --> <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" /> <!-- Pour ceux qui ont une résolution inférieure à 1280px --> <title>media queries</title> </head> 36

37 La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page les Media Queries Chargement des règles directement dans la feuille de screen and (max-width: 1280px) /* Rédigez vos propriétés CSS ici */ /* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px screen and (max-width: 1280px) /* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px all and (min-width: 1024px) and (max-width: 1280px) /* Sur les téléviseurs tv /* Sur tous types d'écrans orientés verticalement all and (orientation: portrait) 37

38 TP : création d'un site pas à pas La couleur et le fond Les bordures et les ombres Apparences dynamiques La mise en page les Media Queries TP 38

39 Nos cordonnées: Mounir Ahlyege 39

40 On vous remerciez vivement pour votre collaboration Mounir Ahlyege

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

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

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

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

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

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

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

Plus en détail

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

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

Introduction Web : Cours. IUT de Villetaneuse.

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

Plus en détail

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

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

Plus en détail

Création 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

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

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

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

Plus en détail

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe

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

Plus en détail

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

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

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

HTML, CSS, JS et CGI. Elanore Elessar Dimar

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

Plus en détail

Formation (X)HTML-CSS avancé

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

Plus en détail

1 Utilisation du logiciel Quanta+ 2

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

Plus en détail

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

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

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

Plus en détail

1. La notion de cascade

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

Plus en détail

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

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

11. ANNEXE 3 : SPECIFICATIONS TECHNIQUES

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

Plus en détail

Annexe 5B - Les images. Pour centrer une image, on doit transformer l image comme un élément bloc.

Annexe 5B - Les images. Pour centrer une image, on doit transformer l image comme un élément bloc. Annexe 5B - Les images Propriété alt : un descriptif en texte de l image, peut servir à la classification du site par les moteurs de recherche Conventions pour les noms des fichiers image : o Entièrement

Plus en détail

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

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

Plus en détail

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

Joomla! 2.5 Créez et administrez vos sites Web

Joomla! 2.5 Créez et administrez vos sites Web Chapitre 1 : Installer Joomla! 1. Introduction 11 2. Qu'est-ce qu'un CMS? 11 3. HTML et XHTML 11 4. Différencier le contenu de la présentation 12 5. PHP et Apache 12 6. MySQL 13 7. Site statique ou site

Plus en détail

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels

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

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

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

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

Plus en détail

UN SITE WEB RESPONSIVE EN UNE HEURE?

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

Plus en détail

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2»

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2» Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2» Note importante : Pour l installation de SPIP et des squelettes RÉCIT-FP Partenaires v1.3.2, veuillez vous référer au fichier INSTALL.txt.

Plus en détail

1-Préambule 2 / 28. Cette procédure s adresse à l administrateur local* d un site. Community Forge

1-Préambule 2 / 28. Cette procédure s adresse à l administrateur local* d un site. Community Forge sommaire Pages : 1. Préambule... 2 2. Activation du module CSS Injector... 3 3. Écriture d une première règle... 4 4. Outils de localisation des zones à modifier... 8 5. Liste des propriétés facilement

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

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

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

Plus en détail

GUIDE DU DESIGN GRAPHIQUE DU SITE ABCD

GUIDE DU DESIGN GRAPHIQUE DU SITE ABCD GUIDE DU DESIGN GRAPHIQUE DU SITE ABCD Version 4.0.2 Table des matières Introduction...2 Architecture du site ABCD...2 Les standards du web...3 Accessibilité...4 Type I ou portail du site ABCD...4 Type

Plus en détail

FICHE 1. Les bases pour créer un site

FICHE 1. Les bases pour créer un site FICHE 1. Les bases pour créer un site Le langage HTML a été inventé par Tim Berners-Lee en 1991. Tim Berners-Lee suit encore aujourd'hui avec attention l'évolution du Web. Il a créé le World Wide Web Consortium

Plus en détail

INTERNET CRÉER UN SITE EN HTML ET CSS

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

Plus en détail

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

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti RESPONSIVE DESIGN Gobelins 2014.2015 Isabelle Biamonti Plan Principe général Exemples Sans responsive Avec responsive Versions séparées Responsive design ou versions séparées? Comment rendre un design

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

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

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

Plus en détail

Moodle 2, votre premier thème graphique

Moodle 2, votre premier thème graphique UTC Moodle 2, votre premier thème graphique Un tutorial pour créer un thème graphique pour moodle v2 Dominique Chambelant 03/03/2011 Moodle v2.0.x Développement: Thèmes 2,0 créer votre premier thème Ce

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

2012 - v1.2. Polytech, GMM. Autour du Web. Gaëlle Loosli. Internet. personnelles

2012 - v1.2. Polytech, GMM. Autour du Web. Gaëlle Loosli. Internet. personnelles 1/73 Polytech, GMM 2012 - v1.2 2/73 1 2 3/73 1 2 4/73? Concept de réseau Relier des ordinateurs pour échanger des données: nécessité d un langage de communication : les protocoles. Des réseaux hétérogènes

Plus en détail

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 Éric Sarrion JQuery & JQuery UI Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 11 Onglets Les pages HTML comportant des onglets (tabs) sont devenues courantes dans les sites web actuels. Elles permettent

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

Documentation SPIP. Modifier l'habillage graphique

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

Plus en détail

Responsive Design. Technologies du web. Stéphane Bouvry, 2014

Responsive Design. Technologies du web. Stéphane Bouvry, 2014 Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,

Plus en détail

Pour en expliquer le principe, on se limitera à deux exemples :

Pour en expliquer le principe, on se limitera à deux exemples : Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Pour en expliquer le principe, on se limitera

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

DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER

DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER DOSSIER RESSOURCES CRÉATION DE S HTML UTILISATION DU LOGICIEL DREAMWEAVER SOMMAIRE SITE Créer un nouveau site Page 1 Ouvrir un site Pages 1-2 Créer une nouvelle page Page 2 Modifier les propriétés d'une

Plus en détail

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

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

Plus en détail

{less} Guide de démarrage

{less} Guide de démarrage {less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site

Plus en détail

Intégrateur Web HTML5 CSS3

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

Plus en détail

Responsive Web Design. La Rochelle, Avril 2014

Responsive Web Design. La Rochelle, Avril 2014 Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches

Plus en détail

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML tableau Lévis Thériault, hiver 2009 Structure d un tableau

Plus en détail

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE

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

Plus en détail

Les unités de taille des polices de caractères

Les unités de taille des polices de caractères Les unités de taille des polices de caractères Deux systèmes permettent d'indiquer les dimensions des éléments en CSS : les unités de taille fixe et les unités de taille relative. C'est la propriété font-size

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

Comment personnaliser la page d'inscription Wordpress!

Comment personnaliser la page d'inscription Wordpress! Comment personnaliser la page d'inscription Wordpress! Author : soufiane Bonjour, Voulez-vous améliorer la page d inscription de votre site Wordpress et la rendre plus adaptée au thème par défaut de votre

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent La

Plus en détail

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web 52 Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web D'où proviennent ces données qui permettent de vous localiser? Pour les smartphones, deux procédés peuvent être utilisés

Plus en détail

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

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

Plus en détail

Thème Prestashop : 01 Oslo v1.0

Thème Prestashop : 01 Oslo v1.0 Thème Prestashop : 01 Oslo v1.0 (Pour Prestashop 1.6.0 au supérieur) Merci d avoir choisi 01 Oslo Table des matières Installation... 3 Installation automatique pour Prestashop 1.6.x... 3 Mise à jour du

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

Plus en détail

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

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

Plus en détail

Développement Web pour mobiles

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

Plus en détail

HTML5 et CSS3 pour des sites Responsive Web Design

HTML5 et CSS3 pour des sites Responsive Web Design Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La

Plus en détail

Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3

Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3 Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad - 2013 2 La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction

Plus en détail

PEPSITE RWD ET LA CREATION DE SITES WEB RESPONSIFS

PEPSITE RWD ET LA CREATION DE SITES WEB RESPONSIFS PEPSITE RWD EDITEUR WYSIWYG ONLINE POUR BOOTSTRAP ET LA CREATION DE SITES WEB RESPONSIFS 1 Avertissements Ce document a pour but de fournir à tous les moyens pour bien débuter avec PEPSITE RWD pour Bootstrap.

Plus en détail

Freeway 7. Nouvelles fonctionnalités

Freeway 7. Nouvelles fonctionnalités ! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer

Plus en détail

Mise à jour du site web de l auto-école et de son interface d administration

Mise à jour du site web de l auto-école et de son interface d administration Auto-école 2000 94 bld de Fourmies 59100 ROUBAIX Rapport de stage : Stage du 20 Avril au 29 mai Année universitaire 2008-2009 Mise à jour du site web de l auto-école et de son interface d administration

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 5 & CSS. Aurélien Tabard - Université Claude Bernard Lyon 1

HTML 5 & CSS. Aurélien Tabard - Université Claude Bernard Lyon 1 HTML 5 & CSS 1 Plan Introduction HTML HTML 5 CSS 2 Un exemple une page HTML une page HTML ceci est une page HTML avec deux paragraphes.

Plus en détail

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

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

Plus en détail

Réalisation d'une brochure PDF en A4 avec SCRIBUS

Réalisation d'une brochure PDF en A4 avec SCRIBUS Réalisation d'une brochure PDF en A4 avec SCRIBUS 1/ planifier son travail quelle cible en terme de population? quelle format? quelle sortie? Écran, print N&B, couleur... s'inspirer de brochures publicitaires,

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

Flex 4.5 / Flash Builder 4.5. Prise en main

Flex 4.5 / Flash Builder 4.5. Prise en main Flex 4.5 / Flash Builder 4.5 Prise en main A. Belaïd 2011-2012 1 Flex / Flash Builder C est quoi ces deux noms? Flex est le framework qui permet de créer des applications web basées sur la technologie

Plus en détail

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation

Plus en détail

Formation dev web de base

Formation dev web de base Formation dev web de base Le Web n est pas internet HTTP Hypertext Transfer Protocol Le client envoie une requête au serveur. Le serveur répond avec un code status et un contenu Le navigateur reçoit la

Plus en détail

Programmation Web. Chapitre 2. 2.1 Le Web. Sommaire

Programmation Web. Chapitre 2. 2.1 Le Web. Sommaire 13 Chapitre 2 Programmation Web Sommaire 2.1 Le Web.......................................... 13 2.1.1 Serveurs web................................... 14 2.1.2 Clients web....................................

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

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

Créer une carte de visite Avec Open Office Writer

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

Plus en détail

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

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

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

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

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

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

Plus en détail

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

Kit de Publication v2.1

Kit de Publication v2.1 «Patch v2.1» Kit de Publication v2.1 Date modification : 25/05/2009 Kit de Publication Page 1 sur 16 Table des matières 1 OBJET..2 2 PRÉ-REQUIS D'INSTALLATION2 3 CONTENU DU PATCH.2 4 CHANGELOG..3 5 TÉLÉCHARGER

Plus en détail

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 le langage HTML Maxime Morge Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 Plan Pourquoi est-il nécessaire de connaître le langage HTML? Comment stucturer le contenu d une page? Données

Plus en détail

iphone Applications avec HTML, CSS et JavaScript Conversion en natifs avec PhoneGap Jonathan Stark

iphone Applications avec HTML, CSS et JavaScript Conversion en natifs avec PhoneGap Jonathan Stark Applications iphone avec HTML, CSS et JavaScript Conversion en natifs avec PhoneGap Jonathan Stark Groupe Eyrolles, 2010, pour la présente édition, ISBN : 978-2-212-12745-4 Table des matières Avant-propos...................................................

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

Plus en détail