Clase XLIV - 30/10/2015 - Html

de 28

Country / Tiempo Libre y Deportes | 20:25 | | 0 comentarios

Formularios

 HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar los
contenidos de los documentos y páginas web. Sin embargo, HTML también incluye elementos
para crear aplicaciones web. El estándar HTML/XHTML permite crear formularios para que los
usuarios interactúen con las aplicaciones web.

 Formularios básicos

 Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas: <form> y
<input>.


<html>
<head><title>Ejemplo de formulario sencillo</title></head>
<body>
<h3>Formulario muy sencillo</h3>
<form action="http://www.librosweb.es/maneja_formulario.php" method="post">
Escribe tu nombre:
<input type="text" name="nombre" value="" />
<br/>
<input type="submit" value="Enviar" />
</form>
</body>
</html>

 La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de texto,
listas desplegables) y la etiqueta <input> permite definir varios tipos diferentes de elementos
(botones y cuadros de texto).

Elementos de formulario

Los elementos de formulario como botones y cuadros de texto también se denominan "campos de formulario" y "controles de formulario".



Clase XLIII - 28/10/2015 - Cap- 20 Pressman

de 27

Country / Tiempo Libre y Deportes | 5:50 | | 0 comentarios




Clase XLII - 23/10/2015 - Html / Sesión de estudio

de 23

Country / Tiempo Libre y Deportes | 11:40 | | 0 comentarios

Revisión:  práctica de laboratorio.

 1 - Adaptar el sig. código para mostrar un listado general de los datos que a continuación se detallan:

 <html>
<head>
<title>Titulo página</title>
</head>
<body>

 <table style="border: 1px solid blue;" summary="Descripción de la tabla y su contenido" cellpadding= "20">

 <caption style="text-align: center; margin-bottom: 5px;">Título de la tabla</caption>

 <tr>
 <th scope="col">tiutlo col 1</th>
 <th scope="col">tiutlo col 2</th>
 <th scope="col">tiutlo col 3</th>
</tr>

 <tr> 
 <td  style="background-color: #D2F2F3;">contenido col 1, fila 1</td>
 <td  style="background-color: #73E2E8;">contenido col 2, fila 1</td>
 <td  style="background-color: #0ACAD5;">contenido col 3, fila 1</td>
</tr>

 <tr> 
 <td>contenido col 1, fila 2</td>
 <td>contenido col 2, fila 2</td>
 <td>contenido col 3, fila 2</td>
</tr>
<tr> 
 <td>contenido col 1, fila 3</td>
 <td>contenido col 2, fila 3</td>
 <td>contenido col 3, fila 3</td>
</tr>
</table>
</body>
</html>
Artículo 234-B
Combo Bronce
$ 245
Artículo 541-C
Combo Plata
$ 573

 Artículo 614-G
ComboOro
$ 810

 2. Agrega una hoja de estilo con reglas que permitan:

  • dar un borde azul a la tabla
  • separar cada columna por colores (usar tres tonalidades de azul claro)
  • centrar y resaltar el título general
3. Reemplazar la etiqueta table por el sig.  formato:

   <table style="caption-side: bottom" summary="Descripción de la tabla y su contenido" cellpadding="20">

La propiedad caption-side dispone de dos valores para controlar la posición vertical del título de la tabla: top es el valor por defecto y muestra el título antes de la tabla, mientras que bottom muestra el título después de la tabla.

 4. Ingresar a https://www.uv.es/jac/guia/tablaeje.htm. Interpretar cada ejemplo.

Clase XLI - 21/10/2015 - Html

de 20

Country / Tiempo Libre y Deportes | 11:13 | | 0 comentarios

Tablas avanzadas

 Algunas tablas complejas están formadas por más elementos que filas y celdas de datos. Así, es común que las tablas más avanzadas dispongan de una sección de cabecera,una sección de pie y varias secciones de datos. Además, también es posible agrupar varias columnas de forma lógica para poder aplicar estilos similares a un determinado grupo de columnas.


Las partes que componen las tablas complejas se definen mediante las etiquetas <thead>, <tbody> y <tfoot>.

La cabecera de la tabla se define con la etiqueta <thead>, el pie de la tabla se define mediante<tfoot>y cada sección de datos se define con una etiqueta <tbody>.

