TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs :

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

Download "TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs :"

Transcription

1 TP Informatique Personnalisation de page web HTML avec le langage CSS Objectifs : - Approfondir ses connaissances au langage HTML - Changer le style et la présentation d une page HTML grâce au langage CSS «Cascading Style Sheets» Page 1 sur 8

2 Aujourd hui nous allons découvrir un langage informatique qui permet de personnaliser les pages web HTML, il s agit de CSS (Cascading Style Sheets). 1- La page HTML : Commencez par ouvrir Bloc-notes et copier le code HTML ci-dessous : <html> <head> <title>ma première page avec du style</title> </head> <body> <!-- Menu de navigation du site --> <ul class="navbar"> <li><a href="index.html">home page</a> <li><a href="reflexions.html">réflexions</a> <li><a href="ville.html">ma ville</a> <li><a href="liens.html">liens</a> </ul> <!-- Contenu principal --> <h1>ma première page avec du style</h1> <p>bienvenue sur ma page avec du style! <p> Il lui manque des images, mais au moins, elle a du style et elle a des liens, même s'ils ne mènent nulle part... <p>je devrais étayer, mais je ne sais pas comment encore. <address>fait le 12 janvier 2016<br> par moi.</address> </body> </html> Enregistrez ce fichier sous «index.html», ensuite exécutez-le avec un navigateur web. Que voyez-vous? 2- Ajouter de la couleur : Afin de personnaliser cette page web, on doit ajouter une balise <style> au fichier HTML. Le code CSS de style sera entre cette balise et la balise fermée </style>. Retournez à la fenêtre de votre éditeur et ajoutez les cinq lignes suivantes dans la partie <head> de votre fichier HTML. Les lignes à ajouter sont celles affichées en rouge. Page 2 sur 8

3 La première ligne indique qu'il s'agit d'une feuille de style et qu'elle est écrite en CSS ("text/css"). La seconde ligne indique que nous ajoutons du style à l'élément "body" de la page web. La troisième ligne indique la couleur du texte et la couleur du fond. Enregistrez le fichier et exécutez-le avec un navigateur web. Qu en pensez-vous? 3- Ajouter des fontes : Ici on va ajouter une fonte de type «Comic Sans MS» pour le texte de la page web. Ainsi qu une fonte de type «Chiller» pour le titre de cette page web. Dans votre fichier Bloc-notes ajoutez les lignes en rouge suivantes : Enregistrez le fichier et exécutez-le avec un navigateur web. Que remarquez-vous? Page 3 sur 8

4 4- Positionner la barre de navigation : Ici on va personnaliser la barre de navigation contenant les liens Hypertextes de notre page web. Copiez et collez dans votre fichier «index.html» le code en rouge suivant : Dans le code CSS ci-dessus : Le padding-left représente l espace entre le texte et le bord de la page (ici 11em = 11 espaces). Le texte de la page sera donc décalé de 11 espaces. On veut positionner la barre de navigation «en haut à gauche» de la page web : - top : définit le nombre d espaces au dessus de la barre, - left : le nombre d espaces à gauche de la barre, - width : détermine la largeur de la barre de navigation, - Position : «absolute» signifie que la barre de navigation peut se positionner indépendamment du texte de la page web. - Padding et margin : le nombre d espaces avant et après la barre de navigation. Exécutez le code de votre fichier HTML et visualisez le résultat. Page 4 sur 8

5 5- Personnaliser la barre de navigation : Ici on va personnaliser la barre de navigation contenant les liens Hypertextes de notre page web. Copiez et collez dans votre fichier «index.html» le code en rouge suivant : Dans «ul.navbar» on définit un arrière plan blanc, une marge d un demi-espace entre les liens, et un bord rouge de largeur de 0.5 espace pour chacun des liens. On souhaite aussi afficher les liens en «bleu» (par défaut), et les liens déjà visités en «violet». Que constatez-vous après l exécution de ce code? Page 5 sur 8

6 6- Personnalisation de la signature : Ici on va personnaliser la signature de cette page web, on va donc la séparer du texte avec des pointillés et changer sa fonte et sa couleur. «Border-top» : permet de tracer une ligne au-dessus de la signature. Page 6 sur 8

