Identificarse | Registrarse | FAQ
Anonymous

Lección 6: Más elementos

¿Has conseguido crear algunas páginas tú solo? Si no es así, aquí tienes un ejemplo:

	
	<html>

	  <head>
	  <title>Mi sitio web</title>
	  </head>

	  <body>
	  <h1>Encabezado de nivel 1</h1>
	  <p>texto, texto, texto, texto</p>
	  <h2>Encabezado de nivel 2</h2>
	  <p>texto, texto, texto, texot</p>
	  </body>
	  
	</html>
	
	

¿Y ahora qué?

Pues ha llegado el momento de aprender siete nuevos elementos.

Del mismo modo que enfatizamos el texto al incluirlo entre la etiqueta de inicio <em> y la etiqueta de cierre </em>, se puede acentuar más ese énfasis usando la etiqueta de inicio <strong> y la etiqueta de cierre </strong>.

Ejemplo 1:

<strong>Énfasis acentuado</strong> 

y se verá así en el navegador:

Énfasis acentuado.

Asimismo, puedes hacer que el texto sea más pequeño usando small:

Ejemplo 2:

<small>Este texto tendría que ser un poco más pequeño.</small> 

y se visualizará así en el navegador:

Este texto tendría que ser un poco más pequeño.

¿Puedo usar varios elementos a la misma vez?

Sí, se pueden usar fácilmente varios elementos a la vez siempre que evitemos elementos superpuestos. Esto lo entenderemos mejor con un ejemplo:

Ejemplo 3:

Si quieres que el texto aparezca enfatizado y más pequeño, se debe hacer de la siguiente manera:

<em><small>Texto enfatizado más pequeño</small></em> 

y NO de la siguiente manera:

<em><small>Texto enfatizado más pequeño</em></small> 

La diferencia estriba en que, en el primer ejemplo, cerramos en último lugar el elemento que abrimos primero. De este modo evitamos confundir al navegador y a nosotros mismos.

¡Más elementos!

Como mencionábamos en la lección 3, existen una serie de elementos que se abren y cierran con la misma etiqueta. Estos elementos conocidos como elementos vacíos no están relacionados con un pasaje específico del texto sino que son más bien etiquetas aisladas. Un ejemplo de dichas etiquetas es <br /> que crea un salto de línea forzado.

Ejemplo 4:

Algo de texto <br />y algo más de texto en una nueva línea 

que se visualizará así en el navegador:

Algo de texto
y algo más texto en una nueva línea

Fíjate en que la etiqueta parece una forma contraída de la etiqueta de inicio y de la etiqueta de cierre con un espacio en blanco y una barra al final: <br />.

Otro elemento que se abre y cierra con la misma etiqueta es <hr />, que se usa para trazar una línea horizontal ("hr" es la abreviatura de "horizontal rule"):

Ejemplo 5:

<hr /> 

que se verá así en el navegador:


Otros ejemplos de elementos que necesitan tanto la etiqueta de inicio como de cierre -la mayoría de elementos cumplen esta norma- son: ul, ol y li. Estos tres elementos se usan para crear listas.

ul is la forma abreviada de "unordered list" (es decir, lista no ordenada) e inserta viñetas para cada elemento. ol es la abreviatura de "ordered list" (es decir, lista ordenada) y numera cada elemento de la lista. Para crear elementos de lista use la etiqueta li ("list item", o sea, elemento de lista). Parece algo confuso, ¿no? Veamos, entonces, algunos ejemplos:

Ejemplo 7:


	<ul> 
	  <li>Un elemento de lista</li> 
	  <li>Otro elemento de lista</li> 
	</ul> 

que se verá así en el navegador:

  • Un elemento de lista
  • Otro elemento de lista

Ejemplo 8:


	<ol>
	  <li>Primer elemento de lista</li> 
	  <li>Segundo elemento de lista</li> 
	</ol> 

que se visualizará así en el navegador:

  1. Primer elemento de lista
  2. Segundo elemento de lista

¡Uf! ¿Eso es todo?

De momento, sí. Una vez más, experimenta y crea tus propias páginas usando alguno de los siete nuevos elementos que acabas de aprender en esta lección:


	<strong>Énfasis más fuerte</strong> 
	<small>Texto pequeño</small> 
	<br />Salto de línea 
	<hr />Línea horizontal 
	<ul>Lista sin ordenar</ul> 
	<ol>Lista ordenada</ol> 
	<li>Elemento de lista</li> 


<< Lección 5: ¿Qué has aprendido hasta ahora?

Lección 7: Atributos >>