ISN - HTML : Apprendre HTML5. M. Lagrave HTML5. Code source Site classique CSS Bluefish. M. Lagrave. Lycée Beaussier

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

Download "ISN - HTML : Apprendre HTML5. M. Lagrave HTML5. Code source Site classique CSS Bluefish. M. Lagrave. Lycée Beaussier"

Transcription

1 Lycée Beaussier

2 Sommaire

3 Le HTML «HyperText Markup Language» est un langage de balisage pour la création de site internet, il sert à structurer votre document. D autres langages peuvent s ajouter lors de la conception, mais tous les sites web contiennent du HTML. désignant la version du langage HTML.

4 Pour tous les créateurs en herbe, c est l étape obligatoire dans votre apprentissage. On ne peut pas connaître tous les langages et encore moins les maîtriser tous, certains seront appris par choix mais le le sera par devoir.

5 Pour tous les créateurs en herbe, c est l étape obligatoire dans votre apprentissage. On ne peut pas connaître tous les langages et encore moins les maîtriser tous, certains seront appris par choix mais le le sera par devoir. Que vous codiez vos pages web par logiciel (Dreamweaver... ) ;

6 Pour tous les créateurs en herbe, c est l étape obligatoire dans votre apprentissage. On ne peut pas connaître tous les langages et encore moins les maîtriser tous, certains seront appris par choix mais le le sera par devoir. Que vous codiez vos pages web par logiciel (Dreamweaver... ) ; par CMS (Spip, Joomla, Wordpress... ) «système de gestion de contenu»

7 Pour tous les créateurs en herbe, c est l étape obligatoire dans votre apprentissage. On ne peut pas connaître tous les langages et encore moins les maîtriser tous, certains seront appris par choix mais le le sera par devoir. Que vous codiez vos pages web par logiciel (Dreamweaver... ) ; par CMS (Spip, Joomla, Wordpress... ) «système de gestion de contenu» ou par Bloc-note, Notepad ++,... il vous sera toujours utile de le connaitre pour certaines retouches ou optimisation du code source.

8 Il est généralement appris en parallèle du. Le vous permettra de coder votre contenu (titre, paragraphe, menu... ) pendant que le le mettra en forme (couleur, choix des polices de caractère, disposition des éléments... ).

9 À quoi ressemble le? C est un langage reposant sur le principe de balises imbriqués. Il existe deux types de balises, celles qu on ouvre et qu on referme et celles qui se referment seules. Chaque balise peut avoir aucun, un ou plusieurs attributs relatifs à celle-ci. Exemple un paragraphe est contenu entre les balises <p> et </p> l une pour indiquer son début et l autre sa fin.

10 À quoi ressemble le? <! DOCTYPE html > <html lang ="fr"> <head > <meta charset ="UTF -8" /> <! -- on indique l encodage de la page pour le navigateur --> </ head > <body ><! -- Corps de la page web --> <p > Structure d une page web en </p> </ body > </ html > structure

11 À quoi ressemble le? Pour modifier la couleur de ce paragraphe, on ajoutera un attribut de style à la balise Paragraphe pour lui indiquer dans quelle couleur l afficher. <p style =" color : red ;">Structure d une page web en </ p > Dans cette deuxième ligne de code, nous avons ajouter un attribut de style à la balise <p>. Cet attribut est symbolisé par style= " ". Dans cet exemple, nous avons indiqué au navigateur d afficher le texte en rouge, mais nous aurions pu lui demander une autre police de caractère ou même plusieurs informations en même temps.

12 Structure d une page web en La structure la plus simple d une page web en sera composé d au minimum 4 Balises : La balise indiquant le doctype ; code source

13 Structure d une page web en La structure la plus simple d une page web en sera composé d au minimum 4 Balises : La balise indiquant le doctype ; code source Les balises <html> et </html> en tout début et en tout fin de document ;

14 Structure d une page web en La structure la plus simple d une page web en sera composé d au minimum 4 Balises : La balise indiquant le doctype ; code source Les balises <html> et </html> en tout début et en tout fin de document ; Les balises <head> et </head> renfermant des informations utiles au navigateur mais non affichées ;

15 Structure d une page web en La structure la plus simple d une page web en sera composé d au minimum 4 Balises : La balise indiquant le doctype ; code source Les balises <html> et </html> en tout début et en tout fin de document ; Les balises <head> et </head> renfermant des informations utiles au navigateur mais non affichées ; Les balises <body> et </body> qui comme leur nom l indique comportent le corps de votre page.

16 Structure d une page web en La structure la plus simple d une page web en sera composé d au minimum 4 Balises : La balise indiquant le doctype ; code source Les balises <html> et </html> en tout début et en tout fin de document ; Les balises <head> et </head> renfermant des informations utiles au navigateur mais non affichées ; Les balises <body> et </body> qui comme leur nom l indique comportent le corps de votre page.

