Utiliza Google desde este blog

Google En la WebEn el Blog
kostenlose uhren relojes web

martes, 1 de marzo de 2016

Clase 6 Informática - Taller 3

Etiquetas para realizar listas en HTML

<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

&lt; Muestra un menor que (>)
&gt; 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 &lt;ol&gt; y cada elemento de la lista empieza con la etiqueta &lt;li&gt;.
</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 &lt; y &gt;
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 &lt;ul&gt; y cada elemento que conforma la lista empieza con la etiqueta &lt;li&gt; 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 &lt;dt&gt; y la definición de ese término &lt;dd&gt;.

 
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.

No hay comentarios:

Publicar un comentario

Regístrate y realiza tu comentario