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

il lui manque des images, mais au moins, elle a du style. Et elle a des liens, même s'ils ne mènent encore nulle part

<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 encore nulle part </p> HTML 5 & CSS 3 1 - Le langage HTML N'utilisez pas un logiciel de traitement de texte, tels que Microsoft Word ou OpenOffice, car ils produisent des fichiers qu'un navigateur Web ne sait pas toujours lire

Plus en détail

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

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

Plus en détail

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

introduction principes syntaxe CSS : introduction

introduction principes syntaxe CSS : introduction CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 au programme... 1 introduction 2 principes 3 syntaxe Université Lille 1 Technologies du Web CSS : introduction 2 au programme...

Plus en détail

Cours Web n o 3 CSS Notions avancées

Cours Web n o 3 CSS Notions avancées Modèle de boîtes de CSS Cours Web n o 3 CSS Notions avancées Sandrine-Dominique Gouraud (gouraud@lri.fr) Pierre Senellart (pierre@senellart.com) Semaine du 3 octobre 2005 S.-D. Gouraud, P. Senellart (IFIPS)

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

introduction principes syntaxe CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1

introduction principes syntaxe CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 au programme... 1 introduction 2 principes 3 syntaxe Université Lille 1 Technologies du Web CSS : introduction 2 au programme...

Plus en détail

HTML & CSS. d e s i g n w e b. [ présentation ]

HTML & CSS. d e s i g n w e b. [ présentation ] d e s i g n w e b [ présentation ] Généralités Les feuilles de styles (CSS) existent depuis 1996. Elles ne sont vraiment correctement supportées par les navigateurs que depuis 2000-2001. C'est donc depuis

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

CSS. Alexandre Benoit TS10. D après openclassrooms

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

Plus en détail

INTRODUCTION AU LANGAGE HTML ET CSS

INTRODUCTION AU LANGAGE HTML ET CSS INTRODUCTION AU LANGAGE HTML ET CSS Sur le Web il est d usage de séparer structure et contenu d une page (html) de son style (css) Quelques liens : http://validator.w3.org/:pour vérifier que le est conforme

Plus en détail

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

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

Plus en détail

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

TD n 3 - Notion de langage CSS. Table des matières

TD n 3 - Notion de langage CSS. Table des matières TD n 3 - Notion de langage CSS Table des matières 1-Mettre en forme un page en utilisant la balise ...2 2-Mettre en forme un page en utilisant une feuille de style externe...4 3-Conseils pratiques

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 10 Réussir son site web avec XHTML et CSS Positionnement et mise en page par le CSS 1. Les 3 modes d affichage pour les éléments HTML... 1 1- Bloc / block... 1 2- En-ligne / inline... 1 3- Invisible

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

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

TD 1- Mise en forme d'un mémoire Word

TD 1- Mise en forme d'un mémoire Word TD 1- Mise en forme d'un mémoire Word ENREGISTREZ VOS DOCUMENTS REGULIEREMENT UTILISEZ LES UTILITAIRES D'AIDE A Rappel sur les modèles de documents A.1 Définition Un modèle est un objet destiné à être

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

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

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

Développement. Web. Gaël Mahé. UFR math-info. automne 2005

Développement. Web. Gaël Mahé. UFR math-info. automne 2005 Développement Client Web Gaël Mahé UFR math-info automne 2005 Introduction 2 langages s'intégrant dans HTML, interprétés par le navigateur : CSS = langage de style JavaScript = langage de programmation

Plus en détail

CSS. CSS - Cascading Style Sheets. Servent à mettre en forme les éléments d une page HTML

CSS. CSS - Cascading Style Sheets. Servent à mettre en forme les éléments d une page HTML CSS CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments d une page HTML Eléments = parties de la structure d une page : titres, paragraphes, listes, tableaux, images, etc. Attention

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

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

TP 1 - HTML/CSS. 0. Préparatifs. 1. Structure de la page HTML

TP 1 - HTML/CSS. 0. Préparatifs. 1. Structure de la page HTML TP 1 - HTML/CSS Objectif : Créer une page WEB statique en manipulant le langage HTML et la mise en forme CSS. Bien comprendre les styles et le positionnement des blocs en CSS. 0. Préparatifs 1. Lancer

Plus en détail

Introduction aux CSS

Introduction aux CSS Introduction aux CSS CSS: Cascading Style Sheet = feuille de style en cascade CSS est en quelque sorte la peinture que l'on applique sur xhtml, avec nous allons pouvoir réaliser de la mise en page et de

Plus en détail

ELEMENTS DE PRESENTATION

ELEMENTS DE PRESENTATION I - Production de présentation : 1 - Qu'est-ce qu'une présentation? ELEMENTS DE PRESENTATION C'est un moyen pour illustrer... Une présentation sera projetée sur un grand écran, le conférencier contrôle

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

