Comunidad de diseño web y desarrollo en internet

Etiquetas básicas

¡Disidente!
La Vida de Brian. Frente Popular de Judea, revolucionarios

Ahora que conocemos la estructura de un documento XHTML, aprenderemos las etiquetas básicas que nos permitan empezar a crear el contenido de nuestra página web: párrafos, saltos de línea, títulos, etc.

Párrafos

Los párrafos sirven para estructurar el contenido. En la web funcionan igual que en el Mundo Real™: contienen una o más frases relacionadas entre sí. Para crear un párrafo, metemos texto entre las etiquetas <p> y </p>. Un ejemplo:

<p>
Hola, me llamo Luke Skywalker y soy piloto
de una X-Wing en el Rogue Squadron. También
soy un Jedi del Lado Luminoso de la Fuerza.
Mis maestros han sido Yoda y Obi-Wan Kenobi.
</p>

Da igual insertar un salto de línea entre la etiqueta y el contenido, ya que será interpretado como un espacio en blanco.

Si pruebas ese ejemplo, te dará scuenta de que todo forma un párrafo y que el navegador pasa de los saltos de línea. Esto es correcto. Podrías haber puesto todo el párrafo en la misma línea y obtendrías el mismo resultado.

Saltos de línea

Hay veces que necesitamos forzar un salto de línea dentro de un párrafo. Para ello, usamos la etiqueta <br/>,así:

<p>
DarkChestofWonders<br/>
Seentroughttheeyes<br/>
Oftheonewithpureheart<br/>
Once,solongago.
</p>

Dark Chest of Wonders, de Nightwish, en el álbum Once.

Aunque estéticamente podamos obtener elmismo resultado mediante párrafos (con <p>) que saltos de línea de forma indiscriminada, hay que tener en cuenta que usar <br/> para separar párrafos es algo malvado, propio de una mente retorcida.

Los títulos (headings)

Los títulos nos sirven para agrupar información. Imaginemos la sección de enlaces de nuestra página. El título principal podría ser Mis links favoritos. Luego tendríamos los links clasificados por secciones, cada una de ellas bajo un subtítulo diferente: Blogs, Descargas y Videojuegos. Incluso podríamos tener subcategorías dentro de una misma sección, como por ejemplo RPG's, Aventuras Gráficas y Arcades.

Para conseguir esto, tenemos las etiquetas <hx> y </hx>,donde x es un número del 1 al 6. <h1> corresponde al título más importante y sólo debería haber uno por página. Veamos todo lo anterior en un ejemplo:

<h1>Mislinksfavoritos</h1>
<h2>Blogs</h2>
<!--blablabla-->
<h2>Videojuegos</h2>
<h3>RPG's</h3>
<!--blablabla-->
<h3>Arcades</h3>
<!--blablabla-->

Si ves el código anterior en un navegador, aparecerán los títulos más importantes de mayor tamaño que los menos importantes (pero el tamaño de cada título siempre puede cambiarse con CSS).

Citas

Existen tres etiquetas para poder escribir citas: <blockquote>, <q> y <cite>. Mientras que <blockquote> y <q> se usan para escribir la cita en sí (las frases), <cite> se emplea para marcar el origen (persona, libro, canción o lo que sea).

Entonces, ¿en qué se diferencian <blockquote> y <q>? Pues que <blockquote> está hecha para contener citas largas. Es decir, que dentro de un <blockquote> tendremos que poner párrafos. <q> funciona al revés, puesto que está pensada para escribir citas cortas. <q> va dentro de párrafos. La razón técnica es que <blockquote> es un elemento de bloque (block), mientras que <q> es inline, y un inline no puede estar "aislado".

Todo lo anterior puede resultar confuso, así que ahora toca un ejemplo clarificador:

<p>Aquí os dejo un fragmento de la canción
 <cite>Die for Rock 'n' Roll</cite>, de Dover:</p>
 
<blockquote>
 	<p>
 	Everybody danced (while)<br/>
 	I was lying on the floor<br/>
 	I was ready to die<br/>
 	for Rock 'n' Roll<br/>
 	</p>
/blockquote>

<p>Mi parte preferida es cuando dice lo de
<q>I was ready to die[...]</q>.</p>

Separadores horizontales

Los separadores horizontales (horizontal rules) han caído en desuso, ya que podemos conseguir bordes delimitadores muy cucos mediante estilos CSS. Pero como el saber no ocupa lugar, nos quedaremos con la etiqueta <hr />:

<h2>Los videojuegos</h2>
<p>Bla bla bla...</p>
<hr/>
<h2>Música</h2>
<p>Bla bla bla...</p>

Comentarios

Los comentarios son notitas que ponemos en el código fuente de una página, pero que no se muestran en pantalla. Para el navegador, son invisibles. Son útiles para indicar qué hacen ciertas partes del código. Para insertar un comentario, lo escribimos entre <!-- y -->. Ten en cuenta que el comentario tiene que estar en una sola línea.

<!-- Esto es un comentario -->

 

Información adicional

Contenido publicado bajo licencia Creative Commons. Belén Albeza (BenKo)

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.