HTML CSS Fiche numéro 6

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

Download "HTML CSS Fiche numéro 6"

Transcription

1 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 temps, nous allons voir la théorie sur le CSS : qu'est-ce que c'est? À quoi cela ressemble-t-il? Où est-ce qu'on écrit du code CSS? Tout d'abord, CSS (Cascading Style Sheets), c'est cet autre langage qui vient compléter le HTML. C'est lui qui vous permet de choisir la couleur de votre texte. Lui qui vous permet de sélectionner la police utilisée sur votre site. Lui encore qui permet de définir la taille du texte, les bordures, le fond En eux mots, CSS définit donc la présentation du document. HTML a été conçu pour définir la structure d un document pas sa présentation. Par conséquent tout ce qui est lié à la présentation d un document devrait être défini à l aide de CSS. Typiquement, il faut préférer CSS à l utilisation de balises HTML permettant de définir la présentation d un document (comme par exemple <font color=... >) Tout comme le HTML, le CSS a évolué...aujourd'hui nous sommes à la version CSS3. Les navigateurs ne connaissent pas toutes les propriétés CSS qui existent. Plus le navigateur est vieux, moins il connaît de fonctionnalités CSS. Source HTML CSS Fiche numéro 6 1

2 Il existe plusieurs solutions pour appliquer le CSS, la plus simple et la plus efficace...dans un fichier.css (les fichiers HTML ont eux une extension.html), cela permet de ne pas tout mélanger! Reprenons notre fichier de travail et nous allons le compléter Vous remarquez la ligne <link rel="stylesheet" href="style.css" /> c'est elle qui indique que ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme. Nous allons maintenant créer notre page de style CSS Créez une nouvelle page dans Notepad++ qui aura pour nom style.css Intégrer dans cette nouvelle page les lignes suivantes p color: red; Enregistrez sous Notepad++ et dans le navigateur et cela donne... Le texte passe en rouge...simple non? J'ai indiqué que je souhaitais écrire en rouge les paragraphes (p)...je peux faire la même chose avec beaucoup de balises. h1 color: blue; Ici le titre (h1) passe en bleu. On peut appliquer un style à plusieurs balises, par exemple h1, em color: orange; Au lieu de taper deux ensemble de commande pour la même couleur, je tape h1,em Comme pour la pages HTML, il est possible d'insérer des commentaires qui ne seront pas visibles sur les HTML CSS Fiche numéro 6 2

3 pages Web mais seulement pour vous...pour vos informations personnelles. Les commentaires sont écrits entre les balises /* et */ p color: orange; /* Les paragraphes seront en orange */ En appliquant cette méthode, on constate que tous les paragraphes seront en «orange»...pas forcément génial;) Pour palier ce petit inconvénient, il existe deux balises qui permettent de résoudre ce problème. l'attribut class ; l'attribut id.(que nous verrons pas ici; car peut utile) Les attributs class et id sont quasiment identiques. Pour le moment, on ne va s'intéresser qu'à l'attribut class. HTML CSS Fiche numéro 6 3

4 Le paragraphe est identifié. Il a un nom : introduction. Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour dire : «Je veux que seules les balises qui ont comme nom 'introduction' soient affichées en rouge». Les balises universelles Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à certains mots qui, à l'origine, ne sont pas entourés par des balises. Pour cela il a été inventé les balises universelles, <span> </span> et <div> </div> <span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Dans notre exemple, <p>bonjour et <span class="salutations">bienvenue</span>. Puis dans style.css.salutations color: orange; HTML CSS Fiche numéro 6 4

