Fiche TD n 1 Le langage HTML

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

Download "Fiche TD n 1 Le langage HTML"

Transcription

1 Fiche TD n 1 Le langage HTML 1 Introduction Le HTML est le langage utilisé pour formaliser l information échangée sur internet. Il est constitué de balises qui indiquent de quelle manière les informations doivent être affichées. Les fichiers écrits en HTML sont stockés sur des serveurs web. en est un. Les utilisateurs d internet (vous et moi) demandent aux serveurs des pages web par l intermédiaire d un navigateur (Netscape, Konqueror, Internet Explorer, Firefox,...). Les serveurs envoient les pages HTML via le réseau. Ces pages sont ensuite interprétées par le navigateur internet qui affiche le contenu informatif de la page. Un fichier HTML est un simple fichier textuel. On le nomme avec l extension.html. Voici un exemple de fichier HTML. 1 <!DOCTYPE html PUBLIC " //W3C / / DTD XHTML 1. 0 S t r i c t / / EN" 2 " h t t p : / / www. w3. org / TR / xhtml1 /DTD/ xhtml1 s t r i c t. d t d "> 3 <html xmlns=" h t t p : / / www. w3. org / / xhtml "> 4 <head> 5 <meta h t t p e q u i v =" Content Type " c o n t e n t = 6 " t e x t / html ; c h a r s e t = i s o " / > 7 < t i t l e > O u t i l s i n f o r m a t i q u e s pour l e Web< / t i t l e > 8 < / head> 9 <body> 10 <h1>td n 1 < / h1> 11 <p> 12 Et v o i l à v o t r e <b> p r e m i è r e < / b> page web! <br / > 13 F a c i l e! Non? 14 < / p> 15 < / body> 16 < / html> Le navigateur peut interpréter le fichier premierfichier. html pour produire la page web suivante : 1

2 2 Structure d un fichier HTML Comme on le constate avec l exemple précédent, le HTML consiste à entourer le texte à afficher de balises qui définissent comment afficher ce texte. Le HTML est bien un langage de mise en forme de documents. Voyons comment ces balises organisent le document. 2.1 Le fichier HTML minimal Ce simple fichier texte commence toujours par la balise <html> et se termine toujours par la balise </html>. C est entre ces 2 balises que le reste du code doit se trouver. Entre ces 2 balises on trouve 2 éléments. Un en-tête décrivant le titre de la page et un corps dans lequel se trouve le contenu de la page. L en-tête est délimité par les balises <head> et </head>. Dans cet en-tête on trouve le titre qui est entouré des balises < title > et </ title >. Le corps est délimité par les balises <body> et </body>. Ainsi toute page HTML s articule autour du squelette suivant : 1 <html > 2 3 <head> 4 < t i t l e > Le t i t r e < / t i t l e > 5 < / head> 6 7 <body> 8 Contenu de l a page 9 < / body> < / html> 2

3 2.2 Le type de document S il est vrai que le HTML est le langage universel du web, il existe plusieurs normes et plusieurs variantes du langage. Afin de renseigner le navigateur internet sur la norme utilisée dans une page HTML, il faut ajouter au début de chaque fichier le prologue de type de document. C est une référence à un fichier (au format DTD) qui définit la norme utilisée. Nous utiliserons ici la norme stricte du xhtml 1.0. Il faut utiliser le prologue suivant : 1 <!DOCTYPE html PUBLIC " //W3C / / DTD XHTML 1. 0 S t r i c t / / EN" 2 "DTD/ xhtml1 s t r i c t. d t d "> Les balises HTML sont maintenant reconnues comme balises XML. D autres balises XML peuvent apparaitre dans une page Web. Pour distinguer les balises XML entre elles et savoir à quel langage elles appartiennent on utilise la notion de namespace. Il faut ajouter le namespace xhtml à la balise principale (<html>) : 1 <html xmlns=" h t t p : / / www. w3. org / / xhtml "> L encodage est le type de caractère utilisé pour écrire le fichier texte de la page web. Les lettres simples utilisent les mêmes codes (ASCII). Les lettres accentuées et les caractère spéciaux eux varient en fonction de l encodage du fichier. Il faut spécifier explicitement l encodage pour éviter aux navigateurs des erreurs d interprétation. Pour spécifier l encodage d une page on ajoute une ligne comme celle-ci dans la section HEAD du document : 1 <meta h t t p e q u i v =" Content Type " c o n t e n t = 2 " t e x t / html ; c h a r s e t = i s o " / > 2.3 Le texte C est ce que contiendra majoritairement le document. Plusieurs types de balises viennent agrémenter le texte Les éléments intégrés emphase, mise en valeur <i>... </i> <em>... </em> emphase forte (bold) <b>... </b> <strong>... </strong> citation ou référence à une autre source <cite>... </ cite > définition <dfn>... </dfn> extrait de code de programmation <code>... </code> extrait de trace d exécution <samp>... </samp> texte à saisir par l utilisateur <kbd>... </kbd> instance de variable ou argument d un programme <var>... </var> Ces éléments s intègrent au sein même d une phrase et mettent en valeur un ou plusieurs mots. Notez la présence de balises <b>... </b> dans l exemple du début pour afficher en gras le mot première. Remarque : La balise <span> fait aussi partie de la catégorie des éléments intégrés. Cette balise ne fait rien par défaut mais elle va nous servir plus loin dans le cours où nous allons redéfinir les attributs de cette balise. La balise <span> est dite générique. 3