ISN S9: Les pages web

ISN S9: Les pages web Objectif : Mettre en forme une page HTML Lors de l'écriture de pages web, nous savons qu'il faut prendre l'habitude de toujours séparer : Le fond (le contenu) : c'est le rôle du fichier HTML. La décoration

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

TP07: barre de navigation

TP07: barre de navigation TP07: barre de navigation Ce tp poursuit les tps précédents. Pour commencer, dans votre dossier «php» (qui est dans «www»), recopiez vos fichiers du TP06 dans un nouveau dossier «TP07» (cp -r TP06 TP07).

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

Guide d utilisation -

Guide d utilisation - Accéder au tableau de bord Pour entrer dans l espace d administration, allez à l adresse suivante : www.physiomouvementplus.com//wp-admin Une fenêtre d identification s ouvre alors : entrez votre Identifiant

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

C2i : Création de pages web

C2i : Création de pages web C2i : Création de pages web IUFE 2016/2017 Matthieu Giraud LIMOS, Université Clermont Auvergne Matthieu Giraud C2i : Création de pages web 1 / 33 Introduction Sommaire 1 Introduction 2 Structure d une

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

Pour cela, soit vous cliquez sur l icône du logiciel PowerPoint 2003 si celui-ci est sur le bureau.

Pour cela, soit vous cliquez sur l icône du logiciel PowerPoint 2003 si celui-ci est sur le bureau. - 1-1- Définition d un diaporama C est un mode d'affichage qui permet de diffuser une présentation à l'écran. La présentation est un ensemble de diapositives qui défilent. Celles-ci peuvent contenir du

Plus en détail

I. Généralités: II. Création des diaporamas:

I. Généralités: II. Création des diaporamas: I. Généralités: Un document multimédia est un document qui intègre des informations de différents formats tel que: texte, image, son, vidéo, graphique, Un site web est un ensemble de pages web qui sont

Plus en détail

Introduction à HTML: HyperText Markup Language

Introduction à HTML: HyperText Markup Language CREATION WEB HTML ET CSS Introduction à HTML: Le HTML, HyperText Markup Language, est un langage de balisage qui définit la structure logique d un document WWW diffusé sur le Web. La mise en forme de la

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

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

3/ ATELIER WEB LANGAGE CSS

3/ ATELIER WEB LANGAGE CSS 3/ ATELIER WEB LANGAGE CSS *Cascading Style Sheets : feuilles de style en cascade. Les feuilles de style servent, comme leur nom l'indique, à contenir les styles que vont prendre les différents éléments

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

Les feuilles de style

Les feuilles de style 1 Les feuilles de style 1. introduction... 1 2. déclaration de style dans le document... 1 3. définitions de style dans les fichiers externes... 5 4. Les attributs de définitions de style... 6 1. introduction

Plus en détail

Programmation PHP Septembre 2010

Programmation PHP Septembre 2010 IFT1147 Programmation Serveur Web avec PHP Un bref survol de HTML et CSS HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

THEME N 3 : LA GESTION DE FICHIERS DANS UNE FENETRE «PROJET»

THEME N 3 : LA GESTION DE FICHIERS DANS UNE FENETRE «PROJET» THEME N 3 : LA GESTION DE FICHIERS DANS UNE FENETRE «PROJET» Après avoir sélectionné un fichier présent dans la fenêtre «Projet», (ici, le fichier Products) en cliquant dessus avec le coté droit de votre

Plus en détail

Recouvrement des bordures

Recouvrement des bordures 4 Propriétés de mise en forme Tableau 4 43 Propriété table-layout (suite) auto : largeur automatique (valeur par défaut) ou fixed : largeur fixe. Propriété héritée. Pour retrouver la valeur initiale, utiliser

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

Chaque élément en code HTML est composé d une balise ouvrante et une balise fermante.

Chaque élément en code HTML est composé d une balise ouvrante et une balise fermante. Une balise est un morceau de code commençant par < et finissant par >. Exemples : Chaque élément en code HTML est composé d une balise ouvrante et une balise fermante. Une balise fermante

Plus en détail

TP 3 : Formulaires. M1106 Initiation au développement Web. Exercice 1 : Mon premier formulaire HTML5

TP 3 : Formulaires. M1106 Initiation au développement Web. Exercice 1 : Mon premier formulaire HTML5 IUT de Villetaneuse, Université Paris 13, Sorbonne Paris Cité DUT R&T 1 re année M1106 Initiation au développement Web 20162017 TP 3 : Formulaires Étienne André Version du sujet : 7 octobre 2016 Ce TP

Plus en détail

CHAPITRE 1 Saisir un document 11