5 En résumé CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre page web. Il faut être vigilant sur la compatibilité des navigateurs avec certaines fonctionnalités récentes de CSS3. Quand un navigateur ne connaît pas une instruction de mise en forme, il l'ignore simplement. On peut écrire le code CSS à plusieurs endroits différents, le plus conseillé étant de créer un fichier séparé portant l'extension.css (exemple : style.css). En CSS, on sélectionne quelles portions de la page HTML on veut modifier et on change leur présentation avec des propriétés CSS : Code : CSS balise1 propriete1: valeur1; propriete2: valeur2; Il existe de nombreuses façons de sélectionner la portion de la page que l'on veut mettre en forme. Par exemple, on peut viser -Toutes les balises d'un même type, en écrivant simplement leur nom (h1 par exemple) -Certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class ou id -Uniquement les balises qui se trouvent à l'intérieur d'autres balises (h3 em). etc. HTML CSS Fiche numéro 6 5

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

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 outils de création de sites web (suite)

Les outils de création de sites web (suite) Tuto 3ème séance - p1 Les outils de création de sites web (suite) 8. Les feuilles de style Alors que le langage HTML a pour objet de coder le contenu (texte, images, etc.) d'une page web pour la rendre

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

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

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

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

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

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs : 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

Plus en détail

Les CSS et la gestion des différentes polices La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS.

Les CSS et la gestion des différentes polices La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. font-family: Famille de police font-size: Taille de votre police de caratère font-style: Le style de police. Gras,

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

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

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

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

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

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

Université de Nice-Sophia Antipolis Jeudi 15 mars Création et Manipulation de documents

Université de Nice-Sophia Antipolis Jeudi 15 mars Création et Manipulation de documents Université de Nice-Sophia Antipolis Jeudi 15 mars 2007 Polytech CiP1 Durée: 1h30 Création et Manipulation de documents (Hélène Renard / Sylvain Schmitz) Travaux Dirigés Séance n o 6 1 Objectifs du TD Utiliser

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

texte affiché

<div id=nom_id class=ma_classe>texte affiché</div> Rappel - Les sélecteurs de base La syntaxe de CSS est simple, elle est composée de 3 éléments: un sélecteur des propriétés des valeurs sélecteur { Il existe 3 sélecteurs de base: le sélecteur de balise

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

Réussir. avec XHTML et CSS. 3e édition. son site web. Nebra. Mathieu. Préface de Laurent Denis

Réussir. avec XHTML et CSS. 3e édition. son site web. Nebra. Mathieu. Préface de Laurent Denis Mathieu Nebra Réussir son site web avec XHTML et CSS 3e édition Préface de Laurent Denis Groupe Eyrolles, 2006, 2008, 2010, ISBN : 978-2-212-12485-9 Table des matières 1. UN SITE WEB, COMMENT ÇA MARCHE?...

Plus en détail

Styler un formulaire avec Dreamweaver cs5. MC Benveniste

Styler un formulaire avec Dreamweaver cs5. MC Benveniste Styler un formulaire avec Dreamweaver cs5 MC Benveniste 2013 Styler un formulaire Formulaire de base Formulaire avec les css Styler un formulaire Un formulaire contient des balises : pour les étiquettes

Plus en détail

Dossier PPE LE PORTALP

Dossier PPE LE PORTALP Dossier PPE LE PORTALP Crosetti Pauline TSSI Lycée Colbert Tourcoing Année scolaire 2012/2013 Sommaire : - I) Recherches sur le Portalp - II) Recherches sur la supervision - III) Plusieurs choix possibles

Plus en détail

Mémento des balises HTML 5

Mémento des balises HTML 5 Mémento des balises HTML 5 s de premier niveau Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le «code minimal» d'une

Plus en détail

Introduction à HTML. 27 Février Damien DURVILLE HTML 1

Introduction à HTML. 27 Février Damien DURVILLE HTML 1 Introduction à 27 Février 2004 Damien DURVILLE 1 Qu'est-ce que c'est? : Hypertext Markup Language hypertext : texte avec liens dynamique markup : marquage, codage, délimitation language : une manière 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

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

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme ->CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

MODULE HTML CSS.

MODULE HTML CSS. MODULE HTML CSS David Tourel david.tourel@iut-tlse3.fr HTML : HyperText Markup Language Langage de description Interprété par les navigateurs Associé au CSS et JavaScript Métiers: développeur front end,

Plus en détail

Classe de première SI CSS