Cada tabla puede contener solamente una cabecera y un pie, pero puede incluir un número ilimitado de secciones.

Si se define una cabecera y/o un pie, las etiquetas <thead> y/o <tfoot> deben colocarse inmediatamente antes que cualquier etiqueta <tbody>.



El código HTML necesario para crear una tabla que hace uso de las etiquetas <thead>,<tbody>y<tfoot>es:

<html>
<head>
<title>Ejemplo de tabla avanzada</title>
</head>
<body>

<h3>Análisis de ventas</h3>

<table summary="Análisis de ventas anuales">
 <caption>Análisis de ventas anuales</caption>
 <thead>

 <tr>
 <th rowspan="2" scope="col">AÑO</th>
 <th colspan="4" scope="col">Expansión de ventas</th>
 </tr>

 <tr> 
<th scope="col">Producto A</th> 
<th scope="col">Producto B</th>
 <th scope="col">Producto C</th>
 <th scope="col">Producto D</th> 
</tr> 
</thead>

<tfoot>
 <tr>
 <th rowspan="2" scope="col">AÑO</th>
 <th scope="col">Producto A</th>
 <th scope="col">Producto B</th>
 <th scope="col">Producto C</th>
<th scope="col">Producto D</th>
 </tr>

 <tr> 
<th colspan="4" scope="col">Expansión de ventas</th>
 </tr>
 </tfoot>

<tbody> 
<tr>
 <th scope="row">N-3</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
 </tr>

<tr>
<th scope="row">N-2</th>
<td>3</td>
<td>5</td>
<td>8</td>
<td>4</td>
 </tr>

 <tr>
 <th scope="row">N-1</th>
<td>4</td>
<td>4</td>
<td>7</td>
<td>3</td>
 </tr>

 <tr>
 <th scope="row">N</th>
<td>5</td>
<td>7</td>
<td>6</td>
<td>2</td>
 </tr>

</tbody>
</table>
</body>

</html>

Aunque al principio resulta extraño, el elemento <tfoot> siempre se escribe antes que cualquier elemento <tbody> en el código HTML. De hecho, si la etiqueta <tfoot> aparece después de un elemento<tbody>, la página no se considera válida.

La etiqueta <tbody> permite realizar agrupaciones de filas, pero en ocasiones se necesitan agrupar columnas. Aunque su uso no es muy común, HTML define dos etiquetas similares para agrupar columnas:<col>y<colgroup>.

La etiqueta <col> se utiliza para asignar los mismos atributos a varias columnas de forma simultánea. De esta forma, la etiqueta <col> no agrupa columnas, sino que sólo asigna atributos comunes a varias columnas.


El códigoHTMLnecesario para crear  una tabla de ejemplo se muestra a continuación:

. . . 

<table summary="Análisis de ventas anuales"> 
<caption>Análisis de ventas anuales</caption>

<col style="width:10%;" /> 
<col style="width:30%;" />

<thead>
 <tr>

<th scope="col">AÑO</th>
 <th scope="col">Producto A</th>
 <th scope="col">Producto B</th>
<th scope="col">Producto C</th>
 <th scope="col">Producto D</th>
</tr> 

</thead>

<tbody>
<tr>
<th scope="row">N-3</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
 </tr>

 <tr>
 <th scope="row">N-2</th>
<td>3</td>
<td>5</td>
<td>8</td>
<td>4</td>
 </tr>

 <tr>
 <th scope="row">N-1</th>
<td>4</td>
<td>4</td>
<td>7</td>
<td>3</td>
 </tr>

<tr> 
<th scope="row">N</th>
<td>5</td>
<td>7</td>
<td>6</td>
<td>2</td>
</tr>

</tbody>

</table>

. . . 

La etiqueta <colgroup> se emplea para agrupar de forma estructural varias columnas de la tabla. La forma habitual de indicar el número de columnas que abarca la agrupación es utilizar el atributo span, que establece el número de columnas de cada agrupación.


El códigoHTMLnecesario para crear una  tabla de ejemplo se muestra a continuación:

. . . 

<table summary="Análisis de ventas anuales">
<caption>Análisis de ventas anuales</caption>

<colgroup span="1" style="color:red;" />
<colgroup span="3" style="color:blue;" />

<thead>
 <tr>