17 Structure d une page web en La structure la plus simple d une page web en sera composé d au minimum 4 Balises : La balise indiquant le doctype ; code source Les balises <html> et </html> en tout début et en tout fin de document ; Les balises <head> et </head> renfermant des informations utiles au navigateur mais non affichées ; Les balises <body> et </body> qui comme leur nom l indique comportent le corps de votre page. Lorsque vous codez un page, il est important d utiliser des commentaires. Ces commentaires ne seront ni visibles sur le navigateur ni interprétés par celui-ci. Il vous serviront uniquement à vous repérer sur votre code. Les commentaires se situent entre les signes <!- - et - ->

18 Structure d une page web en Ses limites sont très vite atteintes. Une page HTML est dite statique?

19 Structure d une page web en Ses limites sont très vite atteintes. Une page HTML est dite statique? Aucune interaction possible avec votre visiteur. Prenons l exemple d un formulaire, pour l afficher il vous faudra l écrire en HTML et le mettre en forme en pour qu il s affiche correctement et joliment dans le navigateur. Par contre, si vous cliquez sur le bouton Envoyer, rien ne se passe.

20 Structure d une page web en Ses limites sont très vite atteintes. Une page HTML est dite statique? Aucune interaction possible avec votre visiteur. Prenons l exemple d un formulaire, pour l afficher il vous faudra l écrire en HTML et le mettre en forme en pour qu il s affiche correctement et joliment dans le navigateur. Par contre, si vous cliquez sur le bouton Envoyer, rien ne se passe. Aucune donnée de formulaire ne sera traitée ou enregistrée en.

21 Structure d une page web en Pour cela, nous aurons besoin d utiliser un autre langage : le PHP. Il est capable d envoyer et de traiter un formulaire, d utiliser des variables (tous les utilisateurs n ont pas le même pseudo par exemple), d utiliser des cookies (enregistrer des habitudes de vos visiteurs pour leur éviter de re-taper leur pseudo dans un formulaire par exemple). Le but n étant pas ici d apprendre le PHP mais de vous montrer les limites du.

22 Structure d une page web en Pour cela, nous aurons besoin d utiliser un autre langage : le PHP. Il est capable d envoyer et de traiter un formulaire, d utiliser des variables (tous les utilisateurs n ont pas le même pseudo par exemple), d utiliser des cookies (enregistrer des habitudes de vos visiteurs pour leur éviter de re-taper leur pseudo dans un formulaire par exemple). Le but n étant pas ici d apprendre le PHP mais de vous montrer les limites du. Le, langage de base, vous servira donc à la mise en place de votre page web. Vous indiquerez au navigateur toutes les informations nécessaire à un affichage correct.

23 Structure complexe et utilisation des balises La nouvelle version du HTML entraîne comme à son habitude quelques modifications. De nouvelles balises et attributs viennent s ajouter et on en déconseille d autres. Une compréhension parfaite entraîne une bonne utilisation des balises et donc un respect de la sémantique. Point fort d un référencement naturel. voir Pour tout retenir, consulter le mémo en.pdf <! DOCTYPE html > <html lang ="fr"> <head > <meta charset ="UTF -8"> < title > Titre de votre page </ title > </ head > <body > < header > <h1 >Nom de la page </h1 >

24 Mise en forme avec un fichier de style voir la maquette découpée en différentes sections Pour la mise en page vous devez relier une feuille de style - pour Cascading Style Sheet - il faut déclarer le fichier style.css dans l en-tête de la page web : placer la balise <link> entre les balises <head> et </head> en donnant à cette balise les attributs correspondants et leurs informations relatives. <head >... <link rel =" stylesheet " href =" css / style. css "> </ head >

25 offre un environnement de développement Web complet.

26 offre un environnement de développement Web complet. Il comporte un éditeur WYSIWYG avec coloration syntaxique du code, il prend en charge de nombreux langages comme HTML, PHP,, Java, JavaScript, SQL, XML, XHTML, Python, C, C++,...

27 offre un environnement de développement Web complet. Il comporte un éditeur WYSIWYG avec coloration syntaxique du code, il prend en charge de nombreux langages comme HTML, PHP,, Java, JavaScript, SQL, XML, XHTML, Python, C, C++,... L insertion de tableaux, formulaires, images cliquables... se fait très simplement à l aide de boîtes de dialogues.

28 offre un environnement de développement Web complet. Il comporte un éditeur WYSIWYG avec coloration syntaxique du code, il prend en charge de nombreux langages comme HTML, PHP,, Java, JavaScript, SQL, XML, XHTML, Python, C, C++,... L insertion de tableaux, formulaires, images cliquables... se fait très simplement à l aide de boîtes de dialogues. Pour éviter les oublis, toute balise saisie par l utilisateur est automatiquement fermée par le logiciel. Le correcteur orthographique installé par défaut concerne l anglais mais on peut cependant ajouter un dictionnaire français.

29 est totalement gratuit (GNU/GPL) et multilingue.

30 est totalement gratuit (GNU/GPL) et multilingue. Cerise sur le gateau, est désormais multiplateformes et existe donc pour Windows, Linux et Mac OS X. Sans doute aujourd hui le plus complet des éditeurs de texte permettant d éditer du code HTML ou autre : une référence...

31 est totalement gratuit (GNU/GPL) et multilingue. Cerise sur le gateau, est désormais multiplateformes et existe donc pour Windows, Linux et Mac OS X. Sans doute aujourd hui le plus complet des éditeurs de texte permettant d éditer du code HTML ou autre : une référence... Téléchargement : télécharger sur le site officiel.