Classe de première SI CSS CSS Table des matières 1. La petite histoire du CSS...2 2. Déclaration du CSS...2 2.1. Fichier.css...2 2.2. En-tête du fichier HTML...3 2.3. Directement dans les balises...3 3. Appliquer un style...3

Plus en détail

COURS DE PROGRAMMATION DE SITE WEB 1

COURS DE PROGRAMMATION DE SITE WEB 1 COURS DE PROGRAMMATION DE SITE WEB 1 Chapitre 1 Les bases PLAN DU COURS 1.1 L histoire du WEB 1.2 Du HTML au XHTML et le CSS 1.3 Définition (HTML, XTML, CSS, ASP, PHP, FLASH, CGI, PEARL) 1.4 Les éditeurs

Plus en détail

Introduction au contexte documentaire moderne

Introduction au contexte documentaire moderne Introduction au contexte documentaire moderne Plan I - Problématiques liées aux documents papiers II Problématiques liées aux logiciels de traitement de texte III - Problématiques liées aux techniques

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

Mémento des balises HTML

Mémento des balises HTML Chapitre 21 Mémento des balises HTML Diculté : C ette page est une liste non exhaustive des balises HTML qui existent. Vous trouverez ici un grand nombre de balises HTML. Nous en avons déjà vu certaines

Plus en détail

Le principal étant de nommer de manière identique les identificateurs dans notre page html!

Le principal étant de nommer de manière identique les identificateurs dans notre page html! Il ne s'agit pas ici de faire un cours de code CSS! Il faudrait un certain nombre de chapitres et surtout commencer par le commencement à savoir le HTML et le XHTML. Mais pour la plupart, vous êtes habitués

Plus en détail

HTML 5 CSS 3 Responsive

HTML 5 CSS 3 Responsive HTML 5 CSS 3 Responsive Programme de formation Microsoft Partner France Belgique Suisse - Canada Formez vos salariés pour optimiser la productivité de votre entreprise Dernière mise à jour : Avril 2014

Plus en détail

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition)

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition) Le HTML5 et les CSS 1. L'évolution de HTML 15 2. L'évolution des CSS 16 2.1 La notion de module 16 2.2 L'évolution des statuts 16 2.3 Les préfixes vendeurs 17 2.4 Utiliser les préfixes vendeurs 18 3. La

Plus en détail

Conception d'interfaces Web

Conception d'interfaces Web Conception d'interfaces Web Licence 1 2. Créer un site Web avec HTML5 et CSS3 Bruno Jobard I. Introduction Les langages HTML et CSS décrivent la structure et la présentation d'une page Web. HTML est un

Plus en détail

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme -> CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

Cours CSS/JavaScript

Cours CSS/JavaScript Cours /JavaScript E.Coquery emmanuel.coquery@liris.cnrs.fr Cascading Style Sheets Principe : séparation du style et de la structure HTML Structure paragraphes, tableaux, liens,... Style polices de caractères,

Plus en détail

HTML et page Web diaporama

