Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise
, le positionnement, les mesures. Description

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

Download "Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise
, le positionnement, les mesures. Description"

Transcription

1 Mon Mondrian Compétences visées Les bases du HTML, du CSS, la balise <div>, le positionnement, les mesures. Description Peindre, c'est salissant. Le code, c'est plus propre. À travers ce projet, recréez un classique de l'art Moderne, Composition II en Rouge, Bleu et Jaune de Pietr Mondrian, directement dans votre navigateur, en utilisant la balise <div> et les notions d «#id» et de «.class». 1 / 12

2 Étape 1 : peignons le mur de notre galerie. Commençons par nous offrir un grand mur gris pour accrocher notre toile. Créons deux fichiers dans le même répertoire. Le premier s'appellera modern_mondrian.html et le deuxième s'appellera style.css. Copions la structure de base d'une page html dans le fichier mondrian.html. Votre code devrait ressembler à ceci : <!DOCTYPE html> <html> <head> <title>mon titre</title> <meta charset="utf-8"/> <link href="style.css" media="screen" rel="stylesheet" type="text/css"/> </head> </html> Dans le fichier css, donnons aux balises html et body une couleur grise. Pour réaliser cela, utilisons la propriété background-color. Nous choisirons comme couleur de fond un gris clair. Nous noterons cette couleur sous sa forme hexadécimale : #F6F6F6. Pour donner rapidement la même propriété à plusieurs éléments, il suffit de séparer leur nom par une virgule. Votre code devrait ressembler à ceci : body, html { background-color: #f6f6f6; Sauvegardez et regardez le résultat dans votre navigateur. Nous avons un beau mur gris clair pour exposer notre chef-d'oeuvre. Étape 2 : accrochons notre toile Nous allons créer un grand carré. Ce sera la toile pour notre peinture au code. Pour cela, nous allons nous servir de deux nouveaux concepts : #id et <div>. Dans le fichier HTML, utilisons la balise <div>. La balise div ne fait rien en particulier, elle indique seulement une division. C'est une boîte dans laquelle on place d'autres éléments (textes, images, etc). 2 / 12

3 Il est possible de donner un nom, une identité unique à cet élément en insérant dans la balise ouvrante un attribut id. Cela se fait de cette manière : <div id='' ''>. Cela permettra de lui appliquer des styles CSS. Insérons notre <div> en lui donnant l'id «painting» (peinture en anglais). Enregistrez les modifications et regardez le résultat dans votre navigateur. Pour le moment, rien n'apparaît sur le mur de notre galerie. Notre toile reste invisible. Nous allons avoir besoin de CSS pour lui donner un peu de style. Dans notre fichier CSS, nous allons utiliser le sélecteur #id. Ce sélecteur permet d'appliquer un style à un élément unique de notre page HTML. Vous pouvez donner à votre sélecteur le nom que vous voulez, vous devez seulement placer le caractère # (dièse) devant le nom de votre div. Nous allons appeler notre sélecteur #painting pour donner un style à notre <div id= painting >. #painting { Utilisons les propriétés width et height pour régler la largeur et la hauteur. Donnons à ces deux propriétés une valeur de 400px. Utilisons un beau blanc cassé pour donner une couleur de fond à notre toile. Pour cela, utilisons la propriété background-color et donnons lui la valeur hexadécimale suivante : #FFF4DB. #painting { background-color : #FFF4DB ; width : 400px ; height : 400px ; Enregistrez les modifications et regardez le résultat dans votre navigateur. Vous remarquez que votre toile se trouve dans le coin en haut à gauche de votre navigateur. Nous allons créer des marges en utilisant une nouvelle propriété : margin. Nous voulons créer une marge en haut, une marge à droite et une marge à gauche. Nous allons devoir parler un peu anglais. Pour régler la marge en haut, nous utiliserons la propriété margin-top, pour la marge de gauche, la propriété margin-left, et pour celle de droite, margin-right. 3 / 12