CSS 3. Julien David. A101 - Julien David (A / 27

CSS 3. Julien David. A101 - Julien David (A / 27 CSS 3 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 27 Feuilles de styles Cascading Style Sheets CSS est un langage de feuilles de styles.

Plus en détail

Classes : PREMIERES A-C-D

Classes : PREMIERES A-C-D LYCEE SECOND CYCLE DEPARTEMENT D'INFORMATIQUE Année scolaire 2011-2012 Classes : PREMIERES A-C-D Horaire hebdomadaire : 2 heures PRÉ REQUIS Connaissances de la Classe de 2 nde Savoir lire le français ou

Plus en détail

C2i : Création de pages web

C2i : Création de pages web C2i : Création de pages web IUFE 2016/2017 Matthieu Giraud LIMOS, Université Clermont Auvergne Matthieu Giraud C2i : Création de pages web 1 / 33 Introduction Sommaire 1 Introduction 2 Structure d une

Plus en détail

Programmation Web HTML5

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

Plus en détail

COURS DE PROGRAMMATION DE SITE WEB 1

COURS DE PROGRAMMATION DE SITE WEB 1 COURS DE PROGRAMMATION DE SITE WEB 1 Chapitre 1 Les bases PLAN DU COURS 1.1 L histoire du WEB 1.2 Du HTML au XHTML et le CSS 1.3 Définition (HTML, XTML, CSS, ASP, PHP, FLASH, CGI, PEARL) 1.4 Les éditeurs

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 06 Réussir son site web avec XHTML et CSS CSS, le langage de mise en page du Web 1. Insérer du code CSS...1 Dans un fichier.css...1 Dans l en-tête du fichier XHTML...3 2. Appliquer un style à des

Plus en détail

Support de cours Dreamweaver CS5. MC Benveniste

Support de cours Dreamweaver CS5. MC Benveniste Support de cours Dreamweaver CS5 MC Benveniste 2011 Présentation du logiciel Il s agit d un logiciel d intégration de pages web, avec une interface wysyiswg (what you see is what you get = ce que vous

Plus en détail

MODULE HTML CSS.

MODULE HTML CSS. MODULE HTML CSS David Tourel david.tourel@iut-tlse3.fr HTML : HyperText Markup Language Langage de description Interprété par les navigateurs Associé au CSS et JavaScript Métiers: développeur front end,

Plus en détail

Les bases du HTML5/CSS3

Les bases du HTML5/CSS3 1 Les bases du HTML5/CSS3 Ce premier chapitre rappelle tout ce qu il est bon de connaître lorsqu on se lance dans le développement HTML5/CSS3, depuis la déclaration de type de document jusqu au regroupement

Plus en détail

Dossier ISN : Tracés de fonctions mathématiques :

Dossier ISN : Tracés de fonctions mathématiques : Dossier ISN : Tracés de fonctions mathématiques : Par Crosetti Pauline et Depoers Quentin. Lycée Colbert Tourcoing. Année scolaire 2012/2013. Sommaire : - Recherches et étude du projet - Html - Css - Javascript

Plus en détail

Développement Web (NFA0016)

Développement Web (NFA0016) Développement Web (NFA0016) seconde session Avril 2011 Durée : 3h Modalités : Tous documents autorisés. Calculatrices, ordinateurs, téléphones portables interdits. Remarque : Pour ne pas surcharger, on

Plus en détail

Table des matières 1. Editions ENI - Toute reproduction interdite

Table des matières 1. Editions ENI - Toute reproduction interdite Table des matières 1 Introduction L'Internet aujourd'hui...7 Le World Wide Web Consortium et les standards...7 Les logiciels de conception de sites web...7 L'objectif du livre...8 Interface de conception

Plus en détail

Guide d utilisation pour utilisateur «userpsa»

Guide d utilisation pour utilisateur «userpsa» Guide d utilisation pour utilisateur «userpsa» Site Internet du comité d entreprise http://cepcacharleville.fr Page 1 sur 13 SOMMAIRE 1 VERSION DU DOCUMENT... 3 2 COMMENT BIEN UTILISER CE GUIDE... 4 3

Plus en détail

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

Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web 1. 2. Pour naviguer sur le Web, il faut : Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des machines Protocoles de communication Plusieurs niveau (couche) : Internet, protocole

Plus en détail

Chapitre 7. extended HyperText Markup Language (XHTML)

Chapitre 7. extended HyperText Markup Language (XHTML) Chapitre 7 extended HyperText Markup Language (XHTML) Objectifs Le Web statique : Du HTML au XHTML Apprendre à manipuler les éléments XHTML Attention : projet évalué plutôt sur la «qualité» du code XHTML

Plus en détail

Arbres Mathématiques Informatique et Navigateurs Internet

Arbres Mathématiques Informatique et Navigateurs Internet Arbres Mathématiques Informatique et Navigateurs Internet Jacques Duma Présentation de la structure d arbre sur des exemples qui montrent où elle intervient en mathématique et en informatique. Application

Plus en détail

Le (X)HTML 5. LPCEL promotion 2016/2017 Vincent Peigné

Le (X)HTML 5. LPCEL promotion 2016/2017 Vincent Peigné Le (X)HTML 5 LPCEL promotion 2016/2017 Vincent Peigné Sommaire 1. HTML 5 2. L entête HTML 3. Le corps ou 4. L encodage et les accents 1. HTML 5 1. HTML 5 1.1. Définition et historique 1.2. Définition

Plus en détail

CHARGÉE DE COURS : N. VANASSCHE

CHARGÉE DE COURS : N. VANASSCHE CHARGÉE DE COURS : N. VANASSCHE WWW.NATHALIEVANASSCHE.BE DE NOMBREUSES PERSONNES CONFONDENT (À TORT) INTERNET ET LE WEB. le Web fait partie d'internet. Internet est donc un grand ensemble qui comprend,

Plus en détail

Introduction à HTML: HyperText Markup Language

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

Plus en détail

Sommaire. 1 Créer un premier site Élaborer un contenu...69

Sommaire. 1 Créer un premier site Élaborer un contenu...69 Partie 1 Votre site web personnel...25 1 Créer un premier site...27 1.1 Installer le serveur web personnel de Microsoft...29 1.2 Créer un nouveau site web...31 1.3 Découvrir et personnaliser l environnement

Plus en détail

Web Statique Base de la création de sites web

Web Statique Base de la création de sites web Web Statique Base de la création de sites web Lilian BAZILLE Version 1.0 Février 2015 Table des matières WEB 01 Introduction... 2 1 - Outils du développeur... 2 1.1 - Environnement de travail... 2 1.2

Plus en détail

Carrefour de l information Université de Sherbrooke. Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web

Carrefour de l information Université de Sherbrooke. Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web Carrefour de l information Université de Sherbrooke Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web Par : Josée Martin (hiver 2005) Édition revue et augmentée par : Marc-André Dulude

Plus en détail

Le langage HTML. HTML est la «langue maternelle» de votre navigateur web

Le langage HTML. HTML est la «langue maternelle» de votre navigateur web Qu'est-ce que le HTML? HTML est la «langue maternelle» de votre navigateur web L HyperText Markup Language, en abrégé HTML, est le format de données conçu pour représenter les pages web. HTML permet de

Plus en détail

HTML 5 CSS 3 Responsive

HTML 5 CSS 3 Responsive HTML 5 CSS 3 Responsive Programme de formation Microsoft Partner France Belgique Suisse - Canada Formez vos salariés pour optimiser la productivité de votre entreprise Dernière mise à jour : Avril 2014

Plus en détail

LES BASES POUR INTERNET

LES BASES POUR INTERNET CHAPITRE 1 LES BASES POUR INTERNET Et Dreamweaver dans tout cela?... 15 Résumé... 24 11 À la base, Internet est défini par des ordinateurs qui sont reliés entre eux grâce à des câbles, du WiFi ou encore

Plus en détail

Les Fiches pratiques Coin-Web

Les Fiches pratiques Coin-Web Créer / modifier son site web à l aide d un logiciel Open Source Pré-requis : Sommaire Avant de consulter cette fiche pratique, il est bon d avoir assimilé les notions d HTML et CSS. 1. Définitions...

Plus en détail

Apprendre les bases du HTML5 et du CSS3. Objectif : Dans cette série d'activités vous apprendrez à utiliser HTML5 et CSS3 pour créer des pages web

Apprendre les bases du HTML5 et du CSS3. Objectif : Dans cette série d'activités vous apprendrez à utiliser HTML5 et CSS3 pour créer des pages web Apprendre les bases du HTML5 et du CSS3 Objectif : Dans cette série d'activités vous apprendrez à utiliser pour créer des pages web Durée : 4h Chapitre 2 Nom : Prénom : Classe : Table des matières Activité

Plus en détail

Création de sites Web ~ Module 1 Introduction HTML - CSS

Création de sites Web ~ Module 1 Introduction HTML - CSS Création de sites Web ~ Module 1 Introduction HTML - CSS 1 Introduction : HTML, pour HyperText Markup Language, est le langage conçu pour représenter les pages Internet. C est un langage de balises permettant

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

HTML CSS Fiche numéro 6

HTML CSS Fiche numéro 6 HTML CSS Fiche numéro 6 Sources : https://openclassrooms.com/ L'ancien site 2minuteslearning.fr qui à malheureusement disparu https://www.vectorskin.com/balises-html5/ Mettre en place le CSS Dans un premier

Plus en détail

Création d'un site Web avec KompoZer

Création d'un site Web avec KompoZer Création d'un site Web avec KompoZer Table des matières 1Rudiments sur le langage HTML.1 1.1Structure d'une page web :.1 1.2Le langage des pages Web.2 2Préparation du site web..2 3Utilisation d'une feuille

Plus en détail

CMS : Content Management System

CMS : Content Management System CMS : Content Management System Louis-Claude CANON louis-claude.canon@loria.fr 15 septembre 2009 CANON CMS 15 septembre 2009 1 / 36 Plan Contexte introductif 1 Contexte introductif 2 Contenu numérique

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

Check list du référencement

Check list du référencement Check list du référencement La check-list d optimisation du référencement du site propose une liste de points à vérifier pour mieux positionner votre site dans les moteurs de recherche. Avant de rentrer

Plus en détail

Introduction aux technologies du Web. Mercredi 12 décembre 2007 Patrice Pillot

Introduction aux technologies du Web. Mercredi 12 décembre 2007 Patrice Pillot Introduction aux technologies du Web Mercredi 12 décembre 2007 Patrice Pillot http://www.toulibre.org Plan Définitions Les fondements du Web Problèmes et solutions Le Web tendance Définitions Le World

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

Joomla! 3.3 Créez et administrez vos sites Web

Joomla! 3.3 Créez et administrez vos sites Web Chapitre 1 : Découvrir Joomla! A. Les raisons de créer un site sous Joomla! 9 B. Se documenter sur Joomla! 9 C. La feuille de route de Joomla! 10 D. Qu est-ce qu un CMS? 12 E. HTML et XHTML 12 F. Différencier

Plus en détail

Développement Web (NFA0016)

Développement Web (NFA0016) Développement Web (NFA0016) première session Février 2013 Durée : 3h Modalités : Tous documents autorisés. Calculatrices, ordinateurs, téléphones portables interdits. Barème donné à titre indicatif. Exercice

Plus en détail

Wordpress Drupal Prestashop Typo3 ez Publish... CMS. Content Management System. [ CMS - Content Management System ] Grandadam E.

Wordpress Drupal Prestashop Typo3 ez Publish... CMS. Content Management System. [ CMS - Content Management System ] Grandadam E. Wordpress Drupal Prestashop Typo3 ez Publish... CMS Content Management System 1. La gestion de contenus 2. Présentation des outils 3. Utiliser des architectures Web 4. Mettre en place les outils 5. Apprendre

Plus en détail

Introduction au contexte documentaire moderne

Introduction au contexte documentaire moderne Introduction au contexte documentaire moderne Plan I - Problématiques liées aux documents papiers II Problématiques liées aux logiciels de traitement de texte III - Problématiques liées aux techniques

Plus en détail

HTML et page Web diaporama

HTML et page Web diaporama but du diaporama principe général le titre ainsi qu une section contenant un paragraphe le titre ainsi qu un paragraphe dont le texte est centré une section dont le texte est coloré en rouge (couleur définie

Plus en détail

DAW Développement Applications Web. Ouadfel Salima Site du cours:

DAW Développement Applications Web. Ouadfel Salima Site du cours: DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/ Développement d Applications Web L'objectif de ce module est: 1. S'initier à la programmation Web en

Plus en détail

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition)

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition) Le HTML5 et les CSS 1. L'évolution de HTML 15 2. L'évolution des CSS 16 2.1 La notion de module 16 2.2 L'évolution des statuts 16 2.3 Les préfixes vendeurs 17 2.4 Utiliser les préfixes vendeurs 18 3. La

Plus en détail

Isn, Loud Jouhar Projet Projet ISN : Création d un site pour l apprentissage de l alphabet.

Isn, Loud Jouhar Projet Projet ISN : Création d un site pour l apprentissage de l alphabet. Projet ISN : Création d un site pour l apprentissage de l alphabet. 1 Sommaire I) Création du site internet II) Mise en forme du site III) Intégration du JavaScript 2 I) Création d un site internet. A)

