GUIA DE CLASES DECIMO DOCENTE IRINA DONADO CUEVAS GRADO DECIMO GRUPOS TECNOLOGÍA E

(1)

GUIA DE CLASES DECIMO

DOCENTE IRINA DONADO CUEVAS GRADO DECIMO GRUPOS 01 – 02 – 03

ÁREA TECNOLOGÍA E

INFORMÁTICA ASIGNATURA INFORMÁTICA PERIODO: SEGUNDO META DE FORMACIÓN DEL ÁREA:

El 92% de los estudiantes de décimo grado desarrollarán el pensamiento lógico y tecnológico, por medio del conocimiento científico y tecnológico que se ha empleado en diversas culturas y regiones del mundo a través de la historia para resolver problemas y transformar el entorno; lo que le permitirá analizar y valorar críticamente los componentes y evolución de los sistemas tecnológicos y las estrategias para su desarrollo.

ESTÁNDAR:

Tengo en cuenta principios de funcionamiento y criterios de selección, para la utilización eficiente y segura de artefactos, productos, servicios, procesos y sistemas tecnológicos de mi entorno.

COMPETENCIA OPERACIONES MENTALES

PROPOSITIVA – ARGUMENTATIVA – INTERPRETATIVA RAZONAMIENTO: ANALOGICO, LOGICO Y SILOGISTICO

UNIDAD O EJE TEMÁTICO

PRINCIPIOS DE HTML

ESTANDAR DE PERIODO

Diseño y aplico planes sistemáticos de mantenimiento de artefactos tecnológicos utilizados en la vida cotidiana.

SITUACIONES PROBLEMAS

1. ¿De qué manera influye en mi desarrollo mental los conocimientos que pueda adquirir acerca del diseño de páginas web?

2. ¿Para mis propósitos en el ámbito profesional de qué manera las páginas web serian una herramienta a utilizar?

FASE MOTIVACIONAL O DE ENTRADA

1. Se les pide a los jóvenes que visiten varias páginas web de su interés y que saquen los elementos que les gustaría aplicar en las páginas web que diseñen a final de periodo

NUCLEO DE FORMACION: FORMATOS BASICOS CON HTML.

ACTIVIDAD

1. Se empieza socializando las diapositivas pertinentes a la temática, se trabajaran cuatro subtemas:

(2)

a. Alineación b. Encabezados

c. Formateando textos d. Formato Fino

2. Se desarrollan la siguientes paginas referentes a las temáticas:

ALINEACION

<html>

<head><title> Alineación de texto</title></head>

<body>

<p align="left">Texto alineado a la izquierda</p>

<p align="center">Texto alineado al centro</p>

<p align="right">Texto alineado a la derecha</p>

<p>Parrafo1</p>

<p>Parrafo2</p>

<p>Parrafo3</p>

</div>

</body>

</html>

ENCABEZADOS

<html>

<head>

<title>Todos los encabezados</title>

</head>

<body>

<h1>Encabezado de nivel 1</h1>

<h2 align="center">Encabezado de nivel 2</h2>

</body>

</html>

(3)

FORMATEANDO EL TEXTO (FORMATO FINO)

<html>

<head><title>Formateando el texto</title></head>

<body>

<b>Texto en negrita</b>

<strong>Texto resaltado</strong>

<i>Texto en itálica</i>

<em>Texto en itálica</em>

<u>Texto Subrayado</u>

La<sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno enriquecido

<b>Esto sólo está en negrita <i>y esto en negrita e itálica</i></b>

</body>

</html>

COMPROMISO

 Averiguar cuáles son las etiquetas en HTML que se utilizan para cambiar en un texto:

 El Color

 El tamaño

 El tipo de letra

 Traer en tu cuaderno una página de ejemplo donde se apliquen los tres elementos

RECURSOS

 Diapositivas

 Portátiles

 Video Beam o Televisor

NUCLEO DE FORMACION: FORMATOS BASICOS CON HTML.

ACTIVIDAD

1. Revisión del compromiso solicitado en la clase anterior

(4)

2. Solicitar a los jóvenes que las páginas web que trajeron diseñadas de sus casas, las monten en el editor de texto y las ejecuten en los navegadores

3. Colocar una página de ejemplos para aclarar dudas acerca de los investigado

RECURSOS

 Diapositivas

 Portátiles

 Libreta o apuntes

NUCLEO DE FORMACION: LISTAS.

• En ocasiones, es posible agrupar determinadas palabras o frases en un conjunto de elementos que tienen más significado de forma conjunta.

• El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos:

listas no ordenadas (se trata de una colección simple de elementos en la que no importa su orden), listas ordenadas (similar a la anterior, pero los elementos están numerados y por tanto, importa su orden) y listas de definición (un conjunto de términos y definiciones similar a un diccionario).

• LISTA NO ORDENADA

La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta <li> cada uno de sus elementos

• 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.

• LISTAS DE DEFINICION

La etiqueta <dl> crea la lista de definición y las etiquetas <dt> y <dd> definen respectivamente el término y la descripción de cada elemento de la lista.

ALGORITMO LISTA ORDENADA

<html>

<head><title>Ejemplo de etiqueta OL</title></head>

(5)

<body>

<h1>Instrucciones</h1>

<ol>

<li>Enchufar correctamente</li>

