Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:html:semantic [2023/03/19 02:21] – jcheron
+++ web:html:semantic [2023/05/09 02:31] (Version actuelle) – [Données RDF] jcheron
@@ Ligne 1: / Ligne 1: @@
 ====== HTML sémantique ======
-Il consiste à utiliser certaine balises donnant un sens au travers de la structure du document.
+Il consiste à utiliser certaines balises donnant un sens au travers de la structure du document.
+===== Sémantique et structure =====
+<html><div class="imageB"></html>{{:web:html:pasted:20230319-025128.png}}<html></div></html>
+^Balise ^Rôle ^
+^h* | Titres |
+^header | En-tête général de la page |
+^main | Zone de contenu principal |
+^aside | Zone supplémentaire de complément |
+^footer | Pied de page |
+^article | Bloc de contenu en relation avec d'autres articles, peut contenir des sections |
+^section | Défini une zone spécifique de contenu, peut contenir des articles |
+^nav | Zone de navigation de la page |
+===== Balises sémantiques =====
+==== Liste de description ====
+<html>
+<table border=0>
+<tr><td></html>
+ <sxh html;gutter:false>
+<dl>
+    <dt>Prénom</dt>
+    <dd>John</dd>
+    <dt>Nom</dt>
+    <dd>DOE</dd>
+    <dt>Ville</dt>
+    <dd>Caen</dd>
+</dl>
+</sxh>
+<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230319-032113.png}}
+<html></div></td></tr></table></html>
+==== Citations ====
+<html>
+<table border=0>
+<tr><td></html>
+ <sxh html;gutter:false>
+<blockquote>
+    <p>La théorie, c'est quand on sait tout et que rien ne fonctionne.</br>
+    La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.</p>
+    <p>Ici, nous avons réuni théorie et pratique : Rien ne fonctionne… et personne ne sait pourquoi !</p>
+    <footer>
+        <cite>Albert EINSTEIN</cite>
+    </footer>
+</blockquote>
+</sxh>
+<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230319-033402.png}}
+<html></div></td></tr></table></html>
+==== Adresse ====
+Pour mettre des informations de contact:
+<html>
+<table border=0>
+<tr><td></html>
+ <sxh html;gutter:false>
+<p>Contact the author of this page:</p>
+<address>
+    <a href="mailto:jim@rock.com">j.doe@mail.com</a><br>
+    <a href="tel:+13115552368">(343) 555-3228</a>
+</address>
+</sxh>
+<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230319-033748.png}}
+<html></div></td></tr></table></html>
+===== Micro-données =====
+<WRAP info round>
+Les microdonnées permettent de spécifier des informations spécifiques sur le contenu d'une page Web, telles que le type de contenu, l'auteur, la date de publication, etc.\\
+Elles permettent aux moteurs de recherche de mieux comprendre le contenu de la page et de fournir des résultats de recherche plus pertinents.
+</WRAP>
+==== Exemple : ====
+Utilisation de microdonnées de **schema.org** pour spécifier le type de contenu de la page (http://schema.org/Article), ainsi que les informations sur l'auteur et la date de publication de l'article (itemprop="author" et itemprop="datePublished"), itemprop="headline" pour spécifier le titre de l'article.
+<sxh html>
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Mon article sur les microdonnées</title>
+	<meta charset="utf-8">
+	<!-- Ajout des microdonnées -->
+	<meta itemprop="name" content="Mon article sur les microdonnées">
+	<meta itemprop="author" content="Jean Dupont">
+	<meta itemprop="datePublished" content="2023-05-08">
+</head>
+<body>
+	<article itemscope itemtype="http://schema.org/Article">
+		<header>
+			<h1 itemprop="headline">Mon article sur les microdonnées</h1>
+			<p><span itemprop="author">Jean Dupont</span> - <span itemprop="datePublished">8 mai 2023</span></p>
+		</header>
+		<section>
+			<p>Dans cet article, je vais vous expliquer comment les microdonnées peuvent améliorer la visibilité de votre site web dans les résultats de recherche.</p>
+			<p>Les microdonnées permettent de spécifier des informations spécifiques sur le contenu d'une page Web, telles que le type de contenu, l'auteur, la date de
+                           publication, etc. Cela permet aux moteurs de recherche de mieux comprendre le contenu de la page et de fournir des résultats de recherche plus pertinents.</p>
+			<p>En utilisant les microdonnées, vous pouvez également améliorer la présentation des résultats de recherche, en ajoutant des éléments tels que des images,
+                           des évaluations, des prix, etc.</p>
+		</section>
+			<footer>
+			<p>Publié par <span itemprop="author">Jean Dupont</span> le <time itemprop="datePublished" datetime="2023-05-08">8 mai 2023</time>.</p>
+		</footer>
+	</article>
+</body>
+</html>
+</sxh>
+===== Données RDF =====
+Etabli par le W3C, RDF (Resource Description Framework) est destiné à décrire formellement les ressources Web et leurs métadonnées, afin de permettre le traitement automatique de telles descriptions.
+==== Déclaration de données ====
+Exemple de déclaration de données RDF dans une page :
+<sxh html>
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Ma page avec des métadonnées RDF</title>
+	<meta charset="utf-8">
+	<!-- Ajout des métadonnées RDF -->
+	<script type="application/ld+json">
+		{
+		  "@context": "https://schema.org",
+		  "@type": "Person",
+		  "name": "Jean Dupont",
+		  "jobTitle": "Webmaster",
+		  "url": "https://www.jeandupont.com"
+		}
+	</script>
+</head>
+<body>
+	<h1>Ma page avec des métadonnées RDF</h1>
+	<p>Contenu de ma page...</p>
+</body>
+</html>
+</sxh>
+==== Récupération de données ====
+Il est possible de récupérer des données RDF depuis une autre application (web ou autre) :
+<sxh html>
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Ma page qui récupère des métadonnées RDF</title>
+	<meta charset="utf-8">
+</head>
+<body>
+	<h1>Ma page qui récupère des métadonnées RDF</h1>
+	<p>Le nom de la personne est : <span id="name"></span></p>
+	<p>Le titre de poste de la personne est : <span id="jobTitle"></span></p>
+	<p>L'URL de la personne est : <span id="url"></span></p>
+	<script>
+		const url = "https://www.jeandupont.com"; // L'URL de la page qui contient les métadonnées RDF
+		const headers = { "Accept": "application/ld+json" }; // Le type de contenu que l'on souhaite récupérer
+		fetch(url, { headers })
+			.then(response => response.json())
+			.then(data => {
+				document.getElementById("name").innerText = data.name;
+				document.getElementById("jobTitle").innerText = data.jobTitle;
+				document.getElementById("url").innerText = data.url;
+			})
+			.catch(error => console.error(error));
+	</script>
+</body>
+</html>
+</sxh>