ACTIVIDADES 26-27 DE MARZO 2020

PERSONALIZACIÓN DE TEMPLATES MENÚ

este tipo de Templates son especificos para trabajar con opciones de menus y submenus, a diferencia de los templates con contenidos internos que estos son para trabajar con informacion de empresas o entidades.


los MENUS CSS, se pueden descargar desde los siguientes sitios sugeridos:

http://cssmenumaker.com/blog/10-stunning-html-menu-templates-to-download/

https://colorlib.com/wp/free-website-menu-templates/

para descargar templates de la carpeta de documentacion dar clic aqui

https://1drv.ms/u/s!AujIic6g_w91hw-u-ZwbeypTLQGz?e=Bj4Z4f

los libros de este año por módulos también están ya subidos de todos los niveles de básica y bachillerato en la nube les dejo el enlace 

libros digitales ministerio de educación 2020 

https://1drv.ms/u/s!AujIic6g_w91hgAg-touiqu3CRu4?e=Kf0w0Q

LA ACTIVIDAD ES:

modificar un template de los que se tiene en la documentación o descargar uno de su criterio y agrado y luego modificar los menus y submenus con las opciones asi:

CONTENIDO      MULTIMEDIA          TEST 

TEMA 1                 IMAGENES               TEST 1

TEMA 2                 VIDEOS                     TEST 2

EN TEMA 1/2 

enlazar a contenido de los temas seleccionados e implentar  con imagenes y videos

y enlaces externos para mayor amplitud del tema

EN MULTIMEDIA 

agregar imagenes y videos de los temas tratados y enlaces externos a youtube

TEST 

Se diseñar un test¿ o cuestionario del contenido diseñado en los módulos 

este trabajo sera hasta el jueves 2 de abril de 2020 

Nota:  para confirmar su asistencia y revisión de contenido poner en comentarios su nombre y si necesista mas explicaciones se lo realizar inmediatamente

por la tarde de hoy alzare un ejemplo de como se desea presentar en el caso de no estar claro 

buena suerte y son tiempos dificiles pero tenemos que seguir cuídense señores y no salgan de casa

TABLAS

Tablas HTML

¿Qué son las tablas en HTML?

Las tablas es el elemento del lenguaje HTML que utilizaremos para mostrar información de forma agrupada. Ya sea texto, imágenes, vídeos,…

El elemento table será el que nos ayudará para crear las tablas en HTML.

Un mal uso de las tablas en HTML es el motivo de maquetación, uso que se dió a las tablas en los principios del lenguaje HTML. Algo que hoy en día es una mala práctica. Cambiando por un modelo de maquetación apoyado en capas.

Crear una tabla simple

Para crear una tabla vamos a necesitar conocer, al menos, tres elementos: table, tr y td. Si bien existen otros cuantos que nos permitirán ampliar la funcionalidad de las tablas.

El primer elemento es table. table es el elemento que representa las tablas y será el que agrupe al resto de elementos. Por lo tanto tiene sus etiquetas de inicio y cierre.

<table> ... </table>

Siguiendo con la construcción de la tabla el siguiente elemento que necesitamos es tr. El elemento tr representa a una fila de la tabla. Por lo tanto tendremos tantos elementos tr como filas tenga la tabla.

Así, si queremos tener una tabla de tres filas tendremos un código como el que sigue:

<table>

  <tr> ... </tr>

  <tr> ... </tr>

  <tr> ... </tr>

</table>

El último elemento que necesitamos conocer es td. El elemento td es el que representa de una forma unitaria a una celda. Por lo tanto los elementos tr tendrán tantos elementos td en su interior como celdas contenga la fila.

El contenido que haya entre los elementos td será el contenido de la celda.

Una tabla de tres filas por cuatro columnas quedaría de la siguiente forma:

<table border=”5”>

  <tr>

    <td>Fila 1 Columna 1</td>

    <td>Fila 1 Columna 2</td>

    <td>Fila 1 Columna 3</td>

    <td>Fila 1 Columna 4</td>

  </tr>

  <tr>

    <td>Fila 2 Columna 1</td>

    <td>Fila 2 Columna 2</td>

    <td>Fila 2 Columna 3</td>

    <td>Fila 2 Columna 4</td>

  </tr>

  <tr>

    <td>Fila 3 Columna 1</td>

    <td>Fila 3 Columna 2</td>

    <td>Fila 3 Columna 3</td>

    <td>Fila 3 Columna 4</td>

  </tr>

