Programmation WEB. HTML et Javascript
|
|
|
- Sylvain Alain
- il y a 8 ans
- Total affichages :
Transcription
1 Programmation Web : HTML et Javascript Michaël Krajecki Université de Reims Champagne-Ardenne Département de Mathématiques et Informatique Moulin de la Housse - BP Reims Cedex 2. Tél. : , michael.krajecki@univ-reims.fr DESS IAS Année M. KRAJECKI 1 DESS IAS Année INTRODUCTION Le langage HTML est un langage de description et de mise en forme d un document électronique. Les objectifs de la description sont : unification d un ensemble de documents ; allègement de la taille du document ; détachement lors de la création des impératifs liés au fond ; structuration du contenu d une page et des relations des contenus de plusieurs pages d un même site. faciliter l échange de documents électroniques par l intermédiaire d internet M. KRAJECKI 2 DESS IAS Année
2 PLAN Ce chapitre est organisé en 4 parties : LA HIÉRARCHIE D UN DOCUMENT HTML MISE EN PAGE EN HTML LIENS HYPERTEXTE INCLUSION D IMAGES M. KRAJECKI 3 DESS IAS Année HTML ET LES DTD (DÉFINITION DE TYPE DE DOCUMENT) HTML s appuie sur quelques balises (également appelées marqueurs) fondamentales. Ce sont des commandes HTML, écrites entre les signes < et > pour que le na vigateur puisse les exécuter. Une balise se présente ainsi : <commande> de nombreuses balises exigent d être fermées : </commande> ; il est conseillé d employer des lettres minuscules. Chaque document doit commencer par la balise. M. KRAJECKI 4 DESS IAS Année
3 LE TYPE DE DOCUMENT Avant la balise, il faut définir le <!DOC TYPE> ; Abréviation pour document type declaration) Précise quelle est la version de HTML que vous utilisez Permet au navigateur de réaliser un rendu conforme à la version de HTML choisie. Une DTD est un fichier (ou plusieurs fichiers à utiliser ensemble), écrit en XML En pratique, nous allons définir des documents en utilisant la version 4 de HTML. La pr emière ligne de vos documents devra alors être : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> M. KRAJECKI 5 DESS IAS Année UN PREMIER DOCUMENT HTML <!DOCTYPE HTML PUBLIC " //W3C/ / DTD HTML 4.01 T r a n s i t i o n a l / / EN" > <! début du document > <! début de l entête > < t i t l e > <! t i t r e de l a page > Mon premier document < / t i t l e > <! f i n de l entête > <! début du corps du document > V o i c i mon premier document HTML! <! f i n du corps du document > M. KRAJECKI 6 DESS IAS Année
4 LA HIÉRARCHIE D UN DOCUMENT HTML Un document HTML est structuré par les définitions de titres, paragraphes et listes Les titres introduisent une hiérarchie sur plusieurs niveaux Les balises <h1> et </h1> définissent le titre de plus grande importance <h6>, associée à </h6> définit le titre de plus petite importance. M. KRAJECKI 7 DESS IAS Année Exemple < t i t l e > T i t r e s en HTML < / t i t l e > <h1> Du < / h1> <h2> plus < / h2> <h3> gros < / h3> <h4> au < / h4> <h5> plus < / h5> <h6> p e t i t < / h6> M. KRAJECKI 8 DESS IAS Année
5 Le résultat (Internet Explorer) M. KRAJECKI 9 DESS IAS Année Les paragraphes < t i t l e > Paragraphes < / t i t l e > <h1> Les paragraphes < / h1> <h2> Une première s é r i e de paragraphes < / h2> <p> V o i c i donc un premier paragraphe. < / p> <p> V o i c i donc un second paragraphe. < / p> <h2> Une seconde s é r i e de paragraphes < / h2> <p> V o i c i un nouveau paragraphe. < / p> <p> V o i c i un d e r n i e r paragraphe. < / p> M. KRAJECKI 10 DESS IAS Année
6 Le résultat M. KRAJECKI 11 DESS IAS Année Lignes et sauts de lignes <br> : demande explicitement un saut de lignes au sein d un paragraphe <hr> : insertion des lignes horizontales < t i t l e > Lignes e t sauts de l i g n e s < / t i t l e > <h1> Lignes < / h1> <p> Un paragraphe avant l a l i g n e h o r i z o n t a l e. < / p> <hr> <p> V o i c i un paragraphe <br> dans l e q u e l on a <br> i n s é r é des sauts de l i g n e s. < / p> M. KRAJECKI 12 DESS IAS Année
7 Listes descriptives Les listes descriptives permettent un affichage de type dictionnaire Le mot clé est placé sur la première ligne, la définition correspondante est placée sur les lignes suivantes. < t i t l e > D e s c r i p t i o n s < / t i t l e > <h1> Glossaire < / h1> < d l > < d t > Premier terme : < / d t > <dd> l a d e s c r i p t i o n du premier terme. < / dd> < d t > Second terme : < / d t> <dd> l a d e s c r i p t i o n du second terme. < / dd> < / d l > M. KRAJECKI 13 DESS IAS Année Le résultat M. KRAJECKI 14 DESS IAS Année
8 Listes non ordonnées Les listes à puces permettent de faire des énumérations < t i t l e > L i s t e non ordonnée < / t i t l e > <h1> L i s t e < / h1> <ul> < l i > première entrée ; < / l i > < l i > seconde entrée ; < / l i > < l i > t r o i s i è m e entrée. < / l i > < / ul> M. KRAJECKI 15 DESS IAS Année Listes ordonnées Les liste ordonnées permettent de définir une hiérarchie dans la liste en numérotant chacun des éléments < t i t l e > L i s t e ordonnée < / t i t l e > <h1> L i s t e < / h1> <ol> < l i > Première entrée. < / l i > < l i > Seconde entrée. < / l i > < l i > Troisième entrée. < / l i > < / ol> M. KRAJECKI 16 DESS IAS Année
9 Le résultat M. KRAJECKI 17 DESS IAS Année MISE EN PAGE Mise en page des : textes et polices de caractères paragraphes Utilisation d attributs : ou de commutateurs associés à une balise modifient les propriétés de la balise M. KRAJECKI 18 DESS IAS Année
10 MISE EN FORME DES TEXTES Chaque phrase, mot ou caractère composant un paragraphe peut être mis en forme individuellement à l aide des quatre balises suivantes : caractères gras <b> et </b> caractères italiques <i> et </i> caractères soulignés <u> et </u> caractères «Télétypes» <tt> et </tt> M. KRAJECKI 19 DESS IAS Année MISE EN FORME DES TEXTES < t i t l e > Mise en forme des t e x t e s < / t i t l e > <h1> Mise en forme des t e x t e s < / h1> <p> Le HTML permet de d é f i n i r des caractères en <b> gras < / b>, en < i > i t a l i q u e < / i >, en <u> souligné < / u> mais aussi en < t t > t é l é t y p e < / t t >. < / p> <p> On peut t o u t <b>mé< / b>< i > l a < / i > <u>ng< / u>< t t >er< / t t >. < / p> M. KRAJECKI 20 DESS IAS Année
11 Et voila M. KRAJECKI 21 DESS IAS Année LES CARACTÈRES ACCENTUÉS ET SPÉCIAUX Les caractères présents dans un fichier au format HTML sont codés sur seulement 7 bits Il est donc possible de coder 128 ( ) caractères Un ensemble de codes permettant d utiliser les caractères accentués Les accents aigu, grave, circonflexe et les trémas sont définis respectivement par les séquences de codes &cut ;, &grave ;, &circ ; et ¨ ; Accentuer une lettre : la faire précéder par l accent, par exemple à ; pour à L ensemble des codes associés aux caractères est précisé dans la table des codes ISO également appelée table ISO-Latin1 M. KRAJECKI 22 DESS IAS Année
12 Les principaux codes Séquence Code ISO-Latin1 Caractère ou symbole à ; à ; à â ; â ; â è ; è ; è é ; é ; é ê ; ê ; ê ë ; ë ; ë î î ; î ï ; ï ; ï ù ; ù ; ù ü ; û ; ü < ; ‹ ; < > ; › ; >   ;   ; espace insécable M. KRAJECKI 23 DESS IAS Année Un petit exemple < t i t l e > U t i l i s a t i o n des accents dans un document HTML < / t i t l e > <h1> Accentuation de l a l e t t r e e < / h1> <p> V o i c i un e accent aigü obtenu de deux façons d i f f é r e n t e s : & # ; e t & eacute ; < / p> <h1> Quelques symboles < / h1> <p> Le symbole < i > plus ou moins < / i > : & # ; e t & plusmn ; < / p> <p> Le < i > c o p y r i g h t < / i > : & # ; e t & copy ; < / p> M. KRAJECKI 24 DESS IAS Année
13 Le résultat M. KRAJECKI 25 DESS IAS Année LES PARAGRAPHES La liste suivante présente quelques balises permettant le formatage de paragraphes de façon automatique : citation (références d un ouvrage) <cite> et </cite> citation (texte extrait d un ouvrage) <blockquote> et </blockquote> adresse <address> et </address> M. KRAJECKI 26 DESS IAS Année
14 LES PARAGRAPHES La liste suivante présente quelques balises permettant le formatage d une partie d un paragraphe : mise en valeur (italique) <em> et </em> mise en valeur (gras) <strong> et </strong> texte préformaté <pre> et </pre> placer un texte en exposant <sup> et </sup> placer un texte en indice <sub> et </sub> M. KRAJECKI 27 DESS IAS Année Un exemple < t i t l e > Mise en page de paragraphes < / t i t l e > <h1> Mise en page de paragraphes < / h1> <p> Les paragraphes s u i v a n t s sont formatés à l aide des b a l i s e s s p é c i a l i s é e s. < / p> <blockquote> Rien n est moins sûr que l i n c e r t a i n. < / blockquote> < c i t e > P i e r r e Dac < / c i t e > <address> Mr HTML, rue du WEB< / address> M. KRAJECKI 28 DESS IAS Année
15 ATTRIBUTS DES BALISES POUR LA MISE EN PAGE Les commutateurs permettent de modifier localement certaines propriétés associées aux éléments définis De façon générale La structure d une balise utilisant des commutateurs est la suivante : <balise commutateur1="valeur1" commutateur2="valeur2"> éléments </balise>. Exemple : <p align="right"> du texte </p>. Une liste complète des attributs définis en HTML 4 est disponible en annexe de la spécification de HTML 4 (index of the HTML 4 Attributes, pages ) La spécification produite par la W3C est disponible en ligne à l adresse M. KRAJECKI 29 DESS IAS Année GESTION DES POLICES DE CARACTÈRES La balise font permet de définir les principales caractéristiques de la police de caractères utilisée Chaque navigateur définit une police de caractères par défaut (généralement la police times Exemple : <font face= lucida, arial > De préférence : times, arial, helvetica Définir la taille de la police de caractères (valeur comprise entre 1 et 7) : 1. De façon absolue : vous indiquez directement la taille à utiliser par une valeur comprise entre 1 et De façon relative : vous précisez une taille par rapport à la valeur courante. Ainsi, si vous souhaitez diminuer la taille de 1, il vous suffit de préciser la valeur -1 pour l attribut size. De même, pour augmenter la taille de 2, précisez <font size= +2 >. M. KRAJECKI 30 DESS IAS Année
16 Les couleurs Définition d une couleur en précisant son code RGB (Red Green Blue) La couleur est définie par l intensité des trois couleurs primaires (rouge, vert et bleu) Chaque intensité est exprimée par une valeur comprise entre 0 et 255 codée en base 16 La couleur rouge a pour code #FF0000 : 1. l intensité du rouge est maximale, elle a pour valeur 255, soit #FF ; 2. l intensité du vert, comme celle du bleu, est nulle, soit #00 ; 3. la couleur est alors définie par la concaténation de ces 3 valeurs, soit #FF0000. M. KRAJECKI 31 DESS IAS Année Définition de la couleur Couleur Valeur RGB Couleur Valeur RGB aqua #00FFFF black # blue #0000FF fuchsia #FF00FF gray # green # lime #00FF00 maroon # navy # olive # purple # red #FF0000 silver #C0C0C0 teal # yellow #FFFF00 white #FFFFFF M. KRAJECKI 32 DESS IAS Année
17 Les couleurs Il est possible de définir la couleur des liens hypertextes (normaux, actifs, et déjà visités) et du fond de la page Modification des différents attributs de la balise : bgcolor : définit la couleur du fond de la page. link : l attribut link définit la couleur des liens par défaut. Par exemple, pour obtenir des liens affichés en jaune, nous précisons : <body link= yellow >. vlink : définit la couleur des liens déjà visités. alink : définit la couleur du lien actif : couleur affichée quand l internaute clique sur un lien. M. KRAJECKI 33 DESS IAS Année Un exemple < t i t l e > Les couleurs < / t i t l e > <body bgcolor= " yellow " t e x t= " red " l i n k = " green " > <h1> U t i l i s a t i o n des couleurs < / h1> <p> Par défaut, l e t e x t e est a f f i c h é en rouge. < / p> <h1> Les l i e n s < / h1> <p> <font color =" blue " > l a couleur c h o i s i e pour l e s l i e n s est l e v e r t. V o i c i un exemple : <a href= " h t t p : / / www. google. f r " > Google < / a>. < / font> < / p> M. KRAJECKI 34 DESS IAS Année
18 3. LIENS ET ANCRES La balise <a> et </a> permet de définir une ancre, c est à dire un point d origine Une action est associée à cette balise : déplacement vers un autre site, un déplacement vers une autre page du même site ou un déplacement à l intérieur de la page actuelle Cette balise n est jamais utilisée sans commutateur Lien hypertexte : commutateur href (de l anglais Hypertext REFerence) de la balise <a> M. KRAJECKI 35 DESS IAS Année Liens vers un autre document HTML La structure d un lien est la suivante : <a href="adresse"> le texte associé </a>. Exemple : <a href="http :// vers google </a> Adresse complète, complètement définie par trois informations : 1. Le nom du serveur. 2. Le chemin du répertoire qui contient la page sur le serveur. 3. Le nom de la page. M. KRAJECKI 36 DESS IAS Année
19 Liens vers une page hébergée localement 2 possibilités : Définir un lien vers une adresse complète (comme précédemment) Utiliser une adresse incomplète (sans préciser le nom du serveur Web) sous la forme d un lien relatif Exemple : <a href="lapage.html"> vers une autre page </a> Ou bien : <a href="ssrep/lapage.html"> vers une autre page </a> Une troisième solution à proscrire : le lien absolu. M. KRAJECKI 37 DESS IAS Année Liens vers un signet du même document Se déplacer au sein d un même document Pour définir un lien interne, 2 ancres sont nécessaires : 1. une ancre sera utilisée pour définir le lien hypertexte 2. l autre pour définir la destination de ce lien (appelée également ancre nommée) la valeur associée à href est la valeur de name de l ancre nommée, précédée du symbole # Ce symbole permet d indiquer au navigateur que l on reste dans la même page. M. KRAJECKI 38 DESS IAS Année
20 Un exemple < t i t l e > Liens i n t e r n e s < / t i t l e > <a name= " debut " > <h1> Liens i n t e r n e s < / h1> < / a> <h2> Sommaire < / h2> <ul> < l i > <a href= " #premier " > premier paragraphe < / a> < / l i > < l i > <a href= " #second " > second paragraphe < / a> < / l i > < / ul> <p> Du t e x t e < / p> <p> Du t e x t e < / p> <p> Du t e x t e < / p> <a name= " premier " > <p> V o i c i l a première d e s t i n a t i o n. < / p>< / a> <p> Du t e x t e < / p> <p> Du t e x t e < / p> <p> Du t e x t e < / p> <a name= " second " > <p> V o i c i l a seconde d e s t i n a t i o n. < / p>< / a> <a href= " #debut " > r e t o u r au début < / a> M. KRAJECKI 39 DESS IAS Année LES IMAGES La balise d inclusion d images est la balise <img> 1 attribut obligatoire : src (pour source) <img src= [URL]/[chemin]/nom du fichier > Une adresse complète, un chemin relatif ou bien un chemin absolu (à éviter) Format Gif ou Jpeg alt définit une légende pour l image M. KRAJECKI 40 DESS IAS Année
21 Taille des images < t i t l e > Des images < / t i t l e > <h1> Des images < / h1> <img src= " image. g i f " width= " 100 " height= " 100 "> M. KRAJECKI 41 DESS IAS Année POSITIONNEMENT DE TEXTES AVEC DES IMAGES align : alignement vertical Les valeurs : top, bottom ou middle Du texte autour d une image : les valeurs right ou left Commutateurs hspace et vspace : marge verticale et horizontale M. KRAJECKI 42 DESS IAS Année
22 DES IMAGES ET DES LIENS < t i t l e > Des images et des l i e n s < / t i t l e > <h1> Une image comme o r i g i n e d un l i e n hypertexte < / h1> <a href= " h t t p : / / www. google. f r "> <img src= " image. jpg "> < / a> M. KRAJECKI 43 DESS IAS Année
.. 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
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
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
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
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,
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.
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,
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
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,
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
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
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
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
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
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
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
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
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
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
COMMENT PUBLIER SUR ARIANE?
COMMENT PUBLIER SUR ARIANE? Rédacteur : Dr Michel Arnould 1. SOMMAIRE 1.Sommaire...1 2.Connexion...1 3.Gestion des pages du wiki...1 Ajouter une nouvelle page...1 Supprimer, renommer, protéger une page...1
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...
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
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
BUREAUTIQUE. 1 Journée. Maîtriser les fonctions de base du logiciel
BUREAUTIQUE Maîtriser les fonctions de base du logiciel Premiers pas dans Word - Présentation de l interface - Mode affichage écran - Méthode de Sélection, de Déplacement - La gestion crante des documents
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,
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
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
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
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
Le référencement naturel
Le référencement naturel Phases essentielles Choix des mots-clés Où se référencer : moteurs, annuaires Indexation des pages du site dans les moteurs Positionnement et trafic généré Optimisation des pages
GUIDE D UTILISATION DU BACKOFFICE
GUIDE D UTILISATION DU BACKOFFICE 1. Modifier les pages du site : - Aller dans l onglet «PAGE HTML», puis «Liste des pages HTML» - Pour visualiser votre page, cliquer sur le nom écrit en vert, dans la
Ecrire pour le web. Rédiger : simple, concis, structuré. Faire (plus) court. L essentiel d abord. Alléger le style. Varier les types de contenus
Ecrire pour le web Un texte web de lecture aisée pour l internaute, l est aussi pour les moteurs de recherche ; l écriture peut ainsi être mise au service du référencement naturel. De façon complémentaire,
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
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
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
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
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
Tutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog : http://formationlaragne.blogspot.fr/
Tutoriel BLOGGER Blogger est un outil Google gratuit de publication de blogs qui permet de partager du texte, des photos et des vidéos. C est un outil simple, bénéficiant du référencement de Google, ce
<Créer un site Web. avec/> Suzanne Harvey
aire l o c s texte n o c le Dans Suzanne Harvey Conseillère pédagogique en informatique Service local du RÉCIT Commission scolaire de Saint-Hyacinthe Québec, Canada suzanne.harvey@prologue.qc.ca
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?
// 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
Formation > Développement > Internet > Réseaux > Matériel > Maintenance
Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE
Comment bien référencer mes sites internet? Les 100 SECRETS EN VIDÉO
Comment bien référencer mes sites internet? Les 100 SECRETS EN VIDÉO éditions Page 2/14 A propos de l auteur... Souvent défini comme «sérial-créateur», Jean-Marie PÉRON est à l origine depuis 1992 d entreprises
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
Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014
Spétechs Mobile D e r n i è r e m i s e à j o u r : a o û t 2014 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail votre contact
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
Spétechs Mobile. Octobre 2013
Spétechs Mobile Octobre 2013 Appli ios Appli Android Site Mobile Les clicks URL Appli ios Créa en dur HTML5 Créa en dur Banner Interstitiel Interstitiel Vidéo Bouncing / traveling Image Bouncing / traveling
JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer!
JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer! 1 / Contexte L ordinateur La loi du nombre La numérisation = codage d une information en chiffres binaire : 0 1 («bit») 8 bits = 1 octet 1ko = 1024
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
Référencement Naturel ou SEO Search Engine Optimization
Agence Référencement R & WebMarketing www.1ere-position.fr Référencement Naturel ou SEO Search Engine Optimization 24 avril 2009 - SNPAR 1ère Position S.A. (siège social) Savoie Technolac - Alouette II
CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML
CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML A L'AIDE DU LOGICIEL LIBRE OFFICE Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte
GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL
GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL 1. Avant de commencer Il existe plusieurs éditeurs de pages Web qui vous permettent de construire un site Web. Nous vous conseillons toutefois de
clavier espagnol Figure 1 - deux types de claviers AZERTY ou QWERTY
Clavier (Keyboard) Résumé : Le clavier reste le périphérique d entrée fondamental de l ordinateur car il permet d introduire des caractères de façon simple. La maîtrise de son utilisation demeure donc
L informatique et la formation en direction des élus
L informatique et la formation en direction des élus ICE version 2.30 Edité le 30 juillet 2011 Référence Client :............ Votre Contact :............... INOVA3 Sarl au capital de 9200 Euros Siret 441761798
Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche?
9 Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche? Le trafic d un site internet Le référencement naturel Les freins
REFERENCEMENT NATUREL
Optimisation du contenu Web Développement du trafic de Qualité Augmentation de vos ventes en ligne Livre Blanc 13/03/2014 INTRODUCTION Vous cherchez à améliorer votre positionnement dans Google, garder
Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014
Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire
Le réseau Internet. Christian.Fondrat@dsi.univ-paris5.fr
Le réseau Internet Christian.Fondrat@dsi.univ-paris5.fr Un réseau Définition : Un réseau est un ensemble d ordinateurs connectés et qui communiquent entre eux. Classification : Réseau local (LAN = Local
L optimisation d une PowerBoutique pour le référencement
L optimisation d une PowerBoutique pour le référencement page 1/11 Tables des matières 1 Les balises de référencement...4 2 La hiérarchisation de l information...7 3 La mise en exergue des mots clés...7
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
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
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,
Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia -
UVERSITE A. MIRA - BEJAIA Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia - Prise en main de CMS Joomla Exploitation des ressources Recommandations et Règles
Premiers pas avec Dreamweaver
Premiers pas avec Dreamweaver Dreamweaver est un éditeur visuel professionnel pour la création et la gestion de pages web. Dreamweaver permet de créer aisément des pages compatibles avec toute une série
Spétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4
Spétechs Mobile D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail
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
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
Tutoriel : Créer un site web simple avec Composer. Fiche consigne Page 1 sur 6
1 Lancement du logiciel Composer Fiche consigne Page 1 sur 6 Cliquer sur l icône du bureau représenté en en-tête du présent document ou cherche le logiciel «Composer» dans le menu des programmes. 2 Création
Google Actualités. Propriétés techniques. Structure des URL
Si l efficacité des textes alliée au text appeal (pour reprendre l expression de Sébastien Billard) et à la quête de «l hypertextualité» est l apanage du rédacteur web, l optimisation du contenu favorise
Comment utiliser WordPress»
Comment utiliser WordPress» Comment utiliser WordPress» Table des matières» Table des matières Guide de démarrage rapide»... 2 Tableau de bord de WordPress»... 3 Rédiger un article»... 3 Modifier l article»...
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
Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall
Internet DNS World Wide Web Mécanismes de base Exécution d'applications sur le web Divers Proxy, fire-wall 1 Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet
Guide de création de site web optimisé
Guide de création de site web optimisé Vous trouverez ci-après un résumé des différents points à prendre en compte pour créer un site web optimisé pour les moteurs de recherche en termes de code HTML et
Rédigez efficacement vos rapports et thèses avec Word (2ième édition)
Introduction A. Introduction 11 B. Structure de l ouvrage 12 C. Le vocabulaire indispensable 13 1. La fenêtre de travail 13 2. Les boîtes de dialogue 15 3. Le mode connecté et le cloud computing 17 4.
SEO On-page. Avez-vous mis toutes les chances de votre côté pour le référencement de votre site?
SEO On-page Avez-vous mis toutes les chances de votre côté pour le référencement de votre site? I. Introduction... p.2 II. Optimisation on-page vs off-page... p.3 III. Les éléments importants de vos pages...
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,
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
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
CMS Modules Dynamiques - Manuel Utilisateur
CMS Modules Dynamiques - Manuel Utilisateur 1. Introduction Le modèle CMS Le modèle des «Content Management Systems» proposé par MUM est un type particulier de sites web dynamiques, ayant comme avantage
1. La notion de cascade
HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir
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
Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.
1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de
Editeur html Guide de l'utilisateur
Ti nymce Editeur html Guide de l'utilisateur Date : février 2012 Version 2.0 Doc ref. tinymce-userguide-2.0 1 Aperçu général Cette documentation est composée de deux documents : Une représentation graphique
Intégrer des médias. Plateforme e-tourisme. demo.minisites.encharentemaritime.com
demo.minisites.encharentemaritime.com Insérer des photos Illustrez vos contenus en intégrant Depuis la barre d administration Vous pouvez télécharger des fichiers depuis votre ordinateur ou choisir des
Référencement de votre site Web Google et autres moteurs de recherche (4ième édition)
Chapitre 1 : Introduction A. Google, l incontournable... 15 B. Référencement : Panda et Penguin sont passés par là... 16 C. SEO/SMO 17 D. Propos du livre 18 E. Avant de commencer 19 F. Notre exemple d'illustration
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
Création WEB avec DreamweaverMX
Creation Web avec DreamweaverMX MX Initiation Sommaire.preparation.mise en forme.liens hypertextes.images.liens sur images.images avec zones sensibles.images survolees.liens de type courriel.apercu dans
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
Atelier E-TOURISME 2013. Optimiser la visibilité de son site sur les moteurs de recherche. ecotourismepro.jimdo.com
Atelier E-TOURISME 2013 Optimiser la visibilité de son site sur les moteurs de recherche ecotourismepro.jimdo.com Optimiser la visibilité de son site sur les moteurs de recherche Audrey Piquemal Chargée
Soyez accessible. Manuel d utilisation du CMS
Soyez accessible. Manuel d utilisation du CMS Nameo : mode d emploi Nameo est une agence web basée en Alsace, à Strasbourg. Son champ d action : création ou refonte de sites internet, stratégie et mise
MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA
MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA OBJECTIFS : manipuler les fenêtres et l environnement Windows, gérer ses fichiers et dossiers, lancer les applications bureautiques présentes sur son poste. PUBLIC
ARIA Languedoc-Roussillon. Atelier Internet «Le référencement et les autres outils webmarketing»
ARIA Languedoc-Roussillon Atelier Internet «Le référencement et les autres outils webmarketing» Patricia PINGLOT, UP2 & Guilhem GLEIZES, Cibleweb - 02 décembre 2008 - En collaboration avec le cabinet UP2
Troisième projet Scribus
Sommaire 1. Réponse à la question du deuxième projet... 2 2. Présentation du projet... 2 2.1. Organiser son travail... 2 3. Réalisation... 2 3.1. Préparation du texte... 2 3.1.1. Les styles «Dys»... 3
Cahier des charges pour la création du site http://jrmasters.univ-toulouse.fr sous DRUPAL
Document à diffusion restreinte Date : janvier 2010, MAJ février 2010 Rédacteurs : CAPLAN Emmanuelle, RAFENOMANJATO Jean Service Communication et Département Formation et Vie Étudiante Établissement :
Rédiger pour le web. Objet : Quelques conseils pour faciliter la rédaction de contenu à diffusion web
Rédiger pour le web Objet : Quelques conseils pour faciliter la rédaction de contenu à diffusion web Sommaire 1. Rédiger des contenus... 2 Lire à l écran : une lecture contraignante... 2 Ecrire des phrases
Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?
![Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?](/thumbs/18/825045.jpg "Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?")
Aide [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers? Au sein d'un ordinateur, les données et les fichiers sont stockés suivant une structure d'arbre appelée arborescence. Pour
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
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
Comment faire un site i-mode?
Comment faire un site i-mode? "i-mode et le logo i-mode sont des marques déposées ou enregistrées par NTT DoCoMo, Inc. au Japon et dans d'autres pays." 2004 Bouygues Telecom. Ce document est la propriété