Les outils de création de sites web

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

Download "Les outils de création de sites web"

Transcription

1 Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site du zéro») Wikipedia : chapitres conception de sites web, programmation web, systèmes de gestion de contenu... Sommaire 1 ère séance : -- Généralités sur les protocoles et les langages du web, les navigateurs, les éditeurs, le côté serveur, types de sites web, étapes de conception d un site -- Les balises de base du HTML 2 ème séance: -- Structure de la page HTML, les liens, l insertion des images. Les listes 3 ème séance: -- Les CSS : appliquer les styles, la mise en forme, 4 ème séance: -- Les tableaux, les formulaires, positionnement des blocs. 5 ème séance: -- Publier son site : FTP, nom de domaine, hébergement, référencement N séances: -- Les CMS : Jimdo, SPIP, Joomla 1 Site web. Tentative de définition : ensemble de pages hyperliées entre elles pouvant être véhiculées et adressées sur le réseau mondial www moyennant un codage universel que savent lire des logiciels «navigateurs». L adresse du site est l URL (Uniform Resources Locator). Le World Wide Web créé en 1990 au CERN : naissance du lien hypertexte et de l adresse électronique. W3C (consortium www) en Ouverture à l utilisation mondiale du www en 1993 normalisation internationale des protocoles et langages. Ne sont cités que les principaux utilisés : exemples : Protocoles de communication: http (HyperText Transfer Protocol) https ( idem + Secured) ftp (File Transfer Protocol) Formats de contenus ou langages : html (HyperText Markup Language) css (Cascading Style Sheets) Formats d images graphiques: Technologies serveurs : gif (Graphic Interchange Format) jpeg (Joint Photographic Experts Group) png (Portable Network Graphics) Flash (animation, propriété Macromedia) Php (Hypertext Preprocessor) Javascript () MySql (gestionnaire de bases de données) Versions successives du HTML - de 1992 à 2000 : HTML 1,2,3,4 avec styles intégrés - de 2000 à 2007 : XHTML et CSS pour séparer le contenu de la mise en forme - depuis 2007 : HTML5 et CSS3. En pratique, peu de différence entre les versions depuis la 4 ème.

2 Tuto 1ère séance - p2 2 Navigateurs : leur rôle est d analyser les codes HTML et CSS et d en produire le résultat visuel. Le code est correct s il est lisible sans faille par tous les navigateurs, tout au moins les principaux (nécessité de tester) Internet Explorer version actuelle IE9 Mozilla Firefox Google Chrome Safari (Mac) Opera 3 Editeurs: logiciels nécessaires pour créer les pages HTML et CSS : 2 catégories : WYSIWYG ex : Nvu, Dreamweaver (Macromedia), Frontpage, Word (du meilleur au moins bon) Ce sont des traitements de texte qui fabriquent du code automatiquement à partir de texte en clair mais il est généralement difficile de s y retrouver lorsqu on veut modifier... Editeurs de texte simples : sous Windows: Bloc-notes ou WordPad, PSPad, NotePad++ (libres) Sous Mac : Smultron, jedit Nous utiliserons préférentiellement NotePad++ dont nous aurons l occasion de noter les avantages. 4 Etapes de création d un site : 1. Projet : objectif, cible, type de site, statique ou dynamique, moyens nécessaires : coût, moyens humains pour la mise à jour et la maintenance 2. Mise en œuvre : nom de domaine, hébergeur, choix d un CMS 3. Conception : structure des pages HTML, charte graphique, etc 4. Réalisation 5. Suivi : Recette, lancement (mise en ligne), annonce (faire connaître), référencement, maintenance

3 Tuto 1ère séance - p3 2 - HTML : Les balises de base On utilisera dans un premier temps un éditeur de texte sans mise en forme, en l occurrence le bloc-notes de Windows. Ensuite on introduira NotePad++ La visualisation des résultats se fera sur le navigateur habituel de chacun, soit Google Chrome en ce qui me concerne. Exemple 1 : syntaxe des balises en général. Paragraphes. Imbrication avec <i> ou <b>.alinea. Code : Résultat dans le navigateur : On observe l'effet des différentes balises, 1) que les balises doivent être imbriquées, 2) que les sauts de lignes dans le code n'ont d'effet que si l'on introduit la balise autofermante (ou orpheline) <br />pour signifier un saut de ligne. Nous verrons d'autres exemples de balises de ce type.

