Ressources::HTML - Historique des versions

Lionel le 14 septembre 2017 à 08:53

2017-09-14T08:53:05Z

Lionel le 23 octobre 2015 à 13:47

2015-10-23T13:47:48Z

Lionel le 23 octobre 2015 à 13:45

2015-10-23T13:45:31Z

Lionel le 23 octobre 2015 à 13:43

2015-10-23T13:43:56Z

Lionel le 14 octobre 2015 à 07:32

2015-10-14T07:32:17Z

Lionel le 14 octobre 2015 à 07:31

2015-10-14T07:31:18Z

Lionel le 14 octobre 2015 à 07:30

2015-10-14T07:30:44Z

Lionel le 14 octobre 2015 à 07:28

2015-10-14T07:28:00Z

Lionel le 11 octobre 2015 à 17:44

2015-10-11T17:44:49Z

Lionel le 11 octobre 2015 à 17:43

2015-10-11T17:43:24Z

← Version précédente		Version du 14 septembre 2017 à 08:53
Ligne 1 :		Ligne 1 :
−	~~'''Cette page consiste en une introduction au langage html5.'''~~
−
−
	=Introduction=		=Introduction=
	==Les balises==		==Les balises==

@@ Ligne 221 : / Ligne 221 : @@
 </html>
 </syntaxhighlight>
 [[Catégorie:Ressources]]

@@ Ligne 221 : / Ligne 221 : @@
 </html>
 </syntaxhighlight>
 [[Catégorie:Ressources]]

@@ Ligne 221 : / Ligne 221 : @@
 </html>
 </syntaxhighlight>
 [[Catégorie:Ressources]]

@@ Ligne 2 : / Ligne 2 : @@
-=Introduction: les balises=
+=Introduction=
+==Les balises==
 Une liste complète de toutes les balises html disponibles est accessible ici : http://www.w3schools.com/tags/default.asp
@@ Ligne 131 : / Ligne 131 : @@
 La balise <code>&lt;img&gt;</code> à un contenu image.
-=Contenu d'une page html=
+==Contenu d'une page html==
 Les pages html ne contiennent que du texte, soit le code html qui structure le document et le contenu texte. Les médias externes doivent être stockés à l’extérieur de la page. Les images, vidéos, sons, les feuilles de style (fichiers css pour la mise en forme de la page), les fichiers javascript (pour – entre autres – l’interactivité dans la page), sont placés dans des dossiers propres et référencés dans le code html.

← Version précédente		Version du 14 octobre 2015 à 07:30
Ligne 1 :		Ligne 1 :
		+	'''Cette page consiste en une introduction au langage html5.'''
		+

	==Introduction: les balises==		==Introduction: les balises==

@@ Ligne 47 : / Ligne 47 : @@
 </syntaxhighlight>
-Notons au passage que lorsque des balises contiennent d’autre balises, on « indente » le code, c’est à dire on insère un espace de tabulation qui permet de distinguer directement une balise contenue dans une autre.
+Notons au passage que lorsque des balises contiennent d’autre balises, on "indente" le code, c’est à dire on insère un espace de tabulation qui permet de distinguer directement une balise contenue dans une autre.
-On distingue deux parties principales à la page ; la partie « head » et la partie « body ». La partie « head » contiendra ce que l’on appelle les éléments « meta » d’une page, c’est à dire les éléments non-visibles dans l’espace de la page web mais utiles aux moteurs de recherches et au navigateur.
+On distingue deux parties principales à la page ; la partie "head" et la partie "body". La partie "head" contiendra ce que l’on appelle les éléments "meta" d’une page, c’est à dire les éléments non-visibles dans l’espace de la page web mais utiles aux moteurs de recherches et au navigateur.
 Par exemple :
@@ Ligne 60 : / Ligne 60 : @@
 </head>
 </syntaxhighlight>
