Tutoriel : Feuille de style externe

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

Download "Tutoriel : Feuille de style externe"

Transcription

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

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

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

4 Taponot Céline Urfist Paris 4/5

5 Taponot Céline Urfist Paris 5/5

Programmation Web TP2 CSS i

Programmation Web TP2 CSS i Programmation Web TP2 CSS i Objectifs : Construction d'une page web : comprendre et utiliser un fichier CSS ; définir la structure d'une page web ; Consignes et Pré-requis Lire attentivement cet énoncé

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

Créer des styles CSS simples

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

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

Conception de sites web. Feuille de styles CSS

Conception de sites web. Feuille de styles CSS Conception de sites web Feuille de styles CSS M i s e e n p a g e : s o l u t i o n «v i e i l l e é c o l e» Mise en page par et par Long Vite illisible Peu souple Difficile à modifier

Plus en détail

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

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

Plus en détail

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

Plus en détail

Les feuilles de Style HTML : CSS

Les feuilles de Style HTML : CSS Les feuilles de Style HTML : CSS Tarek Melliti Laboratoire IBISC (Informatique Biologie Intégrative et Systèmes Complexes) tarek.melliti@ibisc.univ-evry.fr Plan du cours Séances 1 : Introduction à l informatique

Plus en détail

96 Feuilles de style en cascade

96 Feuilles de style en cascade Microsoft Expression Web (version 2) 96 Feuilles de style en cascade Définir les styles Dans la création de pages Web valides, un principe fondamental apparaît : le contenu doit être séparé de sa présentation.

Plus en détail

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Les bonnes pratiques du concepteur web moderne requièrent l usage des CSS pour la réalisation des mises en page. Les mises

Plus en détail

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

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

Plus en détail

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

Plus en détail

Par défaut, les éléments de type bloc seront affichés dans une succession verticale.

Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Le positionnement Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Une boîte jaune Une boîte verte Les principaux éléments de type bloc sont : l'élément div ; les titres

Plus en détail

Introduction à Expression Web 2

Introduction à Expression Web 2 Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer

Plus en détail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

Personnaliser vos écrans

Personnaliser vos écrans Personnaliser vos écrans Sommaire 1 Présentation 2 Mécanisme 3 Création du custom 3.1 Note 4 Création du dossier contenant les images personnalisées 4.1 Note 5 Création du dossier contenant le fichier

Plus en détail

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

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Conception de Sites Web Dynamiques : TD 2 HTML5 statique, feuille de style CSS, Mise en page, Framework Bootstrap http://www.labri.fr/perso/preuter/cswd2015

Plus en détail

PROGRAMMER UNE PAGE WEB EN HTML ET CSS

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

Plus en détail

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

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

Plus en détail

Fiche n 4 Utilisation de Kompozer Table des matières

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

Plus en détail

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; }

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; } Enregistrer la feuille de style "style.css" mettre dans l'en-tête de la page html (entre les balises ) : mettre dans l'en-tête de

Plus en détail

C2I CREATION DE PAGES WEB KOMPOZER

C2I CREATION DE PAGES WEB KOMPOZER C2I CREATION DE PAGES WEB KOMPOZER Philippe Rincon - kompozer prise en main - Le travail de la séance d'aujourd'hui consiste à reproduire un site existant, déjà en ligne. Au terme de la séance vous devrez

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

TUTORIEL OPEN OFFICE WRITER

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

Plus en détail

Nvu - KompoZer. Table des matières. Tuto rapido

Nvu - KompoZer. Table des matières. Tuto rapido Nvu - KompoZer Table des matières 1. Démarrage rapide...2 1.1. Créer une nouvelle page...2 1.2. Ouvrir une page existante...2 1.3. Enregistrer une page...2 2. Utiliser KompoZer...3 2.1. L'interface...3

Plus en détail

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

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

Plus en détail

<link rel = stylesheet  type = text / css  href = monstyle. css  /> Programmation Web AGRAL-3 et MTX-3, 2012-13 SÃl ance TP N o 5 Mars 2013 Objectifs Langage CSS Interactions HTML/CSS Manipulation [Où mettre ses fichiers? ] Pour ce TP vous allez mettre votre fichier HTML

Plus en détail

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation.

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation. 1 Mega Menu Avec le du Worldsoft CMS, vous pouvez créer des menus de navigation. Vous pouvez mettre en place autant de menus que vous le désirez et les adapter graphiquement. Avec votre propre contenu