4 Tuto 1ère séance - p4 3 Structure de la page HTML Exemple 2 : Le DOCTYPE, les balises obligatoires de structure de la page : balises de tête, meta, titre et corps de la page. Code : Résultat : Pas terrible! Le charset dit universel utf-8 rend peut-être très bien les idéogrammes chinois mais pas les lettres accentuées du français... Remplaçons dans la balise meta utf-8 par iso , juste pour voir le résultat. C'est quand même plus conforme à nos vieilles habitudes : Notons que tout ce qui n'est pas entre les balises <body></body> n'apparaît pas dans la page affichée par le navigateur, non plus que les commentaires. La syntaxe de ces derniers est : <!--commentaire--> cela permet d'éclairer le programmeur qui reprend une page de code pour la modifier, c'est utile mais il ne faut pas en abuser car cela alourdit le code. Voici la page de code sans aucun commentaire :

5 Tuto 1ère séance - p5 4 - Autres balises de texte Exemple 3 : Titres taille 1,2,3,4, mise en valeur, citations, exposants, indices, abréviations, Code (extrait de page sans les balises de tête pour ne pas alourdir le tuto) : Résultat : Remarques importantes : Les autres paramètres de la mise en forme seront vus à l'occasion des CSS. Il faut d'ailleurs observer que les balises <i></i> (italique) et <b></b> (gras) sont désormais considérées comme obsolètes depuis le développement des feuilles de style. Il en est de même pour les polices de caractère, les couleurs de texte et tout ce qui concerne la mise en forme des contenus. On peut néanmoins les utiliser à l'occasion car toujours prises en compte par les navigateurs. D'autre part, l'effet des balises <em>et <strong> est ici la mise en italique et en gras mais cela dépend du navigateur. Pour être sûr d'obtenir toujours du gras, de l'italique et du souligné il vaut mieux employer les balises spécifiques <b>, <i> et <u>

6 Tuto 1ère séance - p6 Exemple 4 : les listes : 2 types de présentation Code : Résultat : <ul>on trouve de tout à RIO: <li>du Windows</li> <li>des images</li> <li>de la tablette</li> <li>et même du Mac...!</li> </ul> <ol>on trouve de tout à RIO: <li>du Windows</li> <li>des images</li> <li>de la tablette</li> <li>et même du Mac...!</li> </ol> 5 - Les liens Un site web comporte généralement plusieurs pages. Le principe de l'hypertexte permet d'établir des liens, soit vers un autre site, soit vers une autre page du même site, les pages étant situées ou non dans le même dossier, soit vers une «ancre» créée préalablement. 1 ) vers un autre site : il s'agit d'un lien absolu Exemple 5 : code : <p>venez donc visiter le <a href="http://rio.orgerus.org">site RIO</a>, vous y trouverez <b>tout</b>!</p> Résultat : 2 ) vers une autre page du même site (lien relatif) : Exemple 6 : code : <p>par contre, si vous voulez connaître toutes les astuces de mise en forme du présent site, rendez-vous sur la page <a href="le_style.html">css</a></p> résultat : Il s'agit là d'un lien relatif vers une autre page du même site qui ne fonctionne que si la page html vers laquelle on redirige le visiteur est placée dans le même dossier que la page origine (que ce soit en local ou sur le serveur de l'hébergeur) Si par contre, la page de destination est située dans un autre dossier, appelons-le par exemple tuto_css, la balise lien de l'exemple 6 devra prendre la forme suivante : <a href="tuto_css/le_style.html">css</a> ou encore, si le dossier est situé plus haut dans l'arborescence : <a href="../le_style.html">css</a> Chacun pourra essayer cette configuration par soi-même. Notons que les liens relatifs sont particulièrement utiles si l'on construit un site dont on ne connaît pas encore l'url qui permettrait de faire un lien absolu.

7 Tuto 1ère séance - p7 3 ) vers une ancre Exemple 7 : l'endroit de destination doit comporter un attribut permettant de l'identifier, que l'on appelle l'ancre : par ex. : <h2 id= ''images''>comment insérer des images</h2> On peut dès lors, dans une autre page, diriger le visiteur vers cette ancre avec l'attribut suivant : <a href= ''#images ''>voir le chapitre images pour en savoir plus</a> 4 ) vers une adresse mail Exemple8 : La forme de l'attribut est similaire à ce qui précède : <a href=''mailto pas à me contacter en cas de pb</a> 5 ) pour télécharger un fichier Exemple 9 : <a href=''fichier1.zip''>téléchargement du fichier1</a> 77

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

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

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

