Tutoriel : Feuille de style externe

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

Download "Tutoriel : Feuille de style externe"

Transcription

1 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? Ensuite ouvrez Notepad2 dont vous devriez trouver le dossier sur le bureau de votre ordinateur. Faites enregistrez-sous et choisissez le format CSS Style Sheets. En nom de fichier écrivez style. Eliminez dans le code html de votre page cerise.htm tout ce qui n'est pas nécessaire : <font>, <br>,, <center>, <b>, <div>, les attributs de la balise body (text et link par exemple). Quand vous aurez fait ce premier nettoyage enlevez aussi toutes les balises table, td, tr et tbody et les images blank.gif. Ceux sont tous ces éléments que nous allons remplacer par la feuille de style que vous avez créée préalablement. Enregistrez votre feuille et fermez Notepad2, vous allez utiliser un peu maintenant l'éditeur de CSS de NVU. Dans NVU allez dans Outil > Editeur CSS Cliquez sur feuille liée : dans URL allez chercher votre feuille de style, dans liste des médias écrivez all, Titre notez Feuille de style de Cerise et faites créer votre feuille de style Cliquez sur Règle et choisissez l'option style appliqué à tous les éléments correspondant d'un type. A la place d'écrire une balise, vous allez utiliser le sélecteur universel * que vous souhaitez appliquer à votre page la police arial et la couleur noire : * { font-family: "arial",verdana,lucida,sans-serif;color: rgb(0, 0, 0) ;} Dans un deuxième temps, nous allons définir l'arrière plan de la page et la taille de la police par défaut qui sont des éléments décris dans la balise body. Dans l'onglet fond vous pourrez intégrer l'image fond2.gif en arrière plan qui se trouvent dans le dossier images. Laissez les réglages par défaut. Pour la taille de la police, choisissez 0.9em. body { background-image: url(images/fond2.gif);font-size:0.9em} Nous allons ensuite revenir à la page html en positionnant les balises paragraphes et donnant au titre «Comment débuter une recherche» la valeur H2. Nous allons créer un cadre commun que nous appellerons #source car,il a pour vocation d'être unique, on l'utilisera donc comme un identifiant unique ou id. Le cadre nous aidera par la suite à positionner les différents blocs que nous allons créer. #source {margin:0px 2px 0px 0px;padding:0;} Conseil : quand vous serez dans l'éditeur de CSS choisissez style appliqué à tous les éléments du sélecteur mais n'oubliez pas d'écrire le dièse. Les marges sont à zéro à l'exception de la marge de droite que nous avons voulu dès l'origine avec un retrait de 2 px ou 2 pixels. Taponot Céline Urfist Paris 1/5

2 Ce cadre dans le code HTML se traduira par l'ouverture d'une balise <div id= source > juste après la balise body et la fermeture de la balise après </body> Pour positionner les images comme nous le souhaitons, nous allons utiliser un bloc, c'est à dire la balise div, allié avec un élément de type class. Conseil : vous allez pouvoir enfin tester la règle style nommé. Toutefois, il n'est pas nécessaire comme pour les id d'ajouter le «.» devant votre nom de style, il est automatiquement ajouté..colonne {width:14%;float:left;} Ce bloc nous l'appellerons colonne, il aura pour largeur 14% de l'écran et générera une boîte de bloc qui flotte à gauche. C'est ce qui nous permet d'aligner les images à gauches. #cerise {margin: 0 ;position:absolute;} (correspond à l'image logoceri.gif) L'id Cerise que nous allierons aussi à un bloc (div), a une marge de zéro puisque nous souhaitons accoler le logo à la marge de gauche. Le position absolute permet que mon bloc se situe hors du flux normal. Ainsi, il n'a aucune influence sur la mise en forme des autres éléments. Dans le code HTML, cela se traduit : <div id="source"> <div class="colonne"> <div id="cerise"> <a href="http://www.ccr.jussieu.fr/urfist/cerise/index.htm"><img alt="logo de Cerise" src="images/logoceri.gif"></a> <div class="texte"> #retour {position:absolute;padding: 0em 0 0 1em;margin:0;} (correspond à l'image retour.gif) On retrouve les mêmes propriétés que que pour le premier logo, à l'exception de l'espacement interne de 1 em à gauche pour le centré au milieu de la colonne. Dans le code HTML, cela se traduit : <div class="colonne"> <div id="retour"><a href="#0" onclick="javascript:history.back()"><img style="border: 0px solid ; width: 72px; height: 53px;" alt="retour vers la page précédente" src="images/retour.gif"></a> <div class="texte > Nous allons maintenant créer le cadre, nous permettant de positionner le texte central par rapport au style.colonne..texte {margin: 0% 10% 2em 130px;padding: 0;} Nous l'utiliserons deux fois, il est donc préférable d'en faire une classe : pas de marge interne mais une marge de droite de 10% la taille de l'écran, une marge de 2 em en bas et une marge de 130 pixel à gauche. On obtient dans le HTML, l'ouverture d'une balise div class="texte", juste après la fermeture de l'id cerise et sa fermeture après la balise hr. Taponot Céline Urfist Paris 2/5