<th scope="col">AÑO</th>
 <th scope="col">Producto A</th>
 <th scope="col">Producto B</th>
 <th scope="col">Producto C</th>
 <th scope="col">Producto D</th>
 </tr>
 </thead>

<tbody>
 <tr>
 <th scope="row">N-3</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>

 <tr>
 <th scope="row">N-2</th>
<td>3</td>
<td>5</td>
<td>8</td>
<td>4</td>
 </tr>

 <tr>
 <th scope="row">N-1</th>
<td>4</td>
<td>4</td>
<td>7</td>
<td>3</td>
 </tr>

 <tr>
 <th scope="row">N</th>
<td>5</td>
<td>7</td>
<td>6</td>
<td>2</td>
</tr>

</tbody>
</table>
. . .


Clase XL - 16/10/2015 - Html / Sesión de estudio

de 16

Country / Tiempo Libre y Deportes | 12:17 | | 0 comentarios

Revisión:  práctica de laboratorio.

 Describir qué realiza cada uno de los siguientes códigos de prueba:



<table>
<tr> <td colspan="2">A</td> </tr>
<tr> <td>B</td> <td>C</td> </tr> 
</table>

--------------------------------------------------------------------------------------------

<table> <tr> <td>A</td> </tr>
<tr> <td>B</td> <td>C</td> </tr>
</table>

--------------------------------------------------------------------------------------------

<table> <tr> <td>A</td> <td rowspan="2">B</td> </tr>
<tr> <td>C</td> </tr> 
</table>

--------------------------------------------------------------------------------------------

<table> <tr> <td>A</td> <td>B</td> </tr>
<tr> <td>C</td> </tr> 
</table>

--------------------------------------------------------------------------------------------

<html>
<head>
<title>Ejemplo de columnas fusionadas</title></head> 
<body>
<h1>Fusión de columnas</h1>
<table> 
<tr> <td colspan="3">A</td> <td>B</td> </tr>
<tr> <td>C</td> <td colspan="2">D</td> <td>E</td> </tr>
<tr> <td colspan="4">F</td> </tr>
<tr> <td>G</td> <td>H</td> <td>I</td> <td>J</td>
</tr> 
</table>
</body>
</html>

--------------------------------------------------------------------------------------------

<html>
<head>
<title>Ejemplo de filas fusionadas</title></head> 
<body>
<h1>Fusión de filas</h1>
<table> <tr> <td>A</td> <td>B</td> <td rowspan="3">C</td> <td>D</td> </tr>
<tr> <td rowspan="2">E</td> <td>F</td> <td rowspan="3">G</td> </tr> 
<tr> <td>H</td> </tr>
<tr>
<td>I</td> <td>J</td> <td>K</td> </tr> 
</table>
</body>
</html>

Clase XL - 16/10/2015 - Html

de 16

Country / Tiempo Libre y Deportes | 12:03 | | 0 comentarios

Tablas

 Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos:



Tablas básicas

 Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr> para crear cada fila y <td>para crear cada columna.

 A continuación se muestra el código HTML de una tabla sencilla:

 <html>
<head>
<title>Ejemplo de tabla sencilla</title>
</head>
<body>
<h1>Listado de cursos</h1>
<table> <tr> <td><strong>Curso</strong></td> <td><strong>Horas</strong></td> <td><strong>Horario</strong></td> </tr>
<tr> <td>CSS</td> <td>20</td> <td>16:00 - 20:00</td> </tr>
<tr> <td>HTML</td> <td>20</td> <td>16:00 - 20:00</td> </tr>
<tr> <td>Dreamweaver</td> <td>60</td> <td>16:00 - 20:00</td> </tr>
</table>
</body>
</html>


La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas <tr> (del inglés "table row") definen cada fila de la tabla y encierran todas las columnas. 

Por último, la etiqueta <td> (del inglés "table data cell") define cada una de las columnas de las filas, aunque realmente HTML no define columnas sino celdas de datos.



Los atributos de la etiqueta <th> son idénticos que los atributos definidos para la etiqueta <td>. En este caso, el atributo más utilizado es scope, que permite indicar si la celda es cabecera de la fila o de la columna (<th scope="row">y<th scope="col">respectivamente).

Por otra parte, HTML define la etiqueta <caption> para establecer la leyenda o título de una tabla. La etiqueta debe colocarse inmediatamente después de la etiqueta <table> y cada tabla sólo puede incluir una etiqueta <caption>.

