chaîne de caractères - PDF">

Cours de XHTML. chaîne de caractères

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Transcription

1 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 balises. Une page XHTML est donc un simple fichier texte contenant des balises permettant de mettre en forme la page (les titres, les paragraphes, les images, les liens ) et peut donc très facilement être conçue grâce à un simple éditeur de texte. Les outils pour préparer et tester notre travail Nous avons besoin seulement d un éditeur de texte pour écrire notre code XHTML. Nous pourrions très bien prendre le bloc note de Windows, mais pour nous faciliter le travail, nous allons télécharger un éditeur un peu plus évolué à l adresse : Et d un navigateur internet pour tester notre page style Internet Explorer ou Mozilla Firefox ou Chrome ou encore Safari ou Créez un dossier «Cours XHTML» dans votre dossier personnel. Fonctionnement des balises Structure des balises Les balises délimitent une fraction du document XHTML (paragraphe, titre...). Elles peuvent être imbriquées entre elles et se présentent comme ci-dessous : <balise attribut="valeur" attribut2="valeur2" >chaîne de caractères</balise> On peut remarquer qu'une balise peut contenir trois types d'informations : Un nom de balise. Une liste d'attributs. Une chaîne de caractères. Les balises sont toujours écrites en minuscule et fonctionnent généralement par paire: une balise ouvrante <balise>, une balise fermante </balise> délimitant ensembles le contenu. Néanmoins quelques balises ne fonctionnent pas par paire. Les balises d'images et de saut de ligne par exemple auront la syntaxe suivante : <balise /> Règles d imbrication Dans l'exemple, ci-dessous, la balise 1 est parente de la balise 2. <balise1> <balise2> (...) </balise2> (...) </balise1> Lorsque plusieurs balises sont imbriquées, une règle simple s'applique : une balise ouverte à l'intérieur d'une autre doit obligatoirement être refermée avant la fermeture de sa balise mère. Les balises ne peuvent donc pas être imbriquées comme ceci :

2 <balise1> <balise2> </balise2> </balise1> XHTML - Définition de Type de Document La première balise de votre document doit être la balise de DTD. Elle sert à indiquer à quelles règles d'écriture obéit le code d'une page XHTML. Il n est pas nécessaire de retenir les différents DTD. Servezvous seulement du premier. Ci-dessous les différentes DTD existant actuellement pour le XHTML: XHTML1.0 strict (Actuellement, je recommande de prendre celui-ci) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> XHTML1.0 transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> XHTML1.0 frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> Xhtml 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> XHTML - Structure générale Structure Après la DTD, il suffit d'ouvrir la balise <html> qui englobera l ensemble des autres balises de votre page. Cette balise contient deux paires de balises: Les balises <head> et </head> délimitant l entête du document. Les balises <body> et </body> délimitant le corps du document. L'entête L'entête contient toutes les données relatives au document (le titre du document et sa description par exemple). Le titre Le plus important dans l'en-tête est le titre de la page, il se définit avec les balises <title>. <title>titre de votre page</title>

3 Les balises <meta> Les balises <meta> sont facultatives, mais importantes pour le navigateur, et pour les moteurs de recherche. Encodage de la page <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Description de la page <meta name="description" content="description de votre page" /> Langue de la page <meta name="language" content="fr" /> Le corps Le corps de votre page (entre les balises <body> et </body>), est la partie visible du document XHTML, il peut être constitué d un grand nombre de types de balises différents (titres, paragraphes, liens,...). Exemple Exemple d'une page XHTML très basique: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>titre de la page</title> <meta name="language" content="fr" /> <meta name="description" content="description de votre page" /> </head> <body> Corps de la page </body> </html> Ouvrez l éditeur de texte PSPAD. Ecrivez une page XHTML nommée «ma-page-web.htm» ayant pour titre «Ma première page web», pour description «C est la première page que j écris en XHTML». Le corps de votre page contiendra : - un titre («Le XHTML») et une description (Expliquez ce que le XHTML), - un sous titre («La balise HEAD») et une description (Expliquez à quoi sert la balise HEAD), - un sous sous titre («La Balise TITLE») et une description (Expliquez à quoi sert la balise TITLE), - un deuxième sous titre («La balise BODY») et une description (Expliquez à quoi sert la balise BODY),