HTML et page Web diaporama but du diaporama principe général le titre ainsi qu une section contenant un paragraphe le titre ainsi qu un paragraphe dont le texte est centré une section dont le texte est coloré en rouge (couleur définie

Plus en détail

Partie 2 : La mise en forme avec CSS

Partie 2 : La mise en forme avec CSS Partie 2 : La mise en forme avec CSS Sommaire : Mettre en lace le CSS : Aliquer un style : sélectionner une balise Aliquer un style : class et id Aliquer un style : les sélecteurs avancés Formatage du

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 08 Réussir son site web avec XHTML et CSS Couleur et fond 1. La couleur du texte...1 Indiquer la couleur du texte avec un nom...1 Indiquer la couleur du texte en hexadécimal...2 Indiquer la couleur

Plus en détail

CSS = Cascading Style Sheets

CSS = Cascading Style Sheets CSS = Cascading Style Sheets = ecrit dans un fichier.css exemple style1.css un meme fichier peut etre partage par plusieurs pages ( uniformite) ajouter dans head page HTML qui utilisera le css :

Plus en détail

UNIX ET PROGRAMMATION WEB Cours 5

UNIX ET PROGRAMMATION WEB Cours 5 Plan UNIX ET PROGRAMMATION WEB Cours 5 kn@lri.fr http://www.lri.fr/~kn 1 Systèmes d'exploitation (1/2) 2 Systèmes d'exploitation (2/2) 3 Réseaux, TCP/IP 4 Web et HTML 5 CSS 5.1 Introduction 5.2 Boîtes

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

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

Tutoriel pour apprendre à créer son blog source : Aide de 1ère étape : quel hébergeur de blog?

Tutoriel pour apprendre à créer son blog source : Aide de  1ère étape : quel hébergeur de blog? 1ère étape : quel hébergeur de blog? La création de blog est tout à fait similaire d un d hébergeur à un autre. Si j ai choisi Canalblog, c est pour sa simplicité, mais il existe un grand nombre d autres

Plus en détail

CSS 3. Mai Jérôme GUY

CSS 3. Mai Jérôme GUY CSS 3 Mai 2013 Jérôme GUY CSS Contenu Introduction... 3 Où écrire le CSS?... 3 Inclure un fichier CSS... 3 Les commentaires... 4 Class et Id... 4 Les balises SPAN et DIV... 4 Les sélecteurs avancés...

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

Mettre en forme des caractères et des paragraphes. WORD Mettre en forme du texte

Mettre en forme des caractères et des paragraphes. WORD Mettre en forme du texte Mettre en forme des caractères et des paragraphes WORD Mettre en forme du texte Mettre en forme du texte SOMMAIRE : I METTRE EN FORME DES CARACTÈRES... 3 1.1 - Modifier la police de caractère... 3 1.2

Plus en détail

Chapitre 3 : Le langage HTML

Chapitre 3 : Le langage HTML Chapitre 3 : Le langage HTML 4 ème SI (TIC) I. Introduction : Le langage HTML (HyperText Markup Language) n'est pas un langage de programmation proprement dit. Il permet tout simplement de spécifier la

Plus en détail

Les CSS pour la mise en page

Les CSS pour la mise en page Les CSS pour la mise en page Nous allons créer deux fichier style_div.css contiendra toutes les informations relatives au positionnement de nos différents blocs. positionnement.htm contiendra tout notre

Plus en détail

Synthèse : les sections

Synthèse : les sections FUNDP CeFIS Département Éducation et Technologie rue de Bruxelles, 61 B-5000 Namur (Belgique) Tél : 081 725060 Fax : 081 725064 Télex : 59 222 FAC NAM B E-mail : cefis@fundp.ac.be URL : http://www.det.fundp.ac.be/cefis/

Plus en détail

HTML : exercices. 2. Enregistrez le fichier sous le nom «test.html» 3. A l aide d un navigateur, ouvrez le fichier que vous venez d écrire

HTML : exercices. 2. Enregistrez le fichier sous le nom «test.html» 3. A l aide d un navigateur, ouvrez le fichier que vous venez d écrire HTML : exercices Exercice 1 : Affichage de document HTML 1. Ouvrez le bloc-note, copiez-y le document suivant : mon premier document Il fait beau .

Plus en détail

Cours Writer Styles et Index

Cours Writer Styles et Index Page: 1 Formation LibreOffice Writer pour les styles et Index Table des matières 1-Introduction...1 1.1- But des exercices...2 1.1.1-Création du document de recettes...2 2-Redéfinition des styles des titres

Plus en détail

Les feuilles de styles

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

Plus en détail

I ) L environnement de programmation HTML :

I ) L environnement de programmation HTML : HTML5 COURS ET EXERCICES I ) L environnement de programmation HTML : - Ouvrir Notepad++ (http://notepad-plus-plus.org/fr/)et taper les trois lignes suivantes : Voici mon premier SITE Conception d une page

Plus en détail

Sommaire. 1 Créer un premier site Élaborer un contenu...69

Sommaire. 1 Créer un premier site Élaborer un contenu...69 Partie 1 Votre site web personnel...25 1 Créer un premier site...27 1.1 Installer le serveur web personnel de Microsoft...29 1.2 Créer un nouveau site web...31 1.3 Découvrir et personnaliser l environnement

Plus en détail

Balises obsolètes.

texte

p { font-size: 20px; color: red; text-transform: uppercase; }

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; } Balises obsolètes De nombreuses balises et propriétés sont obsolètes : font, basefont, center, s, u, b, i, align, width, height, size, color, border, background, bgcolor, border, face, name, target, En