Écriture de pages Web

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

Plus en détail

SITE WEB. Définition. Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau

SITE WEB. Définition. Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau SITE WEB Définition Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau Comment mon site est sur internet Je crée mon site sur mon ordinateur, en local.

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

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

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

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

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

Plus en détail

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

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

Plus en détail

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

Introduction à HTML et CSS

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

Plus en détail

Créez votre premier site web De la conception à la réalisation

Créez votre premier site web De la conception à la réalisation Chapitre 1 : Introduction A. Introduction 17 Chapitre 2 : Les langages A. L objectif 21 B. L HTML 21 1. L état des lieux 21 2. Les éléments HTML 21 3. Les attributs 22 4. Les caractères 23 5. Les espaces

Plus en détail

Création de page web avec Dreamweaver 2.0

Création de page web avec Dreamweaver 2.0 Création de page web avec Dreamweaver 2.0 Guide d accompagnement pour Windows avril 2002 Suzanne Harvey Responsable RÉCIT suzanne.harvey@prologue.qc.ca http://www.apinfo.qc.ca http://www.cssh.qc.ca/se/recit

Plus en détail

TP 1 : HTML 4. EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows

TP 1 : HTML 4. EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows TP 1 : HTML 4 EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows : Bloc-notes ou bien EDIT en mode MS-DOS suivant votre ordinateur. Les utilisateurs

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

Développement Web INITITIATION AU DEVELOPPEMENT WEB ET PRESENTATION DES DIFFERENTES SOLUTIONS POSSIBLES POUR LA MISE EN PLACE D'UN SITE WEB

Développement Web INITITIATION AU DEVELOPPEMENT WEB ET PRESENTATION DES DIFFERENTES SOLUTIONS POSSIBLES POUR LA MISE EN PLACE D'UN SITE WEB Développement Web INITITIATION AU DEVELOPPEMENT WEB ET PRESENTATION DES DIFFERENTES SOLUTIONS POSSIBLES POUR LA MISE EN PLACE D'UN SITE WEB Olivier Allaert 1 Développement Web Développement Web Principe

Plus en détail

World Wide Web (WWW) cours@urec.cnrs.fr

World Wide Web (WWW) cours@urec.cnrs.fr World Wide Web (WWW) cours@urec.cnrs.fr Contributions Création: Claude Gross Modifications: Bernard Tuy, J.P Gauthier Objectifs du Web Aboutissement d un projet du CERN en Mars 1989. Espace d'information

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

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

Collectif Stratégies Alimentaires TECHNOLOGIES DE L A COMMUNICATION ET DE L INFORMATION PAR INTERNET

Collectif Stratégies Alimentaires TECHNOLOGIES DE L A COMMUNICATION ET DE L INFORMATION PAR INTERNET Collectif Stratégies Alimentaires TECHNOLOGIES DE L A COMMUNICATION ET DE L INFORMATION PAR INTERNET Formation à l utilisation de SPIP Bujumbura 26-27 mars 2011 Objectifs de la formation 1. Permettre aux

Plus en détail

Langages du Web. Que savez vous???

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

Plus en détail

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

Petite histoire d Internet

Petite histoire d Internet À la base, Internet est défini par des ordinateurs qui sont reliés entre eux grâce à des câbles, du WiFi ou encore des satellites, créant ainsi un réseau à échelle mondiale. Les ordinateurs communiquent

