Programmation Web - HTML

Save this PDF as:
 WORD  PNG  TXT  JPG

Dimension: px
Commencer à balayer dès la page:

Download "Programmation Web - HTML"

Transcription

1 Programmation Web - HTML Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon /74

2 Introduction De nombreux sites Web (e-commerce, réservations de billets, etc.) ont une (ou plusieurs) BD pour gérer leurs données 2/74

3 Pages Web statiques L utilisateurice demande l accès à une page Web depuis son navigateur URL tapée, clic sur un lien, utilisation d un signet, etc. Le navigateur envoie une demande à un serveur Web Le serveur Web lit le fichier demandé sur le disque dur Le serveur Web envoie le contenu du fichier au navigateur Le navigateur affiche le contenu de la page pour l affichage, il peut également demander le contenu d autres fichiers au serveur (e.g., images) 3/74

4 Pages Web statiques (2) Inconvénient des pages statiques? 4/74

5 Pages Web statiques (2) Inconvénient des pages statiques? Pour changer le contenu, il faut éditer des fichiers 4/74

6 Pages Web dynamiques Idée : générer le contenu de la page au moment où elle est demandée, en fonction : Du contenu d une base de données De paramètres fournis avec la demande (e.g., formulaires) 5/74

7 Pages Web dynamiques (2) L utilisateurice demande l accès à une page Web depuis son navigateur Le navigateur envoie une demande au serveur web comprenant : le nom de la page, qui correspond en fait à un programme éventuellement un ensemble de paramètres Le serveur web va chercher sur le disque le code source du programme et l exécute : en utilisant les paramètres transmis avec la demande du navigateur en récupérant des données dans une BD ou sur le disque Durant l exécution, le programme génère un contenu HTML Le contenu HTML est envoyé au navigateur Le navigateur affiche le résultat 6/74

8 Quelques langages de programmation Web Langages utilisés : Pour la structure et le contenu des pages : HTML, XML Pour la présentation (mise en forme et en page) : CSS Pour le comportement (interactions, vérifications) : Javascript, AJAX 7/74

9 Quelques langages de programmation Web (2) Pour des animations : Flash (à éviter) Pour générer le contenu des pages : récupérer et traiter des données d une BD fabriquer un document (en général un document HTML) PHP, Perl, Python, ASP, Java,... Pour interroger une base de données : requêtes SQL, XPath, XQuery, SPARQL, etc. Dans cette UE : introduction à HTML, CSS et PHP (et SQL) 8/74

10 Quelques outils Nombreux outils pour aider en programmation Web : Éditeurs textuels (Emacs, BlueFish,...) ou WYSIWYG (Dreamweaver, NVU,...) CMS pour Content Management System (Drupal, Joomla, Spip, Wordpress,...) Framework (Symfony, Laravel, Hibernate,...) /74

11 Plan Syntaxe de base du HTML Formulaires Balises structurantes Architecture d un site Web 10/74

12 Généralités HTML pour HyperText Markup Language : Langage de balisage (structure + contenu) Origine : Toujours en développement (HTML5) Extension de fichiers :.html Standard W3C depuis 1996 Fichier HTML : Fichier texte contenant des informations de structuration C est le navigateur qui lit le fichier et interprète les balises pour faire l affichage /74

13 Principe des balises La structure est indiquée à l aide de balises : Le nom de la balise indique le type d élément que l on ajoute (e.g., une image, un titre, un menu) Il existe des balises en paires (une ouvrante, une fermante avec slash) <balise> du texte ou autre </balise> Il existe des balises orphelines (une ouvrante seulement, avec recommandation de mettre le slash fermant) <balise /> 12/74

14 Principe des balises (2) Une balise ouvrante peut contenir des attributs de la forme nom="valeur" : Les attributs permettent de préciser des informations concernant la mise en forme, propriétés de la balise, etc. <balise nom-att1="val1" nom-att2="val2">...</balise> Les balises peuvent être imbriquées (sans s entremêler) : <balise1> <balise2 /> <balise3> </balise3> </balise1> 13/74

15 Structure d une page HTML <!DOCTYPE html> <html lang="fr"> <head> <! métadonnées, scripts, etc. >... </head> <body> Partie affichée dans le navigateur... </body> </html> 14/74

16 Définition du type document Balise doctype spécifie le type de document : Plusieurs versions (et variantes) de la norme HTML Il faut donc préciser laquelle on utilise (et s y tenir) Obligatoire si l on veut faire valider son document par un validateur Balise doctype simplifiée depuis HTML5 : <!DOCTYPE html> Balise html pour le début du document : Attribut lang pour la langue (synthèse vocale) 15/74

17 En-tête (partie <head>) Partie head du fichier HTML pour : Des métadonnées sur le document, utilisables par les navigateurs ou moteurs de recherche : Syntaxe d une métadonnée : <meta name="propriété" content="attributs"> Exemples de métadonnées : la balise title, obligatoire (dans la norme) des mots-clés l encodage du document (important pour afficher correctement les caractères accentués ou spéciaux) le comportement des robots La définition de scripts (qui seront utilisés dans la partie body) Un lien vers une feuille de style ou des scripts externes 16/74

18 En-tête (2) Exemple de fichier en-tête <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>titre de la page</title> <link rel="stylesheet" type="text/css" href="includes/styles.css"> <meta name="keywords" content="cours HTML, HTML5, site web"> </head> <body> Partie affichée dans le navigateur </body> </html> Quatre métadonnées dans la partie head : une spécification du codage, le titre de la page, un lien vers un fichier de style CSS et des mots-clés décrivant le document 17/74

19 Contenu (partie <body>) Le contenu est placé entre les balises <body> et </body> Le contenu est structuré par des balises de mise en page (paragraphes, listes, etc.) 18/74

20 Paragraphes Syntaxe du saut de ligne : une première ligne <br> une seconde ligne Syntaxe d un paragraphe : <p> un texte qui s étend <br> sur plusieurs lignes<br> et qui forme un paragraphe </p> Le texte entre les balises <p> et </p> forme un paragraphe (saut de ligne avant et après le paragraphe) 19/74

