1.

IDENTIFICACION DE LA GUIA DE APRENDIZAJE

Cdigo: 328344
Fecha: 6 de Septiembre del 2012
Nombre del Proyecto: TECNICO EN SISTEMAS
(Duracin en horas) 72
Fase del Proyecto:
Modalidad de formacin: PRESENCIAL
Equipo Ejecutor:
NORMA DE COMPETENCIA
CDIGO
DENOMINACIN
APLICAR
HERRAMIENTAS
OFIMTICAS,
REDES
SOCIALES

220501046

COLABORATIVAS
DESARROLLAR.

CDIGO

DE

ACUERDO

CON

EL

PROYECTO

DE APRENDIZAJE
DENOMINACIN

APLICAR
CONTROLES
Y
ESTRUCTURAS
BSICAS
DE
22050104604 PROGRAMACIN DE UN LENGUAJE ORIENTADO A EVENTOS DE
ACUERDO CON EL PROBLEMA A SOLUCIONAR.
2. JUSTIFICACIN

El HTML ( HiperText Markup Language ) es el lenguaje utilizado para representar documentos

en la WWW (World Wide Web). Adems de texto normal incluye tambin, elementos multimedia
(grficos, vdeo, audio) y existen enlaces (links) que permiten saltar a otras partes del documento o
a otro sitio cualquiera de Internet. Otra caracterstica muy importante de este lenguaje es su
portabilidad, portable, es decir, se pueden visualizar las pginas con cualquier sistema operativo.
Las etiquetas constituyen la filosofa de este lenguaje. Por medio de ellas se pueden controlar los
elementos tipogrficos del texto: Tipo, color y tamao de las fuentes, el estilo ( negrita, cursiva,
etc ), as como tambin la inclusin de tablas, listas, formularios, la insercin de fotos, sonidos,
fondos, los enlaces mencionados anteriormente. etc. Las etiquetas se pueden modificar por medio
de sus atributos, stos son del tipo atributo="valor" y se colocan detrs del nombre de la etiqueta
El nombre de la etiqueta y sus atributos se colocan entre los smbolos < y > y normalmente se usan
dos, una de inicio y otra final, para conseguir el efecto deseado.
3. ACTIVIDADES Y ESTRATEGIAS DE APRENDIZAJE
ACTIVIDAD 1
INTRODUCCION AL LEGUAJE HTML
Para esta actividad comprendida entre los das 6, 7 y 9 de Septiembre, sern dedicados a la
investigacin y conceptualizacin de temas necesarios para el entendimiento y profundizacin.
Para llegar a las prcticas con conocimientos directos. Se les invita a trabajar en la siguiente
direccin electrnica. La cual contiene informacin pertinente y dedicada especialmente a aclarar

el tema especfico, como lo es HTML. Entra a tu navegador de confianza, como lo puede ser
Internet Explorer, Mozilla o Google Chrome. Seguido copia la direccin electrnica que se
encuentra enseguida a este texto.
http://www.youtube.com/watch?v=4XwbwoCBys4&feature=related
En el browser de tu navegador pega la direccin y espera a que se presente su contenido.
Analzalo y toma conclusiones segn lo que analizaste. Las conclusiones debes plasmarlas en un
documento Word. La cual llevara tus nombres, apellidos y numero de cedula. Recuerda
introducir las normas Icontec. Para cada direccin deben existir unas conclusiones especficas y
claras.
Aqu adjunto ms direcciones a las cuales debes prestar mucha atencin, sacar conclusiones y
plasmarlas en tu documento.
http://www.youtube.com/watch?v=7aXgPM0yaUE&feature=fvsr
http://www.youtube.com/watch?v=QmRtkveG56w&feature=related
http://www.youtube.com/watch?v=bOUWHhHdfVg&feature=related
http://www.youtube.com/watch?v=en0EfNXmL6M&feature=related
http://www.youtube.com/watch?v=fhhTNuBL40U&feature=related
Lo mismo debes con las siguientes direcciones.
La actividad debe ser enviada al instructor encargado. Pero de la siguiente forma. Cada aprendiz
debe entregar el material creado de acuerdo a las condiciones solicitadas. Pero la evidencia
entregada por usted, debe ser guardada dentro de una carpeta, el nombre de la carpeta debe
tener sus datos nombres, apellidos y numero de cedula. Esta carpeta ser comprimida y enviada
al lder de grupo, a su vez, el lder las agrupara en una sola carpeta y enviada al instructor
encargado.
Dicha evidencia ser analizada y calificada por el instructor.
Seguido se debe visitar la siguiente direccin en la cual existen datos importantes las cuales se
analizaran en el transcurso de la norma. La direccin es la siguiente:
http://platea.pntic.mec.es/~abercian/guiahtml/
esta direccin contiene lo siguiente:

Esta pgina contiene los siguientes puntos.

1. Introduccin
2. Estructura
3. Formatos
4. Listas
5. Enlaces.
6. Etc.
Cada punto posee un link. Si ubicamos el cursor sobre este y damos clic, este nos llevara a otra
pgina con informacin pertinente al tema.
En esta actividad se trabajaran los puntos Introduccin, Estructura, Formatos, y Listas. Para este
punto se debe leer el contenido y asimilar la informacin, obtener puntos que no estn claros y
sociabilizarlos en clase. La participacin genera puntos a favor.
TIEMPO PARA ESTA ACTIVIDAD: 4 HORAS.
ACTIVIDAD 2
ANALISIS Y CREACION
DE EJERCICIOS.
Para la creacin de un archivo HTML se deben tener las siguientes recomendaciones.
Para mayor dominio del lenguaje se puede trabajar en el programa llamado Blog de Notas, este
se puede encontrar en la opcin de accesorios entrando por inicio en la barra de tareas.

Otro aplicativo que nos proporciona una gran ayuda es NotePad++, este aplicativo lo pueden
encontrar buscando en www.google.com.co , digitando la palabra download NotePad++ en
espaol. Descrgalo e instala el programa en tu maquina preferida. Despus de instalado se
debe encontrar el siguiente icono.

Ahora inicia el aplicativo dando clic en el programa NotePad++. Mira la grfica

Dentro del rea de trabajo se incluir la estructura bsica inicial o mnima para que un archivo
html sea bien creado.
<html>
<head>
<title>
ESTO DEBE PRESENTARCE EN LA BARRA
DE TITULO DE TU NAVEGADOR PREFERIDO.
</title>
</head>
<body>
LO QUE VEREMOS EN PANTALLA.
</body>
</html>

El cdigo debe quedar de dicha forma

Para guardarlo pulsa clic en la opcin del icono guardar.

Ahora debes ir al sitio donde esta guardado el archivo y pulsa doble clic. Mira el resultado en la
grafica siguiente.

El instructor encargado tomara la vocera para terminar con la actividad tomando la sesin
propuesta para esta actividad. Con las direcciones electrnicas ya revisadas por favor realiza
mnimo 10 ejercicios bsicos presentando solo texto y ttulos a la pagina, recuerda descargar el
aplicativo y/o trabajando con Blog de notas. De ser sociabilizado por el instructor encargado.
TIEMPO PARA ESTA ACTIVIDAD: 4 HORAS.
ACTIVIDAD 3
INTRODUCCION A EUQUETAS EN HTML

El lenguaje HTML es un lenguaje de etiquetas, estas etiquetas son trozos de

texto especiales que permiten formatear de distintas formas cdigo HTML,
formatear es dar al texto distintas formas de presentacin. Estas etiquetas son
la base principal del lenguaje HTML.
Una etiqueta es un texto incluido entre los smbolos los smbolos de
mayor y menor. < -- >
Aqu se encuentran algunos ejemplos a trabajar:
<html></html> Abre y cierra un documento HTML
<head></head> Encabezado de la pgina - aqu se coloca titulo,
<body></body>Dentro de esta etiqueta va toda la parte visible de la
pgina web.
<title></title> El ttulo de la pgina web.

<body bgcolor= color >Configura el color de fondo de la pgina, usando

el
valor
del
cdigo
de
color
hexadecimal
<body bgcolor="#">
Define el color de fondo de la pgina.
<body text="#">
Define el color por defecto del texto en la pgina.
<body link="#">
Define el color de los enlaces.
<body vlink="#">
Define el color de los enlaces visitados.
<body alink="#">
Define el color de los enlaces activos.
<body background="img.gif"> Establece una imagen para el fondo de
la
<font size=1> texto </font> especifica el tamao de la fuente el tamao
se puede dar con un nmero del 1 al 7.
<font face="Courier">texto </font> El tipo de fuente es un atributo de
FONT
<font color="red"> color de fuente
ALIGN="left" , ALIGN="right" para alinearla a la izquierda o a la derecha.
Por defecto aparece centrada no lleva signo de menor y mayor, solo va
dentro de una etiqueta

WIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en

pxels. No lleva signos de abrir y cerrar
COLOR="#0000FF" , para especificar el color. Sin signos de abrir y
cerrar.
Los
colores
basicos
son:
#FF0000 Rojo, #00FF00 Verde, #0000FF Azul, #FFFFFF Blanco,
#000000 Negro, #FFFF00 Amarillo. Estos se pueden ubicar de esta
forma
<FONT SIZE=2 COLOR=#FF00FF>texto</FONT> pueda que acepte
comilla o no.
Aqu se presenta la lista de colores con tan solo 4 bits y 8 bits.