4 Pour centrer notre toile sur le mur de notre galerie, il y a une méthode simple et rapide. Donnons la valeur auto à margin-left et margin-right. Pour la marge en haut, donnons la valeur 30px à la propriété margin-top. Juste pour le plaisir des yeux, nous allons ajouter une légère ombre aux contours de notre tableau. Utilisons la propriété box-shadow et donnons lui les valeurs suivantes : 10px 10px 0px #8D8D8D. #painting { background-color : #FFF4DB ; width : 400px ; height : 400px ; margin-left : auto ; margin-right : auto ; margin-top : 30px ; box-shadow : 10px 10px 0px #8D8D8D ; Enregistrez les modifications et admirez le résultat dans votre navigateur. Notre toile est prête! Nous avons mis en place notre structure de base. Il est temps de faire des mathématiques. Étape 3 : faisons quelques <div>isions! Il est temps de définir la structure de notre peinture. Il est très utile de dessiner un plan et de faire quelques calculs avant de coder. Il sera plus facile ensuite de placer les balises <div> et d'écrire leur style CSS. Pensons à notre tableau en termes de lignes, de colonnes et de boîtes. Tous ces éléments auront leur propre #id et leurs propres balises <div>. Certains seront visibles et en couleur, d'autres seront invisibles et serviront de conteneur. 4 / 12

5 Voici un plan de notre Mondrian en 400 pixels sur 400 pixels. Nous voyons deux lignes, la ligne du haut et la ligne du bas. La ligne du haut est composée d'une grande boîte à droite et de deux petites boîtes à gauche. Dans le fichier CSS, commençons par créer un sélecteur #id pour la ligne du haut. Parlons anglais et appelons ce sélecteur #toprow (top row signifie ligne du haut). Donnons lui une hauteur (height) de 290px. Regardons sur le schéma à quoi correspond cette valeur de 290px. La hauteur de la grande boîte correspond à la somme de la hauteur des deux boîtes de gauche (2 x 140px) et de leur séparation (+10px). Il n'est pas nécessaire de donner une valeur à la largeur de notre ligne #toprow car elle sera placée dans la <div> #painting qui a une largeur (width) de 400px. 5 / 12

6 Votre code CSS devrait ressembler à cela: #toprow { height: 290px; Dans le fichier HMTL, ajoutons une balise <div> avec une #id toprow. Votre code HTML devrait ressembler à cela: Si voulez vérifier le placement de notre div #toprow, vous pouvez lui ajouter temporairement une couleur de fond dans son style CSS avec la propriété background-color. Étape 4 : the big box Plaçons une de ces boîtes dont nous avons parlé. Commençons par la plus grande et la plus colorée du tableau : la grande boîte rouge en haut à droite. Dans le fichier CSS, ajoutons un nouveau sélecteur #id appelé #bigbox (grande boîte en anglais). Aidons-nous du schéma pour connaître sa hauteur (height) et sa largeur (width). Votre code CSS devrait ressembler à cela : #bigbox { width: 290px; height: 290px; Dans le fichier HTML, ajoutons une div avec une id bigbox à l intérieur de la div toprow. Votre code HTML devrait ressembler à cela : <div id="bigbox"> 6 / 12