21 Texte Balises pour signaler une partie de texte importante : un texte avec des <mark>mots très importants</mark> un texte avec un mot <strong>important</strong> dedans un texte avec des <em>mots moins importants</em> Ces balises sont purement sémantiques : c est le navigateur qui décide de leur appliquer un style (gras, italique), ce qui est personnalisable avec les CSS 20/74

22 Titres Syntaxe des différents types de titres : <h1>un premier titre</h1> c est un titre très important (traduit par le navigateur par un affichage plus gros, en gras) <h2>un second titre </h2> c est un titre important (traduit par le navigateur par un affichage un peu moins gros)... <h6>un sixième titre </h6> c est la balise pour un titre peu important (dernier niveau) Même remarque, balises uniquement sémantiques! 21/74

23 Listes Syntaxe d une liste sans numérotation : <ul> <li>entrée 1</li> <li>entrée 2</li> <li>entrée 3</li> <li>...</li> </ul> Syntaxe d une liste avec numérotation : <ol> <li>entrée 1</li> <li>entrée 2</li> <li>entrée 3</li> <li>...</li> </ol> 22/74

24 Tableaux <table> <tr> <th>colonne 1</th> <th>colonne 2</th> </tr> <tr> <td>case 1</td> <td>case 2</td> </tr> <tr> <td>case 3</td> <td>case 4</td> </tr> </table> La balise <tr> permet de créer une nouvelle ligne, <th> une case d entête et <td> une case de contenu 23/74

25 Liens hypertextes Syntaxe d un lien hypertexte : <a href="adresse_web">zone cliquable</a> Lorsque l on clique sur zone cliquable, on va à l adresse (URL) indiquée par l attribut href Ce qui est entre les balises <a> et </a> (zone cliquable) devient un lien cliquable Autres attributs de la balise <a> : target="cible" pour ouvrir l URL dans cible (target="_blank" pour une nouvelle fenêtre) name="mon_ancre" pour définir une ancre mon_ancre (endroit précis d une page) 24/74

26 Liens hypertextes (2) Caractéristiques du lien : Absolu : adresse_web a un chemin complet (obligatoire pour un lien situé sur un autre site Web ou avec protocole différent) Relatif : adresse_web a un chemin défini par rapport à la page actuelle (préférable sur son site) 25/74

27 Liens hypertextes (2) Exemples de lien <a href="documents/un_doc.pdf">un lien interne, avec chemin relatif</a> <a href="http ://fr.wikipedia.org/">un lien externe, avec chemin absolu</a> <a href="http ://fr.wikipedia.org/" target="_blank">un lien externe, avec chemin absolu, qui s ouvre dans une nouvelle fenêtre</a> <a href="page.html#section3">un lien interne, pointant sur l ancre section3 de la page page.html</a> 26/74

28 Images Syntaxe d insertion d une image : <img src="url_image" alt="texte alternatif" /> Insertion de l image située à l adresse url_image Pas de balise fermante pour <img> Attribut alt="texte alternatif" conseillé (pour des raisons d accessibilité) Balises <figure> et <figcaption> pour ajouter une légende /74

29 Mise en forme du texte Il existe des balises <u>, <b>, <i>, <big>, etc. <b><i>un texte souligné et gras</i></b> 28/74

30 Mise en forme du texte Il existe des balises <u>, <b>, <i>, <big>, etc. <b><i>un texte souligné et gras</i></b> Elles sont obsolètes, il ne faut pas les utiliser! La mise en forme sera réalisée avec les CSS 28/74

31 Bonnes pratiques Les navigateurs sont assez tolérants aux erreurs de programmation en HTML Aérer le code (mise à jour plus facile soutenance de projet) Commenter le code, avec les balises <! > <! ceci est un commentaire > Balises en minuscules Penser à l accessibilité (e.g., attributs alt) Éviter les balises spécifiques à un navigateur Valider son fichier HTML avec un validateur 29/74

32 En résumé HTML = langage de balises, utilisé pour le contenu et la structure Il existe d autres balises pour le multimédia, les cadres, applets, etc. (> 100 balises et > 200 attributs sous HTML5) Démo avec demo1.html (code source sur la page du LIF4) 30/74

33 Plan Syntaxe de base du HTML Formulaires Balises structurantes Architecture d un site Web 31/74

34 Généralités Objectifs des formulaires Web : Permettre à l utilisateurice de saisir des paramètres Envoyer les valeurs saisies pour chaque paramètre au serveur Accéder à une page dynamique générée par le serveur selon les valeurs des paramètres Quels moyens? Différents composants (champs textuels, listes déroulantes, cases à cocher,...) À chaque composant correspond un paramètre 32/74

35 Généralités (2) Des formulaires bien connus pour générer des pages dynamiques... 33/74

36 Formulaires : balise principale Syntaxe générale d un formulaire : <form action="url" method="typem" name="nomf"> contenu_formulaire </form> Formulaire (sans composant) qui a pour attributs : un nom, ici nomf (attribut optionnel) une méthode de transmission des paramètres, ici typem une action sous forme d URL vers le fichier qui sera exécuté après soumission du formulaire, ici url 34/74

37 Formulaires : balise principale (2) Quelques détails sur le formulaire : Valeurs pour l attribut method (méthode de transmission des paramètres) : POST : données dans le corps de la requête HTTP GET : données encodées dans l URL de la page à la fin de l URL, on ajoute le caractère? puis pour chaque paramètre on ajoute nom=val les paramètres sont séparés par le caractère & contenu_formulaire : balises représentant les différents composants de saisie 35/74

38 Composants de formulaire Composant (ou élément) de formulaire : Généralement défini par la balise input Type du composant (liste, case à cocher, etc.) spécifié par l attribut type de la balise input Aussi des composants liste (balise select) et grand texte (balise textarea) Attributs recommandés d un composant : id (identification dans la page) et name (récupération de la valeur par ce nom) 36/74

39 Labels Dans un formulaire, il est recommandé d associer à chaque composant un texte descriptif (label) Syntaxe d un label : <label for="idducomposant">texte descriptif</label> Affiche un label texte descriptif, qui décrit le composant identifié par idducomposant Un clic sur le label donne le focus au composant pour permettre la saisie Important pour l accessibilité 37/74