<BR> Salto de lnea

<HR WIDTH="75%"> As se crear una lnea en el fondo de la pagina
que llegue de lado a lado.
&nbsp; sirve para dar espacios entre cualquier objeto.
<B>negrita</B>
<I>cursiva</I>
<U>subrayado</U>
<S>tachado</S>
CM<SUP>333 </SUP>

INDICES

H<SUB>2</SUB>SO<SUB>4</SUB> SUBINDICES
Para empezar la lista usaremos la instruccin de inicio de la etiqueta de
esa lista. por ejemplo, para crear una lista no ordenada ser necesario
usar la etiqueta UL
<UL> si se abre se debe cerrar la etiqueta </UL> una vez abierto se
debe crear la lista de datos que lo componen.
<UL>
<LI> SENA
<LI> TICS
<LI> TECNICO
<LI> SISTEMAS
</UL>
LISTAS ORDENADAS Este tipo de listas numera los elementos de lista
en el orden en el que se han introducido en el cdigo HTML. La
numeracin se realiza con nmeros empezando por el 1.
<OL>

<LI>
<LI>
<LI>
<LI>

SENA
TICS
TECNICO
SISTEMAS

</OL>
<A> y </A> El hipertexto son vnculos dentro del texto del documento
HTML que permiten al usuario navegar con facilidad a travs de otras
paginas, tanto a nivel interno como externo, es decir, pueden crearse
vnculos que lleven hacia una misma parte del documento (interno) o
hacia otra parte del mundo Web Las etiquetas HTML que se encargan de
generar este proceso se le debe agregar el "URL" con el que se desea
vincular. Esto se realiza de la siguiente manera :
<A HREF="www.misena.edu.co">Texto del vnculo</A>
Para colocar una imagen en una pgina basta con llamarla desde el
documento HTML. Ubica una imagen al lado del archivo que estas
trabajando. La extensin debe ser jpg.
<IMG SRC= "img.jpg" >
Mas funciones de IMG:
<img
src="img.jpg>
indica
la
ruta
de
la
imagen.
<img ... border=X"> establece un borde de X pixeles en torno a la
imagen.
<img ... height="XX" width="YY"> establece un tamao de la imagen
<img ... alt="texto explicativo"> se muestra un texto al pasar el cursor
sobre
la imagen.
<img ... align="bottom"> alineacin inferior del texto respecto de la
imagen.
<img ... align="middle"> alineacin del texto en el medio de la imagen.
<img ... align="top">
alineacin superior del texto respecto de la
imagen.
<img ... align="left"> alineacin izquierda de la imagen en el prrafo.
<img ... align="right"> alineacin derecha de la imagen en el prrafo.
<img ... hspace=X>
espacio horizontal entre la imagen y el texto.
<img ... vspace=y> espacio vertical entre la imagen y el texto.

Se puede imagen con enlace:

<a href=http://www.misena.edu.co target=_blank>
<img src=img.jpg alt=descripcin de la imagen>
</a>
TABLAS
Las tablas se usan con profusin en las pginas Web, muchas veces
debido a que son el nico instrumento con el que se cuenta, para
asegurarse que las cosas estarn en su sitio. Para definir una tabla se
usan las etiquetas:
<TABLE> </TABLE> son las etiquetas donde est contenida la tabla
<TR> </TR> son las etiquetas que indican el comienzo y fin de una fila
<TD> </TD> sealan una celda.
<TABLE align="center" BORDER="1" CELLPADDING="0" CELLSPACING="1" WIDTH="50%">
<TR >
<TD align="center" COLSPAN=2
BGCOLOR="#6D8FFF" > NOMBRE DE LA TABLA</TD>
</TR>
<TR align="center" >
<TD>Esta es la celda de la 1 fila y de la 1 columna</TD>
<TD> Esta es de la 1 fila y de la 2 columna</TD>
</TR>
<TR BGCOLOR="#6D8FFF">
<TD>Esto est con un fondo azul</TD>
<TD align="right" valign="bottom">Y esto tambin</TD>
</TR>
</TABLE>

Existen muchas reglas que facilitan los procesos en html. Es de ti encontrar

muchas e ir solucionando necesidades y demostrar la investigacin.
Para evidenciar la actividad es necesario que generes la evidencia de trabajo.
Las cuales son las siguientes.
Crear un archivo HTML, O formulario en la cual se pueda ingresar los
datos bsicos de un usuario.
oENCABEZADO CON IMAGEN QUE CUBRA TODA LA TABLA
oTITULO EN LA TABAL INGRESO DATOS BASICOS.
oPrimer Nombre
oSegundo Nombre

