Luc Brun. Création de pages Web Dynamiques p.1/75

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

Download "Luc Brun. Création de pages Web Dynamiques p.1/75"

Transcription

1 Création de pages Web Dynamiques Luc Brun Création de pages Web Dynamiques p.1/75

2 Place du HTML GET monssite.com HTTP 1.0 Content type: text/html <html>... Création de pages Web Dynamiques p.2/75

3 Place du HTML CGI GET monssite.com HTTP 1.0 Content type: text/html <html>... Création de pages Web Dynamiques p.2/75

4 Place du HTML php asp python... CGI GET monssite.com HTTP 1.0 HTML CSS JavaScript Création de pages Web Dynamiques p.2/75

5 Intérêt du Cours php asp python... JavaScript HTML CSS Création de pages Web Dynamiques p.3/75

6 HTML Langage à balises : <b>toto< /b> toto en gras. Forte parenté avec XML (HTML+XML XHTML) : Toute balise ouverte doit être fermée, Une balise ne délimitant rien se ferme elle même (exemple : <br/ >) Création de pages Web Dynamiques p.4/75

7 Structure d un document HTML Deux sections : head : Définitions générales sur le document : Informations non affichées, body : corps du document. textes, tableaux, listes (à puce, numérotées), images... Création de pages Web Dynamiques p.5/75

8 La section head <head> <title>un exemple de section head</title> <link rel="stylesheet" type="text/css" href="mon_css.css"/> <meta http-equiv="content-type" content="text/html; charset=iso "/> <meta name="keywords" content="html,head"/> <meta name="author" content="luc Brun"/> <meta name="description" content="description de la section head"/> </head> Création de pages Web Dynamiques p.6/75

9 Les textes Jeu de caractère par défaut : ASCII. Codage des accents par des séquences de caractères (é &eacute ;) (Cf. Tab.2.1) langage non wyswig (blanc : &nbsp ; retour à la ligne : <br/ >). Éviter de coder la mise en forme dans la structure du texte. Création de pages Web Dynamiques p.7/75

10 Modification de polices Explicite : <b> : gras ; <i> : italique <u> : souligné Logique : <big>, <small> : tailles, <strong>, <em>(emphase) : mise en évidence. Création de pages Web Dynamiques p.8/75

11 Titres, lignes Titres : <hx> avec x {1,..., 6} <h1> titre de niveau 1, <h6> titre de niveau 6, Lignes horizontales : <hr/ > Création de pages Web Dynamiques p.9/75

12 Paragraphes Balise <p> avec comme principal attribut align {lef t, center, right}. Utilisez des pagraphes plutôt que des sauts de lignes (<br/ >). Création de pages Web Dynamiques p.10/75

13 Divisions Balise <div> permet de regrouper un ensemble de textes/balises. Permet d affecter des propriétés à un ensemble de balises : <div align="right"> <p>un premier paragraphe</p> <p> et un second</p> <p>tous alignés à droite</p> </div> Tous alignés à droite : Concept d héritage. Création de pages Web Dynamiques p.11/75

14 Les listes liste non numérotées (balise<ul>) ou numérotées (balise<ol>) : item : <li>contenu< /li> type : type de liste (tables 2.2 et 2.3) liste de description : balise <dl> (description list) titre item <dt></dt> description de l item <dd></dd> Création de pages Web Dynamiques p.12/75

15 Les tableaux Trois balises : table : délimite une table, tr : délimite une ligne, td : délimite une cellule. Possibilités de cellules multi-lignes, multicolonnes, de sélection de fond de tables, de lignes, de cellules. Tables de taille fixes/variables. Création de pages Web Dynamiques p.13/75

16 Les liens Change l url de la page. <a href="url"> lien</a> affiche lien et change l url courante pour celle spécifiée lors d un clic sur le texte. L url peut être un lien vers : un serveur : une page une application CGI (voir plus loin) une adresse mail : mailto La zone délimitée par <a></a> peut être du texte, une image... Création de pages Web Dynamiques p.14/75

17 Les ancres Permet de positionner une marque (une ancre) dans une page HTML. Des liens peuvent être positionnés sur cette ancre. Syntaxe : <a href="identifiant"/> Liens sur l ancre : <a href="page.html#identifiant"> Lien </a> Création de pages Web Dynamiques p.15/75

18 Les images Inclus une image : Syntaxe : <img src="logo_ensicaen.jpg" width="2cm" height="3cm" align="left" hspace="5mm" alt="logo de L EnsiCaen"/> Possibilité de spécifier la largeur (width), hauteur(height), l alignement, l espacement (hspace, vspace), la bordure (border) et le texte avant chargement (alt) (Cf. Tab. 2.6). Création de pages Web Dynamiques p.16/75

19 Les images clicables (1/2) Permet de spécifier un lien sur certaines parties d une image. Syntaxe : <map name="id map"> <area shape="nom forme" coords="liste coords" href="lien"/>.. </map> shape {rect, circle, polygon} Création de pages Web Dynamiques p.17/75

20 Les images clicables (2/2) Valeurs de coords : rect (x 1, y 1, x 2, y 2 ) coins haut et bas, circle (x, y, R), polygon (x 1, y 1,..., x n, y n ) liste des points du polygone. Utilisation : <img src="url" usemap="id map"/> Création de pages Web Dynamiques p.18/75

21 Les cadres Découpe la fenêtre du navigateur en sous fenêtres (frames). Exemple : <frameset cols="200,*"> <frame src="menu.html" name="menu"/> <frame src="main.html" name="main"/> </frameset> Liens dans les frames : <a href="loisirs.html" target="main"> Mes loisirs</a> De moins en moins utilisé. Création de pages Web Dynamiques p.19/75

22 Les formulaires Permet à l utilisateur de rentrer des informations par le biais de balises spécifiques. Trois attributs : action : nom du CGI ou de programme devant traiter les informations, method : méthode de passage des paramètres (GET ou POST) enctype : codage du document. Création de pages Web Dynamiques p.20/75

23 Les balises input <input type="type" name="nom"> type : type d input name : nom de variable value : valeur par défaut checked : sélection par défaut size : nb de caractères maxlength : nb max. de caractères type {text, password, image, checkbox, radio, submit, reset} Création de pages Web Dynamiques p.21/75

24 La balise select Code un menu à options : Syntaxe : <select name="un_menu"> <option> 1er choix.</option> <option> 2eme choix.</option> </select> Attributs : name, size (nb d éléments simultanéments affichés), multiple (sélection de plusieurs éléments). Création de pages Web Dynamiques p.22/75

25 La balise textarea Saisie d une zone de texte. Syntaxe : <textarea name="saison" rows="10" cols="40"> L hivers : L été : </textarea> Attributs : name, rows (nb ligne), cols (nb colonnes) Création de pages Web Dynamiques p.23/75

26 Les CSS Cascading Style Sheets : Permet de modifier l apparence de balises Permet une claire différenciation entre : le contenu, la structure, la présentation. Fondamental! Création de pages Web Dynamiques p.24/75

27 Feuille de style Feuille de style : ensemble de règles spécifiant la mise en forme de certaines balises. Structure d une règle : propriété valeur h1 { color : red ; } sélecteur déclaration Création de pages Web Dynamiques p.25/75

28 Les sélecteurs Spécifie la ou les balises qui vont utiliser les déclarations. Sélecteur simple : nom de balise. h1 { color: red; font-weight: bold; font-size: xx-large; text-align: center; } Création de pages Web Dynamiques p.26/75

29 Les sélecteurs à évènements Les déclarations s appliquent sur un type de balise lors de certains évènements ou état. Exemple :a :hover {color : red ; } Principaux évènements : :focus prise de focus par un texinput ou textarea :hover passage de la souris sur un lien :link lien pas encore visité :visited lien cliqué Création de pages Web Dynamiques p.27/75

30 Les différents types de sélecteurs simple : a{ }, à évènement : a:hover { }, contextuel : p a{ }, groupés : a,p,h1 { } de classe :.intro { } d identifiant : #titre { } Voir pages HTML Création de pages Web Dynamiques p.28/75

31 Liaison HTML-CSS Les feuilles internes <head> <style type="text/css"> <!-- p { text-align: justify; } --!> </style> </head> Les balises <!- -!> permettent aux vieux navigateurs d ignorer les feuilles de style. Création de pages Web Dynamiques p.29/75

32 Liaison HTML-CSS Les feuilles internes <head> <link rel="stylesheet" type="text/css" href="ma_feuille.css"/> </head> ou <head><style url("feuille.css") </style></head> S utilise en complément des feuilles externes. Création de pages Web Dynamiques p.30/75

33 Liaison HTML-CSS Les feuilles locales <body> <p style="text-align: justify; color: red;"> Mon paragraphe</p> </body> Permet de rajouter localement une déclaration. Création de pages Web Dynamiques p.31/75

34 Liaison HTML-CSS Les feuilles utilisateur L utilisateur peut imposer des styles pour certaines balises (générallement menu préférences). Utile pour les mal voyants. Création de pages Web Dynamiques p.32/75

35 Les feuilles en cascades Conflits entre plusieurs règles :La dernière règle lue a la priorité 1. Utilisateur, 2. locales, 3. internes/externes : dernière règle lue (positionnement de balises), 4. conflit dans une même feuille : dernière règle lue. Création de pages Web Dynamiques p.33/75

36 Héritage Document HTML arbre d inclusion. Les déclarations s héritent de père en fils. <html> <html><head> <title> ma page</title> </head><body> <h1> Ma page </h1> <div class="menu"> <ul> <li> un item</li></ul> </div></body></html> <head> <body> <title> <h1> <div> <ul> <li> Création de pages Web Dynamiques p.34/75

37 Les tailles Tailles de boîtes, de polices, d images... Unités absolues : mm minimètres pc pica (1pica=12pt) cm centimètres pt points in inches px pixel Unité relative : % font-size : 50% : dernière taille de police, width : 10% : largeur de la boîte englobante (ex fenêtre) Création de pages Web Dynamiques p.35/75

38 Tailles de polices Unités relatives xx-large x-large large medium small x-small xx-small large large large normal small + small encore + small em 1em taille de la police précédente Création de pages Web Dynamiques p.36/75

