Pages HTML - Partie 1
|
|
|
- Adam Fontaine
- il y a 7 ans
- Total affichages :
Transcription
1 Pages 1 - Introduction L'objectif est de donner au lecteur un petit coup de pouce pour le rendre autonome dans l'écriture de pages HTML et qu'il puisse s'appuyer sur la webographie et la bibliographie abondantes sur le sujet. Les pages seront écrites au moyen d'un éditeur de texte adapté, ici notepad++ (téléchargement gratuit). Elles pourront être lues par un navigateur tel que Google Chrome, Internet Explorer, Firefox, etc, également gratuits. Des pages complexes pourront n'être que partiellement compatibles avec tous les navigateurs. Le navigateur Firefox a servi pour tester les pages présentées. Trois langages sont en fait introduits ici : HTML 5, JavaScript et CSS 3, complémentaires et indissociables. HTML donne l'ossature d'une page, JavaScript permet de traiter des actions pour cette page (clic de souris, évolution temporelle,...) et CSS contrôle la présentation. HTML est utilisé pour diffuser des informations sous forme de sites internet. La page HTML doit alors être stockée sur un serveur et accessible au moyen d'une adresse (comme Le fichier index.htm situé à cette adresse est alors lu par le navigateur, d'où l'importance de nommer index.htm le fichier qui contient la page d'accueil du site. On peut aussi utiliser ce langage pour des applications locales, telles que la réalisation d'un diaporama image et son (taper sous Google les mots clefs : "tuclic diaporama" ou suivre le lien d'un instrument de musique piloté par un clavier MIDI (voir par exemple sous Google avec les mots clefs "tuclic tempéraments", ou suivre le lien ou d'une interface graphique interactive pour du calcul intensif (voir par exemple sous Google "tuclic fusées", ou suivre le lien le langage HTML, associé à Javascript et CSS a de moins en moins de limites pour utiliser les possibilités d'un ordinateur. 2 - Page HTML : le minimum Créer un dossier page_01 qui contiendra ce premier exemple. Lancer notepad++. Ecrire le début du texte en langage HTML ci-dessous. L'enregistrer dans le dossier page_01 sous le nom index.htm. Les mots clefs du langage HTML apparaissent alors en couleur dans notepad++ ce qui permet d'éliminer un nombre important de fautes de frappe lors de la saisie des pages. On notera que ce langage utilise des balises ouvrantes telles que <body> et des balises fermantes telles que </body>. La page la plus simple débute par les deux lignes : - 1 / 18 -
2 <!doctype html> et <html> qui indiquent au navigateur qu'il s'agit d'une page HTML. La page contient ensuite un entête entre les deux balises <head> et </head>. Elle contient ensuite un corps entre les deux balises <body> et </body>. La page se termine par la balise fermante </html>. Après avoir saisi la totalité de la page ci-dessous, Fichier --> Enregistrer. Un double clic sur le nom du fichier dans l'explorateur de fichiers permet de lancer Firefox et d'afficher "index.htm" si Firefox est le navigateur par défaut. Si ce n'est pas le cas, clic droit sur le nom du fichier index.htm et "ouvrir avec" --> Firefox. Un clic droit sur le fichier index.htm et "éditer avec notepad++" permet de modifier le fichier. Contenu du fichier index.htm dans le dossier page_01, édité dans notepad++ : Résultat : ouverture de la page dans le navigateur Firefox : - 2 / 18 -
3 La balise <meta> permet d'indiquer la table de caractères utilisée, qui inclut ici les lettres accentuées. Les balises <title> et </title> encadrent le titre qui figure dans l'onglet du navigateur. Les balises <br> provoquent un retour à la ligne. Tester l'ajout ou la suppression de balises <br>. Modifier le texte en noir entre les balises <body> et </body>. Toujours veiller à la bonne imbrication des balises ouvrantes et fermantes : <balise ouvrante 1> <balise ouvrante 2>... </balise fermante 2> </balise fermante 1> 3 - Un peu de couleur dans la page Créer un dossier page_02 qui contiendra le deuxième exemple (exemple 1 modifié). A partir du premier exemple, dans notepad++, Fichier --> Enregistrer sous... Modifier le dossier (aller dans page_02). Laisser le nom index.htm. Cliquer sur enregistrer. Modifier le fichier index.htm dans notepad++ comme ci dessous : Fichier --> Enregistrer. - 3 / 18 -
4 On obtient le résultat suivant avec Firefox, en double cliquant sur index.htm dans le dossier page_02 : La disposition est la même. La couleur d'arrière plan est modifiée par la balise : <body bgcolor="#xxxxxxx"> où xxxxxx est la notation hexadécimale de la couleur (ici du jaune fluo avec xxxxxx=c8ff00) Deux paires de balises imbriquées <font color="#xxxxxx"> et </font> permettent de modifier la couleur du texte (rouge sombre avec xxxxxx=8e1b29 et bleu clair avec xxxxxx=0099ff). La notation hexadécimale d'une couleur peut être utilisée sous deux points de vue : - On peut utiliser un logiciel qui établit la correspondance entre une couleur et le code hexadécimal, par exemple, PsPad ou un gros logiciel de dessin comme GIMP, qui peuvent être téléchargés gratuitement. La fenêtre des couleurs de GIMP se présente de la façon suivante : - 4 / 18 -
5 Le triangle permet de choisir une teinte par rotation et d'y ajouter du noir et du blanc. La notation de ce mauve est donc 9a53bf. On peut se référer pour plus de détails à : - On utilise les quantités de rouge, de vert et de bleu, entre 0 et 255, indiquées chacune par deux chiffres hexadécimaux entre 0 et 15 : a b c d e f, où a vaut 10 et f vaut 15. On a en particulier : Noir = Blanc = ffffff Rouge = ff0000 Vert = 00ff00 Bleu = 0000ff Jaune = ffff00 (Rouge + Vert) Cyan = 00ffff (Vert + Bleu) Magenta = ff00ff (Rouge + Bleu) Modifier les codes des couleurs dans cet exemple 2 avec notepad++ et constater l'effet dans Firefox. 4 - Structuration du contenu de la page Créer un dossier page_03 qui contiendra le troisième exemple (exemple 1 modifié de façon différente). Editer à nouveau dans notepad++ le premier exemple : index.htm du dossier page_01, et l'enregistrer dans le dossier page_03 sous le même nom index.htm. - 5 / 18 -
6 On obtient l'affichage suivant dans Firefox : On a placé un grand titre entre les balises <h1> et </h1>. Les sous-titres sont placés entre les balises <h2> et </h2>. On peut continuer ainsi avec h3, h4, h5, h6, avec des tailles de caractères décroissantes. Les paragraphes sont placés entre <p> et </p>, avec retour à la ligne automatique. On ne peut pas imbriquer des balises <h> entre elles. On ne peut pas imbriquer de balises <p> entre elles. Mise à part la taille des caractères, qui peut être modifiée, le résultat est voisin de l'exemple 1 dans lequel on utilisait des balises de retour à la ligne <br>. Bien que cela paraisse plus compliqué, il est préférable d'utiliser <p>... </p> pour encadrer les paragraphes et <h>... </h> pour les titres. Il est plus logique de définir la mise en forme par rapport au sens d'une partie de texte, c'est à dire de façon sémantique (titre, paragraphe, complément d'information,...), qu'en considérant simplement la juxtaposition de caractères de tailles et de couleurs différentes. C'est l'objet du paragraphe suivant. Les moteurs de recherche sont également sensés y attacher de l'importance. - 6 / 18 -
7 5 - Couleurs, structuration du contenu et CSS Créer un dossier page_04 qui contiendra le quatrième exemple (exemple 3 modifié). Dans notepad++ : Fichier --> Enregistrer sous... --> Dossier page_04 --> index.htm On ajoute une ligne dans le fichier index.htm qui renvoie à une feuille de style : ce sera le fichier mon_style_01.css (ligne 8). Fichier --> Enregistrer. La feuille de style peut déterminer les couleurs, les positions des textes et des différents éléments de la page HTML qui y fait référence, ainsi que d'autres paramètres de mise en page. On peut parler de langage CSS pour cette feuille de style. Dans notepad++ : Fichier --> Nouveau. Commencer à saisir la feuille suivante et faire : Fichier --> Enregistrer sous... mon_style_01.css. Les mots clefs du CSS apparaissent alors en couleurs. Finir de saisir la feuille et l'enregistrer. - 7 / 18 -
8 On obtient le résultat suivant en ouvrant index.htm dans Firefox : La feuille de style est constituée d'une suite d'instructions comportant chacune 2 éléments : - un sélecteur qui définit à quelle(s) balises de la page HTML l'instruction se rapporte, - les attributs qu'on souhaite modifier pour cette ou ces balises, placés entre accolades {.. }. - 8 / 18 -
9 Le sélecteur * signifie toutes les balises. margin concerne la marge extérieur à un bloc, padding à la marge intérieure (ligne 1 du fichier mon_style_01.css). Le sélecteur body renvoie à la balise <body>, c'est à dire pour définir une valeur par défaut pour le corps de la page, et ici pour la couleur d'arrière plan (ligne 6). Le sélecteur h1, p renvoie à la balise <h1> (grand titre) et aux balises <p> (paragraphes). La virgule est essentielle. Essayer de la remplacer par un espace : le sélecteur h1 p signifie "les balises <p> situées dans un bloc délimité par <h1> et </h1>". Cette situation n'apparaît pas dans la page HTML, et il n'y a plus de caractères de couleur rouge sombre color : #8e1b29. Remettre la virgule (ligne 10). Le sélecteur h2 renvoie à la balise <h2> (sous-titre). color : #0099ff met les sous-titres en bleu clair (ligne 14). /*... */ encadre un commentaire qui n'est pas interprété. Déplacer dans la feuille de style mon_style_01.css le sélecteur h1 et la virgule de la ligne 10 à la ligne 14 pour que le grand titre apparaisse en bleu clair, comme les sous-titres h2. Enregistrer la modification de la feuille de style et actualiser la page index.htm. Les points-virgules servent à séparer les instructions entre les accolades. 6 - Position des blocs et CSS Créer un dossier page_05 qui contiendra le cinquième exemple (exemple 4 modifié). Rendre actif dans notepad++ l'onglet "index.htm". Dans notepad++ : Fichier --> Enregistrer sous... --> Dossier page_05 --> index.htm Rendre actif dans notepad++ l'onglet mon_style_01.css : Fichier --> Enregistrer sous... --> Dossier page_05 --> mon_style_01.css. On ne modifie pas la page HTML par rapport à l'exemple 4, qui fait référence à la feuille de style mon_style_01.css. Le but est d'espacer les titres des paragraphes. On peut y parvenir en augmentant la marge au dessus et en dessous des titres (attribut margin). On peut également déplacer ces éléments par rapport à leur position "dans le flux", c'est à dire celle qu'on observe en l'absence de feuille de style (exemple 4 du 5). On essaiera les deux méthodes (la première avec les marges dans ce paragraphe et la seconde avec les déplacements des blocs dans le paragraphe suivant 7). - 9 / 18 -
10 La première partie du fichier mon_style_01.css est identique à celle du 5 "COULEURS". La partie suivante "MARGES" affecte des marges internes à chaque balise, en pixels (px) ou la valeur 0. La première valeur concerne les marges internes au dessus et en dessous du contenu de la balise. La deuxième valeur concerne les marges internes à gauche et à droite du contenu de la balise. On peut indiquer des valeurs positives ou négatives. Modifier la valeur des marges en noir pour voir l'effet sur l'affichage dans le navigateur / 18 -
11 7 - Position des blocs et CSS : balise <div> Créer un dossier page_06 qui contiendra le sixième exemple (exemple 4 modifié). Fermer les onglets ouverts dans notepad++. Ouvrir, depuis le dossier page_04, les deux fichiers index.htm et mon_style_01.css. Les enregistrer tous les deux sous leur ancien nom, mais dans le dossier page_06. Dans un premier temps, on va ajouter des balises <div> et </div> dans la page HTML index.htm. Les balises <div> et </div> définissent un conteneur qui ne modifie rien par lui-même. On peut imbriquer des balises <div> et </div> pour avoir des conteneurs imbriqués. On pourra ensuite positionner les conteneurs et les sous-conteneurs au moyen de la feuille de style mon_style_01.css. Modifier comme ci-dessous la page index.htm du dossier page_06. Les conteneurs sont définis par les balises <div> et </div> aux lignes suivantes : : bloc qui contient toute la page : bloc qui contient le premier paragraphe : bloc qui contient les paragraphes de la partie : bloc qui contient les paragraphes de la partie 2-11 / 18 -
12 Le rôle des conteneurs n'est pas le même pour ces 4 blocs : le premier encadre l'ensemble de la page. On lui donne un identifiant id="page". Les 3 autres encadrent des paragraphes groupés dans une même partie. On leur associe une classe qui traduit ce point commun : class="paragraphes". Le nom qu'on donne à identifiant ou à une classe entre guillemets est totalement libre / 18 -
13 Feuille de style mon_style_01.css du dossier page_06 : - 13 / 18 -
14 On obtient l'affichage suivant dans Firefox : Le sélecteur div#page renvoie à la balise <div> d'identifiant "page". Le sélecteur div.paragraphes renvoie aux balises <div> dont la classe est "paragraphes". Ajouter dans l'accolade de la ligne 22 top : 50px; left : 60px;. On voit que toute la page se décale de 50 pixels vers le bas et de 60 pixels vers la gauche. Tous les conteneurs enfants suivent le conteneur parent. Modifier l'attribut position : relative; en position : absolute; à la ligne 33. Enregistrer. Rafraîchir la page index.htm dans Firefox. Les conteneurs enfants div.paragraphes de la page ne font alors plus partie "du flux" et sont placés de façon absolue dans le conteneur parent div#page. top : 0px; left : 0px; indique l'angle en haut à gauche de ce conteneur. Faire de même à la ligne 40. Enregistrer. Rafraîchir dans Firefox. Bien comprendre ce qui distingue position : relative et position : absolute. Ces 2 attributs ont chacun leur intérêt. Rétablir position : relative; aux lignes 33 et 40. Modifier la ligne 40 en ajoutant une marge (interne ou externe) aux titres h2 : h2 {position : relative; top : 12px; left : 10px; margin : 12px 0px;} - 14 / 18 -
15 On obtient finalement la feuille de style mon_style_01.css suivante : et le résultat suivant dans Firefox : - 15 / 18 -
16 8 - Bibliographie Bien que les navigateurs utilisent actuellement la version 5 du langage HTML, le livre suivant constitue une excellente introduction, pleine d'exemples, pour prolonger ce tutoriel. Le chapitre 13 permet de découvrir le langage JavaScript : "HTML 4, Maîtrisez le code source" de Luc VAN LANCKER, éditions ENI, Oct Présentation 2 - Le texte et sa présentation 3 - Les tableaux 4 - Les liens 5 - Les images et arrière-plans 6 - Les cadres 7 - Les formulaires 8 - L'en-tête d'un document Html 9 - Images réactives 10 - Les feuilles de style 11 - Le HTML et le multimédia 12 - Le XHTML 13 - Les autres langages du WEB - 16 / 18 -
17 Un autre livre plus récent, excellent pour le langage CSS, est très complet et très clair : "Premiers pas en CSS3 et HTML5" de Francis DRAILLARD, éditions EYROLLES, Introduction au HTML et aux feuilles de style CSS 2 - L'essentiel du HTML 3 - Nouveautés du HTML Ecriture des feuilles de style 5 - Propriétés de mise en forme 6 - Positionnement des blocs 7 - Principales nouveautés des CSS3 8 - Exemples de sites WEB 9 - Un site WEB pour les mobiles 10 - Différents types de médias Deux livres un peu plus anciens, complémentaires, constituent un excellent support pour la programmation en JavaScript : "JavaScript, des fondamentaux aux concepts avancés", d'emmanuel GUTIERREZ, Editions ENI, Sept Bases et introduction à JavaScript 2- Insertion du code JavaScript 3 - Initiation à la programmation orientée objet et JavaScript 4 - Utilisation des constantes, variables et opérateurs 5 - Contrôler les scripts avec les structures de contrôle 6 - Fonctions et évènements 7 - Les formulaires 8 - Les pincipaux objets JavaScript en détail 9 - Améliorer l'interactivité avec JavaScript et CSS "Apprendre à développer avec JavaScript", de Christian VIGOUROUX, Editions ENI, Avril Présentation du langage JavaScript 2 - Développement à partir d'algorithmes 3 - Bases du langage JavaScript 4 - Conditionnement des traitements 5 - Traitements itératifs (boucles) 6 - Tableaux 7 - Procédures et fonctions 8 - Approche "objet" en JavaScript 9 - Objets de base en JavaScript 10 - Saisie de données via des formulaires 11 - Modèle DOM 12 - Exploration de flux XML via DOM 13 - Gestion des cookies en JavaScript 14 - Stockage local de données 15 - Stockage distant (Ajax - PHP - MySQL -XML) 16 - Stockage distant (Ajax - PHP - MySQL - JSON) 17 - Géolocalisation 18 - Dessin (HTML 5 CANVAS) 19 - Graphiques de gestion - 17 / 18 -
18 20 - Production de documents PDF 21 - Production de codes QR Enfin, une bible pour le HTML 5 : "HTML 5, Une référence pour le développeur WEB" de Rodolphe Rimelé, éditions EYROLLES, Une brève histoire du Web et de ses standards 2 - HTML en seconde langue 3 - Navigateurs et support 4 - Eléments et attributs HTML Les formulaires (Web Forms) 6 - Les microformats (microdata) 7 - Audio et Vidéo 8 - Dessin avec Canvas 9 - Géolocalisation 10 - Interaction avec les fichiers (File API) 11 - Gestion du glisser-déposer (Drag & Drop) 12 - Evénements envoyés par le serveur ("push") 13 - Echange d'informations entre documents (Web Messaging) 14 - Communications en temps réel (Web Sockets) 15 - Stockage des données locales (Web Storage) 16 - Bases de données (Indexed Database & Web SQL Database) 17 - Applications web hors ligne 18 - Historique de navigation 19 - JavaScript en (multi)tâche de fond : les Web Workers 20 - JavaScript, le DOM et l'api Selectors Conclusions et perspectives De nombreux sites internet proposent des applications parfois très spécifiques des langages HTML, CSS et JavaScript. On peut citer Le site du Zéro, Openclassrooms, qui propose des tutoriels et des livres sur internet, pour différents langages, dont HTML, CSS et JavaScript / 18 -
Formation : WEbMaster
Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins
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.
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
Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org
Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et
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
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
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)
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
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...
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
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
Freeway 7. Nouvelles fonctionnalités
! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer
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
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
2 S I M 1 P H O N E G U I D E U T I L I S A T E U R. Guide d utilisation E-commerce / Prestashop
2 S I M 1 P H O N E G U I D E U T I L I S A T E U R Guide d utilisation E-commerce / Prestashop 1 2 S I M 1 P H O N E S O M M A I R E 1. Noms d utilisateurs et mots de passe..... Page 3 Adresse mail Prestashop
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é
< 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
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
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
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...
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
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
Administration du site (Back Office)
Administration du site (Back Office) A quoi sert une interface d'administration? Une interface d'administration est une composante essentielle de l'infrastructure d'un site internet. Il s'agit d'une interface
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
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
Création d'un site dynamique en PHP avec Dreamweaver et MySQL
Création d'un site dynamique en PHP avec Dreamweaver et MySQL 1. Création et configuration du site 1.1. Configuration de Dreamweaver Avant de commencer, il est nécessaire de connaître l'emplacement du
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
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
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...
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
Espace Client Aide au démarrage
Espace Client Aide au démarrage 1. A propos de l Espace Client... 2 a. Nouvelles fonctionnalités... 2 b. Reprise de vos documents... 2 c. Migration vers l Espace Client... 2 2. Accès à l Espace Client...
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
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
Climat Scolaire - Manuel utilisateur - Chapitre 2 : «Créer, Editer et suivi d un texte»
Climat Scolaire - Manuel utilisateur - Chapitre 2 : «Créer, Editer et suivi d un texte» Espace collaboratif Co-Ment Date : 01/12/2013 Référence du Projet : Chef de Projet : www.cndp.fr/climatscolaire Caroline
Construction d un Site Internet Dynamique avec Joomla René-Yves Hervé, Ph.D.
Construction d un Site Internet Dynamique avec Joomla René-Yves Hervé, Ph.D. TABLE DES MATIÈRES I. Présentation de Joomla II. III. IV. Documents disponibles Installation de Joomla 3.1) Installation sur
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
Introduction : présentation de la Business Intelligence
Les exemples cités tout au long de cet ouvrage sont téléchargeables à l'adresse suivante : http://www.editions-eni.fr Saisissez la référence ENI de l'ouvrage RI3WXIBUSO dans la zone de recherche et validez.
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 :...
ZOTERO Un outil gratuit de gestion de bibliographies
ZOTERO Un outil gratuit de gestion de bibliographies Téléchargement sur http://www.zotero.org Zotero est une extension du navigateur Web Firefox 0 Mais désormais applications autonomes par rapport à Firefox
{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
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
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
Bureautique Initiation Excel-Powerpoint
Module de Formation Personnalisée : Bureautique Initiation Excel-Powerpoint Durée : jours ouvrables Prix : Formation personnalisée en vue d obtenir les notions de base indispensables pour : Excel Office
Guide d utilisation 2012
Guide d utilisation 2012 Tout ce dont vous avez besoin pour bien démarrer REACOM La performance marketing SOMMAIRE Démarrez avec reagiciel Accédez à votre console d administration 4 Gestion internet Aperçu
et de la feuille de styles.
Feuilles de style / mars 2007 Manuel d'utilisation du modèle enssib et de la feuille de styles. Writer Open Office Service des produits documentaires Contact : Richard Grenier 2e étage enssib Tél : 04
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
Introduction à HTML5, CSS3 et au responsive web design
1 Introduction à HTML5, CSS3 et au responsive web design Jusqu à une période récente, les sites web étaient conçus avec une largeur fixe de l ordre de 960 pixels, en espérant que les visiteurs en tirent
Rapport de stage. Création d un site web. Stage du 20/01/2013 au 21/02/2013
Rapport de stage Création d un site web Stage du 20/01/2013 au 21/02/2013 Auteur : Antoine Luczak Tuteur professionnel : M. Tison Tuteur scolaire : Mme Girondon Année scolaire : 2013/2014 1 Table des matières
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
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
PARAMETRER INTERNET EXPLORER 9
PARAMETRER INTERNET EXPLORER 9 Résumé Ce document vous donne la marche à suivre pour paramétrer Microsoft Internet Explorer 9, notamment en vous indiquant comment lancer Internet Explorer 9, réinitialiser
Dévéloppement de Sites Web
1 Dévéloppement de Sites Web Cours III : Travailler avec Dreamweaver de Macromedia Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations
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
Utiliser le site learningapps.org pour créer des activités interactives
Utiliser le site learningapps.org pour créer des activités interactives I. Créer un compte - Pour pouvoir utiliser le site learningapps.org à des fins de création, il faut commencer par créer un compte
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
Nouveautés joomla 3 1/14
Nouveautés joomla 3 1/14 Table des matières 1 Responsive... 1 2 Bootstrap... 1 3 LESS CSS intégré... 1 4. JUI (pour les développeurs d'extensions)... 1 5. Le Mambo days vs le Génial UX... 2 6. 7 étapes
Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s
Mickaël Mickaël BLANCHARD BLANCHARD Préface de Sébastien L e p e r s Magento Préface de Sébastien L e p e r s Magento Réussir son site e-commerce Réussir son site e-commerce Groupe Eyrolles, 2010, ISBN
CARPE. Documentation Informatique S E T R A. Version 2.00. Août 2013. CARPE (Documentation Informatique) 1
CARPE (Documentation Informatique) 1 CARPE Version 2.00 Août 2013 Documentation Informatique S E T R A Programme CARPE - Manuel informatique de l'utilisateur CARPE (Documentation Informatique) 2 Table
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
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
Optimiser les performances d un site web. Nicolas Chevallier Camille Roux
Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net
3W Academy Programme de Formation Développeur Intégrateur web Total : 400 heures
3W Academy Programme de Formation Développeur Intégrateur web Total : 400 heures Objectif global : A l issue de la formation, les stagiaires doivent être opérationnels dans la création d un site internet
Édu-groupe - Version 4.3
Édu-groupe - Version 4.3 Guide de l utilisateur Gestion des fichiers Société GRICS, Équipe Évaluation Août 2012 2 CONSIDÉRATIONS GÉNÉRALES A. Importante mise en garde concernant les types de fureteur Les
.. 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
Chapitre 1. Prise en main
Guide de référence Guide de référence Chapitre 1. Prise en main Le processus d'enquête Le processus d'enquête comporte 5 étapes toutes prises en charge par le logiciel : Conception des formulaires Cette
Tutoriel Adobe Acrobat Pro (version 9.0.0) Créer les fichiers PDF de la thèse. Service Commun de la Documentation Service des thèses
Tutoriel Adobe Acrobat Pro (version 9.0.0) Créer les fichiers PDF de la thèse Service Commun de la Documentation Service des thèses 2011 SOMMAIRE A. Préparer les fichiers sources à convertir B. Créer le
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est
Zotero est une extension du navigateur Firefox. Il est possible de télécharger Firefox gratuitement sur le site: https://www.mozilla.org/fr/.
Aide-mémoire Zotero est un logiciel de gestion bibliographique gratuit jusqu à 300 Mo et open source. Cet outil permet de collecter des références bibliographiques, de créer des bibliographies et d insérer
Guide d'utilisation de la. plate-forme GAR. pour déposer une demande. de Bourse Sanitaire et Sociale
Guide d'utilisation de la plate-forme GAR pour déposer une demande de Bourse Sanitaire et Sociale Pour déposer une demande de Bourse Sanitaire et Sociale, vous allez vous authentifier sur la plate-forme
Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA
Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Sommaire 1. Introduction 2. Installation 3. Fonctionnement 4. Développement 5. Démonstration 2
MEDIAplus elearning. version 6.6
MEDIAplus elearning version 6.6 L'interface d administration MEDIAplus Sommaire 1. L'interface d administration MEDIAplus... 5 2. Principes de l administration MEDIAplus... 8 2.1. Organisations et administrateurs...
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
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.
Banque de données d offres & carte web interactive d offres
Réseau des parcs suisses Monbijoustrasse 61, 3007 Bern Tel. +41 31 381 10 71; info@paerke.ch; www.paerke.ch Banque de données d offres: a.jordan@paerke.ch Carte web interactive: t.estermann@paerke.ch Feuille
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,
Dans la série. présentés par le site FRAMASOFT
Dans la série Les tutoriels libres présentés par le site FRAMASOFT CRÉER DES EXERCICES AVEC JCLIC-AUTHOR Logiciel: JClic-author Plate-forme(s): Linux, Windows, Mac OS X Version: 0.1.1.9 Licence: GNU General
SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5
SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 5 ADMINISTRER SON SITE WEBGAZELLE CMS 2.0 5 5.1 Configuration minimale
1) Installation de Dev-C++ Téléchargez le fichier devcpp4990setup.exe dans un répertoire de votre PC, puis double-cliquez dessus :
1) Installation de Dev-C++ Téléchargez le fichier devcpp4990setup.exe dans un répertoire de votre PC, puis double-cliquez dessus : La procédure d installation démarre. La fenêtre suivante vous indique
INFORMATIQUE & WEB. PARCOURS CERTIFICAT PROFESSIONNEL Programmation de sites Web. 1 an 7 MODULES. Code du diplôme : CP09
INFORMATIQUE & WEB Code du diplôme : CP09 Passionné par l informatique et le web, vous souhaitez obtenir une certification dans un domaine porteur et enrichir votre CV? PARCOURS CERTIFICAT PROFESSIONNEL
Manuel d'utilisation: Gestion commerciale - CRM
Manuel d'utilisation: Gestion commerciale - CRM Partie: Plan de vente Version : 1.1 Structure du document 1 Introduction...2 2 Glossaire...2 3 Plan de vente...3 3.1 Plan de vente...4 3.1.1 Gestion...4
Atelier n 12 : Assistance à distance
Atelier n 12 : Assistance à distance Que faire quand on se retrouve seul face à son ordinateur qui refuse obstinément de faire ce qu on voudrait qu il fasse (même en lui demandant gentiment!)? On peut
DÉFINITION DE LA NEWSLETTER : OUVERTURE DU LOGITIEL ETARGET
DÉFINITION DE LA NEWSLETTER : La newsletter est un OUVERTURE document qui DU informe LOGITIEL le ETARGET client sur l'actualité, sur les nouveautés ou sur un sujet particulier. Elle est souvent rédigée
Open-Sankoré. Mise en route. Guide utilisateur Février 2013 NTICE (E. S.)
Guide utilisateur Février 2013 NTICE (E. S.) Open-Sankoré Développé à l Université de Lausanne en 2003 sous le nom d Uniboard, ce logiciel combine la simplicité des outils d enseignements traditionnels
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
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
Avec PICASA. Partager ses photos. Avant de commencer. Picasa sur son ordinateur. Premier démarrage
Avant de commencer Picasa est avant un logiciel que l'on peut installer sur son ordinateur et qui permet de transférer ses photos dans un espace pouvant être partagé sur Internet. Picasa sur son ordinateur.
ENVOI EN NOMBRE DE Mails PERSONNALISES
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 27 L historique
Trier les ventes (sales order) avec Vtiger CRM
Trier les ventes (sales order) avec Vtiger CRM Dans l'activité d'une entreprise, on peut avoir besoin d'un outil pour trier les ventes, ce afin de réaliser un certain nombre de statistiques sur ces ventes,
Edition de sites Jahia 6.6
Sommaire Edition de sites Jahia 6.6 documentation temporaire en attendant la finalisation de la documentation en ligne Ligne graphique Débuter l'édition Interface utilisateur Astuces de publication Boîte
Comment utiliser RoundCube?
Comment utiliser RoundCube? La messagerie RoundCube est très intuitive et fonctionne comme la plupart des logiciels de messagerie traditionnels. A. Découverte de l'environnement 1/ La barre d application
Cahier Technique. «Développer une application intranet pour la gestion des stages des étudiants» Antonin AILLET. Remi DEVES
Antonin AILLET Remi DEVES Thibaut AZZOPARDI 2 ème année de DUT Informatique Cahier Technique «Développer une application intranet pour la gestion des stages des étudiants» Encadré par Didier BOULLE Année
Logiciel libre, OpenMeetings permet de créer ou simplement de participer à des conférences en ligne.
OpenMeetings v1.9 Guide d utilisation du logiciel de web conferencing Logiciel libre, OpenMeetings permet de créer ou simplement de participer à des conférences en ligne. Matériel Si aucune installation
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
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
Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6
Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6 1 BERNIER François http://astronomie-astrophotographie.fr Table des matières Installation d un serveur HTTP (Hypertext Transfer
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
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