Développement web avec XHTML et CSS

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

Download "Développement web avec XHTML et CSS"

Transcription

1 Déveloement web avec XHTML et CSS Pierre Dorbais Table des matières I Fond avec XHTML 3 1 Une age minimale 3 2 Les commentaires 3 3 Paragrahes 3 4 Titres 3 5 Saut de ligne et ligne horizontale 4 6 Mise en valeur 4 7 Listes Liste à uces Liste numérotée Tableau 4 9 Les liens Lien simle vers une autre age Lien interne à une age Lien vers un autre site Lien our envoyer un mail Les images 6 II Forme avec CSS 7

2 TABLE DES MATIÈRES TABLE DES MATIÈRES 11 Mettre en forme avec CSS Les commentaires Mise en forme sur toutes les balises Mise en forme sur une balise en articulier Styles ersonnalisés avec les classes Mise en forme du texte Alignement Les olices La taille En ixels Avec le nom de la taille En em En ourcentage Mise en valeur Gras et italique Minuscules et majuscules Décoration Couleur et fond Couleur du texte Avec le nom des couleurs Avec les codes couleurs héxadécimaux Couleur du fond

3 4 TITRES Première artie Fond avec XHTML 1 Une age minimale <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "htt:// <html xmlns="htt:// xml:lang="fr" > <head> <title>titre de mon site</title> <meta htt-equiv="content-tye" content="text/html; charset=iso " /> </head> <body> </body> </html> 2 Les commentaires <!-- Un commentaire --> 3 Paragrahes <>Un remier aragrahe</> <>Un deuxième aragrahe</> 4 Titres <h1>un titre de taille 1</h1> <h2>un titre de taille 2</h2> <h3>un titre de taille 3</h3> <h4>un titre de taille 4</h4> <h5>un titre de taille 5</h5> <h6>un titre de taille 6</h6> 3

4 8 TABLEAU 5 Saut de ligne et ligne horizontale N'oubliez as comment on note les balises auto-fermantes. <br /> <!-- Pour le saut de ligne --> <hr /> <!-- Pour la ligne horizontale --> 6 Mise en valeur <em>texte en italique</em> <strong>texte en gras</strong> 7 Listes 7.1 Liste à uces <ul> <li>premier</li> <li>deuxième</li> <li>troisième</li> <li>...</li> </ul> 7.2 Liste numérotée <ol> <li>premier</li> <li>deuxième</li> <li>troisième</li> <li>...</li> </ol> 8 Tableau <table> <tr> <!--ligne --> <td>a1</td> <!-- colonne --> <td>a2</td> </tr> <tr> 4

5 9 LES LIENS <td>b1</td> <!-- colonne --> <td>b2</td> </tr> </table> 9 Les liens 9.1 Lien simle vers une autre age Nous avons deux ages : age1.html et age2.html. Pour faire un lien à artir de la age1 vers la age2. <a href="age2.html">cliquez ici our aller vers la age 2</a> Ajout d'une info-bulle <a href="age2.html" title="vers la age 2">Cliquez ici our aller vers la age 2</a> 9.2 Lien interne à une age Dans une même age, on eut ointer vers une "ancre". <a href="#cha3">aller vers le chaitre 3</a> <h2 id="cha3">chaitre 3</h2> On eut bien sûr combiner. <a href="age2#cha4">aller vers le chaitre 4 de la age 2</a> 9.3 Lien vers un autre site <a href="htt:// chez Google</a> 5