4 Pensez a sauver votre page. Ouvrez le dossier contenant votre page web, double-cliquez sur votre page pour l ouvrir dans le navigateur. Dans le navigateur, vous devriez voir : Le XHTML C est. La balise HEAD C est La balise TITLE C est.. La balise BODY C est. Revenez à l éditeur de texte PSPAD sans refermer votre navigateur. XHTML - Mise en forme de texte Titres Le langage XHTML définit 6 niveaux de titres, les balises <h1>, <h2>, <h3>,..., <h6> (<h1> et <h6> représentent respectivement la plus et la moins importante). Elles permettent de définir une structuration hiérarchique des paragraphes d'une page. <h1>titre</h1> Dans votre page web, encadrez votre titre avec la balise <h1>, vos sous titres avec la balise <h2> et vos sous sous titres avec la balise <h3>. Enregistrer à nouveau votre page, rendez-vous sur votre navigateur et faites «Rafraichir la page» pour constater les changements. Paragraphes Les paragraphes sont délimités par les balises <p> et </p>. Ils ne doivent être employés que lorsque leur contenu ne peut être présenté d'aucune autre manière (liste, tableau,...). <p>votre paragraphe</p> Dans votre page web, encadrez vos descriptions avec la balise <p> pour indiquer que ce sont des paragraphes. Enregistrer à nouveau votre page, rendez-vous sur votre navigateur et faites «Rafraichir la page» pour constater les changements. Retour à la ligne Les retours à la ligne sont définis à l'intérieur d'un paragraphe par la balise unique <br/>. <br/> Ligne horizontale Des lignes horizontales peuvent être ajoutées aux paragraphes, elles sont définies par la balise unique <hr/>. <hr/>

5 Dans votre page web, ajoutez à la fin de votre page un saut de ligne, puis une ligne horizontale. Rendez-vous sur votre navigateur et faites «Rafraichir la page» pour constater les changements. XHTML - Les balises de styles Texte en gras Les textes en gras peuvent être définis par les balises <b>. <b>texte en gras</b> Texte en italique Les textes en italique peuvent être définis par les balises <i>. <i>texte en italique<i/> Texte souligné Les textes soulignés peuvent être définis par les balises <u>. <u>texte souligné<u/> Texte barré Les textes barrés peuvent être définis par les balises <s>. <s>texte barré<s/> Texte en indice Les textes en indice peuvent être définis par les balises <sub>. <sub>texte en indice<sub/> Texte en exposant Les textes en indice peuvent être définis par les balises <sup>. <sup>texte en exposant<sup/> Dans votre page web, mettez un peu de style dans vos descriptions. Enregistrer à nouveau votre page, rendez-vous sur votre navigateur et faites «Rafraichir la page» pour constater les changements. XHTML - Les liens Structure Les liens hypertextes sont définis par les balises <a> associées à l'attribut href qui spécifie la source du document cible.

6 <a href="http://www.votre-site.fr/index.html">votre texte</a> Liens spéciaux Lien vers adresse de messagerie électronique <a texte</a> Lien externe vers un serveur FTP <a href="ftp://ftp.site.com">votre texte</a> A la fin de votre page web, ajouter un lien vers le site de laclasse.com et ajoutez un lien «Me contacter» pour vous écrire. Constatez les changements. XHTML - Les images Les images sont définies par la balise <img> associée à l'attribut src qui spécifie la source de l image et à l attribut alt qui spécifie un texte alternatif au cas où l'image ne s'afficherait pas. <img src="dossier/image.png" alt=" texte alternatif "/> Cherchez une image sur Google. Enregistrez cette image dans votre dossier. Insérez-là dans votre page web. XHTML - Les tableaux Il est souvent utile de présenter des informations en ligne et en colonne, les tableaux sont la pour ça. Les tableaux sont définis par les balises suivantes: Le tableau est encadré par les balises <table> Le titre du tableau est encadré par les balises <caption> Les lignes sont encadrées par les balises <tr> Les cellules d'en-tête sont encadrées par les balises <th> Les cellules de valeur sont encadrées par les balises <td> <table> <caption>titre du tableau </caption> <tr> <th> Titre 1 </th> <th> Titre 2 </th> <th> Titre 3 </th> <th> Titre 4 </th> </tr> <tr> <td> Valeur 1 </td> <td> Valeur 2 </td>