7 7- Fichier CSS externe : Nous disposons d'un fichier HTML avec une feuille de style intégrée. Mais si notre site se développe, nous voulons probablement que plusieurs pages partagent le même style. Il existe une meilleure méthode que de copier la feuille de style dans chaque page: si nous mettons la feuille de style dans un fichier à part, toutes les pages peuvent pointer sur celuici. Pour créer un fichier de feuille de style, nous devons créer un autre fichier texte vide. Vous pouvez ouvrir de nouveau «Bloc-notes» afin de créer un nouveau fichier texte vide ; Ensuite, coupez et collez le code CSS copris entre les deux balises <style> et </style> depuis le fichier HTML vers la nouvelle fenêtre. N.B. Ne copiez pas les éléments <style> et </style>. Ils appartiennent au langage HTML, pas à CSS. Enregistrez le nouveau fichier de feuille de style sous le nom de «style.css», et ce dans le même dossier que le fichier «index.html». Afin d accéder à la feuille de style en ouvrant la page web, il faut insérer dans le fichier «index.html» un lien qui permet d exécuter le fichier «style.css». Ce lien est indiqué en rouge dans le code suivant : Page 7 sur 8

8 Vous pouvez personnaliser vos pages web créées dans les séances précédentes en changeant les polices (trouver les noms sur word ou libre office), ainsi qu en utilisant les couleurs suivantes : Pour accéder au tutoriel complet sur le langage CSS, cliquer sur le lien suivant : Page 8 sur 8

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

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

Plus en détail

STUDIO - TI6 TABLE DES MATIÈRES. NOUVELLE MATIÈRE (suite) 9. Intégration du logo. Sujet. HTML - CSS révisions - suite.

STUDIO - TI6 TABLE DES MATIÈRES. NOUVELLE MATIÈRE (suite) 9. Intégration du logo. Sujet. HTML - CSS révisions - suite. STUDIO - TI6 PASCAL PLACEMAN Sujet HTML - CSS révisions - suite TABLE DES MATIÈRES Nouvelle matière: 9. Intégration du logo 10. Un titre devant la vidéo 11. Utiliser des polices typographiques grâce à

Plus en détail

TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class

TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class Création et mise en forme d'une page Web avec une feuille de style Ouvrez la page index.htm qui envoyer par email. Insérez une feuille de style

Plus en détail

TD n 5 : Feuilles de styles

TD n 5 : Feuilles de styles TD n 5 : Feuilles de styles 1. Préparation du site a. Récupérez le site avec liens internes et tableaux du TD4 et assurez vous qu il soit dans un dossier aide-memoire sous D:\et-l2. 2. Joindre une feuille

Plus en détail

TP n 1 : Initiation au langage HTML

TP n 1 : Initiation au langage HTML Atelier informatique-langage HTML TP n 1 : Initiation au langage HTML 1. Rappels de quelques généralités - Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant un ensemble de convention

Plus en détail

1 - travail en pleine page du navigateur

1 - travail en pleine page du navigateur Utilisation du bandeau Fckeditor «TEXTE ENRICHI» dans les pages du site internet Version 1 du 7 avril 2009 Bandeau de l éditeur Fckeditor 1 - travail en pleine page du navigateur Pour faciliter le travail

Plus en détail

Création d'un site Web avec KompoZer

Création d'un site Web avec KompoZer Création d'un site Web avec KompoZer Table des matières 1Rudiments sur le langage HTML.1 1.1Structure d'une page web :.1 1.2Le langage des pages Web.2 2Préparation du site web..2 3Utilisation d'une feuille

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 06 Réussir son site web avec XHTML et CSS CSS, le langage de mise en page du Web 1. Insérer du code CSS...1 Dans un fichier.css...1 Dans l en-tête du fichier XHTML...3 2. Appliquer un style à des

Plus en détail

Arbres Mathématiques Informatique et Navigateurs Internet

Arbres Mathématiques Informatique et Navigateurs Internet Arbres Mathématiques Informatique et Navigateurs Internet Jacques Duma Présentation de la structure d arbre sur des exemples qui montrent où elle intervient en mathématique et en informatique. Application

Plus en détail

Contrôle final Développement Web

Contrôle final Développement Web Université de Batna 3 ème année Licence Pro IIM Faculté des sciences Département d informatique 2015/2016 Durée : 1h30 Le 30/05/2016 Question de cours (4.5 pts) Contrôle final Développement Web 1. Le cycle

Plus en détail

Travaux Pratiques : le langage HTML

Travaux Pratiques : le langage HTML Travaux Pratiques : le langage HTML Objectif : Ce TP couvre l'écriture d'une page Web en langage html4, en utilisant des balises non décorées. Puis l'utilisation d'un éditeur html pour enrichir la présentation

Plus en détail

HTML CSS Fiche numéro 6

HTML CSS Fiche numéro 6 HTML CSS Fiche numéro 6 Sources : https://openclassrooms.com/ L'ancien site 2minuteslearning.fr qui à malheureusement disparu https://www.vectorskin.com/balises-html5/ Mettre en place le CSS Dans un premier

Plus en détail

STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une

<div></div> STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une <div> Sujet STUDIO - TI6 PASCAL PLACEMAN Sujet HTML - CSS révisions TABLE DES MATIÈRES Nouvelle matière: 1. Donner une «class» à une 2. Créer une div en plein-écran 3. Gérer des colonnes 4. Mettre une video