3 L'ouverture du deuxième style se fait après l'image retour.gif..texte h2 {margin:2em 0 2em 1%; padding: em; background: url(file:images/pict1gm.gif) 0% 0% no-repeat;} H2 étant contenu dans la balise texte et souhaitant lui appliquer une image devant, il nous faut donc lui intégrer un style particulier. Positionnement du titre dans le bloc : Une marge de 2 em sur le haut, de 2 em sur le bas et de 1% à gauche pour aligner le titre dans le bloc. Une marge interne de 1em sur la gauche sera nécessaire pour aligner en plus, le titre sur l'image. Pour intégrer l'image, nous allons ruser en l'appliquant en tant qu'arrière plan. Quand on spécifie une image d'arrière-plan, les propriétés 0% 0% indique la position initiale de celle-ci. La paire de valeur indique ici, un positionnement sur le coin en haut et à gauche de l'image et aligné sur celui du bord de l'espacement de la boîte..bas {font-size:0.7em;} Nous voulons que le texte en bas de page soit plus petit, il nous faut donc appliquer une police moins importante pour indiquer la source du document, ici 0.7 em. En HTML : <div class="texte"> <p class="bas"><http://www.ccr.jussieu.fr/urfist/cerise/p1.htm> Maj /CP</p> <p class="bas"><img alt="logo de l'urfist au format PNG" src="images/urfist.png"> Cerise Copyright 1999 </p> hr {margin-top:2em;} Souhaitant insérer un espace entre le texte et la balise hr, nous intégrons une marge de 2em sur le haut. a:link {color: #000000;text-decoration:underline} a:visited {color: #525252;text-decoration:underline;} a:hover {background: #ffffce;text-decoration:underline;} Pour personnifier les liens, nous donnons aux liens lorsqu'ils sont actifs, visités ou surlignés des couleurs différentes mais, ils restent soulignés. Pour que les images n'aient pas de bordures lorsqu'elles servent de liens. Créez une règle de style, qui supprime les bordures des images : img { border-style: none;border-width: 0px; } Mais comme les images sont des liens actifs lors du survol du curseur, leurs fonds changent de couleur. Pour que cela soit plus discret, nous allons lui appliquer un fond blanc. a:hover img {background:rgb(255, 255, 255);} Une fois terminé, validez votre feuille de style et votre page web. Taponot Céline Urfist Paris 3/5

4 Taponot Céline Urfist Paris 4/5

5 Taponot Céline Urfist Paris 5/5

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

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

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve Intro Web 2011-2012 «nous donnerons tout d'abord les définitions de l'internet, du Web et du langage XHTML. Nous expliquerons ensuite ce qu'est une url et les différentes actions induites lorsque je demande

Plus en détail

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

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

Créer des styles CSS simples

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

Plus en détail

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

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

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

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

Création d un Site Web

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

Plus en détail

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

PROGRAMMER UNE PAGE WEB EN HTML ET CSS

PROGRAMMER UNE PAGE WEB EN HTML ET CSS Lycée Felix Le Dantec - Lannion PROGRAMMER UNE PAGE WEB EN HTML ET CSS 1STI2D TP8-3H NOM : PRÉNOM : CLASSE : Condition de réalisation : Travail seul Durée : 3 heures Matériel : un ordinateur sous Ubuntu