-Va permettre au navigateur d’afficher « Le titre de la page » dans sa barre de titre, c’est à dire tout en haut de la fenêtre, ainsi que d’afficher les caractères de la page dans le bon encodage (UTF8).
+Va permettre au navigateur d’afficher "Le titre de la page" dans sa barre de titre, c’est à dire tout en haut de la fenêtre, ainsi que d’afficher les caractères de la page dans le bon encodage (UTF8).
-Enfin, la partie « body » contiendra le contenu visible de la page ; les éléments à afficher lors de la consultation de la page par un visiteur.
+Enfin, la partie "body" contiendra le contenu visible de la page ; les éléments à afficher lors de la consultation de la page par un visiteur.
 Exemple d’une page html complète :
@@ Ligne 121 : / Ligne 121 : @@
 On distingue ci-dessus les balises <code>&lt;div&gt;</code>, <code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;p&gt;</code>, <code>&lt;img&gt;</code>.
-La balise <code>&lt;div&gt;</code> permet de regrouper plusieurs éléments html ensemble. Elle correspond à un « bloc de contenu », à l’image d’un article intégré dans une page de journal.
+La balise <code>&lt;div&gt;</code> permet de regrouper plusieurs éléments html ensemble. Elle correspond à un "bloc de contenu", à l’image d’un article intégré dans une page de journal.
 Les balises <code>&lt;h..&gt;</code> permettent de hiérarchiser les différents niveaux de titres présents dans la page. Dans notre exemple, la balise <code>&lt;h1&gt;</code> est attribuée au titre global de la page, la balise <code>&lt;h2&gt;</code> aux titres des articles et la balise <code>&lt;h3&gt;</code> aux sous-titres des articles. On peut indiquer jusqu’à 6 niveaux de titres à l’aide de ces balises ; <code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;h4&gt;</code>, <code>&lt;h5&gt;</code>, <code>&lt;h6&gt;</code> . La hiérarchie de ces balises est décroissante (<code>&lt;h1&gt;</code> est plus important que <code>&lt;h2&gt;</code>).
@@ Ligne 129 : / Ligne 129 : @@
 La balise <code>&lt;img&gt;</code> à un contenu image.
 [[Catégorie:Ressources]]

← Version précédente		Version du 11 octobre 2015 à 17:44
Ligne 1 :		Ligne 1 :
−	~~[[HTML::Introduction\|Introduction au langage HTML]]~~
−

	==Introduction: les balises==		==Introduction: les balises==