Plus en détail

M1 / VP8 CREATION DE FEUILLES DE STYLE

M1 / VP8 CREATION DE FEUILLES DE STYLE M1 / VP8 CREATION DE FEUILLES DE STYLE Master 1 [Tribet Hervé] 2012 Styles sous DW8 Les styles HTML sont des mises en forme complexes regroupées sous une appelation ; on peut créer des styles HTML avec

Plus en détail

15. GERER LES IMAGES D ARRIERE-PLAN

15. GERER LES IMAGES D ARRIERE-PLAN 52 15. GERER LES IMAGES D ARRIERE-PLAN Il y a deux méthodes pour insérer les graphiques d une page web : Ajout du graphique dans l arrière-plan d un DIV à l aide des CSS (exemple : une texture pour créer

Plus en détail

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut.

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut. WEB 27/09 Chaque élément est une balise : HTML -> visible HEAD -> invisible BODY -> DOCTYPE: c est le type de document qu on va utiliser, XHTML 1.1=> le plus strict (qu on va bosser) N importe quel première

Plus en détail

Création de sites Web ~ Module 1 Introduction HTML - CSS

Création de sites Web ~ Module 1 Introduction HTML - CSS Création de sites Web ~ Module 1 Introduction HTML - CSS 1 Introduction : HTML, pour HyperText Markup Language, est le langage conçu pour représenter les pages Internet. C est un langage de balises permettant

Plus en détail

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

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

Plus en détail

Dossier ISN : Tracés de fonctions mathématiques :

Dossier ISN : Tracés de fonctions mathématiques : Dossier ISN : Tracés de fonctions mathématiques : Par Crosetti Pauline et Depoers Quentin. Lycée Colbert Tourcoing. Année scolaire 2012/2013. Sommaire : - Recherches et étude du projet - Html - Css - Javascript

Plus en détail

Atelier n 26b: Open Office : traitement de texte

Atelier n 26b: Open Office : traitement de texte Atelier n 26b: Open Office : traitement de texte Open Office est un logiciel libre (open) mis gratuitement à disposition des internautes, il comporte notamment un traitement de texte compatible avec Word

Plus en détail

Un script permet d'enregistrer une série d'évènements pour les reproduire à volonté et à l'identique.

Un script permet d'enregistrer une série d'évènements pour les reproduire à volonté et à l'identique. Un script permet d'enregistrer une série d'évènements pour les reproduire à volonté et à l'identique. Par exemple, si vous souhaitez modifier plusieurs photos de la même façon, il vous suffit de créer

Plus en détail

Carrefour de l information Université de Sherbrooke. Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web

Carrefour de l information Université de Sherbrooke. Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web Carrefour de l information Université de Sherbrooke Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web Par : Josée Martin (hiver 2005) Édition revue et augmentée par : Marc-André Dulude

Plus en détail

HTML CSS Fiche numéro 14

HTML CSS Fiche numéro 14 HTML CSS Fiche numéro 14 Sources : https://openclassrooms.com/ L'ancien site 2minuteslearning.fr qui à malheureusement disparu https://www.vectorskin.com/balises-html5/ Positionnement en CSS Avant de nous

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 11 v2 Réussir son site web avec XHTML et CSS TD de révision : le design d un site web 1. La structure générale... 2 2. Primo, le XHTML... 3 Découpage des pages en blocks... 3 Création du modèle de

Plus en détail

TP2 : Dessins, diagrammes, transitions, animations

TP2 : Dessins, diagrammes, transitions, animations TP2 : Dessins, diagrammes, transitions, animations Nous allons voir comment utiliser les barres d outils de dessins et ajouter des transitions et animations à nos diapositives. L idée est de poursuivre

Plus en détail

GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit

GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit Glendon Campus Information Technology (ITEC) Objectifs GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit

Plus en détail

CHARGÉE DE COURS : N. VANASSCHE

CHARGÉE DE COURS : N. VANASSCHE CHARGÉE DE COURS : N. VANASSCHE WWW.NATHALIEVANASSCHE.BE DE NOMBREUSES PERSONNES CONFONDENT (À TORT) INTERNET ET LE WEB. le Web fait partie d'internet. Internet est donc un grand ensemble qui comprend,

Plus en détail

Fonctions de base (1 ère partie) 1-2

Fonctions de base (1 ère partie) 1-2 A Enregistrer un document (pour la première fois) L enregistrement sert à conserver le travail en cours sur un support (disque dur, clé usb, ). On dit indistinctement Enregistrer ou sauvegarder un document

Plus en détail

Word 2013 : Menu «Insertion»

Word 2013 : Menu «Insertion» «Insertion» est le troisième onglet des menus installés par défaut dans Word. 1-Pages 2-Tableaux 3-Illustrations 4-Applications 5-Média 6-Liens 7-Commentaire 8-En-tête et pied de page 9-Texte 10-Symboles

Plus en détail

2. Premier enregistrement dans un répertoire spécifique et titre de page

2. Premier enregistrement dans un répertoire spécifique et titre de page Tutoriel Kompozer 1. Ouverture et configuration de l'interface Lors de la première ouverture, l'interface est comme à l'image 1a. À chaque démarrage, il y a une fenêtre d'astuces qui vous donne des trucs

Plus en détail

Interface de Word. Règle. Volet office. Barre d outils de mise en forme Elle permet d exécuter rapidement des commandes de mise en forme du texte.

Interface de Word. Règle. Volet office. Barre d outils de mise en forme Elle permet d exécuter rapidement des commandes de mise en forme du texte. Interface de Word L écran de Word est constitué de différents éléments qui sont les suivants : Barre de titre Barre de menu Point d insertion Barre d outils de mise en forme Règle Marge Barre d outils

Plus en détail

Utilisation du Web. Sommaire. Notions de base 1

Utilisation du Web. Sommaire. Notions de base 1 Utilisation du Web Sommaire Notions de base 1 Navigation Saisie d une URL (adresse http) dans la barre d adresse 2 Cliquer sur un lien hypertexte (ou hyperlien) 2 Définition 2 Utilisation 2 Utilisation

Plus en détail

Word 2010 Débutant. Table des matières. 1) Changer le symbole de puce par une image : ) Déplacer un texte dans la flèche :...