7 </tr> </table> <td> Valeur 3 </td> <td> Valeur 4 </td> Représentez le tableau correspondant au calendrier du mois de décembre Votre tableau aura donc 6 lignes et 7 colonnes et pour titre «Décembre 2009». XHTML - Les listes Listes de définitions Les listes de définitions sont définies par les balises suivantes: La liste est encadrée par les balises <dl> Les termes sont encadrés par les balises <dt> Les définitions sont encadrées par les balises <dd> <dl> <dt>premier terme</dt> <dd>première définition</dd> </dl> <dt>deuxième terme</dt> <dd>deuxième définition</dd> Dans votre page web, faites une liste des balises déjà vu avec leur définition. Listes numérotées Les listes numérotées sont définies par les balises suivantes: La liste est encadrée par les balises <ol> Les termes de la liste sont encadrés par les balises <li> <ol> </ol> <li>premier terme</li> <li>deuxième terme</li> Dans votre page web, faites une liste numérotée des matières que vous aimez. Classez les par préférence de la plus appréciée à la moins appréciée. Listes à puces Les listes à puces sont définies par les balises suivantes: La liste est encadrée par les balises <ul> Les termes de la liste sont encadrés par les balises <li>

8 <ul> </ul> <li>premier terme</li> <li>deuxième terme</li> Dans votre page web, ajoutez une liste à puces de vos professeurs. XHTML - Sigles et acronymes Sigles Les sigles peuvent être définis par les balises <abbr>. <abbr>sigle</abbr> Dans votre page web, donnez 5 abréviations comme SNCF XHTML - Les caractères spéciaux Voici une petite liste des caractères spéciaux les plus courants en xhtml. Caractères Codes HTML Caractères Codes HTML " " & & < ¼ ¼ > ½ ½ espace ¾ ¾ ± ± A la fin de votre page web, ajoutez votre copyright du style «Ma page web 2009 votre nom»

Conception de Sites Web dynamiques HTML HTML XHTML 23/09/2008. Conception de Site Webs Interactifs. Cours 3. Patrick Reuter

Conception de Sites Web dynamiques HTML HTML XHTML 23/09/2008. Conception de Site Webs Interactifs. Cours 3. Patrick Reuter Conception de Site Webs Interactifs Conception de Sites Web dynamiques Cours 3 Patrick Reuter Déroulement Pages web statiques (HTML/XHTML) Mise en forme avec feuilles de styles (CSS) Programmationcôté

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

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd> IUT Nice Côte d Azur Prog. Web Département informatique 2007-2008 TP1 HTML ET XHTML 1. Le document xhtml minimal Le langage xhtml est la dernière évolution du html. C est une version plus stricte du html,

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

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

Principales balises HTML5

Principales balises HTML5 Principales balises HTML5 RAPPEL : Tout document HTML commence par le DOCTYPE suivi de la balise , et s achève avec la balise . DOCTYPE et HTML : Le DOCTYPE : La déclaration

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

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma Fonctionnement du WEB 1. Le navigateur effectue une requête spécifiée à travers l URL 2. Le serveur retourne un flot de données 3.

Plus en détail

Fiche TD n 1 Le langage HTML

Fiche TD n 1 Le langage HTML 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

Plus en détail

Mémento. Balises de premier niveau

Mémento. Balises de premier niveau Mémento 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 page web. principale

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

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

Guide Utilisation HTML et Microsoft FrontPage

Guide Utilisation HTML et Microsoft FrontPage Guide Utilisation HTML et Microsoft FrontPage 4 4me Année Sciences Informatique Année scolaire : 2016-2017 I. Introduction au langage HTML HTML est un langage de description. Il permet d'enrichir un texte

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

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

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma LES BALISES Les attributs Les balises HTML peuvent avoir des attributs. Chaque balise accepte uniquement les attributs qui la concerne.

Plus en détail

Cours N 6 Le langage HTML

Cours N 6 Le langage HTML Cours 6: Technologies web - le langage HTML Cours N 6 Le langage HTML Concepts de Base 1. Généralités HTML (pour HyperText Markup Language) est un langage de description de documents hypermédia. Un document

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

CRÉE TA PAGE WEB POUR IPHONE!