39 Les couleurs propriété concernées (color, background). Spécification du nom (aqua, black...) Voir Table 3.5 Spécification de la valeur (R,G,B) par #rgb avec r, g, b [0, f]. Création de pages Web Dynamiques p.37/75

40 Alignement de texte text-indent Indentation de paragraphe. text-align justify, align,left,right et none margin-left marge à gauche margin-right marge à droite margin-top marge du haut margin-bottom marge du bas margin top right bottom left Création de pages Web Dynamiques p.38/75

41 Formatage de boîtes margin padding border border : border-width, border-style, border-color ou border width, style color. padding : haut droite bas gauche. margin : idem que précédemment. voir page HTML Création de pages Web Dynamiques p.39/75

42 Positionnement de boîtes propriétés impliqués : position, left, top, right, bottom. Valeurs de position : static : par défaut (les uns sous les autres), absolute : coordonnées fenêtres, fixed : idem absolute, insensible au scroll, relative : positionnement relatif. Voir page HTML Création de pages Web Dynamiques p.40/75

43 Boîtes flottantes Alignement à gauche (float : left ;) ou à droite (float :right ;) du bloc parent. Voir page Web. Création de pages Web Dynamiques p.41/75

44 Gestion de la profondeur propriété position possibilité de Recouvrement. Gestion des recouvrements : propriété z-index. En cas de recouvrement la boîte de z-index le plus élevé est affichée. Création de pages Web Dynamiques p.42/75

