Listas anidadas #html

Las listas anidadas son las listas internas en el interior de una lista principal.

A la hora de crear listas anidadas, es fundamental tener en cuenta que no se debe cerrar la etiqueta <li> hasta no haber cerrado la lista interna.

Para agregar una lista anidada se procederá de la siguiente forma:

  • Se debe abrir un elemento de la lista principal (etiqueta <li>).
  • Escribir el texto que precederá a la lista anidada.
  • Finalmente, añadir las etiquetas de la lista interna, cerrando el elemento de la lista principal justo a continuación.

Vamos a verlo con un ejemplo, abre un documento nuevo con Gedit y escribe lo siguiente:

Abre el documento html con el navegador, obtendrás lo siguiente:

ACTIVIDAD
Confecciona una página web con el título “Listas anidadas” que muestre las asignaturas que tienes durante la semana con las siguientes condiciones:

  • Pon como título de primer nivel (h1) y centrado “Horario”.
  • Los días de la semana tienen que ir en negrita.
  • Las asignaturas tienen que ir en cursiva.
  • La lista de días tiene que ser “no ordenada” y la de asignaturasordenada“.

Guarda el documento con extensión html y observa el resultado abriéndolo con el navegador.

Anuncios

Listas no ordenadas #html

Una lista no ordenada como su nombre indica no utiliza un número delante de cada items sino un pequeño símbolo gráfico.

La forma de implementar este tipo de listas es idéntico a las listas ordenadas.

La lista no ordenada se representa por la etiqueta <ul> y </ul>.

Veamos con un ejemplo una lista ordenada para conocer su sintaxis:

Abre el documento html con el navegador, obtendrás lo siguiente:

Resumiendo:

  • La lista empieza por la marca <ul> y su correspondiente marca de cerrado es </ul>.
  • En su interior cada elemento tiene la marca de comienzo <li> y la marca de fin de item </li>.

Para recordar el nombre de estos elementos HTML:

  • <ul> viene de la palabra unordered list.
  • <li> viene de la palabra list item.

 

ACTIVIDAD
Confecciona una página web de título “Lista no ordenada” que muestre 5 periódicos nacionales con las siguientes condiciones:

  • Pon como título de primer nivel “Periódicos nacionales”.
  • Lista no ordenada de los periódicos.
  • Un periódico debe tener su letra en negrita y otro en cursiva.

Guarda el documento con extensión html y observa el resultado abriéndolo con el navegador.

Listas ordenadas #html

Una lista es una estructura que engloba un conjunto de elementos que la componen. Será ordenada si se quiere establecer un orden concreto.

Ejemplo de lista ordenada:

  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento

La lista ordenada se representa por la etiqueta <ol> y </ol> y los elementos que componen la lista se representan por la etiqueta <li> y </li>.

Veamos con un ejemplo una lista ordenada para conocer su sintaxis: Sigue leyendo

Formatos de texto #html

NEGRITA

Podemos escribir texto en negrita incluyéndolo dentro de las etiquetas <b> y </b>. Esta misma tarea es desempeñada por <strong> y </strong> siendo ambas equivalentes. Preferentemente usar las primeras por simple razón de esfuerzo.

Escribiendo un código de este tipo:

Obtenemos este resultado:

CURSIVA

El HTML nos propone también para la cursiva el par de etiquetas: <i> y </i>. Sigue leyendo

Encabezados #html

Existen etiquetas para definir párrafos especiales, formateados como títulos. Son los encabezados o header en inglés.

Como decimos, son etiquetas que formatean el texto como un titular, para lo cual asignan un tamaño mayor de letra y colocan el texto en negrita.

Hay varios tipos de encabezados, que se diferencian en el tamaño de la letra que utilizan. La etiqueta en concreto es la <h1>, para los encabezados más grandes, <h2> para los de segundo nivel y así hasta <h6> que es el encabezado más pequeño.

Los encabezados implican también una separación en párrafos, así que todo lo que escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se colocará en un párrafo independiente.

Podemos ver cómo se presentan algunos encabezados a continuación.

Se verá de esta manera en la página:

Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Sigue leyendo

Párrafos y saltos de línea #html

Para definir los párrafos nos servimos de la etiqueta <p>  y </p> que introduce un salto y deja una línea en blanco antes de continuar con el resto del documento.

Para realizar un simple retorno de linea usaremos la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>). No dejamos una línea en blanco sino que solo cambiamos de línea.

Vamos a crear una página que muestre nuestros datos de la siguiente forma:

El código HTML que tendríamos que escribir en Gedit sería: Sigue leyendo