Plus en détail

Création d un Site Web

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

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

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

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

Traitement de texte LIBRE - OFFICE WRITER

Traitement de texte LIBRE - OFFICE WRITER Traitement de texte LIBRE - OFFICE WRITER POUR : PAGE - Outil de base 2 - Encadrer un titre,un paragraphe. 3 - Créer un tableau. 4 - Modifier la largeur des colonnes dans un tableau. 5 - Modifier la hauteur

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

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

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

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

Plus en détail

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine Gérer un site avec Kompozer Organisation, plan de travail Création de pages Tout les fichiers, dossiers, images auront des noms (ex. nouveautes.htm ; ces noms ne devront comporter ni espaces, ni caractères

Plus en détail

Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3

Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3 Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3 9 Les règles de styles Il est nécessaire de bien connaître les règles de styles mais, pour un usage performant de Dreamweaver, il est aussi utile de bien

Plus en détail

TP N 4. Par défaut, la page d accueil affiche les 10 derniers articles publiés.

TP N 4. Par défaut, la page d accueil affiche les 10 derniers articles publiés. TP N 4 Page d accueil Wordpress Ojectif Gérer du texte avec des images Accueil par défaut Par défaut, la page d accueil affiche les 10 derniers articles publiés. Nous souhaitons une page d accueil avec

Plus en détail

Programme de Formation

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

Plus en détail

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

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

Plus en détail

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

Plus en détail

TP 8 : Créer son site web de D à Z...

TP 8 : Créer son site web de D à Z... TP 8 : Créer son site web de D à Z... Présentation Nous allons tenter de créer en 2 ou trois séances un site WEB de toute pièce. Vous devrez choisir un thème (ce que vous voulez, ou presque...). Vous établirez

Plus en détail

Support de cours Dreamweaver CS5 les images. MC Benveniste

Support de cours Dreamweaver CS5 les images. MC Benveniste Support de cours Dreamweaver CS5 les images MC Benveniste 2013 Insertion de contenu > insertion d images image hors du dossier racine Si l image ne se trouve pas dans le site dans lequel vous travaillez

Plus en détail

Tice -Seconde-Page Web 2015-2016

Tice -Seconde-Page Web 2015-2016 Ouvrez une page web, cliquer doit sur la souris et faite afficher le code source de la page. Quelqu un a écrit ce code pour faire afficher cette page. Nous allons nous aussi écrire du code pour faire afficher

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

Les Tableaux sous Word

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

Plus en détail

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

Utilisation de l éditeur.

Utilisation de l éditeur. Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7

Plus en détail

Programmation Web IMAC 2015-2016 TD 1 : HTML. 30 septembre 2015

Programmation Web IMAC 2015-2016 TD 1 : HTML. 30 septembre 2015 Programmation Web IMAC 2015-2016 TD 1 : HTML 30 septembre 2015 Objectif: Ce TD a pour but d aborder les premières notions du langage HTML. Il est important de noter que le HTML n est pas un langage de

Plus en détail

Objectifs. Programmation Tablette. Journée type. Organisation. Dominique Rossin Cours 1 - HTML / CSS

Objectifs. Programmation Tablette. Journée type. Organisation. Dominique Rossin Cours 1 - HTML / CSS Objectifs Programmation Tablette Dominique Rossin Cours 1 - HTML / CSS Comprendre le fonctionnement d une application Web Comprendre le fonctionnement d une application Smartphone Programmer et déployer

Plus en détail

Tutoriel : les formulaires

Tutoriel : les formulaires Tutoriel : les formulaires Ouvrir sous NVU le fichier Exercice4.html, vous travaillerez à partir de ce fichier Sous le titre en h4 définissez un formulaire : Nom du formulaire : Inscription Url de l'action

Plus en détail

LES TABLES. Exemple de table :
cellule 1 cellule 2
cellule 3 cellule 4

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> LES TABLES Les tables servent pour l'affichage de «données tabulaires», c'est-à-dire des informations présentées logiquement en rangées et en colonnes. Son intégration peut paraitre fastidieuse mais c'est

Plus en détail

INITIATION AU LANGAGE HTML

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

Plus en détail

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

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv> Réalisation d'un site web Première partie : Création des pages HTML 1 Objectifs Se familiariser avec le codage HTML Acquérir une pratique minimale Être capable de mener à bien la construction d'un site

Plus en détail

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2»

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2» Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2» Note importante : Pour l installation de SPIP et des squelettes RÉCIT-FP Partenaires v1.3.2, veuillez vous référer au fichier INSTALL.txt.

Plus en détail

Remerciements. Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN

Remerciements. Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN KEIFLIN Cédric 1 Janvier KEIFLIN Cédric 2 Janvier Remerciements Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN KEIFLIN Cédric 3 Janvier Mes sites

Plus en détail

Vade-mecum des «raccourcis typographique» dans SPIP

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

Plus en détail

TD 3 : Intégration HTML

TD 3 : Intégration HTML Programmation Web IMAC 2015-2016 TD 3 : Intégration HTML 14 octobre 2015 Objectif: Ce TD a pour but de se servir des concepts appris dans les TDs précédents pour intégrer entièrement une maquette de site

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

TP Initiation au langage HTML

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

Plus en détail

Manuel accompagnant le module d'entretien du site Web Hermes CMS.

Manuel accompagnant le module d'entretien du site Web Hermes CMS. Manuel accompagnant le module d'entretien du site Web Hermes CMS. Pour qui? Vous désirez présenter votre entreprise d'une manière professionnelle? Vous aimeriez gérer vous-même votre site Web? Vous aimeriez

Plus en détail

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS

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

Plus en détail

Annexe 5B - Les images. Pour centrer une image, on doit transformer l image comme un élément bloc.

Annexe 5B - Les images. Pour centrer une image, on doit transformer l image comme un élément bloc. Annexe 5B - Les images Propriété alt : un descriptif en texte de l image, peut servir à la classification du site par les moteurs de recherche Conventions pour les noms des fichiers image : o Entièrement

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie

Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie Vous allez créer avec cette leçon un album de photo avec le logiciel «Albelli livre photo». 2 La préparation Le travail le plus important pour

Plus en détail

Mise en forme avec les tableaux

Mise en forme avec les tableaux Mise en forme avec les tableaux Les tableaux se composent de lignes et de colonnes, comme les feuilles de calcul d Excel. Ils permettent de contrôler la mise en page de tous les objets d une page Web.

Plus en détail

Formation (X)HTML-CSS avancé

Formation (X)HTML-CSS avancé Formation (X)HTML-CSS avancé Table des matières 1 Introduction 3 1.1 La philosophie W3C.................................. 3 1.2 Du HTML au XHTML................................. 3 1.3 Et dans la pratique...................................

Plus en détail

EXERCICE 1 : TRAVAILLER EN LIGNE

EXERCICE 1 : TRAVAILLER EN LIGNE EXERCICE 1 : TRAVAILLER EN LIGNE A l'aide des informations de connexion qui vous ont été remises, connectez-vous au serveur NFrance, qui nous propose gracieusement l'hébergement en ligne. Pour vous connecter,

Plus en détail

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

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

Plus en détail

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles Index A affichage, CSS 180 album photos, créer 83 arrière-plan, CSS 152 images 152 Attributs de balises HTML action 90 align 71 attributs communs 131 background 39 border 39, 70 cellpadding 70 cellspacing

Plus en détail

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

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

Plus en détail

Création d un site Internet (partie 2 )

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

Plus en détail

CREER UN TEST. Sur la page d accueil du site, cliquez. sur l icône d accès au générateur de création de test

CREER UN TEST. Sur la page d accueil du site, cliquez. sur l icône d accès au générateur de création de test CREER UN TEST Sur la page d accueil du site, cliquez sur l icône d accès au générateur de création de test Dans la page de création de tests http://www.anglaisfacile.com/cgi2/m yexam/choice.php Cliquez

Plus en détail

Liste des propriétés CSS

Liste des propriétés CSS Liste des propriétés CSS Cette page est une liste non exhaustive des propriétés CSS qui existent, le but étant de réunir sur une même page un maximum de propriétés CSS. Cette liste se concentre sur les

Plus en détail

Tutoriel 6 Réaliser une notice de pliage

Tutoriel 6 Réaliser une notice de pliage Tutoriel 6 Réaliser une notice de pliage Une notice de pliage présente les différentes étapes permettant de plier complètement un objet. Étape et angle de pli Pour cela, nous allons présenter les notions

Plus en détail

Introduction à HTML et CSS

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

Plus en détail

>> Ajouter une page web Ordre Lien urlpage titre description Actif Lien au menu niveau cliquable type Consulter Enregistrer

>> Ajouter une page web Ordre Lien urlpage titre description Actif Lien au menu niveau cliquable type Consulter Enregistrer 1 C R É AT I O N D E S PAG E S D É S I R É E S > Pour ajouter des pages au site, cliquer sur >> Ajouter une page web > Des champs blancs à remplir apparaissent. L Ordre est le rang qu occupera cette page

Plus en détail

Création de site Web à l aide de l outil SimpliSite

Création de site Web à l aide de l outil SimpliSite Centre de documentation sur l éducation des adultes et la condition féminine (CDÉACF) Création de site Web à l aide de l outil SimpliSite Par François Dallaire CDÉACF Décembre 2006 Création de site Web

Plus en détail

FORMATION CALC OpenOffice 3.2

FORMATION CALC OpenOffice 3.2 FORMATION CALC OpenOffice 3.2 Livret 2 Mettre en forme un tableau Niveau 1 Thierry TILLIER http://www.coursdinfo.fr Ce support de cours est réservé à un usage personnel. Toute utilisation et diffusion

Plus en détail

Réalisation. Une nouvelle présentation (diaporama) commence par l'ouverture d'un assistant :

Réalisation. Une nouvelle présentation (diaporama) commence par l'ouverture d'un assistant : Stage mensuel Mai 2014 Page 1 / 9 Téléchargez ici le diaporama terminé pour avoir une idée du résultat : http://www.espaces-multimedia.fr/wp-content/uploads/2014/04/diaporama.odp Après avoir ouvert le

Plus en détail

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée. Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le

Plus en détail

Mise en page CSS avec KompoZer

Mise en page CSS avec KompoZer But de la leçon Mise en page CSS avec KompoZer Dans la conception actuelle de la conception des pages web, il est indispensable de séparer clairement le contenu d'un document de l'ensemble des directives

Plus en détail

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Objectifs Introduction aux langages à balises Introduction à (X)HTML / CSS Introduction à la gestion

Plus en détail

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

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

Plus en détail

my.epfl.ch Connexion

my.epfl.ch Connexion my.epfl.ch Connexion Sur la page http://my.epfl.ch, saisissez votre username GASPAR et votre mot de passe associé. 1 Partage de vos document Le premier onglet de l'application my.epfl vous permet de stocker

Plus en détail

> Table des matières. Gestion des pages courantes

> Table des matières. Gestion des pages courantes I N T E R F A C E A D M I N I S T R A T I O N M A N U E L D ' U T I L I S A T I O N D E T Y P O 3 V 4. 2 R É D A C T E U R V. DARDENNE DÉCEMBRE 2009 > Table des matières Gestion des pages courantes > Accès

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

CSS. CSS : propriétés. Texte : text-align, text-decoration, text-indent, font-weight, font-family, font-style, font-size

CSS. CSS : propriétés. Texte : text-align, text-decoration, text-indent, font-weight, font-family, font-style, font-size CSS s de propriétés en CSS Manuele Kirsch Pinheiro Manuele.Kirsch-Pinheiro@univ-paris1.fr Remerciements Mes sincères remerciements aux collègues de l IUT Nancy Charlemagne pour leur aide lors de mon passage

Plus en détail

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 E mail : bij@agasc.fr www.agasc.fr. Word: La présentation

AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 E mail : bij@agasc.fr www.agasc.fr. Word: La présentation Word: La présentation Introduction 2 ième partie Bien que le contenu du document soit le plus important, Word vous offre plusieurs options pour améliorer la présentation du texte. Cette page va vous montrer

Plus en détail

Personnaliser et adapter SPIP Développeur SPIP

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

Plus en détail

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML

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

Plus en détail

Modifications EPN-Campus

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

Plus en détail

Programmation Tablette. Dominique Rossin Cours 1 - HTML / CSS

Programmation Tablette. Dominique Rossin Cours 1 - HTML / CSS Programmation Tablette Dominique Rossin Cours 1 - HTML / CSS Objectifs Comprendre le fonctionnement d une application Web Comprendre le fonctionnement d une application Smartphone Programmer et déployer

Plus en détail

Guide Ultra-book / 2012

Guide Ultra-book / 2012 Guide Ultra-book / 2012 Avant de commencer Le logiciel Ultra-book est optimisé pour les derniers navigateurs web standards : Firefox 10 ou 11 Chrome 18 Safari 5 Vous trouverez ces navigateurs en téléchargement

Plus en détail