CHAPITRE 1 Saisir un document 11 CHAPITRE 1 Saisir un document 11 1.1. Démarrer Word... 12 1.2. Découvrir la fenêtre principale... 16 1.3. Manipuler les barres d outils... 20 1.4. Saisir un document... 23 Quelques règles élémentaires

Plus en détail

Leçon 1 : le Traitement de texte

Leçon 1 : le Traitement de texte Leçon 1 : le Traitement de texte Objectifs : Utiliser les fonctionnalités avancées d'un traitement de texte Plan de chapitre I. Rappel et Quelques fonctionalités de base 1. Présentation de la fenêtre Word

Plus en détail

Séance 13: Conception de sites web Partie 2

Séance 13: Conception de sites web Partie 2 : Outils de bureautique, logiciels et Internet Séance 13: Conception de sites web Partie 2 Chargée de cours: Ange Adrienne NYAMEN TATO Département Informatique Session Été 2017 Groupe 20 1 Notions abordées

Plus en détail

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma Fonctionnement du WEB 1. Le navigateur effectue une requête spécifiée à travers l URL 2. Le serveur retourne un flot de données 3.

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

Affiche Repassage MODE D EMPLOI dans Word 2002 et Word 2000

Affiche Repassage MODE D EMPLOI dans Word 2002 et Word 2000 Affiche Repassage MODE D EMPLOI dans Word 2002 et Word 2000 Notions révisées Mise en page : choix du format du papier, orientation de la page, modification de la taille des marges. Mise en forme : choix

Plus en détail

Introduction aux feuilles de style CSS

Introduction aux feuilles de style CSS Introduction aux feuilles de style CSS Jean-Philippe PERNIN Université Stendhal Département Informatique Pédagogique Bureau I 113 Mél. : Jean-Philippe.Pernin@u-grenoble3.fr Jean-Philippe Pernin - DIP -

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

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

Première exploration de Bluefish et. création d un formulaire simple

Première exploration de Bluefish et. création d un formulaire simple Première exploration de Bluefish et création d un formulaire simple Table des matières Première exploration de Bluefish avec les fichiers déjà créés au dernier cours...2 Création d un projet incorporant

Plus en détail

Fiche Styles et Index. Table des matières

Fiche Styles et Index. Table des matières Fiche Styles et Index Table des matières 1-Paramétrage des différents titres...1 1.1-Numérotation...2 1.2-Mise en forme des titres...3 1.3-Utilisation des styles...4 2-Navigateur de fichier...5 3-Conception

Plus en détail

Partie CSS. Parmi toutes les utilisations des propriétés css ci-dessous, cochez celles qui ne contiennent pas d erreur :

Partie CSS. Parmi toutes les utilisations des propriétés css ci-dessous, cochez celles qui ne contiennent pas d erreur : Consignes : le sujet est séparé en deux : la partie HTML et la partie CSS. Pensez bien à rendre les deux. Les réponses aux questions se fait sur le sujet qui est ensuite ramassé. Tous documents autorisés.

Plus en détail

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma CSS : CASCADING STYLE SHEET I 2 Historique CSS a été introduit avec HTML 4, afin de fournir une meilleure façon de mettre en forme

Plus en détail

Groupe Eyrolles, 2006, ISBN : X

Groupe Eyrolles, 2006, ISBN : X Groupe Eyrolles, 2006, ISBN : 2-212-11723-X Personnaliser l interface chapitre 26 Les barres d outils et les menus de Word sont personnalisables. Vous pouvez composer une barre d outils personnelle en

Plus en détail

LE CODE HTML 1- INTRODUCTION. Page 1 sur 5

