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

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

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

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

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

Test Test Test Test Test

Test Test Test Test Test Mise en forme d un document HTML Niveaux de titre Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une structuration hiérarchique des paragraphes dans un texte : Balise

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

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

LISTE DES BALISES EN HTML5

LISTE DES BALISES EN HTML5 LISTE DES BALISES EN HTML5 AIDE-MÉMOIRE HTML&CSS www.multiforme.eu BALISE DEFINITION DES BALISES DESCRIPTION Pour un commentaire L inclusion du DOCTYPE dans un document HTML assure

Plus en détail

Conception d'interfaces Web

Conception d'interfaces Web Conception d'interfaces Web Licence 1 2. Créer un site Web avec HTML5 et CSS3 Bruno Jobard I. Introduction Les langages HTML et CSS décrivent la structure et la présentation d'une page Web. HTML est un

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

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

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

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

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

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

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

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

Créer une page HTML avec l'éditeur Notepad++

Créer une page HTML avec l'éditeur Notepad++ Page Html Créer une page HTML avec l'éditeur Notepad++ Ouvrir Notepad++ Ecrivez un court texte. Enregistrer ce fichier dans un dossier que vous avez préalablement créé dans vos documents ou sur votre bureau

Plus en détail

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

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

Plus en détail

HEI3 : TD HTML. Objectif : construction d un document hypertexte sur Internet. Moyens :

HEI3 : TD HTML. Objectif : construction d un document hypertexte sur Internet. Moyens : 3 : TD HTML Objectif : Moyens : construction d un document hypertexte sur Internet - Internet : notions d échanges sur le réseau - Langage : présentation d HTML - Mise en œuvre d HTML : TD_3_HTML_CV.html

Plus en détail

HTML5 et CSS3. Table des matières : CE qu'est l'html5 Déclaration De Page page 3 Ossature D'une Page Les Balises. Les Nouvelles Balises CSS3

HTML5 et CSS3. Table des matières : CE qu'est l'html5 Déclaration De Page page 3 Ossature D'une Page Les Balises. Les Nouvelles Balises CSS3 HTML5 et CSS3. Table des matières : CE qu'est l'html5 page 2 Déclaration De Page page 3 Ossature D'une Page page 3 Les Balises...page 4-6 Les Nouvelles Balises...page 4-6 CSS3 page 7-9 Page 1/9 HTML5 Le

Plus en détail

I/ Une première très brève introduction au WEB :

I/ Une première très brève introduction au WEB : TP 10 : Vendredi 31 Janvier 2014 Langage de description HTML Langages de description Présentation du langage HTML et du principe de séparation du contenu et de la mise en forme. Créer et analyser une page

Plus en détail

Cours de XHTML. chaîne de caractères

Cours de XHTML. <balise attribut=valeur attribut2=valeur2 >chaîne de caractères</balise> Cours de XHTML Introduction XHTML n'est pas un langage de programmation proprement dit, il s'agit simplement d'un langage de balisage dont le rôle est de formaliser l'écriture d'un document web avec des

Plus en détail

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours :

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : COURS PROGRAMMATION WEB ASCADING STYLE SHEETS CSS CASCADING Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : http://essai.rnu.tn/enseignants/fatmachaker2.htm Année Universitaire :

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

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme -> CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le de la page :

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le <head> de la page : CSS La présentation Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le de la page : body { background: orange;

Plus en détail

Introduction au Web. Andrea G. B. Tettamanzi. Université de Nice Sophia Antipolis Département Informatique

Introduction au Web. Andrea G. B. Tettamanzi. Université de Nice Sophia Antipolis Département Informatique Introduction au Web Andrea G. B. Tettamanzi Université de Nice Sophia Antipolis Département Informatique andrea.tettamanzi@unice.fr Andrea G. B. Tettamanzi, 2013 1 CM - Séance 2 HTML Andrea G. B. Tettamanzi,

Plus en détail

Tutoriel HTML. Principaux éléments de structuration

Tutoriel HTML. Principaux éléments de structuration Tutoriel HTML Principaux éléments de structuration D après les cours de Sylvain Brandel et d Olivier Glück (Lyon 1) Remanié par Lionel Médini M1 Informatique MIF13 Programmation web Université Claude Bernard

Plus en détail

L1 - Informatique et internet

L1 - Informatique et internet L1 - Informatique et internet Hervé Le Crosnier laboratoire GREYC - Université de Caen! herve.lecrosnier@unicaen.fr http://ensweb.users.info.unicaen.fr HTML + CSS Listes, images et liens Page HTML

Plus en détail

Technologie de l internet Date: 25 juin 2013,11:30 13:29, salle 1177

Technologie de l internet Date: 25 juin 2013,11:30 13:29, salle 1177 IFT3225-E2013 Examen Intra Technologie de l internet Date: 25 juin 2013,11:30 13:29, salle 1177 Philippe Langlais RÈGLEMENT SUR LE PLAGIAT Extrait du règlement disciplinaire sur le plagiat ou la fraude

Plus en détail

Introduction au langage HTML

Introduction au langage HTML Introduction au langage 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 /80 Thibault MARZAIS,

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

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

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme ->CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

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

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016) Conception de Sites Web Dynamiques : TD 1 HTML5 statique, balises, liens relatifs/absolus, images, validateur W3C http://www.labri.fr/perso/preuter/cswd2016

