sábado, 11 de mayo de 2013

Crear Listas Anidadas en HTML

Las Listas Anidadas, son un conjunto de las diferentes listas que hay en HTML que son: Listas Ordenadas, Listas Desordenadas y Listas de Definición; en el cual estas son definidas dentro de la etiqueta "body".
En este tutorial les enseñare como crear listas anidadas en html, antes de ello les explicaré la estructura de las listas que hay en HTML, tal como se muestra a continuación:

Estructura de Listas Ordenadas:
<ol>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Estructura de Listas Desordenadas:

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Estructura de Listas de Definición:
<dl>
  <dt>...
  <dd>......
  <dt>...
  <dl>......
  <dt>...
  <dl>......
</dl>

Nota: Los puntos suspensivos son una referencia del contenido.

Herramienta Software:

- Notepad (Bloc de Notas) o Notepad++

- Dreamweaver, etc.

1° En primer lugar abra uno de los software ya mencionados e ingrese el siguiente código:

<html>
<head>
<title>Listas Anidadas</title>
</head>
<body>
<h1>Listas Anidadas - By SPaRk</h1>
<hr>
<ul>
<li><strong>Metodologías</strong>
  <ul>
    <li>RUP</li>
    <li>ICONIX</li>
    <li>XP</li>
    <li>SCRUM</li>
    <li>EUP</li>
    <li>CDM</li>
    <li>AUP</li>
  </ul>
</li>
<li><strong>Lenguajes de Programación</strong>
 <ol>
   <li>JAVA</li>
   <li>PHP</li>
   <li>ASP</li>
   <li>PERL</li>
   <li>C++</li>
   <li>PHYTON</li>
   <li>RUBY</li>
 </ol>
</li>
<li><strong>Gestores de Base de Datos</strong>
  <dl>
    <dt>SQL Server
                <dd>Licenciado, Propiedad de <em>Microsoft</em>
                <dt>MySQL
                <dd>Libre
                <dt>ORACLE
                <dd>Licenciado, Propiedad de la <em>Sun Mycrosystem</em>
  </dl>
</li>
</ul>
<body>
</html>

2° Luego de ingresar el código, guarde el archivo con extensión “.html” y obtendrá una hoja html con el contenido de Listas Anidas, luego abra la hoja html creada y obtendrá el contenido de esta ,tal como se muestra en la imagen:
Nota: Cualquier consulta comentar o visitar la página de Facebook para resolver sus dudas…

Autor: SPaRk.

No hay comentarios:

Publicar un comentario

Google Maps