Plus en détail

NPDS. Theme-Dynamic. Faite votre thème pour NPDS en HTML

NPDS. Theme-Dynamic. Faite votre thème pour NPDS en HTML NPDS Theme-Dynamic Faite votre thème pour NPDS en HTML Theme-Dynamic pour NPDS v 5.x Thèmes en HTML Réalisé par namoureuxtransi Relecture et Corrections par developpeur : developpeur@npds.org http://www.npds.org

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

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

INITIATION AU LANGAGE HTML

INITIATION AU LANGAGE HTML INITIATION AU LANGAGE HTML I INTRODUCTION Seules les bases du langage HTML sont abordées ici. Cette initiation a pour but de "démarrer", les nombreuses ressources concernant ce langage vous permettront

Plus en détail

Création d un site Internet (partie 2 )

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

Plus en détail

Les Tableaux sous Word

Les Tableaux sous Word Les Tableaux sous Word Comme pour les images, la sélection d un tableau ouvre un menu contextuel qui va s adresser au tableau. Ce menu "les outils du tableau" propose 2 onglets, Création et Disposition.

Plus en détail

Réaliser une page du site http://la-ba.lyceegutenberg.net

Réaliser une page du site http://la-ba.lyceegutenberg.net Réaliser une page du site http://la-ba.lyceegutenberg.net Réaliser une page du site http://la-ba.lyceegutenberg.net Récupérer les éléments récupérer sur le bureau de votre ordinateur à partir du serveur

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

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

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

Personnaliser et adapter SPIP Développeur SPIP

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

Plus en détail

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet!

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet! Créez en quelques minutes votre site Internet! SOMMAIRE : Choisir une interface graphique - Nommez votre site... page 03 5 étapes de création... page 04 Les outils de création graphique... page 05 Mise

Plus en détail

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

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

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

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

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

Plus en détail

Gérer un site avec Nvu 1.0 http://www.nvu.com. d'après le diaporama d'isabelle Motte Facultés Universitaires Notre-Dame de la Paix de Namur

Gérer un site avec Nvu 1.0 http://www.nvu.com. d'après le diaporama d'isabelle Motte Facultés Universitaires Notre-Dame de la Paix de Namur Gérer un site avec Nvu 1.0 http://www.nvu.com d'après le diaporama d'isabelle Motte Facultés Universitaires Notre-Dame de la Paix de Namur Plan du cours Préliminaire : Description de la fenêtre de travail

Plus en détail

Fiche n 4 Utilisation de Kompozer Table des matières

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

Plus en détail

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 OPEN OFFICE WRITER

TUTORIEL OPEN OFFICE WRITER TUTORIEL OPEN OFFICE WRITER Janvier 2012 Table des matières 1Présentation du logiciel... 3 2Création d'un document... 3 3Format des pages et pied de page... 4 3.1Format des pages... 4 3.2Pied de page...

Plus en détail

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

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

Plus en détail

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

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

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

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

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

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

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

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

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

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML feuilles de style en cascade (CSS) Lévis Thériault, hiver 2009 CSS (feuilles de style en cascade) CSS: Cascading

Plus en détail

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

Des pages web avec KompoZer

Des pages web avec KompoZer Des pages web avec KompoZer S Patrice NADAM, Lycée La Tour de Dames Rozay-en Brie (77) et Médialog KompoZer est un nouvel éditeur HTML libre et gratuit. Nous vous proposons d aller pas à pas à sa découverte.

Plus en détail

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

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

Plus en détail

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

TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM

TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM V1.0 TUTORIEL JCE - EDITEUR Le nouvel outil pour vos articles... Pour les plus anciens d entre vous, vous avez connu la transmission des

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

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

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

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL Prise en main de NVU et Notepad++ (conception d application web avec PHP et MySql) Propriétés Intitulé long Formation concernée Matière Présentation Description Conception de pages web dynamiques à l aide

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

CARTES DE VISITE, CARTE DE VŒUX, ETIQUETTES AVEC OPENOFFICE

