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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// HTML, Javascript XHTML & CSS

// HTML, Javascript XHTML & CSS design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact mr@sweeen.com // sommaire HTML 01. Introduction au langage HTML 02. Introduction

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

Chapitre 6 : Les objets du navigateur

Chapitre 6 : Les objets du navigateur I. Généralités Chapitre 6 : Les objets du navigateur En JavaScript il existe aussi plusieurs objets rattachés à la fenêtre, à la page et au navigateur. Ils sont appelés window, document et navigator. Ce

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

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

Bernard Lecomte. Débuter avec HTML

Bernard Lecomte. Débuter avec HTML Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.

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

1 Utilisation du logiciel Quanta+ 2

1 Utilisation du logiciel Quanta+ 2 COURS HTML-CSS Cours HTML Page 1 Table des matières 1 Utilisation du logiciel Quanta+ 2 2 Les feuilles de style CSS 4 2.1 Définition et principe................................. 4 2.2 Mais pourquoi donc

Plus en détail

CREATION d UN SITE WEB (INTRODUCTION)

CREATION d UN SITE WEB (INTRODUCTION) CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour

Plus en détail

Le langage PHP. Walid Belkhir Université de Provence belkhir@cmi.univ-mrs.fr http://www.lif.univ-mrs.fr/ belkhir/

Le langage PHP. Walid Belkhir Université de Provence belkhir@cmi.univ-mrs.fr http://www.lif.univ-mrs.fr/ belkhir/ Le langage PHP Walid Belkhir Université de Provence belkhir@cmi.univ-mrs.fr http://www.lif.univ-mrs.fr/ belkhir/ 1 / 38 Plan 1 Introduction au langage PHP 2 2 / 38 Qu est ce que PHP? langage interprété

Plus en détail

Introduction au langage HTML

Introduction au langage HTML 2 Plan Introduction au langage HTML Unité «Introduction à l Informatique» Licence 1 semestre 1 Année 2006/2007! 1. Petit historique d Internet!! en détails! 4. Créer une page Web http://jean-luc.mari.perso.esil.univmed.fr

Plus en détail

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

KompoZer. Un éditeur de pages Web. M r Castanet - Année scolaire 2007/2008 - page 1

KompoZer. Un éditeur de pages Web. M r Castanet - Année scolaire 2007/2008 - page 1 KompoZer Un éditeur de pages Web M r Castanet - Année scolaire 2007/2008 - page 1 I. Introduction : Au cours de cette formation, nous allons utiliser le logiciel KompoZer, qui gratuit et libre de droit,

Plus en détail

Cours Web - HTML (1 partie)

Cours Web - HTML (1 partie) Cours Web - HTML (1 partie) Thierry Vaira BTS IRIS Avignon tvaira@free.fr v0.1 Objectifs Introduction Se familiariser avec le codage HTML et acquérir une pratique minimale. Être capable de mener à bien

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

Utilisation de l éditeur.

Utilisation de l éditeur. Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7

Plus en détail

Initiation à html et à la création d'un site web

Initiation à html et à la création d'un site web Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le

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

Le Web Dynamique avec JavaScript

Le Web Dynamique avec JavaScript Le Web Dynamique avec JavaScript Concepts et Syntaxe 1 Intérêt Présentation de JavaScript Contrôle du contenu et de l apparence de pages Web Contrôle de fonctionnalités du Navigateur Internet Gestion du

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

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE 11/02/14 CONTEXTE SITE WEB RÉACTIFS S. LANQUETIN ENVIRONNEMENT Clavier (standard, mini, virtuel) Souris / doigt / stylet Rotation de l écran Performances CPU et GPU Capacité de stockage GPS Mobile/fixe

Plus en détail

Méta-connaissances pour générer des programmes sur le Web

Méta-connaissances pour générer des programmes sur le Web Méta-connaissances pour générer des programmes sur le Web Basile STARYNKEVITCH http://starynkevitch.net/basile/ basile@starynkevitch.net (à titre privé, sans rapport avec mon employeur CEA-LIST) Séminaire

