Premiers pas en HTML, CSS et jquery
|
|
|
- Jean-Jacques Beaudry
- il y a 8 ans
- Total affichages :
Transcription
1 2 Premiers pas en HTML, CSS et jquery Arrivé à ce point dans la lecture de l ouvrage, vous êtes en mesure de créer un squelette HTML5 standard, de définir des règles de mise en forme CSS (directement dans les balises, dans une feuille de styles interne ou externe) et d invoquer la bibliothèque jquery. Bien que nécessaires, ces connaissances ne sont pas encore suffisantes pour créer des pages Web dignes de ce nom. Ce deuxième chapitre va enrichir votre connaissance des trois langages et vous permettre de faire vos premiers pas en solo. Tournez vite les pages. Les bases du HTML Vous vous en doutiez, votre apprentissage va commencer par le langage HTML. Ceci est tout à fait logique puisque c est ce langage qui permettra de construire les fondations de vos pages Web. Textes, sauts de ligne et paragraphes Les éléments textuels insérés dans le corps du document, c est-à-dire entre les balises <body> et </body>, sont affichés tels quels dans le navigateur. Il est inutile d insérer plusieurs sauts de ligne et/ou plusieurs espaces dans le texte : Les sauts de ligne (simples ou multiples) seront purement et simplement éliminés lors de l interprétation du code dans le navigateur. Les espaces multiples seront remplacées par une espace simple lors de l interprétation du code dans le navigateur. Examinez le code suivant : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>espaces et sauts multiples</title> </head> <body>
2 Ce texte est volontairement écrit sur plusieurs lignes et sont insérées </body> </html> de multiples espaces entre les mots D après vous, comment sera affiché ce texte dans le navigateur? Jetez un œil à la Figure 2.1 pour constater à quel point votre navigateur peut manquer de discernement! Figure 2.1 Les espaces multiples et les sauts de ligne sont ignorés. Pour indiquer au navigateur que vous voulez passer à la ligne, vous utiliserez la balise <br> (pour break, ou saut de ligne). Si vous voulez que vos espaces multiples soient également prises en considération, vous les remplacerez par autant d entités que nécessaire. Le code précédent est donc corrigé comme ceci : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>espaces et sauts multiples</title> </head> <body> Ce texte est volontairement écrit sur<br> <br> <br> plusieurs lignes et de multiples espaces<br> sont insérées entre les mots </body> </html> Comme le montre la Figure 2.2, cette fois-ci, les espaces et les sauts de ligne sont bien interprétés. Figure 2.2 Le navigateur se comporte bien lorsqu on lui parle correctement. 22 Chapitre 2
3 Pour terminer cette section, sachez que vous pouvez également utiliser la balise <p></ p> pour créer des paragraphes. À titre d exemple, si vous insérez ces trois lignes de code entre les balises <body> et </body> d un squelette standard, vous obtenez le résultat représenté à la Figure 2.3 : <p>ceci est un premier paragraphe.</p> <p>ceci est un deuxième paragraphe.</p> <p>et ceci est un troisième paragraphe.</p> Figure 2.3 Contrairement aux sauts de ligne <br>, un espace supplémentaire est inséré entre chaque paragraphe. Info En utilisant des règles CSS simples, il est possible de définir la taille des espaces affichés avant et après un paragraphe. Titres et sous-titres sur une page Lorsque vous saisissez le contenu d une page Web, il est bon de le structurer en utilisant des balises de titre. Six niveaux de titre sont possibles : <h1></h1> à <h6></h6>. La Figure 2.4 montre comment est interprété ce code dans un navigateur : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>titres h1 à h6</title> </head> <body> <h1>ceci est un titre h1</h1> <h2>ceci est un titre h2</h2> <h3>ceci est un titre h3</h3> <h4>ceci est un titre h4</h4> <h5>ceci est un titre h5</h5> <h6>ceci est un titre h6</h6> </body> </html> Premiers pas en HTML, CSS et jquery 23
4 Figure 2.4 Les six niveaux de titre du HTML. Le texte inséré dans une balise de titre est important pour les personnes qui lisent la page Web, mais également pour les moteurs de recherche qui référencent la page. Il est donc important de choisir des titres en accord avec le contenu de chaque section. Mettre en valeur du texte avec des balises HTML Selon le W3C : "La balise <b></b> représente maintenant une portée de texte à déporter stylistiquement de la prose normale sans transmettre d importance en plus, telle que les mots-clés dans un résumé de document, des noms de produits dans un article, ou d autres portées de texte dont la présentation typographique typique est en gras." Toujours selon le W3C : "La balise <strong> représente maintenant l importance plutôt que la forte emphase." Après avoir lu et relu cette prose, vous pouvez comprendre si je ne m abuse que la balise <b> met en avant de façon modérée une portion de texte. Vous utiliserez la balise <strong> pour mettre en avant un texte plus important. Quant à la balise <i>, elle met en italique une portion de texte sans toutefois la mettre en avant. Elle sera utilisée pour afficher des termes techniques, des pensées, des désignations taxonomiques, des expressions idiomatiques, etc. Pour mettre en avant un texte affiché en italique, vous utiliserez la balise <em>. Tapez ce code entre les balises <body> et </body> et exécutez-le. Vous devriez obtenir le résultat représenté Figure 2.5 : <p><b>ce texte est affiché en gras mais n est pas mis <p><strong>ce texte est affiché en gras et est mis en <p><i>ce texte est affiché en italique mais n est pas <p><em>ce texte est affiché en italique et est mis en en avant</b></p> avant</strong></p> mis en avant</i></p> avant</em></p> Figure 2.5 Visuellement, aucune différence entre b et strong ni entre i et em. 24 Chapitre 2
5 Comme vous pouvez le voir, les balises <b> et <strong> produisent le même effet dans le navigateur. Il en va de même pour les balises <i> et <em>. Dans ce cas, pourquoi HTML5 propose-t-il plusieurs balises pour obtenir le même résultat? Cette distinction est importante pour la deuxième audience de vos pages. Entendez par là les robots qui parcourent le Web à des fins d indexation. Ces programmes n ont que faire de l aspect visuel d une page. Pour eux, ce qui importe, c est le "poids" des mots utilisés. Ainsi, vous utiliserez les balises <strong> et <em> si vous voulez mettre en avant un mot ou un bloc de texte tout en modifiant son allure. En revanche, vous utiliserez les balises <b> et <i> si vous ne voulez faire passer aucun message aux robots d indexation. Pour différencier un mot visuellement (et non sémantiquement), vous pouvez également : le souligner en l entourant des balises <u> et </u> ; le surligner en l entourant des balises <mark> et </mark> ; l afficher en caractères de petite taille, en l entourant des balises <small> et </ small>. Tapez ce code entre les balises <body> et </body> et exécutez-le. Vous devriez obtenir le résultat représenté Figure 2.6 : <p><mark>ce texte est marqué</mark></p> <p><u>ce texte est souligné</u></p> <p><small>ce texte est affiché en caractères de petite taille</small></p> Figure 2.6 D autres formes de différenciation. Listes à puces et listes numérotées Les listes à puces et les listes numérotées sont monnaie courante sur le Web. Elles permettent de créer des énumérations non chronologiques ou chronologiques. Dans le premier cas, les entrées de la liste sont précédées d un tiret, d une puce ou d un autre caractère. Dans le second cas, les entrées de la liste sont précédées d un nombre croissant, ce qui leur confère un aspect temporel. Une liste à puces est délimitée par les balises <ul> et </ul> (ul est l abréviation de unordered list, soit en français "liste non ordonnée"). Chaque élément de la liste est délimité par les balises <li> et </li> (voir Figure 2.7) : <ul> <li>premier</li> <li>deuxième</li> <li>troisième</li> <li>quatrième</li> </ul> Premiers pas en HTML, CSS et jquery 25
6 Figure 2.7 Une liste à puces. Une liste numérotée est délimitée par les balises <ol> et </ol> (ol est l abréviation de ordered list, soit en français "liste ordonnée"). Chaque élément de la liste est délimité par les balises <li> et </li> (voir Figure 2.8) : <ol> <li>premier</li> <li>deuxième</li> <li>troisième</li> <li>quatrième</li> </ol> Figure 2.8 Une liste numérotée. Il est possible d imbriquer plusieurs liste. Pour cela, il suffit d insérer une balise <ul> ou <ol> avant que la balise de la liste précédente (<ul> ou <ol>) n ait été fermée. À titre d exemple, le code suivant imbrique une liste numérotée dans une liste à puces, ellemême imbriquée dans une liste numérotée (voir Figure 2.9) : <ol> <li>entrée principale 1</li> <ul> <li>entrée secondaire 1</li> <li>entrée secondaire 2</li> <ol> <li>première entrée de niveau 3</li> <li>deuxième entrée de niveau 3</li> <li>troisième entrée de niveau</li> </ol> <li>entrée secondaire 3</li> </ul> <li>entrée principale 2</li> <li>entrée principale 3</li> </ol> 26 Chapitre 2
7 Figure 2.9 Trois listes imbriquées. Liens hypertexte La magie du Web tient en grande partie aux liens hypertexte : en définissant des liens sur vos pages, il est possible de renvoyer l utilisateur vers une page de votre site ou vers une page hébergée à plusieurs milliers de kilomètres Les liens hypertexte sont définis avec la balise <a> : <a href="adresse">texte</a> Où adresse est l adresse de la page à atteindre et texte est le texte sur lequel l utilisateur cliquera pour accéder à la page visée. Par exemple, l instruction suivante permet de créer un lien hypertexte qui donne accès au site Web de Microsoft France (voir Figure 2.10) : <a href=" ici pour accéder au site de Microsoft</a> Figure 2.10 Un clic suffit pour accéder au site de Microsoft France. Premiers pas en HTML, CSS et jquery 27
8 Lien vers une partie spécifique d une page Lorsqu une page contient un grand nombre d informations, il peut être utile de marquer certains emplacements bien précis (des titres, par exemple) pour faciliter sa lecture. Vous pouvez alors vous déplacer rapidement vers les éléments marqués via un lien hypertexte. Pour marquer une balise quelconque, il suffit d y insérer un attribut id. Par exemple : <h2 id="marque">un titre</h2> Pour accéder à cet emplacement dans la page, vous devez définir un lien hypertexte qui pointe vers l identifiant, précédé d un caractère "#". Examinez ce code : <h2 id="haut">haut de la page</h2> <a href="#bas">accéder au bas de la page</a><br /> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. <h2 id="bas">bas de la page</h2> <a href="#haut">accéder au début de la page</a> Les ancres haut et bas sont définies au début et à la fin du document : <a name="haut" /> <a name="bas" /> Au début du document, un lien hypertexte fait référence à l ancre bas. Lorsque ce lien est cliqué, la partie inférieure du document s affiche dans le navigateur : <a href="#bas">accéder au bas de la page</a><br /> À la fin du document, un lien fait référence à l ancre haut. Lorsque ce lien est cliqué, la partie supérieure du document s affiche dans le navigateur : <a href="#haut">accéder au début de la page</a> Si vous voulez tester ce code, assurez-vous que tout le document ne puisse pas s afficher d une seule traite dans le navigateur. Dans ce cas, les liens hypertexte sembleraient n avoir aucun effet (voir Figure 2.11). Info Un peu plus haut, vous avez appris à créer des liens hypertexte vers des pages Web. En ajoutant des identifiants à certaines balises dans ces pages, vous pouvez créer des liens qui pointent vers ces identifiants depuis une autre page Web. Ainsi, si l identifiant partie2 a été défini dans la page introduction.htm, vous pouvez définir le lien suivant pour afficher la page introduction.htm et décaler l affichage jusqu à la balise d id partie2 : <a href="introduction.htm#partie2">cliquez ici pour afficher la partie 2 de l introduction</a> 28 Chapitre 2
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
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.
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
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
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
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
ANGULAR JS AVEC GDE GOOGLE
ANGULAR JS AVEC GDE GOOGLE JUIN 2015 BRINGING THE HUMAN TOUCH TO TECHNOLOGY 2015 SERIAL QUI SUIS-JE? ESTELLE USER EXPERIENCE DESIGNER BUSINESS ANALYST BRINGING THE HUMAN TOUCH TO TECHNOLOGY SERIAL.CH 2
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
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
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
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
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,
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.
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,
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
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
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
< 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
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
SII Stage d informatique pour l ingénieur
SII Stage d informatique pour l ingénieur Création d un site Web École nationale supérieure de techniques avancées SII Stage d informatique pour l ingénieur 1 / 15 L informatique et le temps qui passe...
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
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...
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...
demander pourquoi mon site n'apparaît pas sur google ou pourquoi mon site n'est pas référencé par les moteurs de recherche?
50 questions essentielles à vous poser avant la mise en ligne de votre site pour ne plus vous demander pourquoi mon site n'apparaît pas sur google ou pourquoi mon site n'est pas référencé par les moteurs
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
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
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...
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
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.
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
L envoi d un formulaire par courriel. Configuration requise... 236 Mail Texte... 237 Mail HTML... 242 Check-list... 248
L envoi d un formulaire par courriel Configuration requise... 236 Mail Texte... 237 Mail HTML... 242 Check-list... 248 Chapitre 9 L envoi d un formulaire par courriel L envoi par courriel d informations
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
Site web «Savoirs CDI» Création des pages et saisie des contenus
Date : version 1 : 31.10.2008 Site web «Savoirs CDI» Création des pages et saisie des contenus BONNIN Julia à Auteurs Savoirs CDI THIBAUD François Objet Guide de saisie (backoffice TYPO3) des contenus
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
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,
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
Sélection d un moteur de recherche pour intranet : Les sept points à prendre en compte
Sélection d un moteur de recherche pour intranet : Les sept points à prendre en compte 1Les bases : vos objectifs 2 Sélection d un moteur de recherche pour intranet : Les sept points à prendre en compte
COMMENT OPTIMISER SON RÉFÉRENCEMENT NATUREL?
LAD C. MENES / Shutterstock COMMENT OPTIMISER SON RÉFÉRENCEMENT NATUREL? Février 2014 Loire-Atlantique développement - Direction de l'action touristique - 1 1. DÉFINIR DES MOTS ET EXPRESSIONS CLÉS PERTINENTS
Configuration de GFI MailArchiver
Configuration de GFI MailArchiver Introduction à la configuration Après l installation de GFI MailArchiver, vous pourrez commencer la configuration de l interface Web et terminer la configuration de GFI
Point 3.7. Publier des contenus dans un portail e-sidoc. Janvier 2013 Documentation détaillée V 2.2
Point 3.7 Publier des contenus dans un portail e-sidoc Janvier 2013 Documentation détaillée V 2.2 INTEGRER DES DOCUMENTS (TEXTES, VIDEOS, IMAGES) SUR UN PORTAIL E-SIDOC... 2 Savoir utiliser l éditeur wysiwyg
Créer son site internet avec Jimdo. Web business
Créer son site internet avec Jimdo Web business Créer vous-même votre site internet avec Jimdo. En quelques clics, vous pourrez créer gratuitement un site dédié à votre activité et donnez de la visibilité
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
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
PARTAGER UN ANNUAIRE COLLECTIF DE SIGNETS AVEC DEL.ICIO.US
PARTAGER UN ANNUAIRE COLLECTIF DE SIGNETS AVEC DEL.ICIO.US Introduction Pourquoi utiliser DEL.ICIO.US? Cet outil permet à plusieurs personnes de partager la même liste de sites favoris et ce sur n importe
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...
Cégep de Saint Laurent Direction des communications et Direction des ressources technologiques. Projet WebCSL : Guide de rédaction web
Cégep de Saint Laurent Direction des communications et Direction des ressources technologiques Projet WebCSL : Laurence Clément, conseillère en communication édimestre Marc Olivier Ouellet, webmestre analyste
Référencement Vendredi 4 Juillet Ile Degaby
Donnez un second souffle à votre e-commerce Référencement Vendredi 4 Juillet Ile Degaby Nicolas Viron / Laurent Bizot Introduction Attente : Comment référencer son site? Thème : Fonctionnement du référencement
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
Plan. Traitement de texte et PAO 4/10/06. Initiation à Word 2002 1
Plan Initiation A Microsoft Word 2002 Quelques grandes fonctionnalités Comment se présente Microsoft Word La mise en page La typographie Lettrines, puces et illustrations Créer des tableaux Ecrivez sans
Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.
Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le
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
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
Formation Créateur de site web e-commerce Certifiant
Formation Créateur de site web e-commerce Certifiant La formation «Créateur de site web et e-commerce» vous permet sur une période courte, en stage intensif, de vous initier aux fondamentaux de la communication
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
Table des matières & Index Partie première : Table des matières Jean-Yves Lucca
& Index Partie première : Jean-Yves Lucca Première édition du 14 novembre 2005 Version du 10 mai 2012 réalisée avec AOO 3.4.0 Le site du Forum francophone OpenOffice.org http://user.services.openoffice.org/fr/forum/
Services bancaires par Internet aux entreprises. Guide pratique pour : Rapports de solde Version 8.05.22
Services bancaires par Internet aux entreprises Guide pratique pour : Rapports de solde Version 8.05.22 Table des matières Avez-vous besoin d aide?... 3 Exigences informatiques... 4 Navigateurs acceptés...
StarDraw, le module de dessin de StarOffice 6/7
Pour commencer 1. Les aides de StarDraw a) Les Infobulles ou les Infoballons : en survolant quelques instants une icône (ou une rubrique d'un menu déroulant si l'option Infoballons est activée) avec le
Animation numérique. de territoire. Créer son site Internet avec un outil gratuit. Mardi 4 novembre 2014. Cédric ARNAULT OT Lourdes
Créer son site Internet avec un outil gratuit Mardi 4 novembre 2014 Cédric ARNAULT OT Lourdes Présentation de la journée - Créer un site Internet : Pourquoi? Pour qui? Comment? - - Aller plus loin avec
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
La coopération dans un contexte de recherches doctorales Cooperation amongst PhD researchers. Josée Charbonneau Anne- Marie Merrien 28 mai 2014
La coopération dans un contexte de recherches doctorales Cooperation amongst PhD researchers Josée Charbonneau Anne- Marie Merrien 28 mai 2014 Pourquoi sommes- nous ici? Étudiantes au doctorat, bourse
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,
Optimiser le référencement naturel de son site web
Rodez, le 15 avril 2011 Les moteurs de recherche Les moteurs utilisés dans le monde Les moteurs utilisés en Europe Où clique un internaute? Référencement «payant» 35-40% des clics sur Google Référencement
Application Form/ Formulaire de demande
Application Form/ Formulaire de demande Ecosystem Approaches to Health: Summer Workshop and Field school Approches écosystémiques de la santé: Atelier intensif et stage d été Please submit your application
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.
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
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,
ECLIPSE ET PDT (Php development tools)
ECLIPSE ET PDT (Php development tools) Eclipse Eclipse est un IDE (Integrated Development Environment)).C estun projet de la Fondation Eclipse visant à développer tout un environnement de développement
mon site web via WordPress
mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications
Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES
Avant-propos Conçu par des pédagogues expérimentés, son originalité est d être à la fois un manuel de formation et un manuel de référence complet présentant les bonnes pratiques d utilisation. FICHES PRATIQUES
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
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
<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
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)
Programme d Accès Communautaire / Atelier 4 Initiation à Microsoft Excel PLAN DE COURS 3 MICROSOFT EXCEL 4 LANCER EXCEL 4
TABLE DES MATIÈRES PLAN DE COURS 3 MICROSOFT EXCEL 4 LANCER EXCEL 4 LE COMPAGNON OFFICE 4 Masquage ou affichage du Compagnon Office 4 Sélection d un autre Compagnon 4 APPRIVOISER EXCEL 5 Exercice no 1
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
Services bancaires par Internet aux entreprises. Guide pratique pour : Transfert de fichiers Version 08.05.22
Services bancaires par Internet aux entreprises Guide pratique pour : Transfert de fichiers Version 08.05.22 Table des matières Introduction...3 Avez-vous besoin d'aide?... 3 Exigences informatiques...
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
Consignes générales :
PROCÉDURE POUR DÉPÔT DANS WEBCT Consignes générales : 1) Il est important de toujours conserver une copie de votre Webfolio ou Dossier professionnel sur votre disquette, clé USB ou sur votre disque dur
.. 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
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
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
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
Atelier du 25 juin 2012. «Les bonnes pratiques dans l e-mailing» Club
Atelier du 25 juin 2012 «Les bonnes pratiques dans l e-mailing» Agenda de l atelier Introduction et rappel des bonnes pratiques Exemple et retour d expérience Maison Tasset Partage d expérience entre les
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»...
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
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
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
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
Tour d horizon des CMS. Content Management System
Tour d horizon des CMS Content Management System Qu est ce qu un CMS? C est un Sytème de gestion de contenus Gestion dynamique de contenus en ligne Contenus suivant les standards du web Séparation du contenu,
Comment faire un Mailing A partir d une feuille Calc
Comment faire un Mailing A partir d une feuille Calc Diffusé par Le Projet Documentation OpenOffice.org Table des matières 1. Création de la base de données...3 2. Création de la lettre type...4 3. Fusion...5
Bonnes pratiques du Emailing
Bonnes pratiques du Emailing Guide pour les campagnes de Email Marketing Publi Lettre.com Sommaire 1 Introduction Créer ou louer une base d adresse emails La constitution du message Quelques tests pour
Formation GISEH Module rédacteur 7, 9 juin 5, 12 juillet 2011
Formation GISEH Module rédacteur 7, 9 juin 5, 12 juillet 2011 Formation GISEH rédacteur Jean-François NEDELEC 06/06/2011 Logiciels gestionnaires de contenu (de site web) GISEH : (version 2.4) Gestion de
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
Google Tag Manager v2 v1 dispo sur http://bit.ly/1adylb0 GTM pour les nuls dispo sur http://bit.ly/1fx5bgg
Google Tag Manager v2 v1 dispo sur http://bit.ly/1adylb0 GTM pour les nuls dispo sur http://bit.ly/1fx5bgg 45 minutes pour comprendre GTM et aller plus loin dans son utilisation Remerciements Merci aux
16 septembre 2013. Lundi de l Economie l. rencement. Foix. CCI Ariège
Lundi de l Economie l Numérique 16 septembre 2013 Lundi de l Economie l Numérique Le référencementr rencement Foix CCI Ariège Définition Référencement naturel Le référencement (SEO, Search Engine Optimization)