Clase XL - 16/10/2015 - Html

de 16

Country / Tiempo Libre y Deportes | 11:52 | | 0 comentarios

Imágenes

 Las imágenes son uno de los elementos más importantes de las páginas web. Dentro de las imágenes que se pueden incluir en una página HTML se distinguen  dos tipos: 

  • imágenes de contenido
  • imágenes de adorno

Las imágenes de contenido son las que proporcionan información y complementan la información textual. Las imágenes de adorno son las que se utilizan para hacer bordes redondeados, para mostrar pequeños iconos en las listas de elementos, para mostrar fondos de página, etc.

 Las imágenes de contenido se incluyen directamente en el código HTML mediante la etiqueta <img> y las imágenes de adorno se procesan con hojas de estilos CSS para mostrarlas.


Los dos atributos requeridos son src y alt.

 El atributo src es similar al atributo href de los enlaces, ya que establece la URL de la imagen que se va a mostrar en la página. Las URL indicadas pueden ser absolutas o relativas. 

 El atributo alt permite describir el contenido de la imagen mediante un texto breve. Las descripciones deben tener una longitud inferior a 1024 caracteres y son útiles para las personas y dispositivos discapacitados que no pueden acceder a las imágenes.

 <img src="logotipo.gif" alt="Logotipo de Mi Sitio" />

 Como <img> es una etiqueta vacía, no tiene etiqueta de cierre. 

 No obstante, para que la página XHTML sea válida, todas las etiquetas deben estar cerradas. Como ya se explicó anteriormente, para cerrar una etiqueta vacía se incluyen los caracteres />al final de la etiqueta.

 HTML no impone ninguna restricción sobre el formato gráfico que se puede utilizar en las imágenes, por lo que en principio la etiqueta <img> puede incluir cualquier formato gráfico existente. 

 La recomendación es utilizar uno de los tres siguientes formatos gráficos que entienden todos los navegadores modernos: GIF, JPG y PNG.



Clase XXXIX - 14/10/2015 - Html / Sesión de estudio

de 14

Country / Tiempo Libre y Deportes | 13:07 | | 0 comentarios

Revisión:  práctica de laboratorio.

  1. Codifficar la maqueta de la pagina principal del proyecto.
  2. Programar los enlaces hacia las páginas secundarias del sitio.
  3. Depurar el código escrito para evitar redundancias.

Clase XXXVIII - 07/10/2015 - Usabilidad

de 7

Country / Tiempo Libre y Deportes | 13:03 | | 0 comentarios


Estándares formales de usabilidad