Plus en détail

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées HTML 5 Page de base Meta Outils pour Firefox Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées Les 6 niveaux de titre Indices et exposants Les liens L arborescence

Plus en détail

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page

Plus en détail

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 Éric Sarrion JQuery & JQuery UI Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 11 Onglets Les pages HTML comportant des onglets (tabs) sont devenues courantes dans les sites web actuels. Elles permettent

Plus en détail

Optimiser les performances d un site web. Nicolas Chevallier Camille Roux

Optimiser les performances d un site web. Nicolas Chevallier Camille Roux Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net

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

Manuel de l utilisateur*

Manuel de l utilisateur* Gestionnaire de contenu (CRM) Manuel d utilisateur du Gestionnaire de contenu (CRM) de votre site Internet Manuel de l utilisateur* * Source : Communauté Umbraco * Source: Communauté Umbraco Table des

Plus en détail

Tutorial des barres d'outils dans Mozilla Firefox

Tutorial des barres d'outils dans Mozilla Firefox Version 2.1 24. septembre 2007 Tutorial des barres d'outils dans Mozilla Firefox Responsable du projet : Auteur : Collaborateurs : Marc Johannot Cide Cyrille Verdon, Pouly Romain TUTORIIAL Les barres d'outils

Plus en détail

Développement Web pour mobiles

Développement Web pour mobiles Développement Web pour mobiles Les bases du HTML par Eric Sarrion Date de publication : 11/08/2010 Dernière mise à jour : Le langage HTML est le langage de base permettant de construire des pages web,

Plus en détail

Fabrication de site web Damien Nouvel

Fabrication de site web Damien Nouvel Fabrication de site web Plan Gestion de projets informatiques Acteurs de la fabrication de sites web Travail du designer Travail du développeur 2 / 30 Plan Gestion de projets informatiques Acteurs de la

Plus en détail

Introduction à Expression Web 2

Introduction à Expression Web 2 Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer

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

Projet individuel d algorithmique-programmation AP1 : groupe 1.1 - complément bibliothèque graphique

Projet individuel d algorithmique-programmation AP1 : groupe 1.1 - complément bibliothèque graphique Projet individuel d algorithmique-programmation AP1 : groupe 1.1 - complément bibliothèque graphique octobre 2010 1 Affichage graphique statique Il en existe trois bibliothèques graphiques en Ocaml : la

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

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...

Plus en détail

Introduction aux principes de la technologie Internet

Introduction aux principes de la technologie Internet 1 Introduction aux principes de la technologie Internet Je suis impliqué dans le commerce électronique depuis un bon bout de temps : j ai vendu des Casios dans les rues de New York! Il y a à peine quelques

Plus en détail

ISBN : 2-212-11407-9

ISBN : 2-212-11407-9 Groupe Eyrolles, 2005, ISBN : 2-212-11407-9 6 Les formulaires Les formulaires introduits dans le HTML depuis ses plus anciennes versions sont l élément essentiel qui permet l interactivité entre un site

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

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le

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

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web 52 Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web D'où proviennent ces données qui permettent de vous localiser? Pour les smartphones, deux procédés peuvent être utilisés

Plus en détail

Failles XSS : Principes, Catégories Démonstrations, Contre mesures

Failles XSS : Principes, Catégories Démonstrations, Contre mesures HERVÉ SCHAUER CONSULTANTS Cabinet de Consultants en Sécurité Informatique depuis 1989 Spécialisé sur Unix, Windows, TCP/IP et Internet Séminaire 15 ans HSC Failles XSS : Principes, Catégories Démonstrations,

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

Pré-requis Une... connaissance de l environnement Windows ou Mac et du monde de l internet est nécessaire.

Pré-requis Une... connaissance de l environnement Windows ou Mac et du monde de l internet est nécessaire. WEBMASTER 15 JOURS Une... connaissance de l environnement Windows ou Mac et du monde de l internet est nécessaire. Toute... personne, graphiste ayant à développer et gérer des sites web statiques ou dynamiques.

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

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014 Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire

Plus en détail

