<ol> Inicio de listas numeradas
<li> Cada uno de los términos de una lista numerada
</ol> Final de lista numerada
<ul> Inicio de lista con viñeta o sin ordenar
<li> Cada uno de los items o términos de la lista
</ul> Final de lista con viñetas o sin ordenar
<dl> Inicio de listas de glosario o definición
<dt> Cada uno de los términos del glosario
<dd> Cada una de las definiciones del glosario
</dl> Final de lista de glosario o definición
Códigos especiales para HTML
< Muestra un menor que (>)
> Muestra un mayor que (>)
Actividad en clase
1. Ingrese a Bloc de notas y digite el siguiente código:
<html>
<head><title>Listas en HTML</title></head>
<body>
<h1 align=center>Manejo de listas en HTML</h1>
<p align=justify>Además de los encabezados y los párrafos, quizá el elemento HTML más común sea una lista. El lenguaje HTML incorpora entre sus etiquetas, unas para listas con viñetas sencillas y también para listas numeradas, sin embargo, para dar más vistosidad a las páginas, se suelen emplear también imágenes que se colocan delante de cada párrafo. Aquí se van a explicar todos estos casos.
<p align=justify>La lista debe estar rodeada por las etiquetas correspondientes de apertura y de cierre y cada elemento de la lista tiene su propia etiqueta.
<h2>Ejemplo de lista numerada</h2>
<p align=justify>Entre varias, las tres clases de listas más utilizadas en HTML son:
<ol>
<li>Listas numeradas, u ordenadas.
<li>Listas con viñetas, o sin ordenar.
<li>Listas de glosario o definición.
</ol>
<p align=justify>La lista que acabamos de utilizar es una <strong>lista numerada</strong> porque se trabaja con la etiqueta <ol> y cada elemento de la lista empieza con la etiqueta <li>.
</body>
</html>
2. Guarde el código con el nombre Listas – apellido.html y ejecute la página para ver el funcionamiento de las nuevas etiquetas y de los códigos < y >
3. Edite el código continuando la página con lo siguiente (recuerde que va antes de </body>):
3. Edite el código continuando la página con lo siguiente (recuerde que va antes de </body>):
<h2>Ejemplo de lista con viñetas:</h2>
<p>La Divina Comedia de Dante consta de tres libros:
<ul>
<li type="circle">El Infierno
<li type="square">El Purgatorio
<li type="disc">El Paraíso
</ul>
<p align=justify>Las listas con viñetas o sin ordenar, se trabajan con la etiqueta <ul> y cada elemento que conforma la lista empieza con la etiqueta <li> además podemos utilizar el atributo <em>type</em>, el cual permite modificar la apariencia de la viñeta entre 3 estilos diferentes.
4. Guarde nuevamente y verifique el correcto funcionamiento del código.
5. Inserte ahora esta otra parte del código:
<h2>Ejemplo de lista de glosario o definición</h2>
<p align=justify >Algunos términos importantes en Internet son:
<dl>
<dt>Arpanet<dd>Es el ancestro de Internet. Fue un proyecto creado por el Departamento de Defensa de los Estados Unidos en 1969 como experimento de conexión entre el Departamento de Defensa y los contratantes de proyectos de investigación militar.
<dt>Browser<dd>Son los programas que se utilizan para navegar en la Web, los más populares hoy en día son Chrome, Mozilla y Safari.
<dt>Hipertexto<dd>Un sistema de escribir y presentar el texto como un documento que contiene vínculos con otros documentos relacionados.
<dt>Home Page<dd>Página primaria o principal en Web de un individuo, una aplicación de software o una organización que muestra los nexos o vínculos con otras páginas.
<dt>Password<dd>Contraseña o palabra clave para entrar en su e-mail o a su conexión de Internet.
</dl>
<p align=justify >El anterior fue un ejemplo de listas de glosario, también llamadas listas de definiciones, son ligeramente diferentes a las demás ya que cada elemento de la lista de glosario tiene dos partes: el término <dt> y la definición de ese término <dd>.
6. Recuerde que lo último que debe quedar son las etiquetas </body> y </html>. Guarde los cambios y actualice la página para observar y corregir si es necesario.
7. Suba la página web creada a la carpeta Informática de su Google Drive, en una carpeta nueva llamada Taller 3 y entregue su trabajo, con los respectivos apuntes, para su evaluación.
7. Suba la página web creada a la carpeta Informática de su Google Drive, en una carpeta nueva llamada Taller 3 y entregue su trabajo, con los respectivos apuntes, para su evaluación.
No hay comentarios:
Publicar un comentario
Regístrate y realiza tu comentario