Plus en détail

Programmation Internet Cours 4

Programmation Internet Cours 4 Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web

Plus en détail

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

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

Cours Web nº1. P. Yger (pierre.yger@unic.cnrs-gif.fr) 14 et 18 septembre 2009. Introduction au World Wide Web et à XHTML. Internet et le Web

Cours Web nº1. P. Yger (pierre.yger@unic.cnrs-gif.fr) 14 et 18 septembre 2009. Introduction au World Wide Web et à XHTML. Internet et le Web Internet et le Web Cours Web nº1 Introduction au World Wide Web et à XHTML P. Yger (pierre.yger@unic.cnrs-gif.fr) 14 et 18 septembre 2009 P. Yger (IFIPS) Web et XHTML 14-18 Sep 2009 1 / 37 Internet et

Plus en détail

CATALOGUE DES FORMATIONS

CATALOGUE DES FORMATIONS CATALOGUE DES FORMATIONS WEB / GRAPHISME ADOBE ACROBAT PRO... 1 ADOBE PHOTOSHOP... 2 ADOBE INDESIGN... 3 ADOBE DREAMWEAVER... 4 ARTISTEER... 5 PREZI... 6 LE LANGAGE HTML... 7 LES FEUILLES DE STYLE CSS...

Plus en détail

bookmark), sachant qu'à chaque favori est associée une adresse web ; o suivre un hyperlien, sachant qu'à chaque hyperlien est associée une

bookmark), sachant qu'à chaque favori est associée une adresse web ; o suivre un hyperlien, sachant qu'à chaque hyperlien est associée une Introduction : On appelle «Web», contraction de «World Wide Web» (d'où l'acronyme www), une des possibilités offertes par le réseau Internet de naviguer entre des documents reliés par des liens hypertextes.

Plus en détail

Programmation Web TP1 - HTML

Programmation Web TP1 - HTML Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML

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

C r é a t i o n D e S i t e s. P o l C R O V A T T O

C r é a t i o n D e S i t e s. P o l C R O V A T T O C r é a t i o n D e S i t e s P o l C R O V A T T O 2 / 10 Avant-propos 3 Définition d'internet? 3 Fournisseur Accès Internet: FAI 4 Définition d'un site Internet 5 Site web ou site 5 Liens hypertextes

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

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

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

Comment faire pour créer un site web? (mon site, pas à pas)

Comment faire pour créer un site web? (mon site, pas à pas) Comment faire pour créer un site web? (mon site, pas à pas) Author : soufiane Bonjour, Bienvenue dans cette nouvelle série de tutoriels destinée aux débutants cherchant comment créer un site web de A à

Plus en détail

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

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

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS N i c Mathieu o l a s Nebra C h u Réussir son site web avec XHTML et CSS Préface de Laurent Denis 2 e édition Groupe Eyrolles, 2006, 2008, ISBN : 978-2-212-12307-4 Un site web, comment ça marche? Pour

Plus en détail

Chapitre 1 Créer votre site web avec Dreamweaver 8 11

Chapitre 1 Créer votre site web avec Dreamweaver 8 11 Chapitre 1 Créer votre site web avec Dreamweaver 8 11 1.1. Installer Dreamweaver sur votre ordinateur... 12 1.2. Découvrir l interface de Dreamweaver... 15 La manipulation de l interface... 16 La gestion

Plus en détail

Formation Webmaster : Création de site Web Initiation + Approfondissement

Formation Webmaster : Création de site Web Initiation + Approfondissement Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation

Plus en détail

Evolutions du Web et des langages

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

Plus en détail

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

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

Initiation au Web et à l HTML

Initiation au Web et à l HTML Initiation au Web et à l HTML Mathieu LACROIX, François RÉVERET, Antoine VACAVANT mathieu.lacroix@isima.fr françois.reveret@univ-bpclermont.fr antoine.vacavant@liris.cnrs.fr 2 et 3 Avril 2007 /40 Mathieu

Plus en détail

Initiation au Web et à l HTML