Introduction Survol du langage Javascript et html. Programmation WEB. Introduction à Javascript WIM 1.1. IUT de Fontainebleau.

Introduction Survol du langage Javascript et html. Programmation WEB. Introduction à Javascript WIM 1.1. IUT de Fontainebleau. Introduction à Javascript IUT de Fontainebleau 17 décembre 2014 1 Introduction 2 3 Sommaire Introduction 1 Introduction 2 3 Une application Web est une applications clients/serveur(s) On peut la voir en

Plus en détail

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation ING 01 LANGAGUE JAVA Durée : 21 heures 1090 HT / jour Dates : à définir en 2012 Concevoir et développer des programmes en langage Java Comprendre le fonctionnement de la machine virtuelle S approprier

Plus en détail

Technique Internet de Base Introduction au HTML

Technique Internet de Base Introduction au HTML Technique Internet de Base Introduction au HTML morge@di.unipi.it Licence 2 Université Jean Monnet 2008-2009 Déroulement Organisation CM: Vendredi 10h-13h 30/01, 07/02,... TP: Lundi 14h-16h 02/02, 09/02,...

Plus en détail

SYSTEME D INFORMATION

SYSTEME D INFORMATION AgroParisTech Grignon 1A SYSTEME D INFORMATION MMIP - UFR d'informatique ufr.informatique@agroparistech.fr Support rédigé par David DOUSSOT : doussot@agroparistech.fr SOMMAIRE Système d'information : Présentation

Plus en détail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

Aide Utilisateur. Cellpass.fr

Aide Utilisateur. Cellpass.fr Aide Utilisateur Mise en place simple :... 2 Création d une ressource... 2 Installation du module... 5 Test fonction file OK... 7 temps de connexion < 1 seconde(s)... 7 Exemple d'installation PassUp pour

Plus en détail

Ecriture de pages Web Le langage HTML Karam Mustapha Karam.mustapha@lsis.org

Ecriture de pages Web Le langage HTML Karam Mustapha Karam.mustapha@lsis.org Ecriture de pages Web Le langage HTML Karam Mustapha Karam.mustapha@lsis.org Comment fonctionne le Web? C'est un mécanisme client-serveur. Le client demande un fichier, le serveur lui donne tel qu'il est

Plus en détail

GWT Développement d'applications clientes en Java. Introduction prise en main

GWT Développement d'applications clientes en Java. Introduction prise en main GWT Développement d'applications clientes en Java Introduction prise en main 1 Pourquoi GWT? GWT est un framework, conçu par Google, pour programmer des applications web en Java ; Il permet de programmer

Plus en détail

Publication sur Internet

Publication sur Internet SÉANCE 3 Publication sur Internet 3.1 Edition d un site en HTML 3.1.1 Les différents types de documents Les documents présents sur Internet peuvent être de différents formats. Le format HTML est le premier

Plus en détail

1. La notion de cascade

1. La notion de cascade HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir

Plus en détail

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

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

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES...

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES... Diffusion de l information dans Internet Guide de création de documents Word accessibles 5 novembre 2009 OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT...

Plus en détail

www.evogue.fr SUPPORT DE COURS / HTML

www.evogue.fr SUPPORT DE COURS / HTML L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / HTML Sommaire Sommaire... 2 Présentation... 3 Introduction... 3 Fonctionnement... 3 Historique... 4 Navigateurs... 6 Définition... 6 Historiquement...

Plus en détail

Document Object Model (DOM)

Document Object Model (DOM) Document Object Model (DOM) Jean-Claude Charr Maître de conférences IUT de Belfort Montbéliard Université de Franche Comté Description générale Définit un standard pour accéder aux documents structurés

Plus en détail

Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA)

Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA) Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA) No. Validation Tests avec les outils Commentaires A Contenu non- textuels

Plus en détail

Les unités de taille des polices de caractères

Les unités de taille des polices de caractères Les unités de taille des polices de caractères Deux systèmes permettent d'indiquer les dimensions des éléments en CSS : les unités de taille fixe et les unités de taille relative. C'est la propriété font-size