45 Les listes Essentiellement trois propriétés : 1. list-style-type : type de liste que l on compte manipuler (disc, circle, decimal...) 2. list-style-image : spécifie une image à la place des puces ul {list-style-image: url(mon_item.jpg list-style-type: circle;} 3. list-style-position {inside,outside} Création de pages Web Dynamiques p.43/75

46 JavaScript Avantage : Exécuté sur le navigateur du client Inconvénients : Exécuté sur le navigateur du client Varie beaucoup en fonction des navigateurs des versions Surtout utilisé pour de petits effets (apparition/disparition/déplacement de blocs) et la vérification des formulaires. Création de pages Web Dynamiques p.44/75

47 Variables Déclaration explicite de variable : var i. Si en dehors de fonction : variable globale, sinon variable locale. Déclaration implicite toto="titi" ; : variable globale. Création de pages Web Dynamiques p.45/75

48 L instruction if if (condition) {instruction} ou if (condition) {instruction} else {instruction} On peut étendre à : if (condition) {instruction} else if (condition) {instruction}... Création de pages Web Dynamiques p.46/75

49 L instruction switch switch (val) { } case val1 : instruction1 break; case val2: instruction2 break;... default: instruction par defaut. break; Instruction 1 est exécuté si val=val1, Instruction 2 si val=val2.... Si aucun test n est vrai le bloc d instruction par défaut est exécuté. Création de pages Web Dynamiques p.47/75

50 Les boucles (1/4) Boucle for : for(init ;cond ;incr) exemple var sum=0; for(i=0;i<10<i++) sum+=i; Création de pages Web Dynamiques p.48/75

51 Les boucles (2/4) Boucle While : while(cond){instruction} exemple : sum=0; i=0; while(i<10) { sum+=i; i++; } Création de pages Web Dynamiques p.49/75

52 Les boucles (3/4) Boucle Do-while : do {instruction} while(cond) ; exemple : sum=0; i=0; do { sum+=i; i++; } while(i<10); Création de pages Web Dynamiques p.50/75

53 Les boucles (4/4) Les séquences d échapement return : sort de la boucle et de la fonction. break : sort de la boucle continue : passe à l itération suivante Création de pages Web Dynamiques p.51/75

54 Les tableaux var tab_vide=new Array(); var tab_10 =new Array(10); var tab_init=new Array( val1, val2 ); Tableaux 5 5 : var mat=new Array(5); var i,j; for(i=0;i<mat.length;i++) mat[i]=new Array(5); Tableau associatif : tab[ ; Création de pages Web Dynamiques p.52/75

55 Manipulation de tableaux (1/2) Concat concaténe plusieurs tableaux. Tableau.join() conversion en chaîne Tableau.pop() supprime dernier élément Tableau.push ajoute un ou plusieurs éléments Tableau.reverse() inverse l ordre des éléments du tableau. Tableau.shift() supprime le premier élément du tableau. Création de pages Web Dynamiques p.53/75

56 Manipulation de tableaux (2/2) Tableau.slice() Tableau.sort() Tableau.unshift Tableau.toString() Tableau.valueOf partie d un tableau. trie ajoute en tête de tableau concatène les objets de l array en une String. retourne la valeur de l objet Array. Tableau.splice(i,nb,[val1,]) substitue les éléments en position i à i+nb du tableau par les val i. Renvoi les éléments supprimés. Création de pages Web Dynamiques p.54/75

57 Les fonctions function nom(parametres) { instructions [return valeur] } Passage des arguments par valeur, Return non obligatoire (procédure) Création de pages Web Dynamiques p.55/75

58 Les boîtes de dialogue confirm( Message ) : Afficher un message/une information, alert( Message ) : Afficher un message d alerte, val=prompt( Message,defaut) : Afficher un message et saisir une valeur. Création de pages Web Dynamiques p.56/75

59 Les classes (1/2) var toto=new fonction([params]); fonction : constructeur de l objet. function aire() { return this.largeur*this.hauteur;} function Rectangle(x,y) {// creation du champ largeur this.largeur=x; // creation du champ hauteur this.hauteur=y; // creation de la methode aire this.aire=aire; } Création de pages Web Dynamiques p.57/75

60 Les classes (2/2) Utilisation des classes : mon_rect=new Rectangle(10,10); document.write("largeur, hauteur, aire"+ mon_rect.largeur+mon_rect.hauteur+ mon_rect.aire()); Ajout dynamique de méthodes : classe.prototype.methode=fonction exemple : Rectangle.prototype.perimetre=perimetre Création de pages Web Dynamiques p.58/75

61 La classe String var toto="titi"; var titi=new String(); // chaine vide concaténation : + Liens avec la classe Math : eval() : eval("4+5") 9. parseint() : conversion en entier parsefloat() : conversion en float tostring() : conversion en String Création de pages Web Dynamiques p.59/75

62 La classe image var mon_img=new Image(); mon_img.src= Images/mon_image.gif ; Préchargée au chargement de la page. affichage : propriété src des balises <img>. img.src=mon_img.src Implique le changement dynamique de l image. Création de pages Web Dynamiques p.60/75

63 La classe Date ma_date = new Date(); Possibilité de spécifier une date ou de prendre la date système (Table 4.6) getdate() jour du mois getday() jour de la semaine getfullyear() année sur 4 chiffres gethours(),getminutes() heure, minutes getmonth() mois Autres fonctions (Table 4.7) et exemples (pages HTML) Création de pages Web Dynamiques p.61/75

64 Insertion de code Javascript (1/2) Syntaxe : Balise <script></script>. Deux syntaxes : <script type="text/javascript" src="mon_fichier.js"></script> ou <script type="text/javascript"> mon code. </script> Possibilité de combiner Création de pages Web Dynamiques p.62/75

65 Insertion de code JavaScript (2/2) Lieu d insertion Insertion pour exécution différée : Dans la balise <head>. Code exécuté sur demande (appel de fonction, instanciation de classe) Insertion pour exécution directe Dans la balise <body>. Exécuté au chargement de la page. Réaction à évènements (onclick, onblur...table 4.9) Possibilité de combiner Création de pages Web Dynamiques p.63/75

66 Hiérarchie des objets window navigator plugins[] mimetypes[] self, frames[] location history window, parent, top window document anchors[] links[] images[] applets embeds forms[] elements[] Création de pages Web Dynamiques p.64/75

67 Recherche par Id Fonction : document.getelementbyid Prise en compte des navigateurs : function getobj(id) { if(document.layers) return document.id; // Netscape 4.x // Netscape 6.x IE 5.x if(document.getelementbyid) return document.getelementbyid(id) if(document.all) return id; // IE 4.x } Création de pages Web Dynamiques p.65/75

68 Recherche par nom et balise Recherche par nom (attribut name) : document.getelementsbyname("nom"); Recherche par nom de balise : document.getelementsbytagname("balise" Création de pages Web Dynamiques p.66/75

69 Recherche par classe function getelementbyclass(classname) { var inc=0; var elt=new Array(); var alltags=document.all; if(! alltags) alltags=document.getelementsbytagname("*"); for (i=0; i<alltags.length; i++) if (alltags[i].classname==classname) elt.unshift(alltags[i]); return elt; } Création de pages Web Dynamiques p.67/75

70 Les CGI Common Gateway Interface : Protocole de communication entre le serveur Web et des applications. De plus en plus supplanté par PHP, Applet Java. Garde tout son intérêt pour de grosses applications. Création de pages Web Dynamiques p.68/75

71 Récupération des paramètres Paramètres : liste d affectation variable=valeur. Chaîne d affectations. var1=val1&var2=val2... méthode POST : Le serveur envoi la chaîne d affectations sur l entré standard de l application. méthode GET : Positionnement de la chaîne d affectation dans la variable d environnement QUERY_STRING. Création de pages Web Dynamiques p.69/75

72 Principales variables REQUEST_METHOD : type de passage de la chaîne de paramètres (GET, POST), QUERY_STRING : valeur de la chaîne d affectations (mode GET), CONTENT_LENGTH : longueur de la chaîne d affectation. Création de pages Web Dynamiques p.70/75

73 Décodage des affectations Un exemple en shell. ifs=$ifs IFS="&" set $QUERY_STRING IFS=$ifs for egal in $* do echo "$egal <br/>" done Création de pages Web Dynamiques p.71/75

74 Envoi de données Content-type: type mime contenu du document type mime a priori quelconque généralement : text/plain : ascii ou text/html : html. Attention à la ligne vide entre Content-type et le contenu. Création de pages Web Dynamiques p.72/75

75 Les Cookies Affectations de variables stockées chez l utilisateur. Permet : De stocker des informations de pages en pages sur un même site, d identifier un utilisateur, d effectuer des statistiques sur les accès des utilisateurs. Création de pages Web Dynamiques p.73/75

76 Positionnement des Cookies Content-type: text/html Set-Cookie: var=val; contenu du document Possibilité de répéter la ligne Set-Cookie pour positionner plusieurs variables. La ligne vide marque le début du document. Options : date d expiration (expires), serveurs ayant accès au Cookie (domain), Zones du serveur ayant accès au Cookie (path), Création de pages Web Dynamiques p.74/75

77 Lecture des Cookies Variable HTTP_COOKIE. var1=val1;va2=val2;... Lecture similaire à celle de QUERY_STRING. Création de pages Web Dynamiques p.75/75

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

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

Plus en détail

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles Index A affichage, CSS 180 album photos, créer 83 arrière-plan, CSS 152 images 152 Attributs de balises HTML action 90 align 71 attributs communs 131 background 39 border 39, 70 cellpadding 70 cellspacing

Plus en détail

Formation HTML / CSS. ar dionoea

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

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

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve Intro Web 2011-2012 «nous donnerons tout d'abord les définitions de l'internet, du Web et du langage XHTML. Nous expliquerons ensuite ce qu'est une url et les différentes actions induites lorsque je demande

Plus en détail

Conception de sites web. Feuille de styles CSS

Conception de sites web. Feuille de styles CSS Conception de sites web Feuille de styles CSS M i s e e n p a g e : s o l u t i o n «v i e i l l e é c o l e» Mise en page par et par Long Vite illisible Peu souple Difficile à modifier

Plus en détail

HTML, CSS, JS et CGI. Elanore Elessar Dimar

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

Plus en détail

Formation Site Web : CSS et PHP

Formation Site Web : CSS et PHP Formation Site Web : CSS et PHP Valentin Roussellet Joachim Jablon Chahine Benchorha VIA Centrale Réseaux 1 er décembre 2008 Qu'est-ce que CSS Les sélecteurs La mise en page et le box-model Une CSS (Cascading

Plus en détail

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; }

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; } Enregistrer la feuille de style "style.css" mettre dans l'en-tête de la page html (entre les balises ) : mettre dans l'en-tête de

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

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

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

CSS. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) CSS 1 / 50

CSS. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) CSS 1 / 50 CSS Thierry Lecroq Université de Rouen FRANCE Thierry Lecroq (Univ. Rouen) CSS 1 / 50 Plan 1 Généralités sur les CSS 2 Les sélecteurs 3 Les propriétés 4 le dimensionnement et le positionnement Thierry

Plus en détail

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML feuilles de style en cascade (CSS) Lévis Thériault, hiver 2009 CSS (feuilles de style en cascade) CSS: Cascading

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

Création d un Site Web

Création d un Site Web Session2 Etapes Faciles Pour Réussir Sur Internet Création d un Site Web Mounir_ahlyege@hotmail.com 1 CSS :Cascading Style Sheets en français feuilles de style en cascade C'est un autre langage qui vient

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

Plus en détail

XHTML et CSS. 17 et 18 mai 2006 CRI-IUT 2006 METZ - Jérôme LANDRÉ - IUT Le Creusot 1

XHTML et CSS. 17 et 18 mai 2006 CRI-IUT 2006 METZ - Jérôme LANDRÉ - IUT Le Creusot 1 XHTML et CSS 17 et 18 mai 2006 CRI-IUT 2006 METZ - Jérôme LANDRÉ - IUT Le Creusot 1 1) Introduction 2) HTML, XML 3) XHTML 4) CSS 5) Exemples 6) Outils 7) Conclusion Sommaire 17 et 18 mai 2006 CRI-IUT 2006