40 Composant de saisie de texte Syntaxe d un composant de saisie de texte : <input type="text" name="champ1" id="idchamp1"/> Crée un champ de saisie pour une ligne de texte : champ1 est la valeur donnée comme nom du composant idchamp1 est la valeur de l identifiant du composant (celle à utiliser dans l attribut for de <label>) Attributs optionnels : size="un_nombre" : la taille du champ en caractères value="une_valeur" : texte pré-saisi utile pour les opérations de modification Pas de balise fermante 38/74

41 Composant de saisie de texte (2) Syntaxe d un composant de saisie de texte masqué : <input type="password" name="nom"/> Même composant que le champ texte, mais les caractères saisis sont remplacés par des (typiquement utilisés pour saisir un mot de passe) 39/74

42 Composant de saisie d un grand texte Syntaxe d un composant de saisie de grand texte : <textarea name="nom" rows="h" cols="l"> contenu pré saisi </textarea> Crée un champ de saisie pour du texte sur plusieurs lignes, avec les attributs : nom est la valeur du paramètre name de ce composant h est la hauteur du composant en nombre de lignes l est la largeur du composant en nombre de caractères le contenu pré-saisi peut être vide et ne contient pas de balise 40/74

43 Paramètres cachés Syntaxe d un composant caché : <input type="hidden" name="nom" value="val"/> Permet de donner la valeur val au paramètre caché nom Ce composant n est pas affiché utile pour spécifier un identifiant dans un formulaire de modification des informations de la base 41/74

44 Listes déroulantes Syntaxe d une liste déroulante : <select name="nom"> <option value="val1">texte 1</option> <option value="val2">texte 2</option>... </select> Crée une liste déroulante ayant comme sélection possible Texte 1, Texte 2,... La valeur du paramètre name correspond à la sélection de l utilisateurice (e.g., val1 pour Texte 1) L attribut value est optionnel (par défaut, la valeur vaut le texte dans la balise option) Attribut selected="true" dans une des balises option pour pré-sélectionner cette option 42/74

45 Case à cocher Syntaxe d une case à cocher : <label for="id1">texte 1</label><input type="checkbox" name="nom" id="id1" value="label1"/> <label for="id2">texte 2</label><input type="checkbox" name="nom" id="id2" value="label2" /> Crée deux cases à cocher id1 et id2, portant sur le même paramètre (nom), avec pour valeur label1 et label2 : Les cases d un même paramètre nom peuvent toutes être cochées à un moment donné Attribut optionnel checked pour pré-sélectionner une case Utilisation recommandée des balises <label> 43/74

46 Boutons radio Syntaxe d un bouton radio : <label for="id1">texte 1</label><input type="radio" name="nom" id="id1" value="label1"/> <label for="id2">texte 2</label><input type="radio" name="nom" id="id2" value="label2" /> Crée deux boutons radio portant sur le même paramètre (même valeur pour leur attribut name), ayant des valeurs respectives label1 et label2 : Un seul bouton radio coché à un moment donné parmi tous ceux qui portent sur le même paramètre Attribut optionnel checked pour pré-sélectionner 44/74

47 Boutons de soumission Syntaxe d un bouton de soumission : <input type="submit" value="texte" /> Crée un bouton déclenchant le chargement de la page de destination (attribut action de la balise form) texte est le texte affiché sur le bouton Syntaxe d un bouton de réinitialisation des valeurs : <input type="reset" value="texte" /> Crée un bouton déclenchant la réinitialisation du formulaire, en utilisant les valeurs pré-saisies lorsqu elles existent texte est le texte affiché sur le bouton 45/74

48 Autres éléments de formulaires Nouveaux types de l élément <input> en HTML5 : tel, url, search datalist (auto-complète un champ grâce à une liste de valeurs prédéfinies) date, time, datetime, week, month number range (barre de progression) color Nouveaux éléments en HTML5 : <output> (somme d un calcul) <keygen> (génération de clés de cryptage) 46/74

49 Quelques attributs utiles Quelques attributs introduits dans HTML5 : placeholder : texte indicatif dans un champ textuel, qui s efface quand l utilisateurice commence à saisir required : le formulaire ne peut être validé si un de ses composants avec attribut required n est pas rempli pattern : vérifier qu un champ respecte une expression régulière donnée (e.g., pattern pour url) Ajout de sémantique pour l attribut rel (valeurs stylesheet, next, author, etc.) /74

50 En résumé Dans un formulaire, chaque élément de saisie devient un paramètre (nom donné par l attribut name) Définition d une page traitement (attribut action) et d un mode de transmission des paramètres (attribut method) Démo avec demo2.html (code source sur la page du LIF4) 48/74

51 Plan Syntaxe de base du HTML Formulaires Balises structurantes Architecture d un site Web 49/74

52 Sémantique des balises Depuis HTML 5, certaines balises apportent de la sémantique Balises pour organiser le contenu d une page : header footer nav section article aside En général, certaines parties sont communes à toutes les pages du site (e.g., header, footer, nav) /74

53 Sémantique des balises Organisation des pages avec ces balises structurantes. Mais la mise en forme se fait ailleurs, avec le CSS! Deux exemples d organisation de page apprenez-a-creer-votre-site-web-avec-html5-et-css3/ 51/74

54 Balise header L entête d une page, située en haut, inclut souvent le nom du site, un slogan, un logo ou bannière. Il peut y avoir plusieurs entêtes (e.g., une par section) <header> contenu de l entête de la page </header> Ne pas la confondre avec la partie head qui contient l entête du document (métadonnées, scripts, etc.) Un exemple d entête 52/74

55 Balise footer Le pied de page, située en bas, inclut en général des crédits, des mentions légales, un lien de contact, etc. <footer> contenu du pied de page </footer> Un exemple de pied de page 53/74

56 Balise nav La balise nav regroupe les principaux liens de navigation (menu principal) <nav> contenu du menu principal </nav> Un exemple de liens de navigation 54/74

57 Balise section La balise section regroupe des contenus selon leur thématique <section> <h1>titre de la section</h1> <p> contenu </p> </section> Un exemple de zone section 55/74