oPrimer Apellido
oSegundo Apellido
oTipo de documento.
oNacionalidad
oNumero de identificacin
oFecha nacimiento
oFecha de registro
oDireccin residencia
oDireccin Laboral
oCorreo Electrnico
oGenero
oImagen usuario
oNivel Acadmico
oEstado Civil
oGrupo Sanguneo
oNumero de celular
oNumero de telfono
oOBSERVACIONES
oPIE DE PAGINA QUE CUBRA TODA LA TABLAL.

Todos los datos a presentar en la pagina html deben ser afectados con
etiquetas.
Este producto es entregable al terminar la clase.
El instructor revisara cada una de las evidencias y toma la evidencia como
realizada de lo contrario ser no aprobada. No tardes. Ya es hora de iniciar.
Buena surte.
TIEMPO PARA ESTA ACTIVIDAD: 4 HORAS.
ACTIVIDAD N 4

FORMULARIOS EN HTML
Los formularios son una caracterstica del estndar HTML Que permite a los
autores recolectar informacin provista por los visitantes. Estos formularios
pueden resultar tiles para reunir informacin. Con esta actividad obtendremos
el conocimiento en casillas de verificacin, Botones de Radio, Listas. En fin son
muchas las opciones las cuales trabajaremos para obtener mayor rendimiento
en todos los aspectos tecnolgicos.

Para iniciar primero analicemos los siguiente:

CASILLAS DE VERIFICACION:
Una casilla de verificacin es una opcin simple que puede tomar uno de dos
valores: "marcado" "no marcado" ("checked" "unchecked"). Las casillas de
verificacin pueden ser agrupadas visualmente formando listas de opciones,
pero cada una de ellas es tratada individualmente.
Ejemplo:
<input name="cbipeliculas" type="checkbox" />Pelculas<br />
<input name="cbilibros" type="checkbox" checked="checked" />Libros<br />
<input name="cbiinternet" type="checkbox" />Internet
El resultado ser el siguiente:

BOTONES RADIO
Los botones radio que comparte el mismo nombre conforman un grupo de
opciones donde el usuario no puede seleccionar ms de una a la vez. Esto
significa que cuando un usuario elige una opcin, las dems son
automticamente deseleccionadas.
<input name="select_uno" type="radio" />Tecnico en sistemas<br/>
<input name="select_uno" type="radio" checked="checked" />TII's<br/>
<input name="select_uno" type="radio" />Centro Agropecuario</td>

Listas
Las listas pueden ser construidas utilizando tres elementos:
1.El elemento HTML select (contenedor principal),
2.El elemento HTML option (opcin simple)
3.El elemento HTML optgroup (grupo de opciones).

MIRA LOS EJEMPLOS.

<div>
<select>
<optgroup>
<option VALUE="1">VIUDO</option>
<option VALUE="2">CASADO</option>
<option VALUE="3">UNION LIBRE</option>
<option VALUE="4">SOLTERO</option>
</optgroup>
</select>
</div>
EL MS USADO Y FUNCIONAL.
<div>
<SELECT NAME="Colores" SIZE=10 MULTIPLE >
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
</div>
BOTONES

Es la solucin ms directa.
Name= nombre del botn
Id= parate fundamental para evitar la repeticin de los botones u objetos
Title= titulo del botn cuando el cursor su ubica enzima del mismo.
Abre y cierra.
Ejemplo:

<button name='btoton_prueba' id='btoton_prueba' title='Prueba 01' >

Boton Button</button>
Otro modelo se definen mediante la etiqueta <input> a la que le acompaan los
atributos:
1. Type="" Seguido de submit para enviar los datos del formulario y seguido
de reset para borrar los datos que se han introducido.
2. Value="" Indica el texto que incorporaran los botones. Normalmente,
enviar y borrar.
EJEMPLOS:

<input type="submit" value="Enviar" >

<input type="submit" value="Borrar" >
<input type="submit" value="Actualizar" >
<input type="submit" value="Cancelar" >

<textarea>
Esta etiqueta <textarea>...</textarea> nos permite asignar una zona de texto,
donde el usuario podr escribir una gran cantidad de texto.
Ejemplo
<textarea rows="8" cols="50">
PRUEBA DE ESCRITURA
</textarea>.

TIEMPO PARA ESTA ACTIVIDAD: 4 HORAS.

4. BIBLIOGRAFIA
-

Buscadores en la red, www.Google.com.co

5. AMBIENTES DE APRENDIZAJE, MEDIOS Y RECURSOS DIDCTICOS

Ambientes Tics, Computador, Tablero, Marcadores, Video Beam.

Conexin a Red.