path: root/files/ca/learn/html/introduction_to_html/getting_started/index.html

---
title: Inici en HTML
slug: Learn/HTML/Introducció_al_HTML/Getting_started
tags:
  - Attribute
  - Beginner
  - CodingScripting
  - Comment
  - Element
  - Guide
  - HTML
  - entity reference
  - whitespace
translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">En aquest article exposarem els fonaments bàsics de l'HTML, perquè pugueu començar. Definirem els elements, els atributs i tots els altres termes importants que podeu haver sentit, i quina funció compleixen en el llenguatge. També us mostrarem com s'estructura un element HTML, com s'estructura una pàgina HTML típica, i explicarem altres característiques bàsiques importants del llenguatge. Pel camí, jugarem una mica amb l'HTML perquè mantinguis l'interès!</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Requisits previs:</th>
   <td>Coneixements bàsics d'informàtica, <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a> i coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb arxius</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td>Familiaritzar-se amb el llenguatge HTML i obtenir una mica de pràctica escrivint elements HTML.</td>
  </tr>
 </tbody>
</table>

<h2 id="Què_és_HTML">Què és HTML?</h2>

<p>{{glossary("HTML")}} (HyperText Markup Language) no és un llenguatge de programació; és un <em>llenguatge de marcat</em>, que serveix per dir al teu navegador la manera d'estructurar les pàgines web que visites. Pot ser tan complicat o tan simple com el desenvolupador web desitgi que sigui. HTML consisteix en un seguit d'{{glossary("Element", "elements")}}, que s'utilitzen per tancar, delimitar o marcar diferents parts del contingut per fer que aparegui o actuï d'una manera determinada . Les {{glossary("Tag", "etiquetes")}} que el delimiten poden convertir un petit fragment de contingut en un enllaç que connecti amb una altra pàgina en la web, per a posar paraules en cursiva, i així successivament. Per exemple, prenguem la següent línia de contingut:</p>

<pre class="notranslate">My cat is very grumpy</pre>

<p>Si volem que la línia es mantingui independent, podem especificar que és un paràgraf delimitant-la amb un element d'etiqueta de paràgraf ({{htmlelement ("p")}}):</p>

<pre class="brush: html notranslate">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>

<h2 id="Anatomia_dun_element_HTML"><span id="result_box" lang="ca"><span>Anatomia</span> <span>d'un</span> <span>element</span> <span>HTML</span></span></h2>

<p><span id="result_box" lang="ca"><span>Explorem una mica el nostre element paràgraf fins una mica més enllà</span>:</span></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>

<p>Les parts principals del nostre element són:</p>

<ol>
 <li><strong>L'etiqueta d'obertura</strong>: Consisteix en el nom de l'element (en aquest cas, p), delimitat amb <strong>claus angulars</strong> d'obertura i tancament. Això indica on comença l'element, o comença a tenir efecte; en aquest cas és al començament del paràgraf.</li>
 <li><strong>L'etiqueta de tancament</strong>: És la mateixa que l'etiqueta d'obertura, excepte que inclou una barra inclinada abans del nom de l'element. Això indica on acaba l'element; en aquest cas és al final del paràgraf. El fet de no incloure una etiqueta de tancament és un error de principiant comú, i pot conduir a resultats estranys.</li>
 <li><strong>El contingut</strong>: És el contingut de l'element, que en aquest cas és només text.</li>
</ol>

<p>L'element és l'etiqueta d'obertura, seguida del contingut, seguida de l'etiqueta de tancament.</p>

<h3 id="Aprenentatge_actiu_crea_el_teu_primer_element_HTML">Aprenentatge actiu: crea el teu primer element HTML</h3>