CRÉE TA PAGE WEB POUR IPHONE! CRÉE TA PAGE WEB POUR IPHONE! Programme du matin QR Code Définition Création de votre T-Shirt avec QR Code Pause «Application» pour iphone Base du HTML Création de votre CV QR CODE? QR CODE? Le QR Code

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

Ecrire des pages web = pages XHTML = le contenu et sa structure. feuilles de style = page CSS = la forme (couleur fonte cadre... ) (cours prochain)

Ecrire des pages web = pages XHTML = le contenu et sa structure. feuilles de style = page CSS = la forme (couleur fonte cadre... ) (cours prochain) introduction Ecrire des pages web = pages XHTML = le contenu et sa structure (ce cours) feuilles de style = page CSS = la forme (couleur fonte cadre... ) (cours prochain) Xhtml = Successeur de HTML compatible

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

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

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

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

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

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

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

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

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

D autres balises HTML Exercice récapitulatif

D autres balises HTML Exercice récapitulatif D autres balises HTML Exercice récapitulatif Le titre de la page Apparait dans la partie Est affiché dans la barre de titre du navigateur Décrit ou résume le contenu de la page (10 mots maximum)

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

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

Organisation d un site web

Organisation d un site web Organisation d un site web Un site web est un ensemble de pages web hébergées par un serveur et identifié par une adresse internet ( URL). Les pages web sont écrites en langage html, puis transférées sur

Plus en détail

Le HTML dans la page web

Le HTML dans la page web Le HTML dans la page web 1 Qu est-ce que HTML? HTML est le langage descriptif formel utilisé pour créer des pages web. C est le seul langage permettant d afficher une page web dans un navigateur. HTML

Plus en détail

Les Fiches pratiques Coin-Web

Les Fiches pratiques Coin-Web Le langage HTML Sommaire 1. Définitions...1 2. Remarque liminaire : l organisation du site...2 3. La page...3 4. L entête...3 5. Le corps de la page...3 a. Le texte...3 i. Titres et paragraphes...3 ii.

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

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

LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE

LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE ICN ICN Informatique et Création Numérique LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE 1 MISE EN SITUATION 1.1 Page Web «Une page Web est une ressource du World Wide Web

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

HTML : Mini tutoriel

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

Plus en détail

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

LE CODE HTML 1- INTRODUCTION. Page 1 sur 5

LE CODE HTML 1- INTRODUCTION. Page 1 sur 5 Page 1 sur 5 LE CODE HTML 1- INTRODUCTION Une page web est écrite nécessairement en code. Il en existe beaucoup, aux utilités diverses et variées. Le code le plus basique est toutefois le HTML ( HyperText

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

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

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

INTRODUCTION AU LANGAGE HTML ET CSS

INTRODUCTION AU LANGAGE HTML ET CSS INTRODUCTION AU LANGAGE HTML ET CSS Sur le Web il est d usage de séparer structure et contenu d une page (html) de son style (css) Quelques liens : http://validator.w3.org/:pour vérifier que le est conforme

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

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

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

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

Utilisation des étiquettes, optimisation des commentaires

Utilisation des étiquettes, optimisation des commentaires Utilisation des étiquettes, optimisation des commentaires Vous avez peut-être remarqué que juste au dessus du cadre pour les commentaires il y a le texte suivant : Vous pouvez utiliser ces étiquettes :

Plus en détail

Exercice 4 Manipulation des balises HTML

Exercice 4 Manipulation des balises HTML 1 Exercice 4 Manipulation des balises HTML Dans cet exercice vous allez simplement manipuler les différentes syntaxes qui constituent le langage html. Sources : Une fois l archive décompressée vous trouverez

Plus en détail

Technologie Projet 2 : «Site WEB sur l'évolution de l'éclairage» 3éme Séquence n 5 DES MESURES : DE PAGES HTML

Technologie Projet 2 : «Site WEB sur l'évolution de l'éclairage» 3éme Séquence n 5 DES MESURES : DE PAGES HTML PUBLICATION DES MESURES : CRÉATION DE PAGES HTML 1 ) SUITE DE L'APPRENTISSAGE SUR LE LANGAGE HTML Voir ci-dessous un fichier HTML minimum. Remarquer «l'indentation» de ce texte.

Plus en détail