Plus en détail

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques Contenu Statique Le client envoie une requête avec un nom de fichier Le serveur répond en lui retournant

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

INITIATION AU LANGAGE HTML

INITIATION AU LANGAGE HTML INITIATION AU LANGAGE HTML I INTRODUCTION Seules les bases du langage HTML sont abordées ici. Cette initiation a pour but de "démarrer", les nombreuses ressources concernant ce langage vous permettront

Plus en détail

Deuxième partie: HTML, Javascript et le DOM (1)

Deuxième partie: HTML, Javascript et le DOM (1) Deuxième partie: HTML, Javascript et le DOM (1) 1 HTML Des éléments de «header» destinés à contrôler les paramètres d affichage Un langage de structuration de contenu Un langage de présentation Un langage

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

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

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web Le Web 1. Qu est-ce que le Web? 7 1.1 Côté serveur : HTTP, FTP, langages, SQL 7 1.2 Côté client : HTML, CSS, JavaScript 10 2. Les langages et leur utilité 10 2.1 HTML 10 2.2 CSS 13 2.3 JavaScript 16 2.4

Plus en détail

Présentation. Les surnoms de JS. Historique. Programmation Web

Présentation. Les surnoms de JS. Historique. Programmation Web Présentation Programmation Web JavaScript Jean-Christophe Deneuville jean-christophe.deneuville@xlim.fr Historique JavaScript est un langage reprenant quelques éléments de syntaxe de Java On l intègre

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

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

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

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

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

CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Conclusion TD/TP 2 / 16 CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style.

CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Conclusion TD/TP 2 / 16 CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Cascading style sheets () pour XML Plan de la séance BDISE XML Mathieu Sassolas 1 IUT de Sénart Fontainebleau Département Informatique 2 La sélection des éléments où s applique le style Année 2015-2016

Plus en détail

JavaScript, langage et utilisation

JavaScript, langage et utilisation Introduction JavaScript, langage et utilisation Langage côté CLIENT Javascript n'est pas java! intégré aux navigateurs: pas de problème de déploiement comme avec les applets java ou flash permet de rendre

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

Introduction Web : Cours. IUT de Villetaneuse.

Introduction Web : Cours. IUT de Villetaneuse. Introduction Web : Cours 1ère année IUT de Villetaneuse. Mathieu Lacroix 1 9 septembre 2014 1. E-mail : mathieu.lacroix@iutv.univ-paris13.fr, Page Web : http://www.lipn.univ-paris13.fr/~lacroix/ IUT de

Plus en détail

APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI

APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Cours en Réponse à questions, n 1 Valérie Bellynck, Benjamin Brichet-Billet, Mazen Mahrous Grenoble

Plus en détail

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 - RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

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

Plus en détail

Une rapide introduction à HTML / CGI

Une rapide introduction à HTML / CGI Une rapide introduction à HTML / CGI Patrick Fuchs Université Paris 7 Equipe de Bioinformatique Génomique et Moléculaire PLAN 1. Généralités 2. Les Bases d HTML 3. Outils HTML avancés 4. HTML dynamique

Plus en détail

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 le langage HTML Maxime Morge Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 Plan Pourquoi est-il nécessaire de connaître le langage HTML? Comment stucturer le contenu d une page? Données

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

Tutoriel : Feuille de style externe

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?

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

HTML. La structure habituelle d un fichier HTML. Le bloc en tête (Head)

HTML. La structure habituelle d un fichier HTML. Le bloc en tête (Head) HTML Le code HTML peut être écrit sous le Bloc Notes en format ASCII sous l extension htm et html, ou dans un éditeur HTML. Les éditeurs HTML permettent de se passer de la saisie des marqueurs, mais il

Plus en détail

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8 Cours CSS 2013 tv - v.1.1 Sommaire Introduction aux feuilles de style 2 Constituants des pages web..................................... 2 Définition...............................................

Plus en détail

Le langage php. Serveur http est automatiquement lancé.

Le langage php. Serveur http est automatiquement lancé. Le langage php 1. Introduction aux langages serveurs : Il y a deux modes d exécution d une page HTML : Local : en cliquant sur le fichier, le navigateur Serveur http est automatiquement lancé. Navigateur

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

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

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

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

1. HTML. Cours Web. HyperText Markup Language (HTML) 1. HTML 1. HTML. HyperText Markup Language (HTML) Lionel Seinturier

1. HTML. Cours Web. HyperText Markup Language (HTML) 1. HTML 1. HTML. HyperText Markup Language (HTML) Lionel Seinturier Cours Web HyperText Markup Language (HTML) Lionel Seinturier Université Pierre & Marie Curie Lionel.Seinturier@lip6.fr HyperText Markup Language (HTML) HTML : langage de balisage issu de SGML Document

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

PROGRAMMER UNE PAGE WEB EN HTML ET CSS

PROGRAMMER UNE PAGE WEB EN HTML ET CSS Lycée Felix Le Dantec - Lannion PROGRAMMER UNE PAGE WEB EN HTML ET CSS 1STI2D TP8-3H NOM : PRÉNOM : CLASSE : Condition de réalisation : Travail seul Durée : 3 heures Matériel : un ordinateur sous Ubuntu

Plus en détail

Création d un site Internet (partie 2 )

Création d un site Internet (partie 2 ) Création d un site Internet (partie 2 ) Objectif : Apprendre les bases des langages XHTML et CSS pour réaliser un site CV Site ressource : http://jleu10.free.fr Adresse mail : jleu10@free.fr Jean-Louis

Plus en détail

Technique Internet de Base Javascript avancé

Technique Internet de Base Javascript avancé Technique Internet de Base Javascript avancé morge@di.unipi.it Licence 2 Université Jean Monnet 2008-2009 Introduction Un langage de programmation objet à prototype Un langage de programmation événementiel.

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

12. JavaScript. Cours Web. JavaScript. 12. JavaScript. 12. JavaScript. JavaScript. Lionel Seinturier. Université Pierre & Marie Curie.

12. JavaScript. Cours Web. JavaScript. 12. JavaScript. 12. JavaScript. JavaScript. Lionel Seinturier. Université Pierre & Marie Curie. Cours Web Lionel Seinturier Université Pierre & Marie Curie Lionel.Seinturier@lip6.fr 11/7/02 Programme Java s'exécutant côté client Web (ie dans le navigateur) applet prog. "autonome" stocké dans un fichier.class

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

Formation (X)HTML-CSS avancé

Formation (X)HTML-CSS avancé Formation (X)HTML-CSS avancé Table des matières 1 Introduction 3 1.1 La philosophie W3C.................................. 3 1.2 Du HTML au XHTML................................. 3 1.3 Et dans la pratique...................................

Plus en détail