4 2.3.2 Les éléments de bloc A l image des éléments intégrés qui s appliquent aux mots et aux phrases, les éléments de bloc s appliquent aux paragraphes. L élément p Il sert à délimiter les paragraphes d un texte. Entre les 2 balises <p> et </p> on peut insérer du texte ainsi que des éléments intégrés, mais pas de bloc. Considérons l exemple suivant : 1 <p> 2 V o i c i un p r e m i e r <em> p a r a g r a p h e < / em>. 3 < / p> 4 <p> 5 Et en v o i l à un second. 6 < / p> Voici ce que nous donne le navigateur : Voici un premier paragraphe. Et en voilà un second. L élément pre Les balises <pre>... </pre> affichent un texte dit préformaté. Le texte est affiché avec tous les espaces et les sauts de lignes qui se trouvent dans le code. On peut aussi insérer des éléments intégrés dans ces balises. Considérons l exemple suivant : 1 <pre> 2 Ce p a r a g r a p h e 3 e s t 4 <b>p r é f o r m a t é< / b>. 5 < / pre> Le navigateur va afficher le texte de la même manière : Ce paragraphe est p r é f o r m a t é. Si vous n êtes pas convaincus de l effet produit, recopiez l exemple et remplacez les balises pre par des balises p. L élément address Les balises <address>... </address> permettent la bonne mise en forme des adresses. L élément blockquote Les balises <blockquote>... </blockquote> servent à afficher des citations. 4

5 L élément div À l image de la balise span pour les éléments intégrés, la balise div est l élément générique du bloc. Elle sera sur-définie par la feuille de style Les éléments vides Les éléments vides sont des éléments particuliers. Contrairement aux autres, ils n entourent pas un bloc de texte entre 2 balises < balise >... </ balise >. Ces éléments s utilisent seuls et ne modifient pas l apparence du texte. L élément br La balise <br /> s utilise seule et contient un espace et un / après le r. Il n existe pas de balise </br>. Cette balise permet de marquer la fin d une ligne dans un texte. Elle force le retour à la ligne. L élément hr La balise <hr /> permet de tracer une ligne horizontale pour séparer deux paragraphes. L élément img La balise <img /> permet d afficher une image dans la page Web. Elle prend plusieurs paramètres : Texte alternatif alt=... phrase affichée quand l image ne peut être chargée. Ce paramètre est obligatoire. Dimensions width=... et height=... donnent les dimensions de l image en pixels. border=...bordure en pixels. align=... aligne l image par rapport à la ligne de texte courante. Il peut prendre les valeurs top, middle, bottom, left ou right. 2.4 Les titres Les titres sont des balises de bloc qui changent la taille du texte à afficher. Le but est de hiérarchiser les documents. Les balises de titre sont de la forme <hn>... </hn> avec n allant de 1 à 6 en fonction de l importance du titre. Les balises de titre sautent une ligne après la balise de fin. Un exemple est plus parlant : 1 <h1>grand t i t r e h1< / h1> 2 3 <h2>un sous t i t r e h2< / h2> 4 <h3>un <em> sous sous t i t r e < / em> h3< / h3> 5 <p> 6 Un peu de t e x t e normal. 7 < / p> 8 <h2>un a u t r e sous t i t r e h2< / h2> 9 <p> 10 Encore un peu de t e x t e. 11 < / p> 12 <h2>un d e r n i e r h2< / h2> 5

