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:
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 2 de 12
Versión 1.0
GUIA DE CLASES (Tecnología e Informática) Última revisión: 02/12/2015
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>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
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 3 de 12
Versión 1.0
GUIA DE CLASES (Tecnología e Informática) Última revisión: 02/12/2015
3
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>
</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>
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 4 de 12
Versión 1.0
GUIA DE CLASES (Tecnología e Informática) Última revisión: 02/12/2015
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
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 5 de 12
Versión 1.0
GUIA DE CLASES (Tecnología e Informática) Última revisión: 02/12/2015
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.
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 6 de 12
Versión 1.0
GUIA DE CLASES (Tecnología e Informática) Última revisión: 02/12/2015
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>
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 7 de 12
Versión 1.0
GUIA DE CLASES (Tecnología e Informática) Última revisión: 02/12/2015
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
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 8 de 12
Versión 1.0
GUIA DE CLASES (Tecnología e Informática) Última revisión: 02/12/2015
8
RECURSOS
Diapositivas
Portátiles
Video Beam o Televisor
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/
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 9 de 12
Versión 1.0
GUIA DE CLASES (Tecnología e Informática) Última revisión: 02/12/2015
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
Video Beam o Televisor
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
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 10 de 12
Versión 1.0
GUIA DE CLASES (Tecnología e Informática) Última revisión: 02/12/2015
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
Video Beam o Televisor
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>
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 11 de 12
Versión 1.0
GUIA DE CLASES (Tecnología e Informática) Última revisión: 02/12/2015
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>
<td> Celda 1, linea 2</td>
<td> Celda 2, linea 2</td>
</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
Video Beam o Televisor
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 12 de 12
Versión 1.0
GUIA DE CLASES (Tecnología e Informática) Última revisión: 02/12/2015
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
Top Related