I ) L environnement de programmation HTML :
|
|
- Nicolas Alarie
- il y a 7 ans
- Total affichages :
Transcription
1 HTML5 COURS ET EXERCICES I ) L environnement de programmation HTML : - Ouvrir Notepad++ ( taper les trois lignes suivantes : Voici mon premier SITE Conception d une page WEB Utilisation HTML5 et CCS3 -Sauvegarder votre texte sous le nom exo1.html, dans un répertoire html5 (à créer) - Aller dans le répertoire html5, double cliquer sur exo1.html Voir l affichage du navigateur : Tout le texte s'affiche sur la même ligne alors qu'on avait écrit 3 lignes. En fait, pour créer une page web il ne suffit pas simplement de taper du texte comme on vient de le faire. En plus de ce texte, il faut aussi écrire ce qu'on appelle des balises, qui vont donner des instructions, comme "aller à la ligne", "afficher une image", etc. Les balises et leurs attributs Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher. Les balises se repèrent facilement. Elles sont entourées de "chevrons", c'est-à-dire des symboles < et >, comme ceci : <balise> Les balises indiquent la nature du texte autour d'elles. Elles veulent dire par exemple : "Ceci est le titre de la page", "Ceci est une image", "Ceci est un paragraphe de texte", etc. On distingue deux types de balises : les balises en paires et les balises orphelines. Les balises en paires Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent : <titre>conception SITE WEB</titre> On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises n'est pas un titre. Les balises orphelines Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur "Insère une image ici". Une balise orpheline s'écrit comme ceci :
2 <image /> Notez que le / de fin n'est pas obligatoire. On pourrait écrire seulement <image>. Néanmoins, pour ne pas confondre avec le premier type de balise, il est recommander de rajouter ce / (slash) à la fin de la balise Les attributs Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci : <balise attribut="valeur"> A quoi ça sert? Prenons la balise <image /> que nous venons de voir. Seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher : <image nom="photo.jpg" /> L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier photo.jpg. Dans le cas d'une balise fonctionnant "par paire", on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Voltaire : <citation auteur="voltaire"> Il faut s'instruire dans la gaieté. Le savoir triste est un savoir mort. </citation> Toutes les balises que nous venons de voir sont fictives. Les vraies balises ont des noms en anglais, nous allons les découvrir dans la suite de ce cours. II ) Structure de base d'une page HTML5 Copier le code source ci-dessous dans Notepad++. Ce code correspond à la base d'une page web en HTML5 : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>titre</title> </head> <body> </body>
3 </html> Les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise <html> est la première que l'on ouvre, et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). Les balises doivent être fermées dans le sens inverse de leur ouverture. Un exemple : <html><body></body></html> : correct. Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur. <html><body></html></body> : incorrect, les balises s'entremêlent. Le doctype Code : HTML <!DOCTYPE html> La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.elle commence par un point d'exclamation. La balise <html> Code : HTML <html> </html> C'est la balise principale du code. Elle englobe tout le contenu de votre page ; la balise fermante </html> se trouve tout à la fin du code! L'en-tête <head> et le corps <body> Une page web est constituée de 2 parties : L'en-tête <head> : cette section donne quelques informations générales sur la page, comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que l'en-tête contient ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes! Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code. L'encodage (charset) Code : HTML <meta charset="utf-8" /> Cette balise indique l'encodage utilisé dans votre fichier.html. L'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les
4 caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, symboles arabes, etc.). Il y a plusieurs techniques d'encodage aux noms bizarres utilisées en fonction des langues : ISO , OEM 775, Windows Un seul cependant devrait être utilisé aujourd'hui autant que possible : UTF-8. Cette méthode d'encodage permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues. Sous Notepad++, allez dans le menu Encodage > Encoder en UTF-8 (sans BOM) pour que votre fichier soit enregistré en UTF-8 dès le début. Cela ne s'applique qu'au fichier actuellement ouvert. Pour ne pas avoir à le faire pour chaque nouveau fichier, aller dans le menu Paramétrage > Préférences, onglet Nouveau document/dossier. Sélectionnez UTF- 8 sans BOM dans la liste. Le titre principal de la page Code : HTML <title> C'est le titre de votre page, probablement l'élément le plus important! Toute page doit avoir un titre qui décrit ce qu'elle contient. Il est conseillé que le titre soit assez court (moins de 100 caractères en général). Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez que le titre s'affiche dans l'onglet. Insérer un commentaire Un commentaire est une balise HTML avec une forme bien spéciale : Code : HTML - Sélectionner <!-- Ceci est un commentaire --> Vous pouvez le mettre où vous voulez au sein de votre code source : il n'a aucun impact sur votre page, mais vous pouvez vous en servir pour vous aider à vous repérer dans votre code source. Exemple : Créer le fichier Exo2.html Puis : <!DOCTYPE html> <html> <head> <!-- En tête de la page --> <meta charset="utf-8" /> <title>exo 2</title> </head> <body> <!-- Corps de la page --> </body>
5 </html> Les paragraphes Lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes. Le langage HTML propose justement la balise <p> pour délimiter les paragraphes. <p> signifie "Début du paragraphe" </p> signifie "Fin du paragraphe" Le contenu du site web est entre les balises <body></body>. Il nous suffit donc de mettre notre paragraphe entre ces deux balises, et nous aurons enfin notre première vraie page web avec du texte Créer le fichier Exo3.html Titre Utilisation des paragraphes, puis 5 paragraphes conception site web 1 trait horizontal Langages html et css Editeur de texte Navigateur double cliquer sur le fichier exo3 html Voir le résultat <br /> est une balise orpheline qui sert juste à aller à la ligne. Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe. Créer le fichier Exo4.html compléter le titre,,,et de saut de ligne puis 4 paragraphes conception site web saut de ligne sans utilisation de CMS 1 trait horizontal Langages html et css saut de ligne HTML version 5 saut de ligne CSS version 3 Editeur de texte saut de ligne Notepade++ saut de ligne Eclipse saut de lignenetbeans Voir le résultat : Les titres En HTML, on a le droit d'utiliser 6 niveaux de titres différents. : <h1> </h1> : En général, on s'en sert pour afficher le titre de la page. <h2> </h2> : signifie "titre important". <h3> </h3> : c'est un titre un peu moins important (on peut dire un "sous-titre" si vous voulez). <h4> </h4> : titre encore moins important. <h5> </h5> : titre pas important. <h6> </h6> : titre pas important du tout. La balise <title> affiche le titre de la page dans la barre de titre du navigateur.
6 Les titres <h1> servent à créer des titres qui seront affichés dans la page web. Créer le fichier Exo5.html Utilisez les balises h1, h2, h3 et compléter avec des paragraphes et des sauts de lignes Voir le résultat Les balises de mise en valeur Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et vous aimeriez les faire ressortir. HTML vous propose différents moyens de mettre en valeur le texte de votre page : <em> permet de mettre le texte en italique <strong> permet de mettre le texte en gras <mark> permet de surligner le texte Créer le fichier Exo6.html Utilisez les balises de mise en valeur Voir le résultat Les listes à puces Deux types de balises :Les listes à puces nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations. Nous allons découvrir ici deux types de listes à puces : Les listes non ordonnées <u> </u> Les listes ordonnées <ol> </ol> chaque élément de la liste est entouré par les balises <li> </li> Créer le fichier Exo7.html Utilisez ces balises Création des liens La balise <a> permet de créer un lien vers un site ou une page Pour créer un lien vers un site, exemple : <a href=" de framabee</a> Pour créer un lien vers une page exo4.html située dans le même répertoire que notre page courante : <a href="exo4">page exo4 </a> Pour créer un lien vers une page exo8.html située dans un dossier qui se trouve "avant" dans l arborescence, <a href="../exo8">page exo8 </a> Pour télécharger un fichier : <p><a href="moncv">télécharger le fichier</a></p> Envoyer un mail : <a href="mailto:aude,barthelemy@infini,fr">envoyez-moi un </a>
7 Créer le fichier Exo8.html Titre : Utilisation des liens Un lien vers une ancre Une ancre(label) est une sorte de point de repère que vous pouvez mettre dans vos pages HTML. En effet, si votre page est très grande il peut être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l'intéresse. Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple. Utilisez l'attribut id pour donner un nom à l'ancre. Cela servira ensuite à faire un lien vers cette ancre. Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. : Créer le fichier exo9.html Faire 3 ancrages Placer les ancres dans la page Faire les liens Vérifier Lien vers une ancre située dans une autre page : cherchez trouvez Les différents formats d'images Le JPEG Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. Ce format est conçu pour réduire la taille des photos, qui peuvent comporter plus de 16 millions de couleurs différentes. Les images JPEG sont enregistrées avec l'extension.jpg ou.jpeg. Le PNG Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est adapté à la plupart des graphiques (je serais tenté de dire "à tout ce qui n'est pas une photo"). Le PNG a deux gros avantages : il peut être rendu transparent et il n'altère pas la qualité de l'image. PNG 8 bits : 256 couleurs PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG) Le GIF C'est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par habitude). Aujourd'hui, le PNG est globalement bien meilleur que le GIF : les images sont le plus souvent plus légères et la transparence est de meilleure qualité. Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions de
8 couleurs). Néanmoins, le GIF conserve un certain avantage que le PNG n'a pas : il peut être animé. Insérer une image Revenons maintenant au code HTML pour découvrir comment placer des images dans nos pages web! Insertion d'une image Quelle est la fameuse balise qui va nous permettre d'insérer une image? Il s'agit de... <img/>! C'est une balise de type orpheline (comme <br />). Cela veut dire qu'on n'a pas besoin de l'écrire en deux exemplaires comme la plupart des autres balises que nous avons vues jusqu'ici. En effet, nous n'avons pas besoin de délimiter une portion de texte, nous voulons juste insérer une image à un endroit précis. La balise doit être accompagnée de 2 attributs obligatoires : src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un chemin en absolu (ex. : soit mettre le chemin en relatif (ce qu'on fait le plus souvent). Ainsi, si votre image est dans un sous- dossier images vous devrez taper : src="images/ilovespip.png" alt : cela signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (ça arrive), ou sur les navigateurs de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas "voir" l'image. Cela aide aussi les robots des moteurs de recherche pour les recherches d'images. Pour le logo, on mettrait par exemple : alt="logoilovespip". Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p></p>). Voici un exemple d'insertion d'image : <p> <img src="images/maphoto.jpg" alt=" Ma Photo" /> </p> Les figures (balise HTML5) Ce sont des éléments qui viennent enrichir le texte pour compléter les informations de la page. Les figures peuvent être de différents types : Images Codes source Citations... Bref, tout ce qui vient illustrer le texte est une figure. Nous allons ici nous intéresser aux images, mais contrairement à ce qu'on pourrait croire, les figures ne sont pas forcément des images : un code source aussi illustre le texte. Création d'une figure <figure> <img src="images/blocnotes.png" alt="bloc-notes" /> </figure>
9 Une figure est le plus souvent accompagnée d'une légende. Pour ajouter une légende, utilisez la balise <figcaption> à l'intérieur de la balise <figure>, comme ceci : <figure> <img src="images/blocnotes.png" alt="bloc-notes" /> <figcaption>le logiciel Bloc-Notes</figcaption> </figure>
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
Plus en détailHMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP
IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,
Plus en détailPHPWEBSITE -Tutoriel image
PHPWEBSITE -Tutoriel image La capture des images depuis le web pour mon site. L optimisation d images pour le web, 1 Préparer des images pour le Web A. Généralités 1. Les trois formats d'images sur le
Plus en détailProgrammation 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
Plus en détailTutoriel : Feuille de style externe
Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?
Plus en détailLicence 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
Plus en détailChapitre 22 Optimisation pour diffusion à l'écran, pour le web
1 1 9 9 7 7 Optimisation pour diffusion à l'écran, pour le web Diffusion pour le web........................ 31 Les paramètres avant l exportation................. 31 Optimisation pour le web......................
Plus en détail1 Comment faire un document Open Office /writer de façon intelligente?
1 Comment faire un document Open Office /writer de façon intelligente? 1.1 Comment fonctionne un traitement de texte?: les balises. Un fichier de traitement de texte (WRITER ou WORD) comporte en plus du
Plus en détailInitiation à html et à la création d'un site web
Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le
Plus en détailCréation de maquette web
Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte
Plus en détailGROUPE CAHORS EXTRANET
GROUPE CAHORS EXTRANET GUIDE UTILISATEUR Tous les utilisateurs de l Extranet s'engagent à ne pas divulguer, à l'extérieur de Groupe Cahors, les informations consultées ou collectées dans l'extranet. Cela
Plus en détailPack Fifty+ Normes Techniques 2013
Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié
Plus en détailHTML. Notions générales
1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS
Plus en détailAdministration 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
Plus en détailENVOI 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
Plus en détailBernard Lecomte. Débuter avec HTML
Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.
Plus en détailSOMMAIRE 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
Plus en détailCertificat Informatique et internet Niveau 1 TD D1. Domaine 1 : Travailler dans un environnement numérique évolutif. 1. Généralités : Filière
Certificat Informatique et internet Niveau 1 Filière TD D1 Domaine 1 : Travailler dans un environnement numérique évolutif Nom N étudiant 1. Généralités : 1.1. Un ordinateur utilise des logiciels (aussi
Plus en détailModules Prestashop - ExportCatalogue / EXPORT IMPORT POUR MODIFICATIONS EN MASSE DANS PRESTASHOP VERSION 2.0. 1 - Optim'Informatique
IMPORT / EXPORT POUR MODIFICATIONS EN MASSE DANS PRESTASHOP VERSION 2.0 1 - Optim'Informatique Installation INSTALLATION Pour installer le module ExportProduits copier le répertoire exportcatalogue dans
Plus en détailMAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4
MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...
Plus en détailUtilisation du logiciel Epson Easy Interactive Tools
Utilisation du logiciel Epson Easy Interactive Tools Ce logiciel permet d'utiliser le stylo electronique comme souris pour contrôler l'ordinateur depuis l'écran et comme feutre électronique pour écrire
Plus en détailSaisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont
I Open Boutique Sommaire : I Open Boutique... 1 Onglet «Saisie des Produits»... 3 Création d'une nouvelle fiche boutique :... 3 Création d'une nouvelle fiche lieux de retraits :... 10 Création d'une nouvelle
Plus en détaill'ordinateur les bases
l'ordinateur les bases Démarrage de l'ordinateur - Le bureau, mon espace de travail - J'utilise la souris - Ouvertes ou fermées, les fenêtres - Dans l'ordinateur, tout est fichier - Le clavier : écrire,
Plus en détailLES GRANDES ETAPES DE CREATION D UN WEB DESIGN
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations
Plus en détailNotice d'utilisation Site Internet administrable à distance
Notice d'utilisation Site Internet administrable à distance 1. Entrer dans l'espace d'administration Pour entrer dans l'espace d'administration, cliquez sur le lien nommé «administration» ou «Connexion»
Plus en détailGuide pour la réalisation d'un document avec Open Office Writer 2.2
Guide pour la réalisation d'un document avec Open Office Writer 2.2 1- Lancement de l'application : Le Traitement de textes de la Suite OpenOffice peut être lancé : soit depuis le menu «Démarrer / Programmes/OpenOffice2.2/Writer
Plus en détailESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE
ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Session découverte La Gestion des photos avec Windows Vista / Windows 7 et le traitements d images numériques 1 Généralités sur le jargon de l image numérique
Plus en détailTIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web
Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information
Plus en détailParcours guidé : créer des pages simples au format html avec Nvu 28/1/10
Table des matières 1. AVANT-PROPOS... 4 1.1. PRESENTATION DE NVU... 4 1.2. CARACTERISTIQUES PRINCIPALES DE NVU... 4 1.3. OBJECTIF DE CE DOCUMENT... 4 1.4. PRE-REQUIS NECESSAIRES... 4 1.5. MODE D'EMPLOI
Plus en détailUtilisation du visualiseur Avermedia
Collèges Numériques Utilisation du visualiseur Avermedia Un visualiseur est aussi appelé caméra de table et ce nom rend mieux compte de sa fonction première à savoir filmer un document (revue,carte, dissection,
Plus en détailPréparation d un post (article) pour idweblogs
Préparation d un post (article) pour idweblogs 30/09/2013 Préparation des documents... 2 Le texte... 2 Les images... 2 Les vidéos... 3 Transmission des documents à idweblogs... 4 Par mail... 4 Via notre
Plus en détailRendre un plan de cours interactif avec Médiator
Rendre un plan de cours interactif avec Médiator : L'ensemble de cette démarche consiste à réaliser une série de pages sous Médiator dans le but de créer une présentation intégrant les divers documents
Plus en détailFTP : File TRansfer Protocol => permets d envoyer des gros fichiers sur un serveur (ou de télécharger depuis le serveur)
Publication par FTP FTP : File TRansfer Protocol => permets d envoyer des gros fichiers sur un serveur (ou de télécharger depuis le serveur) Logiciels FTP nombreux (FileZilla, CuteFTP, WinSCP, FTP Expert).
Plus en détailClasser et partager ses photographies numériques
Classer et partager ses photographies numériques Ce tutoriel a pour objectif de vous donner les bases nécessaires au classement de vos photographies numériques, et de vous donner des moyens simples de
Plus en détailE-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le
Plus en détailRAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado
- RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et
Plus en détailFrontPage Support d apprentissage septembre 2000
FrontPage Support d apprentissage septembre 2000 Table des matières Notions de base... 1 Le langage HTML... 1 Les éditeurs HTML... 1 Le navigateur... 1 Le transfert de fichiers... 1 L enregistrement des
Plus en détailPARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION
PARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION Le but de l'utilisation de la console d'administration de votre adresse de messagerie "vendome.eu", est notamment de créer
Plus en détailLANGAGUE 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
Plus en détailÉditeur WordPress. Illustration 1. Kerniolen 56400 Pluneret Tel : 02 97 57 76 55 Mob : 06 11 33 30 11 info@formation-auray.fr www.formation-auray.
Kerniolen 56400 Pluneret Tel : 02 97 57 76 55 Mob : 06 11 33 30 11 info@formation-auray.fr www.formation-auray.fr Bureautique Gestion commerciale Images Sites Internet Éditeur WordPress Introduction Ce
Plus en détailOptimiser 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...
Plus en détail<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
Plus en détailCréer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles
Mission TICE - académie de Versailles 7 nov. 2008 Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Anne-Cécile Franc Mission TICE académie de Versailles
Plus en détailDECOUVERTE DE LA MESSAGERIE GMAIL
DECOUVERTE DE LA MESSAGERIE GMAIL modifie août 2011 La messagerie GMAIL est très répandue parce que simple d'utilisation et surtout gratuite. Car elle proposée par Google. Cliquez deux fois sur l'icône
Plus en détailESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE
ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Atelier «pour débuter» La Gestion des photos avec Windows 7 1 Généralités sur le jargon de l image numérique Les différents formats d image : o BMP : il s'agit
Plus en détailInformatique : Création de site Web Master 2 ANI TP 1
Informatique : Création de site Web Master 2 ANI TP 1 Objectifs du TP : créer des pages Web en HTML EXERCICE I : AFFICHAGE DE DOCUMENT HTML 1. Ouvrez le bloc-note, recopiez-y le document suivant :
Plus en détailGuide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
Plus en détailà l édition de textes
Introduction à l édition de textes Introduction Le traitement de texte consiste en la création et la modification de textes (appelés aussi documents) à l'aide d'un ordinateur. Les premiers logiciels de
Plus en détailTable des matières. 1 À propos de ce manuel...5 1.1 Icônes utilisées dans ce manuel... 5. 1.2 Public visé... 5. 1.3 Commentaires...
Manuel utilisateur Table des matières 1 À propos de ce manuel...5 1.1 Icônes utilisées dans ce manuel... 5 1.2 Public visé... 5 1.3 Commentaires... 5 2 Généralités sur les applications web... 7 3 Module
Plus en détailSEO 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...
Plus en détailPLAN. Qui peut faire quoi? Présentation. L'internaute Consulte le site public
SPIP est une interface en ligne gratuite permettant de créer des sites collaboratifs de façon suffisament simple pour que les élèves puissent publier leur propres articles. Il permet aussi d'héberger son
Plus en détailINTRODUCTION AU CMS MODX
INTRODUCTION AU CMS MODX Introduction 1. Créer 2. Organiser 3. Personnaliser UNE PETITE INTRODUCTION QUEST-CE QU UN CMS? CMS est l acronyme de Content Management System. C est outil qui vous permet de
Plus en détailLogiTICE Novembre 2005 http://itasth.qc.ca/itatice/
LogiTICE Novembre 2005 http://itasth.qc.ca/itatice/ LogiTICE = Logiciels pour une intégration des Technologies de l Information et de Communications pour l Enseignement (TICE) Élaboré et rédigé par : Au
Plus en détailv7.1 SP2 Guide des Nouveautés
v7.1 SP2 Guide des Nouveautés Copyright 2012 Sage Technologies Limited, éditeur de ce produit. Tous droits réservés. Il est interdit de copier, photocopier, reproduire, traduire, copier sur microfilm,
Plus en détailSARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org. Agence Web. Design Prestashop personnalisé
SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org Agence Web Design Prestashop personnalisé création de boutique en ligne site de présentation site
Plus en détailCréation d un site Internet
Création d un site Internet Weebly.com Johanne Raymond Collège Lionel Groulx, mai 2010 Service du soutien à l enseignement et Plan de réussite Ouvrir un compte sur Weebly... 1 Modifier le modèle... 2 Ajouter
Plus en détailFormation HTML / CSS. ar dionoea
Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations
Plus en détailUtiliser Freemind à l'école
Utiliser Freemind à l'école Cette notice est une rapide introduction au mind maping, que nos amis québecois appelent les «schémas de réseaux conceptuels» ou encore idéacteur. En d'autres termes c'est l'organisation
Plus en détailOptimiser moteur recherche
Optimiser moteur recherche Vous apprennez à inscrire vos sites dans les moteurs de recherche et les optimiser, déjà à la construction Worldsoft SA Inscription de sites Web dans les moteurs de recherche
Plus en détailChapitre 3 : outil «Documents»
Chapitre 3 : outil «Documents» L outil «Documents» fonctionne comme le gestionnaire de fichiers de votre ordinateur. Vous pouvez y transférer des documents de tous types (html, Word, Powerpoint, Excel,
Plus en détail"CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS"
"CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS" BONNES FEUILLES OFFERTES PAR MA-EDITIONS : "OPTIMISER" - pages à 1 OPTIMISER Partir d'un modèle existant très bien... Mais c'est encore mieux quand on
Plus en détailUn mini-site internet en une après-midi
Prérequis Posséder un ordinateur équipé d un logiciel pour écrire des fichiers texte simples, (SimpleText, BlocNotes, etc...), d un logiciel de Navigation Internet (InternetExplorer, Netscape, Mozilla,
Plus en détailCMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration
CMS Made Simple Version 1.4 Jamaica Système de gestion de contenu CMS Made Simple est entièrement gratuit sous licence GPL. Tutoriel utilisateur Récapitulatif Administration Le système de gestion de contenu
Plus en détailTutoriel Création d une source Cydia et compilation des packages sous Linux
Tutoriel Création d une source Cydia et compilation des packages sous Linux 1. Pré-requis 1. Quelques connaissances sous Linux 2. Avoir à disposition un Serveur FTP pour héberger votre source 3. Un thème
Plus en détailManuel d'utilisation de l'administration du site Japo.ch - 1
Manuel d'utilisation de l'administration du site Japo.ch 1. Identification L'administration est protégée par une identification. Veuillez saisir ici votre nom d'utilisateur et votre mot de passe. Manuel
Plus en détailMODULES 3D TAG CLOUD. Par GENIUS AOM
MODULES 3D TAG CLOUD Par GENIUS AOM 1 Sommaire I. INTRODUCTIONS :... 3 II. INSTALLATION MANUELLE D UN MODULE PRESTASHOP... 3 III. CONFIGURATION DU MODULE... 7 3.1. Préférences... 7 3.2. Options... 8 3.3.
Plus en détailLa saisie d un texte
La saisie d un texte On utilise le clavier pour la saisie des textes. C est une partie importante du travail. Il est indispensable de respecter un certain nombre de règles pour que le travail soit plus
Plus en détailVotre 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,
Plus en détailGérer ses fichiers et ses dossiers avec l'explorateur Windows. Février 2013
Gérer ses fichiers et ses dossiers avec l'explorateur Windows Février 2013 SOMMAIRE 1. Premiers repères : l'explorateur Windows (Vista et Windows 7) 2. Les dossiers : création, déplacement, suppression
Plus en détailManuel d utilisation du module Liste de cadeaux PRO par Alize Web
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer
Plus en détailCREER 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
Plus en détail3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML
Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises
Plus en détailPas-à-pas. Créer une newsletter avec Outlook
Pas-à-pas Créer une newsletter avec Outlook Objectif : mettre en forme des messages électroniques afin de pouvoir avoir des images dans le corps du message et une mise en page agréable à l œil et efficace.
Plus en détailWinTask x64 Le Planificateur de tâches sous Windows 7 64 bits, Windows 8/8.1 64 bits, Windows 2008 R2 et Windows 2012 64 bits
WinTask x64 Le Planificateur de tâches sous Windows 7 64 bits, Windows 8/8.1 64 bits, Windows 2008 R2 et Windows 2012 64 bits Manuel d initiation du Planificateur 2 INTRODUCTION 5 CHAPITRE I : INSTALLATION
Plus en détailAudit SEO. I / Les Tranquilles d Oléron
Audit SEO I / Les Tranquilles d Oléron Données relatives au domaine : Nom de domaine : www.lestranquillesdoleron.com Âge : Moins d un an Bilan : Référencement de base présent, mais il est possible de le
Plus en détailMODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB"
MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB" Quelques conseils pour bien contribuer 1 Paramétrer votre navigateur web 2 Accéder au module de gestion des pages web 2
Plus en détailSommaire. 2. Utiliser la télécommande... 8 2.1 Télécommande Administrateur... 8 2.2 Télécommande Utilisateur... 10 2.3 Échanger une télécommande...
Sommaire 1. utilisateur... 4 1.1 Choisir le questionnaire... 4 1.2 Créer une nouvelle session... 5 1.3 Importer des sessions... 5 1.4 Exporter des sessions... 6 1.5 Rechercher une session... 6 1.6 Supprimer
Plus en détailInstallation et configuration du serveur syslog sur Synology DSM 4.0
Installation et configuration du serveur syslog sur Synology DSM 4.0 Préambule Avoir un NAS équipé avec la version 4.0 ou ultérieure du DSM de Synology. Installation Pour installer le paquet Syslog Server,
Plus en détailCONNAITRE VOTRE APPAREIL PHOTO DESCRIPTIF DE L APPAREIL. 1 Bouton MARCHE/ARRET 5 Flash 2 Obturateur 6 Retardateur LED
FICHE TECHNIQUE Résolution photo : [12M] 4000x3000 / [8M] 32642x2448 / [5M] 2592x1944 / [2M] 1600x1200 Résolution clip vidéo : [HD] 1280 x 720 / [640] 640 x 480 Formats des fichiers : JPEG / AVI Compatible
Plus en détailPermission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License,
Langage HTML Copyright 2010 tv Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any
Plus en détailNormes techniques 2011
Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique
Plus en détailRéseau local entre Windows Xp et 7
Page 1 / 11 Réseau local entre Windows Xp et 7 Les vérifications à effectuer, les informations à connaître : En premier lieu, il nous faut savoir si le groupe de travail des 2 ordinateurs est le même (Un
Plus en détailMANUEL UTILISATEUR SOPISAFE V 3.5
MANUEL UTILISATEUR SOPISAFE V 3.5 Sommaire PREMIERE PARTIE : INSTALLATION DE SOPISAFE... 3 INSTALLATION SOUS WINDOWS... 3 DEUXIEME PARTIE : L INTERFACE UTILISATEUR DE SOPISAFE V3.5... 5 PARAMETRAGE PAR
Plus en détailLECON 2 : PROPRIETES DE L'AFFICHAGE Version aout 2011
LECON 2 : PROPRIETES DE L'AFFICHAGE Version aout 2011 COPIER LE FICHIER LECON 1_02 DU DISQUE D : VERS LA CLE USB Cliquez gauche deux fois sur l'icône POSTE DE TRAVAIL Cliquez gauche deux fois sur DONNEES
Plus en détailLes Bases. Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015.
Référencer Mon SITE, BLOG Les Bases Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015. Le but de ce livre est de vous aider à bien positionné votre site web ou blog auprès des moteurs de
Plus en détailEspace pro. Installation des composants avec Firefox. Pour. Windows XP Vista en 32 et 64 bits Windows 7 en 32 et 64 bits
Espace pro Installation des composants avec Firefox Pour Windows XP Vista en 32 et 64 bits Windows 7 en 32 et 64 bits Version 2.0.3 1 Sommaire 1. Installation du composant de lecture de la carte Vitale
Plus en détailL 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
Plus en détailDans l Unité 3, nous avons parlé de la
11.0 Pour commencer Dans l Unité 3, nous avons parlé de la manière dont les designs sont créés dans des programmes graphiques tels que Photoshop sont plus semblables à des aperçus de ce qui va venir, n
Plus en détailActivité sur Meteor. Annexe 1 : notion de client-serveur et notion de base de données
Activité sur Meteor Annexe 1 : notion de client-serveur et notion de base de données Notion de client-serveur Que se passe-t-il lorsque vous tapez dans la barre d'adresse de votre navigateur «http://www.google.fr»?
Plus en détailDans 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
Plus en détailUtilisation de l outil lié à MBKSTR 9
Utilisation de l outil lié à MBKSTR 9 Avec MBKSTR, vous disposez d un outil fonctionnant sous Excel (version 97 au minimum) et permettant de faire les études financières suivantes : Aide à la vente avec
Plus en détail2 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
Plus en détailOptimiser les images pour l affichage sur votre site
Optimiser les images pour l affichage sur votre site Table des matières Introduction : Pourquoi compresser une image?...1 I/ Les différents types de compression d images...1 I.I / Le format GIF...2 I.2
Plus en détailFORMATION / 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
Plus en détail