La columna central està dedicada a presentar els articles del bloc, tal com vàreu definir al disseny del lloc web.

Cada article està dividit en tres blocs:

• Un primer bloc que conté:
  • data de publicació de l'article
• Un segon bloc que conté:
  • Una imatge/iŀlustració de l'article
  • Capçalera de l'article
  • Sinopsi de l'article
• Un tecer bloc que conté:
  • Llista de descriptors de l'article
  • Enllaç a la pàgina del contingut de l'article

Aquests blocs els podeu interpretar com a regions o sub-divisions de la divisió de la columna central. Si seguiu el mateix model de divisions de l'estructura general del document que heu treballat a la pràctica 3, la columna central presentarà una estructura similar:

<div id="central"> <!-- inici de la columna central -->
 
  <div class="article"> <!-- principi article -->
 
  </div> <!-- final article -->
 
</div> <!-- final de la columna central -->

Cada article representarà una divisió dins de la divisió de la columna central. D'aquesta manera, si la pàgina mostra quatre articles, l'estructura tindrà aquesta representació:

<div id="central"> <!-- inici de la columna central -->
 
  <div class="article"> <!-- principi article -->
 
  </div> <!-- final article -->
 
  <div class="article"> <!-- principi article -->
 
  </div> <!-- final article -->
 
  <div class="article"> <!-- principi article -->
 
  </div> <!-- final article -->
 
  <div class="article"> <!-- principi article -->
 
  </div> <!-- final article -->
 
 
</div> <!-- final de la columna central -->

Cada article contindrà tres sub-regions o tres sub-blocs que corresponen a la divisió que ja vàreu treballar tant a nivell de disseny:

<div class="article"> <!-- inici article  -->
 
  <div class="primer_bloc"> <!-- data de publicació -->
 
  </div>
 
  <div class="segon_bloc"> <!-- contingut -->
 
  </div>
 
  <div class="tercer_bloc"> <!-- annex -->
 
  </div>
 
</div> <!-- final article -->

Treballeu seguidament cada sub-bloc del bloc article.

Cada article conté un bloc on mostra la data de publicació d'aquest, és a dir, el dia i el mes. A nivell d'estructura treballareu amb l'element p, és a dir, l'element que representa un paràgraf.

L'etiqueta <p> marca l'inici del paràgraf, i es situa davant del text, al començament de la línia del mateix, i l'etiqueta </p> marca el final del paràgraf, i es situa darrere del punt i a part que el tanca.

<div class="primer_bloc">
  <p>28 de Juny</p>
</div>

Al treballar amb paràgrafs, recordeu:

• Sempre s'ha de tancar el final del paràgraf amb l'etiqueta </p>. Si no es fa d'aquesta manera, el document no serà vàlid.
• Cal evitar l'ús de l'etiqueta <br />, que correspon al salt de línia quan el que es vol és diferenciar visualment diferents paràgrafs en un document, ja que es perdria el significat semàntic del paràgraf.
• El salt de línia s'hauria de fer servir només quan el propi text ho requereixi, com podria ser en el cas d'una nova línia d'un poema.===== Segon bloc: contingut de l'article =====

El segon bloc correspon a tres elements clarament diferenciats:

• Una imatge que iŀlustra el contingut de l'article
• La capçalera de l'article
• Una sinopsi de l'article

A la pràctica anterior ja heu treballat la forma de com incorporar una imatge a l'estructura HTML:

<div class="segon_bloc">
  <img src="imatges/imatge1.jpg" alt="imatge de l'article"  />
</div>

En canvi, la capçalera de l'article vindrà representada per un nou element, l'element h o nivells de secció.

Les seccions o capçaleres tenen la funció d'estructurar o dividir el text del document segons el seu contingut, ordenant-lo de manera lògica i en diferents nivells d'importància.

Segons el W3C, les capçaleres haurien de reflectir l'estructura lògica del document; no haurien de ser utilitzades simplement per afegir èmfasi o per canviar la mida de la lletra.

En HTML estan definits fins a sis nivells de capçalera, ordenats pel seu grau d'importància de <h1> fins a <h6>. El nivell <h1> és el que té un grau d'importància alt i el nivell <h6> el que té una importància menor.

Preneu com a exemple l'estructura d'un llibre. El primer nivell (<h1>) seria el títol, en el nivell <h2> trobarieu els títols dels diferents capítols (un nivell per sota del títol), en el nivell <h3>, sempre sota d'un nivell <h2>, trobaríeu diferents apartats de cada capítol,…

En aquest cas, empreu la secció de nivell dos per a la capçalera de l'article:

<h2>Lorem Ipsum dolor</h2>

Per últim, adjunteu el paràgraf corresponent a la sinopsi de l'article:

<div class="segon_bloc">
  <img src="imatges/imatge1.jpg" alt="imatge" width="589" height="200" />
  <h2>Lorem Ipsum dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pretium rutrum ligula. Mauris ac massa vestibulum nisl facilisis viverra. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Suspendisse fermentum. Vivamus quis mi. Morbi urna.</p>
</div>

Veieu el resultat al navegador del bloc article:

El tercer i últim bloc correspon a la presentació de la llista de descriptors de l'article i un enllaç a la pàgina que conté la totalitat del contingut de l'article.

Ja heu treballat amb llistes i enllaços, per tant no us ha de resultar estrany la estructura següent corresponent al tercer bloc de l'article.

<div class="tercer_bloc">
  <ul>
   <li><a href="descriptors.html?q=lorem">Lorem</a></li>
   <li><a href="descriptors.html?q=ipsum">Ipsum</a></li>
   <li><a href="descriptors.html?q=dolor">Dolor</a></li>
  </ul>
  <p><a href="article.html">Read full article</a></p>
</div>

Comproveu que l'estructura de l'arxiu index.html és correcte:

   <div class="article"> <!-- inici article -->
	<div class="primer_bloc">
	  <p>28 de Juny</p>
	</div>
	<div class="segon_bloc">
	  <img src="imatges/imatge1.jpg" alt="imatge" width="589" height="200" />
	  <h2>Lorem Ipsum dolor</h2>
	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pretium rutrum ligula. Mauris ac massa vestibulum nisl facilisis viverra. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Suspendisse fermentum. Vivamus quis mi. Morbi urna.</p>
	</div>
	<div class="tercer_bloc">
	 <ul>
	   <li><a href="descriptors.html?q=lorem">Lorem</a></li>
	   <li><a href="descriptors.html?q=ipsum">Ipsum</a></li>
	   <li><a href="descriptors.html?q=dolor">Dolor</a></li>
	 </ul>
	 <p><a href="article.html">Read full article</a></p>
	</div>
   </div> <!-- final article -->