7 Sauvegardez et regardez le résultat dans votre navigateur. Notre bigbox n'apparaît pas... Elle n'a pas encore de couleur mais vous pouvez vérifier sa présence en faisant un clic droit et en choisissant Inspecter l'élément ou Code source de la page. Étape 5 : un peu de couleur et un peu de "class" Nous pourrions donner de la couleur à notre bigbox en utilisant background-color dans son style CSS. Cela fonctionnerait parfaitement. Mais nous allons créer plusieurs boîtes qui auront la même couleur. Utilisons des "class" pour gagner du temps. Les "class" fonctionnent comme les "id". Elles permettent d'ajouter des styles CSS à différents éléments. Les "id" correspondent à un seul élément alors qu'une même "class" peut s'appliquer à plusieurs éléments. Nous comprendrons mieux tout cela en le mettant en pratique. Dans le fichier CSS, créons un nouveau sélecteur appelé red. À la place du dièse "#" que nous avons utilisé pour créer des "id", la ligne doit commencer par un point ".". Donnons à la classe.red un background-color "red"..red { background-color: red; Vous pouvez utiliser la notation hexadécimale de la couleur :.red { background-color: #cc3333; Dans le fichier HTML, ajoutons notre class.red à notre div #bigbox en ajoutant dans la balise ouvrante l'attribut class="red". <div id="bigbox" class="red"> Sauvegardez et regardez le résultat dans votre navigateur. Nous avons une grande boîte rouge! 7 / 12

8 Maintenant que nous savons comment fonctionnent les class, créons notre palette. Dans le fichier CSS, ajoutons les class.blue,. yellow,.black..red { background-color: red;.blue { background-color: blue;.yellow { background-color: yellow;.black { background-color: black; Vous pouvez choisir d'utiliser la notation hexadécimale qui permet un choix infini de couleurs et de nuances. Pour trouver la notation hexadécimale des couleurs, vous pouvez utiliser le plugin firefox Colorzilla. Étape 6 : Ça flotte à droite! Vous avez peut-être remarqué que la grande boîte rouge est du mauvais côté. Par défaut, les éléments d'une page web se placent à gauche. Il faut leur donner une position. Plaçons cette grande boîte au bon endroit. Il y a plusieurs manière de positionner un élément dans une page web. Nous allons utiliser une méthode appelée float. Cela permet de faire "flotter" les éléments vers la gauche ou vers la droite jusqu'à ce qu'ils cognent dans un élément fixe. Mettons cela en pratique. Dans le fichier CSS, créons une classe que nous appellerons.right (droit en anglais). Votre code CSS devrait ressembler à cela :.right { float: right; Dans le fichier HTML, ajoutons la class right à notre #bigbox. Il suffit d'ajouter "right" à côté de "red" dans l'attribut class. <div id="bigbox" class="red right"> 8 / 12

9 Étape 7 : les séparations Ajoutons une séparation verticale à gauche de la boîte rouge. Dans le fichier CSS, créons une nouvelle #id appelée #divider1. Donnons lui une hauteur (height) de 290px et une largeur (width) de 10px. #divider1 { height: 290px; width: 10px; Dans le fichier HTML, ajoutons notre div avec une #id divider1. Donnons lui la class right pour que notre séparation vienne se ranger à droite et la class black pour lui donner une couleur noire. <div id="bigbox" class="red right"> <div id="divider1" class="black right"> Étape 8 : faire une colonne Nous allons nous occuper de la colonne située en haut en gauche du tableau. Dans cette colonne nous placerons trois div : deux div auront une class.mediumbox et une div, qui portera l'#id divider2, servira de séparation horizontale. Commençons par placer notre colonne en écrivant sous la div divider 1 une div avec une id "topleftcolumn" (en anglais qui signifie "colonne d'en haut à gauche"). <div id="bigbox" class="red right"> <div id="divider1" class="black right"> <div id="topleftcolumn" class= "right"> 9 / 12

10 Continuons en plaçant une div de class "mediumbox" dans la div "leftcolumn". <div id="bigbox" class="red right"> <div id="divider1" class="black right"> <div id="topleftcolumn" class= "right"> <div class="mediumbox"> Il reste encore deux div à placer. Sur une nouvelle ligne, sous la div "mediumbox", plaçons la div #divider2. Donnons lui une class "black". Terminons la structure HTML de notre colonne en plaçant notre deuxième div.mediumbox. <div id="bigbox" class="red right"> <div id="divider1" class="black right"> <div id="topleftcolumn" class= "right"> <div class="mediumbox"> <div id="divider2" class= "black"> <div class="mediumbox"> Occupons-nous du style CSS de ces nouveaux éléments. Créons un style pour la class.mediumbox. Nous donnerons à toutes les div.mediumbox une largeur (width) de 100px et une hauteur (height) de 140px. Ajoutons un style pour la div #divider2. Nous lui donnerons une hauteur (height) de 10px et une largeur (width) de 100px. 10 / 12

11 Votre code CSS devrait ressembler à cela : mediumbox { width: 100px; height: 140px; #divider2 { height: 10px; width: 100px; Étape 9 : La séparation du milieu Créons une autre séparation noire sous notre div #toprow (notre ligne du haut). Donnons à notre div l'id "middlerow" (ligne du milieu en anglais). <div id="bigbox" class="red right"> <div id="divider1" class="black right"> <div id="topleftcolumn" class= "right"> <div class="mediumbox"> <div id="divider2" class= "black"> <div class="mediumbox"> <div id="middlerow"> À vous d'écrire le code CSS pour donner à votre div les dimensions et la couleur qui conviennent. Étape 10 : Apportez la touche finale! À présent, vous êtes prêt pour coder vous-même cette dernière ligne. Il faut suivre la même démarche que pour la div #toprow. Ajoutons une div avec une id "bottomrow" (ligne du bas). À vous d'y placer les boîtes et les colonnes nécessaires. 11 / 12

12 Étape 11 : Mettez un peu de désordre. C'est fini? C'est beau, non? Peut-être qu'il est possible d'ajouter encore plus de divisions, des couleurs différentes et plus nombreuses. Vous savez désormais peindre avec du code. Bonus Du pixel au pourcentage (difficile) Remplacez l'unité de mesure dans le fichier css. Calculez les proportions du tableau en pourcentage et non plus en pixel. Commencez par remplacer 400px par 100% et lancez-vous dans l expérience. Broadway Boogie Woogie Vous aimez bien Mondrian? Regardez sur internet d autres œuvres de ce peintre et essayez d en reproduire une avec du code. Arriveriez-vous à programmer son œuvre «Broadway Boogie Woogie»? 12 / 12

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES)

12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES) 119 12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES) Pour rappel, il existe trois grands principes de mise en page 1 : Fixe le design possède une largeur fixe exprimée le plus souvent en pixels.

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

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

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

Présentation Nous pouvons spécifier le style de l élément en trois endroits :

Présentation Nous pouvons spécifier le style de l élément en trois endroits : Javascript et CSS Présentation Nous pouvons spécifier le style de l élément en trois endroits : En attribut de l élément : c est le style dit inline. Dans une

Plus en détail

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1

de la page.

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1 <h1> de la page. Mémo CSS 3 Les sélecteurs simples balise permet de viser tous les éléments d un certain type de balise. Exemple : h1 concerne toutes les éléments titres de niveau 1 de la page..maclasse permet de

Plus en détail

TP JAVASCRIPT IntegWeb SERIE 4 MMI

TP JAVASCRIPT IntegWeb SERIE 4 MMI TP JAVASCRIPT IntegWeb SERIE 4 MMI 2014-2015 Exemple d'intégration d'un plugin FANCYBOX Objectif : Découvrir comment exploiter le plugin FancyBox. Le plugin FancyBox et un outil très souvent utilisé sur

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

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

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

Introduction à la Simulation

Introduction à la Simulation ou comment créer votre premier jeu vidéo Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Aspect visuel souhaité Aspect visuel souhaité Code source de la page HTML Feuille

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

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

Prog. Web - TP4 Année universitaire COURS : PLUS BESOIN DE FLASH!

Prog. Web - TP4 Année universitaire COURS : PLUS BESOIN DE FLASH! Prog. Web - TP4 Année universitaire 2012 2013 1 COURS : PLUS BESOIN DE FLASH! Aucune balise HTML4 ne permettait jusqu'ici de gérer la vidéo ou le son. Il fallait à la place utiliser un 'plugin' comme flash

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

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

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

Nous reprenons les étapes d ouverture de nouveau document vu en premier exercice. C est l occasion de réviser!

Nous reprenons les étapes d ouverture de nouveau document vu en premier exercice. C est l occasion de réviser! - 1-1- Ouverture d un nouveau document Word et saisie des paroles Nous reprenons les étapes d ouverture de nouveau document vu en premier exercice. C est l occasion de réviser! Commencez par saisir le

Plus en détail

Écriture de pages Web

Écriture de pages Web Écriture de pages Web Le langage CSS Laurent Tichit Janvier 2011 Copyright 2005-2009 Laurent Tichit 1 Les feuilles de styles CSS Elles permettent de changer la mise en forme d'une page HTML ou XHTML sans

Plus en détail

Mise en forme du texte à l aide de styles

Mise en forme du texte à l aide de styles Mise en forme du texte à l aide de styles Appliquez-vous à maintes reprises la même mise en forme, en changeant peut-être la couleur, la taille et la police, pour mettre en valeur votre texte? Vous pouvez

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

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

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

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016) Conception de Sites Web Dynamiques : TD 1 HTML5 statique, balises, liens relatifs/absolus, images, validateur W3C http://www.labri.fr/perso/preuter/cswd2016

Plus en détail

UTILISATION «PAGE BUILDER»

UTILISATION «PAGE BUILDER» 1/- AJOUTER DES IMAGES DANS LA BIBLIOTHÈQUE DES MÉDIAS. - Cliquer sur «Médias» puis sur l onglet «Bibliothèque». - Cliquer ensuite sur «Ajouter». 1 1 2 - Faire glisser les images à ajouter à l endroit

Plus en détail

Dreamweaver 2.0. GUIDE D UTILISATION POUR Dreamweaver 2.0. Logiciel de création de pages HTML. Page 1

Dreamweaver 2.0. GUIDE D UTILISATION POUR Dreamweaver 2.0. Logiciel de création de pages HTML. Page 1 1 GUIDE D UTILISATION POUR Dreamweaver 2.0 Logiciel de création de pages HTML SOMMAIRE Sommaire 1 Démarrer avec Dreamweaver 2.0 2 Le texte avec Dreamweaver 2.0 4 Insérer un lien hypertexte 4 Choisir les

Plus en détail

Introduction. Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction :

Introduction. Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction : Introduction Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction : Alléger les pages Web (une définition pouvant s'appliquer à plusieurs

Plus en détail

Tutoriel Modification templates Rhuk_solarflare_ii

Tutoriel Modification templates Rhuk_solarflare_ii Description du tutoriel Solutions de modification du template Rhuk_solarflare est le template par défaut du pack Joomla!. C est donc le plus utilisé et par conséquence le plus vu, mais il existe des milliers

Plus en détail

7.1 Introduction à la navigation... 204 7.2 Manipuler une ViewStack... 204 7.3 Les contrôles TabNavigator et Accordion... 215 7.4 Mise en pratique :

7.1 Introduction à la navigation... 204 7.2 Manipuler une ViewStack... 204 7.3 Les contrôles TabNavigator et Accordion... 215 7.4 Mise en pratique : 7 7.1 Introduction à la navigation... 204 7.2 Manipuler une ViewStack... 204 7.3 Les contrôles TabNavigator et Accordion... 215 7.4 Mise en pratique : mon CV en ligne... 218 7.5 Check-list... 225 Naviguer

Plus en détail

TUTORIEL INKSCAPE. «Réaliser une jaquette DVD» Niveau requis : Débutant. Auteur : Champtoussel dominique

TUTORIEL INKSCAPE. «Réaliser une jaquette DVD» Niveau requis : Débutant. Auteur : Champtoussel dominique TUTORIEL INKSCAPE «Réaliser une jaquette DVD» Niveau requis : Débutant Auteur : Champtoussel dominique www.dom-web.net Prêt a réaliser une jaquette DVD 100 % originale? Marre de publisher et du travail

Plus en détail

Créer un bouton pour le Web

Créer un bouton pour le Web Lorsqu'un internaute place le pointeur de sa souris sur un dessin dans une page Web, ce pointeur entre physiquement dans la zone de l'écran occupée par le graphique. L'internaute peut alors soit cliquer

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

Élaboration d un schéma de câblage

Élaboration d un schéma de câblage Élaboration d un schéma de câblage Bienvenue dans Corel DESIGNER, programme de dessin vectoriel complet destiné à la création de graphiques techniques. Dans ce didacticiel, vous allez apprendre à créer

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

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

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

Traitement de photos (Photoshop 7) Par : Patrick Kenny

Traitement de photos (Photoshop 7) Par : Patrick Kenny Traitement de photos (Photoshop 7) Par : Patrick Kenny 23 mars 2005 Table des matières Création d un nouveau document :... 3 Activer les barres d outils :... 4 Barre d outils :... 5-10 Redimensionner une

Plus en détail

CSS avancées. Vers HTML 5 et CSS 3. Raphaël Goetter. Préface de Daniel Glazman. Groupe Eyrolles, 2011, ISBN : 978-2-212-12826-0

CSS avancées. Vers HTML 5 et CSS 3. Raphaël Goetter. Préface de Daniel Glazman. Groupe Eyrolles, 2011, ISBN : 978-2-212-12826-0 CSS avancées Vers HTML 5 et CSS 3 Raphaël Goetter Préface de Daniel Glazman Groupe Eyrolles, 2011, ISBN : 978-2-212-12826-0 122 Tirer le meilleur de CSS première partie background: gray; margin: 5px; padding:

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

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

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

Vectoriser sous Illustrator Partie 2/2 - Vectoriser un dessin

Vectoriser sous Illustrator Partie 2/2 - Vectoriser un dessin - le 06/06/2013 Vectoriser sous Illustrator Partie 2/2 - Vectoriser un dessin Ce tutoriel est la suite de l article sur la vectorisation d un texte. Dans cette dernière partie, nous allons voir comment

Plus en détail

Infos : Les images pour le site

Infos : Les images pour le site Infos : Les images pour le site Objectifs : Pour compléter cette formation, nous vous proposons quelques solutions simples, pour les images (logos, photos, ) qui seront mises sur votre site, avec le logiciel

Plus en détail

FICHE TECHNIQUE : OpenOffice.org «CALC»

FICHE TECHNIQUE : OpenOffice.org «CALC» FICHE TECHNIQUE : OpenOffice.org «CALC» 1 Sommaire I /LE TABLEUR...3 1.1.Qu'est-ce qu'un tableur?...3 1.2.Prise en main...3 1.2.1.Saisir des informations...4 1.2.2. Modifier le contenu d'une cellule...5

Plus en détail

Conception de documents et d interfaces numériques

Conception de documents et d interfaces numériques CAEN 2016-2017 Conception de documents et d interfaces numériques TD n 10 WEB Les Feuilles de styles CSS 2 ANNE Jean-François D après le cours de Mme DRAFATE Style des tableaux Feuilles de Style (CSS)

Plus en détail

DOCUMENT DE FORMATION PACK OFFICE : Le B-A-BA

DOCUMENT DE FORMATION PACK OFFICE : Le B-A-BA DOCUMENT DE FORMATION PACK OFFICE : Le B-A-BA 1 PLAN PLAN Word p Powerpoint... p Excel... p 2 Traitement de texte Word Je ne pense pas qu il soit nécessaire d aborder toutes les fonctionnalités de word.

Plus en détail

Mise en page avec CSS

Mise en page avec CSS Mise en page avec CSS CSS ne sert pas uniquement à formater le texte et afficher des images de fond. Si on se concentrait un peu sur les tâches de base de mise en page? Bienvenue dans le monde du positionnement.

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

Créer et présenter un tableau

Créer et présenter un tableau Créer et présenter un tableau Avec Word, vous pouvez facilement insérer des tableaux et les mettre en forme pour présenter clairement des données. Dans ce dossier, nous allons réaliser un emploi du temps

Plus en détail

LibreOffice calc - Colorer une ligne sur deux

LibreOffice calc - Colorer une ligne sur deux LibreOffice calc - Colorer une ligne sur deux Etape 1 : Sélection de la base de données Un clic dans le coin gauche (en haut) de la base ouverte avec LibreOffice Calc (toute la feuille est sélectionnée)

Plus en détail

Créer un polaroïd de vos photos avec Gimp

Créer un polaroïd de vos photos avec Gimp Créer un polaroïd de vos photos avec Gimp Première partie : créer la base du polaroïd Ouvrir un nouveau document de 420 sur 450px, sur fond transparent. (Enfin mon document fait cette taille mais en soit

Plus en détail

Test Test Test Test Test

Test Test Test Test Test Mise en forme d un document HTML Niveaux de titre Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une structuration hiérarchique des paragraphes dans un texte : Balise

Plus en détail

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?

Plus en détail

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

Plus en détail

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

Tutoriel Karaoke. La synchronisation consiste à définir un temps de début et de fin pour lequel les lignes seront visibles.

Tutoriel Karaoke. La synchronisation consiste à définir un temps de début et de fin pour lequel les lignes seront visibles. Tutoriel Karaoke Partie 2 : La synchronisation d un karaoké Note : Vous pouvez aussi rencontrer les termes : «time», ou encore «timing» qui sont exactement la même chose que la synchronisation mais dit

Plus en détail

WORD 2010 Traitement de texte

WORD 2010 Traitement de texte S U P P O R T D E C O U R S WORD 2010 Traitement de texte 4 Mise en forme des paragraphes Niveau Essentiel Table des matières 1 Alignements des paragraphes... 3 2 Les retraits de paragraphes... 4 Retrait

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

- enregistrer votre thème personnalisé afin de le réutiliser dans de prochaines présentations.

- enregistrer votre thème personnalisé afin de le réutiliser dans de prochaines présentations. PowerPoint 2007-3 Personnaliser la conception des diapositives À la fin de ce cours, vous serez à même d'effectuer les tâches suivantes : - changer l'arrière-plan d'une diapositive à l'aide d'une couleur

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

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

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

Cours de I21 SOMMAIRE

Cours de I21 SOMMAIRE Cours de I21 Voir le chap 2 : cours de Javascript SOMMAIRE I. Introduction sur le langage HTML II. Balises primaires a. mise en forme b. hyperliens c. insérer une image III. Création de listes IV. Création

Plus en détail

WORD. Tableaux Bordures & trames Outils de dessins & graphiques

WORD. Tableaux Bordures & trames Outils de dessins & graphiques WORD Tableaux Bordures & trames Outils de dessins & graphiques Les tableaux Créer un tableau (1) Par la barre d outil Placer le curseur à l endroit où le tableau doit être inséré Cliquer sur le bouton

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

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

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

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

Développement Web (NFA0016)

Développement Web (NFA0016) Développement Web (NFA0016) première session Février 2013 Durée : 3h Modalités : Tous documents autorisés. Calculatrices, ordinateurs, téléphones portables interdits. Barème donné à titre indicatif. Exercice

Plus en détail

Créer des images avec le logiciel GIMP

Créer des images avec le logiciel GIMP Créer des images avec le logiciel GIMP Gimp est un logiciel libre permettant de créer et de modifier des images matricielles. Ces images sont composées de pixels, de petits carrés colorés. GIMP offre une

Plus en détail

Pages HTML - Partie 1

Pages HTML - Partie 1 Pages 1 - Introduction L'objectif est de donner au lecteur un petit coup de pouce pour le rendre autonome dans l'écriture de pages HTML et qu'il puisse s'appuyer sur la webographie et la bibliographie

Plus en détail

Utiliser les formules

Utiliser les formules Utiliser les formules Tout l intérêt d un tableur consiste à effectuer, non seulement des calculs simples comme toutes les opérations arithmétiques que nous avons tous apprises à l école, mais également

Plus en détail

/* basic elements */ html { font: 75% georgia, sans- serif; Design

/* basic elements */ html { <!DOCTYPE html> font: 75% georgia, sans- serif; Design</title> tp HTML But : être capable d écrire une page en HTML et de lui associer une mise en page en CSS Moyen : Pc avec Notepad++ et navigateurs Chrome et Firefox 1 Introduction Lorsque vous allez sur

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