6 13 <p> 14 Et e n c o r e un peu de b l a b l a < / p> Côté navigateur : Grand titre h1 Un sous-titre h2 Un sous-sous-titre h3 Un peu de texte normal. Un autre sous-titre h2 Encore un peu de texte. Un dernier h2 Et encore un peu de blabla... Remarquez dans l exemple précédent que les zones de texte simple sont encapsulées dans des balises <p>... </p>. En effet, chaque portion de texte doit être incluse dans une balise afin de lever toute ambiguïté. 2.5 Les listes Les listes permettent également d ordonner l information d une page web. Il existe 3 types de listes en fonction de vos besoins : la liste numérotée, où chaque item de la liste porte un numéro, la liste à puces et la liste de définitions. Les balises <ul>... </ul> définissent une liste à puces. A l intérieur de ces balises on trouve les balises <li>... </ li > qui définissent les items de cette liste. Les balises <ol>... </ol> définissent une liste numérotée. A l intérieur de ces balises on utilise les mêmes items <li>... </ li >. Exemple : 1 V o i c i une l i s t e numérotée : 2 < o l > 3 < l i > i tem 1 < / l i > 4 < l i > i tem 2 < / l i > 5 < l i > i tem 3 < / l i > 6 < / o l > Coté navigateur : Voici une liste numérotée : 1. item 1 2. item 2 3. item 3 6

7 2.6 Les liens Toute la puissance et aussi tout l intérêt des pages web résident dans les liens qu elles contiennent. Les liens donnent la possibilité de lier des textes, des images graphiques, des objets multimédia aux documents. Les textes, les images, les objets peuvent se situer sur n importe quel site du web. On arrive ainsi à la métaphore de cette toile d araignée mondiale (World Wide Web), qui permet des parcours virtuels dans des documents tout aussi virtuels. C est la balise <a>... </a> qui permet la création d un lien. En voici un exemple : 1 <a href = h t t p : / / f r. w i k i p e d i a. org / > Wikipedia < / a>, l e n c y c l o p é d i e 2 l i b r e. Pour le navigateur : Wikipedia, l encyclopédie libre. Le mot Wikipedia est souligné, en cliquant dessus avec la souris, la page web indiquée dans le paramètre href va s afficher. Notez l importance de ce paramètre. 7

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

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

Plus en détail

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

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

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

CMS. O p e n - S. c o m 1/19

CMS. O p e n - S. c o m 1/19 CMS Accessibilité et CMS 1/19 Présentation Présentations Matthieu Faure, consultant accessibilité numérique www.open-s.com www.blog-accessibilite.com Et vous? Support de cours sous licence Creative Commons

Plus en détail

Formation (X)HTML-CSS avancé

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

Plus en détail

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

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

Plus en détail

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

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

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

Plus en détail

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

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

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

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

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

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

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

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

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

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

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

Plus en détail

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

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

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

Plus en détail

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

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

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML tableau Lévis Thériault, hiver 2009 Structure d un tableau

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

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

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

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

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

CHAPITRE I : LES BASES DU WEB

CHAPITRE I : LES BASES DU WEB 4 CHAPITRE I : LES BASES DU WEB 1.1 DEFINITION ET HISTORIQUE : Le World Wide Web, littéralement la «toile (d araignée) mondiale», communément appelé le Web, le web parfois la Toile ou le WWW, est un système

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

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

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

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

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

Pack Fifty+ Normes Techniques 2013

Pack Fifty+ Normes Techniques 2013 Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié

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

Technique Internet de Base Introduction au HTML

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

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

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

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

Formation Site Web : CSS et PHP

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

Plus en détail

Service Web. Cours de Réseaux. Tuyêt Trâm DANG NGOC 2012-2013. Université de Cergy-Pontoise. Tuyêt Trâm DANG NGOC Service Web 1 / 12