Plus en détail

TD : A la découverte de Python

TD : A la découverte de Python TD : A la découverte de Python 1) Environnement de travail a) Qu est-ce qu un IDE? Lorsqu on fait de la programmation, il est agréable d avoir à sa disposition différents outils qui permettent de travailler

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

Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices

Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices Dreamweaver CSS Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments

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

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent :

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent : HTML HyperText Markup Language Objectifs : - s'initier au langage HTML - savoir lire un code source html simple Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises

Plus en détail

Editeur HTML. Mozilla

Editeur HTML. Mozilla Editeur HTML Mozilla Présentation Mozilla est un navigateur Web, il permet également de gérer la messagerie (Email) et d'éditer des pages au format HTML (Hyper Text Markup Language). Mozilla est basé à

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 03 Réussir son site web avec XHTML et CSS Créer des liens 1. Insérer un lien vers une autre page...1 Création d un lien simple...1 Ajout d une infobulle...2 Un lien pour envoyer un email...2 2. Les

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

Créer une page HTML avec l'éditeur Notepad++

Créer une page HTML avec l'éditeur Notepad++ Page Html Créer une page HTML avec l'éditeur Notepad++ Ouvrir Notepad++ Ecrivez un court texte. Enregistrer ce fichier dans un dossier que vous avez préalablement créé dans vos documents ou sur votre bureau

Plus en détail

CREATION WEB DYNAMIQUE

CREATION WEB DYNAMIQUE CREATION WEB DYNAMIQUE II ) xhtml ET CSS II-1 ) Introduction Le xhtml, extensible HyperText Markup Language, est un langage identique au langage HTML mais respectant la syntaxe définie par XML Quant vous

Plus en détail

Le langage de Transformation XSL

Le langage de Transformation XSL Le langage de Transformation XSL Formatage d un document XML, Le langage XSLT: Définition, Principe de fonctionnement, Structure d une feuille de style, Format d une règle de transformation, Tri, Choix

Plus en détail

VERSION 6 GRAND PUBLIC GUIDE D UTILISATION

VERSION 6 GRAND PUBLIC GUIDE D UTILISATION VERSION 6 GRAND PUBLIC GUIDE D UTILISATION JANVIER 2015 Table des matières Table des matières... 2 1. Introduction... 3 2. Lancement de GOnet... 3 3. Fonctionnement... 3 3.1. Parties de l interface...

Plus en détail

Synthèse : les sections

Synthèse : les sections FUNDP CeFIS Département Éducation et Technologie rue de Bruxelles, 61 B-5000 Namur (Belgique) Tél : 081 725060 Fax : 081 725064 Télex : 59 222 FAC NAM B E-mail : cefis@fundp.ac.be URL : http://www.det.fundp.ac.be/cefis/

Plus en détail

Créer un jeu de plateau interactif avec ActivInspire

Créer un jeu de plateau interactif avec ActivInspire Créer un jeu de plateau interactif avec ActivInspire 1. Créer le plateau de jeu Pour faciliter la création et le placement des cases du plateau de jeu, on peut activer l'affichage de la grille. Pour cela,

Plus en détail

Oracle Fusion Middleware 11g : Développer des applications avec Oracle Forms

Oracle Fusion Middleware 11g : Développer des applications avec Oracle Forms Oracle University Appelez-nous: +33 (0) 1 57 60 20 81 Oracle Fusion Middleware 11g : Développer des applications avec Oracle Forms Durée: 5 Jours Description Ce cours explique comment utiliser Oracle Forms

Plus en détail

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

