Colegio Nacional de Educación Profesional Técnica
Lic. "Jesus Reyes Heroles"
Nombre del Alumno: José Guadalupe Martínez Cruz
Módulo: Diseño y Elaboración de Páginas Web
Grupo: INFO-604.
Práctica: N° 4.
Práctica: N° 4.
Introducción
En esta práctica se crean listas para ordenar y/o agrupar la información de un modo jerárquico, dependiendo de su importancia una lista va dentro de otra, es decir, se anidan.
Código HTML
El código que se genero para el archivo de la práctica es el siguiente:
<html>
<head>
<title>Practica 5</title>
</head>
<body>
<h1>MENU</h1>
<ul>
<li>Inicio</li>
<li><b>Noticias</b>
<ul>
<li><a href="#">Recientes</a></li>
<li><a href="#"><b>Mas leidas</b></a></li>
<li><a href="#">Mas valorada</a></li>
</ul></li>
<li>Articulos
<ol>
<li><b>XHTML</b></li>
<li>CSS</li>
<li>JavaScript</li>
<li>Otros</li>
</ol></li>
<li>Contacto</li>
<dl>
<dt><i>Email</i></dt>
<dd><b>nombre@direccion.com</b></dd>
<dt><i>Telefono</i></dt>
<dd> 900 900 900</li></dd>
<dt><i>Fax</i></dt>
<dd>900 900 900</dd>
</dl>
</ul>
</body>
</html>
Explicación del código <head>
<title>Practica 5</title>
</head>
<body>
<h1>MENU</h1>
<ul>
<li>Inicio</li>
<li><b>Noticias</b>
<ul>
<li><a href="#">Recientes</a></li>
<li><a href="#"><b>Mas leidas</b></a></li>
<li><a href="#">Mas valorada</a></li>
</ul></li>
<li>Articulos
<ol>
<li><b>XHTML</b></li>
<li>CSS</li>
<li>JavaScript</li>
<li>Otros</li>
</ol></li>
<li>Contacto</li>
<dl>
<dt><i>Email</i></dt>
<dd><b>nombre@direccion.com</b></dd>
<dt><i>Telefono</i></dt>
<dd> 900 900 900</li></dd>
<dt><i>Fax</i></dt>
<dd>900 900 900</dd>
</dl>
</ul>
</body>
</html>
En el código anterior se ocupo la etiqueta de titulo (heading) “<h1>” con su etiqueta de cierre”</h1>” para el titulo que es MENU, posteriormente se creo la primera lista que es desordenada (su viñeta es un punto) y su etiqueta de inicio es “<ul>” y se cierra con “</ul>”;dentro de la esas etiquetas van las viñetas que se determinan con “<li>” se coloca el contenido de la viñeta y se cierra con “</li>” .
En la segunda viñeta que es Noticias se le anido otra lista desordenada y sus viñetas tienen un hipervínculo (etiqueta “<a href=””>&</a>”) con una referencia vacía, la cual no lleva a ningún lado; después de cerrar tal lista se añadió la tercera viñeta de la lista, que es la de “Artículos”, dentro de ella se coloco la lista ordenada que se determina como “<ul>”“<li>” …“</li>” “</ul>” pero se coloca como “<ol>”“<li>” …“</li>” “</ol>” , solo se cambia ul por ol.
Por ultimo, en la 4ª viñeta se coloca un lista de definición, la cual se inicia con “<dl>” y se cierra con “</dl>”, se colocan sus viñetas con”<dt> & </dt>” y su definición o descripción va con las etiquetas”<dd> & </dd>” que se observan con una sangría mayor a <dt></dt>.
El resultado de loa práctica es el siguiente:
Conclusión
Se ocupan diferentes tipos de etiquetas para determina diferente tipo de listas, como lo son las ordenadas “<ol>”“<li>”viñeta“</li>” “</ol>” , desordenadas “<ul>”“<li>” viñeta“</li>” “</ul>” y de definición “<dl>”“<dt>” termino “</dt>” “<dd>” definición “</dd>” “</dl>”; las listas son para agrupar la información y anidándolas se muestra la jerarquía que hay en las diferentes viñetas de las listas.
No hay comentarios:
Publicar un comentario