TP n 1 : Initiation au langage HTML

TP n 1 : Initiation au langage HTML Atelier informatique-langage HTML TP n 1 : Initiation au langage HTML 1. Rappels de quelques généralités - Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant un ensemble de convention

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

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

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

Bases de données et Internet

Bases de données et Internet Bases de données et Internet Faculté des Sciences et Techniques Fès Département de Génie Industriel Master Sciences et Techniques en Génie Industriel Professeur : F. Kaghat 2 Feuilles de style en cascade

Plus en détail

Programmation Web TP1 HTML

Programmation Web TP1 HTML Programmation Web TP1 HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez un contenu d un cours de votre choix 1 - Une première page en HTML Le document html de base se présente

Plus en détail

Développement d Applications Web

Développement d Applications Web Développement d Applications Web HTML : HyperText Markup Language Mehdi BENZINE benzinemehdi@gmailcom Département d Informatique Faculté des Sciences Université FERHAT ABBAS Sétif I 2015/2016 M BENZINE

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

HIVER 2017 COURS INF2005 : PROGRAMMATION WEB. Exercices de Programmation Web, Laboratoires et TP

HIVER 2017 COURS INF2005 : PROGRAMMATION WEB. Exercices de Programmation Web, Laboratoires et TP HIVER 2017 COURS INF2005 : PROGRAMMATION WEB Exercices de Programmation Web, Laboratoires et TP Professeur : Abdel OBAID Ateliers : Ruben Chambilla Février 2017 TABLEAU DES MATIÈRES 1. Introduction...1

Plus en détail

Un document HTML est un hypertexte décrit à l'aide du langage HTML. Un hypertexte est un texte contenant des hyperliens.

Un document HTML est un hypertexte décrit à l'aide du langage HTML. Un hypertexte est un texte contenant des hyperliens. Le langage HTML Document HTML («Hyper-Text Markup Language») Un document HTML est un hypertexte décrit à l'aide du langage HTML. Un hypertexte est un texte contenant des hyperliens. Un hyperlien est un

Plus en détail

Programmation PHP Septembre 2010

Programmation PHP Septembre 2010 IFT1147 Programmation Serveur Web avec PHP Un bref survol de HTML et CSS HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

Plan du cours. Cours Web n o 1 Introduction au World Wide Web et à XHTML. Exemple. Pierre Senellart 14 et 17 septembre 2007

Plan du cours. Cours Web n o 1 Introduction au World Wide Web et à XHTML. Exemple. Pierre Senellart 14 et 17 septembre 2007 Cours Web n o 1 Introduction au World Wide Web et à XHTML Pierre Senellart (pierre@senellart.com) 1 2 5 14 et 17 septembre 2007 P. Senellart (IFIPS) Web et XHTML 14/09/2007 1 / 37 P. Senellart (IFIPS)

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

ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1

ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1 ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1 Code NFA053, 6 ECTS Chapitre 01 HTML / STRUCTURE D UN DOCUMENT Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous

Plus en détail

Les tableaux. La mise en forme des tableaux (bordures, alignement horizontal et vertical, marges, ) se fait à l aide des styles CSS.