Plus en détail

Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir

Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir Philippe Marcy (webmaster) Table des matières 1. QU EST-CE QU UNE FICHE THÉMATIQUE?... 2 2. FAIRE UNE PROPOSITION DE FICHE THÉMATIQUE...

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 Table des matières 1. UN SITE WEB, COMMENT ÇA MARCHE?...

Plus en détail

Les outils de création de sites web

Les outils de création de sites web Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site

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

Dreamweaver CS6 pour PC/Mac

Dreamweaver CS6 pour PC/Mac ENVIRONNEMENT. Généralités 1 A- La page de démarrage 1 B- L écran principal 2 C- La barre d état 3 D- Utiliser les règles 4 E- Utiliser la grille 4 F- Utiliser les repères 5 G- Modifier le zoom 6 1.2 Les

Plus en détail

HTML. IFOSUP 36, av du Général de Gaulle Bagnolet IFOSUP UN NOUVEAU REGARD SUR LA FORMATION PUBLIC ET PRE REQUIS

HTML. IFOSUP 36, av du Général de Gaulle Bagnolet IFOSUP UN NOUVEAU REGARD SUR LA FORMATION PUBLIC ET PRE REQUIS HTML PUBLIC ET PRE REQUIS Public : Informaticiens Concepteurs Chefs de Projet Utilisateurs Pré-requis : Connaissance générale de l'environnement Web OBJECTIFS PROGRAMME La formation Python va vous apprendre