Word 2010 Débutant. Table des matières. 1) Changer le symbole de puce par une image : ) Déplacer un texte dans la flèche :... Word 2010 Débutant Table des matières 1) Changer le symbole de puce par une image :... 2 2) Déplacer un texte dans la flèche :... 2 3) Insérer un tableau à la place d un texte... 2 4) Modifier le positionnement

Plus en détail

POWERPOINT NIVEAU 2

POWERPOINT NIVEAU 2 POWERPOINT 2007-2010 NIVEAU 2 Sommaire LES BOUTONS D ACTION... 2 Créer un bouton... 2 Paramètres des actions... 3 LIENS HYPERTEXTE... 4 Créer un lien hypertexte... 4 Choisir la destination du lien... 4

Plus en détail

des modèles pré-établis par nos développeurs. Comme tous les objets créés sur Spiral, cet outil permet :

des modèles pré-établis par nos développeurs. Comme tous les objets créés sur Spiral, cet outil permet : 17. les sites web Wiki Le site web sur Spiral Manne Connect Un site web (ou site internet) est un ensemble de pages Web liées entre elles par des liens et mises en ligne à partir d'une adresse Web précise

Plus en détail

TP 4 : IMAGES ET ARRIERE-PLANS

TP 4 : IMAGES ET ARRIERE-PLANS TP 4 : IMAGES ET ARRIERE-PLANS Les images dans le texte La balise img du langage Html permet d'insérer des images dans une page Html. Exemple : où fichier_image est le nom et

Plus en détail

Izinoa / octobre

Izinoa / octobre Connexion à Izinoa Fonctionnement de l arborescence Gestion d une page Edition Création Suppression Les éléments de page Texte simple Texte avec mise en page Image Date Lien Mot clés Spécification des

Plus en détail

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition Ajax, jquery et PHP 42 ateliers pour concevoir des applications Web 2.0 3 e édition Jean-Marie Defrance Groupe Eyrolles, 2008, 2010, 2011, ISBN : 978-2-212-13271-7 15 Plug-ins jquery Ce dernier chapitre

Plus en détail

On le retrouve dans plusieurs modules tels que le courrier, le forum, l agenda, les tâches, les communiqués et plus particulièrement dans Édu-Notes.

On le retrouve dans plusieurs modules tels que le courrier, le forum, l agenda, les tâches, les communiqués et plus particulièrement dans Édu-Notes. 154 L éditeur de texte L ÉDITEUR DE TEXTE L éditeur de texte du portail est une application destinée à créer et modifier des textes pour créer des documents HTML. L éditeur de texte possède certaines fonctions

Plus en détail

Initiation à OpenOffice Texte

Initiation à OpenOffice Texte Initiation à OpenOffice Texte Saisir du texte : La première étape pour réaliser une lettre ou un document est d en taper le texte au clavier. Le texte tapé apparaît dans le document à l endroit du curseur

Plus en détail

GUIDE ANIMATEUR DE SITE

GUIDE ANIMATEUR DE SITE GUIDE ANIMATEUR DE SITE Sommaire Guide Animateur 1 Premier pas avec ASPresso... 3 1.1 Accéder à votre site web... 3 1.2 Terminologie liée au site... 3 1.3 Accéder à l'interface d'administration... 3 1.4