Orientados al proceso: ISO 9241 e ISO 13407

  • Efectividad: exactitud e integridad con la que los usuarios alcanzan los objetivos especificados, y por tanto implica la facilidad de aprendizaje, la ausencia de errores del sistema o la facilidad del mismo para ser recordado. Las métricas definidas son:

    • Número de tareas importantes realizadas
    • Porcentaje de funciones relevantes utilizadas
    • Porcentaje de tareas completadas con éxito al primer intento
    • Número de referencias a la documentación
    • Número de llamadas para soporte
    • Número de accesos a la ayuda
    • Número de funciones aprendidas
    • Porcentaje de usuarios capaces de aprender sus características
    • Porcentaje de errores corregidos o reportados por el sistema
    • Número de errores de los usuarios tolerados
    • Porcentaje de palabras leídas correctamente a una distancia de visualización normal
  • Eficiencia: recursos empleados (esfuerzo, tiempo, etc.) en relación con la exactitud e integridad con la que los usuarios alcanzan los objetivos especificados. Las métricas definidas son:

    • Eficiencia relativa en comparación con un usuario experto
    • Tiempo empleado en el primer intento
    • Eficiencia relativa en el primer intento
    • Tiempo empleado en reaprender funciones
    • Número de errores persistentes
    • Tiempo productivo
    • Tiempo para aprender características
    • Tiempo para reaprender características
    • Eficiencia relativa durante el aprendizaje
    • Tiempo empleado en la corrección de errores
  • Satisfacción: un factor subjetivo que implica una actitud positiva en el uso del producto. Las métricas definidas son:
    • Calificación (por parte del usuario) de su satisfacción con las características importantes
    • Tasa de uso voluntario del producto
    • Frecuencia de reutilización del producto
    • Calificación (por parte del usuario) de la facilidad de aprendizaje
    • Calificación (por parte del usuario) del tratamiento de errores
  • Efectividad (el método de aplicación definido para las tres es el test con usuarios)

    • Efectividad de las tareas: ¿qué proporción de objetivos de las tareas son logrados correctamente?
    • Tareas completadas, ¿qué proporción de tareas son completadas?
    • Frecuencia de los errores
  • Productividad (el método de aplicación definido para todas es el test con usuarios)

    • Tiempo de las tareas, ¿cuánto tiempo lleva completar una tarea?
    • Efectividad de las tareas, ¿cuán eficientes son los usuarios?
    • Productividad económica, ¿cómo de rentable es el usuario?
    • Porcentaje de producción, ¿qué proporción de tiempo dedica el usuario a acciones productivas?
    • Eficiencia relativa de los usuarios, ¿cómo de eficiente es el usuario comparado con un experto?
  • Seguridad (el método de aplicación definido para todos es el uso de estadísticas)

    • Salud y seguridad del usuario, ¿cuál es la frecuencia de problemas de salud entre usuarios del producto?
    • Seguridad de las personas afectadas por el uso del sistema, ¿cuál es la frecuencia de peligro para las personas afectadas por el uso del sistema?
    • Daños ergonómicos, ¿cuál es la frecuencia de daños ergonómicos?
    • Daños del software, ¿cuál es la frecuencia de la corrupción del software?
  • Satisfacción

    • Escala de satisfacción, ¿cómo de satisfecho está el usuario?
    • Cuestionario de satisfacción, ¿cómo de satisfecho esta el usuario con características específicas del software?
    • Uso discrecional, ¿qué proporción de potenciales usuarios eligen el uso del sistema? El método de aplicación definido es la observación del uso.

Clase XXXVII - 02/10/2015 - Talleres extra curriculares

de 1

Country / Tiempo Libre y Deportes | 18:57 | | 0 comentarios

Temario

Entrega prototipo aplicación:  2do. llamado, examen final (16 de Diciembre de 2015).

Clase XXXVII - 02/10/2015 - Html / Sesión de estudio

de 1

Country / Tiempo Libre y Deportes | 11:28 | | 0 comentarios

Revisión:  práctica de laboratorio.


  • Analizar el siguiente código.
  • Dé un nombre de archivo para el mismo. Justifique su respuesta.
  • Marcar las secciones básicas de una página escrita en html.
  • Marcar las reglas de estilo  creadas. Clasificarlas.

<!doctype html>
<html lang='es'>
<head>
    <meta charset='utf-8'>

     <style type="text/css">

        body{ 
       background-color: #009900; //verde
       } 

       nav{ 
      width: auto; 
      background: #009900; //verde 
      padding: 8px 0;
      }

       nav ul {
           list-style-type: none;
           position: relative;
           display: block;
           font-size: 12px;
           font-family: Verdana, Helvetica, Arial, sans-serif;
           margin: 0;
           padding: 0;
           zoom: 1.2;
           
         }

          nav li {
           display: block;
           float: left;
           margin: 0;
           padding: 0;
           border-bottom: 1px solid #7ab900 ;
         }

          nav li a {
           float: left;
           color: #ffffff;
           text-decoration: none;
           height: 24px;
           padding: 9px 15px 0;
           font-weight: normal;
         }

          nav li:hover, nav:active { //La pseudo-clase :active de CSS  cubre el caso en el que un elemento está siendo activado por el usuario.  Cuando se interactúa con el ratón, se corresponde al momento en el que el usuario presiona el botón del ratón hasta el momento en el que lo suelta. 
           text-decoration: none;
           border-bottom: 2px solid #7ab900;
           border-radius: 5px;
         }

          nav li:hover a {
          color: #99ff66;
          zoom: 1.21;
          border-top:  2px solid #7ab900 ;
          border-radius: 5px;
  
         }

          nav #inicio a {
           color:  #99ff66;
           font-weight: bold;
         }
         
     </style>

      <title>Menu</title>
     </head>
<body>

 <nav>
<ul>
   <li id='inicio'><a href='#'><span>Inicio</span></a></li>
   <li><a href='#'><span>Servicios</span></a></li>
   <li><a href='#'><span>Productos</span></a></li>
   <li><a href='#'><span>Empresa</span></a></li>