Programmation Internet (Info 214), L2 MI vendredi 25 octobre 2013 Université Paris-Sud. Partiel. durée : 2h00

Programmation Internet (Info 214), L2 MI vendredi 25 octobre 2013 Université Paris-Sud. Partiel. durée : 2h00 Programmation Internet (Info 214), L2 MI vendredi 25 octobre 2013 Université Paris-Sud Partiel durée : 2h00 Le partiel est sur 20 points et comprend 9 pages (dont un aide-mémoire HTML et CSS à partir de

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

World-Wide Web et les formulaires électroniques, les images réactives

World-Wide Web et les formulaires électroniques, les images réactives World-Wide Web et les formulaires électroniques, les images réactives francois.dagorn@univ-rennes1.fr octobre 1995 1 Introduction Les clients WWW sont en général utilisés pour accéder à des documents diffusés

Plus en détail

Technologies Web. Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr

Technologies Web. Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr Technologies Web Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr Plan du cours Cours 1 : Introduction HTML/CSS Cours 2 : Introduction programmation web + javascirpt Cours 3 : Introduction

Plus en détail

INTRODUCTION A JAVA. Fichier en langage machine Exécutable

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

Plus en détail

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA DHTML Sommaire Introduction Compatibilité du DHTML Les layers Les balises dynamiques Balise Balise et La balise Animer de éléments Le Document Object Model (DOM) Modifier une

Plus en détail

Programmation Web : Cours. IUT de Villetaneuse.

Programmation Web : Cours. IUT de Villetaneuse. Programmation Web : Cours 2 ème année IUT de Villetaneuse. Mathieu Lacroix 1 3 septembre 2015 1. E-mail : mathieu.lacroix@iutv.univ-paris13.fr, Page Web : http://www.lipn.univ-paris13.fr/~lacroix/ I.U.T.

Plus en détail

INTRODUCTION CHAPITRE 1

INTRODUCTION CHAPITRE 1 CHAPITRE 1 INTRODUCTION Query, qu est-ce que c est?... 11 HTML, CSS, JavaScript, PHP : qui fait quoi?... 16 Un environnement de développement simple et gratuit... 19 Ce que vous allez apprendre... 20 9

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

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers Introduction Ma première page Web (2/2) Ce document est l'étape 2 d'un didacticiel qui a pour but de donner un aperçu de la création d'une page Web. Une ou deux pages seront créées et présenteront leur

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

Javascript. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) Javascript 1 / 36

Javascript. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) Javascript 1 / 36 Javascript Thierry Lecroq Université de Rouen FRANCE Thierry Lecroq (Univ. Rouen) Javascript 1 / 36 Plan 1 Généralités sur Javascript 2 Les bases 3 Les objets prédéfinis 4 Les évènements Thierry Lecroq

Plus en détail

Programmation Web. Chapitre 2. 2.1 Le Web. Sommaire

Programmation Web. Chapitre 2. 2.1 Le Web. Sommaire 13 Chapitre 2 Programmation Web Sommaire 2.1 Le Web.......................................... 13 2.1.1 Serveurs web................................... 14 2.1.2 Clients web....................................

Plus en détail

Guide de réalisation d une campagne e-mail marketing

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

Plus en détail

Introduction à la Simulation

Introduction à la Simulation ou comment créer votre premier jeu vidéo Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Aspect visuel souhaité Aspect visuel souhaité Code source de la page HTML Feuille

Plus en détail

TP ASP SUPINFO DOT NET TRAINING COURSE

TP ASP SUPINFO DOT NET TRAINING COURSE TP ASP SUPINFO DOT NET TRAINING COURSE Auteur : David Poulin Version 1.0 25 novembre 2003 Nombre de pages : 13 Ecole Supérieure d Informatique de Paris 23. rue Château Landon 75010 PARIS www.supinfo.com

Plus en détail

PHP/MySQL. École Nationale Supérieure des Mines de Nancy 2nde Année

PHP/MySQL. École Nationale Supérieure des Mines de Nancy 2nde Année Bases de Données et Ingénierie des Systèmes d Information 1 PHP/MySQL École Nationale Supérieure des Mines de Nancy 2nde Année Table des matières I PHP 2 1 Les bases 2 1.1 Introduction........................................

Plus en détail

Initiation HTML 5 / CSS 3. Clément Bourgoin cb@nokto.net v1.0-17/01/2013

Initiation HTML 5 / CSS 3. Clément Bourgoin cb@nokto.net v1.0-17/01/2013 Initiation HTML 5 / CSS 3 Clément Bourgoin cb@nokto.net v1.0-17/01/2013 1. Les langages du web Pour créer un site web, on utilise au moins deux langages : le HTML et le CSS. Il en existe d'autres mais

Plus en détail

INTERNET CRÉER UN SITE EN HTML ET CSS

INTERNET CRÉER UN SITE EN HTML ET CSS INTERNET CRÉER UN SITE EN HTML ET CSS Nous allons vous proposer de créer un site Web de plusieurs pages en utilisant du code HTML et une feuille de style CSS. Toutefois, l utilisation du HTML et du CSS

Plus en détail

LES FORMULAIRES. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr

LES FORMULAIRES. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr LES FORMULAIRES Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr LES FORMULAIRES Permet de récupérer les informations saisies par l'internaute sur votre site Nécessite un traitement des données : php mail

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

Le World Wide Web. Introduction. Daniel Hagimont Laurent Broto. 13 mars 2011 IRIT/ENSEEIHT 1 / 34

Le World Wide Web. Introduction. Daniel Hagimont Laurent Broto. 13 mars 2011 IRIT/ENSEEIHT 1 / 34 Le World Wide Web Introduction Daniel Hagimont Laurent Broto IRIT/ENSEEIHT 13 mars 2011 1 / 34 Copyright (c) 2010 Daniel Hagimont & Laurent Broto. Permission is granted to copy, distribute and/or modify

Plus en détail

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Conception de Sites Web Dynamiques : TD 2 HTML5 statique, feuille de style CSS, Mise en page, Framework Bootstrap http://www.labri.fr/perso/preuter/cswd2015

Plus en détail

LE LANGAGE HTML TODO : v1.2.1.0 07/05/2010 peignotc(at)arqendra(dot)net / peignotc(at)gmail(dot)com

LE LANGAGE HTML TODO : v1.2.1.0 07/05/2010 peignotc(at)arqendra(dot)net / peignotc(at)gmail(dot)com LE LANGAGE HTML TODO : - v.2..0 07/05/200 peignotc(at)arqendra(dot)net / peignotc(at)gmail(dot)com Toute reproduction partielle ou intégrale autorisée selon les termes de la licence Creative Commons (CC)

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

Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.

Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue. Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.net/857 Intégrateur de STPo - Robot de Gordon Bennett 2 L'intégrateur XHML,

Plus en détail

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

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

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

Guide de réalisation d une campagne e-mail marketing

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

Plus en détail

Le client/serveur dans le cas du Web

Le client/serveur dans le cas du Web Le client/serveur dans le cas du Web Olivier Flauzac & Cyril Rabat olivier.flauzac@univ-reims.fr cyril.rabat@univ-reims.fr Licence 3 Info - Info0503 - Introduction à la programmation client/serveur 2015-2016

Plus en détail

Documentation SPIP. Modifier l'habillage graphique

Documentation SPIP. Modifier l'habillage graphique Documentation SPIP Modifier l'habillage graphique Modifier l'habillage graphique 1. Introduction aux feuilles de style...4 Pourquoi les feuilles de style?...4 Concrètement...5 Notes...5 2. Les feuilles

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

COURS D'INITIATION A LA CREATION DE PAGES INTERNET EN HTML

COURS D'INITIATION A LA CREATION DE PAGES INTERNET EN HTML COURS D'INITIATION A LA CREATION DE PAGES INTERNET EN HTML Denis Bourdon dbourdon@dbourdon.com Étudiant 2ème année Département Télécommunications ENSIMAG/ENSERG 1 PLAN Introduction Qu'est-ce que HTML?

Plus en détail

Cours 4 Programmation web, orientée serveur

Cours 4 Programmation web, orientée serveur DUT MMI IUT de Marne-la-Vallée 17/03/2015 M2202 - Algorithmique Cours 4 Programmation web, orientée serveur Philippe Gambette Sources phpdebutant.net www.php.net (documentation du langage PHP) Plan du

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

Réalisation d'un site web. Première partie : Création des pages HTML. thierry.vaira@orange.fr

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv> Réalisation d'un site web Première partie : Création des pages HTML 1 Objectifs Se familiariser avec le codage HTML Acquérir une pratique minimale Être capable de mener à bien la construction d'un site

Plus en détail

Technologies de l Internet. Partie 5 : DOM, JavaScript Iulian Ober iulian.ober@irit.fr

Technologies de l Internet. Partie 5 : DOM, JavaScript Iulian Ober iulian.ober@irit.fr Technologies de l Internet Partie 5 : DOM, JavaScript Iulian Ober iulian.ober@irit.fr DHTML : Introduction Objectif : créer des pages dynamiques objets qui apparaissent/disparaissent/changent (ex. menus)

Plus en détail

Le Web. Présentation du langage HTML et du protocole HTTP

Le Web. Présentation du langage HTML et du protocole HTTP Le Web Présentation du langage HTML et du protocole HTTP Une petite histoire du web 1989 1ère note relative au web «hypertexte et le CERN» au sujet du World Wide Web. 1991 premier serveur web sur l Internet,

Plus en détail

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design A.F.L.I.M. Ateliers de Formations Linguistique Informatique Multimédia Formation HTML5 et CSS3 - Pour des sites Responsive Web Design Formation : Présentation du HTML5 Bref historique du HTML5 Lignes de

Plus en détail

HTML5, CSS3. Apprenez les langages. pour créer votre premier site web. et JavaScript. HTML5, CSS3 et JavaScript - pour créer votre premier site web

HTML5, CSS3. Apprenez les langages. pour créer votre premier site web. et JavaScript. HTML5, CSS3 et JavaScript - pour créer votre premier site web pour créer votre premier site web Dès le début du livre l auteur présente un tour d horizon du développement sur le Web ; les langages côté client et serveur, les formats d images, les navigateurs afin

Plus en détail