Plus en détail

Rappelez vous la barre de tâches, nous allons vous révéler tous les secrets des onglets!

Rappelez vous la barre de tâches, nous allons vous révéler tous les secrets des onglets! Chapitre 3 : Personnaliser son template avec Artisteer Nous allons franchir une étape dans l utilisation d Artisteer, la personnalisation! Vous souhaitez que votre site soit unique, qu il ne ressemble

Plus en détail

Les formulaires types

Les formulaires types Les formulaires types Les formulaires types Formulaires interactifs Permettant de saisir des informations en remplissant des champs ou en cliquant sur des boutons Les formulaires De quoi avez vous besoin

Plus en détail

Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir

Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir Philippe Marcy (webmaster) Table des matières 1. QU EST-CE QU UNE FICHE THÉMATIQUE?... 2 2. FAIRE UNE PROPOSITION DE FICHE THÉMATIQUE...

Plus en détail

Formation Grainville la teinturiere. la- teinturiere.fr

Formation Grainville la teinturiere.  la- teinturiere.fr Formation Grainville la teinturiere www.grainville- la- teinturiere.fr Propulsé par : Un CMS en Open Source Version 1 p. 1 2 [Tapez le texte] Comment fonctionne le site? Le site permet aux internautes

Plus en détail

Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise

Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise <div>, le positionnement, les mesures. Description Mon Mondrian Compétences visées Les bases du HTML, du CSS, la balise , le positionnement, les mesures. Description Peindre, c'est salissant. Le code, c'est plus propre. À travers ce projet, recréez

Plus en détail

Les masques : Adapter un masque de diapositive :

Les masques : Adapter un masque de diapositive : Nous allons, dans cet exercice voir plus en détail l utilisation de certains outils afin de personnaliser sa présentation. Les masques : Un masque de diapositive est la partie d'un modèle où sont stockées

Plus en détail

Notions de base. EXCEL 365 (2014) Ce logiciel est un "tableur" qui à pour rôle principal la présentation de tableaux et de calcules.

Notions de base. EXCEL 365 (2014) Ce logiciel est un tableur qui à pour rôle principal la présentation de tableaux et de calcules. Fiche n 23 élaborée par: Page 1/5 Notions de base. EXCEL 365 (2014) Ce logiciel est un "tableur" qui à pour rôle principal la présentation de tableaux et de calcules. Dans cette version d'excel, vous ouvrez

Plus en détail

Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés :

Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : CSS positionnement POSITIONNEMENT Rappel balises de type bloc Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : width, height, min-width, ou

Plus en détail

L1 - Informatique et internet

L1 - Informatique et internet L1 - Informatique et internet Hervé Le Crosnier laboratoire GREYC - Université de Caen! herve.lecrosnier@unicaen.fr http://ensweb.users.info.unicaen.fr HTML + CSS Listes, images et liens Page HTML

Plus en détail

1.Créer sa présentation

1.Créer sa présentation Sommaire 1.Créer sa présentation 2. Titre et sous-titre 3. Ajouter une nouvelle diapositive 4. Disposition du texte et du contenu 5. Insérer un dessin 6. Modifier un dessin 7. Disposition du contenu de

Plus en détail

Formation à l outil informatique Traitement de texte Atelier 1 Création d'étiquettes

Formation à l outil informatique Traitement de texte Atelier 1 Création d'étiquettes Avant de créer des étiquettes s il l on souhaite faire par exemple des étiquettes de pots de confitures, il faut aller chercher sur Internet des photos : - Dans un premier temps, rendez vous sur le moteur

Plus en détail

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours :

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : COURS PROGRAMMATION WEB ASCADING STYLE SHEETS CSS CASCADING Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : http://essai.rnu.tn/enseignants/fatmachaker2.htm Année Universitaire :

Plus en détail

Le courrier électronique avec Outlook Express

Le courrier électronique avec Outlook Express Le courrier électronique avec Outlook Express 1) Accéder à Outlook Express 2) Présentation générale 3) Retirer un message 4) Récupérer un fichier joint 5) Ecrire un message 6) Répondre à un message 7)

Plus en détail

Proposition de méthode pour créer un document web de recherche à l aide de OpenOffice Writer.

Proposition de méthode pour créer un document web de recherche à l aide de OpenOffice Writer. Proposition de méthode pour créer un document web de recherche à l aide de OpenOffice Writer. Les deux seules techniques logicielles qui seront sollicitées dans ce document sont le l enregistrement d images

Plus en détail

Formation sur Word. Formation sur Word

Formation sur Word. Formation sur Word Formation sur Word Microsoft office Word est un logiciel de traitement de texte permettant la rédaction de documents, de rapports, de notes de service, etc. Il permet de faciliter l envoie de lettre par

Plus en détail