<li>Comprobar conexiones</li>

<li>Encender el aparato</li>

</ol>

</body>

</html>

ALGORITMO LISTA NO ORDENADA

<html>

<head><title>Ejemplo de etiqueta UL</title></head>

<body>

<ul>

<li>Inicio</li>

<li>Noticias</li>

<li>Artículos</li>

<li>Contacto</li>

</ul>

</body>

</html>

ALGORITMO DE LISTA DE DEFINICION

<html>

<head><title>Ejemplo de etiqueta DL</title></head>

<body>

<h1>Metalenguajes</h1>

<dl>

<dt>TELEVISOR</dt>

<dd>Este es un electrodomestico</dd>

<dt>CELULAR</dt>

<dd>este es un aparato de comunicaciones</dd>

(6)

<dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>

</dl>

</body>

</html>

RECURSOS

 Diapositivas

 Portátiles

NUCLEO DE FORMACION: LISTAS.

TALLER DE LISTAS

• Desarrollar la siguiente página aplicando las etiquetas y ejemplos desarrollados con anterioridad.

• Tenga en cuenta su estructura no su contenido, hágalo diferente

(7)

RECURSOS

 Diapositivas

 Portátiles

NUCLEO DE FORMACION: ENLACES O HIPERVINCULOS.

Los enlaces son los elementos que nos permiten navegar por las páginas HTML y son tan importantes que la web no tendría sentido sin ellos.

Es una zona de texto o grafico que al hacer clic sobre ellos, trasladan a otro documento de hipertexto o a otra posición dentro del documento actual.

Para colocar un enlace, nos serviremos de las etiquetas <a> y </a>. Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del enlace. Este destino será introducido bajo forma de atributo, el cual lleva por nombre href.

<a href="destino">contenido</a>

En función del destino los enlaces son clásicamente agrupados del siguiente modo:

• Enlaces internos: los que se dirigen a otras partes dentro de la misma página.

• Enlaces locales: los que se dirigen a otras páginas del mismo sitio web.

• Enlaces remotos: los dirigidos hacia páginas de otros sitios web.

• Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una dirección.

• Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.

ACTIVIDAD

Desarrollar la siguiente pagina:

<html>

<head>

<title>Pagina con Enlaces</title></head>

<body>

<center><h1>EJEMPLOS DE ENLACES</h1></center>

(8)

la pagina de torregrosa</a>

<p>

<a href="http://es.tldp.org/Manuales-LuCAS/

doc-curso-html/doc-curso-html.pdf"> Manual de HTML</a>

<p>

la pagina de la negri</a>

<p>

puede solicitar mas informacion aqui</a>

</body>

</html>

COMPROMISO

1. Investigar cual es la etiqueta para insertar imágenes en HTML.

2. Investigar los atributos correspondientes

RECURSOS

 Diapositivas

 Portátiles

NUCLEO DE FORMACION: IMAGENES.

ACTIVIDAD

1. Revisión del compromiso solicitado en la clase anterior.

2. Solicitar que descarguen en el computador imágenes de cualquier tipo

3. Solicitar a los jóvenes que las páginas web que trajeron diseñadas de las casas las monten en el editor de texto y las ejecuten en los navegadores.

4. Colocar una página de ejemplos para aclarar dudas acerca de lo investigado ALGORITMO A DESARROLLAR PARA ACLARAR DUDAS

(9)

<html>

<head>

<title>Pagina con imagenes</title>

</head>

<body>

ESTAS SON MIS IMAGENES</font></h1></center>

<img src="perro.gif" width=40% border=0

hspace=40 align=middle> torregrosa la chiqui precoz <p>

</body>

</html>

RECURSOS

 Diapositivas

 Portátiles

 Libreta o apuntes

NUCLEO DE FORMACION: TABLAS EN HTML.

Para empezar, nada más sencillo que por el principio: las tablas son definidas por las etiquetas <table> y </table>.

Las tablas son descritas por líneas de arriba a abajo (y luego por columnas de izquierda a derecha). Cada una de estas líneas, llamada fila, es definida por otra etiqueta y su cierre:

Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: <td> y </td>.

Dentro de estas etiquetas será donde coloquemos nuestro contenido.

ACTIVIDAD

(10)

Desarrollar el siguiente Algoritmo como ejemplo:

<table>

<tr>

<td>Celda 1, linea 1</td>

<td> Celda 2, linea 1</td>

</tr>

<tr>

</tr>

</table>

ATRIBUTOS DE LA ETIQUETA TABLE

 cellspacing: es el espacio entre celdas de la tabla.

 cellpadding: es el espacio entre el borde de la celda y su contenido.

 border: es el número de píxeles que tendrá el borde de la tabla.

 bordercolor: es el rbg que le vas a asignar al borde de la tabla.

RECURSOS

 Diapositivas

 Portátiles

FASE DE SALIDA:

TALLER EVALUATIVO

1. Diseñar una página web donde se apliquen las temáticas desarrolladas durante el periodo, debe tener en cuenta los siguientes aspectos:

 Que no se igual a la del resto de compañeros

 Debe tener una temática y ser coherente

 No debe tener palabras o imágenes obscenas

 Se deben aplicar todas las temáticas desarrolladas durante el periodo

2. Enviar al correo electrónico de [email protected] , para revisión