CARTES DE VISITE, CARTE DE VŒUX, ETIQUETTES AVEC OPENOFFICE CARTES DE VISITE, CARTE DE VŒUX, ETIQUETTES AVEC OPENOFFICE 1- Créer une planche 2- Indiquer les mesures 3- Indiquer le format de la page 4- Ajouter une bordure 5- Ajouter du texte 6- Ajouter une image

Plus en détail

Réalisation de quelques pages Web / Activités et travaux d'élèves

Réalisation de quelques pages Web / Activités et travaux d'élèves Réalisation de quelques pages Web / Activités et travaux d'élèves Principe : Il s'agit de réaliser avec Dreamweaver qautre pages web (donc au format Html, hypertexte Markup Language) et les lier entre

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

1 En route vers HTML 5 et CSS3

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

Plus en détail

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

Faire un en-tête. Comment faire un en-tête ou un pied de page sur un document?

Faire un en-tête. Comment faire un en-tête ou un pied de page sur un document? OpenOffice (tabulations, en-tête, pied de page Faire un en-tête Qu est-ce qu un en-tête? c est la partie d'un message contenant les informations nécessaires à sa gestion telles que l'expéditeur. Elle se

Plus en détail

B) - INSÉRER CARACTÈRES avec "WORD ART" 7

B) - INSÉRER CARACTÈRES avec WORD ART 7 Sommaire A) Travaillez avec Word 2003 2 1) - Ouvrir / Enregistrer / Fermer dans WORD 2 2) - Touche de CORRECTION et de MODIFICATION dans WORD 3 3) - Touche de DÉPLACEMENT et de POSITIONNEMENT 3 4) - Touche

Plus en détail

Créer un menu adaptable à toutes les résolutions

Créer un menu adaptable à toutes les résolutions Créé par : feektif Ce guide est reproductible en : 30 à 40 min et est d'un niveau : Intermédiaire Pour de tutoriel, nous allons réaliser un menu composé de cinq liens, chacun divisé en 3 éléments. Un curseur

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

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

Créer des pages web avec Front Page 2000

Créer des pages web avec Front Page 2000 Créer des pages web avec Front Page 2000 1 - Préparation Préparer le plan du site que l'on souhaite créer avec les liens reliant les différentes pages. Structure du site Structure pour le stockage des

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

Introduction à HTML. A. HTML et le web

Introduction à HTML. A. HTML et le web Introduction à HTML Isabelle Debled Renesson Marie-Dominique Devignes LORIA 1 2 1 Fonctionnement en mode client/serveur 1. Construction d une requête ex web : http://www.loria.fr/news CLIENT 5. Mise en

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

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...

Plus en détail

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

Modifications EPN-Campus

Modifications EPN-Campus Modifications EPN-Campus 1 - Les différents types d articles disponibles pour EPN-Campus... 2 a) First Article... 2 b) Standard Article... 4 2- Modifications des «portlets» sur EPN-Campus... 5 a) Title

Plus en détail

Tutoriel CK Editor TABLE DES AUTEURS/LECTEURS. Nom Société Fonction. Auteur(s) : Anne-Sophie LOGIPRO Formation

Tutoriel CK Editor TABLE DES AUTEURS/LECTEURS. Nom Société Fonction. Auteur(s) : Anne-Sophie LOGIPRO Formation Tutoriel CK Editor LOGIPRO : 2 rue Pierret Cité Négocia 43000 Le Puy Tél. : 04 71 09 15 53 Fax : 04 69 96 06 25 E-mail : logipro@logipro.com Site web :www.logipro.com TABLE DES AUTEURS/LECTEURS Nom Société

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

Vade-mecum des «raccourcis typographique» dans SPIP

Vade-mecum des «raccourcis typographique» dans SPIP Vade-mecum des «raccourcis typographique» dans SPIP Fonctionnalités Méthodes Commentaires Intertitre {{{le titre}}} Le texte entre triples accolades est affiché comme un titre. Changement de Cliquer deux

Plus en détail

Comment créer des GIF animés en dix étapes?

Comment créer des GIF animés en dix étapes? Comment créer des GIF animés en dix étapes? Tutoriel GIF Movie Gear Septembre 2002 Rédigé par :Visicom Média inc. 1 TABLE DES MATIERES PRÉSENTATION DE GIF MOVIE GEAR... 2 BARRE DE MENUS... 2 BARRE D'OUTILS

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