Plus en détail

Séance 1. Bases et HTML

Séance 1. Bases et HTML Séance 1 Bases et HTML Nils Schaefer (nils.schaefer@sn-i.fr) Serveur Web Hébergement des sites Web Utilisation du port 80 Réception des requêtes HTTP des navigateurs Traitement des requêtes HTTP Exemples

Plus en détail

protocole utilisé (autre exemple ftp)! nom du serveur!

protocole utilisé (autre exemple ftp)!  nom du serveur! Le Langage HTML! Finalité:! Définir un langage permettant d élaborer des sites Web, c est à dire un ensemble de pages web (ou pages Html) organisées (de façon logique) sous forme de graphe.! La transition

Plus en détail

Table des matières. Introduction 1

Table des matières. Introduction 1 Table des matières Introduction 1 1 Les bases de JavaScript 5 Compréhension de JavaScript (et de son histoire) 5 Établissement d un système de test 8 Configuration de navigateurs Web 9 Inclusion du code

Plus en détail

MICROSOFT FRONTPAGE VERSION 2002 AU QUOTIDIEN RESUME TABLE DES MATIERES. En lisant cet ouvrage, vous apprendrez à :

MICROSOFT FRONTPAGE VERSION 2002 AU QUOTIDIEN RESUME TABLE DES MATIERES. En lisant cet ouvrage, vous apprendrez à : MICROSOFT FRONTPAGE VERSION 2002 AU QUOTIDIEN En lisant cet ouvrage, vous apprendrez à : RESUME Créer et gérer tous les types de pages et de sites Web, grâce à l'importation et à l'affichage de photos,