<p>Edita la línia següent en l'àrea d'<em>entrada</em> delimitant-la amb les etiquetes <code>&lt;em&gt;</code> i <code>&lt;/em&gt;</code> (posa <code>&lt;em&gt;</code> abans d'<em>obrir l'element</em>, i <code>&lt;/em&gt;</code> després, per <em>tancar l'element</em>); això hauria de donar una línia en cursiva! Pots veure els canvis actualitzats en viu en l'<em>àrea de sortida</em>.</p>

<p>Si t’equivoques sempre pots tornar al codi anterior amb el botó de <em>Reinicia</em>. Si et quedes realment encallat, fes clic al botó <em>Mostra la solució</em> per veure la resposta.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;

&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
  This is my text.
&lt;/textarea&gt;

&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Show solution" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '&lt;em&gt;This is my text.&lt;/em&gt;';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p>

<h3 id="Niar_elements">Niar elements</h3>

<p>També pots posar elements dins d'altres elements; això s’anomena <strong>imbricar</strong>. Si volem afirmar que el nostre gat està de <strong>molt</strong> mal humor, podem delimitar la paraula «molt» amb un element {{htmlelement("strong")}}, que significa que la paraula es destaca amb força:</p>

<pre class="brush: html notranslate">&lt;p&gt;El meu gast està de &lt;strong&gt;molt&lt;/strong&gt; mal humor.&lt;/p&gt;</pre>

<p>No obstant això, us heu d’assegurar que els elements estan correctament imbricats: en l'exemple anterior en primer lloc hem obert l'element <code>p</code> i a continuació l'element <code>strong</code>; per tant, hem de tancar l'element <code>strong</code> en primer lloc i l’element <code>p</code> a continuació. Fer el següent és incorrecte:</p>

<pre class="example-bad brush: html notranslate">&lt;p&gt;El meu gat està &lt;strong&gt;de molt mal humor.&lt;/p&gt;&lt;/strong&gt;</pre>

<p><strong>Els elements s’han d’obrir obrir i tancar correctament de manera que estiguin clarament dins o fora l’un de l'altre</strong>. Si se superposen, com a dalt, llavors el teu navegador web tractarà de fer l’estimació que li sembli més correcta del que vols dir, i així es poden obtenir resultats inesperats.</p>

<h3 id="Elements_de_bloc_i_elements_de_línia">Elements de bloc i elements de línia</h3>

<p>Hi ha dues categories importants d'elements en HTML, que has de conèixer: els elements de bloc i els elements de línia.</p>

<ul>
 <li>Els elements de bloc formen un bloc visible en una pàgina; apareixen en una línia nova després de qualsevol contingut que en vagi davant, i qualsevol contingut que hi vagi després també apareixerà en una línia nova. Els elements de bloc tendeixen a ser elements estructurals de la pàgina. Representen, per exemple, paràgrafs, llistes, menús de navegació, peus de pàgina, etc. Un element de bloc no es pot imbricar dins d'un element de línia, però pot estar imbricat dintre d'un altre element de bloc.</li>
 <li>Els elements de línia estan continguts dins d’elements de nivell de bloc i només delimiten petites parts del contingut del document, no paràgrafs sencers ni agrupacions de contingut. Un element de línia no fa aparèixer una línia nova en el document: normalment apareix dins d'un paràgraf de text, per exemple, un element {{htmlelement("a")}} (hipervincle), o elements d'èmfasi com {{htmlelement("em")}} o {{htmlelement("strong")}}.</li>
</ul>

<p>Prenguem <span>l'exemple següent:</span></p>

<pre class="brush: html notranslate">&lt;em&gt;first&lt;/em&gt;&lt;em&gt;second&lt;/em&gt;&lt;em&gt;third&lt;/em&gt;

&lt;p&gt;fourth&lt;/p&gt;&lt;p&gt;fifth&lt;/p&gt;&lt;p&gt;sixth&lt;/p&gt;
</pre>

<p>{{htmlelement("em")}} és un element de línia. Així, com es pot veure a continuació, els tres primers elements són a la mateixa línia l'un i l'altre, sense cap espai entre ells. D'altra banda, {{htmlelement("p")}} és un element de bloc, de manera que cada element apareix en una línia nova, amb un espai per sobre i per sota de cada un (L'espaiat es deu a l'<a href="/ca/docs/Learn/CSS/First_steps">aplicació d’estil CSS</a> que el navegador aplica als paràgrafs per defecte).</p>

<p>{{ EmbedLiveSample('Elements_de_bloc_i_elements_de_línia', 700, 200) }}</p>

<div class="note">
<p><strong>Nota</strong>: HTML5 va redefinir les categories d'elements en HTML5: vegeu <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Categories d'elements de contingut</a>. Si bé aquestes definicions són més precises i menys ambigües que les anteriors, són molt més complicades d'entendre que «de bloc» i «de línia», per la qual cosa ens quedarem amb aquestes al llarg d'aquest article.</p>
</div>

<div class="note">
<p><strong>Nota</strong>: Podeu trobar pàgines de referència útils que inclouen llistes d'elements de bloc i elements de línia; vegeu els <a href="/ca/docs/Web/HTML/Block-level_elements">elements de nivell de bloc</a> i els <a href="/ca/docs/Web/HTML/Elements_en_línia">elements de línia</a>.</p>
</div>

<h3 id="Elements_buits">Elements buits</h3>

<p>No tots els elements segueixen el patró anterior d'etiqueta d'obertura, contingut i etiqueta de tancament. Alguns elements consisteixen en una sola etiqueta, que normalment s'utilitza per inserir/incrustar alguna cosa  en el document en el lloc on s'inclou. Per exemple, l'element {{htmlelement("img")}} insereix una imatge en una pàgina en la posició en què està inclosa:</p>

<pre class="brush: html notranslate">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>

<p>Aquesta sortida mostraria el següent a la vostra pàgina:</p>

<p>{{ EmbedLiveSample('Elements_buits', 700, 300) }}</p>

<div class="note">
<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span>Els</span> <span>elements</span> <span>buits</span> </span> també se'ls anomena de vegades <span lang="ca"> <em> (void elements</em>).</span></p>
</div>

<h2 id="Atributs">Atributs</h2>

<p>Els elements també poden tenir atributs, que tenen presenten l’aspecte següent:</p>

<p><img alt='&amp;lt;p class="editor-note">My cat is very grumpy&amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>

<p>Els atributs contenen informació addicional sobre l'element que no vols que aparegui com a contingut. En aquest cas, l'atribut <code>class</code> permet donar a l'element un nom d'identificació que pot ser posteriorment utilitzat per l'element destí amb informació d'estil i altres coses.</p>

<p>Un atribut ha de tenir:</p>

<ol>
 <li>Un espai entre ell i el nom de l'element (o l'atribut anterior, si l'element ja té un o més atributs.)</li>
 <li>El nom de l'atribut, seguit d'un signe igual.</li>
 <li>Un valor d'atribut, amb signes d'obertura i de tancament de cometes que el delimiten</li>
</ol>

<h3 id="Aprenentatge_actiu_Afegir_atributs_a_un_element">Aprenentatge actiu: Afegir atributs a un element</h3>

<p>Un altre exemple d'un element és {{HTMLElement ("a")}}; ve d’<em>anchor</em> i delimita la part del text que és un enllaç. Pot prendre un seguit d'atributs, però dos són els següents:</p>

<ul>
 <li><code>href</code>: Aquest atribut especifica, com a valor, l'adreça web que desitgeu que l'enllaç apunti; on el navegador es desplaçarà quan es fa clic a l'enllaç. Per exemple, <code>href="https://www.mozilla.org/"</code>.</li>
 <li><code>title</code>: L'atribut <code>title</code> especifica informació addicional sobre l'enllaç, com quina és la pàgina que estem vinculant. Per exemple, <code>title="La pàgina web de Mozilla"</code>. Això apareixerà com un "tooltip" quan planegem per damunt.</li>
 <li><code>target</code>: L'atribut <code>target</code> especifica el context de navegació que es farà servir per mostrar l'enllaç. Per exemple, <code>target="_blank"</code> mostrarà l'enllaç en una pestanya nova. Si vols que l'enllaç es mostri a la pestanya actual, omet l'atribut.</li>
</ul>

<p>Edita la línia següent en l'àrea <em>Input</em> per convertir-la en un enllaç al teu lloc web favorit.</p>

<ol>
 <li>Afegeix l'element <code>&lt;a&gt;</code>.</li>
 <li>Afegeix l'atribut <code>href</code>, i seguidament l'atribut <code>title</code>.</li>
 <li>Especifica l'atribut <code>target</code> per obrir l'enllaç en una nova pestanya.</li>
</ol>

<p>Observa els canvis actualitzats en directe a l'àrea <em>Output</em>. Hauries de veure un enllaç, que en passar-hi per sobre mostrarà el contingut de l'atribut <code>title</code>, i en clicar-hi, va a l'adreça web de l'element <code>href</code>. Recorda que has d’incloure un espai entre el nom de l'element i cada atribut.</p>

<p>Si t’equivoques, sempre pots restablir el codi anterior amb el botó de reinici. Si et quedes realment encallat, fes clic al botó <em>Mostra la solució</em> per veure la solució.</p>

<div class="hidden">
<h6 id="Codi_executable_2">Codi executable 2</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
  &amp;lt;p&amp;gt;A link to my favorite website.&amp;lt;/p&amp;gt;
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '&lt;p&gt;A link to my &lt;a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank"&gt;favorite website&lt;/a&gt;.&lt;/p&gt;';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Codi_executable_2', 700, 300) }}</p>

<h3 id="Atributs_booleans">Atributs booleans</h3>

<p>De vegades veuràs atributs que estan escrits sense valors; això està perfectament permès. S’anomenen atributs booleans, i només poden tenir un valor, que és generalment el mateix que el nom de l'atribut. A tall d'exemple, preneu l'atribut {{htmlattrxref("disabled", "input")}}, que es pot assignar als elements d’entrada de dades d'un formulari, si voleu que estiguin desactivats (en gris) perquè l'usuari no hi pugui entrar cap dada. Per exemple,</p>

<pre class="notranslate">&lt;input type="text" disabled="disabled"&gt;</pre>

<p>Com a forma abreujada, és perfectament admissible escriure-ho de la manera següent (també hem inclòs un element d’entrada de dades de formulari no desactivat com a referència, perquè tinguis una idea de què passa):</p>

<pre class="brush: html notranslate">&lt;input type="text" disabled&gt;

&lt;input type="text"&gt;
</pre>

<p>Tots dos donaran una sortida com la següent:</p>

<p>{{ EmbedLiveSample('Atributs_booleans', 700, 100) }}</p>

<h3 id="Ometre_les_cometes_que_delimiten_els_valors_dels_atributs">Ometre les cometes que delimiten els valors dels atributs</h3>

<p>Quan navegues per la web, et trobes amb tot tipus d'estils de marcat estranys, inclosos valors d'atributs sense cometes. Això és permissible en algunes circumstàncies, però en d'altres trencarà el codi de marcatge. Per exemple, si reprenem el nostre exemple d'enllaç d'abans, podem escriure una versió bàsica amb només l'atribut <code>href</code>, així:</p>

<pre class="notranslate">&lt;a href=https://www.mozilla.org/&gt;favourite website&lt;/a&gt;
</pre>

<p>No obstant això, quan afegim a aquest estil l'atribut <code>title</code>, les coses no funcionen:</p>

<pre class="brush: html notranslate">&lt;a href=https://www.mozilla.org/ title=The Mozilla homepage&gt;favourite website&lt;/a&gt;
</pre>

<p>En aquest punt, el navegador ha interpretat malament el marcatge perquè pensa que l'atribut <code>title</code> té en realitat tres atributs: un atribut <code>title</code> amb el valor «The», i dos atributs booleans, <code>Mozilla</code> i <code>homepage</code>. Això, òbviament, no és el que es pretenia, i causarà errors o un comportament inesperat en el codi, com es veu en l'exemple a continuació. Intenta passar sobre l'enllaç per veure quin és el títol del text!</p>

<p>{{ EmbedLiveSample('Ometre_les_cometes_que_delimiten_els_valors_dels_atributs', 700, 100) }}</p>

<p>Inclou sempre les cometes de l'atribut. Evita aquest tipus de problemes, i el codi resulta més llegible.</p>

<h3 id="Cometes_simples_o_dobles">Cometes simples o dobles?</h3>

<p>En aquest article t’adonaràs que els atributs estan delimitats per cometes dobles. No obstant això, és possible que vegis cometes simples en algun codi HTML. Això és purament una qüestió d'estil, i ets lliure d'escollir . Les dues línies següents són equivalents:</p>

<pre class="brush: html notranslate">&lt;a href="http://www.example.com"&gt;A link to my example.&lt;/a&gt;

&lt;a href='http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>

<p>Però t’has d’assegurar que no es barregen. El codi següent no et funcionarà!</p>

<pre class="brush: html notranslate">&lt;a href="http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>

<p>Si has utilitzat un tipus de cometes en el codi HTML, pots fer servir l’altre tipus de cometes per als teus valors d’atribut sense tenir problemes:</p>

<pre class="brush: html notranslate">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>

<p>Ara bé, si vols imbricar cometes dins de cometes, i són iguals, has d’utilitzar {{anch ("Entitats de referències: incloent caràcters especials en HTML")}}. Per exemple, aquest marcatge trencarà el codi:</p>

<pre class="example-bad brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>http://www.example.com<span class="punctuation token">'</span></span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>Isn<span class="punctuation token">'</span></span><span class="attr-name token">t</span> <span class="attr-name token">this</span> <span class="attr-name token">fun?'</span><span class="punctuation token">&gt;</span></span>A link to my example.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span></code></pre>

<p>Així, necessites fer el següent:</p>

<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>http://www.example.com<span class="punctuation token">'</span></span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>Isn<span class="entity token" title="'">&amp;#39;</span>t this fun?<span class="punctuation token">'</span></span><span class="punctuation token">&gt;</span></span>A link to my example.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span></code></pre>

<h2 id="Anatomia_dun_document_HTML">Anatomia d'un document HTML</h2>

<p>Els elements HTML no són gaire útils per si mateixos. Ara veurem com els elements individuals es combinen per formar una pàgina HTML completa:</p>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;My test page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;This is my page&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Aquí tenim:</p>

<ol>
 <li><code>&lt;!DOCTYPE html&gt;</code>: El tipus de document. Als inicis, quan HTML era jove (al voltant de 1991/1992), els <code>doctype</code> estaven destinats a actuar com enllaços cap a un conjunt de regles que la pàgina HTML havia de seguir per ser considerat un bon HTML, que podia significar la comprovació automàtica d'errors i altres coses útils. Solien ser alguna cosa com ara això:

  <pre class="notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
  Avui dia són un llegat històric que cal incloure perquè tot funcioni. <code>&lt;!DOCTYPE html&gt;</code> és la cadena més curta de caràcters que es considera com un tipus de document vàlid. Això és tot el que realment et cal saber.</li>
 <li><code>&lt;html&gt;&lt;/html&gt;</code>: L'element <code>&lt;html&gt;</code> delimita tot el contingut de la pàgina, i de vegades es coneix com l'element arrel.</li>
 <li><code>&lt;head&gt;&lt;/head&gt;</code>: L'element <code>&lt;head&gt;</code> actua com un contenidor de totes les coses que vols incloure a la pàgina HTML, però que <strong>no són el contingut</strong> que vols mostrar als visitants de la teva pàgina. Això inclou coses com ara paraules clau i una descripció de la pàgina que vols que aparegui en els resultats de cerca, estil CSS per al teu contingut, declaracions de conjunts de caràcters, i més. N’aprendràs més en el proper article de la sèrie.</li>
 <li><code>&lt;meta charset="utf-8"&gt;</code>: Aquest element especifica que el teu document utilitzarà el conjunt de caràcters <code>UTF-8</code>, que inclou la majoria dels caràcters de tots els idiomes humans escrits coneguts. Si ho poses, en essència pots gestionar qualsevol contingut textual possible. No hi ha cap raó per no establir-lo, i us pot ajudar a evitar alguns problemes més endavant.</li>
 <li><code>&lt;title&gt;&lt;/title&gt;</code>: Estableix el títol de la pàgina, que és el títol que apareix a la pestanya del navegador quan carrega la pàgina, i s'utilitza per descriure la pàgina quan l’afegeixes als teus marcadors/favorits.</li>
 <li><code>&lt;body&gt;&lt;/body&gt;</code>: Inclou <em>tot</em> el contingut que es mostra a la teva pàgina, ja sigui text, imatges, vídeos, jocs, reproducció de pistes d'àudio o qualsevol altra cosa.</li>
</ol>

<h3 id="Aprenentatge_actiu_Afegir_característiques_a_un_document_HTML">Aprenentatge actiu: Afegir característiques a un document HTML</h3>

<p>Si vols escriure una mica d'HTML en el teu ordinador local per a experimentar, pots:</p>

<ol>
 <li>Copiar l'exemple de la pàgina HTML que apareix a dalt.</li>
 <li>Crear un arxiu nou a l'editor de text.</li>
 <li>Enganxar el codi en l’arxiu nou de text.</li>
 <li>Desar el fitxer com <code>index.html</code>.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: també pots trobar aquesta plantilla bàsica HTML en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">repositori Github de l’Àrea d’aprenentatge d’MDN</a>.</p>
</div>

<p>Ara pots obrir aquest arxiu en un navegador web per veure quina aparença té el codi reproduït, i després editar el codi i actualitzar el navegador per veure quin n’és el resultat. Inicialment es veurà així:</p>

<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">En aquest exercici pots editar el codi localment en el teu ordinador, com s’ha indicat abans, o pots editar-lo en la finestra de mostra editable a continuació (la finestra de mostra editable representa només el contingut de l'element <code>&lt;body&gt;</code>, en aquest cas). Intenta reproduir els passos següents:</p>

<ul>
 <li>Just a sota de l'etiqueta d'obertura <code>&lt;body&gt;</code>, afegeix un títol principal per al document. Haurà d’estar delimitat per una etiqueta <code>&lt;h1&gt;</code> d'obertura i una etiqueta <code>&lt;/h1&gt;</code> de tancament.</li>
 <li>Edita el contingut del paràgraf per a incloure-hi un text sobre alguna cosa que t’interessi.</li>
 <li>Fes que qualsevol paraula important destaqui en negreta delimitant-la amb d'una etiqueta <code>&lt;strong&gt;</code> d'obertura i una etiqueta <code>&lt;/strong</code>&gt; de tancament</li>
 <li>Afegeix un enllaç al paràgraf, <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Aprenentatge_actiu_crea_el_teu_primer_element_HTML">com s'ha explicat abans en aquest mateix article</a>.</li>
 <li>Afegeix una imatge al document, sota el paràgraf, com <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Elements_buits">s'ha explicat abans en aquest mateix article</a>. Guanyaràs més punts si aconsegueixes enllaçar-lo a una imatge diferent (ja sigui de manera local a l'ordinador, o d’un altre lloc web.)</li>
</ul>

<p>Si t’equivoques, sempre pots restablir el codi anterior amb el botó Reinicia. Si realment et quedes encallat, fes clic al botó <em>Mostra la solució</em> per veure la solució.</p>

<div class="hidden">
<h6 id="Codi_executable_3">Codi executable 3</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
  &amp;lt;p&amp;gt;This is my page&amp;lt;/p&amp;gt;
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

h1 {
 color: blue;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

img {
  max-width: 100%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '&lt;h1&gt;Some music&lt;/h1&gt;&lt;p&gt;I really enjoy &lt;strong&gt;playing the drums&lt;/strong&gt;. One of my favorite drummers is Neal Peart, who\ plays in the band &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;Rush&lt;/a&gt;.\ My favourite Rush album is currently &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\ &lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Codi_executable_3', 700, 600) }}</p>

