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>
É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>
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>
<em><small>Texto enfatizado más pequeño</em></small>
¡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
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: y algo más texto en una nueva línea
<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 />
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>
- Un elemento de lista
- Otro elemento de lista
<ol>
<li>Primer elemento de lista</li>
<li>Segundo elemento de lista</li>
</ol>
- Primer elemento de lista
- 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>
No hay comentarios:
Publicar un comentario