Plus en détail

JavaScript. Chapitre 1: fondamentaux. MAS RAD Master of Advanced Studies, Rapid Application Development Stéphane GOBRON HE Arc hes.

JavaScript. Chapitre 1: fondamentaux. MAS RAD Master of Advanced Studies, Rapid Application Development Stéphane GOBRON HE Arc hes. JavaScript Chapitre 1: fondamentaux MAS RAD Master of Advanced Studies, Rapid Application Development Stéphane GOBRON HE Arc hes.so 2016 JavaScript 6 chapitres Description du cours Fondamentaux Instructions

Plus en détail

Antoine Cailliau. Dotclear 2. Créer et administrer son blog. Groupe Eyrolles, 2009, ISBN

Antoine Cailliau. Dotclear 2. Créer et administrer son blog. Groupe Eyrolles, 2009, ISBN Antoine Cailliau Dotclear 2 Créer et administrer son blog Groupe Eyrolles, 2009, ISBN 978-2-212-12407-1 Table des matières AVANT-PROPOS............................................................ V 1.

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

Chapitre 3 : Le langage HTML

Chapitre 3 : Le langage HTML Chapitre 3 : Le langage HTML 4 ème SI (TIC) I. Introduction : Le langage HTML (HyperText Markup Language) n'est pas un langage de programmation proprement dit. Il permet tout simplement de spécifier la

Plus en détail

Jeudi 13 Janvier Jean-Marie Favreau Thomas Petazzoni

Jeudi 13 Janvier Jean-Marie Favreau Thomas Petazzoni XHTML / CSS Un duo gagnant pour un Web moderne Jeudi 13 Janvier Jean-Marie Favreau Thomas Petazzoni XML : extensible Markup Language Meta-language : permet de définir des languages Normalisé par le W3C

Plus en détail

Partie HTML TD 1 : Les bases du HTML

Partie HTML TD 1 : Les bases du HTML Partie HTML TD 1 : Les bases du HTML 1 Introduction HTML = HyperText Marked Language HTML est un langage permettant de décrire des données affichables sous forme de page par un navigateur Web. HTML peut

Plus en détail

Le HTML (N 2) FASCICULE N 14 OBJECTIF DE FORMATION 1 OBJECTIF DE FORMATION 2 OBJECTIF DE FORMATION 3

Le HTML (N 2) FASCICULE N 14 OBJECTIF DE FORMATION 1 OBJECTIF DE FORMATION 2 OBJECTIF DE FORMATION 3 FASCICULE N 14 Le HTML (N 2) OBJECTIF DE FORMATION 1 A l issue de cet objectif de formation, l apprenant comprendra ce que sont les balises HTML. OBJECTIF DE FORMATION 2 A l issue de cet objectif de formation,

Plus en détail

page web et html 1 principe général 2

page web et html 1 principe général 2 page web et html Table des matières 1 principe général 2 2 écrire et lire un document en HTML 3 2.1 Les références internationales................................. 3 2.2 Pour tester le code source et voir

Plus en détail

Francis Draillard. Premiers pas HTML 5 CSS 3 & 6 e édition. Mise à jour. Groupe Eyrolles, 2006, 2008, 2010, 2012, 2013, 2015, ISBN :

Francis Draillard. Premiers pas HTML 5 CSS 3 & 6 e édition. Mise à jour. Groupe Eyrolles, 2006, 2008, 2010, 2012, 2013, 2015, ISBN : Francis Draillard Premiers pas en CSS 3 & HTML 5 6 e édition Mise à jour Groupe Eyrolles, 2006, 2008, 2010, 2012, 2013, 2015, ISBN : 978-2-212-13944-0 Table des matières 1. INTRODUCTION AU HTML ET AUX

Plus en détail

Nous allons voir aujourd hui l utilisation de Wordpress, c est à dire ce qui va permettre aux associations de placer du contenu sur leur site web et

Nous allons voir aujourd hui l utilisation de Wordpress, c est à dire ce qui va permettre aux associations de placer du contenu sur leur site web et 1 Nous allons voir aujourd hui l utilisation de Wordpress, c est à dire ce qui va permettre aux associations de placer du contenu sur leur site web et de le faire évoluer. L idée est que vous soyez très

Plus en détail

ISN S8: Les pages web

ISN S8: Les pages web Objectif : L'objectif de ce TP est de réaliser une page HTML 1. Introduction : HTML et CSS : deux langages pour créer un site web Pour créer un site web, on doit donner des instructions à l'ordinateur.

Plus en détail

Les standards du web

Les standards du web COURS - Partie 1 Le HTML5 et le CSS3, petits frères du HTML (ou XHTML) et du CSS viennent, alors que l ère actuelle est à l interconnexion et aux média multiples. Dans le but de satisfaire la demande grandissante

Plus en détail

DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte

DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte Objectifs : Apprendre à l apprenant à se créer un espace de travail sous Linux Apprendre à l apprenant à ouvrir un éditeur

Plus en détail

Cours de I21 SOMMAIRE

Cours de I21 SOMMAIRE Cours de I21 Voir le chap 2 : cours de Javascript SOMMAIRE I. Introduction sur le langage HTML II. Balises primaires a. mise en forme b. hyperliens c. insérer une image III. Création de listes IV. Création

Plus en détail

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent :

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent : HTML HyperText Markup Language Objectifs : - s'initier au langage HTML - savoir lire un code source html simple Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises

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

OpenOffice. Editeur HTML. Table des matières

OpenOffice. Editeur HTML. Table des matières Editeur HTML OpenOffice Table des matières Editeur HTML...1 CREER UN NOUVEAU SITE WEB...2 INTERFACE DE TRAVAIL...3 CONFIGURATION DE LA PAGE...4 Ou sont les balises Meta?...4 Options de la page...5 ENREGISTREMENT...6

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

Développement Web (NFA0016)

Développement Web (NFA0016) Développement Web (NFA0016) première session Février 015 Durée : 3h Modalités : Tous documents autorisés. Calculatrices, ordinateurs, téléphones portables interdits. Barème donné à titre indicatif. Exercice

Plus en détail

Programme Formation WebDesign

Programme Formation WebDesign Programme Formation WebDesign Objectif : Connaître les règles et les techniques de création d'une charte graphique. Savoir utiliser une charte graphique pour le développement web. Compétences visées :

Plus en détail

Editeur HTML. Mozilla

Editeur HTML. Mozilla Editeur HTML Mozilla Présentation Mozilla est un navigateur Web, il permet également de gérer la messagerie (Email) et d'éditer des pages au format HTML (Hyper Text Markup Language). Mozilla est basé à

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

Concevoir des modèles de lettres : courriers administratifs, lettres de motivation. WORD La lettre de motivation

Concevoir des modèles de lettres : courriers administratifs, lettres de motivation. WORD La lettre de motivation Concevoir des modèles de lettres : courriers administratifs, lettres de motivation WORD La lettre de motivation DES MODÈLES DE LETTRES SOMMAIRE : I - METTRE EN FORME L EN-TETE 2 1.1 - Définir une police

Plus en détail

HTML. Damien Nouvel. Damien Nouvel (Inalco) HTML 1 / 23

HTML. Damien Nouvel. Damien Nouvel (Inalco) HTML 1 / 23 HTML Damien Nouvel Damien Nouvel (Inalco) HTML 1 / 23 Langage, calcul, télécommunications Plan 1. Langage, calcul, télécommunications 2. Web et documents HTML 3. Balises 4. Attributs Damien Nouvel (Inalco)

Plus en détail

Mémento des balises HTML 5

Mémento des balises HTML 5 Mémento des balises HTML 5 s de premier niveau Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le «code minimal» d'une

Plus en détail

Chapitre 5.5. Le langage xml. La numérisation suffit-elle à valoriser l information? Question 5. Chapitre 5.5 Le langage xml.

Chapitre 5.5. Le langage xml. La numérisation suffit-elle à valoriser l information? Question 5. Chapitre 5.5 Le langage xml. Sources : Manuel Fontaine Picard Réseau CERTA Page 1 / 6 1 Présentation du langage XML 1.1 Définition du langage XML XML est l acronyme de extensible Markup Language. Ce langage a été développé à partir

Plus en détail

Mémento des balises HTML

Mémento des balises HTML Chapitre 21 Mémento des balises HTML Diculté : C ette page est une liste non exhaustive des balises HTML qui existent. Vous trouverez ici un grand nombre de balises HTML. Nous en avons déjà vu certaines

Plus en détail

1 Pages web dynamiques. 2 Un exemple. 2.1 Objectif

1 Pages web dynamiques. 2 Un exemple. 2.1 Objectif 1 Pages web dynamiques En schématisant on peut considérer que l accès à une pager web depuis une machine s effectue selon une architecture client/serveur. La machine client émet une requête de page web

Plus en détail

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

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

Plus en détail

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

CREATION WEB DYNAMIQUE