Service Web. Cours de Réseaux. Tuyêt Trâm DANG NGOC 2012-2013. Université de Cergy-Pontoise. <dntt@u-cergy.fr> Tuyêt Trâm DANG NGOC Service Web 1 / 12 Service Web Cours de Réseaux Tuyêt Trâm DANG NGOC Université de Cergy-Pontoise 2012-2013 Tuyêt Trâm DANG NGOC Service Web 1 / 12 Plan 1 Le Web 2 HTTP 3 FTP 4 URL Tuyêt Trâm DANG NGOC

Plus en détail

Normes techniques 2011

Normes techniques 2011 Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique

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

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

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

Dans le Chapitre 1, nous avons parlé de

Dans le Chapitre 1, nous avons parlé de 5.0 Pour commencer Dans le Chapitre 1, nous avons parlé de l anatomie d un site web. Nous avons, en particulier, appris que la majorité des serveurs web sont configurés pour reconnaître index.html (ou

Plus en détail

Créer un Site Web en Langage HTML

Créer un Site Web en Langage HTML Créer un Site Web en Langage HTML Institut Supérieur des Sciences Et Techniques Saint-Quentin Formation au langage HTML Ralph Davidovits Novembre 1996 ralph.davidovits@insset.u-picardie.fr 2 Table des

Plus en détail

Cours création sites web

Cours création sites web COMMENT CRÉER SON PROPRE SITE WEB Version 2.12 Dernière mise à jour : 23 mai 2004 Outils Outils de base : un ordinateur, un navigateur, et un éditeur ; Il n est pas nécessaire d être connecté à Internet,

Plus en détail

Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech

Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech Autour du web Une introduction technique Première partie : HTML Georges-André SILBER Centre de recherche en informatique MINES ParisTech silber@cri.ensmp.fr http://www.cri.ensmp.fr/people/silber/cours/2010/web

Plus en détail

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

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

Plus en détail

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

Langage HTML (2 partie) lt La Salle Avignon BTS IRIS

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv> Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee

Plus en détail

Programmation Web. Chapitre 2. 2.1 Le Web. Sommaire

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

Plus en détail

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

1. Tout d abord, quels outils utiliser dans cette séquence?

1. Tout d abord, quels outils utiliser dans cette séquence? Séquence 2 Ü Contenu 1. Quels outils utiliser dans cette séquence? 2. Présentation du langage HTML 3. Les principes de base Prenez bien le temps de faire toutes les manipulations indiquées. C est en tapant

Plus en détail

Les services usuels de l Internet

Les services usuels de l Internet Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet Courrier électronique (mail) - protocole SMTP (Simple Mail Transfer Protocol) inclut maintenant tous types

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

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

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

Plus en détail

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

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

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

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

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

Plus en détail

INFO-F-101 Programmation Projet 4 Page Ranking(1/4): Création de la matrice du compte des liens

INFO-F-101 Programmation Projet 4 Page Ranking(1/4): Création de la matrice du compte des liens INFO-F-101 Programmation Projet 4 Page Ranking(1/4): Création de la matrice du compte des liens Année académique 2009 2010 1 Introduction Ce projet est le premier d une série de quatre projets qui ont

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

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

Initiation à la réalisation de site Web pour mobiles

Initiation à la réalisation de site Web pour mobiles TP 5 Initiation à la réalisation de site Web pour mobiles Introduction et objectifs du TP Ce TP a pour ambition de vous faire réaliser une version mobile du site du département informatique de l IUT de

Plus en détail

Langages de publication temporalisée

Langages de publication temporalisée Ingénierie Documentaire Langages de publication temporalisée http://doc.crzt.fr STÉPHANE CROZAT Paternité - Partage des Conditions Initiales à l'identique : http://creativecommons.org/licenses/by-sa/2.0/fr/

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

STID 2ème année : TP Web/PHP

STID 2ème année : TP Web/PHP STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction

Plus en détail

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

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

Plus en détail

Créer et faire vivre un site web pédagogique

Créer et faire vivre un site web pédagogique Créer et faire vivre un site web pédagogique 1. Créer un site web... 2 2. Utilisation d un CMS... 2 3. SPIP : Système de Publication Internet Partagé... 2 4. Le site de la Cité Scolaire Jean Moulin...

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

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

SITE WEB Service Client. Charte graphique et technique

SITE WEB Service Client. Charte graphique et technique Service Client Charte graphique et technique 1 Sommaire a / MISE EN FORME Introduction... 3 Les logos Veolia... 4 Police & taille - généralité... 6 Police & taille gabarits principaux... 7 Palette de couleur...

Plus en détail

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

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

Plus en détail

INTERNET CRÉER UN SITE EN HTML ET CSS

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

Plus en détail

Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall

Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall Internet DNS World Wide Web Mécanismes de base Exécution d'applications sur le web Divers Proxy, fire-wall 1 Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet

Plus en détail

Formation PHP débutant

Formation PHP débutant Formation PHP débutant Table des matières 1 Le principe de PHP 3 1.1 Langage côté serveur.................................. 3 1.2 Pour travailler..................................... 3 1.3 Langage de pré-processing...............................

Plus en détail

chtemele ReadMe_fr v2.7.1 Auteur: Olivier Chambon Graphisme / illustration: Pascal Mabille

chtemele ReadMe_fr v2.7.1 Auteur: Olivier Chambon Graphisme / illustration: Pascal Mabille chtemele ReadMe_fr v2.7.1 Auteur: Olivier Chambon Graphisme / illustration: Pascal Mabille De 2 à 5 joueurs Temps de jeu: 20-45 minutes A partir de 8 ans Contenu de la boite La boîte contient les éléments

Plus en détail

Programme Formation Webmaster Operationnel

Programme Formation Webmaster Operationnel Programme Formation Webmaster Operationnel Objectif : Savoir créer, gérer, personnaliser son site Web. Etre capable de référencer son site web dans les moteurs de recherche et maîtriser son ROI. Public

Plus en détail

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

Gestion Électronique de Documents et XML. Master 2 TSM

Gestion Électronique de Documents et XML. Master 2 TSM Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document

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

Activités HTML. Code: act-html

Activités HTML. Code: act-html Activités HTML act-html Activités HTML Code: act-html Originaux url: http://tecfa.unige.ch/guides/tie/html/act-html/act-html.html url: http://tecfa.unige.ch/guides/tie/pdf/files/act-html.pdf Prérequis:

Plus en détail

DHTML ou le Html dynamique

DHTML ou le Html dynamique 1. Définition du DHTML DHTML ou le Html dynamique 1.1 Introduction ou... au risque de vous décevoir Ne cherchez pas de syntaxe ou de références DHTML, vous n'en trouverez pas. Le DHTML n'est pas un langage

Plus en détail

Les Bases. Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015.

Les Bases. Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015. Référencer Mon SITE, BLOG Les Bases Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015. Le but de ce livre est de vous aider à bien positionné votre site web ou blog auprès des moteurs de

Plus en détail

Technologies du Web. Introduction au World Wide Web et à HTML. Mastère spécialisé Management et nouvelles technologies, 28 septembre 2009

Technologies du Web. Introduction au World Wide Web et à HTML. Mastère spécialisé Management et nouvelles technologies, 28 septembre 2009 Internet et le Web Technologies du Web Introduction au World Wide Web et à HTML Pierre Senellart (pierre.senellart@telecom-paristech.fr) Mastère spécialisé Management et nouvelles technologies, 28 septembre

Plus en détail

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles,

Plus en détail

Conception de sites web. Feuille de styles CSS

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

Plus en détail

PARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION

PARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE VENDOME.EU NOTICE UTILISATION PARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION Le but de l'utilisation de la console d'administration de votre adresse de messagerie "vendome.eu", est notamment de créer

Plus en détail

Documentation Vidati.fr

Documentation Vidati.fr Documentation Vidati.fr Ce document comportera quelques éléments qui permettrons aux futurs développeurs du site vidati.fr de pouvoir se mettre en situation rapidement ainsi que de comprendre le code précédemment

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 d un site Internet (partie 2 )

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

Plus en détail

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

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

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

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

Plus en détail

Objectif du présent document : Détailler le mode opératoire pour créer une nouvelle page 'actualité" sur un site .communityforge.

Objectif du présent document : Détailler le mode opératoire pour créer une nouvelle page 'actualité sur un site <SEL>.communityforge. Objectif du présent document : Détailler le mode opératoire pour créer une nouvelle page 'actualité" sur un site .communityforge.net FAQ / Quiz : Où sont affichées les pages "actualité"? après connexion

Plus en détail