<h3 id="Els_espais_en_blanc_en_HTML">Els espais en blanc en HTML</h3>

<p>Et deus haver adonat que en els exemples anteriors hi ha una gran quantitat d'espais en blanc i salts de línia en el codi; això no és necessari en absolut; els dos fragments de codi següents són equivalents:</p>

<pre class="brush: html notranslate">&lt;p&gt;Dogs are silly.&lt;/p&gt;

&lt;p&gt;Dogs        are
         silly.&lt;/p&gt;</pre>

<p>No importa la quantitat d'espais en blanc que utilitzis (pots incloure caràcters d'espai, però també salts de línia), l'intépret HTML ho redueix tot a un sol espai quan el codi es representa. Així, per què utilitzem tant els espais en blanc? La resposta és la llegibilitat.</p>

<p>És molt més fàcil d'entendre què passa al teu codi si té un format endreçat, que no si està desordenat. En el nostre HTML, cada element imbricat té una sagnia de dos espais més respecte del que el conté. De tu depèn l'estil de format que utilitzis (el nombre d'espais per a cada nivell de sagnat, per exemple), però t’has de plantejar l'ús d'algun tipus de format.</p>

<h2 id="Referències_a_entitats_inclusió_de_caràcters_especials_en_HTML">Referències a entitats: inclusió de caràcters especials en HTML</h2>

<p>En HTML, els caràcters <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> i <code>&amp;</code> són caràcters especials. Són parts de la sintaxi HTML en si; ara bé, com hem d’incloure un d'aquests caràcters en el text, per exemple, si realment volem emprar un <em>ampersand</em> (&amp;) o el signe <em>menys que</em> (&lt;), i que els navegadors no l'interpretin com codi?</p>

<p>Hem d'utilitzar referències de caràcters, codis especials que representen caràcters i que es poden utilitzar en aquestes circumstàncies exactes. Tots els caràcters de referència s'inicien amb un signe (&amp;) i acaben amb un punt i coma (;).</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Caràcter literal</th>
   <th scope="col">Referència de caràcter equivalent</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>&lt;</td>
   <td>&amp;lt;</td>
  </tr>
  <tr>
   <td>&gt;</td>
   <td>&amp;gt;</td>
  </tr>
  <tr>
   <td>"</td>
   <td>&amp;quot;</td>
  </tr>
  <tr>
   <td>'</td>
   <td>&amp;apos;</td>
  </tr>
  <tr>
   <td>&amp;</td>
   <td>&amp;amp;</td>
  </tr>
 </tbody>
</table>

<p>En el següent exemple, pots veure dos paràgrafs, que parlen sobre tecnologies web:</p>

<pre class="brush: html notranslate">&lt;p&gt;In HTML, you define a paragraph using the &lt;p&gt; element.&lt;/p&gt;

&lt;p&gt;In HTML, you define a paragraph using the &amp;lt;p&amp;gt; element.&lt;/p&gt;</pre>

<p>A la sortida en directe que veus a continuació pots observar que el primer paràgraf ha anat malament perquè el navegador pensa que la segona instància de &lt;p&gt; inicia un paràgraf nou! El segon paràgraf es veu bé perquè hem reemplaçat els parèntesis angulars amb referències de caràcters.</p>

<p>{{ EmbedLiveSample('Referències_a_entitats_inclusió_de_caràcters_especials_en_HTML', 700, 200) }}</p>

<div class="note">
<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span>Un gràfic</span> <span>de totes</span> <span>les</span> <span>referències</span> <span>a entitats</span> <span>de caràcters</span> <span>HTML</span> <span>disponibles, es pot</span> <span>trobar</span> <span>en la Viquipèdia</span></span>: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">Llista de XML i HTML de les referències a entitats de caràcters</a>.</p>
</div>

<h2 id="Comentaris_HTML">Comentaris HTML</h2>

<p>En HTML hi ha un mecanisme disponible per escriure comentaris en el codi. El navegador ignora els comentaris, i així també són invisibles per a l'usuari. E·l seu propòsit és permetre que puguis incloure comentaris en el codi per a aclarir-ne el funcionament, explicar què fan les diferents parts, etc. Això pot ser molt útil com a recordatori del treball que has fet si tornes a treballar en un codi amb què no has treballat durant 6 mesos; o si el lliures a una altra persona perquè hi treballi.</p>

<p>Per a convertir en un comentari una secció de contingut del teu arxiu HTML, l’has de delimitar amb els marcadors especials <code>&lt;!--</code> i <code>--&gt;</code>. Per exemple:</p>

<pre class="brush: html notranslate">&lt;p&gt;I'm not inside a comment&lt;/p&gt;

&lt;!-- &lt;p&gt;I am!&lt;/p&gt; --&gt;</pre>

<p>Com pots veure a continuació, el primer paràgraf apareix a la sortida en directa, però el segon no ho fa.</p>

<p>{{ EmbedLiveSample('Comentaris_HTML', 700, 100) }}</p>

<h2 id="Resum">Resum</h2>

<p>Has arribat al final de l'article! Esperem que hagis gaudit de la visita als conceptes bàsics d'HTML. En aquest punt, hauries de ser capaç d'entendre el llenguatge i com funciona en un nivell bàsic, i hauries de ser capaç d'escriure alguns elements i atributs. En els articles següents del mòdul ens introduirem amb més detall en algunes de les coses que ja has examinat, i introduirem algunes característiques noves del llenguatge.</p>

<div class="note">
<p><strong>Nota</strong>: En aquest punt, a mesura que comences a aprendre més sobre HTML, és possible que també vulguis començar a explorar els fonaments dels fulls d’estil e cascada (cascading style sheets o <a href="/ca/docs/Learn/CSS">CSS</a>). CSS és el llenguatge que s’utilitza per a aplicar estil a les teves pàgines web (per exemple, pots canviar el tipus de lletra o els colors, o alterar el disseny de pàgina). HTML i CSS van alhora, com descobriràs de seguida.</p>
</div>

<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>