</ul>
</nav>

 </body>

 </html>   
Explique la sig. línea de código: 

    <li id='inicio'><a href='#'><span>Inicio</span></a></li>


  • Explique las sig. reglas de estilo.


       nav li:hover, nav:active {
           text-decoration: none;
           border-bottom: 3px solid #7ab900;
         }

          nav #inicio a {
           color:  #99ff66;
           font-weight: bold;
         }


Clase XXXVII - 02/10/2015 - Html

de 1

Country / Tiempo Libre y Deportes | 10:35 | | 0 comentarios

Estructura básica del menú en HTML

<nav>
<ul>
 <li><a title="Opcion 1" href="#">Opción 1</a></li>
 <li><a title="Opcion 2" href="#">Opción 2</a></li>
 <li><a title="Opcion 3" href="#">Opción 3</a></li>
 <li><a title="Opcion 4" href="#">Opción 4</a></li>
 <li><a title="Opcion 5" href="#">Opción 5</a></li>
</ul>
</nav>
Cada elemento de la lista será un enlace de navegación hacia otras páginas del mismo sitio.

Aplicando estilos con CSS3 al menú de navegación

Cuerpo:

body{
 background: #3CF;
}
Etiqueta NAV : borde redondeado,radio de 10px , degradado de blanco a gris, padding de 10px y un ancho de 950px.

nav{
 /*Bordes redondeados*/
 border-radius:10px;/*El estandar por defecto*/
 background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/
 overflow:hidden;
 padding:10px;
 width:950px;
}
NAV es el contenedor para la lista.

 Etiqueta UL:

nav ul{
 list-style:none;
 margin:0 10px 0 10px;
 padding:0;
}
Elementos de la lista LI: flotar a la izquierda, margen derecho de 10px , bordes redondeados de 5px de radio, tipo de fuente, tamaño de 16px, centrado y sombras para el texto.

nav ul li{
 border-radius:5px;/*Estandar por defecto*/
 float:left;
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 font-weight:bold;
 margin-right:10px;
 text-align:center;
 /*Sombras para texto, los mismos parametros que box-shadow*/
 text-shadow: 0px 1px 0px #FFF;
}

 Pseudoclase Hover:

 Al pasar el puntero sobre el elemento LI se activará el evento HOVER cambiando el fondo de este. 

 nav ul li:hover{
 /*Degradado de fondo*/
 background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*/
 /*Sombras*/
 box-shadow:  1px -1px 0px #999;/*Estandar por defecto*/
 border:1px solid #E3E3E3;
}
nav ul li a{
 color:#999;
 display:block;
 padding:10px;
 text-decoration:none;
 /*Transiciones*/
   transition: 0.4s linear all;
}
La transición se activará al pasar el puntero, el evento HOVER de CSS que cambiara de color gris el texto a negro, esto es sobre la etiqueta A de enlace.

nav ul li a:hover {
 color:#000;
}

Clase XXXVII - 02/10/2015 - Html

de 1

Country / Tiempo Libre y Deportes | 10:16 | | 0 comentarios

Listas

HTML define diferentes tipos diferentes de listas para agrupar los elementos:

  1. listas no ordenadas (se trata de una colección simple de elementos en la que no importa su orden).
  2. listas ordenadas (similar a la anterior, pero los elementos están numerados y por tanto, importa su orden) .

Listas no ordenadas

 Una lista no ordenada es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados. 
La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta <li> cada uno de sus elementos.

 Ejemplo:

 <html>
<head><title>Ejemplo de etiqueta UL</title></head>
<body>
<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artículos</li>
<li>Contacto</li>
</ul>
</body>

</html
Listas ordenadas

 Los elementos relacionados se muestran siguiendo un orden determinado. 
En todos estos casos, la lista más adecuada es la lista ordenada, que se define mediante la
etiqueta <ol>. Los elementos de la lista se definen mediante la etiqueta <li>, la misma que se utiliza en las listas no ordenadas.

Ejemplo:

 <html>
<head><title>Ejemplo de etiqueta OL</title></head>
<body>
<h1>Instrucciones</h1>
<ol>
<li>Enchufar correctamente</li>
<li>Comprobar conexiones</li>
<li>Encender el aparato</li>
</ol>
</body>

</html>

Suscribirse a: Entradas (Atom)