Plus en détail

- WEB / HTML - Annexe 1 : Définition des balises HTML

- WEB / HTML - Annexe 1 : Définition des balises HTML Balises d encadrement - WEB / HTML - Annexe 1 : Définition des balises HTML Encadre le code source. Encadre la zone d entête de la page Web dans laquelle

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

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

Initiation au HTML. Qu est ce qu une page web?

Initiation au HTML. Qu est ce qu une page web? Initiation au HTML Qu est ce qu une page web? Il s agit ni plus ni moins que d un fichier, qui contient seulement des caractères alphanumériques. Autrement dit, vous n avez besoin que de votre bloc-notes,

Plus en détail

Programmation web : TD 2

Programmation web : TD 2 Programmation web : TD 2 Email : nassim.bahri@yahoo.fr Site web : http://nassimbahri.ovh Nassim BAHRI Objectif Développer des pages Web HTML5 validées Mettre en place des listes en HTML Avant de commencer

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

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

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

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

Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés :

Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : CSS positionnement POSITIONNEMENT Rappel balises de type bloc Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : width, height, min-width, ou

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

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

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

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

HTML. Alexandre Benoit TS 2016/2017. D après openclassrooms

HTML. Alexandre Benoit TS 2016/2017. D après openclassrooms HTML D après openclassrooms Alexandre Benoit TS 2016/2017 Introduction Télécharger à partir de la page web du cours le fichier pageoueb.html Ouvrir le fichier avec Notepad++. Ouvrir le fichier avec Firefox.

Plus en détail

TP 4 : IMAGES ET ARRIERE-PLANS

TP 4 : IMAGES ET ARRIERE-PLANS TP 4 : IMAGES ET ARRIERE-PLANS Les images dans le texte La balise img du langage Html permet d'insérer des images dans une page Html. Exemple : où fichier_image est le nom et

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

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

T.P. OUTILS DE L INTERNET

T.P. OUTILS DE L INTERNET T.P. OUTILS DE L INTERNET Le HTML (HyperText Markup Language) est un langage informatique utilisé pour la création de pages Web. Une page HTML est un simple fichier texte contenant des balises (parfois

Plus en détail

TP Initiation au langage HTML

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

Plus en détail

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

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

Rédacteurs - Typo3 v6.2

Rédacteurs - Typo3 v6.2 Rédacteurs - Typo3 v6.2 Créer un texte et le mettre en forme Objet et contexte Ce document présente la création et la mise en forme d un contenu texte dans l environnement typo3 6.2. Créer un contenu de

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

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

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

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

I ) L environnement de programmation HTML :