Création d un diaporama

Création d un diaporama Création d un diaporama B.5.1 Communiquer le résultat de ses travaux en s appuyant sur un outil de PréAO TD OpenOffice IMPRESS Attention : ce TD formatif nécessite une part de recherches et d investigations

Plus en détail

Concepts de base de PowerPoint

Concepts de base de PowerPoint Concepts de base de PowerPoint Pow erpoint est une application performante de présentation. Pour en tirer le meilleur parti, il faut d abord en comprendre les concepts de base. Ce didacticiel présente

Plus en détail

Menu. Créer et utiliser des modèles pour L insertion automatique sous Word

Menu. Créer et utiliser des modèles pour L insertion automatique sous Word Menu Créer et utiliser des modèles pour L insertion sous Word 1. Affichez la barre d outils insertion (page 2) 2. Un modèle d insertion pourquoi faire? 3. Comment utiliser un modèle avec insertion 4. Comment

Plus en détail

Partie HTML TD 1 : Les bases du HTML

Partie HTML TD 1 : Les bases du HTML Partie HTML TD 1 : Les bases du HTML 1 Introduction HTML = HyperText Marked Language HTML est un langage permettant de décrire des données affichables sous forme de page par un navigateur Web. HTML peut

Plus en détail

Fiche TD n 1 Le langage HTML

Fiche TD n 1 Le langage HTML Fiche TD n 1 Le langage HTML 1 Introduction Le HTML est le langage utilisé pour formaliser l information échangée sur internet. Il est constitué de balises qui indiquent de quelle manière les informations

Plus en détail

Créer un diaporama de présentation avec Power Point (version 2007)

Créer un diaporama de présentation avec Power Point (version 2007) Créer un diaporama de présentation avec Power Point (version 2007) Un diaporama est constitué d une série de diapositives. Il vous permet de présenter différents projets (compte rendu d AS, projet EPS,

Plus en détail

Formation Outlook

Formation Outlook Formation Outlook 2007 1 OUTLOOK 2007 Exercice n 1: "Présentation de Outlook" lancer le logiciel ouvrir un nouveau document (courrier, calendrier, ) utiliser les différents onglets naviguer dans les différents

Plus en détail

Démarrer LibreOffice Writer et découvrir l'interface.

Démarrer LibreOffice Writer et découvrir l'interface. LibreOffice.org est une suite bureautique libre, complète et entièrement gratuite, proposant tous les outils nécessaires à la bureautique : traitement de texte, présentation, tableur, base de données.

Plus en détail

Rédacteurs - Typo3 v6.2

Rédacteurs - Typo3 v6.2 Rédacteurs - Typo3 v6.2 Créer un texte et le mettre en forme Objet et contexte Ce document présente la création et la mise en forme d un contenu texte dans l environnement typo3 6.2. Créer un contenu de

Plus en détail

1. Mise en page du document. 1.1 Les marges. 1.2 L'orientation portrait ou paysage. 1.3 La taille

1. Mise en page du document. 1.1 Les marges. 1.2 L'orientation portrait ou paysage. 1.3 La taille Word est un logiciel important à connaitre, c'est pourquoi nous allons y consacrer un troisième cours dans ce chapitre et nous allons parler de la mise en page, des sauts de page, des entêtes et pied de

Plus en détail

Découvrir l environnement de Word

Découvrir l environnement de Word Découvrir l environnement de Word Qu est-ce qu un traitement de texte Un traitement de texte est un logiciel permettant de créer des documents contenant du texte, les images, des tableaux (sans calcul).

Plus en détail

Viatique. pour la création. de site. avec Kompozer. à l usage des. débutants

Viatique. pour la création. de site. avec Kompozer. à l usage des. débutants Viatique pour la création de site avec Kompozer à l usage des débutants Avant de commencer... 3 Création d une page simple... 3 Informations sur la page... 3 Apparence... 3 Sauvegarde... 3 Saisie du contenu...

Plus en détail

CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ;

CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ; CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise Pour les commentaires : /* un commentaire */ Classe : La construction d une classe :.ma_classe

Plus en détail

Le Masque de diapositives

Le Masque de diapositives Le Masque de diapositives Le rôle du masque est de permettre de Mettre en forme Mettre en page Toute la présentation de manière homogène et simultanée. Il ne fonctionne qu avec les espaces réservés. Pour

Plus en détail

A) Raccourci clavier avec Windows 2. B) Raccourci clavier avec Word 3. C) Raccourci clavier avec Excel 6

A) Raccourci clavier avec Windows 2. B) Raccourci clavier avec Word 3. C) Raccourci clavier avec Excel 6 Sommaire A) Raccourci clavier avec Windows 2 B) Raccourci clavier avec Word 3 C) Raccourci clavier avec Excel 6 Raccourci_Clavier.doc 44120 VERTOU Page : 1 / 8 A) Raccourci clavier avec Windows Raccourci