HTML. Alexandre Benoit TS 2016/2017. D après openclassrooms HTML D après openclassrooms Alexandre Benoit TS 2016/2017 Introduction Télécharger à partir de la page web du cours le fichier pageoueb.html Ouvrir le fichier avec Notepad++. Ouvrir le fichier avec Firefox.

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

Bien présenter des documents

Bien présenter des documents Bien présenter des documents longs Plan 1. Introduction 2. Les différents types d attributs 3. Les styles 4. Documents structurés 5. Insertion d objets 6. Des documents particuliers 2 Plan 1. Introduction

Plus en détail

Il est possible de naviguer à travers les étapes de la construction d'une figure à l'aide du menu Affichage Protocole de construction.

Il est possible de naviguer à travers les étapes de la construction d'une figure à l'aide du menu Affichage Protocole de construction. Fiche technique 27 Le protocole de construction 1 Paramétrer l'affichage du protocole de construction 2 Naviguer dans le protocole de construction 3 Modifier la figure depuis le protocole de construction

Plus en détail

Nous allons voir aujourd hui l utilisation de Wordpress, c est à dire ce qui va permettre aux associations de placer du contenu sur leur site web et

Nous allons voir aujourd hui l utilisation de Wordpress, c est à dire ce qui va permettre aux associations de placer du contenu sur leur site web et 1 Nous allons voir aujourd hui l utilisation de Wordpress, c est à dire ce qui va permettre aux associations de placer du contenu sur leur site web et de le faire évoluer. L idée est que vous soyez très

Plus en détail

Tutoriel. Comment utiliser Bootstrap ou React.js pour une application adaptée aux usages?

Tutoriel. Comment utiliser Bootstrap ou React.js pour une application adaptée aux usages? Tutoriel Comment utiliser Bootstrap ou React.js pour une application adaptée aux usages? Sonia Tual & Garance Vallat Adaptation des interfaces à l environnement SI5 IHM Anne Marie Dery Christian Brel 22

Plus en détail

Par Clément JOATHON Dernière mise à jour : 01/06/2015

Par Clément JOATHON Dernière mise à jour : 01/06/2015 Encadrer ses photos Par Clément JOATHON Dernière mise à jour : 01/06/2015 Avant d'envoyer vos photos à un ami ou de les insérer dans un document ou sur votre site Internet, vous pouvez les mettre en avant

Plus en détail

TRANSCRIPTION : LES FORMULAIRES. PRÉSENTATEUR : Bienvenue à notre dernier tutoriel dans cette série sur comment créer les

TRANSCRIPTION : LES FORMULAIRES. PRÉSENTATEUR : Bienvenue à notre dernier tutoriel dans cette série sur comment créer les TRANSCRIPTION : LES FORMULAIRES PRÉSENTATEUR : Bienvenue à notre dernier tutoriel dans cette série sur comment créer les documents accessibles. Nous allons prendre un peu de changement de rythme de nos

Plus en détail

Les Fiches pratiques Coin-Web

Les Fiches pratiques Coin-Web Créer / modifier son site web à l aide d un logiciel Open Source Pré-requis : Sommaire Avant de consulter cette fiche pratique, il est bon d avoir assimilé les notions d HTML et CSS. 1. Définitions...

Plus en détail

Microsoft. Office. Manuel. Mise en forme rapide et simple de cellules

Microsoft. Office. Manuel. Mise en forme rapide et simple de cellules Microsoft Office Manuel Mise en forme rapide et simple de cellules Table des matières 1 INTRODUCTION... 1 2 ADAPTER CONFORTABLEMENT L'ORIENTATION ET LA POLICE DE CONTENUS DE CELLULE... 2 3 DÉFINIR RAPIDEMENT

Plus en détail

Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES

Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES TP 5 : LES CADRES Le contenu de la page d'accueil d'un site ne constitue que la subdivision en plusieurs frames. Les codes sources de chacune des frames seront contenus dans d'autres fichiers HTML. La

Plus en détail

Programme Formation WebDesign

