GUIA DE CLASES DECIMO DOCENTE GIOVANNY OROZCO...

REPÚBLICA DE COLOMBIA INSTITUCIÓN EDUCATIVA TÉCNICA SAGRADO CORAZÓN

Aprobada según Resolución No. 8758000490 – NIT 800251680 – DANE 108758000490 SOLEDAD – ATLÁNTICO.

Página 1 de 12

Versión 1.0

GUIA DE CLASES (Tecnología e Informática) Última revisión: 02/12/2015

1

GUIA DE CLASES DECIMO

DOCENTE GIOVANNY OROZCO CAVIEDES GRADO DECIMO GRUPOS 01 – 02 – 03

ÁREA TECNOLOGÍA E INFORMÁTICA

ASIGNATURA INFORMÁTICA PERIODO: SEGUNDO

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?

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

2. Visitar algunas páginas web sencillas, y con clic contrario escoger la opción “VER CÓDIGO FUENTE” para descubrir todas las etiquetas que la conforman. Tomar nota de ello en el cuaderno

ACTIVIDAD

1. Socializar las diapositivas referentes a la temática, se trabajaran cuatro subtemas:

a. Alineación

b. Encabezados

c. Formateando textos

d. Formato Fino

2. Desarrollen la siguientes páginas referentes a las temáticas:



Página 2 de 12

Versión 1.0


2

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>

<div align=“right">

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





Página 3 de 12

Versión 1.0


3



</body>

</html>

FORMATEANDO EL TEXTO Y 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>



Página 4 de 12

Versión 1.0


4

COMPROMISO

Averigua 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 una página de ejemplo donde se apliquen los tres elementos RECURSOS

Diapositivas

Portátiles

Video Beam o Televisor

ACTIVIDAD

1. Revisión del compromiso solicitado en la clase anterior 2. Revisión de las páginas web que trajeron diseñadas, montarlas en el editor de texto y

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

RECURSOS

Diapositivas

Portátiles

Video Beam

Libreta o apuntes



Página 5 de 12

Versión 1.0


5

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



Página 6 de 12

Versión 1.0


6

ALGORITMO LISTA ORDENADA <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> ALGORITMO LISTA NO ORDENADA <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> 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>



Página 7 de 12

Versión 1.0


7

<dt>RSS</dt> <dt>GML</dt> <dt>XUL</dt> <dd>Lenguajes derivados de XML para determinadas aplicaciones</dd> </dl> </body> </html>

RECURSOS

Diapositivas

Portátiles

Video Beam

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



Página 8 de 12

Versión 1.0


8

RECURSOS

Diapositivas

Portátiles


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> <a href="http://www.google.com"> la pagina de torregrosa</a> <p> <a href="http://es.tldp.org/Manuales-LuCAS/



Página 9 de 12

Versión 1.0


9

doc-curso-html/doc-curso-html.pdf"> Manual de HTML</a> <p> <a href="pagina de listas de definicion.html"> la pagina de la negri</a> <p> <a href="mailto:[email protected]"> 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


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



Página 10 de 12

Versión 1.0


10

ALGORITMO A DESARROLLAR PARA ACLARAR DUDAS <html>

<head> <title>Pagina con imagenes</title> </head> <body> <center><h1><font color="red"> ESTAS SON MIS IMAGENES</font></h1></center> <img src="perro.gif" width=40% border=0 hspace=40 align=middle> torregrosa la chiqui precoz <p> <img src="descarga.jpg" width=40% vspace=60> </body>

</html> RECURSOS

Diapositivas

Portátiles


Libreta o apuntes

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: <tr> y </tr>



Página 11 de 12

Versión 1.0


11

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




Página 12 de 12

Versión 1.0


12

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 sea 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 [email protected] para revisión

mailto:[email protected]

GUIA DE CLASES DECIMO DOCENTE GIOVANNY OROZCO...

Documents

Transcript of GUIA DE CLASES DECIMO DOCENTE GIOVANNY OROZCO...