Plus en détail

ISN S8: Les pages web

ISN S8: Les pages web Objectif : L'objectif de ce TP est de réaliser une page 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.

Plus en détail

Powerpoint 2003 : Création d'un diaporama. Mode d emploi, par l'exemple, pour réaliser un diaporama dans Powerpoint 2003

Powerpoint 2003 : Création d'un diaporama. Mode d emploi, par l'exemple, pour réaliser un diaporama dans Powerpoint 2003 Powerpoint 2003 : Création d'un diaporama A savoir : Powerpoint 2003, logiciel de Présentation Assistée par Ordinateur (PAO), appartient à la suite Office 2003 de Microsoft. Le mode d emploi décrit ci-dessous

Plus en détail

Les versions Word 2010 Word 2013 Word Installation. Marie-Laure Besson :

Les versions Word 2010 Word 2013 Word Installation. Marie-Laure Besson : Les versions Word 2010 Word 2013 Word 2016 Installation Marie-Laure Besson : http://www.pilatcode.weebly.com Ce tutoriel est destiné aux personnes qui désirent installer une version de Studys manuellement.

Plus en détail

Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes

Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes Les CSS un menu vertical Nous allons créer un dossier menu_vertical Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes A l'intérieur du dossier un_niveau Nous créons les fichiers

Plus en détail

Bonjour. Orange Solidarité Numérique

Bonjour. Orange Solidarité Numérique Bonjour 1 EPN Picoulet Cours N 4 : Gestion des dossiers/fichiers Création Suppression Renommage 2 2 Rappel : les Fenêtres Rappel : les Fenêtres Les icônes Une icône représente un fichier, un dossier, un

Plus en détail

1 Présentation de l'interface GaïaMundi

1 Présentation de l'interface GaïaMundi Manuel de gestion de la plateforme Attlas & sites filleuls 1 Présentation de l'interface GaïaMundi...1 1.1 Ergonomie des 3 volets... 1 1.2 La barre de menus... 3 2 Création d'un nouveau site... 3 3 Mise

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

1 Prendre en main l interface et créer ses premiers courriers... 15

1 Prendre en main l interface et créer ses premiers courriers... 15 1 Prendre en main l interface et créer ses premiers courriers... 15 1.1. Tour d horizon... 16 Démarrer Word 2003... 16 Saisir un texte... 19 Appliquer quelques mises en forme... 21 Visualiser le document

Plus en détail

Matériel : Installation du logiciel : - Logiciel Photofiltre (gratuit) - Image à mettre en valeur