</table>

Así con los tres elementos table, tr y td tenemos construida nuestra tabla.

Visualmente tendríamos algo así:

Fila 1 Columna 1	Fila 1 Columna 2	Fila 1 Columna 3	Fila 1 Columna 4
Fila 2 Columna 1	Fila 2 Columna 2	Fila 2 Columna 3	Fila 2 Columna 4
Fila 3 Columna 1	Fila 3 Columna 2	Fila 3 Columna 3	Fila 3 Columna 4

Agrupando Celdas

A la hora de presentar datos en una tabla nos puede surgir la necesidad de agrupar celdas, ya que el contenido a presentar refleja una agrupación de datos.

Imaginemos una tabla que nos saca los ingresos y gastos por meses. Existirá una columna con el mes, la cual agrupará dos columnas: ingresos y gastos.

Algo como lo siguiente:

Enero		Febrero
Ingresos	Gastos	Ingresos	Gastos
1.000€	700€	1.100€	580€
1.800€	920€	1.750€	920€

En este caso lo que estamos diciendo es que una celda ocupa dos espacios. Para ello vamos a utilizar el atributo colspan sobre el elemento td de la celda.

Así indicaremos que el colspan de esa celda es 2. Ya que ocupa dos celdas.

<td colspan="2">Enero</td>

El código completo sería:

<table>

  <tr>

    <td colspan="2">Enero</td>

    <td colspan="2">Febrero</td>

  </tr>

  <tr>

    <td>Ingresos</td>

    <td>Gastos</td>

    <td>Ingresos</td>

    <td>Gastos</td>

  </tr>

  <tr>

    <td>1.000€</td>

    <td>700€/td>

    <td>1.100€</td>

    <td>580€</td>

  </tr>

  <tr>

    <td>1.800€</td>

    <td>920€</td>

    <td>1.750€</td>

    <td>920€</td>

  </tr>

</table>

LISTAS EN HTML

Listas en HTML:

Las listas originalmente están pensadas para citar, numerar y definir cosas a través de características, o al menos así lo hacemos en la escritura de textos. Sin embargo, las listas finalmente se utilizan para mucho más que enumerar una serie de puntos, en realidad son un recurso muy interesante para poder maquetar elementos diversos, como barras de navegación, pestañas etc.

Podemos distinguir tres tipos de listas HTML:

Listas desordenadas

Listas ordenadas

Listas de definición

Las veremos detenidamente una a una.

Listas desordenadas

Son delimitadas por las etiquetas UL y su cierre (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta LI (La LI tiene su cierre, aunque si no lo colocas el navegador al ver el siguiente LI interpretará que estás cerrando el anterior). La cosa queda así:

<p>Países del mundo</p>

<ul>

                <li>Argentina</li>

                <li>Perú</li>

                <li>Chile</li>

</ul>

El resultado:

Países del mundo

·         Argentina

·         Perú

·         Chile

Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura UL, si queremos que el estilo sea válido para toda la lista,o dentro le la etiqueta LI si queremos hacerlo específico de un solo elemento. La sintaxis es del siguiente tipo:

<ul type="tipo de viñeta">

donde tipo de viñeta puede ser uno de los siguientes:

circle     -      disc      -      square

Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el último elemento colocaremos un círculo. Para ello vamos a colocar el atributo type en la etiqueta UL, con lo que afectará a todos los elementos de la lista.

<ul type="square">

<li>Elemento 1

<li>Elemento 2

<li>Elemento 3

<li type="circle">Elemento 4

</ul>

Que tiene como resultado:

Anidando listas

Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en otros casos. De esta forma, podemos conseguir listas mixtas como por ejemplo:

<p>Ciudades del mundo</p> 

<ul> 

                    <li>Argentina 

                    <ol> 

                           <li>Buenos Aires 

                         <li>Bariloche 

                    </ol> 

                    <li>Uruguay 

                    <ol> 

                        <li>Montevideo 

                        <li>Punta del Este 

                    </ol> 

</ul>

De esta forma creamos una lista como esta: