diff options
Diffstat (limited to 'files/ca/web/html/global_attributes/itemscope/index.html')
| -rw-r--r-- | files/ca/web/html/global_attributes/itemscope/index.html | 315 |
1 files changed, 315 insertions, 0 deletions
diff --git a/files/ca/web/html/global_attributes/itemscope/index.html b/files/ca/web/html/global_attributes/itemscope/index.html new file mode 100644 index 0000000000..6e7c42d8e9 --- /dev/null +++ b/files/ca/web/html/global_attributes/itemscope/index.html @@ -0,0 +1,315 @@ +--- +title: itemscope +slug: Web/HTML/Global_attributes/itemscope +tags: + - Attribute + - Global attribute + - HTML + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemscope +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atribut global</a> <code><strong>itemscope</strong></code> (en general) treballa juntament amb {{htmlattrxref ("itemtype")}} per especificar que el contingut HTML en un bloc es sobre un element en particular. <code>itemscope</code> crea l'element i defineix l'ambit del <code>itemtype</code> associat a ell. <code>itemtype</code> és un URL vàlid d'un vocabulari (com schema.org) que descriu l'element i el seu context de propietats. En els exemples següents el vocabulari utilitzat és de schema.org. Cada element HTML pot tenir un atribut <code>itemscope</code> especificat. Un element i<code>temscope</code> que no té un <code>itemtype</code> associat té una <code>itemref.</code></p> + +<div class="note"> +<p><strong>Nota:</strong> Més informació sobre els atributs <code>itemtype</code> es poden trobar a <a href="http://schema.org/Thing">http://schema.org/Thing</a></p> +</div> + +<h3 id="Exemple_senzill">Exemple senzill</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><div itemscope itemtype ="http://schema.org/Movie"> + <h1 itemprop="name">Avatar</h1> + <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span> + <span itemprop="genre">Science fiction</span> + <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a> +</div> +</pre> + +<h4 id="sect1"> </h4> + +<h4 id="Estructuració_de_les_dades">Estructuració de les dades</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td rowspan="6">itemscope</td> + <td>Itemtype</td> + <td colspan="2">Movie</td> + </tr> + <tr> + <td>itemprop</td> + <td>(itemprop name)</td> + <td>(itemprop value)</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science Fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>https://youtu.be/0AY1XIkX7bY</td> + <td>Trailer</td> + </tr> + </tbody> +</table> + +<h3 id="itemscope_id's"><code>itemscope</code> id's</h3> + +<p>Un element amb l'atribut <code>itemscope</code> especificat crea un nou element que consisteix en un grup de parells de nom-valor. Els elements amb un atribut <code>itemscope</code> i un atribut <code>itemtype</code> també poden tenir un atribut {{htmlattrxref ("id")}} especificat (no un itemid, cf. {{htmlattrxref ("itemref")}}), per donar un identificador global a l'element, de manera que pot estar relacionat amb altres elements de pàgines d'altres llocs a la web.</p> + +<h3 id="Exemple">Exemple</h3> + +<p>Hi ha tres <code>itemscope</code> en aquest exemple. Els tres <code>itemscope</code>, al seu torn, estableixen l'ambit corresponent de tres <code>itemtype</code>. Els tres <code>itemtype</code> són <code>Recipe</code>, <code>AggregateRating</code> i <code>NutritionInformation</code> . Aquests <code>itemtype</code> són part de la estructura de dades de schema.org per a una recepta.</p> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Recipe"> +<h2 itemprop="name">Grandma's Holiday Apple Pie</h2> +<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/> +<p>By <span itemprop="author" itemscope itemtype="http://schema.org/Person"> +<span itemprop="name">Carol Smith</p></span> +</span> +<p>Published: <time datetime="2009-11-05" itemprop="datePublished"> +November 5, 2009</p></time> +<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span> + <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> + <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span> +Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time> + Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time> + Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time> + Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span> + <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> + Serving size: <span itemprop="servingSize">1 medium slice<br></span> + Calories per serving: <span itemprop="calories">250 cal<br></span> + Fat per serving: <span itemprop="fatContent">12 g<br></span> +</span> +<p>Ingredients:<br> + <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span> + <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span> + ... </p> + +Directions: <br> + <div itemprop="recipeInstructions"> + 1. Cut and peel apples<br> + 2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br> + ... + </div> +</div> </pre> + +<h3 id="Resultats">Resultats</h3> + +<h4 id="HTML_2">HTML</h4> + +<p>{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}</p> + +<h4 id="Estructuració_de_les_dades_2">Estructuració de les dades</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">Recipe</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Grandma's Holiday Apple Pie</td> + </tr> + <tr> + <td>itemprop</td> + <td>image</td> + <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td> + </tr> + <tr> + <td>itemprop</td> + <td>datePublished</td> + <td>2009-11-05</td> + </tr> + <tr> + <td>itemprop</td> + <td>description</td> + <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td> + </tr> + <tr> + <td>itemprop</td> + <td>prepTime</td> + <td>PT30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>cookTime</td> + <td>PT1H</td> + </tr> + <tr> + <td>itemprop</td> + <td>totalTime</td> + <td>PT1H30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeYield</td> + <td>1 9" pie (8 servings)</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>Thinly-sliced apples: 6 cups</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>White sugar: 3/4 cup</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeInstructions</td> + <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</td> + </tr> + <tr> + <td>itemprop</td> + <td colspan="2" rowspan="1">author [Person]</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Carol Smith</td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue</td> + <td>4.0</td> + </tr> + <tr> + <td>itemprop</td> + <td>reviewCount</td> + <td>35</td> + </tr> + <tr> + <td colspan="1" rowspan="4">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">nutrition [NutritionInformation]</td> + </tr> + <tr> + <td>itemprop</td> + <td>servingSize</td> + <td>1 medium slice</td> + </tr> + <tr> + <td>itemprop</td> + <td>calories</td> + <td>250 cal</td> + </tr> + <tr> + <td>itemprop</td> + <td>fatContent</td> + <td>12 g</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Una eina molt útil per a l'extracció d'estructures de microdata d'HTML és Google's <a href="https://developers.google.com/structured-data/testing-tool/">Structured Data Testing Tool</a>. Intenteu-ho en el codi HTML que es mostra a dalt.</p> +</div> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentari</th> + </tr> + <tr> + <td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#items">itemscope</a></code></td> + <td> </td> + <td>WG Nota - <span class="short_text" id="result_box" lang="ca"><span>Ja</span> <span>no s'està</span> <span>desenvolupant</span> <span>activament</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veure">Veure</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">Altres atributs globals diferents</a></li> + <li>Altres atributs globals relacionats amb microdata: + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> |