Matériel : Installation du logiciel : - Logiciel Photofiltre (gratuit) - Image à mettre en valeur Matériel : - Logiciel Photofiltre (gratuit) - Image à mettre en valeur Installation du logiciel : Télécharger le logiciel Photofiltre sur un site de téléchargement gratuit (telecharger.com ; clubic.com

Plus en détail

UTILISATION CMS PERSO

UTILISATION CMS PERSO UTILISATION CMS PERSO La gestion du site se passe entièrement dans la partie Administration du site. Pour accéder à l administration du site, il faut, soit cliquer sur le lien admin situé dans le menu,

Plus en détail

ISN - HTML : Apprendre HTML5. M. Lagrave HTML5. Code source Site classique CSS Bluefish. M. Lagrave. Lycée Beaussier

ISN - HTML : Apprendre HTML5. M. Lagrave HTML5. Code source Site classique CSS Bluefish. M. Lagrave. Lycée Beaussier Lycée Beaussier 2012 2013 Sommaire Le HTML «HyperText Markup Language» est un langage de balisage pour la création de site internet, il sert à structurer votre document. D autres langages peuvent s ajouter

Plus en détail

Exercice 1 : Structuration de document avec HTML

Exercice 1 : Structuration de document avec HTML Université Lumière Lyon 2 Université Nationale d Économie de Kharkiv Master 1 IDSM Année 2016-2017 Programmation Web Exercices pratiques (1) : HTML et CSS Jérôme Darmont (http://eric.univ-lyon2.fr/~jdarmont/),

Plus en détail

Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant :

Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. positionnement.php

Plus en détail

Faire sa BD. Vous obtiendrez alors cette fenêtre, choisissez alors partir de zéro. Fermez la fenêtre suivante ensuite en cliquant sur la croix

Faire sa BD. Vous obtiendrez alors cette fenêtre, choisissez alors partir de zéro. Fermez la fenêtre suivante ensuite en cliquant sur la croix Cet atelier a pour but de vous faire réaliser une BD à partir d éléments existants (personnages, décors). Il ne s agit pas de dessiner des personnages mais plus d inventer votre propre histoire. Etape

Plus en détail

Les raccourcis typographiques de SPIP

Les raccourcis typographiques de SPIP Les raccourcis typographiques de SPIP Depuis la version 1.7, il y a des contributions pour augmenter les possibilités de raccourcis typographiques de SPIP. 1- Les raccourcis "natifs" SPIP est basé sur

Plus en détail

1- Description de l environnement

1- Description de l environnement - 1 - Comment rendre ses diaporamas dynamiques? Plusieurs règles sont à observer. Vous devez vous assurez que votre auditoire peut lire correctement votre présentation en utilisant des polices pas trop

Plus en détail

Dreamweaver Image survolée

Dreamweaver Image survolée Dreamweaver Image survolée Image retournée (rollover) Un lien peut également être une surprise! Par exemple, vous passez votre souris et l image s illumine, la couleur change, l image se transforme. Comment

Plus en détail

1- Téléchargement de MAIL MERGE

1- Téléchargement de MAIL MERGE Envoyer un courrier à de nombreux destinataires sans risquer de SPAM Si vous voulez envoyer un message à de nombreux destinataires, vous allez rencontrer les problèmes suivants : 1) Lorsque vous ajoutez

Plus en détail

Créer une bannière Web animée

Créer une bannière Web animée Nul besoin d être un utilisateur avancé de DrawPlus pour créer des effets d animation impressionnants. Dans ce didacticiel, nous allons vous expliquer comment utiliser les masques et les effets de transparence

Plus en détail

Les Bases de Données En Utilisant Microsoft Office Access 2010

Les Bases de Données En Utilisant Microsoft Office Access 2010 Les Bases de Données En Utilisant Microsoft Office Access 2010 TABLE DES MATIERES Brevet De Responsabilité... 6 1. COMPRENDRE LES BASES DE DONNEES... 1 1.1. CONCEPTS SUR LES BASES DE DONNEES... 1 1.1.1.

Plus en détail

Développement d application web avec Visual Studio 2012 et ASP.NET. Tutoriel 5.1 : Validation

Développement d application web avec Visual Studio 2012 et ASP.NET. Tutoriel 5.1 : Validation L objectif de ce tutoriel est d utiliser les contrôles de validation afin de valider l inscription d un développeur à un site. Les informations suivantes doivent être validées : le nom et le prénom sont

Plus en détail

Logiciel d étiquettes Office Star - Manuel de création d étiquettes

Logiciel d étiquettes Office Star - Manuel de création d étiquettes Logiciel d étiquettes Office Star - Manuel de création d étiquettes 1. Choix du produit a) Veuillez indiquer une référence article ou b) Sélectionner une référence article ou un format dans la liste a)

Plus en détail

Création d un site public avec Pages

Création d un site public avec Pages Création d un site public avec Pages 1 Présentation L'application Pages permet de créer des pages web pouvant être organisées grâce à un menu de navigation, ce qui offre une grande liberté de mise en page.

Plus en détail

HELPCLIC 04/01/2008 SOMMAIRE

HELPCLIC 04/01/2008  SOMMAIRE SOMMAIRE I - Introduction ----------------------------------------------------------------------------------------------------------------- 5 1-1 : L écran d Excel 2007... 5 1-2 : Le bouton Office... 6

Plus en détail

Fiche technique : Mettre un fichier sur Calameo puis sur votre site

Fiche technique : Mettre un fichier sur Calameo puis sur votre site Afin de vous aider au mieux dans la gestion de votre site Internet, nous vous proposons de vous guider pas à pas dans le chargement et l insertion de vos documents lourds. Le téléchargement de documents,

Plus en détail

Nom de la commande Combinaison Touche. Activer/désactiver l affichage des balises XML. Ctrl+Maj+ Activer/Désactiver l équation Alt+ =

Nom de la commande Combinaison Touche. Activer/désactiver l affichage des balises XML. Ctrl+Maj+ Activer/Désactiver l équation Alt+ = Activer/désactiver l affichage des balises XML Ctrl+Maj+ X Activer/Désactiver l équation Alt+ = Activer/Désactiver les marques de révision Activer/désactiver un code du caractère Ctrl+Maj+ Alt+ R C Affichage

Plus en détail

Introduction à Excel 2007 (Version A2016)

Introduction à Excel 2007 (Version A2016) Introduction à Excel 2007 (Version A2016) Table des matières Introduction à Excel 2007... 1 (Version A2016)... 1 1. Modules de formation en ligne... 2 2. Différences entre Office (Excel) 2007 et les versions

Plus en détail

Les standards du web

Les standards du web COURS - Partie 1 Le HTML5 et le CSS3, petits frères du HTML (ou XHTML) et du CSS viennent, alors que l ère actuelle est à l interconnexion et aux média multiples. Dans le but de satisfaire la demande grandissante

Plus en détail