Programme Formation WebDesign Programme Formation WebDesign Objectif : Connaître les règles et les techniques de création d'une charte graphique. Savoir utiliser une charte graphique pour le développement web. Compétences visées :

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

Compte rendu du TP3 (XML/XSL)!: le CV

Compte rendu du TP3 (XML/XSL)!: le CV Angebault Baptiste le 30/11/2009 Licence professionnelle flux numérique Compte rendu du TP3 (XML/XSL)!: le CV Xml et xsl? XML est un langage de structuration des données, et non de représentation des données.

Plus en détail

HTML. Damien Nouvel. Damien Nouvel (Inalco) HTML 1 / 23

HTML. Damien Nouvel. Damien Nouvel (Inalco) HTML 1 / 23 HTML Damien Nouvel Damien Nouvel (Inalco) HTML 1 / 23 Langage, calcul, télécommunications Plan 1. Langage, calcul, télécommunications 2. Web et documents HTML 3. Balises 4. Attributs Damien Nouvel (Inalco)

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

Support de cours Dreamweaver CS5. MC Benveniste

Support de cours Dreamweaver CS5. MC Benveniste Support de cours Dreamweaver CS5 MC Benveniste 2011 Présentation du logiciel Il s agit d un logiciel d intégration de pages web, avec une interface wysyiswg (what you see is what you get = ce que vous

Plus en détail

Projet Maths pour l info

Projet Maths pour l info Projet Maths pour l info IMAC 1 Histogramme rééquilibré Le traitement automatique d images a de nombreuses applications, que ce soit dans le domaine de la photographie artistique ou dans celui de la photographie

Plus en détail

Utilisation des tableaux dans Dreamweaver

Utilisation des tableaux dans Dreamweaver Utilisation des tableaux dans Dreamweaver Ecole-Club Migros Alain Court Usages des tableaux Le tableau en HTML a été la première réponse aux besoins de mise en page. En effet, le langage HTML n'est pas

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

Le logiciel s'ouvre sur un projet "sans nom" Il faut donc commencer par nommer votre projet. Voici comment se présente le logiciel "eanim" version 803

Le logiciel s'ouvre sur un projet sans nom Il faut donc commencer par nommer votre projet. Voici comment se présente le logiciel eanim version 803 Le logiciel s'ouvre sur un projet "sans nom" Voici comment se présente le logiciel "eanim" version 803 Il faut donc commencer par nommer votre projet Fichier "enregistrez sous" et choisissez le dossier

Plus en détail

Templates Joomla! 1.6

Templates Joomla! 1.6 Templates Joomla! 1.6 Présentation Création de templates Joomla! Par Cédric KEIFLIN Et Yann Gomiero Le 3 avril 2011 au Joomladay de Lyon Présentation Cédric KEIFLIN alias ced1870 sur le forum joomla.fr

Plus en détail

Dreamweaver CS6 pour PC/Mac

Dreamweaver CS6 pour PC/Mac ENVIRONNEMENT. Généralités 1 A- La page de démarrage 1 B- L écran principal 2 C- La barre d état 3 D- Utiliser les règles 4 E- Utiliser la grille 4 F- Utiliser les repères 5 G- Modifier le zoom 6 1.2 Les

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

Objectifs: Problème > Pseudocode > Programme. La bonne Méthode. Introduction: la mauvaise méthode. Problème >... > Programme

Objectifs: Problème > Pseudocode > Programme. La bonne Méthode. Introduction: la mauvaise méthode. Problème >... > Programme Objectifs: Delannoy chap2 (très partiellement) Le Pseudocode d'abord, le programme ensuite savoir décrypter un code source en C Qui fait quoi? Du code source au code exécutable Quelles sont les étapes?

Plus en détail

Manuel Auteur Articles avec Wordpress Site Persay

Manuel Auteur Articles avec Wordpress Site Persay 1 Manuel Auteur Articles avec Wordpress Site Persay Ecriture d articles du blog PersayPolis Sophie Banide sophie.banide@gmail.com 2 Table des matières I. Connexion à l'espace privé... 2 1. Où est-ce?...

Plus en détail