6 9.4 Lien our envoyer un mail 10 LES IMAGES 9.4 Lien our envoyer un mail <a moi our vos questions</a> Un clic sur ce lien, ouvre le client de messagerie ar défaut avec l'adresse indiquée dans le cham "A :". 10 Les images Pour insérer un image, si ar exemle j'ai une image qui s'aelle hoto.ng. <img src="hoto.ng" alt="ma suer hoto" /> <!-- Attention il s'agit d'une balise auto-fermante --> src ermet d'indiquer le chemin de l'image alt qui est obligatoire en xhtml, ermet d'acher un texte alternatif si l'image ne eut être achée. Ajout d'une info-bulle avec le aramètre title. Comme our les liens, on eut ajouter une info-bulle <img src="hoto.ng" alt="ma suer hoto" title="comme elle est belle ma hoto!" /> Image cliquable Pour faire une image cliquable, il sut de mettre une image à la lace d'un texte dans un lien. <a href="age2.html"><img src="hoto.ng" alt="ma suer hoto" title="aller vers la age 2" /></a> 6

7 11 METTRE EN FORME AVEC CSS Deuxième artie Forme avec CSS 11 Mettre en forme avec CSS Avec CSS, on va mettre en forme nos ages (couleurs etc.). Pour cela on crée un chier (ar exemle style.css) qu'on va lier à nos ages html. Dans le html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "htt:// <html xmlns="htt:// xml:lang="fr" > <head> <title>titre de mon site</title> <meta htt-equiv="content-tye" content="text/html; charset=iso " /> <link rel="stylesheet" media="screen" tye="text/css" href="style.css" /> </head> <body> <>bla bla bla</> </body> </html> Dans les chiers css, on écrit de cette manière : élément roriété: valeur; roriété: valeur; 11.1 Les commentaires /* Un commentaire */ 11.2 Mise en forme sur toutes les balises /* Je centre systématiquement le texte */ 7

8 11.3 Mise en forme sur une balise en articulier 12 MISE EN FORME DU TEXTE * text-align: center; 11.3 Mise en forme sur une balise en articulier /* Je veux que les aragrahes soient écrits en rouge */ color: red; /* Je veux que les titres h1 et h2 soient soulignés */ h1, h2 text-decoration: underline; 11.4 Styles ersonnalisés avec les classes CSS /* Pour les choses imortantes, je veux que ça soit en grand et en rouge */.imortant font-size: large; color: red; HTML < class="imortant">attention!!!!</> 12 Mise en forme du texte Pour la mise en forme du texte, les exemles montreront une mise en forme sur les aragrahes (balise <>), mais on eut bien sûr les utiliser sur d'autres. 8

9 12.1 Alignement 12 MISE EN FORME DU TEXTE 12.1 Alignement text-align: center; /* Le texte est centré */ Les diérentes roriétés : center our centrer right our aligner à droite left our aligner à gauche justify our justier 12.2 Les olices font-family: "Comic Sans MS"; Notez qu'il faut mettre entre guillemets les noms de olices contenant lusieurs mots. Les olices "standard" que vous ouvez utiliser sans roblème : Arial Arial Black Comic Sans MS Courier New Georgia Imact Times New Roman Trebuchet MS Verdana 12.3 La taille En ixels font-size: 18x; 9

10 12.4 Mise en valeur 12 MISE EN FORME DU TEXTE Avec le nom de la taille font-size: large /* Le texte en grand */ Les diérentes tailles : xx-small : minuscule x-small : très etit small : etit medium : moyen large : grand x-large : très grand xx-large : très très grand En em font-size: 1.5em; /* Une fois et demi la taille normale */ En ourcentage font-size: 50%; /* La moitié de la taille normale */ 12.4 Mise en valeur Gras et italique font-weight: bold; /* texte en gras */ font-style: italic; /* texte en italique*/ 10

11 13 COULEUR ET FOND Minuscules et majuscules text-transform: uercase; /* tout en majuscules */ Les diérentes valeurs : uercase : en majuscules lowercase : en minuscules caitalize : la remière lettre de chaque mot en majuscule (exemle our les titres en anglais) none : rien Décoration text-decoration: underline; /* le texte est souligné */ Les diérentes valeurs : underline : souligné line-through : barré overline : ligne au dessus blink : clignotant none : rien 13 Couleur et fond 13.1 Couleur du texte color: blue; /* texte en bleu */ Avec le nom des couleurs white : blanc grey : gris silver : argent 11

12 13.2 Couleur du fond 13 COULEUR ET FOND black : noir red : rouge maroon : marron lime : vert clair green : vert yellow : jaune olive : jaune foncé aqua : bleu clair blue : bleu navy : bleu marine fuschia : rose urle : violet teal : bleu/vert Avec les codes couleurs héxadécimaux color: #ff0000; /* texte en rouge */ Pour connaître les codes couleurs associés à une couleur en articulier, visitez le site htt:// Couleur du fond body backgroud-color: green; /* le fond de toute la age est vert */ /* Ca marche aussi our les autres balises */ background-color: blue; /* les aragrahes sont surlignés en bleu */ 12

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

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

STID 2ème année : TP Web/PHP

STID 2ème année : TP Web/PHP STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction

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

Bernard Lecomte. Débuter avec HTML

Bernard Lecomte. Débuter avec HTML Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.

Plus en détail

Gestion Électronique de Documents et XML. Master 2 TSM

Gestion Électronique de Documents et XML. Master 2 TSM Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document

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

Initiation à html et à la création d'un site web

Initiation à html et à la création d'un site web Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le

Plus en détail

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page

Plus en détail

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le

Plus en détail

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

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

Pack Fifty+ Normes Techniques 2013

Pack Fifty+ Normes Techniques 2013 Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La

Plus en détail

Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam

Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam 6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de projet Le piratage informatique DEJOUR Kévin SOUVILLE Jean-François Suivi : Mokhtari-Brun Myriam 2 e semestre 2005-2006

Plus en détail

Normes techniques 2011

Normes techniques 2011 Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique

Plus en détail

ENVOI EN NOMBRE DE Mails PERSONNALISES

ENVOI EN NOMBRE DE Mails PERSONNALISES MAILING ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Envoi d un document HTML crée avec Word (envoi en base 64) 25 Le compte courriel

Plus en détail

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado - RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et

Plus en détail

dénombrement, loi binomiale

dénombrement, loi binomiale dénombrement, loi binomiale Table des matières I) Introduction au dénombrement 1 1. Problème ouvert....................................... 2 2. Jeux et dénombrements...................................

Plus en détail

Normes graphiques / Sigma Assistel / Site Internet version 1.0 / 12.11.03

Normes graphiques / Sigma Assistel / Site Internet version 1.0 / 12.11.03 version 1.0 / 12.11.03 CHOIX DE LANGUE / MESURES & GABARIT NORMES GRAPHIQUES & TYPOGRAPHIQUES 131 pixels La largeur totale du gabarit est de, 2 A ENTÊTE ET MENUS / MESURES & GABARIT NORMES GRAPHIQUES &

Plus en détail

Programmation Internet Cours 4

Programmation Internet Cours 4 Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web

Plus en détail

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information

Plus en détail

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

TD HTML AVEC CORRECTION

TD HTML AVEC CORRECTION TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez

Plus en détail

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

Plus en détail

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises

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

// HTML, Javascript XHTML & CSS

// HTML, Javascript XHTML & CSS design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact mr@sweeen.com // sommaire HTML 01. Introduction au langage HTML 02. Introduction

Plus en détail

Les sites web avec NVU

Les sites web avec NVU Les sites web avec NVU Table Des Matières Les sites web avec NVU Les bases du web Les protocoles réseaux Le Web Uniform Resource Locator Recherche d'informations Création et gestion d un site Web Utiliser

Plus en détail

101 Réaliser et publier un site WEB

101 Réaliser et publier un site WEB 101 Réaliser et publier un site WEB Rapport personnel de module EMF - Section informatique John Baudin Module du.2008 au.2008 Table des matières 1 Introduction... 1 2 Le XHTML... 1 2.1 Les balises... 1

Plus en détail

www.evogue.fr SUPPORT DE COURS / HTML

www.evogue.fr SUPPORT DE COURS / HTML L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / HTML Sommaire Sommaire... 2 Présentation... 3 Introduction... 3 Fonctionnement... 3 Historique... 4 Navigateurs... 6 Définition... 6 Historiquement...

Plus en détail

Création de site Web : Volet II concevoir et mettre un site en ligne

Création de site Web : Volet II concevoir et mettre un site en ligne Création de site Web : Volet II concevoir et mettre un site en ligne Ce document est offert par le CDEACF Table des matières Table des matières TABLE DES MATIÈRES...I REMERCIEMENTS...II INTRODUCTION...III

Plus en détail

Notes pour l utilisation d Expression Web

Notes pour l utilisation d Expression Web EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface

Plus en détail

AC PRO SEN TR «services TCP/IP : WEB»

AC PRO SEN TR «services TCP/IP : WEB» B AC PRO SEN TR «services TCP/IP : WEB» TP N 2: Installation des services utilisateurs (WEB) Nom : Prénom : Classe : Date : Appréciation : (2 points d'autonomie si vous n'utilisez aucune aide) Note : /50

Plus en détail

Malgré son aspect spartiate, Freeplane offre de nombreuses fonctionnalités en particulier dans le domaine de la diffusion des cartes sur le Web.

Malgré son aspect spartiate, Freeplane offre de nombreuses fonctionnalités en particulier dans le domaine de la diffusion des cartes sur le Web. Création d une carte heuristique avec Freeplane Version : 1.1.3 Barre de menus Barre d outils Barre des touches de fonctions Espace de travail Barre d icônes Éditeur de notes Freeplane est un logiciel

Plus en détail

02/02/2011. test 1. Communication visuelle & web. Pao. Principes fondamentaux. Les six principes de base. La mise en page. Module sur trois journées

02/02/2011. test 1. Communication visuelle & web. Pao. Principes fondamentaux. Les six principes de base. La mise en page. Module sur trois journées Communication visuelle & web Module sur trois journées 1, 5 jour : communication print & visuelle 1.5 jour : communication web mise en pratique evaluation sur QCM Vous serez en mesure participer à la conception

Plus en détail

Consigne : je remplis le tableau en tenant compte des informations de la ligne supérieure et de la colonne de gauche (droite pour les gauchers)

Consigne : je remplis le tableau en tenant compte des informations de la ligne supérieure et de la colonne de gauche (droite pour les gauchers) Découverte du monde : traiter deux informations Compétence : Savoir utiliser un tableau à double entrée. Matériel : - un plateau de jeu quadrillé : cinq lignes et cinq colonnes, - quatre pièces "couleur",

Plus en détail

Alors "Web" c'est le service Internet permettant de naviguer à travers des pages Web.

Alors Web c'est le service Internet permettant de naviguer à travers des pages Web. 1. Langage HTML Cette chapitre explique ce qu'est un site Web et ainsi contient les information de base sur le langage HTML, langage qui permet la réalisation de pages Web. Quand on utilise le mot Internet,

Plus en détail

Des familles de deux enfants

Des familles de deux enfants Des familles de deux enfants Claudine Schwartz, IREM de Grenoble Professeur, Université Joseh Fourier Les questions et sont osées dans le dernier numéro de «Pour la Science» (n 336, octobre 2005, article

Plus en détail

Sommaire. 1/ Grille. 2/ Specs globales. 3/ Specs HP. 4/ Specs Questions. 5/ Specs Offre. 6/ Specs Faq. 7/ Comportements interactifs

Sommaire. 1/ Grille. 2/ Specs globales. 3/ Specs HP. 4/ Specs Questions. 5/ Specs Offre. 6/ Specs Faq. 7/ Comportements interactifs Sommaire 1/ Grille 2/ Specs globales 3/ Specs HP 4/ Specs Questions 5/ Specs Offre 6/ Specs Faq 7/ Comportements interactifs 1/ Grille et breakpoints Desktop :

Plus en détail

Manuel de mise en page de l intérieur de votre ouvrage

Manuel de mise en page de l intérieur de votre ouvrage Manuel de mise en page de l intérieur de votre ouvrage Merci de suivre strictement les recommandations de ce manuel qui a pour but de vous aider à préparer un livre dont la qualité de mise en page est

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

Module : programmation site Web dynamique Naviguer entre les pages via site map

Module : programmation site Web dynamique Naviguer entre les pages via site map Module : programmation site Web dynamique Naviguer entre les pages via site map Soit le site web suivant qui est constitué de six pages web : On veut créer un menu constitué de trois nœuds principaux générale

Plus en détail

Logiciels de référencement

Logiciels de référencement Outils Logiciels de référencement Afin de contrôler la qualité de son référencement, d optimiser et d améliorer son positionnement, il peut être utile d utiliser des outils couvrant tout ou partie du référencement.

Plus en détail

Ecran : Processeur : OS : Caméra : Communication : Mémoire : Connectique : Audio : Batterie : Autonomie : Dimensions : Poids : DAS :

Ecran : Processeur : OS : Caméra : Communication : Mémoire : Connectique : Audio : Batterie : Autonomie : Dimensions : Poids : DAS : SMARTPHONE - DUAL-CORE - NOIR 3483072425242 SMARTPHONE - DUAL-CORE - BLEU XXXX SMARTPHONE - DUAL-CORE - BLANC 3483072485246 SMARTPHONE - DUAL-CORE - ROSE 3483073704131 SMARTPHONE - DUAL-CORE - ROUGE XXXX

Plus en détail

SII Stage d informatique pour l ingénieur

SII Stage d informatique pour l ingénieur SII Stage d informatique pour l ingénieur Création d un site Web École nationale supérieure de techniques avancées SII Stage d informatique pour l ingénieur 1 / 15 L informatique et le temps qui passe...

Plus en détail

Voix ambiguë d'un cœur qui, au zéphyr, préfère les jattes de kiwis

Voix ambiguë d'un cœur qui, au zéphyr, préfère les jattes de kiwis Pangramme Police Times New Roman Taille de Page A4 Orientation Portrait 8 10 12 14 16 18 zéphyr, préfère les jattes de kiwis 20 zéphyr, préfère les jattes de kiwis 22 zéphyr, préfère les jattes de kiwis

Plus en détail

CREATION d UN SITE WEB (INTRODUCTION)

CREATION d UN SITE WEB (INTRODUCTION) CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour

Plus en détail

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv> Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee

Plus en détail

Génie informatique. Claude Petitpierre, André Maurer

Génie informatique. Claude Petitpierre, André Maurer Génie informatique Claude Petitpierre, André Maurer Automne 2009 ii Table des matières 1 Pages du Web 1 1.1 Introduction............................ 1 1.2 Le langage HTML......................... 1 1.2.1

Plus en détail

Architecture Multi-Niveaux

Architecture Multi-Niveaux Architecture Multi-Niveaux Patrick FELIX (felix@labri.fr) Franck RUBI (rubi@labri.fr) Département Informatique IUT Bordeaux1 12 novembre 2007 Architecture Multi-Niveaux 1 Plan 1. Introduction : vers une

Plus en détail

Sana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012

Sana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Sana Sellami sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Connaître les principales techniques pour la création de sites web Se familiariser avec les langages du web Rendre dynamique le

Plus en détail

Stage «Créer et animer un site Web en équipe»

Stage «Créer et animer un site Web en équipe» Stage «Créer et animer un site Web en équipe» EREA Jean Isoard - Montgeron Jour 1 21/12/2012 Réaliser un site web Pour quoi faire? Publier sur le Web réaliser un journal en ligne (blog) écrire une ou plusieurs

Plus en détail

CONCEPTION D E-MAILS ADAPTATIFS

CONCEPTION D E-MAILS ADAPTATIFS CONCEPTION D E-MAILS ADAPTATIFS SELLIGENT Le contenu de ce manuel porte sur du matériel protégé par les droits d auteurs appartenant à Selligent. Ce manuel ne peut être ni reproduit, en tout ou en partie,

Plus en détail

Les Bases. Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015.

Les Bases. Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015. Référencer Mon SITE, BLOG Les Bases Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015. Le but de ce livre est de vous aider à bien positionné votre site web ou blog auprès des moteurs de

Plus en détail

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation

Plus en détail

Le codage informatique

Le codage informatique Outils de Bureautique Le codage informatique (exemple : du binaire au traitement de texte) PLAN 3) Le codage binaire 4) Représentation physique des bits 5) Le bit est un peu court... 6) Codage de texte

Plus en détail

mon site web via WordPress

mon site web via WordPress mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications

Plus en détail

Monstre marin. Valentin. Sa tête est ronde et rose. Il a de grands yeux orange. Il a une bouche jaune, énorme, son nez est vert et rond,

Monstre marin. Valentin. Sa tête est ronde et rose. Il a de grands yeux orange. Il a une bouche jaune, énorme, son nez est vert et rond, Monstre marin Sa tête est ronde et rose. Il a de grands yeux orange. Il a une bouche jaune, énorme, son nez est vert et rond, ses oreilles sont bleues et carrées. Il a seulement une dent verte. Il a un

Plus en détail

Dévéloppement de Sites Web

Dévéloppement de Sites Web 1 Dévéloppement de Sites Web Cours II : Internet et HTML - une très brève introduction Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations

Plus en détail

Classe ClInfoCGI. Fonctions membres principales. Gestion des erreurs

Classe ClInfoCGI. Fonctions membres principales. Gestion des erreurs Utilisation des classes de PourCGI par Michel Michaud, version 2002-11-23 Les fichiers PourCGI.h et PourCGI.cpp rendent disponibles deux classes et une fonction libre qui permettent de faire facilement

Plus en détail

Création d'une application WEB avec PHP / MySQL

Création d'une application WEB avec PHP / MySQL 1 Créer une application WEB avec PHP / MySQL Par Philippe Bousquet Copyright (c) 2003 2008 Philippe Bousquet. 2 Ce livre électronique est une réédition d'un article de préparation d'une

Plus en détail

Cours Excel : les bases (bases, texte)

Cours Excel : les bases (bases, texte) Cours Excel : les bases (bases, texte) La leçon 1 est une leçon de base qui vous permettra de débuter avec Excel, elle sera fort utile pour les prochaines leçons. Remarque : à chaque fois qu il est demandé

Plus en détail

UN SITE WEB RESPONSIVE EN UNE HEURE?

UN SITE WEB RESPONSIVE EN UNE HEURE? UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N

Plus en détail

Les services usuels de l Internet

Les services usuels de l Internet Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet Courrier électronique (mail) - protocole SMTP (Simple Mail Transfer Protocol) inclut maintenant tous types

Plus en détail

Optimiser les e-mails marketing Les points essentiels

Optimiser les e-mails marketing Les points essentiels Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement

Plus en détail

Charte graphique 2011

Charte graphique 2011 2011 Charte graphique Sommaire Les couleurs du logo > 4 La Taille minimale d exploitation > 5 l space de protection > 5 Les applications sur fonds > 6 Les interdits > 6 la Typographie d accompagnement

Plus en détail

Informatique : Création de site Web Master 2 ANI TP 1

Informatique : Création de site Web Master 2 ANI TP 1 Informatique : Création de site Web Master 2 ANI TP 1 Objectifs du TP : créer des pages Web en HTML EXERCICE I : AFFICHAGE DE DOCUMENT HTML 1. Ouvrez le bloc-note, recopiez-y le document suivant :

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

prix par consommateur identiques différents prix par identiques classique 3 unité différents 2 1

