Créer son site web. Avec la distribution e-change Benoît Mamet Cédric Morin
|
|
|
- Adeline Lucile Leboeuf
- il y a 8 ans
- Total affichages :
Transcription
1 Créer son site web Avec la distribution e-change Benoît Mamet Cédric Morin Ritimo-Nursit // Module 2 // Octobre
2 Les standards du Web : HTML Introduction aux langages utilisés Ritimo-Nursit // Module 2 // Octobre
3 Les pages HTML Bases théoriques et pratiques Ritimo-Nursit // Module 2 // Octobre
4 Définition HTML : HyperText Markup Language Langage universel de conception de pages Web créé en 1998 par le W3C (World Wide Web Consortium) Hypertexte : permet de créer des liens hypertextes vers des ressources locales ou distantes. C est un langage de marquage de document, il permet de décrire la structure d un document électronique sous forme lisible par un être humain et interprétable par une machine. XHTML rationalisation de l'html visant à assurer une transition (abandonnée) vers l'xml HTML5 évolution moderne de HTML Ritimo-Nursit // Module 2 // Octobre
5 Pas de mise en forme définitive HTML est un langage qui décrit le contenu, la structure logique et la présentation globale d un document mais pas son aspect final à l écran, qui dépend de l'outil utilisé (écran, synthétiseur vocal, imprimante). Différent d'un document PDF par exemple. Ex : l'utilisateur peut modifier au moment de l'affichage plusieurs paramètres de présentation. Dans Firefox : Affichage > Taille du texte Affichage > Style de la page Ritimo-Nursit // Module 2 // Octobre
6 Hello World page1.html Ouvrir un éditeur, taper et enregistrer le fichier page1.html suivant : <html> <html> <head> <head> </head> </head> <body> <body> Hello Hello World World!! </body> </body> </html> </html> Ouvrir ce fichier avec votre navigateur Firefox Vérifier le code source de ce fichier Ritimo-Nursit // Module 2 // Octobre
7 Structuration avec des balises Les fichiers HTML sont constitués de texte. Pour définir la structure du document, on utilise des balises délimitées par les caractères < et > Balise ouvrante : <balise> Balise fermante : </balise> Les balises définissent une propriété qu'elles appliquent au contenu qu'elles encadrent. Une balise ouverte doit toujours être fermée. <balise1>contenu</balise1> <balise1>contenu</balise1> Ritimo-Nursit // Module 2 // Octobre
8 Exemples Titre de niveau 1 <h1>titre</h1> <h1>titre</h1> Mise en exergue <strong>important</strong> <strong>important</strong> Paragraphe <p> <p> texte texte texte texte texte texte texte texte texte texte texte texte </p> </p> Ritimo-Nursit // Module 2 // Octobre
9 Les balises auto-fermantes Certains éléments appelés éléments vides ne marquent pas du texte. Il n ont pas de contenu, les balises de début et de fin peuvent être combinées : <br></br> <br></br> = <br <br /> /> Il s'agit la plupart du temps de balises nécessitant des attributs : <img <img src=" src=" alt="ecureuil" alt="ecureuil" /> /> Ritimo-Nursit // Module 2 // Octobre
10 Ajout d'attributs Des attributs peuvent être ajoutés à un élément Ils précisent celui-ci (apparence, comportement...) sans faire partie de son contenu Le nom de l attribut apparaît après le nom d élément dans la balise ouvrante et est suivi du signe = puis de la valeur de l attribut entre guillemets. Les attributs d un élément forment un ensemble (nom unique, pas d ordre). <a <a href=" href=" title="site title="site SPIP">Cliquer SPIP">Cliquer ici</a> ici</a> Ritimo-Nursit // Module 2 // Octobre
11 Imbrication Les éléments peuvent être imbriqués les uns dans les autres : <p> <p> <strong> <strong> texte texte texte texte texte texte </strong> </strong> </p> </p> Il ne peut pas y avoir de chevauchement. Tout élément doit être fermé avant ceux qui le contiennent. Un document ainsi structuré forme donc un arbre dont les nœuds sont les éléments et les feuilles des fragments du texte. Ritimo-Nursit // Module 2 // Octobre
12 TP page2.html Compléter votre page avec : une balise de titre 1 <h1> autour de Hello World deux paragraphes de votre choix <p> la mise en intonation <strong> d'une partie du texte à l'intérieur d'un paragraphe l'image de l'écureuil SPIP à l'intérieur d'un paragraphe <img /> Vérifier le résultat localement dans le navigateur Envoyer la page en ligne à la racine de votre site en FTP La consulter en ligne Ritimo-Nursit // Module 2 // Octobre
13 Structure d'un document <html> <html> <head> <head> <title>ma <title>ma page</title> page</title> <meta <meta name="author" name="author" content="polatouche" content="polatouche" /> /> </head> </head> <body> <body> <h1>hello <h1>hello World World!</h1>!</h1> <p> <p> Nous Nous avons avons trouvé trouvé la la photo photo d'un d'un animal. animal. Il Il s'agit s'agit d'un<strong>ecureuil</strong> d'un<strong>ecureuil</strong> <img <img src=" src=" /> /> </p> </p> <p>pour <p>pour en en savoir savoir plus plus cliquer cliquer <a <a href=" href=" </p> </p> </body> </body> </html> </html> Ritimo-Nursit // Module 2 // Octobre
14 Trois éléments de base <html>...</html> : le document complet <head>...</head> : l en-tête type de document type de caractères mots clés titre de la fenêtre <body>...</body> : le corps du document blocs contenu : texte, tableaux, images, sons... inclusion d'applications : flash, javascript, java Ritimo-Nursit // Module 2 // Octobre
15 Structure arborescente Un document HTML peut être lu comme un arbre html L ordre des nœuds et leur imbrication précisent la structure du document head body Cette structure est exploitable : Quels sont les titre et auteur du document? Combien y-a-t-il de paragraphes? Quel est le titre de niveau 1 qui précède le 1er paragraphe? title meta p h1 strong p Utilisé pour le DOM (Document Objet Model) Ritimo-Nursit // Module 2 // Octobre
16 Interprétation Le document HTML peut être visualisé dans un navigateur, la structure logique est interprétée pour fournir une présentation Un document peut donc être considéré à trois niveaux : physique (syntaxe) logique (structure d arbre) présentation : navigateur, téléphone, pda, lecteur audio... HTML <html> <head></head> <body> <p> Hello <strong> World </strong> </p> </body> </html> Ritimo-Nursit // Module 2 // Octobre 2013 Firefox «Hello World!» VoiceXML 16
17 Règles d'édition Dans un nouveau fichier, commencer par copier l'ossature du fichier HTML par défaut Les espaces, les tabulations et les retours à la ligne ne sont pas interprétés par le navigateur Pour forcer les retours à la ligne : utiliser des paragraphes <p> ou des césures <br /> Pour forcer l'espacement : utiliser des espaces insécables Utiliser les caractères spéciaux é = é è = è à = à Ritimo-Nursit // Module 2 // Octobre
18 Pour une bonne lisibilité de la source Ajouter des commentaires : <!-- --> <!-- <!-- commentaire commentaire --> --> Aérer le document : retour à la ligne + lignes vides <body> <body> <p> <p> <h1>texte</h1> <h1>texte</h1> </p> </p> </body> </body> Indenter les éléments <body> <body> <p> <p> <h1>texte</h1> <h1>texte</h1> </p> </p> </body> </body> Ritimo-Nursit // Module 2 // Octobre
19 Pour une bonne lisibilité de la source NON <html><head><title>ma page</title></head><body><h1>hello World! <html><head><title>ma page</title></head><body><h1>hello World! </h1><p>nous avons trouvé la photo d'un animal. </h1><p>nous avons trouvé la photo d'un animal. <img src=" /></p></body></html> <img src=" /></p></body></html> OUI <html> <html> <head> <head> <title>ma page</title> <title>ma page</title> </head> </head> <body> <body> <!-- Début du corps du document --> <!-- Début du corps du document --> <h1>hello World!</h1> <h1>hello World!</h1> <p> <p> Nous avons trouvé la photo d'un animal. Nous avons trouvé la photo d'un animal. <img src=" /> <img src=" /> </p> </p> <!-- Fin du corps du document --> <!-- Fin du corps du document --> </body> </body> </html> </html> Ritimo-Nursit // Module 2 // Octobre
20 Editeurs de texte GPL et gratuits notepad++ (Windows) voir aussi : ultraedit, context gedit (Ubuntu) activer le greffon balises voir aussi : Anjuta, Screem Ritimo-Nursit // Module 2 // Octobre
21 Editeur de texte gratuit TextWrangler (MacOS) Ritimo-Nursit // Module 2 // Octobre
22 TP page3.html Installer l'éditeur correspondant à votre ordinateur Ouvrir votre fichier précédent Rendre la source lisible ajouter des commentaires l'indenter et ajouter des espaces vérifier que cela n'a pas de conséquence sur l'affichage Ajouter dans le paragraphe de votre choix, un retour à la ligne puis la phrase «cet été je n'irai pas à la plage» Mettre la page en ligne à jour et vérifier l'affichage Ritimo-Nursit // Module 2 // Octobre
23 XHTML L'ex-futur de HTML Ritimo-Nursit // Module 2 // Octobre
24 Définition XHTML : extensible HyperText Markup Language Evolution de l'html visant à standardiser et homogénéiser le langage rendre la syntaxe plus rigoureuse pour être lue plus facilement par les machines unifier l'interprétation par les navigateurs assurer une transition vers un langage en arbre (XML) A partir de XHTML 1.0 on peut évaluer la conformité de la syntaxe avec la norme du W3C (World Wide Web Consortium) Permet de repérer plus facilement les mauvaises pratiques (accessibilité) Ritimo-Nursit // Module 2 // Octobre
25 Principes de XHTML Toute balise ouvrante doit être fermée Les éléments doivent être correctement imbriqués Les balises et les attributs doivent être écrits en minuscules Les valeurs des attributs doivent apparaître entre apostrophes ou guillemets Chaque attribut doit avoir une valeur L attribut name ne doit plus être utilisé pour l'identification des balises. A la place on utilisera l attribut id (qui servait déjà pour les CSS). <p>texte</p> <p>texte</p> <p>texte <strong>important</strong></p> <p>texte <strong>important</strong></p> <p id="par1">texte</p> <p id="par1">texte</p> <img src="/img/carte.jpg" alt="" /> <img src="/img/carte.jpg" alt="" /> Ritimo-Nursit // Module 2 // Octobre
26 Buts et pratiques Avec XHTML on a aussi encouragé la disparition de toute notion de mise en forme dans la page HTML et d'en laisser la gestion aux feuilles de style. Les balises doivent orienter le sens sémantique donné au texte, mais pas sa mise en forme : <em> plutôt que <italic> Certaines balises et attributs sont déconseillés : police : <font face="arial"></font> gras et italique : <b></b> et <i></i> centrer : <center></center> <body background="white" bgcolor="black"></body> ->Il est plus facile d'initier un projet de design Web aujourd'hui qu'il y a 3 ans! Ritimo-Nursit // Module 2 // Octobre
27 Structure de document XHTML 1.0 Un document XHTML 1.0 est un document HTML 4.01 précédé d'un élément : le doctype (type de document) Doctype XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " " respecte les cinq principes du XHTML autorise la présence des balises <font>,<center> et des attributs border, align, bgcolor, target autorise l'emploi des <iframe> -> permets un passage progressif des documents (et des compétences) vers l'xhtml Ritimo-Nursit // Module 2 // Octobre
28 Structure de document XHTML 1.0 Doctype XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " " identique au doctype transitional remplace <body> par <frameset> + <frame> -> permets l'utilisation de sous-sites dans un site Doctype XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " " toutes les balises et les attributs déconseillées sont exclues -> pour les sites validés W3C (rare!) Ritimo-Nursit // Module 2 // Octobre
29 Structure de la page XHTML 1.0 type <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " " <html xmlns=" xml:lang="fr" lang="fr"> <html xmlns=" xml:lang="fr" lang="fr"> <head> <head> <title>ma page</title> <title>ma page</title> <!-- type de document et de caractères --> <!-- type de document et de caractères --> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- meta donnees pour les moteurs de recherche --> <!-- meta donnees pour les moteurs de recherche --> <meta name="description" content="titre" /> <meta name="description" content="titre" /> <meta name="author" content="p. VINCENT" /> <meta name="author" content="p. VINCENT" /> <meta name="keywords" lang="fr" content="mot1, mot2" /> <meta name="keywords" lang="fr" content="mot1, mot2" /> <meta name="robots" content="all" /> <meta name="robots" content="all" /> <!-- feuilles de style --> <!-- feuilles de style --> <link rel="stylesheet" type="text/css" media="screen" href="feuille.css" /> <link rel="stylesheet" type="text/css" media="screen" href="feuille.css" /> </head> </head> <body> <body> </body> Ritimo-Nursit // Module 2 </body> // Octobre
30 HTML5 Hé, vous allez rire : XHTML c'était une blague! Ritimo-Nursit // Module 2 // Octobre
31 Définition On jette tout et on recommence depuis HTML (ou presque) En fait on s'en fiche des balises bien fermées etc. (mais continuez à bien les écrire si vous avez pris l'habitude) Plein de nouvelles balises et attributs Pour structurer le document (<article>,<section>,<header>,<footer> ) Pour les médias (<audio>,<video>,<track> ) Pour les interfaces utilisateur (webforms, <meter>,<progress> ) Plein d'api javascript modernes (geolocalisation, stockage dans le navigateur, visioconf, mesure du temps de chargement de la page ) Ritimo-Nursit // Module 2 // Octobre
32 En pratique Normalisation figée dans ~10 ans Implémentation dans les navigateurs en cours : Support partiel, plus ou moins bon est l'ami du bidouilleur (et de l'expert aussi) Ritimo-Nursit // Module 2 // Octobre
33 Structure de document HTML 5 Doctype HTML réduit a sa plus simple expression <!DOCTYPE HTML> <!DOCTYPE HTML> Permet de faire du HTML ou du XHTML :) Pas de validateur à jour pour vérifier la syntaxe :( Ritimo-Nursit // Module 2 // Octobre
34 HTML de la tête au pied Ritimo-Nursit // Module 2 // Octobre
35 Ne pas perdre la tête! <head></head> Ritimo-Nursit // Module 2 // Octobre
36 Mentions obligatoires Le titre <title></title> Il apparaît dans le haut de la fenêtre du navigateur. Il est utilisé pour le référencement par les moteurs de recherche et le stockage d'informations locales par le navigateur <title>ma page</title> <title>ma page</title> Les marqueurs de meta-données <meta /> Mentions non affichées mais utiles pour les moteurs de recherche (ne sont plus utilisées pour le référencement) auteur, description, tags, date <meta name="description" content="description parfois affichée par les moteurs de recherche." /> <meta name="description" content="description parfois affichée par les moteurs de recherche." /> <meta name="author" content="polatouche" /> <meta name="author" content="polatouche" /> <meta name="keywords" lang="fr" content="economie, social" /> <meta name="keywords" lang="fr" content="economie, social" /> <meta name="date" content=" "> <meta name="date" content=" "> <meta name="robots" content="all" /> <meta name="robots" content="all" /> Ritimo-Nursit // Module 2 // Octobre
37 Meta données Type de document et jeu de caractère <meta /> Indique au navigateur la version HTML ou XHTML Donne le jeu de caractères d'encodage (défault UTF-8) <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Rechargement ou redirection de page <meta /> Permets à la page d'être redirigée au bout d'un certain temps <meta http-equiv="refresh" content="5; URL= <meta http-equiv="refresh" content="5; URL= JAMAIS PLUS JAMAIS NEVER EVER Ritimo-Nursit // Module 2 // Octobre
38 Inclusion des styles CSS Feuilles de style externes <link /> Indique l'adresse d'inclusion des feuilles de style.css liées à la page <link rel="stylesheet" type="text/css" media="screen" href="feuille.css" /> <link rel="stylesheet" type="text/css" media="screen" href="feuille.css" /> Feuilles de style locales <style> Permets de déclarer les styles dans la page HTML elle-même <style type="text/css"> <style type="text/css"> /* Mon style */ /* Mon style */ </style> </style> Ritimo-Nursit // Module 2 // Octobre
39 Inclusion de scripts JavaScript Script Javascript externe <script /> Indique l'adresse d'inclusion du script.js lié à la page <script type="text/javascript" src="menu.js" /> <script type="text/javascript" src="menu.js" /> Script Javascript local <script> Permets de déclarer les styles dans la page HTML elle-même <script type="text/javascript"> <script type="text/javascript"> /* Mon script */ /* Mon script */ </script> </script> Ritimo-Nursit // Module 2 // Octobre
40 Divers Information de flux RSS <link /> Indique la présence et l'adresse du lien RSS de la page via le navigateur de l'internaute <link rel="alternate" type="application/rss+xml" href="spip.php?page=backend" <link rel="alternate" type="application/rss+xml" href="spip.php?page=backend" title="mon site" /> title="mon site" /> Icône du site (favicon) <link /> Modifie l'icône affiché dans la barre d'adresse <link rel="shortcut icon" type="image/png" href="/dist/favicon.png" /> <link rel="shortcut icon" type="image/png" href="/dist/favicon.png" /> Ritimo-Nursit // Module 2 // Octobre
41 TP page_standard.html Ouvrir le fichier page_standard.html Modifier : le titre les meta-données : auteur, mots-clefs, descriptif Enregister la page sous : ma_page_standard.html La passer en lecture seule. Cette page est votre page HTML vierge par défaut pour toutes vos créations à venir. Modifier le favicon Ajouter l'information du flux RSS de votre site Ritimo-Nursit // Module 2 // Octobre
42 Donner du corps à vos pages <body></body> Ritimo-Nursit // Module 2 // Octobre
43 Balises de type bloc Ce sont des «boîtes» qui peut contenir d'autres éléments de type bloc des éléments de type en ligne des balises auto-fermantes du texte les blocs se positionnent les uns en dessous des autres et occupent toute la largeur du parent titre texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte2 texte2 texte2 texte2 texte2 texte2 <div> <div> <h1>titre</h1> <h1>titre</h1> <p>texte texte texte</p> <p>texte texte texte</p> <p>texte2 texte2 texte2</p> <p>texte2 texte2 texte2</p> </div> </div> Ritimo-Nursit // Module 2 // Octobre
44 Balises de type en-ligne Ce sont des «boîtes» qui peut contenir des éléments de type en-ligne du texte mais pas de balises de type bloc un élément en ligne se trouve donc aux derniers maillons de l'arbre html les éléments en ligne se placent à côté les uns des autres et habillent l'élément parent texte texte texte texte2 texte2 <div> <div> <span>texte texte texte</span> texte2 texte2 texte2 texte2 texte2 <span>texte texte texte</span> <span>texte2 <em>texte2</em> texte2 <span>texte2 <em>texte2</em> texte2 texte2 texte2 texte2 texte2 texte2</span> texte2 texte2 texte2</span> <img src="/img/spip.jpg" /> <img src="/img/spip.jpg" /> </div> </div> Ritimo-Nursit // Module 2 // Octobre
45 Conteneurs génériques BLOC <div> élément neutre permettant de regrouper des éléments de tout type (bloc ou en-ligne) : <div>,<span>,<h1>,<img />... ne pas abuser des <div> et préférer des éléments avec du «sens» sémantique <div> <div> <h1>question existentielle :</h1> <h1>question existentielle :</h1> <blockquote>to be SPIP or not to be?</blockquote> <blockquote>to be SPIP or not to be?</blockquote> </div> </div> Ritimo-Nursit // Module 2 // Octobre
46 Conteneurs génériques EN-LIGNE <span> élément neutre pour regrouper des éléments en-ligne : <img />,<strong>,<em>... <span><abbr>spip</abbr> est un outil de publication <span><abbr>spip</abbr> est un outil de publication <strong>partagé</strong></span> <strong>partagé</strong></span> Ritimo-Nursit // Module 2 // Octobre
47 Attributs de nommage id et class sont utilisés pour nommer les éléments HTML afin de leur appliquer des styles CSS id désigne un élément unique dans la page class désigne un élément qui peut apparaître plusieurs fois <div <div id="bloc1"> id="bloc1"> <span <span class="texte">texte2 class="texte">texte2 texte2 texte2 texte2 texte2 texte2 texte2 texte2 texte2 texte2</span> texte2</span> <a <a href="page.html" href="page.html" class="lien">cliquer class="lien">cliquer ici</a> ici</a> </div> </div> Ritimo-Nursit // Module 2 // Octobre
48 Le site Ritimo-Nursit // Module 2 // Octobre
49 TP Regarder la structure de la page à l'aide des outils développeurs du navigateur Ritimo-Nursit // Module 2 // Octobre
50 Balises Ritimo-Nursit // Module 2 // Octobre
51 Les balises de type bloc Balise Signification <body> <div> <p> Balise bloc mère du corps de la page, c'est le conteneur principal Conteneur de blocs Paragraphe <h1>... <h6> Titre de niveau 1 à 6 <blockquote> Marque une citation <pre> <ul>,<ol>,<li> <dl>,<dd>,<dt> <table>,<th>,<tr>,<td> <tbody>, <thead>, <tfoot> <fieldset>, <form> <noscript> <map> <hr /> Affiche exactement ce qu'on y mets(tabulations,sauts) Liste énumérative et liste numérotée Liste de définition Tableaux Sous partie d'un tableau Formulaire interactif Texte alternatif aux scripts image réactive (nécessite <area>) Séparation horizontale Note : Il s'agit essentiellement d'éléments de structure Ritimo-Nursit // Module 2 // Octobre
52 Les nouvelles balises de type bloc Balise <section> <article> <aside> <header> <footer> <nav> <figure>,<figcaption> Signification définit les sections dans un document. Tels que les chapitres, en-têtes, pieds de page, ou toutes autres sections du document. partie indépendante du site, comme un commentaire. associé à la balise qui le précède. spécifie une introduction, ou un groupe d'éléments de navigation pour le document. définit le pied de page d'un article ou un document. Contient généralement le nom de l'auteur, la date à laquelle le document a été écrit et / ou ses coordonnées. définit une section dans la navigation. définit des images, des diagrammes, des photos, du code, etc. (et sa légende) <audio> <video> <canvas> pour définir un son, comme la musique ou les autres flux audio (streaming). Insérer un contenu vidéo en streaming. Liste de définition Ritimo-Nursit // Module 2 // Octobre
53 Liste des balises de type en-ligne Balise <span> <a> <img /> <br /> <em>, <strong> <abbr>, <acronym>, <cite>, <q>, <dfn> <del>, <ins> <kbd>, <code>, <samp>, <var> <sub>, <sup> <object> Signification Conteneur en-ligne Liens Images Saut de ligne Mise en intonation du texte Sigle, citation et définition Suppression / ajout de texte Instruction et code Indices et exposants Animation multimédia embarquée Note : Il s'agit essentiellement d'éléments de contenu / mise en forme Ritimo-Nursit // Module 2 // Octobre
54 Les balises de Titre page4.html <h1>...<h6> BLOC permets de hiérarchiser les titres en 6 niveaux personnalisables via les CSS ne peuvent pas inclure de balises de type BLOC <div> <div> <h1>liste <h1>liste des des Outils Outils Internet</h1> Internet</h1> <h2>navigateurs</h2> <h2>navigateurs</h2> <h3>ie</h3> <h3>ie</h3> <h3>firefox</h3> <h3>firefox</h3> <h2>cms</h2> <h2>cms</h2> <h3>spip</h3> <h3>spip</h3> <h3>joomla</h3> <h3>joomla</h3> </div> </div> Ritimo-Nursit // Module 2 // Octobre
55 Les balises de paragraphe page5.html Ne peuvent pas contenir d'autres balises de type Bloc <p>, <hr />, <pre>, <blockquote> BLOC <div> <div> <p>to be SPIP or not to be?</p> <p>to be SPIP or not to be?</p> <pre> <pre> Nul ne le sait Nul ne le sait mais mais il convient d'y réfléchir il convient d'y réfléchir à l'aide de cette citation : à l'aide de cette citation : </pre> </pre> <hr /> <hr /> <blockquote lang="fr" cite="de l'âme, Aristote"> <blockquote lang="fr" cite="de l'âme, Aristote"> «C'est aussi pourquoi il n'y a pas «C'est aussi pourquoi il n'y a pas à rechercher si l'âme et le corps sont une à rechercher si l'âme et le corps sont une seule chose, pas plus qu'on ne le fait pour seule chose, pas plus qu'on ne le fait pour la cire et l'empreinte, ni d'une manière générale la cire et l'empreinte, ni d'une manière générale pour la matière d'une chose quelconque et pour la matière d'une chose quelconque et ce dont elle est la matière.» ce dont elle est la matière.» </blockquote> </blockquote> <hr /> <hr /> </div> </div> Ritimo-Nursit // Module 2 // Octobre
56 Les liens page6.html <a> EN-LIGNE permets de naviguer au sein de la page ou vers une autre page attributs href : destination (obligatoire) title : infobulle name : pour nommer une ancre En HTML5 les liens peuvent contenir des blocs <a <a href=" href=" title="site title="site SPIP">Cliquer SPIP">Cliquer ici</a> ici</a> <br <br /> /> <a <a href="#en_bas">aller href="#en_bas">aller jusqu'à jusqu'à l'ancre l'ancre en en bas</a> bas</a> <br <br /> /> <br <br /> /> <a <a href="#" href="#" name="en_bas">ici</a> name="en_bas">ici</a> Ritimo-Nursit // Module 2 // Octobre
57 Les images page7.html <img /> intègre l'image dans la page HTML attributs EN-LIGNE src : source (obligatoire) alt : texte alternatif pour autres moteurs de rendu ou pb (nécessaire, alt= si l'image n'a pas de sens) title : info-bulle width et height : taille <img src=" alt="écureuil" <img src=" alt="écureuil" title="est-ce un mammifère?" width="400px" height="400px" /> title="est-ce un mammifère?" width="400px" height="400px" /> Ritimo-Nursit // Module 2 // Octobre
58 Les tableaux page8.html <table>, <tr>, <th>, <td> BLOC permets d intégrer un tableau de données dans la page <table> <table> <tr> <tr> <th>poisson</th> <th>poisson</th> <td>20 <td>20 euros</td> euros</td> <td>500 <td>500 grammes</td> grammes</td> </tr> </tr> <tr> <tr> <th>viande</th> <th>viande</th> <td>15 <td>15 euros</td> euros</td> <td>900 <td>900 grammes</td> grammes</td> </tr> </tr> </table> </table> Ritimo-Nursit // Module 2 // Octobre
59 Les listes page9.html <ul>, <ol>, <li> <p>voici <p>voici une une liste liste non-ordonnée non-ordonnée :</p> :</p> BLOC <ul> <ul> <li>le <li>le XHTML XHTML est est accessible</li> accessible</li> <li>le <li>le XHTML XHTML est est bien bien structuré</li> structuré</li> <li>le <li>le XHTML XHTML est est donne donne un un sens sens à à vos vos pages pages web</li> web</li> </ul> </ul> <p>voici <p>voici une une liste liste ordonnée ordonnée :</p> :</p> <ol> <ol> <li>le <li>le XHTML XHTML est est accessible</li> accessible</li> <li>le <li>le XHTML XHTML est est bien bien structurer</li> structurer</li> <li>le <li>le XHTML XHTML est est donne donne un un sens sens à à vos vos page page web web : : <ol> <ol> <li>c'est <li>c'est bon bon pour pour les les internautes</li> internautes</li> <li>c'est <li>c'est bon bon pour pour les les moteurs moteurs de de recherche</li> recherche</li> </ol> </ol> </li> </li> </ol> </ol> Ritimo-Nursit // Module 2 // Octobre
60 Les définitions page10.html <dl>, <dt>, <dd> BLOC Comme les listes ne peut pas contenir d'autres éléments de type bloc que ceux notés ici <p>voici <p>voici une une liste liste de de termes termes et et de de définitions définitions :</p> :</p> <dl> <dl> <dt>développeur</dt> <dt>développeur</dt> <dd>un <dd>un développeur développeur est est un un informaticien informaticien qui qui programme programme des des logiciels.</dd> logiciels.</dd> <dt>web</dt> <dt>web</dt> <dd>réseau <dd>réseau maillé maillé de de serveurs serveurs d'informations d'informations formant formant une une toile toile d'araignée.</dd> d'araignée.</dd> </dl> </dl> Ritimo-Nursit // Module 2 // Octobre
61 Les balises sémantiques page11.html L'apparence et le sens sont modifiés <em> indique une importance au texte <strong> indique une importance plus grande <abbr>, <cite>, <q>, <dfn>, <code> EN-LIGNE abréviations, définitions et citation de code <div> <div> Une <em>information</em> <strong>importante</strong> doit être partagée. Une <em>information</em> <strong>importante</strong> doit être partagée. <abbr title="système de publication pour l'internet partagé" lang="fr">spip</abbr> <abbr title="système de publication pour l'internet partagé" lang="fr">spip</abbr> <q>to be or not to be.</q> <cite>shakespear</cite> <q>to be or not to be.</q> <cite>shakespear</cite> <dfn>un kiwi</dfn> est un fruit exotique mais aussi un petit animal. <dfn>un kiwi</dfn> est un fruit exotique mais aussi un petit animal. En PHP, la variable langage sera <code>$langage = "XHTML";</code> En PHP, la variable langage sera <code>$langage = "XHTML";</code> </div> </div> Ritimo-Nursit // Module 2 // Octobre
62 Les balises de mise en forme L'apparence est modifiée, mais pas le sens <br />, <hr />, <del>, <ins>, <sub>, <sup> <div> <div> Voici des <del>informations</del> <ins>propositions</ins> <br /> Voici des <del>informations</del> <ins>propositions</ins> <br /> de réflexions de réflexions <sub>basses</sub> et <sup>élevées</sup>. <sub>basses</sub> et <sup>élevées</sup>. <hr /> <hr /> </div> </div> Ritimo-Nursit // Module 2 // Octobre
63 Les objets embarqués page12.html <object>, <param /> permets d'inclure des animations multimédia à l'intérieur de la page Flash, Active X, Applet Java... EN-LIGNE <div> <div> <object type="application/x-shockwave-flash" <object type="application/x-shockwave-flash" data=" data=" width="831" height="143"> width="831" height="143"> <param name="movie" <param name="movie" value=" /> value=" /> <param name="quality" value="high" />" <param name="quality" value="high" />" </object> </object> </div> </div> Ritimo-Nursit // Module 2 // Octobre
64 Crédits Patrick Vincent (Erasme) Benoit Mamet & Cédric Morin (Nursit) 2013 Support sous Licence GNU FDL Ritimo-Nursit // Module 2 // Octobre
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
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
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
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
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
Bernard Lecomte. Débuter avec HTML
Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.
HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP
IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,
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
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
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...
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
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
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
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
HTML. Notions générales
1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS
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
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
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.
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...
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.
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
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?
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
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
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
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
Publier dans la Base Documentaire
Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008
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
Informatique : 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 :
3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML
Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises
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...
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
SOMMAIRE 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
.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15
.. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles
Les 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
Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.
1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de
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
Publier un Carnet Blanc
Site Web de l association des ingénieurs INSA de Lyon Publier un Carnet Blanc Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008 Publication,
1 ère Université WEB. Courbevoie Samedi 21 octobre 2006. Votre site interactif sur internet.
1 ère Université WEB Courbevoie Samedi 21 octobre 2006 Votre site interactif sur internet. Programme de la journée. 10H30 - Introduction Université web Votre site interactif sur internet. 10H35 Généralités
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
Dévéloppement de Sites Web
1 Dévéloppement de Sites Web Cours II : Internet et HTML - une très brève introduction Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations
Séance d ED n 5 : HTML et JavaScript
Séance d ED n 5 : HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: une réponse : 1)
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,
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
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
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...
Le service de création de site Internet : Mode d emploi. La Création de Site Internet
Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de
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é
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
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
< 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
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
Climat Scolaire - Manuel utilisateur - Chapitre 2 : «Créer, Editer et suivi d un texte»
Climat Scolaire - Manuel utilisateur - Chapitre 2 : «Créer, Editer et suivi d un texte» Espace collaboratif Co-Ment Date : 01/12/2013 Référence du Projet : Chef de Projet : www.cndp.fr/climatscolaire Caroline
Soyez accessible. Manuel d utilisation du CMS
Soyez accessible. Manuel d utilisation du CMS Nameo : mode d emploi Nameo est une agence web basée en Alsace, à Strasbourg. Son champ d action : création ou refonte de sites internet, stratégie et mise
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
Panel des technologies Web
Panel des technologies Web pierre.jean@mines-ales.fr version 0.14 Objectif Un panorama des technologies Web pour comprendre leurs positionnements et leurs utilisations Questions Evaluation Sommaire Avant
CMS 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
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
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
Guide technique d accessibilité pour la création et la refonte des sites Web de l administration publique. Date : Juillet 2010 Version 1.
Guide technique d accessibilité pour la création et la refonte des sites Web de l administration publique Date : Juillet 2010 I- Mode d emploi du présent guide technique...5 II- Recommandations pour le
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
Atelier de Création de pages Web
Atelier de Création de pages Web par Stéphane Groleau SADC Société d aide au développement de la collectivité de Portneuf http://www.sadcportneuf.qc.ca http://www.reseau-sadc.qc.ca/ http://www.dec-ced.gc.ca/
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
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,
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
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
Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr
Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr La balise Intégrer un élément ou un fichier externe (video, audio, flash, pdf ). Le support
Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?
![Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?](/thumbs/18/825045.jpg "Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?")
Aide [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers? Au sein d'un ordinateur, les données et les fichiers sont stockés suivant une structure d'arbre appelée arborescence. Pour
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
Sommaire. -1-Computer en bref. Web en bref. Le web 3.0,...la mobilité. Evolution du Web... ... web1.0, web2.0, web2.b, web3.0...
Evolution du Web... Le web 3.0,...la mobilité... web1.0, web2.0, web2.b, web3.0... Raoul Mengis, -1-Computer Stéphane Gay, -1-Computer Stéphane Micheloud, EPFL Lausanne http://www.1info.com/4w3.html [en]
Classe ClInfoCGI. Fonctions membres principales. Gestion des erreurs
Utilisation des classes de PourCGI par Michel Michaud, version 2002-11-23 Les fichiers PourCGI.h et PourCGI.cpp rendent disponibles deux classes et une fonction libre qui permettent de faire facilement
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
145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com
Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation
Chapitre 1. Prise en main
Guide de référence Guide de référence Chapitre 1. Prise en main Le processus d'enquête Le processus d'enquête comporte 5 étapes toutes prises en charge par le logiciel : Conception des formulaires Cette
Editeur html Guide de l'utilisateur
Ti nymce Editeur html Guide de l'utilisateur Date : février 2012 Version 2.0 Doc ref. tinymce-userguide-2.0 1 Aperçu général Cette documentation est composée de deux documents : Une représentation graphique
Manuel de mise en page de l intérieur de votre ouvrage
Manuel de mise en page de l intérieur de votre ouvrage Merci de suivre strictement les recommandations de ce manuel qui a pour but de vous aider à préparer un livre dont la qualité de mise en page est
Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA
Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Sommaire 1. Introduction 2. Installation 3. Fonctionnement 4. Développement 5. Démonstration 2
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
INTRODUCTION A JAVA. Fichier en langage machine Exécutable
INTRODUCTION A JAVA JAVA est un langage orienté-objet pur. Il ressemble beaucoup à C++ au niveau de la syntaxe. En revanche, ces deux langages sont très différents dans leur structure (organisation du
Parcours 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
ENVOI EN NOMBRE DE Mails PERSONNALISES
MAILING 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
Webmaster / Webdesigner / Wordpress
Webmaster / Webdesigner / Wordpress Pré-requis : Projet professionnel. Bonne maîtrise de l'ordinateur. Bases en infographie et / ou traitement de texte fortement recommandées. Objectifs : Concevoir un
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
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
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
Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014
Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire
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,
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
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
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
HTML5 et CSS3 pour des sites Responsive Web Design
Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur
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
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
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...
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
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
Document Object Model (DOM)
Document Object Model (DOM) Jean-Claude Charr Maître de conférences IUT de Belfort Montbéliard Université de Franche Comté Description générale Définit un standard pour accéder aux documents structurés