Introduction HTML / CSS a
|
|
|
- Auguste Grenier
- il y a 6 ans
- Total affichages :
Transcription
1 TP 1 Introduction HTML / CSS a a. Support de TP inspiré des notes de Cours de Cyril Gravelier Dans ce TP, nous allons réaliser nos premières pages Web. Pour ce faire, nous aborderons les bases du langage HTML, ainsi que les descriptions de documents Web avec le CSS. 1.1 Pré-requis La plupart des outils nécessaires à la construction d un site Web sont déjà présents sur tout ordinateur. En effet, bien qu il existe un grand nombre de logiciels dédiés à la création de pages Web, un simple éditeur de texte, et un navigateur suffisent. Toutefois, un grand nombre d outils deviendront vite indispensables comme par exemple un outil nous permettant de manipuler des images (entre autre : Photoshop), un client FTP, et un outil de gestion de version. Lors de ce TP, nous utiliserons le module firebug qui permet de tracer du javascript, modifier en temps réel un css Anatomie d une page Web Nous allons comparer la construction d un site Web à la construction d une maison. Ainsi pour la construction d une maison, il est nécessaire de posséder un terrain, de faire une demande de permis de construire (déposer les plans,...), de bâtir les fondations, puis de monter les murs, les cloisons, avant de faire la décoration. Pour un site Web il est en de même : nous avons besoin d un hébergement (un endroit où le site sera enregistré), de déclarer comment va être construit notre site (Doctype), puis d établir les premiers socles, et les différentes sections du site (HTML), avant de donner un style au site (CSS) Les fondations d une page Web Un Doctype (déclaration de comment va être construite la maison) La balise <html> (la fondation principale sur laquelle va reposer la maison) Une balise <head> (la tuyauterie / électricité cachée nécessaire à la maison) Une balise <body> (les murs encadrant notre maison) Avec ces quelques balises nous pouvons construire la plus simple des maisons, avec quatre murs principaux : 1 <!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 1.0 Strict//EN" " 2 TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 4 <html xmlns=" 5 <head> 6 <title>ma page vide</title> 7 <metahttp-equiv="content-type" content="text/html;charset=utf-8"/> 8 </head> 9 <body> 10 </body> 11 </html> Dans cet exemple nous avons en plus rajouté deux éléments à notre maison : nous lui avons donné un nom (<title>), et nous avons décrété que dans cette maison nous ne parlerons qu en UTF-8. 1
2 1.2.2 Le doctype 1 <!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 1.0 Strict//EN" " 2 TR/xhtml1/DTD/xhtml1-strict.dtd"> Le Doctype (abréviation de Document Type Declaration) est indispensable à toute page. Il doit être la première chose présente dans le code d une page (avant même un espace, ou un retour chariot). Il sert à décrire au navigateur quelle version de HTML nous utilisons, en lui fournissant l URL des spécifications W3C de la version utilisée. Ici nous utilisons donc du XHTML 1.0 Strict. W3C est l abréviation pour World Wide Web Consortium : un groupe de personnes réparties à travers le monde qui, collectivement, fait des propositions à propos des langages de balisage, et la façon dont ils devraient être écrits. Le W3C définit les règles, suggère les usages, et publie ensuite la documentation de références pour les créateurs de sites Web ou pour les développeurs de logiciels ayant besoin de comprendre ces langages (tel que les navigateurs web par exemple). En vous rendant sur à l adresse il vous sera possible de tester la conformité de votre code (CSS, HMTL,...) L élément <html> Un document XHTML (nouvelle norme HMTL) correspond à l utilisation d éléments permettant de créer une structure pour un site Web. Un élément XHTML commence et finit toujours par une balise (une balise ouvrante, et une balise fermante). Une balise est structurée par un caractère inférieur (<), du texte, et un caractère supérieur (>). Il est possible d attribuer un ou plusieurs attributs à une balise. L élément <html> délimite le document (à la place d un document XML ou d une classe, par exempleb) L élément <head> L élément head contient des informations relative à la page, mais ces informations ne sont pas affichées. Par exemple, cet élément peut contenir le titre de la page, des mots-clefs, des liens vers les feuilles de style et javascript L élément <body> L élément body d une page contient presque tous les éléments visibles dans le navigateur. 1.3 Construction d une page Un premier squelette Question 1 Ouvrez votre éditeur de texte préféré, et copiez le code suivant. Enregistrez le fichier, et ouvrez-le dans un navigateur. N. Journet version du 8 octobre / 9
3 1 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN" 2 " 3 <html xmlns=" 4 <head> 5 <title>titre de la page la plus simple du monde</title> 6 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 7 </head> 8 <body> 9 <h1>titre de la page la plus simple du monde</h1> 10 <p> 11 Ceci est une page simple. 12 Il faut comprendre comment fonctionne le balisage pour comprendre l affichage. 13 </p> 14 <p>ceci est un autre paragraphe. Juste pour montrer comment tout fonctionne.</p> 15 </body> 16 </html> Parmi les éléments visibles dans le <body>, ont été ajouté deux types d éléments. Tout d abord une balise <h1>. Elle permet de définir des titres (h1 pour "heading 1"). Il peut y avoir jusqu à six niveaux hiérarchiques de titres (h1 à h6). Les titres sont importants pour bien structurer une page, les moteurs de recherches leur accordent de l importance lorsqu ils visitent une page. Puis a été ajouté deux balises <p> (p pour "paragraph"). Elles contient logiquement des blocs de texte. Même s il n existe pas un très grand nombre de balises, il ne vous est pas obligatoire de toutes les mémoriser. Pour cela, il existe des sites listant les balises, et leurs fonctions. En utilisant le squelette précédent, et le site Sitepoint HTML référence : http ://reference.sitepoint.com/html nous allons créer un site pour un magasin de planches de surfs. Question 2 En prenant exemple sur l image ci-dessous répondez aux 3 questions ci-dessous. Un titre de page est déjà présent, adaptez le en conséquence pour qu il soit en rapport avec notre magasin de surf. Ajoutez un titre principal (<h1>), suivi de titres secondaires (<h2>). Un petit paragraphe d introduction expliquant aux visiteurs qu ils sont sur le site d une boutique de planches de surfs serait utile. Ajoutez une liste pour les différentes planches disponibles. (balise <ul> pour les listes : "unordered list) N. Journet version du 8 octobre / 9
4 Question 3 Ce site est bien triste sans images. En vous inspirant de la page ci-dessous, ajoutez une illustration (balise <img/>) juste après le paragraphe d introduction. Notez qu il est important de donner un texte alternatif à notre image (au travers de l attribut alt) afin que notre image soit compréhensible s il y a un problème de chargement de celle-ci. De plus ce sont ces textes qui sont analysés par les moteurs de recherche pour indéxer les images (ainsi que par les navigateurs pour aveugles) Structuration de la page Nous venons d ajouter des paragraphes, des titres, des listes, mais il serait peut-être intéressant de rassembler certains paragraphes entre eux dans le but de pouvoir, par la suite, leur donner un style particulier. L élément permettant de créer des structures est l élément <div>. À la différence de paragraphe, il permet d englober tout autre type d élément (un paragraphe ne peut contenir des éléments "simple", et ne peut être composé d autres paragraphes par exemple). Une division peut soit être associée à un identifiant (id) unique, soit associée à un nom de classe class qui lui sera non unique. Par exemple, on décide de regrouper sous une même division la zone allant de Bienvenue à la fin du paragraphe contenant l image du surfeur fera parti d une division dont l id sera "entete" 1 <div id="entete"> 2 <h1>bienvenue</h1> 3 <h2>qui sommes-nous?</h2> 4 <p> 5 Notre boutique vend les plus belles planches de surfs 6 depuis le 18 janvier </p> 8 <p> 9 <img src="surf.jpg" alt="" /> 10 </p> 11 </div> Question 4 En vous inspirant de la page ci-dessous : Insérez une liste avec points juste après l image du surfeur. Les trois points sont : "Accueil", "Plan d accès", "Contact". Cette liste sera dans une division menu L ensemble de la zone de la page décrivant les produits sera intégrée dans une div produits Chaque sous-produit (planches, accessoires,..) sera intégrée dans une zone porduit Après avoir réalisé ces changements, observez les résultats obtenus en rechargeant votre navigateur. N. Journet version du 8 octobre / 9
5 1.3.3 Liens Un site n est jamais composé d une seule page, nous allons donc créer d autres pages à notre site et créer des liens permettant de naviguer d une page à l autre. Question 5 En vous basant sur la première page réalisée, créez deux nouvelles pages. Utilisez la balise <a> pour que les 3 entrées du menu permettent de naviguer d une page à l autre. 1.4 Modification du style de la page Résumons en reprenant notre métaphore. Nous avons déposé le permis de construire de notre maison, nous avons posé des fondations, puis établi des murs et des portes entre les différentes pièces de notre maison. Il est maintenant temps de décorer un peu notre maison Pose de la tapisserie CSS (Cascading Style Sheets) est un langage qui permet de changer l apparence des éléments d une page (la taille, le style, la couleur d un texte, la couleur de fond, les bordures, ainsi que la position d un élément dans la page). On peut rajouter des styles CSS de plusieurs manières. Tout d abord, chaque élément HTML possède un attribut style dans lequel nous pouvons ajouter des déclarations. La balise <style> existe également, dans laquelle nous pouvons regrouper plusieurs déclarations Et enfin, nous avons la possibilité d inclure un fichier contenant tout ou partie des déclarations (on parle alors d inclusion de feuille de style). Et ceci se fait avec l élément <link href="style.css" rel="stylesheet" type="text/css"/> dans le <head> La troisième solution apporte bien entendu le plus d avantages, car il permet de regrouper en un endroit unique un ensemble de déclarations. Il est alors aisé de changer un style s appliquant sur plusieurs pages sans avoir à modifier chacune des pages. Question 6 Ajoutez le code suivant au bon endroit <link href="monstyle.css" rel="stylesheet" type="text/css"/> Créez à l endroit adéquat le fichier css correspondant à la définition ci-dessus Déclaration du CSS Une déclaration CSS est faite de deux parties : une propriété et sa valeur. 1 p { 2 color: #FF0000; 3 } Il nous faut également un sélecteur pour décrire à quel élément le style se réfère. Ainsi l exemple ci-dessus définit la couleur de texte rouge pour tous les paragraphes d une page intégrant cette définition CSS. Comme pour les balises HTML, il existe un grand nombre de propriétés pour éditer un syle CSS. Vous pouvez aller faire un tour ici : http ://reference.sitepoint.com/css. N. Journet version du 8 octobre / 9
6 Question 7 Modifiez le CSS afin qu il permette à la page principale de votre site de ressembler à la page ci-dessous. Il vous faudra pour cela modifier : La couleur du fond du site (background-color) La couleur du titre de la page (color) La marge de l image (margin) Class et Id Il peut être utile de pouvoir définir des propriétés communes pour certains éléments. Dans notre cas, nous souhaitons que toute notre div d entête soit entourée d une bordure, mais pas les autres div. Nous souhaitons également que tous les éléments de la liste du menu soient précédés d un carré et plus d un point. Chaque élément HTML peut posséder un attribut id, et un attribut class. La valeur donnée à l attribut id pour un élément, doit être unique pour toute une page. Tandis que la valeur donnée à l attribut class peut être partagée par plusieurs éléments d une même page. N. Journet version du 8 octobre / 9
7 Question 8 Modifiez comme ci-dessous le menu afin que chaque élément du menu appartienne à une classe "elem_menu". 1 <div id="menu"> 2 <ul> 3 <li class="elem_menu"><a href="06-surf-index.html">accueil</a></li> 4 <li class="elem_menu"><a href="06-surf-plan.html">plan d acces</a></li> 5 <li class="elem_menu"><a href="06-surf-contact.html">contact</a></li> 6 </ul> 7 </div> Le CSS correspondant aux critères souhaités est le suivant. Recopiez le et observez les changements. Vous noterez qu affecter un style à un élément identifié par un "ID" se fait avec un "#". Affecter un style à un élément identifié par un attribut "CLASS" se fait avec un "." 1 #entete { 2 border: 1px solid olive; 3 } 4.elem_menu { 5 list-style: square; 6 } Nous allons continuer à faire évoluer l apparence de notre site. Question 9 La partie haute du site sera unique sur notre site, rajouter lui l identifiant "header". Sur ce "header" rajoutez lui 1. Une bordure d un pixel, solide, et d une couleur de votre choix (border). 2. Une couleur de fond (background-color) spécifique. Donnez une classe "header_title" à chaque titre de cette partie "header" et changez leurs alignements (textalign) Sélection en héritage Le problème avec les classes, c est qu elles peuvent vite devenir très nombreuses, et polluer les fichiers HTML. Pour résoudre ce problème, CSS permet de sélectionner uniquement les enfants d un autre élément. Par exemple nous avons dû donner une classe CSS à chacun de nos titres de la section "header". Question 10 Supprimez les classes CSS sur les titres de la section header. Toujours dans le CSS, remplacez la déclaration.header_title, par : #header h1, #header h2, #header h3... Nous avons modifié notre sélecteur. Celui-ci signifie : pour les éléments h1 qui sont dans l élément qui à l id "header", et pour les éléments h2 qui sont dans l élément qui a l id "header", Positionnement des éléments dans la page Tout en bas de votre fichier CSS ajoutez la propriété suivante : 1 div, p, ul { 2 border: 1px solid orange; 3 } N. Journet version du 8 octobre / 9
8 Question 11 Mis à part des bordures qui sont apparues (et accessoirement que ce n est pas très joli) que constatez-vous? Jusqu à présent tous les éléments que nous avons ajoutés s empilent les uns en dessous des autres. En réalité il y a deux types d éléments HMTL : Un élément de type bloc prend toute la place disponible en largeur, et les autres éléments s enchaineront en dessous de l élément. Les éléments de type bloc seront affichés dans une succession verticale. Les éléments <div>, <p>, <ul>, <ol>, <li>, <dl>, <dd>, <form>, <h1>... <h6> sont des éléments de type bloc. Un élément en ligne lui va uniquement prendre la place dont il a besoin. Les autres éléments, s ils sont de types en ligne également, s enchaineront à la suite. Les éléments de type en ligne sont affichés dans une succession horizontale. Les éléments <img/>, <a>, <span>, <em>, <strong> sont des éléments de type en ligne. On parle de flux pour parler de ces enchainements d éléments Positionnement statique, absolute, et relatif Récupérez l archive : tp2-source-question10.zip pour poursuivre. Nous allons essayer de changer le positionnement de l image, qui jouera le rôle de logo pour notre site. Notez qu elle est comprise dans un élément bloc possédant l identifiant : "logo". Question 12 Dans le fichier CSS, rajoutez le style : 1 #logo img { 2 position: absolute; 3 bottom: 0; 4 right: 0; 5 } Que constatez-vous? Question 13 Maintenant rajoutez : 1 #logo { 2 position: relative; 3 } Que se passe t-il? Les trois principales façon de positionner un élément sont : static / absolute / relative. Le positionnement static est le positionnement par défaut dans un navigateur, tous les éléments de type bloc s enchaînent naturellement les uns en dessous des autres dans le flux du document. Si l on place un élément en absolu, alors il sort du flux et, il est alors positionné avec les attributs left / right et top / bottom, par rapport au premier parent positionné en relatif (s il n y a aucun élément relatif parent, alors l élément <body> sera la référence). Un élément relatif se comporte donc comme un élément statique vis-à-vis des autres éléments frères, mais il est alors la nouvelle référence pour le positionnement absolu des éléments fils Le dégagement du flux Un élément peut être placé en flottant dans le but qu il se dégage du flux, mais qu il n occupe pas toute la place disponible et laisse les autres éléments se positionner autour de lui. N. Journet version du 8 octobre / 9
9 Question 14 Pour dégager du flux tout le texte de l entête dans l idée que le logo vient se placer à la droite du texte. Rajoutez le style : 1 #texte-entete { 2 float: left; 3 } Un élément flottant est retiré du flux normal, et placé le plus à droite (float : right) ou le plus à gauche (float : left) possible dans son conteneur. Le contenu suivant cette boîte flottante s écoule le long de celle-ci, dans l espace laissé libre Marge extérieure et marge intérieure Un élément peut posséder deux types de marges. Des marges extérieures (margin), et des marges intérieures (padding). Comme leurs noms l évoquent, une marge extérieure va venir interagir avec les éléments en dehors de la bordure de l élément de type bloc, tandis que la marge intérieure va venir interagir à l intérieur de l élément tout en grandissant sa taille. La figure ci-dessous illustre ce concept de marge extérieures/intérieures. Il y a plusieurs façons de déclarer des marges : En spécifiant sur chacun des cotés : margin-top : 20px ; margin-right : 10px ; margin-left : 10px ; margin-bottom : 15px ; En spécifiant tout sur une ligne : margin : 20px 10px 10px 15px ; (l ordre des valeurs est celui des aiguilles d une montre : haut droite bas gauche). N. Journet version du 8 octobre / 9
10 Ce document est publié sous Licence Creative Commons «By- NonCommercial-ShareAlike». Cette licence vous autorise une utilisation libre de ce document pour un usage non commercial et à condition d en conserver la paternité. Toute version modifiée de ce document doit être placée sous la même licence pour pouvoir être diffusée. N. Journet version du 8 octobre / 9
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
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
.. 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
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
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?
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,
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
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
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,
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
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...
Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s
Mickaël Mickaël BLANCHARD BLANCHARD Préface de Sébastien L e p e r s Magento Préface de Sébastien L e p e r s Magento Réussir son site e-commerce Réussir son site e-commerce Groupe Eyrolles, 2010, ISBN
Pack Fifty+ Normes Techniques 2013
Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié
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
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
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
STID 2ème année : TP Web/PHP
STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction
Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur
FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique
Audit 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
Travaux dirigés n 10
Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones
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
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
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
Formation Webmaster : Création de site Web Initiation + Approfondissement
Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation
Programmation Internet Cours 4
Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web
Logiciels de référencement
Outils Logiciels de référencement Afin de contrôler la qualité de son référencement, d optimiser et d améliorer son positionnement, il peut être utile d utiliser des outils couvrant tout ou partie du référencement.
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
HTML. Notions générales
1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS
KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.
KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html
INTRODUCTION AU CMS MODX
INTRODUCTION AU CMS MODX Introduction 1. Créer 2. Organiser 3. Personnaliser UNE PETITE INTRODUCTION QUEST-CE QU UN CMS? CMS est l acronyme de Content Management System. C est outil qui vous permet de
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
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
Manuel 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
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.
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
Programmation Web. Madalina Croitoru IUT Montpellier
Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance
{less} Guide de démarrage
{less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site
Sana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012
Sana Sellami sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Connaître les principales techniques pour la création de sites web Se familiariser avec les langages du web Rendre dynamique le
Gestion Électronique de Documents et XML. Master 2 TSM
Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document
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
Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>
Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee
2 S I M 1 P H O N E G U I D E U T I L I S A T E U R. Guide d utilisation E-commerce / Prestashop
2 S I M 1 P H O N E G U I D E U T I L I S A T E U R Guide d utilisation E-commerce / Prestashop 1 2 S I M 1 P H O N E S O M M A I R E 1. Noms d utilisateurs et mots de passe..... Page 3 Adresse mail Prestashop
NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web
NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des
Projet en nouvelles technologies de l information et de la communication
Projet en nouvelles technologies de l information et de la communication Site Web universitaire du Prof. Jacques Moeschler. Nono Steeve Semestre de printemps 2013 Sous la direction du Prof Luka Nerima
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
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
www.evogue.fr SUPPORT DE COURS / HTML
L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / HTML Sommaire Sommaire... 2 Présentation... 3 Introduction... 3 Fonctionnement... 3 Historique... 4 Navigateurs... 6 Définition... 6 Historiquement...
Les 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
FTP : 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).
Introduction aux concepts d ez Publish
Introduction aux concepts d ez Publish Tutoriel rédigé par Bergfrid Skaara. Traduit de l Anglais par Benjamin Lemoine Mercredi 30 Janvier 2008 Sommaire Concepts d ez Publish... 3 Système de Gestion de
UN SITE WEB RESPONSIVE EN UNE HEURE?
UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N
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
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...
Les sites web avec NVU
Les sites web avec NVU Table Des Matières Les sites web avec NVU Les bases du web Les protocoles réseaux Le Web Uniform Resource Locator Recherche d'informations Création et gestion d un site Web Utiliser
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...
Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org
Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et
SYSTÈMES D INFORMATIONS
SYSTÈMES D INFORMATIONS Développement Modx Les systèmes de gestion de contenu Les Content Management Système (CMS) servent à simplifier le développement de sites web ainsi que la mise à jour des contenus.
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...
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é
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
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
Formation : WEbMaster
Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins
Bernard Lecomte. Débuter avec HTML
Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.
Optimiser les performances d un site web. Nicolas Chevallier Camille Roux
Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net
Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles
Mission TICE - académie de Versailles 7 nov. 2008 Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Anne-Cécile Franc Mission TICE académie de Versailles
Styler un document sous OpenOffice 4.0
Mars 2014 Styler un document sous OpenOffice 4.0 Un style est un ensemble de caractéristiques de mise en forme (police, taille, espacement, etc.) qui sert à structurer un document en l organisant de manière
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
En date du 11 décembre 2008
R E F O N T E S I T E W E B G F I E CAHIER DES CHARGES ET DEVIS En date du 11 décembre 2008 ADITEL - WEB AGENCY 4 RUE CAROLINE 75017 PARIS Tel 01 44 70 02 77 SARL AU CAPITAL DE 20 000 EUROS R.C.S BOBIGNY
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
Responsive Design. Technologies du web. Stéphane Bouvry, 2014
Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,
WysiUpStudio. CMS professionnel. pour la création et la maintenance évolutive de sites et applications Internet V. 6.x
WysiUpStudio CMS professionnel pour la création et la maintenance évolutive de sites et applications Internet V. 6.x UNE SOLUTION DE GESTION DE CONTENUS D UNE SOUPLESSE INÉGALÉE POUR CRÉER, MAINTENIR ET
Notice d accessibilité HTML, CSS et JavaScript
Notice d accessibilité HTML, CSS et JavaScript Date Version État / commentaires 10 sept. 2015 2.0 Cette version prend en compte WCAG 2.0 et RGAA 3.0. En partenariat avec : Air Liquide Atos BNP Paribas
Utilisation de Sarbacane 3 Sarbacane Software
Tutorial par Anthony Da Cruz Utilisation de Sarbacane 3 Sarbacane Software Ambiance Soleil 17 Rue Royale 74000, Annecy Sommaire 1. Présentation générale 2. Guide étape par étape 3. Astuces de l éditeur
INFORMATIONS ET INSTALLATION DU THEME CENATA RESPONSIVE
INFORMATIONS ET INSTALLATION DU THEME CENATA RESPONSIVE Cenata Responsive à été réalisé par Presta-Theme Contact : webmaster@presta-theme.com Compatibilité PrestaShop : 1.5.x Documentation Prestashop 1.5
Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013
Exemple d utilisation du gestionnaire de conception Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 6, rue de l Etang, L-5326
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...
Cahier des charges Site Web Page 1 sur 9
Page 1 sur 9 I Présentation de votre structure A Nom et type de la structure Veuillez insérer le nom de votre établissement B Taille de l'entreprise Veuillez insérer le nombre de salariés C Description
novatis Agence Web innovatrice
QUI SOMMES NOUS? 02 novatis La théorie c est quand on comprend tout et que rien ne marche La pratique c est quand tout marche mais on ne sait pas pourquoi! Chez Novatis, nous avons réussi les deux... tout
Association UNIFORES 23, Rue du Cercler 87000 LIMOGES
RAPPORT DE STAGE Association UNIFORES 23, Rue du Cercler 87000 LIMOGES LOHUES Théo BTS SIO 1 ère année Lycée suzanne valadon 2013-2014 Table des matières I. Présentation de l'entreprise...3 II. Description
Petite définition : Présentation :
Petite définition : Le Web 2.0 est une technologie qui permet la création de réseaux sociaux, de communautés, via divers produits (des sites communautaires, des blogs, des forums, des wiki ), qui vise
RÉALISATION D UN SITE DE RENCONTRE
RÉALISATION D UN SITE DE RENCONTRE Par Mathieu COUPE, Charlène DOUDOU et Stéphanie RANDRIANARIMANA Sous la coordination des professeurs d ISN du lycée Aristide Briand : Jérôme CANTALOUBE, Laurent BERNARD
WordPress Référencement naturel (SEO) Optimiser. son référencement. Daniel Roch. Préface d Olivier Andrieu
Daniel Roch Optimiser son référencement WordPress Référencement naturel (SEO) Préface d Olivier Andrieu Groupe Eyrolles, 2013, ISBN : 978-2-212-13714-9 Table des matières AVANT-PROPOS... 1 Pourquoi ce
GOOGLE ANALYTICS. Ajout du code de suivi sur PowerBoutique. Ajout du code de suivi Google Analytics. Page 1 / 7 TUTO / GOOGLE ANALYTICS
Ajout du code de suivi Google Analytics Page 1 / 7 I. Création du compte sur Google Analytics 1. Connectez-vous à www.google.fr 2. Entrez «Google Analytics» dans la barre de recherche. 3. Cliquez sur le
Publication dans le Back Office
Site Web de l association des ingénieurs INSA de Lyon Publication dans le Back Office Note : dans ce guide, l'appellation GI signifie Groupe d'intérêt, et GR Groupe Régional laure Buisset Page 1 17/09/2008
WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES
WEB & DÉVELOPPEMENT LES BASES DU WEB HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES LE LANGAGE HTML STRUCTURE D UNE PAGE En-tête et corps Syntaxe INSÉRER DES CONTENUS Texte : formatage (titre,
Module : programmation site Web dynamique Naviguer entre les pages via site map
Module : programmation site Web dynamique Naviguer entre les pages via site map Soit le site web suivant qui est constitué de six pages web : On veut créer un menu constitué de trois nœuds principaux générale
Architecture Multi-Niveaux
Architecture Multi-Niveaux Patrick FELIX (felix@labri.fr) Franck RUBI (rubi@labri.fr) Département Informatique IUT Bordeaux1 12 novembre 2007 Architecture Multi-Niveaux 1 Plan 1. Introduction : vers une
Media queries : gérer différentes zones de visualisation
2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d
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
1. Installation du Module
1 sur 10 Mise en place du Module Magento V 1.5.7 1. Installation du Module Vous pouvez installer le module de deux façons différentes, en passant par Magento Connect, ou directement via les fichiers de
< 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
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
// 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
Caruso33 : une association à votre service
Caruso33 : une association à votre service Le b-a ba sur le réseau Internet Comment vous trouver facilement sur Internet Pourquoi un portail des associations? Les modalités pour figurer sur le portail
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
Référencement naturel & E-tourisme. Pau 02/10/2008
Référencement naturel & E-tourisme Pau 02/10/2008 Enjeux de la visibilité de votre site e-tourisme Principe de fonctionnement d un moteur de recherche Evaluer la qualité de référencement de son site internet
Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam
6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de projet Le piratage informatique DEJOUR Kévin SOUVILLE Jean-François Suivi : Mokhtari-Brun Myriam 2 e semestre 2005-2006
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,
Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design
Grilles Fluides CSS CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR