Le (X)HTML 5. LPCEL promotion 2016/2017 Vincent Peigné
|
|
|
- Violette Brosseau
- il y a 7 ans
- Total affichages :
Transcription
1 Le (X)HTML 5 LPCEL promotion 2016/2017 Vincent Peigné
2 Sommaire 1. HTML 5 2. L entête HTML 3. Le corps ou <body> 4. L encodage et les accents
3 1. HTML 5
4 1. HTML Définition et historique 1.2. Définition d une balise 1.3. Structure d un document 1.4. Doctype et box model 1.5. Les commentaires HTML
5 1.1. Définition et historique Hyper Text Markup Language Langage client Langage à balisage Possibilité de mise en forme basique Version 4.01 répandue, v5 en cours HTML 5, l avenir du web
6 1.1. Définition et historique HTML 1.0 Tim-Berners Lee au CERN Pas de réelles spécifications Vers 1993 : peu de fonctionnalités Liens hypertextes et images déjà présents HTML Apparition des tableaux HTML 3.0 / 3.2 Début 1997 Nouvelles balises Introduction à la version qui suit
7 1.1. Définition et historique HTML 4.0 Fin 1997 Version majeure du langage Gestion des scripts, des CSS et des frames 3 variantes (DTD : Document Type Documentation) Strict => DTD allégée Transitional => DTD étendue avec la version 3.2 Frameset => Support des frames Version 4.01 : corrections mineures Version la plus utilisée
8 1.1. Définition et historique XHTML 1.0 et 1.1 extensible HTML 2000/2006 Notion d XML Reformulation de HTML 4 Seule la syntaxe change : plus rigide Code plus propre et normalisé
9 1.1. Définition et historique HTML 5.0 et XHTML /2012 : Pas encore terminée Modifications majeures Doctype et encodage Nouvelles balises Suppression de balises et des frames A suivre de très près!
10 1. HTML 5 c est quoi? 1.1. Définition et historique 1.2. Définition d une balise
11 1.2. Définition d une balise La balise Délimitée par < et > <html> Elément ajouté au texte brut Interprétation par le navigateur Peut être vue comme une boite Les attributs Couple : nom="valeur" Informations complémentaires Certains sont génériques, d autres spécifiques selon les balises Deux syntaxes de balises Balises normales Balises auto fermantes
12 1.2. Définition d une balise Types de balises Contenu : «bloc», «en ligne» Metadonnées HTML 5 : Content Models Balises normales Balises ouvrantes/fermantes Raisonnement par couple Différenciation par le «/» Balises auto fermantes Balises dites «vides» Fermées par />
13 1.2. Définition d une balise Balise «bloc» Boite pouvant contenir du texte ou d autres boites Sauf exception (<p>) Format naturel (par défaut) Positionnement : les unes en dessous des autres Taille : largeur de la balise «parent» Petite phrase Autre phrase Encore une phrase
14 1.2. Définition d une balise Balise «en ligne» ou «inline» Boite devant contenir du texte ou balises «inline» Format naturel (par défaut) Positionnement : les unes à coté des autres Taille : largeur de leur contenu Petite phrase Autre phrase Encore une phrase
15 1.2. Définition d une balise Imbrication des balises Notion d arbre Balise «parent», balise «enfant» Respect de la hiérarchie Première ouverte, dernière fermée Non respect problème (affichage, css etc.) Indentation!
16 1.2. Définition d une balise Exemple HTML
17 1.2. Définition d une balise Catégorisation HTML 5 : Content Models Metadata : informatif Sectioning : grandes zones d un document Heading : hiérarchie des titres Phrasing : flux de textes Embedded : contenu embarqué (vidéo, audio ) Interactive : interaction utilisateur (bouton, contrôle formulaire )
18 1.2. Définition d une balise Metadata <title>, <link>, <script>, <style> Sectioning <article>, <aside>, <nav>, <section> Heading <h1> à <h6> et <hgroup> Phrasing <img>, <strong>, <input> Embedded <audio>, <canvas>, <embed>,<iframe>, <object>, <video> Interactive <a>, <button>
19 1.2. Définition d une balise Notion importante Différence entre le fond et la forme HTML définit le fond «Bloc», «en ligne» liaison avec le CSS Notion d appartenance CSS définit la forme Possède des règles et des positionnements par défaut Un «bloc» peut avoir un rendu visuel «en ligne» Et inversement Notion d apparence ou de comportement
20 1. HTML 5 c est quoi? 1.1. Définition et historique 1.2. Définition d une balise 1.3. Structure d un document
21 1.3. Structure d un document (X)HTML 5 Garde l esprit et la structure de base Nouvelle organisation du corps Les éléments obligatoires Balise <html> DOCTYPE Balise <head> : entête du document Balise <body> : corps du document
22 1.3. Structure d un document Balise <html> Unique dans la page Nœud de base Arbre du document DOM : Document Object Model Création d une arborescence Standardisation pour le XML Utilisé en Javascript
23 1.3. Structure d un document Code de base HTML 5
24 1.3. Structure d un document Code de base XHTML 5
25 1. HTML 5 c est quoi? 1.1. Définition et historique 1.2. Définition d une balise 1.3. Structure d un document 1.4. Doctype et box model 1.5.
26 1.4. Doctype et box model Doctype Définition de la sémantique utilisée Essentielle pour le navigateur Insensible à la casse Ne jamais l oublier! Mode Quirks Box Model Version de compatibilité Soucis de CSS et de mise en forme (historique)
27 1.4. Doctype et box model Illustration du mode Quirks Possibilité de le gérer en CSS Propriété : box-sizing De plus en plus utilisé Loin d être idiot comportement plus naturel
28 1.4. Doctype et box model
29 1. HTML Définition et historique 1.2. Définition d une balise 1.3. Structure d un document 1.4. Doctype et box model 1.5. Les commentaires HTML
30 1.5. Les commentaires HTML Les commentaires Zone dans le code ne s affichant pas à l écran Non interprétés par les robots Donnent des informations sur le code Balises spéciales : <!-- --> Développeur/intégrateur Bon code code commenté En théorie En pratique rarement commenté Manque de temps HTML facilement compréhensible si bien codé
31 1.5. Les commentaires HTML Code HTML Attention! Commentaires différents CSS / HTML / Javascript
32 2. L entête HTML
33 2. L entête HTML 2.1. Utilité du <head> 2.2. La balise <title> 2.3. Les balises «meta» 2.4. Les styles CSS 2.5. Les scripts 2.6. Exemple de <head>
34 2.1. Utilité du <head> Balise essentielle et obligatoire Titre de la page Gestion des «meta» Balises informatives Equivalents de l entête HTTP SEO : description, robots etc. Scripts Feuilles de styles CSS Javascript
35 2. L entête HTML 2.1. Utilité du <head> 2.2. La balise <title>
36 2.2. La balise <title> Balise essentielle et obligatoire Titre de la page Lisible, informatif et moins de 70 caractères Référencement Titre des résultats de recherche Importance des mots clés Navigateur Titre de la barre de titre, les favoris, les onglets
37 2.2. La balise <title>
38 2. L entête HTML 2.1. Utilité du <head> 2.2. La balise <title> 2.3. Les balises «meta»
39 2.3. Les balises «meta» Obligatoirement dans le <head> Nombre très important de meta Beaucoup sont inutiles Validation W3C : meta pour l encodage
40 2.3. Les balises «meta» Types de meta Meta «name» : informations clients Document, auteur, robots Meta «http-equiv» : informations serveurs Notion de référencement Règles changent souvent Meta «keywords», «description» Baisse d importance
41 2.3. Les balises «meta» Les meta «name» Balises informatives Donnent des détails sur le document Donnent des détails sur l auteur, les outils etc. Deux attributs «name» : nom de la balise «content» : valeur de la balise Très peu sont réellement utiles Exception : Meta description Référencement, Facebook
42 2.3. Les balises «meta» Les meta «http-equiv» Reprise des informations serveurs Pas obligatoire de les spécifier Deux attributs «http-equiv» : paramètre HTTP «content» : valeur de la balise Quelle est l utilité? Pour l encodage navigateur Absence d information sur la configuration serveur Pas forcement utile
43 2.3. Les balises «meta» Equivalent HTML Entête HTTP
44 2.3. Les balises «meta» Meta name «robots» Pour les robots d indexation : Google, Yahoo, Bing Valeurs possibles all, index, follow, archive none, noindex, nofollow, noarchive Remplaçable par un fichier Robots.txt À la racine du site
45 2.3. Les balises «meta» Les meta spécifiques Meta name non générique ou propriétaire Facebook => Open Graph Google Webmaster Tools Outil très utile pour le suivi Lien avec le référencement (encore!)
46 2. L entête HTML 2.1. Utilité du <head> 2.2. La balise <title> 2.3. Les balises «meta» 2.4. Les styles CSS
47 2.4. Les styles CSS Cascading Style Sheets Langage client Mise en forme visuelle Modes d intégration dans le <head> Avec la balise <style> Avec la balise <link> Avec la
48 2.4. Les styles CSS La balise <style> Définition du code CSS dans la page Duplication du code à éviter Attribut «type» : déprécié en HTML5 Exemple HTML
49 2.4. Les styles CSS La balise <link> Liaison avec un document (CSS, RSS etc.) CSS externe Attributs : type, rel, href et media Exemple HTML
50 2.4. Les styles CSS La Liaison avec un document CSS externe Utilisation de la base <style> Exemple HTML
51 2.4. Les styles CSS <link> Vieux débat Fonctionnement identique même rendu Meilleur interopérabilité avec les vieux navigateurs Perte de performance possible au chargement <link> Chargement en parallèle Méthode à utiliser
52 2. L entête HTML 2.1. Utilité du <head> 2.2. La balise <title> 2.3. Les balises «meta» 2.4. Les styles CSS 2.5. Les scripts 2.6.
53 2.5. Les scripts Contrôler les éléments HTML Les formulaires Parcours du DOM Dynamisation du contenu Javascript, VBScript Mode d intégration dans le <head> Avec la balise <script>
54 2.5. Les scripts La balise <script> Liaison avec un document javascript Code interne Attribut «type» : déprécié en HTML5 Exemple HTML
55 2. L entête HTML 2.1. Utilité du <head> 2.2. La balise <title> 2.3. Les balises «meta» 2.4. Les styles CSS 2.5. Les scripts 2.6. Exemple de <head>
56 2.6. Exemple de <head>
57 3. Le corps ou <body>
58 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images 3.4. Les liens 3.5. Les tableaux 3.6. Les listes 3.7. Les formulaires 3.8. Les frames et iframe
59 3.1. Les balises structurantes Objectifs : organiser le contenu Merci HTML 5! Meilleur logique de codage HTML 4 <div> Balise à tout faire HTML 5 <div> : sera toujours utile! <header>, <footer>, <article>, <aside>, <nav>, <section> Sortes de <div> améliorées
60 3.1. Les balises structurantes <header> Entête d une section ou d une page <footer> Pied d une section ou d un page <article> Texte, portion de contenu <aside> Contenu annexe qui appuie le contenu principal <nav> Ensemble de liens de navigation <section> Section du document
61 3.1. Les balises structurantes Exemple de structure HTML 5
62 3.1. Les balises structurantes Equivalent HTML 5
63 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme
64 3. Le corps ou <body> Les titres <h1> à <h6> HTML 5 : <hgroup> <h1> à <h6> Définition des titres de la page <hgroup> Plus complexe Permet d associer des sous-titres à des titres Ne casse pas l arbre des titres
65 3. Le corps ou <body> Exemple HTML
66 3. Le corps ou <body> Les textes <p>, <span>, <br /> Possibilité de mettre du texte dans les autres balises <p> Paragraphe de textes Contient du texte et/ou des balises «inline» <span> Permet de cibler un morceau de texte <br /> Saut de ligne (break)
67 3. Le corps ou <body> La mise en forme Ne pas trop l utiliser Dédiée au CSS <i>, <u>, <b>, <em>, <strong> Les navigateurs appliquent un style CSS par défaut Remplacement possible par <span> et du CSS Souplesse sur le graphisme <em>, <strong> Mettre en avant certains éléments Utilité en référencement?
68 3. Le corps ou <body> Exemple HTML Rappel <p> est de type «bloc» Pas de <p> dans un autre <p>
69 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images
70 3.3. Les images Les images Afficher une image dans la page Attributs src : chemin vers le fichier image (gif, png, jpeg ) Alt : Texte alternatif référencement et navigation title : titre de l image info-bulle, référencement width/height : dimension de l image Exemple HTML
71 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images 3.4. Les liens
72 3.4. Les liens Les liens Rendre un texte cliquable Envoyer vers une page Envoyer dans la page ancre Peuvent contenir HTML 4 : que des éléments inline et du texte HTML 5 : tout Attributs : href : URL de la page OU cible de l ancre (#) title : titre du lien info-bulle, référencement Exemple HTML
73 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images 3.4. Les liens 3.5. Les tableaux
74 3.5. Les tableaux Les tableaux Organiser du contenu en lignes et en colonnes Trois balises de structure facultative thead : Entête du tableau tbody : corps du tableau tfoot : Pied du tableau Balises <table> : le tableau <tr> : ligne <td> : cellule <th> : cellule d entête Possibilité de fusion de cellules attributs (rowspan, colspan)
75 3.5. Les tableaux Mois CA Janvier 750 Février 250 Total 1000
76 3.5. Les tableaux Mois CA Janvier 750 Février 250 Total 1000
77 3.5. Les tableaux Attention! A utiliser uniquement pour les données tabulaires Tableaux de stats, chiffres etc. Tableau comme structure de page Fausse bonne idée Particulier au niveau CSS Structure HTML en tableau peu souple pour la mise en forme Utilisation ponctuelle et ciblée
78 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images 3.4. Les liens 3.5. Les tableaux 3.6. Les listes
79 3.6. Les listes Les listes Regrouper des items de même nature Ordonnancer ou non les éléments Notion de hiérarchie Types de listes Liste à puces : <ul> Liste ordonnées : <ol> Liste de définition : <dl><dt><dd> Liste de répertoires : <dir> Liste de menus : <menu> Eléments des listes sauf liste de définitions : Balise <li> </li>
80 3.6. Les listes Liste à puces ou liste non ordonnées La plus courante Utile pour créer des menus de navigation Possibilité de changer la forme de la puce En CSS Disc, circle, square ou image spécifique
81 3.6. Les listes Type DISC Type CIRCLE Type SQUARE
82 3.6. Les listes Liste ordonnées Puces remplacées par des lettres/chiffres Utile pour les sommaires Possibilité de changer la forme de la puce En CSS decimal chiffres arabes upper-roman lower-roman upper-alpha lower-alpha chiffres romains majuscules chiffres romains minuscules lettres alphabet majuscules lettres alphabet minuscules
83 3.6. Les listes Type décimal Type Romain Type Alphabet
84 3.6. Les listes Liste de définitions Ensemble de termes Une ou plusieurs définitions Trois balises <dl> : groupement de définitions <dt> : terme à définir <dd> : définition
85 3.6. Les listes
86 3.6. Les listes Liste de menus / liste de répertoires Très peu utilisées Même fonctionnement que les autres Puces identique à <ul>
87 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images 3.4. Les liens 3.5. Les tableaux 3.6. Les listes 3.7. Les formulaires 3.8.
88 3.7. Les formulaires Les formulaires Envoyer des données au serveur Type d envoi : GET, POST Différents champs de saisies possibles text, checkbox, radio, select, textarea, password HTML 5 : de nouveaux champs Date, datetime, color, range Essentiels dans un site web Gérer par les développeurs
89 3.7. Les formulaires Code HTML Possibilité d avoir plusieurs formulaires Imbrication impossible! Conflit lors des envois Non respect de la norme
90 3.7. Les formulaires
91 3.7. Les formulaires
92 3.7. Les formulaires
93 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images 3.4. Les liens 3.5. Les tableaux 3.6. Les listes 3.7. Les formulaires 3.8. Les frames et iframe
94 3.8. Les frames et iframe Les frames Découpage de la fenêtre en plusieurs sous cadres <frame>, <frameset> A ne pas utiliser Sortie de la norme HTML 5 Incompatible avec le référencement Incompatible avec de bonnes méthodes Iframe Inline frame : dans le flux de la page Intègre une page externe dans la page courante Dans la norme HTML 5 Utile pour données externes : Youtube, Dailymotion
95 4. Encodage et accents
96 4. Encodage et accents 4.1. L encodage 4.2. Les caractères spéciaux
97 4.1. L encodage Problème récurrent Mauvais affichage Texte sans les bons accents Utilité de la balise «charset» Vérifier l encodage des pages dynamiques Base de données Fichiers php : Voir avec les développeurs
98 4.1. L encodage Exemple n 1 Fichier encodé en ISO Charset spécifié en UTF-8
99 4.1. L encodage Exemple n 2 Fichier encodé en UTF-8 Charset spécifié en ISO
100 4. Encodage et accents 4.1. L encodage 4.2. Les caractères spéciaux
101 4.2. Les caractères spéciaux Entité HTML Diminue les problèmes d encodage Interprétée par le navigateurs Adaptation en fonction du charset Gestion des accents et des lettres spécifiques Entité HTML : é é Numéro Unicode : é è Gestion des caractères spéciaux Parenthèses, guillemets etc.
102 4.2. Les caractères spéciaux
103 4.2. Les caractères spéciaux
104 Conclusion
105 Conclusion Quatre éléments principaux Doctype, <html>,<head>, <body> Les types de balises Ouvrantes/fermantes, auto-fermantes Balises «bloc», «inline» Content Model HTML 5 Lié au CSS Balises <title>, les «meta» Pensez référencement Respect des règles de codage et d encodage Documentez vous, codez, essayez!
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,
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
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 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
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
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...
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.
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
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...
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
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
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
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
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é
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
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
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.
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
INU3051 - Information et sites Web 10 avril 2015 SEO. Dominic Forest, Ph.D.
SEO Dominic Forest, Ph.D. École de bibliothéconomie et des sciences de l information Université de Montréal dominic.forest@umontreal.ca www.dominicforest.name www.twitter.com/dforest INU3051 Information
FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006
I. INTRODUCTION 1. Présentation du formateur et des élèves 2. Historique internet : d'où ça vient a. Historique général : 3 étapes majeures 1. l'histoire de l'informatique débute en 1942 avec la première
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
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
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
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
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
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
Guide d implémentation. Réussir l intégration de Systempay
Guide d implémentation - Interface avec la plateforme de paiement - Réussir l intégration de Systempay Version 1.4b Rédaction, Vérification, Approbation Rédaction Vérification Approbation Nom Date/Visa
Le référencement naturel
Le référencement naturel Phases essentielles Choix des mots-clés Où se référencer : moteurs, annuaires Indexation des pages du site dans les moteurs Positionnement et trafic généré Optimisation des pages
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
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
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
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
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
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,
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...
Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall
Internet DNS World Wide Web Mécanismes de base Exécution d'applications sur le web Divers Proxy, fire-wall 1 Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet
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
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le
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
02/02/2011. test 1. Communication visuelle & web. Pao. Principes fondamentaux. Les six principes de base. La mise en page. Module sur trois journées
Communication visuelle & web Module sur trois journées 1, 5 jour : communication print & visuelle 1.5 jour : communication web mise en pratique evaluation sur QCM Vous serez en mesure participer à la conception
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 Index 404 Notifier (erreurs 404) 62 A Adwords 148
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
Audit de site web. Accessibilité
Accessibilité 1. Est- ce que le contenu est structurellement séparé des éléments de navigation? 2. Est- ce que le site est compatible avec tous les navigateurs? 3. Le site est- il compatible avec les normes
Optimiser 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
Peut être utilisée à l intérieur du site où se trouve la liste de référence.
Peut être utilisée dans tous les sites d une collection, si la colonne est créée au niveau du site parent. Peut être utilisée à l intérieur du site où se trouve la liste de référence. Peut être utilisée
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
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
Module BD et sites WEB
Module BD et sites WEB Cours 8 Bases de données et Web Anne Doucet Anne.Doucet@lip6.fr 1 Le Web Architecture Architectures Web Client/serveur 3-tiers Serveurs d applications Web et BD Couplage HTML-BD
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
Sage 100 CRM - Guide de la Fusion Avancée Version 8. Mise à jour : 2015 version 8
Sage 100 CRM - Guide de la Fusion Avancée Version 8 Mise à jour : 2015 version 8 Composition du progiciel Votre progiciel est composé d un boîtier de rangement comprenant : le cédérom sur lequel est enregistré
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
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
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
Inscription de votre site sur Google Configuration du sitemap et de Webmaster Tools pour PrestaBox
Tutoriel PrestaBox n 3 Catégorie : Référencement Inscription de votre site sur Google Configuration du sitemap et de Webmaster Tools pour PrestaBox Pour vous aider dans la mise en place et la gestion de
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
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
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,
SITE INTERNET BLOG SITE E-COMMERCE GRILLE D ANALYSE / AUDIT PREMIERE ANALYSE. Entreprises. o Public spécialisé o Etudiants o Enfants
PREMIERE ANALYSE Nom du site web : Url du site : Objectif du site / description (balise description) : Mots-clés du site (balise keywords) : Cible du site : o Entreprises o Public spécialisé o
2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22
SOMMAIRE INTRODUCTION La collection Classroom in a Book TinyUrL Conditions requises Installation du programme Copie des fichiers Classroom in a Book ordre recommandé pour les leçons Démarrage instantané
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
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
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.
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
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).
.. 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
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
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
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
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
XML par la pratique Bases indispensables, concepts et cas pratiques (3ième édition)
Présentation du langage XML 1. De SGML à XML 17 2. Les bases de XML 18 2.1 Rappel sur HTML 18 2.2 Votre premier document XML 19 2.3 Les avantages de XML 21 3. La syntaxe XML 21 3.1 La première ligne du
Google Actualités. Propriétés techniques. Structure des URL
Si l efficacité des textes alliée au text appeal (pour reprendre l expression de Sébastien Billard) et à la quête de «l hypertextualité» est l apanage du rédacteur web, l optimisation du contenu favorise
Introduction. M2206 Intégration web. Introduction. Introduction 20/01/2014
Introduction M2206 Intégration web http://www.atinternet.fr/ressources/ressources/etudespubliques/barometre-des-moteurs/ Référencement des sites web et moteurs de recherche Introduction Introduction http://www.go-gulf.com/blog/social-networking-user/
FileMaker Server 11. Publication Web personnalisée avec XML et XSLT
FileMaker Server 11 Publication Web personnalisée avec XML et XSLT 2007-2010 FileMaker, Inc. Tous droits réservés. FileMaker, Inc. 5201 Patrick Henry Drive Santa Clara, Californie 95054 FileMaker est une
Théorie : internet, comment ça marche?
Théorie : internet, comment ça marche? L histoire d internet 1969 Tout débute aux Etats-Unis. Les soviétiques ont lancé leur satellite Spoutnik en 1957 et les américains ont peur d une guerre nucléaire.
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?
Groupe Eyrolles, 2003, ISBN : 2-212-11317-X
Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une
20 techniques et bonnes pratiques d un positionnement visible gratuit et durable sur Internet
2 20 techniques et bonnes pratiques d un positionnement visible gratuit et durable sur Internet Edition 2010 3 Sommaire Conditions générales d utilisation...5 Si votre site est créé par un prestataire...6
US & COUTUMES : LES REGLES D USAGE EN E- MAIL MARKETING Ou comment optimiser vos chances de bien réaliser des campagnes en toute sérénité
Accélérateur de performances e-marketing 1 US & COUTUMES : LES REGLES D USAGE EN E- MAIL MARKETING Ou comment optimiser vos chances de bien réaliser des campagnes en toute sérénité Pourquoi de bonnes pratiques?
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
Rapport de projet Site web pour une association
51, rue Barthélémy de Laffemas BP 29 26901 Valence Cedex 9 Rapport de projet Site web pour une association Année 2006-2007 Bruno SABOT 1ère année DUT R&T Mathieu ROGER 2ème année DUT R&T Rapport réalisé
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
Formation Découverte du Web
Catégorie : internet Formation Découverte du Web Niveau requis : savoir utiliser un ordinateur (clavier, souris, traitement de texte) Public : personnel administratif et responsables de communication souhaitant
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
Content Management System. bluecube. Blue Cube CMS V4.3 par Digitalcube
Content Management System bluecube V4.3 1 SOMMAIRE Avant-propos Découvrir le CMS Blue Cube Les modules Les clients BLUE CUBE CMS V4.3 par Digitalcube 2 CMS sans bugs 3 Avant-propos Facile à prendre en
FileMaker Server 12. publication Web personnalisée avec XML
FileMaker Server 12 publication Web personnalisée avec XML 2007-2012 FileMaker, Inc. Tous droits réservés. FileMaker, Inc. 5201 Patrick Henry Drive Santa Clara, California 95054 FileMaker et Bento sont
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
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
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é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
CREATION d UN SITE WEB (INTRODUCTION)
CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour
Un mini-site internet en une après-midi
Prérequis Posséder un ordinateur équipé d un logiciel pour écrire des fichiers texte simples, (SimpleText, BlocNotes, etc...), d un logiciel de Navigation Internet (InternetExplorer, Netscape, Mozilla,
WordPress, thèmes et plugins : mode d'emploi
WordPress, thèmes et plugins : mode d'emploi Sommaire 01 Faisons connaissance 1.1 Qui suis-je? 1.2 WordPress en 2 mots 1.3 Thème et plugin 02 Si je veux 03 Quelques extensions utiles 04 Comment chercher
Guide et conseils généraux pour optimiser le référencement d un site internet
Guide et conseils généraux pour optimiser le référencement d un site internet Novembre 2010 1 Introduction Le référencement de votre site internet vous permet d être présent dans les différents moteurs
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
HTML/CSS - Travaux Pratiques 2
HTML/CSS - Travaux Pratiques 2 Le but de ces séances de TP est de se familiariser avec le format HTML et les feuilles de style CSS pour la création de pages web. Pour cela, vous utiliserez emacs sous Linux
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
Interaction entre réseaux sociaux et sites web
Formation des Tisserands 22-23 janvier 2011 Interaction entre réseaux sociaux et sites web Intégrer les réseaux sociaux sur son site Internet Partager des informations sur les deux supports François NAUTRÉ