58 Balise article La balise article est une zone de contenu indépendante (qui peut être reprise sur un autre site) <article> <h1>titre de l article</h1> <p> contenu </p> </article> Un exemple de zone article 56/74

59 Balise aside La balise aside est une zone d informations complémentaires (e.g., infobox de Wikipedia) <aside> informations complémentaires </aside> Un exemple de zone aside 57/74

60 Balises de regroupement Les balises de contenu possèdent un "type de rendu", parmi lesquels : Inline (e.g., <a>, <img>), qui sont placés les uns à côté des autres (affichage horizontal) Block (e.g., <p>), qui sont placés les uns en dessous des autres (affichage vertical) Un élement inline peut être placé dans des éléments de type block, mais pas l inverse 58/74

61 Balises de regroupement (2) On peut regrouper des balises (e.g., pour leur appliquer un style) en respectant leur affichage (block ou inline). Deux balises de regroupement sans sémantique : <div> et <span>. Ce sont des balises neutres (pas d effet visible sur la page sans ajout d attributs) <div> regroupe des éléments de type bloc ou inline : <div><p>un texte</p><p>et un second</p></div> <span> regroupe des éléments de type inline : <p><span>un texte <em> et la suite</em></span><p> 59/74

62 En résumé Réfléchir à la structuration du site en amont Privilégier l utilisation des balises de structuration (e.g., header, article) Si besoin, compléter la structuration avec les balises div et span 60/74

63 Plan Syntaxe de base du HTML Formulaires Balises structurantes Architecture d un site Web 61/74

64 Architecture d un site Physiquement, les fichiers qui composent un site Web sont stockés dans un ou plusieurs répertoires, selon une certaine arborescence ou architecture. Il existe 4 types d architectures 62/74

65 Types d architecture Séquentielle : organisation linéaire (e.g., ordre alphabétique, chronologique) sites d apprentissage, tutoriaux, livres Hiérarchique : les pages sont organisées hiérarchiquement autour d une page (l index ou la page d accueil) type le plus courant, adapté pour une majorité de sites 63/74

66 Types d architecture (2) BDD (type grille) : les pages sont organisées en tableaux éventuellement corrélés (e.g., cas médicaux, listes de cours) sites au contenu complexe ou générés par une BD Réseau : exploitation maximale des liens HTTP (internes et externes) sites avec grande quantité de liens (e.g., sites collaboratifs) 64/74

67 Architecture d un site web Choix de l architecture et découpage de l information : En fonction du public (grille et web pour public averti) Des contenus (séquentiel pour contenu simple) Composition d un site : Page d accueil (index) Zones de contenu spécifique (fonctionnalité) Zones communes à chaque page (menu, entête, etc.) Répertoire d images Répertoire d inclusion /74

68 Modèle / template À de rares exceptions (e.g., sites d artistes), chaque page d un même site Web possède le même modèle / template (e.g., un menu à gauche, juste sous le header, avec fond orange) Modèle / template : ensemble des éléments de mise en page et mise en forme d un site Web (design) Mise en page et mise en forme CSS Mais le découpage de l information balises structurantes HTML Idéalement le modèle respecte des règles d ergonomie (cf cours LIF14 - IHM) De nombreux templates "tout prêt" (et souvent personnalisables) sont disponibles sur le Web et permettent de se focaliser sur le contenu des pages 66/74

69 Découpage de l information (1) Solution 1 : chaque page contient tout Chaque page contient le code de son contenu spécifique Chaque page contient le code des zones communes (menu, entête, etc.) Chaque page contient donc l intégralité du modèle 67/74

70 Découpage de l information (1) Solution 1 : chaque page contient tout Chaque page contient le code de son contenu spécifique Chaque page contient le code des zones communes (menu, entête, etc.) Chaque page contient donc l intégralité du modèle Problème : en cas de modification d une zone commune (voire du modèle), il faut modifier chaque page! 67/74

71 Découpage de l information (2) Solution 2 : une page par contenu spécifique Chaque page contient le code de son contenu spécifique Les zones communes (menu, entête, etc.) sont dans des fichiers externes Besoin de commandes spécifiques pour inclure un fichier externe (PHP, jquery/javascript, Apache SSI, etc.) 68/74

72 Découpage de l information (3) Illustration de la solution 2 : une page par contenu spécifique, et les zones communes dans des fichiers externes 69/74

73 Découpage de l information (4) Solution 3 : une seule page (e.g., index.html) L unique page contient le code des zones communes (menu, entête, etc.), ou les zones communes sont dans des fichiers externes Les différents contenus spécifiques sont dans des fichiers externes L unique page appelle un fichier externe pour afficher son contenu spécifique en fonction de la valeur d un paramètre (e.g., nom de page, identifiant de page) 70/74

74 Découpage de l information (5) Illustration de la solution 3 : une seule page, qui récupère les zones communes dans des fichiers externes et un contenu spécifique selon la valeur d un paramètre 71/74

75 En résumé Utilisation de l architecture hiérarchique Découpage de l information en utilisant des fichiers externes (pour les parties communes et éventuellement le contenu spécifique) Concernant l ergonomie, plus d informations en LIF14 (IHM) 72/74

76 Bilan Utilisation de HTML pour structurer et afficher le contenu d un site web : Balises principales de contenu et éléments de formulaire Pas de mise en forme ou de mise en page en HTML! Réflexions sur l organisation et l architecture du site 73/74

77 Bilan Utilisation de HTML pour structurer et afficher le contenu d un site web : Balises principales de contenu et éléments de formulaire Pas de mise en forme ou de mise en page en HTML! Réflexions sur l organisation et l architecture du site Prochain cours : l habillage du contenu avec CSS 73/74

78 Questions? Avantages et inconvénients des méthodes GET ou POST pour transmettres les données d un formulaire? 74/74

79 Questions? Avantages et inconvénients des méthodes GET ou POST pour transmettres les données d un formulaire? Que peut-on utiliser pour agencer les éléments d une page Web? Frames? Tableaux? Autre? 74/74

80 Questions? Avantages et inconvénients des méthodes GET ou POST pour transmettres les données d un formulaire? Que peut-on utiliser pour agencer les éléments d une page Web? Frames? Tableaux? Autre? Quels types de métadonnées connaissez-vous au niveau des BD? 74/74

Programmation Web - HTML

Programmation Web - HTML Programmation Web - HTML Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2014-2015 http://liris.cnrs.fr/fabien.duchateau/ens/lif4/ 1/69 Introduction De nombreux sites

Plus en détail

Introduction. Rappel : conception, interrogation et mise à jour d une base de données

Introduction. Rappel : conception, interrogation et mise à jour d une base de données Introduction Rappel : conception, interrogation et mise à jour d une base de données De nombreux sites Web ont une (ou plusieurs) BD pour gérer leur données 2/51 Pages Web statiques L utilisateurice demande

Plus en détail

Compte rendu de PHP MySQL : création d un formulaire de base de données

Compte rendu de PHP MySQL : création d un formulaire de base de données REVILLION Joris Décembre 2009 3EI Compte rendu de PHP MySQL : création d un formulaire de base de données Objectifs : Le principal objectif de ce cours est de découvrir et de nous familiariser avec le

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP.

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. TP5: LES FORMULAIRES OBJECTIFS : 1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. PARTIE 1: Formulaire

Plus en détail

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet Création de sites web INF0326 Outils bureautiques, logiciels et Internet Plan Création de pages web HTML et CSS Création de sites web avec WordPress Créer des pages web Partie 1 Système hypertexte Un système

Plus en détail

Cours HTML/PHP. Cours HTML/PHP. E.Coquery. emmanuel.coquery@liris.cnrs.fr

Cours HTML/PHP. Cours HTML/PHP. E.Coquery. emmanuel.coquery@liris.cnrs.fr Cours HTML/PHP E.Coquery emmanuel.coquery@liris.cnrs.fr Pages Web Pages Web statiques Principe de fonctionnement : L utilisateur demande l accès à une page Web depuis son navigateur. Adresse tapée, clic

Plus en détail

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

Web HTML. Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr

Web HTML. Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr Web HTML Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr 1 Plan Fonc-onnement du web Le langage HTML 2 Web : Introduc;on Réseau : mise en commun de ressources (données, imprimantes, ) Internet : Interconnexion

Plus en détail

OP4. BD & Web. Résumé de cours. Partie II : HTML 4.0

OP4. BD & Web. Résumé de cours. Partie II : HTML 4.0 Univ.Montpellier II 2005 M. Hascoët OP4 BD & Web Résumé de cours Partie II : HTML 4.0 M. Hascoët mountaz@lirmm.fr Université Montpellier II Place Eugène Bataillon 34095 Montpellier Cedex 05 2/5 1. Introduction

Plus en détail

Gérer les formulaires

Gérer les formulaires 195 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel sur les formulaires Le formulaire est un outil de base indispensable pour les sites web dynamiques puisqu'il

Plus en détail

Programmation Web. Thierry Hamon

Programmation Web. Thierry Hamon 1/27 Programmation Web Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin, F-93017 Bobigny

Plus en détail

Pages Web statiques. LIF4 - Initiation aux Bases de données : PHP. Pages Web dynamiques. Illustration. Illustration

Pages Web statiques. LIF4 - Initiation aux Bases de données : PHP. Pages Web dynamiques. Illustration. Illustration statiques LIF4 - Initiation aux Bases de données : E.Coquery emmanuel.coquery@liris.cnrs.fr http ://liris.cnrs.fr/ ecoquery Principe de fonctionnement : L utilisateur demande l accès à une page Web depuis

Plus en détail

Initiation à Dreamweaver

Initiation à Dreamweaver Benjamin Godefroy Redouane Zarghoune Initiation à Dreamweaver SI28 Ecriture interactive et multimédia Automne 2004 Organisation du TD Préambule : Introduction au HTML Présentation de Dreamweaver Exercices

Plus en détail

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl IAE - Web Marketing Créer un site internet «simple» Publier un site internet Référencer un site internet Olivier Toscano Gérant WebCMS Sàrl HTML HTML est un langage à balisage Les balises permettent de

Plus en détail

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

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

Plus en détail

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas...

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas... Introduction et HTML Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Université Lille 1 Introduction Objectifs : Présentation des bases de la création de documents web par la découverte des

Plus en détail

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web.

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web. Document 1 : client et serveur Les ordinateurs sur lesquels sont stockés les sites web sont appelés des serveurs. Ce sont des machines qui sont dédiées à cet effet : elles sont souvent sans écran et sans

Plus en détail

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL Prise en main de NVU et Notepad++ (conception d application web avec PHP et MySql) Propriétés Intitulé long Formation concernée Matière Présentation Description Conception de pages web dynamiques à l aide

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

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.

Plus en détail

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86 Plan du travail Chapitre 1: Internet et le Web Chapitre 2: Principes d Internet Chapitre 3 : Principaux services d Internet Chapitre 4 : Introduction au langage HTML 2014/2015 Cours TIC - 1ère année MI

Plus en détail

3. Formulaires. Cours Web. Formulaires. 3. Formulaires. 3. Formulaires. Formulaires. Lionel Seinturier. Université Pierre & Marie Curie