Plus en détail

Publier un Carnet Blanc

Publier un Carnet Blanc Site Web de l association des ingénieurs INSA de Lyon Publier un Carnet Blanc Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008 Publication,

Plus en détail

GUIDE D UTILISATION DU BACKOFFICE

GUIDE D UTILISATION DU BACKOFFICE GUIDE D UTILISATION DU BACKOFFICE 1. Modifier les pages du site : - Aller dans l onglet «PAGE HTML», puis «Liste des pages HTML» - Pour visualiser votre page, cliquer sur le nom écrit en vert, dans la

Plus en détail

L3 informatique TP n o 2 : Les applications réseau

L3 informatique TP n o 2 : Les applications réseau L3 informatique TP n o 2 : Les applications réseau Sovanna Tan Septembre 2009 1/20 Sovanna Tan L3 informatique TP n o 2 : Les applications réseau Plan 1 Transfert de fichiers 2 Le Courrier électronique

Plus en détail

LE POSITIONNEMENT CSS. Quelques notions essentielles

LE POSITIONNEMENT CSS. Quelques notions essentielles LE POSITIONNEMENT CSS Quelques notions essentielles Pour éviter ça....element{ padding: 15px; width: 98.32%; /* pas compris, mais ça déborde à 98.33% */ position: relative; /* faut pas enlever */ overflow:

Plus en détail

Formulaire pour envoyer un mail

Formulaire pour envoyer un mail Formulaire pour envoyer un mail AVERTISSEMENT : Ce tuto est une compilation de plusieurs sources trouvées sur internet, dont les références sont données à la fin de cet article. Le but de ce tutoriel n'est

Plus en détail

1 Module 1 : feuille de style, position des blocs, nombre d éléments

1 Module 1 : feuille de style, position des blocs, nombre d éléments Plugin d'habillage d'eva-web 4 Le plugin d'habillage d'eva-web permet de : adapter la position, la taille des divers éléments la composant choisir les couleurs de fonds des divers secteurs choisir la taille,

Plus en détail

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation

Plus en détail

http://www.ed-diamond.com

http://www.ed-diamond.com Ceci est un extrait électronique d'une publication de Diamond Editions : http://www.ed-diamond.com Ce fichier ne peut être distribué que sur le CDROM offert accompagnant le numéro 100 de GNU/Linux Magazine

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

PHP/MySQL. avec Flash 8. Jean-Marie Defrance

PHP/MySQL. avec Flash 8. Jean-Marie Defrance PHP/MySQL avec Flash 8 Jean-Marie Defrance 11 Interfaçage Flash-PHP-Txt Utiliser une interface Flash en interaction avec des scripts PHP permet de réaliser de nombreuses applications qui exploitent à la

Plus en détail

SYSTÈMES D INFORMATIONS

SYSTÈMES D INFORMATIONS SYSTÈMES D INFORMATIONS Développement Modx Les systèmes de gestion de contenu Les Content Management Système (CMS) servent à simplifier le développement de sites web ainsi que la mise à jour des contenus.

Plus en détail

Guide pratique pour aligner une transcription sous ELAN

Guide pratique pour aligner une transcription sous ELAN Guide pratique pour aligner une transcription sous ELAN Version 2.0 Juin 2009 Isabel Colón de Carvajal Laboratoire ICAR (CNRS & Université de Lyon) 1 Introduction générale... 1 2 Installation du logiciel...

Plus en détail

Info0101 Intro. à l'algorithmique et à la programmation. Cours 3. Le langage Java

Info0101 Intro. à l'algorithmique et à la programmation. Cours 3. Le langage Java Info0101 Intro. à l'algorithmique et à la programmation Cours 3 Le langage Java Pierre Delisle, Cyril Rabat et Christophe Jaillet Université de Reims Champagne-Ardenne Département de Mathématiques et Informatique

Plus en détail

UN SITE WEB RESPONSIVE EN UNE HEURE?

UN SITE WEB RESPONSIVE EN UNE HEURE? UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N

Plus en détail