Traitement de texte : Quelques rappels de quelques notions de base

Traitement de texte : Quelques rappels de quelques notions de base Traitement de texte : Quelques rappels de quelques notions de base 1 Quelques rappels sur le fonctionnement du clavier Voici quelques rappels, ou quelques appels (selon un de mes profs, quelque chose qui

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

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

Prise en main rapide

Prise en main rapide Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un

Plus en détail

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML A L'AIDE DU LOGICIEL LIBRE OFFICE Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte

Plus en détail

Formation > Développement > Internet > Réseaux > Matériel > Maintenance

Formation > Développement > Internet > Réseaux > Matériel > Maintenance Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE

Plus en détail

Initiation HTML 5 / CSS 3. Clément Bourgoin cb@nokto.net v1.0-17/01/2013

Initiation HTML 5 / CSS 3. Clément Bourgoin cb@nokto.net v1.0-17/01/2013 Initiation HTML 5 / CSS 3 Clément Bourgoin cb@nokto.net v1.0-17/01/2013 1. Les langages du web Pour créer un site web, on utilise au moins deux langages : le HTML et le CSS. Il en existe d'autres mais

Plus en détail

Introduction à HTML et CSS

Introduction à HTML et CSS ENS de Cachan Introduction à HTML et CSS Françoise Tort Chargement d'une page Web h"p://site.chemin./page.html navigateur requête.html.css.jpg.mp3 serveur web fichiers Le navigateur web traduit les pages,

Plus en détail

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

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

Plus en détail

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web Le Web 1. Qu est-ce que le Web? 7 1.1 Côté serveur : HTTP, FTP, langages, SQL 7 1.2 Côté client : HTML, CSS, JavaScript 10 2. Les langages et leur utilité 10 2.1 HTML 10 2.2 CSS 13 2.3 JavaScript 16 2.4

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

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

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

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS

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

Plus en détail

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

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word.

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word. PRETASHOP LES OBJECTIFS : Vous verrez comment installer Joomla! localement puis sur un serveur distant, concevoir l organisation de votre site, rédiger vos premiers articles, maitriser les feuilles de

Plus en détail

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

Plus en détail

Projet SITEPERSO. Activité A1 Apprentissage du langage HTML par l'exemple Tous. Compétences mises en œuvre : Ressources utiles :

Projet SITEPERSO. Activité A1 Apprentissage du langage HTML par l'exemple Tous. Compétences mises en œuvre : Ressources utiles : Compétences mises en œuvre : C 4.2.2.2 Concevoir les mises à jour à effectuer C 5.2.4.1 Se documenter à propos d une technologie, d un composant, d un outil ou d une méthode Ressources utiles : http://slaout.linux62.org/html_css/html.html

Plus en détail

Date de création : 03/06/2013 Date de modification : Fiches techniques PMB - Cellule PMB - cellulepmb@ac-rennes.fr

Date de création : 03/06/2013 Date de modification : Fiches techniques PMB - Cellule PMB - cellulepmb@ac-rennes.fr Titre Paramétrer et personnaliser le style GENBIB Rubrique 6. Opac 6.1.2 Auteur Edith Boulo Version PMB : 3.4.16 Date de création : 03/06/2013 Date de modification : 1. Paramétrage par défaut Voici un

Plus en détail

Parcours guidé : créer des pages simples au format HTML1 avec Nvu version nvu-1.0-win32-installer-fr.exe dans un environnement Windows XP

Parcours guidé : créer des pages simples au format HTML1 avec Nvu version nvu-1.0-win32-installer-fr.exe dans un environnement Windows XP Basse-Norma ndie Parcours guidé : créer des pages simples au format HTML1 avec Nvu version nvu-1.0-win32-installer-fr.exe dans un environnement Windows XP Dominique Lachiver décembre 2005 1 HTML : HyperText

Plus en détail

Conception Adaptative "Responsive Web Design"

Conception Adaptative Responsive Web Design Conception Adaptative "Responsive Web Design" Construire des interfaces web qui s'adaptent aux spécificités des terminaux sur lesquelles elles sont vues RWD in the wild quelques exemples : http://incredibletypes.com/

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