3. Formulaires. Cours Web. Formulaires. 3. Formulaires. 3. Formulaires. Formulaires. Lionel Seinturier. Université Pierre & Marie Curie Cours Web Formulaires Lionel Seinturier Université Pierre & Marie Curie Lionel.Seinturier@lip6.fr 8/9/03 Formulaires HTML 1.0 essentiellement "mono"-directionnel informations fournies par le serveur (suite

Plus en détail

Cours de programmation web

Cours de programmation web Cours de programmation web ENSAE 2006-2007 Cours 1 - Introduction 1. Introduction 2. Le principe d Internet 3. Les langages du web 4. Le web 2.0 Introduction : Historique 1967 : Arpanet : réseau militaire

Plus en détail

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

Programmation Avancée pour le Web

Programmation Avancée pour le Web L3 Informatique Option : ISIL Programmation Avancée pour le Web RAMDANI Med U Bouira 1 Contenu du module Introduction aux applications Web Rappels sur les sites Web Conception d une application Web Notion

Plus en détail

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr MODULE HTML CSS Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr ORGANISATION DU MODULE 13 séances de 2 heures une partie cours une partie exercices sur machine. Modalités de contrôle : partiel en fin

Plus en détail

Introduction à HTML et CSS

Introduction à HTML et CSS ENS de Cachan Introduction à HTML et CSS Françoise Tort Chargement d'une page Web h"p://site.chemin./page.html navigateur requête.html.css.jpg.mp3 serveur web fichiers Le navigateur web traduit les pages,

Plus en détail

Écriture de pages Web

Écriture de pages Web Écriture de pages Web Le langage HTML / XHTML Laurent Tichit Janvier 2011 Laurent Tichit 2005-2010 1 Comment fonctionne le Web? C'est un mécanisme client-serveur. Logiciel serveur : programme qui a pour

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

Plus en détail

La vocation purement sémantique de la page HTML a été pervertie avec les années.

La vocation purement sémantique de la page HTML a été pervertie avec les années. Bruxelles Formation CEPEGRA Olivier Céréssia 2012 PRÉAMBULE A mille lieues de la vision structuraliste de ses créateurs, la page HTML est devenue un document hybride mêlant structure, contenu, mise en

Plus en détail

Partie HTML TD 6 : Liens hypertexte et formulaires

Partie HTML TD 6 : Liens hypertexte et formulaires Partie HTML TD 6 : Liens hypertexte et formulaires 1. Les liens hypertextes Ils permettent la navigation dans les sites Web. Il y a 3 types de liens : - Les liens internes à un site - Les liens internes

Plus en détail

Bases de données et Sites Web. Li345

Bases de données et Sites Web. Li345 Bases de données et Sites Web. Li345 Remerciements à: Stéphane Gançarski et Philippe Rigaux. Ces transparents sont fortement inspirés du très bon livre : Pratique de MySQL et PHP, troisième édition Philippe

Plus en détail

Evolutions du Web et des langages

Evolutions du Web et des langages Evolutions du Web Evolutions du Web et des langages WEB statique Ces pages sont écrites en HTML Les pages demandées sont identiques quelque soit La personne qui les demande L heure de la demande Etc. WEB

Plus en détail

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec

Plus en détail

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Objectifs Introduction aux langages à balises Introduction à (X)HTML / CSS Introduction à la gestion

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

Plus en détail

Personnaliser et adapter SPIP Développeur SPIP

Personnaliser et adapter SPIP Développeur SPIP Personnaliser et adapter SPIP Développeur SPIP En Théorie Le fonctionnement de SPIP Qu est ce que SPIP? SPIP (Système de Publication pour l Internet Partagé) est un logiciel libre destiné à la production

Plus en détail

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Introduction au Web D'après les cours de Andrea G. B. Tettamanzi Fabien Givors Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Fabien Givors, 2014 1 Planning des cours

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

Plus en détail

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org

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

Plus en détail

Module BD et sites WEB

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

Plus en détail

Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie 1 de 2)

Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie 1 de 2) École de bibliothéconomie et des sciences de l information SCI6306 Bases de données documentaires Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie

Plus en détail

Présentation et traitement d information sur le Web Présentation du WWW (architectures web)

Présentation et traitement d information sur le Web Présentation du WWW (architectures web) Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Présentation et traitement d information sur le Web Présentation du WWW (architectures web) Jean-Michel Follin jean-michel.follin@univ-lr.fr

Plus en détail

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS En renommant, déplaçant ou supprimant des images déjà insérées dans des pages, ou en renommant, déplaçant ou supprimant des sous-dossiers, les images

Plus en détail

TP 8 : Créer son site web de D à Z...

TP 8 : Créer son site web de D à Z... TP 8 : Créer son site web de D à Z... Présentation Nous allons tenter de créer en 2 ou trois séances un site WEB de toute pièce. Vous devrez choisir un thème (ce que vous voulez, ou presque...). Vous établirez

Plus en détail

Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6

Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6 Légende Conception de Sites Web dynamiques 2015 Cours 5+6 Patrick Reuter http://www.labri.fr/perso/preuter/cswd2015 Titre de la page h1, h2, h3 color: red; $a = 3; SELECT * FROM commentaires; HTML CSS

Plus en détail

GED MARKETING. Page 1 sur 18

GED MARKETING. Page 1 sur 18 GED MARKETING I. Présentation du produit... 2 II. Page principale de l application... 3 L arbre... 3 Le menu... 4 La fenêtre de navigation... 4 III. La recherche de documents... 4 Rechercher tous les documents...

Plus en détail

Le Gestionnaire de formulaires CK Forms n est prévu que pour Joomla! 1.5.x!

Le Gestionnaire de formulaires CK Forms n est prévu que pour Joomla! 1.5.x! Tutoriel sur CK Forms 1 Adaptation FR Le Gestionnaire de formulaires CK Forms n est prévu que pour Joomla! 1.5.x! Ce tutoriel vous présente les éléments principaux du composant et plugin CK Forms Installation/Désinstallation

Plus en détail

Applications orientées données (NSY135)

Applications orientées données (NSY135) Applications orientées données (NSY135) 2 Applications Web Dynamiques Auteurs: Raphaël Fournier-S niehotta et Philippe Rigaux (philippe.rigaux@cnam.fr,fournier@cnam.fr) Département d informatique Conservatoire

Plus en détail

Questions à choix multiples Page 1 de 10

Questions à choix multiples Page 1 de 10 INF2005 Programmation web Examen intra hiver 2015 Question #1 Qui a gagné la guerre des fureteurs dans les années 1990? a) Netscape b) Internet Explorer c) Firefox d) Chrome e) Opera f) Mosaic g) Aucune

Plus en détail

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 Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr Introduction Tableaux La balise (DIV) Polices en HTML Body (corps) et Head (en-tête) attributs Forms(formulaires):

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 Table des matières PREMIÈRE PARTIE

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

Plus en détail

Systèmes d'informations