Initiation au Web et à l HTML Initiation au Web et à l HTML Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT marzais@llaic3.u-clermont1.fr mathieu.lacroix@isima.fr antoine.vacavant@liris.cnrs.fr 24 et 25 Avril 2006 /39 Thibault

Plus en détail

Réussir. avec XHTML et CSS. 3e édition. son site web. Nebra. Mathieu. Préface de Laurent Denis

Réussir. avec XHTML et CSS. 3e édition. son site web. Nebra. Mathieu. Préface de Laurent Denis Mathieu Nebra Réussir son site web avec XHTML et CSS 3e édition Préface de Laurent Denis Groupe Eyrolles, 2006, 2008, 2010, ISBN : 978-2-212-12485-9 Un site web, comment ça marche? Pour créer un site web,

Plus en détail

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

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et

Plus en détail

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

Les navigateurs, le HTML et la typographie dans le W.E.B.

Les navigateurs, le HTML et la typographie dans le W.E.B. Les navigateurs, le HTML et la typographie dans le W.E.B. Mais d abord qu est-ce que Internet? C est un système mondial d interconnexion de réseau informatique, utilisant un ensemble standardisé de protocole

Plus en détail

Création d une page Web et mise en ligne.

Création d une page Web et mise en ligne. Création d une page Web et mise en ligne. Conception / description technique 1) Définir un objectif Définir des moyens, des stratégies : images, slogans Réflexion sur le contenu Qui suis-je? diplômes +

Plus en détail

WEB, principes de base. Bac INFORMATIQUE IFOSUP Chargée de cours : N Vanassche www.nathalievanassche.be. Et vos ID ont de la CLASS (Nicolas Hoffmann)

WEB, principes de base. Bac INFORMATIQUE IFOSUP Chargée de cours : N Vanassche www.nathalievanassche.be. Et vos ID ont de la CLASS (Nicolas Hoffmann) WEB, principes de base Bac INFORMATIQUE IFOSUP Chargée de cours : N Vanassche Et vos ID ont de la CLASS (Nicolas Hoffmann) Créer et Chapitre 01 structurer une page web Objectifs du cours : Fonctionnement

Plus en détail

Technologies Internet

Technologies Internet Technologies Internet Jean-François Ramiara FAD Réseau Pyramide 17/10/2012 Toulouse 1 Sommaire Internet Les origines d'internet Caractéristiques d'internet Les protocoles Les adresses IP Les noms de domaine

Plus en détail

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées? Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est

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

Tout pour monter son site Web. IUFM de Bourgogne

Tout pour monter son site Web. IUFM de Bourgogne Tout pour monter son site Web IUFM de Bourgogne Pourquoi utiliser les technologies Web? Visible par toutes les plates-formes (PC, Mac, Unix ) Technologies simples et descriptives Contenu principalement

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

Interfaces Homme/Machine et ergonomie d un site web

Interfaces Homme/Machine et ergonomie d un site web Interfaces Homme/Machine et ergonomie d un site web Apprendre à réaliser une interface Homme/Machine web en HTML 5 et CSS 3.0, à la structurer et à optimiser son ergonomie Retrouvez ce cours sur http://iut.e-concept-applications.fr

Plus en détail

Les outils du Web* : comment ça marche et à quoi ça sert?

Les outils du Web* : comment ça marche et à quoi ça sert? Sites Web Les outils du Web* : comment ça marche et à quoi ça sert? Sites marchands, e-commerce Forums Blogs Réseaux sociaux grand public : Facebook, Twitter Réseaux sociaux professionnels : Linkedin,

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

Produire du code HTML

Produire du code HTML 3 Produire du code HTML Même si l on ne sait pas encore écrire du code HTML, il est important de savoir comment on pourra produire celui-ci. Nous allons voir trois méthodes pour taper du code HTML. Avec

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

de survie du chef de projet

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

Plus en détail

Webmaster / Concepteur Multimedia

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

Plus en détail

creer votre site internet en html/css

creer votre site internet en html/css 3 jours (21 heures) 1110 HT (Inter) 2670 HT (Intra) Toute personne (particulier ou professionnel) souhaitant créer son site Internet Créez son site Internet Assurez sa mise en ligne Gérer les mises à jour

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