← Version précédente		Version du 11 octobre 2015 à 17:43
Ligne 1 :		Ligne 1 :
	[[HTML::Introduction\|Introduction au langage HTML]]		[[HTML::Introduction\|Introduction au langage HTML]]
		+
		+
		+	==Introduction: les balises==
		+
		+	Une liste complète de toutes les balises html disponibles est accessible ici : http://www.w3schools.com/tags/default.asp
		+
		+	Le code html permet de structurer les données d’une page. Il n’est pas question de mise en forme ici mais d’organisation du contenu, de manière à pouvoir appliquer la mise en forme ultérieurement, à l’aide d’une feuille de style. Le langage html est composé de balises ouvrantes et fermantes. Toute balise ouverte doit être fermée ultérieurement.
		+	exemple de balise ouvrante :
		+
		+	<syntaxhighlight lang="html5">
		+	<body>
		+	</syntaxhighlight>
		+
		+	exemple de balise fermante :
		+
		+	<syntaxhighlight lang="html5">
		+	</body>
		+	</syntaxhighlight>
		+
		+	Certaines balises sont à la fois ouvrantes et fermantes, c’est le cas de la balise
		+
		+	<syntaxhighlight lang="html5">
		+	<img />
		+	</syntaxhighlight>
		+
		+	qui s’ouvre avec le signe < et qui se ferme avec les signes />.
		+
		+	Les commentaires html sont délimités par les signes
		+	<syntaxhighlight lang="html5">
		+	<!--
		+	</syntaxhighlight>
		+	qui marquent le début d’un commentaire, et les signes
		+	<syntaxhighlight lang="html5">
		+	-->
		+	</syntaxhighlight>
		+	qui en marquent la fin. Les commentaires ne sont affichés que dans le code, ils ne seront donc pas visibles pour le visiteur. Ils sont par contre utile pour marquer des indications au sein même du code ; voir l’exemple ci-dessous.
		+
		+	La structure commune à toute page html ressemble à ceci :
		+
		+	<syntaxhighlight lang="html5" line>
		+	<!DOCTYPE html><!-- où l'on indique le type de document -->
		+	<html><!-- où l'on indique le début de la page html -->
		+	<head><!-- où l'on indique le début de la partie "head" -->
		+	</head><!-- où l'on indique la fin de la partie "head" -->
		+	<body><!-- où l'on indique le début de la partie "body" -->
		+	</body><!-- où l'on indique la fin de la partie "body" -->
		+	</html><!-- où l'on indique la fin de la page html -->
		+	</syntaxhighlight>
		+
		+	Notons au passage que lorsque des balises contiennent d’autre balises, on « indente » le code, c’est à dire on insère un espace de tabulation qui permet de distinguer directement une balise contenue dans une autre.
		+
		+	On distingue deux parties principales à la page ; la partie « head » et la partie « body ». La partie « head » contiendra ce que l’on appelle les éléments « meta » d’une page, c’est à dire les éléments non-visibles dans l’espace de la page web mais utiles aux moteurs de recherches et au navigateur.
		+
		+	Par exemple :
		+	<syntaxhighlight lang="html5" line>
		+	<head>
		+	<title>
		+	Le titre de la page
		+	</title>
		+	<meta charset="UTF-8" />
		+	</head>
		+	</syntaxhighlight>
		+	Va permettre au navigateur d’afficher « Le titre de la page » dans sa barre de titre, c’est à dire tout en haut de la fenêtre, ainsi que d’afficher les caractères de la page dans le bon encodage (UTF8).
		+
		+	Enfin, la partie « body » contiendra le contenu visible de la page ; les éléments à afficher lors de la consultation de la page par un visiteur.
		+
		+	Exemple d’une page html complète :
		+
		+	<syntaxhighlight lang="html5" line>
		+	<!DOCTYPE html>
		+	<html>
		+	<head>
		+	<title>
		+	Mon titre
		+	</title>
		+	<meta charset="UTF-8" />
		+	</head>
		+	<body>
		+	<h1>
		+	Ma page
		+	</h1>
		+	<div>
		+	<h2>
		+	Mon titre de mon article
		+	</h2>
		+	<img />
		+
		+	<p>
		+	Mon nouveau paragraphe
		+	</p>
		+	<p>
		+	Mon autre nouveau paragraphe
		+	</p>
		+	<h3>
		+	Mon sous titre
		+	</h3>
		+	<p>
		+	Mon troisième nouveau paragraphe
		+	</p>
		+	</div>
		+	<div>
		+	<h2>
		+	Mon titre de mon article
		+	</h2>
		+	<p>
		+	Mon nouveau paragraphe
		+	</p>
		+	<p>
		+	Mon autre nouveau paragraphe
		+	</p>
		+	<h3>
		+	Mon sous titre
		+	</h3>
		+	<p>
		+	Mon troisième nouveau paragraphe
		+	</p>
		+	</div>
		+	</body>
		+	</html>
		+	</syntaxhighlight>
		+
		+	On distingue ci-dessus les balises <code><div></code>, <code><h1></code>, <code><h2></code>, <code><h3></code>, <code><p></code>, <code><img></code>.
		+
		+	La balise <code><div></code> permet de regrouper plusieurs éléments html ensemble. Elle correspond à un « bloc de contenu », à l’image d’un article intégré dans une page de journal.
		+
		+	Les balises <code><h..></code> permettent de hiérarchiser les différents niveaux de titres présents dans la page. Dans notre exemple, la balise <code><h1></code> est attribuée au titre global de la page, la balise <code><h2></code> aux titres des articles et la balise <code><h3></code> aux sous-titres des articles. On peut indiquer jusqu’à 6 niveaux de titres à l’aide de ces balises ; <code><h1></code>, <code><h2></code>, <code><h3></code>, <code><h4></code>, <code><h5></code>, <code><h6></code> . La hiérarchie de ces balises est décroissante (<code><h1></code> est plus important que <code><h2></code>).
		+
		+	Les balises <code><p></code> correspondent à des paragraphes de texte.
		+
		+	La balise <code><img></code> à un contenu image.
		+
		+

	[[Catégorie:Ressources]]		[[Catégorie:Ressources]]