Systèmes d'informations Systèmes d'informations C'est un ensemble d'outils pour stocker / gérer / diffuser des informations / des données Le stockage : Bases de données + SGDBR La gestion : Saisie, Mise à jour, Contrôle La diffusion

Plus en détail

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word.

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word. PRETASHOP LES OBJECTIFS : Vous verrez comment installer Joomla! localement puis sur un serveur distant, concevoir l organisation de votre site, rédiger vos premiers articles, maitriser les feuilles de

Plus en détail

Langages du Web. Que savez vous???

Langages du Web. Que savez vous??? Langages du Web Que savez vous??? Le WEB World Wide Web ouwww ouweb Toile d'araignée mondiale ou la toile Le Web utilise le réseau Internet pour relier des serveurs qui, grâce aux protocoles HTTP, HTTPS,

Plus en détail

Applications orientées données (NSY135)

Applications orientées données (NSY135) Applications orientées données (NSY135) 2 Applications Web Dynamiques Auteurs: Raphaël Fournier-S niehotta et Philippe Rigaux (philippe.rigaux@cnam.fr,fournier@cnam.fr) Département d informatique Conservatoire

Plus en détail

Web et présentation d information spatiale

Web et présentation d information spatiale Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Web et présentation d information spatiale Moteurs de recherche et formulaires HTML Jean-Michel FOLLIN jmfollin@univ-lr.fr

Plus en détail

Systèmes de Gestion de Contenu

Systèmes de Gestion de Contenu Introduction aux de site Web Master 1 CAWEB Page 1/7 Introduction Définition CMS Content Management Systems : logiciels de conception et de mise à jour dynamique de site web ou d'application multimédia

Plus en détail

Introduction à PHP. Formulaires HTML et PHP, interactions avec le client. monnerat@u-pec.fr. 6 avril 2015. IUT de Fontainebleau. Introduction à PHP

Introduction à PHP. Formulaires HTML et PHP, interactions avec le client. monnerat@u-pec.fr. 6 avril 2015. IUT de Fontainebleau. Introduction à PHP Formulaires HTML et PHP, interactions avec le client IUT de Fontainebleau 6 avril 2015 1 Formlaire et traitement 2 Texte Cases à cocher Listes Upload de fichiers Sommaire Formlaire et traitement 1 Formlaire

Plus en détail

Présentation du Framework BootstrapTwitter

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...

Plus en détail

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Olivier BOEBION 12/02/2004 1 Le point de départ 1.1 Et la lumière fut... A la fin des années 1980, Tim Berners-Lee travaillant

Plus en détail

PROCÉDURES D ÉDITION. Guide de l usager TYPO3

PROCÉDURES D ÉDITION. Guide de l usager TYPO3 Guide de l usager TYPO3 Sommaire Connexion à TYPO 3...5 Gestion des pages dans TYPO 3...6 Ajouter une nouvelle page...7 Déplacer ou copier une page de l arborescence... 11 Supprimer une page... 12 Ouvrir

Plus en détail

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Interface de conception L'environnement système 9

Plus en détail

POUR COMMENCER AJOUTEZ LES RÉSERVATIONS À VOTRE SITE WEB MODULE DE RECHERCHE DE GROUPE D OPENTABLE

POUR COMMENCER AJOUTEZ LES RÉSERVATIONS À VOTRE SITE WEB MODULE DE RECHERCHE DE GROUPE D OPENTABLE AJOUTEZ LES RÉSERVATIONS À VOTRE SITE WEB MODULE DE RECHERCHE DE GROUPE D OPENTABLE Le module de recherche de groupe permet aux utilisateurs de sélectionner un emplacement spécifique de restaurant à partir

Plus en détail

Introduction à HTML: HyperText Markup Language

Introduction à HTML: HyperText Markup Language CREATION WEB HTML ET CSS Introduction à HTML: Le HTML, HyperText Markup Language, est un langage de balisage qui définit la structure logique d un document WWW diffusé sur le Web. La mise en forme de la

Plus en détail

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design Chapitre 1 : Introduction A. Le développement des sites Web 14 B. Les fonctionnalités de Bootstrap 14 C. La compatibilité avec les navigateurs 15 D. Télécharger les exemples 15 Chapitre 2 : Installer Bootstrap

Plus en détail

Chapitre 1 HTML et le Web... 15. Chapitre 2 Les navigateurs du marché... 31. Chapitre 3 Les bases du langage HTML... 49

Chapitre 1 HTML et le Web... 15. Chapitre 2 Les navigateurs du marché... 31. Chapitre 3 Les bases du langage HTML... 49 Chapitre 1 HTML et le Web... 15 1.1 Pourquoi apprendre le langage HTML?... 17 1.2 Trois concepts étroitement liés : WWW, HTML et HTTP... 18 1.3 Principes généraux et versions de HTML... 20 Utilisation

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

Publier des données sur le Web

Publier des données sur le Web Publier des données sur le Web Introduction Microsoft Excel fournit les outils dont vous avez besoin pour créer et enregistrer votre classeur sous forme d une page web et le publier sur le Web. La commande

Plus en détail

Programmation Web. Madalina Croitoru IUT Montpellier

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

Plus en détail

Introduction Web. 1ère année, cours - 5/5. Marcel Bosc 2011-2012

Introduction Web. 1ère année, cours - 5/5. Marcel Bosc 2011-2012 Introduction Web 1ère année, cours - 5/5 Marcel Bosc 2011-2012 Département informatique IUT de Villetaneuse Université Paris-13 table des matières Types en PHP Classes et objets Organisation code PHP CMS

Plus en détail

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12 Pages et sites Web Table des matières 1 Microsoft Expression Web S'orienter vers l'accessibilité...12 Espace de travail Installer le logiciel...13 Lancer/quitter Microsoft Expression Web 2...13 Découvrir

Plus en détail

Version 4.0. Multinet Ressources Inc. Page 1 sur 13

Version 4.0. Multinet Ressources Inc. Page 1 sur 13 Version 4.0 Page 1 sur 13 Introduction Lorsque vous obtenez l accès à Méganet, votre site est déjà construit. C est-à-dire qu il a fait l objet d une étude de style selon les couleurs de votre entreprise

Plus en détail

