TRABAJO VIRTUAL - ONCE

Estimados alumnos de grado 11 - Colegio Simón Bolívar - Madrid :
Este es el TRABAJO VIRTUAL N° 1 - ONCE.
Consta de 3 puntos :


1. COPIAR EN EL CUADERNO EL SIGUIENTE CONTENIDO : 

LISTAS NO ORDENADAS <ul>

Las listas no ordenadas van dentro de la etiqueta <ul> HTML y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.

Si no le indicamos nada a la etiqueta <li> HTML, ésta se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del punto, podemos gracias al atributo “type”.

Así podemos hacer que la lista esté definida por puntos negros <li type=”disc”>, por puntos con el fondo blanco <li type=”circle”> o por cuadrados <li type=”square”>. Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos.

Vamos con un pequeño ejemplo en código:

<ul>

     <li type="circle">Esto es un tipo de punto.</li>

     <li type="square">Este es otro.</li>

     <li type="disc">Y este es otro diferente.</li>

</ul>

Cuyo resultado visual será el que veremos a continuación:

• Esto es un tipo de punto.
• Este es otro.
• Y este es otro diferente.

LISTAS ORDENADAS <ol>

Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los símbolos serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos puntos.

En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número.

Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos escribir lo siguiente:

<ol>
     <li value="20">Este será el número 20. </li>
     <li>Este será el 21. </li>
     <li> Este será el 22. Y así sucesivamente. </li>
</ol>

Y el resultado será el siguiente:

20. Este será el número 20.
21. Este será el 21.
22. Este será el 22. Y así sucesivamente.

TABLAS

Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente.

En documentos HTML una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada una contiene a un grupo de celdas. Esto es conceptualmente distinto a un grupo de columnas que contiene a un grupo de filas, y esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.

Como muchas otras estructuras de HTML, las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser declarada usando tres elementos, a saber, <table> (el contenedor principal), <tr> (representando a las filas contenedoras de las celdas) y <td> (representando a las celdas). Dejémoslo más claro con un ejemplo:

<table >

  <tr>
      <td>Celda 1</td>
      <td>Celda 2</td>
      <td>Celda 3</td>
  </tr>

  <tr>
      <td>Celda 4</td>
      <td>Celda 5</td>
      <td>Celda 6</td>
  </tr>


</table>


Y el resultado será el siguiente:

Cabe aclarar que el código tanto para la creación de listas y tablas se inserta dentro de las etiquetas body.

2. VER LOS SIGUIENTES VIDEOS : 

3. ELABORAR UNA PAGINA WEB HTML, USANDO LISTAS Y TABLAS. (DEBE APARECER TU NOMBRE DENTRO DEL CONTENIDO).  DEBES ADJUNTAR Y ENVIAR TU PAGINA HTML  AL CORREO (profesormundial@gmail.com). EN ASUNTO PONER GRADO Y NOMBRE COMPLETO.

TEMAS DISPONIBLES :

• Deportes
• Música
• Cine
• VideoJuegos
• Moda &Belleza
• Cocina
• Tecnología
• Animales

NOTA : Cualquier aclaración o duda se efectuará esta semana, en horario de descanso.

ELABORÓ: DIEGO FONSECA – DOCENTE DE TECNOLOGIA E INFORMATICA