Feuilles de styles CSS : les bases
|
|
|
- Ghislaine Dumais
- il y a 7 ans
- Total affichages :
Transcription
1 Feuilles de styles CSS : les bases Les feuilles de style ont été mises au point afin de compenser les manques du langage HTML en ce qui concerne la mise en page et la présentation. En effet, le HTML offre un certain nombre de balises permettant de mettre en page et de définir le style d'un texte, toutefois chaque élément possède son propre «style», indépendamment des éléments qui l'entourent. Au contraire grâce aux feuilles de style, lorsque la charte graphique d'un site composé de plusieurs centaines de pages web doit être changée, il suffit de modifier la définition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier! Le principe des feuilles de style consiste à attribuer des caractéristiques de mise en forme à des groupes d'éléments. Il est par exemple possible de décider de créer un groupe de titres en police Arial, de couleur verte et en italique. On définit par un nom, une caractéristique de mise en forme. Il suffit ensuite de l'appeler pour l'appliquer à une balise HTML. Les feuilles de style permettent: d'avoir une présentation homogène sur tout un site, de pouvoir changer l'aspect du site entier en modifiant quelques lignes, une plus grande lisibilité du HTML, des caractéristiques de positionnement complémentaires comme le positionnement rigoureux des éléments des chargements de page plus rapides. de créer des animations (CSS3) La version actuelle du langage CSS est la version CSS 3. Selon les navigateurs (mêmes récents), certaines propriétés CSS3 ne sont pas supportées. Définition d'un style La définition d'un style se fait en utilisant la syntaxe suivante: Nom de marqueur{attribut1:valeur1;...attributn:valeurn où: Le marqueur va vous permettre de spécifier à qui va être attribué les propriétés de feuilles de style css. Cela peut être un identifiant de type : - class (.identifiant) correspondant à l'attribut html class - id (#identifiant) correspondant à l'attribut html id (un seul élément html peut avoir le même attribut id dans un document html) - balise HTML (nom de la balise). Les attribut1 sont les attributs affectés au style, par exemple la police, la taille et la couleur des caractères. Les valeur1 sont les valeurs affectées aux attributs, par exemple le nom de la police, le nombre de points et la valeur de couleur. Exemple: La ligne de code ci-aprés affecte la police Verdana en caractère gras, avec le corps 24 et la couleur rouge aux marqueurs <h1>: h1{font-family:verdana;font-weight:bold;font-size:24;color:red L'application des règles de style Il existe plusieurs façons d appliquer les règles de style : on peut utiliser des styles en ligne (déclarés séparément au niveau de la balise d ouverture de chaque élément), des styles inclus (ensemble des règles de style sont déclarées par l élément style au niveau de l en-tête du document) ou faire appel à des feuilles de styles externes (fichiers externe au document HTML). définir des marqueurs coup par coup Cette technique est la moins pertinente des 3. Il s'agit d'appliquer à une balise html un style, en définissant celui-ci à l'intérieur même d'une balise HTML. Exemple : <h1 style= «font-family:verdana;font-weight:bold;font-size:24; color:red»>titre 1 </h1> Feuilles de style CSS : les bases page 1/5
2 Utiliser une balise <STYLE> Une 2ème solution peut être de définir les styles dans l'en-tête d'un document HTML. Le ou les styles ainsi définis ou redéfinis le sont dans tout le document. Cette technique est préférable elle permet d'affecter le style défini une fois à plusieurs balises. l'exemple précédent deviendrait : <html> <head> <style type=»text/css»> h1{font-family:verdana;font-weight:bold;font-size:24;color:red </style> <h1>titre 1</h1> <h1>titre 2</h1> </html> Utiliser une feuille de styles Il est possible de définir des styles dans un document annexe appelé «feuilles de style». Il suffit alors de lier ce document à chaque page du site pour adopter de façon globale les styles définis. Fichier html: <HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="style.css"> </HEAD> <BODY> <H1>TITRE 1</H1> <H1>TITRE 2</H1> La import permet aussi de lier un fichier ccs à une page html (de la même manière que la balise LINK). La import est une commande css2 et n'est pas interprétée par netscape 4 (aujourd'hui navifateur dinosaure). Exemple : <style type="text/css" url(/styles/habillage.css); </style> Le média Le média va vous permettre de spécifier le support pour lequel est destiné un ensemble de propriétés css. Par exemple, vous pouvez avoir des propriétés css destinées à l'affichage sur l'écran et d'autres propriétés css destinées à l'impression de la page. Pour gérer çà, on utilisera l'attribut HTML media. exemple : <style media="screen">/*affichage écran*/</style> <style media="print">/*impression*/</style> Les balises div et span On utilisera plutôt des <div>... </div> pour donner une identité à des boîtes CSS, à des blocs de structure. Ces blocs de structure ou ces boîtes peuvent, par exemple, correspondre à un ensemble de paragraphes. Lorsque vous utilisez les balises <div>... </div>, on parle d'élément de type bloc. Les balises <span>... </span> sont utilisés pour modifier un morceau de texte qui est, la plupart du temps, déjà contenu entre des <div> </div>. On utilise souvent cette balise pour souligner l'importance d'un mot ou d'un morceau de texte. Pour cela, on aura tendance à modifier la couleur, la taille, la police d'écriture du texte... On ajoutera à un div ou span, un id pour lui donner une identité unique, ou bien une class si l'on compte utiliser plusieurs fois le même type de bloc ou morceau de texte dans une même page. Feuilles de style CSS : les bases page 2/5
3 L'attribut id l'attribut id fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé qu'une fois dans le code. Cela vous sera utile pour combiner avec du JavaScript. En pratique, on n'utilise des id que sur des éléments qui sont uniques dans la page, comme par exemple le logo : <img src="images/logo.png" alt="logo du site" id="logo" /> CSS : #logo { /* Indiquez les propriétés CSS ici */ Syntaxe CSS Avancée Il est possible d'appliquer un même style à plusieurs balises, classe ou id en même temps en utilisant la virgule. Ex : h1, h2, h3, h4, h5, h6{ color:#bb0000 ; Ici un style avec une couleur de texte rouge est appliquée à toutes les balises de titres h1, h2, h3, h4, h5, h6. On peut ensuite réutiliser une balise h1 seule pour définir de manière spécifique pour h1 la taille de police : h1{ font-size:15px ; Il est possible de sélectionner une balises contenue par une autre balise. Par exemple, dans l'exemple cidessous, on définit que les titre de niveau 3 à l'intérieur des paragraphes s'affichent en vert : <p><h3> titre de niveau 3 à l'intérieur d'un paragraphe </h3> texte paragraphe</p> CSS : p h3{color:#00bb00 ; Cela fonctionne aussi en combinant avec des classes ou id. Dans ce cas, il y a aussi une notion d'héritage (rapport parent enfant où l enfant est la balise à l'intérieur) par exemple dans le code suivant, le titre de niveau 3 va hériter de la police du style p : <p><h3> titre de niveau 3 à l'intérieur d'un paragraphe </h3> texte paragraphe</p> CSS : p h3{color:#00bb00 ; p {font-family:arial; Il est possible de définir pour une balise qui en suit une autre en utilisant le caractère «+». Dans l'exemple suivant, un paragraphe suivant un titre de niveau 3 est mis en italique. <h3>titre</h3> <p>paragraphe</p> CSS: h3 + p { font-style:italic; Feuilles de style CSS : les bases page 3/5
4 Gérer les apparences des liens avec CSS CSS permet d'appliquer des styles différents aux liens suivant leur état: normal, visité, survolé, cliqué. Pour cela, on utilise les pseudo-classes suivantes: :link (état par défaut); :visited (lien pointant sur une page déjà visitée, et présente dans l'historique du navigateur); :hover (état survolé); :focus (état d'un élément qui a reçu «l'attention», par exemple un lien lorsqu'on y accède grâce au clavier, ou un champ texte d'un formulaire lorsqu'on clique dedans); :active (état cliqué). (Notons que si :link et :visited sont réservés aux liens (élément HTML a), les pseudo-classes :hover, :focus et :active peuvent s'appliquer à d'autres éléments.) En général, on n'utilise pas la pseudo-classe :link mais plutôt la balise a seule. a { text-decoration: none; color: #a00; a:hover, a:focus, a:active { text-decoration: underline; color: white; background: #800; Le cas des polices relatives : em, %,... Il est recommandé d'utiliser des tailles de polices relatives (em principalement) afin de permettre aux malvoyants de pouvoir agrandir ces tailles à leur convenance. Les unités em et % sont relatives à la police de référence : 1 em est égal à la taille de cette police. Cependant, il faut bien comprendre que la taille de la police de référence se transmet par héritage également : dans le cas d'éléments imbriqués, la police de référence change à chaque nouveau conteneur. Par exemple (voir code ci-dessous), si vous définissez une taille de référence de 2em dans le <body>, puis une autre taille de 2em dans un élément enfant du body (par exemple <table>, les textes contenus dans le tableau auront une taille de 2em par rapport à 2em, soit 4em! Et ainsi de suite si vous cumulez les imbrications de balises enfants. <style type="text/css"> body {font-size: 2em; table {font-size: 2em; </style> <body> texte de 2em (référence : body) <table> <tr> <td>texte de 2em (référence : table inclue dans body)</td> </tr> </table> </body> Feuilles de style CSS : les bases page 4/5
5 block et inline Les balises HTML ont toutes par défaut des propriétés de rendu CSS particulières. En fait, il existe initialement deux grands groupes principaux de balises : les balises de rendu CSS "bloc" (block) et les balises de rendu CSS "en-ligne" (inline). Ces valeurs de rendu visuel coïncident généralement par défaut avec le groupe d'appartenance HTML. Exemples d'éléments en rendu inline : SPAN, EM, STRONG, IMG, BR, INPUT, etc. Exemples d'éléments en rendu bloc: DIV, P, H1...H6, UL, OL, TABLE, PRE, etc. exemples d'imbrications : <div><p>paragraphe 1</p><p>Paragraphe 2</p></div> La balise <div> (structure %block) englobe les deux paragraphes (structure %block). Ceci est autorisé. Par contre, nous n'aurions pas pu écrire : <span><p>paragraphe 1</p><p>Paragraphe 2</p></span> car la balise <span> (dont la structure est %inline) n'est pas autorisée à contenir des éléments de structure %block comme les paragraphes <p>. Il existe une propriété CSS display qui permet de définir si un style sera de type block ou inline. Exemple : CSS :.bloc1 { display: inline; background-color:#0c0;.bloc2 { display: block; background-color:#c06; <div class="bloc1">bloc1 mode inline</div> <div class="bloc2">bloc2 mode block</div> Feuilles de style CSS : les bases page 5/5
.. 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
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
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?
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
Intégrateur Web HTML5 CSS3
Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou
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
Les outils de création de sites web
Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site
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
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...
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
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
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web
NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des
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,
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é
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
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
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
Partie publique / Partie privée. Site statique site dynamique. Base de données.
Partie publique / Partie privée. Partie publique - Front office / Partie privée - Back office. Utiliser l analogie avec une émission de télévision. Un journal télévisé = 1 journaliste + des reportages.
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
Introduction. PHP = Personal Home Pages ou PHP Hypertext Preprocessor. Langage de script interprété (non compilé)
Introduction PHP = Personal Home Pages ou PHP Hypertext Preprocessor Langage de script interprété (non compilé) Plan Avantages Fonctionnement interne Bases du langage Formulaires Envoi d un email Avantages
Programmation Web TP1 - HTML
Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML
Webmaster / Webdesigner / Wordpress
Webmaster / Webdesigner / Wordpress Pré-requis : Projet professionnel. Bonne maîtrise de l'ordinateur. Bases en infographie et / ou traitement de texte fortement recommandées. Objectifs : Concevoir un
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
HTML5 et CSS3 pour des sites Responsive Web Design
Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur
EXTENSION WORDPRESS. Contact Form 7. Proposé par :
Contact Form 7 Proposé par : Sommaire Sommaire... 2 Présentation... 3 I. Le Tutoriel... 3 1) Espace de travail... 3 2) Téléchargez les extensions nécessaires... 3 3) Configuration du Formulaire... 7 1)
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.
{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
Uniformiser la mise en forme du document. Accélère les mises à jour. Permets de générer des tables de matières automatiquement.
Les styles Table des matières Les styles... 1 1. Tutoriels... 1 2. Pourquoi utiliser les styles?... 1 3. Qu'est-ce qu'un style?... 1 4. Utiliser les styles existants... 2 Afficher les styles... 2 Appliquer
GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS
GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS Table des matières Présentation de la plateforme d envoi de courriels... 4 1- Gestion des contacts... 5 1.1. Base de données... 5 1.1.1- Création
SYSTÈMES D INFORMATIONS
SYSTÈMES D INFORMATIONS Développement Modx Les systèmes de gestion de contenu Les Content Management Système (CMS) servent à simplifier le développement de sites web ainsi que la mise à jour des contenus.
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
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
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...
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
LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation
ING 01 LANGAGUE JAVA Durée : 21 heures 1090 HT / jour Dates : à définir en 2012 Concevoir et développer des programmes en langage Java Comprendre le fonctionnement de la machine virtuelle S approprier
FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006
I. INTRODUCTION 1. Présentation du formateur et des élèves 2. Historique internet : d'où ça vient a. Historique général : 3 étapes majeures 1. l'histoire de l'informatique débute en 1942 avec la première
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
Introduction aux concepts d ez Publish
Introduction aux concepts d ez Publish Tutoriel rédigé par Bergfrid Skaara. Traduit de l Anglais par Benjamin Lemoine Mercredi 30 Janvier 2008 Sommaire Concepts d ez Publish... 3 Système de Gestion de
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
TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)
TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles,
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
Responsive Web Design. La Rochelle, Avril 2014
Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches
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
Formation Webmaster : Création de site Web Initiation + Approfondissement
Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation
Projet en nouvelles technologies de l information et de la communication
Projet en nouvelles technologies de l information et de la communication Site Web universitaire du Prof. Jacques Moeschler. Nono Steeve Semestre de printemps 2013 Sous la direction du Prof Luka Nerima
< Atelier 1 /> Démarrer une application web
MES ANNOTATIONS SONT EN ROUGE : Axel < Atelier 1 /> Démarrer une application web Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE
SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES
SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES Contact Traffic : Audrey Pluot-Etourneau apluot@staff.aufeminin.com LES FORMATS CLASSIQUES Nom du Format Dimension du Format Poids Max Fichiers Acceptés
Responsive Design. Technologies du web. Stéphane Bouvry, 2014
Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,
Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles
Mission TICE - académie de Versailles 7 nov. 2008 Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Anne-Cécile Franc Mission TICE académie de Versailles
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
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
Remote Cookies Stealing SIWAR JENHANI (RT4) SOUHIR FARES (RT4)
Remote Cookies Stealing SIWAR JENHANI (RT4) SOUHIR FARES (RT4) Sommaire : Contenu I. Introduction:... 2 II. Présentation de l atelier :... 2 1) Attaque persistante :... 3 2) Attaque non persistante :...
Packs Graphiques. Comparez nos offres! Chrome Silver Gold Platinum. 04 86 26 26 26 Appel non surtaxé. Comment choisir votre pack? Design.
Packs Graphiques Comparez nos offres! Chrome Silver Gold Platinum Design - Design général du site - Boutons dans l en-tête - Champ recherche dans l en-tête - Blocks marketing stylisés - Optimisation de
Google Tag Manager Optimisez le tracking de votre site web
Avant-propos A. Remerciements 11 B. À propos de l auteur 12 C. À propos de ce livre 13 Chapitre 1 : Les systèmes de gestion de balises A. Introduction 17 B. Les systèmes de gestion de balises 17 1. Introduction
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
PERSONNALISATION DE LA PAGE DE PAIEMENT & TICKET DE PAIEMENT
PERSONNALISATION DE LA PAGE DE PAIEMENT & TICKET DE PAIEMENT PAYBOX SYSTEM Point Transaction Systems, 11 A, rue Jacques Cartier - 78280 Guyancourt - FRANCE Société par Actions Simplifiée au capital de
Luc Brun. Création de pages Web Dynamiques p.1/75
Création de pages Web Dynamiques Luc Brun Création de pages Web Dynamiques p.1/75 Place du HTML GET http://www. monssite.com HTTP 1.0 Content type: text/html ... Création de pages Web Dynamiques
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...
2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22
SOMMAIRE INTRODUCTION La collection Classroom in a Book TinyUrL Conditions requises Installation du programme Copie des fichiers Classroom in a Book ordre recommandé pour les leçons Démarrage instantané
Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013
Exemple d utilisation du gestionnaire de conception Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 6, rue de l Etang, L-5326
INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)
CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.
Généralités. javadoc. Format des commentaires. Format des commentaires. Caractères spéciaux. Insérer du code
Généralités javadoc Université de Nice - Sophia Antipolis Richard Grin Version 1.4.1 8/2/11 javadoc produit de la documentation en partant de commentaires particuliers insérés dans le code source des classes
Sommaire Accès via un formulaire d'identification... 4 Accès en mode SSO... 5 Quels Identifiant / mot de passe utiliser?... 6
Sommaire Accès via un formulaire d'identification... 4 Accès en mode SSO... 5 Quels Identifiant / mot de passe utiliser?... 6 2 І O2S Intégration O2S dans un site Internet Ce document présente une description
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
CSS : on reprend tout à zéro! Par Joe Gillespie
1 sur 31 CSS : on reprend tout à zéro! Par Joe Gillespie Document original : http://www.pompage.net/pompe/cssdezero-1/ Pompage de Copyright 1996-2007 WPDFD, LTD : http://www.wpdfd.com/issues/70/css_from_the_ground_up/
INTRODUCTION AU CMS MODX
INTRODUCTION AU CMS MODX Introduction 1. Créer 2. Organiser 3. Personnaliser UNE PETITE INTRODUCTION QUEST-CE QU UN CMS? CMS est l acronyme de Content Management System. C est outil qui vous permet de
Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech
Autour du web Une introduction technique Première partie : HTML Georges-André SILBER Centre de recherche en informatique MINES ParisTech silber@cri.ensmp.fr http://www.cri.ensmp.fr/people/silber/cours/2010/web
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
TIC 12 ATELIER INTEGRATION CAHIER DES CHARGES. Page 1/5
TIC 12 ATELIER INTEGRATION CAHIER DES CHARGES Page 1/5 ATELIER INTEGRATION A mi-parcours de votre formation, l'atelier (dont la note est coefficient 2) permet d'évaluer vos connaissances acquises lors
Votre site Internet avec FrontPage Express en 1 heure chrono
1.1. Précautions préliminaires Votre site Internet avec FrontPage Express en 1 heure chrono Le contenu de ce site n'est pas très élaboré mais il est conçu uniquement dans un but pédagogique. Pour débuter,
Gestion d identités PSL Exploitation IdP Authentic
Gestion d identités PSL Exploitation IdP Authentic Entr ouvert SCOP http ://www.entrouvert.com Table des matières 1 Arrêt et démarrage 2 2 Configuration 2 2.1 Intégration à la fédération............................
creer votre site internet en html/css
3 jours (21 heures) 1110 HT (Inter) 2670 HT (Intra) Toute personne (particulier ou professionnel) souhaitant créer son site Internet Créez son site Internet Assurez sa mise en ligne Gérer les mises à jour
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
PARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION
PARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION Le but de l'utilisation de la console d'administration de votre adresse de messagerie "vendome.eu", est notamment de créer
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
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
Éditeur WordPress. Illustration 1. Kerniolen 56400 Pluneret Tel : 02 97 57 76 55 Mob : 06 11 33 30 11 info@formation-auray.fr www.formation-auray.
Kerniolen 56400 Pluneret Tel : 02 97 57 76 55 Mob : 06 11 33 30 11 info@formation-auray.fr www.formation-auray.fr Bureautique Gestion commerciale Images Sites Internet Éditeur WordPress Introduction Ce
Pour en expliquer le principe, on se limitera à deux exemples :
Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Pour en expliquer le principe, on se limitera
Programmation Web. Madalina Croitoru IUT Montpellier
Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance
Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur
FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique
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
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
25 mars. Tutoriel sur Laravel. Préparé par : Lydiane Beaulne-Bélisle. Ceci est un tutorial qui montre comment débuter avec le Framework PHP Laravel.
25 mars Tutoriel sur Laravel Préparé par : Lydiane Beaulne-Bélisle Ceci est un tutorial qui montre comment débuter avec le Framework PHP Laravel. Créé pour le cours de Projet de fin d étude Collège de
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
CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration
CMS Made Simple Version 1.4 Jamaica Système de gestion de contenu CMS Made Simple est entièrement gratuit sous licence GPL. Tutoriel utilisateur Récapitulatif Administration Le système de gestion de contenu
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
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
Document Object Model (DOM)
Document Object Model (DOM) Jean-Claude Charr Maître de conférences IUT de Belfort Montbéliard Université de Franche Comté Description générale Définit un standard pour accéder aux documents structurés
Audit de site web. Accessibilité
Accessibilité 1. Est- ce que le contenu est structurellement séparé des éléments de navigation? 2. Est- ce que le site est compatible avec tous les navigateurs? 3. Le site est- il compatible avec les normes
Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS
Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS QUI EST MAXIWEB? Maxiweb est une agence digitale pas comme les autres. Un seul objectif : faire de vous le ROI Pôle Consulting Pôle
Comment développer et intégrer un module à PhpMyLab?
Comment développer et intégrer un module à PhpMyLab? La structure du fichier Afin de conserver une homogénéité et une cohérence entre chaque module, une structure commune est utilisée pour chacun des modules
WIMS. Découvrir et utiliser
WIMS Découvrir et utiliser (version préliminaire - 3 janvier 2011) Copyright c 2009 WIMS EDU GNU FDL Copyleft 2009 http://wimsedu.info 1 Découverte 1. Découvrir WIMS (I) Un internaute désire découvrir
Google Tag Manager. Optimisez le tracking de votre site web. Google Tag Manager. Google Tag Manager. Optimisez le tracking de votre site web 26,50
Google Tag Manager Optimisez le tracking de votre site web Le chapitre 6 regroupe des outils ainsi que des ressources documentaires vous permettant d aller plus loin dans l utilisation de Google Tag Manager.
WEBSEMINAIRE INTRODUCTION AU REFERENCEMENT
WEBSEMINAIRE INTRODUCTION AU REFERENCEMENT Animé par A.COMLAN ADCOSOFT 14/02/2014-15H 1 Programme du webséminaire : Introduction Partie I Optimisation des Balises TITLE et META Partie II Optimisation du
Optimiser pour les appareils mobiles
chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...
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
Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP
Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec
Devenez un véritable développeur web en 3 mois!
Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web