Langages et technologies du Web 1

Langages et technologies du Web 1 Langages et technologies du Web 1 Manuel ATENCIA manuel.atencia-arcas@upmf-grenoble.fr Objectifs Comprendre le fonctionnement du World Wide Web Produire des documents web statiques et dynamiques 1 2 vocabulaire

Plus en détail

Créer un site internet (ou des pages)

Créer un site internet (ou des pages) Ce qu il faut savoir avant de commencer Driss SABRI Une page Web est un outil de communication pour lequel on a des contraintes spécifiques 1. avant d en créer il faut se poser les questions habituelles

Plus en détail

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

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

Plus en détail

Joomla! 2.5 Créez et administrez vos sites Web

Joomla! 2.5 Créez et administrez vos sites Web Chapitre 1 : Installer Joomla! 1. Introduction 11 2. Qu'est-ce qu'un CMS? 11 3. HTML et XHTML 11 4. Différencier le contenu de la présentation 12 5. PHP et Apache 12 6. MySQL 13 7. Site statique ou site

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

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

LAB-Multimedia CMS. Guide d'auto-formation. Copyright by LAB-Multimedia 1/22

LAB-Multimedia CMS. Guide d'auto-formation. Copyright by LAB-Multimedia 1/22 Guide d'auto-formation Copyright by LAB-Multimedia 1/22 Auteurs Ont participé à la réalisation de cet ouvrage: Luc A. Bardet Editeur LAB-Multimedia Rue du Casino CH-1063 Chapelle-sur-Moudon (Switzerland)

Plus en détail

Bureautique Initiation Excel-Powerpoint

Bureautique Initiation Excel-Powerpoint Module de Formation Personnalisée : Bureautique Initiation Excel-Powerpoint Durée : jours ouvrables Prix : Formation personnalisée en vue d obtenir les notions de base indispensables pour : Excel Office

Plus en détail

HTML : Mini tutoriel

HTML : Mini tutoriel HTML : Mini tutoriel I. Introduction HTML est un langage de formatage de texte adapté à la conception de pages web. Le HTML est un langage balisé, fondé en particulier sur la notion de lien hypertexte,

Plus en détail

Formation WEB DESIGN. Catalogue. Immeuble Normandie II 55, rue Amiral Cécille

Formation WEB DESIGN. Catalogue. Immeuble Normandie II 55, rue Amiral Cécille Immeuble Normandie II 55, rue Amiral Cécille 7 6 1 0 0 R O U E N Tél. : 02 35 03 87 09 Fax : 02 35 03 49 29 Email : formation@art-communication.fr Site web : www.art-communication.fr Catalogue WEB DESIGN

Plus en détail

Applications orientées données (NSY135)

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

Plus en détail

Méthodologie et exercices d'internet et du multimédia

Méthodologie et exercices d'internet et du multimédia Méthodologie et exercices d'internet et du multimédia acohen@ulb.ac.be 1 Introduction Statut du cours Projet Organisation du cours Environnement du travail Mode d'évaluation 2 Statut du cours Année(s)

Plus en détail

Guide Ultra-book / 2012

Guide Ultra-book / 2012 Guide Ultra-book / 2012 Avant de commencer Le logiciel Ultra-book est optimisé pour les derniers navigateurs web standards : Firefox 10 ou 11 Chrome 18 Safari 5 Vous trouverez ces navigateurs en téléchargement

Plus en détail

FORMATION WEBMASTER WEBDESIGNER. Déclaration d activité: Région Rhône Alpes N : 82 26 01835 26

FORMATION WEBMASTER WEBDESIGNER. Déclaration d activité: Région Rhône Alpes N : 82 26 01835 26 FORMATION WEBMASTER WEBDESIGNER Déclaration d activité: Région Rhône Alpes N : 82 26 01835 26 Préambule : La formation par TooEasy TooEasy formation c est Un centre de formation déclaré d activité N 82

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

Fiche 6 - Le langage HTML