PROGRAMMATION HTML. Baccalauréat S -Spécialité ISN. Objectifs. Prérequis. Du code à la page. 4.3 : Langages de programmation : langage HTML

PROGRAMMATION HTML. Baccalauréat S -Spécialité ISN. Objectifs. Prérequis. Du code à la page. 4.3 : Langages de programmation : langage HTML PROGRAMMATION HTML Baccalauréat S -Spécialité ISN 4.3 : Langages de programmation : langage HTML Objectifs L'élève doit être capable o de créer une page WEB en langage HTML o d'analyser une page WEB en

Plus en détail

Programmation Web HTML5

Programmation Web HTML5 Programmation Web HTML5 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 1 Organisation Cours 5 séances pour 5 langages : HTML5, CSS3, PHP5,

Plus en détail

Développement de l interface Web du projet Hôpital

Développement de l interface Web du projet Hôpital Pôle informatique 2013/2014 École Nationale Supérieure des Mines de Saint-Étienne Développement de l interface Web du projet Hôpital Antoine Zimmermann antoine.zimmermann@emse.fr Le cahier des charges

Plus en détail

Dojo partie 1. Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax

Dojo partie 1. Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax Dojo partie 1 Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax 1 Modules Dojo 3 espaces de noms principaux: dojo: bibliothèque de base dijit: bibliothèque de widgets

Plus en détail

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web

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

Plus en détail

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

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,

Plus en détail

Webmaster / Concepteur Multimedia

Webmaster / Concepteur Multimedia Durée : 217 heures Objectifs : Webmaster / Concepteur Multimedia Participants : Toute personne attirée par la création de site internet professionnel. Méthodes : Mise en pratique sur micro-ordinateur.

Plus en détail

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

Plus en détail

Publier dans la Base Documentaire

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

Plus en détail

Formation : WEbMaster

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

Plus en détail

Développement Partie Cliente

Développement Partie Cliente ISI 1022 : Jean-Noël Sorenti. Année 2002/2003 Développement Partie Cliente ISI 1022 : 1 ISI 1022 : Développement Partie Cliente Le développement partie cliente concerne tout développement étant interprété

Plus en détail

de survie du chef de projet

de survie du chef de projet KIT de survie du chef de projet 01 1 2 3 4 5 6 04 03 07 07 03 03 LE SERVEUR LE CLIENT TECHNOLOGIE WEB CLIENT LE SERVEUR WEB TECHNIQUES & CADRE DE TRAVAIL APPLICATIONS 101 LE SERVEUR Un serveur informatique

Plus en détail

Gérer un site internet simple

Gérer un site internet simple TUTORIEL Gérer un site internet simple Pourquoi avoir un site internet? Table of Contents Table of Contents... 2 Étape 1 : créer un compte Google (Gmail)... 3 Etape 2 : créer un site internet Google...

Plus en détail

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X

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

Plus en détail

Prise en compte des handicaps

Prise en compte des handicaps Prise en compte des handicaps Stéphanie Jean-Daubias INFO Stephanie.Jean-Daubias - at - liris.univ-lyon1.fr http://liris.cnrs.fr/stephanie.jean-daubias/ L3 Plan du cours Prise en compte des handicaps Introduction

Plus en détail

Item B53 : Réaliser des documents hypermédias intégrant textes, sons, images fixes et animées et liens internes et externes.

Item B53 : Réaliser des documents hypermédias intégrant textes, sons, images fixes et animées et liens internes et externes. Licence Creative Commons Jean-Philippe Verdu Réaliser la présentation de ses travaux en présentiel et en ligne Item B53 : Réaliser des documents hypermédias intégrant textes, sons, images fixes et animées

Plus en détail

WordPress : Guide à l édition

WordPress : Guide à l édition WordPress : Guide à l édition WordPress : Guide à l édition... 1 Présentation... 2 1. Accès au site... 2 2. Le tableau de bord... 2 3. Editez les contenus... 4 Quelle est la différence entre les pages

Plus en détail

Création du site dans Dreamweaver :

Création du site dans Dreamweaver : CHARGER, CREER et ENREGISTRER 1. Se connecter au RESEAU du COLLEGE avec tes 2 mots de passe 2. Charge le logiciel Au lancement du logiciel, l écran suivant s affiche : Palette des objets Lanceur Zone de

Plus en détail

Référentiel Général d Accessibilité pour les Administrations RGAA. Annexe 2 : Tests de conformité au RGAA

Référentiel Général d Accessibilité pour les Administrations RGAA. Annexe 2 : Tests de conformité au RGAA Référentiel Général d ccessibilité pour les dministrations RG nnexe 2 : Tests de conformité au RG Page 1/203 Cadres 1. Thématique Cadres 1.1. [Cadres] 1 : bsence de cadres non titrés Tout élément : frame

Plus en détail

VISIONet MANUEL UTILISATEUR

VISIONet MANUEL UTILISATEUR VISIONet MANUEL UTILISATEUR I. VISIONet... 2 A. A quoi sert VISIONet?... 2 B. Comment accéder à VISIONet?... 2 II. La page d accueil... 3 A. Le bandeau... 3 B. Le moteur de recherche... 3 C. Les actualités...

Plus en détail

HTML. Notions générales

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

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

Introduction à HTML. A. HTML et le web

Introduction à HTML. A. HTML et le web Introduction à HTML Isabelle Debled Renesson Marie-Dominique Devignes LORIA 1 2 1 Fonctionnement en mode client/serveur 1. Construction d une requête ex web : http://www.loria.fr/news CLIENT 5. Mise en

Plus en détail

Commençons. (Bonjour, mon nom est Stéphane)

Commençons. (Bonjour, mon nom est Stéphane) Commençons (Bonjour, mon nom est Stéphane) Objectif - Vue claire de la dynamique d'une page web - Compréhension de la logique des CMS - Quelques réflexes de «bonne pratique» - La réponse à un maximum de

Plus en détail

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0)

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0) G U I D E D U T I L I S AT I O N Publishare Plate-forme de gestion de contenu Module Article PubliShare utilise la librairie javascript (AJAX - Web.0) Sommaire Généralités Schéma de navigation Identification

Plus en détail