Les tableaux. La mise en forme des tableaux (bordures, alignement horizontal et vertical, marges, ) se fait à l aide des styles CSS. Les tableaux Les balises de tableau sont les suivantes : balise explication attributs titre du tableau tableau ligne d un tableau (table row) cellule d un tableau (table data) colspan(="nb

Plus en détail

Édition des pages statiques sur Muressa

Édition des pages statiques sur Muressa Édition des pages statiques sur Muressa 1. Modifier une page statique existante 1.1. Savoir quel fichier modifier Il y a un moyen simple de connaître le fichier à modifier. Par exemple, en local, si vous

Plus en détail

GTI525 Technologies de développement Internet

GTI525 Technologies de développement Internet GTI525 Technologies de développement Internet Langage de balisage hypertexte (HTML) GTI525, Été 2013 HTML de base Contenu Basé sur tutoriel http://www.w3schools.com/html/default.asp Bonnes pratiques GTI525,

Plus en détail

UN DOCUMENT HTML5. 1.Un document HTML5 minimal 2.Les caractères accentués 3.Les caractères spéciaux 4.En résumé

UN DOCUMENT HTML5. 1.Un document HTML5 minimal 2.Les caractères accentués 3.Les caractères spéciaux 4.En résumé UN DOCUMENT HTML5 1.Un document HTML5 minimal 2.Les caractères accentués 3.Les caractères spéciaux 4.En résumé 42 Un document HTML5 minimal Les bases d'un code HTML5 ressemblent à celles des précédentes

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

TD2 : XHTML/CSS. Université Bordeaux 1 Licence 3 Informatique

TD2 : XHTML/CSS. Université Bordeaux 1 Licence 3 Informatique Université Bordeaux 1 T.D. Licence 3 Informatique 2007 2008 TD2 : XHTML/CSS Le but de ce TP est d apprendre les bases du langage XHTML. Voici deux sites de référence pour le XHTML et le HTML : http://www.w3.org/tr/xhtml1

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

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

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

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

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

HTML & CSS. d e s i g n w e b. [ présentation ]

HTML & CSS. d e s i g n w e b. [ présentation ] d e s i g n w e b [ présentation ] Généralités Les feuilles de styles (CSS) existent depuis 1996. Elles ne sont vraiment correctement supportées par les navigateurs que depuis 2000-2001. C'est donc depuis

Plus en détail

Introduction HTML / CSS a

Introduction HTML / CSS a TP 1 Introduction HTML / CSS a a. Support de TP inspiré des notes de Cours de Cyril Gravelier Dans ce TP, nous allons réaliser nos premières pages Web. Pour ce faire, nous aborderons les bases du langage

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

Techniques Internet de Base TD 1 HTML

Techniques Internet de Base TD 1 HTML Techniques Internet de Base TD 1 HTML 1. Ecrire une page HTML avec un titre (à afficher sur la barre du titre du navigateur), des informations concernant l auteur et les mots clés, et une phrase de texte.

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

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

Écriture de pages Web

Écriture de pages Web Écriture de pages Web Le langage CSS Laurent Tichit Janvier 2011 Copyright 2005-2009 Laurent Tichit 1 Les feuilles de styles CSS Elles permettent de changer la mise en forme d'une page HTML ou XHTML sans

Plus en détail

XML: la validation de HTML et XHTML

XML: la validation de HTML et XHTML Rappels : bonne formation / validité XML: la validation de HTML et XHTML Andrei Popescu-Belis TIM / ETI, Université de Genève Cours n 4 7.4.2005 Bien distinguer BF et validité bonne formation (BF) : respecter

Plus en détail

Mémento des balises HTML

Mémento des balises HTML Partie 5 : Annexes 230/246 Mémento des balises HTML Cette 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

Plan du cours : les Arbres Généraux (2) LI101 : Programmation Récursive. Schéma récursif sur les arbres généraux

Plan du cours : les Arbres Généraux (2) LI101 : Programmation Récursive. Schéma récursif sur les arbres généraux Plan du cours : les Arbres Généraux (2) LI101 : Programmation Récursive c Equipe enseignante Li101 Université Pierre et Marie Curie Semestre : Automne 2008 Cours 11 : Arbres généraux (2) Plan Récursion

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

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

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

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

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

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

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

Écriture textuelle de documents structurés Structure notée grâce à des balises
...
SGML : Standard Generalized Markup Language

Écriture textuelle de documents structurés Structure notée grâce à des balises <section>... </section> SGML : Standard Generalized Markup Language HTML Langages à balises Écriture textuelle de documents structurés Structure notée grâce à des balises ... SGML : Standard Generalized Markup Language méta-langage applications : documentation

Plus en détail

Bases de données et Interfaces Web. Langage HTML.

Bases de données et Interfaces Web. Langage HTML. Bases de données et Interfaces Web Langage HTML corinne.fredouille@univ-avignon.fr Introduction 1/5 HTML : HyperText Markup Language Moyen de navigation dans un ensemble d informations Langage à balises

Plus en détail

La vocation purement sémantique de la page HTML a été pervertie avec les années.

La vocation purement sémantique de la page HTML a été pervertie avec les années. Bruxelles Formation CEPEGRA Olivier Céréssia 2012 PRÉAMBULE A mille lieues de la vision structuraliste de ses créateurs, la page HTML est devenue un document hybride mêlant structure, contenu, mise en

Plus en détail