I ) L environnement de programmation HTML : HTML5 COURS ET EXERCICES I ) L environnement de programmation HTML : - Ouvrir Notepad++ (http://notepad-plus-plus.org/fr/)et taper les trois lignes suivantes : Voici mon premier SITE Conception d une page

Plus en détail

STUDIO - TI6 TABLE DES MATIÈRES. NOUVELLE MATIÈRE (suite) 9. Intégration du logo. Sujet. HTML - CSS révisions - suite.

STUDIO - TI6 TABLE DES MATIÈRES. NOUVELLE MATIÈRE (suite) 9. Intégration du logo. Sujet. HTML - CSS révisions - suite. STUDIO - TI6 PASCAL PLACEMAN Sujet HTML - CSS révisions - suite TABLE DES MATIÈRES Nouvelle matière: 9. Intégration du logo 10. Un titre devant la vidéo 11. Utiliser des polices typographiques grâce à

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

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 11 v2 Réussir son site web avec XHTML et CSS TD de révision : le design d un site web 1. La structure générale... 2 2. Primo, le XHTML... 3 Découpage des pages en blocks... 3 Création du modèle de

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

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

Initiation aux technologies de l information

Initiation aux technologies de l information Initiation aux technologies de l information Frédéric Gava (MCF) gava@univ-paris12.fr LACL, bâtiment P2 du CMC, bureau 221 Université de Paris XII Val-de-Marne 61 avenue du Général de Gaulle 94010 Créteil

Plus en détail

Technologies de l internet Date: 26 juillet 2011, 14h30 17h20

Technologies de l internet Date: 26 juillet 2011, 14h30 17h20 IFT3225-E2011 Examen Final Consignes Technologies de l internet Date: 26 juillet 2011, 14h30 17h20 Philippe Langlais Les calculatrices, téléphones, ordinateurs, etc. ne sont pas autorisés (vous pouvez

Plus en détail

Introduction à HTML. 27 Février Damien DURVILLE HTML 1

Introduction à HTML. 27 Février Damien DURVILLE HTML 1 Introduction à 27 Février 2004 Damien DURVILLE 1 Qu'est-ce que c'est? : Hypertext Markup Language hypertext : texte avec liens dynamique markup : marquage, codage, délimitation language : une manière de

Plus en détail

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

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

Plus en détail

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

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

Par défaut, les éléments de type bloc seront affichés dans une succession verticale.

Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Le positionnement Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Une boîte jaune Une boîte verte Les principaux éléments de type bloc sont : l'élément div ; les titres

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

Exemples! !Mise en forme du texte!!les tableaux!!utilisation d images!!la navigation!!les Cadres!!Paramètres d une page!

Exemples! !Mise en forme du texte!!les tableaux!!utilisation d images!!la navigation!!les Cadres!!Paramètres d une page! Le langage Html : Chapitres HTML!!Mise en forme du texte!!les tableaux!!utilisation d images!!la navigation!!les Cadres!!Paramètres d une page! L1-STS-Internet et Programmation! 47! Le langage Html : Mise

Plus en détail

XML. DTD Le schéma XSD

XML. DTD Le schéma XSD XML Structure d un dun document xml DTD Le schéma XSD Structure dun d un document XML Un document XML contient les éléments suivants: Le prologue Un arbre contenant

Plus en détail

Travaux Pratiques : le langage HTML

Travaux Pratiques : le langage HTML Travaux Pratiques : le langage HTML Objectif : Ce TP couvre l'écriture d'une page Web en langage html4, en utilisant des balises non décorées. Puis l'utilisation d'un éditeur html pour enrichir la présentation

Plus en détail

Université d Angers

Université d Angers pascal.nicolas@univ-angers.fr 1 préambule cette présentation, basée sur la norme HTML3.2, n a pas vocation à être exhaustive la notation X Y signifie que l on peut mettre l élément X ou l élément Y dans

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

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

ISN - HTML : Vérifier la validité avec le W3C. M. Lagrave W3C. Conseils ISN - HTML : M. Lagrave. Lycée Beaussier

ISN - HTML : Vérifier la validité avec le W3C. M. Lagrave W3C. Conseils ISN - HTML : M. Lagrave. Lycée Beaussier Lycée Beaussier 2012 2013 Sommaire Le (World Wide Web Consortium) propose sur son site web un outil appelé le «Validateur», qui va analyser votre code source et vous dire s il est correctement écrit ou

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

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

ISN - HTML : Apprendre HTML5. M. Lagrave HTML5. Code source Site classique CSS Bluefish. M. Lagrave. Lycée Beaussier Lycée Beaussier 2012 2013 Sommaire 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

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

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

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

Génération dynamique de pages web

Génération dynamique de pages web Génération dynamique de pages web Cet article décrit quelques techniques de programmation web permettant de générer des pages web dynamiquement à partir d une base de données. STRUCTURE DE LA BASE DE DONNÉES

Plus en détail

La toile mondiale. Réseau TCP/IP. Qu'est-ce qu'un réseau? Protocole TCP/IP. WWW (World Wide Web) HTTP = HyperText Transfer Protocol.

La toile mondiale. Réseau TCP/IP. Qu'est-ce qu'un réseau? Protocole TCP/IP. WWW (World Wide Web) HTTP = HyperText Transfer Protocol. HTML Miguel Tomasena Références : La toile mondiale http://www.siteduzero.com http://www.wschools.com/html http://www.w.org/ html Doctor WWW (World Wide Web) Réseau Qu'est-ce qu'un réseau? Un réseau est

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

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

HTML/CSS. Louis-Claude CANON. 16 et 17 septembre CANON HTML/CSS 16 et 17 septembre / 40

HTML/CSS. Louis-Claude CANON. 16 et 17 septembre CANON HTML/CSS 16 et 17 septembre / 40 HTML/CSS Louis-Claude CANON louis-claude.canon@loria.fr 16 et 17 septembre 2009 CANON HTML/CSS 16 et 17 septembre 2009 1 / 40 Plan Contexte introductif 1 Contexte introductif 2 HTML 3 CSS 4 Synthèse CANON

Plus en détail

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs :

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs : TP Informatique Personnalisation de page web HTML avec le langage CSS Objectifs : - Approfondir ses connaissances au langage HTML - Changer le style et la présentation d une page HTML grâce au langage

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

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

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut.

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut. WEB 27/09 Chaque élément est une balise : HTML -> visible HEAD -> invisible BODY -> DOCTYPE: c est le type de document qu on va utiliser, XHTML 1.1=> le plus strict (qu on va bosser) N importe quel première

Plus en détail

8 Puces et indentations

8 Puces et indentations 8 Puces et indentations Une palette «liste» proposant des mises en forme est à disposition dans l espace privé, toutefois voilà le codage à faire si vous souhaitez indenter le texte différemment ou l indenter

Plus en détail