Fiche 6 - Le langage HTML Fiche 6 - Le langage HTML I Introduction HTML est un langage universel utilisé pour communiquer sur le Web. C est un langage dit de «marquage» (de «structuration» ou de «balisage») qui permet d écrire

Plus en détail

Sana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012

Sana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Sana Sellami sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Connaître les principales techniques pour la création de sites web Se familiariser avec les langages du web Rendre dynamique le

Plus en détail

Initiation à Dreamweaver

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

Plus en détail

Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur

Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique

Plus en détail

Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6

Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6 Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6 1 BERNIER François http://astronomie-astrophotographie.fr Table des matières Installation d un serveur HTTP (Hypertext Transfer

Plus en détail

Foire aux questions. C est un programme d exploitation et de recherche sur le Web. Exemple : Internet Explorer, Firefox, Opera et Netscape.

Foire aux questions. C est un programme d exploitation et de recherche sur le Web. Exemple : Internet Explorer, Firefox, Opera et Netscape. Foire aux questions Qu est-ce qu une adresse URL? L adresse URL identifie de façon unique une page Web. Exemple : http://www2.canoe.com/index.html (à ne pas confondre avec l adresse Web : www.canoe.com)

Plus en détail

Programmation Avancée pour le Web

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

Plus en détail

Introduction JOOMLA. Fonctionnalités. Avantages. Hainaut P. 2013 - www.coursonline.be 1. Joomla est un système de gestion de contenu CMS open source

Introduction JOOMLA. Fonctionnalités. Avantages. Hainaut P. 2013 - www.coursonline.be 1. Joomla est un système de gestion de contenu CMS open source JOOMLA Introduction Joomla est un système de gestion de contenu CMS open source Il permet la conception rapide de sites Web avec une présentation soignée et une navigation très simple C est l outil idéal

Plus en détail

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

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

Plus en détail

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

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

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

09/11/2011 COURS PROGRAMMATION WEB HTML CSS PHP - MYSQL

09/11/2011 COURS PROGRAMMATION WEB HTML CSS PHP - MYSQL COURS PROGRAMMATION WEB HTML CSS PHP - MYSQL Responsable : Niveau : 3 ème ESSAI Année Universitaire : 2011/2012 OBJECTIFS DU COURS Objectifs généraux : Ce cours est destiné aux étudiants disposant de quelques

Plus en détail

Vade-mecum des «raccourcis typographique» dans SPIP

Vade-mecum des «raccourcis typographique» dans SPIP Vade-mecum des «raccourcis typographique» dans SPIP Fonctionnalités Méthodes Commentaires Intertitre {{{le titre}}} Le texte entre triples accolades est affiché comme un titre. Changement de Cliquer deux

Plus en détail

Réalisation d Applications Web Statiques

Réalisation d Applications Web Statiques Université Abdelmalek Essaâdi Faculté Polydisciplinaire - Tétouan Réalisation d Applications Web Statiques Mr. AZZOUZ Karim azzkimo@gmail.com 2013-2014 1 Plan Cours TP Exercices et TD Évaluation : * Devoir

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

Petite définition : Présentation :

Petite définition : Présentation : Petite définition : Le Web 2.0 est une technologie qui permet la création de réseaux sociaux, de communautés, via divers produits (des sites communautaires, des blogs, des forums, des wiki ), qui vise

Plus en détail

Manuel de modifications des modèles

Manuel de modifications des modèles Manuel de modifications des modèles Contenu Avant propos...2 Introduction...2 Les 4 niveaux...2 Préparation...2 Quoi et pourquoi...2 Comment...2 Nommer les modèles modifiés...4 Niveau 1 Images...4 Quoi...4

Plus en détail

Chapitre 1 De la conception à la publication 15. Chapitre 2 Créer son blog en ligne 27

Chapitre 1 De la conception à la publication 15. Chapitre 2 Créer son blog en ligne 27 Chapitre 1 De la conception à la publication 15 1.1. Réussir l ergonomie générale d un site... 16 Les qualités d un bon site web... 16 Une navigation simple et efficace... 17 1.2. Créer la charte graphique...

Plus en détail