prix par consommateur identiques différents prix par identiques classique 3 unité différents 2 1 3- LE MONOOLE DISCRIMINANT Le monoole eut vendre ertaines unités de roduit à des rix différents. On arle de disrimination ar les rix. Selon une terminologie due à igou (The Eonomis of Welfare, 1920), on

Plus en détail

{less} Guide de démarrage

{less} Guide de démarrage {less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site

Plus en détail

Un mini-site internet en une après-midi

Un mini-site internet en une après-midi Prérequis Posséder un ordinateur équipé d un logiciel pour écrire des fichiers texte simples, (SimpleText, BlocNotes, etc...), d un logiciel de Navigation Internet (InternetExplorer, Netscape, Mozilla,

Plus en détail

Manuel utilisateur du CMS Anan6

Manuel utilisateur du CMS Anan6 Manuel utilisateur du CMS Anan6 Sommaire Fonctionnalités générales 05 - Paramétrage du navigateur 06 - Connexion au CMS Anan6 07 - Visualisation de l interface du CMS 08 - Détails de la liste des composants

Plus en détail

Spécificités techniques JANVIER 2013

Spécificités techniques JANVIER 2013 Spécificités techniques JANVIER 2013 Spécificités techniques des bannières de la newsletter 100%MEDIA Supermegabanner : Taille = 728x180 / Format = gif / Poids Max = 35Ko Important : - Un lien de redirection

Plus en détail

Publier un Carnet Blanc

Publier un Carnet Blanc Site Web de l association des ingénieurs INSA de Lyon Publier un Carnet Blanc Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008 Publication,

Plus en détail

FrontPage Support d apprentissage septembre 2000

FrontPage Support d apprentissage septembre 2000 FrontPage Support d apprentissage septembre 2000 Table des matières Notions de base... 1 Le langage HTML... 1 Les éditeurs HTML... 1 Le navigateur... 1 Le transfert de fichiers... 1 L enregistrement des

Plus en détail

Audit SEO. I / Les Tranquilles d Oléron

Audit SEO. I / Les Tranquilles d Oléron Audit SEO I / Les Tranquilles d Oléron Données relatives au domaine : Nom de domaine : www.lestranquillesdoleron.com Âge : Moins d un an Bilan : Référencement de base présent, mais il est possible de le

Plus en détail

HTML/CSS - Travaux Pratiques 2

HTML/CSS - Travaux Pratiques 2 HTML/CSS - Travaux Pratiques 2 Le but de ces séances de TP est de se familiariser avec le format HTML et les feuilles de style CSS pour la création de pages web. Pour cela, vous utiliserez emacs sous Linux

Plus en détail

Notice d accessibilité HTML, CSS et JavaScript

Notice d accessibilité HTML, CSS et JavaScript Notice d accessibilité HTML, CSS et JavaScript Date Version État / commentaires 10 sept. 2015 2.0 Cette version prend en compte WCAG 2.0 et RGAA 3.0. En partenariat avec : Air Liquide Atos BNP Paribas

Plus en détail

Mettre en place un site Web

Mettre en place un site Web Janvier 2007 Mettre en place un site Web Support de cours réalisé pour des formations assurées dans le cadre de l ENSSIB et l Université Paris X en 2006 1. La conception du site...2 2. La déclaration d

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

Bois. P.21 Bois-béton à Paris. Carrefour du Bois. Saturateurs. Usinage fenêtres. Bardages P.25 P.34 P.31 P.37. La revue de l activité Bois en France

Bois. P.21 Bois-béton à Paris. Carrefour du Bois. Saturateurs. Usinage fenêtres. Bardages P.25 P.34 P.31 P.37. La revue de l activité Bois en France CMP Bois n 19-12 avril - mai 2010 P.25 Carrefour du Bois P.34 cm La revue de l activité Bois en France Bois Saturateurs P.31 Usinage fenêtres P.37 Bardages Tout our l usinage du bois massif. Tout d un

Plus en détail

Jean Dubuffet AUTOPORTRAIT II - 1966

Jean Dubuffet AUTOPORTRAIT II - 1966 Jean Dubuffet AUTOPORTRAIT II - 1966 MON VISAGE A LA MANIERE DE JEAN DUBUFFET OBJECTIFS - utiliser son expérience sensorielle visuelle pour produire une œuvre picturale. - réaliser une œuvre s'inspirant

Plus en détail

Traitement de texte : Quelques rappels de quelques notions de base

Traitement de texte : Quelques rappels de quelques notions de base Traitement de texte : Quelques rappels de quelques notions de base 1 Quelques rappels sur le fonctionnement du clavier Voici quelques rappels, ou quelques appels (selon un de mes profs, quelque chose qui

Plus en détail

Prise en main rapide

Prise en main rapide Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un

Plus en détail

T u t o r i e l s PhotoFiltre

T u t o r i e l s PhotoFiltre T u t o r i e l s PhotoFiltre mis à jour le 24/08/2004 à 02h39 Cette section est destinée à vous proposer des tutoriels pour mes utilitaires PhotoFiltre et PhotoMasque. Elle va s'enrichir progressivement

Plus en détail

L import massif introduit plusieurs nouvelles fonctionnalités, selon que l on importe un thésaurus, un ensemble de valeurs contrôlées ou un corpus.

L import massif introduit plusieurs nouvelles fonctionnalités, selon que l on importe un thésaurus, un ensemble de valeurs contrôlées ou un corpus. Import Massif Nouvelles fonctionnalités L import massif introduit plusieurs nouvelles fonctionnalités, selon que l on importe un thésaurus, un ensemble de valeurs contrôlées ou un corpus. Le fonctionnement

Plus en détail

Jahia Modules DOCUMENTATION

Jahia Modules DOCUMENTATION DOCUMENTATION Jahia Modules Jahia, le CMS open source de nouvelle génération apportant à vos projets la convergence applicative (web, document, social, recherche et portail) unifiée par la simplicité d

Plus en détail

Séance d ED n 5 : HTML et JavaScript

Séance d ED n 5 : HTML et JavaScript Séance d ED n 5 : HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: une réponse : 1)

Plus en détail

Publier dans la Base Documentaire

Publier dans la Base Documentaire Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008

Plus en détail

Un outil open source de gestion de bibliographies

Un outil open source de gestion de bibliographies Un outil open source de gestion de bibliographies Généralités... 2 Installation... 2 L interface zotero... 2 Ajouter une notice bibliographique manuellement... 4 Modifier ses notices bibliographiques...

Plus en détail

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont I Open Boutique Sommaire : I Open Boutique... 1 Onglet «Saisie des Produits»... 3 Création d'une nouvelle fiche boutique :... 3 Création d'une nouvelle fiche lieux de retraits :... 10 Création d'une nouvelle

Plus en détail

Extended communication server 4.1 : VoIP SIP service- Administration

Extended communication server 4.1 : VoIP SIP service- Administration Extended communication server 4.1 : VoIP SIP service- Administration Mai, 2008 Alcatel-Lucent Office Offer - All Rights Reserved Alcatel-Lucent 2007 Ce document explique comment configurer le Service VOIP-SIP

Plus en détail

NOTICE TELESERVICES : Créer mon compte personnel

NOTICE TELESERVICES : Créer mon compte personnel NOTICE TELESERVICES : Créer mon compte personnel Sommaire Sommaire... 1 Objet de la notice... 1 A qui s adresse cette notice?... 1 Pré-requis... 1 Le guide pas à pas pour créer votre compte personnel...

Plus en détail

Charte Graphique Caisse d Epargne Rhône Alpes

Charte Graphique Caisse d Epargne Rhône Alpes Charte Graphique Caisse d Epargne Rhône Alpes 1. Les éléments de base du logotype Groupe Caisse d Epargne A. LE LOGOTYPE - VERSION HORIZONTALE La version quadrichromie Les couleurs La version monochrome

Plus en détail