CREATION WEB DYNAMIQUE CREATION WEB DYNAMIQUE II ) xhtml ET CSS II-1 ) Introduction Le xhtml, extensible HyperText Markup Language, est un langage identique au langage HTML mais respectant la syntaxe définie par XML Quant vous

Plus en détail

/* basic elements */ html { font: 75% georgia, sans- serif; Design

/* basic elements */ html { <!DOCTYPE html> font: 75% georgia, sans- serif; Design</title> tp HTML But : être capable d écrire une page en HTML et de lui associer une mise en page en CSS Moyen : Pc avec Notepad++ et navigateurs Chrome et Firefox 1 Introduction Lorsque vous allez sur

Plus en détail

Les balises XHTML. Balises de structure. Balises de mise en forme. Balises de liens Balises de liste Balises d image Balises de tableau

Les balises XHTML. Balises de structure. Balises de mise en forme. Balises de liens Balises de liste Balises d image Balises de tableau Les balises XHTML Balises de structure Balises de liens Balises de liste Balises d image Balises de tableau Balises de cadre Balises de mise en forme Balises de formulaire 1 Balises de structure Un document

Plus en détail

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

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

Plus en détail

DOSSIER D'ACTIVITES SUR LE PHP N 05 Insérer des données dans une base de données

DOSSIER D'ACTIVITES SUR LE PHP N 05 Insérer des données dans une base de données DOSSIER D'ACTIVITES SUR LE PHP N 05 Insérer des données dans une base de données Objectifs : Apprendre à l apprenant à lancer un serveur local «Apache» Apprendre à l'apprenant à lancer un serveur MySQL

Plus en détail

INSTALLATION DE WAMP MAMP - XAMPP

INSTALLATION DE WAMP MAMP - XAMPP INSTALLATION DE WAMP MAMP - XAMPP https://openclassrooms.com/courses/concevez-votre-site-web-avec-php-et-mysql/preparer-sonordinateur-2 Open Class Room SOMMAIRE Sommaire... 1 Les outils de développement...

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

Kits Spip CNRS Version 4.0

Kits Spip CNRS Version 4.0 Kits Spip CNRS Version 4.0 Documentation Julien Barnier, Jean-Baptiste Pressac CNRS 26 février 2009 Table des matières 1 Introduction 5 1.1 Présentation............................................ 5 1.2

Plus en détail

> RETOUR A LA LIGNE. Pour forcer un retour à la ligne, insérez la balise
. [BR comme BReak (rupture) en anglais]

> RETOUR A LA LIGNE. Pour forcer un retour à la ligne, insérez la balise <BR>. [BR comme BReak (rupture) en anglais] GUIDE HTML ADMINIS TRATIO N DE VO TRE SITE Ce document présente les principales balises HTML pour vous permettre d enrichir la présentation des textes gérés par formulaire d administration. > L usage de

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

Rappel : Qu est-ce que XML? XML: Documents bien formés et documents valides. Rappel: court exemple en XML. La documentation XML

Rappel : Qu est-ce que XML? XML: Documents bien formés et documents valides. Rappel: court exemple en XML. La documentation XML Rappel : Qu est-ce que XML? XML: Documents bien formés et documents valides Andrei Popescu-Belis TIM / ETI, Université de Genève Cours n 2 17.3.2005 http://www.issco.unige.ch/staff/andrei/xml «extended

Plus en détail

M1 / VP8 CREATION DE FEUILLES DE STYLE

M1 / VP8 CREATION DE FEUILLES DE STYLE M1 / VP8 CREATION DE FEUILLES DE STYLE Master 1 [Tribet Hervé] 2012 Styles sous DW8 Les styles HTML sont des mises en forme complexes regroupées sous une appelation ; on peut créer des styles HTML avec

Plus en détail

MODALITÉS D ÉVALUATION : DOCUMENT DÉLIVRÉ :

MODALITÉS D ÉVALUATION : DOCUMENT DÉLIVRÉ : DURÉE : 28 jours soit 196 heures de formation VERSION 2017 RÉSUMÉ PROGRAMME : - HTML / CSS 8 jours [56 heures] - JAVASCRIPT 7 jours [49 heures] - PHP / SQL 10 jours [70 heures] - RÉFÉRENCEMENT 3 jours

Plus en détail

Viatique. pour la création. de site. avec Kompozer. à l usage des. débutants

Viatique. pour la création. de site. avec Kompozer. à l usage des. débutants Viatique pour la création de site avec Kompozer à l usage des débutants Avant de commencer... 3 Création d une page simple... 3 Informations sur la page... 3 Apparence... 3 Sauvegarde... 3 Saisie du contenu...

Plus en détail

Panorama sur les CMS

Panorama sur les CMS Panorama sur les CMS CMS testés 8 CMS sont testés dans ce panorama : SPIP Typo3 Mambo It 's Easy Plume Wordpress Dotclear AngelineCMS Ils sont représentatifs des applications libres que l'on peut trouver

Plus en détail

Les formulaires types

Les formulaires types Les formulaires types Les formulaires types Formulaires interactifs Permettant de saisir des informations en remplissant des champs ou en cliquant sur des boutons Les formulaires De quoi avez vous besoin

Plus en détail