LE CODE HTML 1- INTRODUCTION. Page 1 sur 5 Page 1 sur 5 LE CODE HTML 1- INTRODUCTION Une page web est écrite nécessairement en code. Il en existe beaucoup, aux utilités diverses et variées. Le code le plus basique est toutefois le HTML ( HyperText

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

ème CONSIGNES DE TRAVAIL Accidents en 2008 (1)

ème CONSIGNES DE TRAVAIL Accidents en 2008 (1) 4 ème / 3 ème CONSIGNES DE TRAVAIL Accidents en 2008 (1) Travail à faire : Vous devez réaliser un compte rendu des accidents routiers survenus durant l'année 2006 en France. Vous disposez : - d'un accès

Plus en détail

TD 2 Traitement de texte : fonctionnalités avancées

TD 2 Traitement de texte : fonctionnalités avancées Compétences visées TD 2 Traitement de texte : fonctionnalités avancées Consolider les notions du TD rpécédent Insertion d images, de graphiques et de tableaux dans un document. Présenter un texte sur plusieurs

Plus en détail

Rapport du travail pratique

Rapport du travail pratique 14/10/2015 Introduction à HTML Rapport du travail pratique Ly Stéphane CLASSE FUTURE INGÉNIEURE Table des matières 1. Introduction. 2 2. Exercices. 2 2.1. Tableau formulaire....... 2 2.2. Index.... 3 2.3.

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

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

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

Dreamweaver. b.t.s. année. communication visuelle / options mma

Dreamweaver. b.t.s. année. communication visuelle / options mma b.t.s. communication visuelle / options mma Dreamweaver Mise en page CSS [partie 3 : les BALISES DIV] 1 t e c h n o multimédia année HiÉrarchisation des contenus Cette partie utilise les inserts directs

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

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

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

Introduction au Web. Bruno BEAUFILS 2017/2018. Introduction au Web 1 / 15

Introduction au Web. Bruno BEAUFILS 2017/2018. Introduction au Web 1 / 15 Introduction au Web Bruno BEAUFILS 2017/2018 Introduction au Web 1 / 15 1. Retours 2. CSS CSS Introduction au Web Retours 2 / 15 Retours Syntaxe Syntaxe HTML pas respectée indenter votre texte (pour voir

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

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

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

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

1. Généralités. 2. Config

1. Généralités. 2. Config https://github.com/boiteasite/cmsuno 1. Généralités Pour accéder à l'administration du site, ajouter /uno.php au nom de domaine : Pour récupérer le mot de passe et/ou le login, il faut accéder au site

Plus en détail

Organisation d un site web

Organisation d un site web Organisation d un site web Un site web est un ensemble de pages web hébergées par un serveur et identifié par une adresse internet ( URL). Les pages web sont écrites en langage html, puis transférées sur

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

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : CSS 1/23 Technologie Web CSS Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : CSS 2/23 Plan 1 Les CSS 2 XML et CSS INSA - ASI

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

GUIDE D ADMINISTRATION DE VOTRE FICHE PERSONNELLE Avertissements : Les modifications que vous avez insérées n apparaîtront pas sur Internet avant modération par le CRL. Votre session est ouverte pour une

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

Technologie Projet 2 : «Site WEB sur l'évolution de l'éclairage» 3éme Séquence n 5 DES MESURES : DE PAGES HTML

Technologie Projet 2 : «Site WEB sur l'évolution de l'éclairage» 3éme Séquence n 5 DES MESURES : DE PAGES HTML PUBLICATION DES MESURES : CRÉATION DE PAGES HTML 1 ) SUITE DE L'APPRENTISSAGE SUR LE LANGAGE HTML Voir ci-dessous un fichier HTML minimum. Remarquer «l'indentation» de ce texte.

Plus en détail

BDW1 - Programmation web - CSS

BDW1 - Programmation web - CSS BDW1 - Programmation web - CSS Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2016-2017 http://liris.cnrs.fr/fabien.duchateau/ens/bdw1/ Positionnement dans BDW1 BDW1

Plus en détail

Titre. Sous-titre. Prénom et Nom de l auteur

Titre. Sous-titre. Prénom et Nom de l auteur Prénom et Nom de l auteur Titre Sous-titre Consignes : 1. Télécharger le texte «Gabarit_livre-ebook_brut» 2. Police Times New Roman 3. Enregistrer sous Gabarit-sans styles 4. Ajouter les sauts de page

Plus en détail

LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS

LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS ISN ISN Informatique et Sciences du Numérique LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS 1 INTRODUCTION AUX FEUILLES DE STYLE Le langage HTML est à la fois un langage permettant de décrire la structure

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

Soit, si le raccourci de word ne se trouve pas sur le bureau, cliquez sur démarrer puis sur programmes puis sur microsoft office et puis sur word

Soit, si le raccourci de word ne se trouve pas sur le bureau, cliquez sur démarrer puis sur programmes puis sur microsoft office et puis sur word Atelier réalisé par Patricia Wasko Netsteward Administration Communale de Seneffe - 2004 1 1) Ouvrir word Soit au moyen du raccourci se trouvant sur votre bureau Soit, si le raccourci de word ne se trouve

Plus en détail

LE RECAP ಠ_ಠ. C est trop facile!

LE RECAP ಠ_ಠ. C est trop facile! LE RECAP ಠ_ಠ C est trop facile! POUR COMMENCER... Quand on commence un fichier HTML (HyperText Markup Language), on écrit en premier le DOCTYPE!! sans oublier les balises

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

Mode d'emploi. 1- Comment ça fonctionne? Le principe

Mode d'emploi. 1- Comment ça fonctionne? Le principe Mode d'emploi 1- Comment ça fonctionne? Le principe Cet outil d'affichage d'information est en fait un site web réalisé sous Jimdo, dont on programme le chargement des pages après un délai paramétrable

Plus en détail