Vamos a comenzar hablando sobre las listas. HTML permite implementar 3 tipos claramente diferenciados:
- Listas ordenadas: permiten listar elementos de manera numerada. Los elementos de la lista deberán encontrarse entre las etiquetas <ol> y </ol> y cada elemento entre las etiquetas <li> y </li>. Para recordarlo mejor podemos fijarnos en que ol son las siglas de ordered list. Veamos un pequeño ejemplo:
- Listas desordenadas: puedes ver un ejemplo de lista desordenada en la forma en la que estoy mostrando los tipos de lista. También reciben el nombre de listas con viñeta a causa del redondel negro que aparece al lado de cada elemento. Funcionan de una forma muy similar a la anterior con la diferencia de que toda la lista tiene que encontrarse entre las etiquetas <ul> y </ul>, siendo ul las siglas de unordered list. Nuevamente cada elemento tiene que ir entre las etiquetas <li> y </li>. Ya veremos como hacerlo con CSS, pero si queréis que en alguno de los puntos de vuestra lista desordenada no aparezca la viñeta (puntito redondeado) tendréis que escribir:
<li style="list-style-type: none; text-align: justify;">
- Lista de definiciones: el funcionamiento de estas listas es ligeramente diferente. Se utilizan para definir los elementos listados. Toda la lista tiene que ir entre las etiquetas <dl> y </dl>, cuyas letras coinciden con las iniciales de definition list. Cada elemento que queramos definir tendrá que estar encorchetado entre las etiquetas <dt> y </dt> (definition term). A su vez cada definición tendrá que ir entre <dd> y </dd>.
- Listas anidadas: HTML nos permite crear también listas anidadas. Es decir, dentro de un elemento <li> podremos crear una sublista. Veamos cómo hacerlo:
Una vez vistos todos los tipos de lista con los que HTML nos permite trabajar, vamos a hablar sobre los enlaces. Podemos distinguir varios en función de hacia donde apunte el enlace, pero en cualquier caso siempre emplearemos las etiquetas <a> y </a>. Entre dichas etiquetas colocaremos el texto o la imagen que queremos utilizar como enlace. Para especificar la dirección del enlace utilizaremos el atributo de nombre href. Por ejemplo, mediante el siguiente código generamos una página con el título de cabecera "Enlaces" y un enlace a "http://mememtoslab.blogspot.com" bajo el nombre "El Laboratorio de mememto"...
Como valor del atributo de nombre href tenemos que colocar la dirección URL a la que queremos dirigir nuestro enlace. En función de hacia donde queramos dirigir al usuario de la web que pinche sobre el enlace distinguimos varias opciones:
- A otra página distinta: el valor del atributo href deberá contener la dirección absoluta a la que queremos enlazar el texto entre las etiquetas <a> y </a>.
- A páginas de nuestro propio servidor (descendientes): podremos introducir como valor de href una dirección relativa. Si por ejemplo estamos en www.midominio.com/index.html y queremos crear un enlace en la página index.html que enlace a una página de nombre pagina1.html ubicada dentro de la carpeta paginas, podríamos escribir:
-
<a href="paginas/pagina1.html">Página 1</a>
- A páginas de nuestro propio servidor (predecesores): la situación es similar a la del caso anterior, salvo que en esta ocasión lo que queremos es crear un enlace en pagina1.html hacia index.html. Para ello tendremos que utilizar:
<a href="../index.html">Inicio</a>
- A secciones de nuestra propia página: podremos crear enlaces a secciones o títulos de nuestra propia página cuando la extensión de este sea larga. Es más, es recomendable hacerlo. Podemos ver un ejemplo de cómo funciona esto, en cualquier artículo de Wikipedia. Tras una pequeña introducción, aparece un índice con enlaces a contenidos de la propia página. Para hacer esto primero tenemos que tener claro a qué secciones de nuestra página queremos enlazar. Generalmente se suelen realizar enlaces a cabeceras de algún nivel (<hX>). En la cabecera, supongamos una cabecera de nivel dos (h2) tendremos que especificar un valor para el atributo id:
-
<h2 id="cabecera_nivel_2">Título 2</h2>
- Por su parte, a la hora de crear el enlace tendremos que tener en cuenta el valor de identificación de la cabecera y escribir:
-
<a href="#cabecera_nivel_2">Título 2</a>
- A secciones de otras páginas web: el funcionamiento es bastante similar. En primer lugar, tenemos que conocer el valor del atributo id de la sección a la que queremos dirigir nuestro enlace. Imaginemos que dicho valor es el mismo que el de antes, esto es "cabecera_nivel_2" y que la página a la que queremos enlazar es www.midominio.es/index.html. Para crear nuestro enlace tendremos que escribir:
-
<a href="http://www.midominio.es/index.html#cabecera_nivel_2">Título 2</a>
- A una dirección de correo: crear un enlace a una dirección de correo es bastante sencillo y la pauta es similar a las anteriores. Para crear un enlace con el texto "Mandar Correo" que nos permite escribir correos a la dirección ficticia mememto@mememtoslab.com tendremos que escribir:
-
<a href="mailto:mememto@mememtoslab.com">Mandar Correo</a>
- A un archivo para descargarlo: el procedimiento es el mismo que cuando apuntamos a un archivo con extensión html. Nuestro navegador abre estos archivos por defecto, así que no tenemos porque descargar cada archivo html que queremos ver en nuestro navegador. El navegador lo hace automáticamente. Si el archivo al que apunta el enlace tiene cualquier otra extensión el navegador tratará de descargarlo.
Para finalizar con los enlaces y de paso con la entrada actual, vamos a hablar sobre el atributo de nombre target de la etiqueta <a>. Sus posibles valores están predefinidos y necesariamente deberemos igualarlo a "_blank", "_self", "_parent", "_top" ó "framename". La primera opción (_blank) permite que el valor de href sea abierto en una nueva ventana o pestaña de nuestro navegador. _self es la opción por defecto y por lo tanto la que tendrá lugar sino especificamos un valor distinto para target. Permite que el enlace se abra en el mismo frame (ventana o pestaña) en el que fue creado. El resto de valores posibles está en desusos ya que están relacionados con los frames. Actualmente es difícil ver alguna página distinta de la API de Java o la API de Android que trabaje con frames, así que mientras nos sepamos los dos primeros perfecto.
Eso es todo de momento, saludos y hasta la siguiente entrada!!!
| OBJETIVOS | Vamos a ver las etiquetas necesarias para crear listas y enlaces en nuestras páginas web. |
| DIFICULTAD | Fácil |
| REQUISITOS | Tener en cuenta lo que hemos visto con anterioridad. |
| CONSEJOS | Sino entendéis algo, preguntad o toquetead hasta que deis con la solución. Es realmente sencillo hacer páginas web, por lo menos páginas web estáticas y simples. |
| PRÓXIMAMENTE | Seguiremos viendo elementos básicos de HTML y etiquetas importantes. Más adelante comprobaremos cómo añadir fragmentos de HTML a nuestras entradas e introduciremos alguna de las herramientas más utilizadas para crear páginas web. Cuando hablemos de CSS veremos cómo cambiar la fuente y el color del texto junto a varias opciones a mayores similares. |
No hay comentarios:
Publicar un comentario