Listas, Enlaces, HTML!
¡Hola a todos! se que tarde un poco en subir este post pero es que estoy preparando uno muy bueno :). En esta entrada hablaré de como hacer listas en HTML (ordenadas, no ordenadas, y de descripción), y de como hacer enlaces. En HTML son importantes tanto las listas como los enlaces, Empecemos...
Listas
El HTML se utilizan en total 3 tipos de listas, las listas ordenadas, las listas no ordenadas, y las listas de descripción, para cada tipo de lista se utilizan etiquetas especiales:- Listas no ordenadas:
En este tipo de lista no importa realmente el orden de sus elementos, Se utiliza la etiqueta <ul> (unordered list) para definir la lista, y la etiqueta <li> (list item) para definir cada elemento. Ejemplo:
<ul>
<li> Elemento 1 </li>
<li> Elemento 2 </li> ==========>
<li> Elemento 3 </li>
</ul>
Es posible cambiar el tipo de viñeta a discos, circulos, o cuadrados, esto se hace colocando como atributo en la etiqueta <ul> o <li>: type= disc/ circle/ square. Sin embargo esto ya no se usa, actualmente se utiliza CSS.
- Listas ordenadas:
En estas listas el orden de los elementos si importa, cada elemento viene indicado por números o letras, utiliza la etiqueta <ol> (ordered list) para definir la lista, y al igual que el tipo de lista anterior, utiliza <li> para definir cada elemento. Ejemplo:
<ol>
<li> Elemento 1 </li>
<li> Elemento 2 </li> ==========>
<li> Elemento 3 </li>
</ol>
Este tipo de lista puede hacer uso de varios atributos: En HTML 4 y 5 puede usar "start" con el cual especificas el valor por el cual deseas empezar a enumerar; y "type" con el cual puedes indicar el tipo de numeración (letras, números romanos...). En HTML 5 aparece el atributo "reversed" que permite invertir la numeración, pasando a ser el primer elemento escrito el ultimo numerado.
Lista de descripción
Estas listas no utilizan ningún tipo de numeración o viñeta, si no que identifica a cada elemento añadiendo un margen izquierdo, su principal uso es para definir una lista de términos con ninguna o varias descripciones por cada termino. Emplea la etiqueta <dl> (description list) para definir la lista, para definir cada termino se utiliza la etiqueta <dt>, y para cada descripción de un termino se utiliza la etiqueta <dd>. Ejemplo:
<dl>
<dt> Elemento 2 </dt> ==========>
<dd> Descripcion 2.1 </dd>
<dd> Descripcion 2.2 </dd>
<dd> Descripcion 2.1 </dd>
<dd> Descripcion 2.2 </dd>
</dl>
Cabe destacar que puedes hacer usos de varios tipos de listas a la vez, creando así listas anidadas.
Enlaces
La web se forma por millones de nodos interconectados por millones de enlaces, los enlaces son uniones entre nodos que facilitan la lectura secuencial o no secuencial por los nodos del documento.
Los nodos o secciones son los que contienen la información disponible para el usuario. Es por esto que los enlaces son tan importantes en el HTML, y la Web. Existen dos tipos de enlaces: Enlace intradocumental y enlace extradocumental.Enlace intradocumental:
También conocidos como hipervínculos locales, son aquellos enlaces que nos llevan a una posición o punto dentro del mismo documento en el que se define el enlace, con esta técnica los usuarios pueden acceder de una forma más rápida a la información. Si alguna vez has visitado monografías o wikipedia, te darás cuenta de que se utilizan este tipo de enlaces dentro de sus artículos. En HTML se utiliza la etiqueta <a> para definir un enlace. Para poder crear enlaces de este tipo debemos hacer uso de "anclajes", los cuales son puntos a los cuales saltaremos con los enlaces. Un enlace intradocumental luce de la siguiente forma:
<a href= "#nombre_del_anclaje"> enlace </a>
El destino o anclaje del enlace dentro del mismo documento puede ser un párrafo "<p>", una lista "<ol>, <ul>, ...", un encabezado "<h1,h2,...>", otro enlace, etc. Siempre y cuando se le coloque como atributo: id= "nombre_del_anclaje", notese que en el anclaje no se utiliza la almohadilla "#". Ejemplo:
<p id="nombre_del_anclaje"> Este es un parrafo </p>
<h1 id="nombre_del_anclaje"> Este es un encabezado </h1>
"" ""
Pueden haber varios enlaces a un mismo anclaje, pero solo puede haber un anclaje para cada enlace.
Enlace extradocumental:
Bueno, el nombre nos da una pista, estos son los enlaces que nos llevan a otro documento, es decir, a cualquier lugar fuera del sitio actual. Igual se utiliza la etiqueta <a>, pero se diferencia del anterior en el tipo de enlace que se utiliza, pueden ser enlaces absolutos, o rutas a ficheros. una URL se compone de los siguientes elementos:
<servicio>:<usuario>:<contraseña>@<host>:<puerto>/<ruta>/<recurso>
Ejemplo:
Etc, puede ser un correo, una pagina,...
Este tipo de enlaces luce de la siguiente manera:
<a href="pagina.html"> Este es un link </a>
En caso de quererse hacer un enlace hacia un punto preciso en otro documento:
<a href="pagina.html#nombre_del_anclaje"> Este es un link </a>
Y el anclaje en la pagina de destino debería tener la misma estructura que las que les mostré anteriormente. Espero que les haya gustado el post :) nos vemos en el próximo.
Comentarios
Publicar un comentario