SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

Procedimiento Ejecucin de la Formacin Profesional
Integral
GUA DE APRENDIZAJE

Versin: 02
Cdigo: GFPI-F-019

GUA DE APRENDIZAJE N
001
Programa
de
Cdigo:
228106
Anlisis
y Desarrollo de Sistemas de
IDENTIFICACIN DE LA GUIA DE APRENDIZAJE
Formacin:
Versin: 102
Informacin
Nombre del Proyecto:

Cdigo:

Fase del proyecto:

Planeacin
Actividad (es) de
Aprendizaje:

Actividad
(es)
del
Proyecto:
Construir el Sistema de
Informacin
en
ambiente Web

Resultados
de
Aprendizaje:
Representa el bosquejo
de
la
solucin
al
problema
presentado
por
el
cliente,
mediante
la
elaboracin
de
diagramas de casos de
uso, apoyado
en
el
anlisis
del
informe
de
requerimientos,
al
confrontar la situacin
problmica
con
el
usuario segn normas
y protocolos de la
organizacin

* Reconocer los
conceptos de pgina
Web, sitio Web,
protocolo HTTP,
navegador Web,
servidor Web,
hipertexto, HTML.
* Identificar la
estructura de una
pgina Web en HTML y
sus etiquetas bsicas.
* Emplear etiquetas
para dar formato a los
textos de una pgina
Web.
* Utilizar las etiquetas
necesarias para definir
diferentes tipos de
enlaces en una pgina
Web.
* Usar etiquetas para
fijar imgenes dentro de
una pgina Web.
* Crear tablas al interior
de una pgina Web.

Competencia:

Ambiente de
formacin
ESCENARIO
(Aula,
Laboratorio,
taller, unidad
productiva)
y elementos
y condiciones
de seguridad
industrial,
salud
ocupacional
y medio
ambiente

MATERIALES
FORMACIN
DEVOLUTIV
O
(Herramien
ta - equipo)

DE
CONSUMIB
LE
(unidades
empleadas
durante el
programa)

Teleinformti
ca

Ambiente
16
Teleinformti Computado
Analizar
los ca. Centro de res
requerimientos
Automatizaci
del cliente para n Industrial.
construir
el Ambiente
sistema de
con
16
informacin
equipos
de
cmputo
y
TV

Marcadore
s
(2),
Resma de
papel
carta

Pgina 1 de 20

SERVICIO NACIONAL DE APRENDIZAJE SENA

GUA DE APRENDIZAJE

SISTEMA INTEGRADO DE GESTIN

Proceso Gestin de la Formacin Profesional Integral
Procedimiento Ejecucin de la Formacin Profesional Integral
Duracin de
( en horas):

la

Versin: 02
Cdigo: GFPI-F-019

gua 18 horas

INTRODUCCIN

HTML es el lenguaje que se emplea para el desarrollo de pginas de internet.

Este lenguaje est constituido de elementos que el navegador interpreta y las despliega
en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer
imgenes sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina,
listas, tablas para tabular datos, etc.
Para poder crear una pgina HTML se requiere un simple editor de texto, puede ser block
de notas, o el notepad ++, y un navegador de internet (IExplorer, Chrome, FireFox etc.)

ESTRUCTURACION DIDACTICA DE LAS ACTIVIDADES DE APRENDIZAJE

3.1 Actividades de Reflexin inicial.

Pgina 2 de
20

Que sabes acerca de los trminos:

Pgina Web, sitio Web, protocolo HTTP, navegador Web, servidor Web, hipertexto, HTML, estructura de
una pgina Web en HTML y sus etiquetas bsicas?
Alguna vez has subido una pgina a un servidor gratuito?

3.2 Actividades de contextualizacin e identificacin de conocimientos

necesarios para el aprendizaje.)
Lee con detenimiento los siguientes conceptos y buscar EJEMPLOS para cada uno, los
puede pegar o insertar en la parte inferior de cada concepto.
Conceptos Bsicos:
Pgina Web: Se conoce como pgina web al documento que forma parte de un sitio
web y que suele contar con enlaces (tambin conocidos como hipervnculos o links)
para facilitar la navegacin entre los contenidos.
Sitio Web: Sitio es un lugar que sirve para algo o un espacio ocupado (o que puede
llegar a serlo). La nocin de Web, por su parte, hace referencia a Internet, una red de
redes que permite la interconexin de computadoras mediante un conjunto de
protocolos denominado TCP/IP.
TCP/IP: Es una denominacin que permite identificar al grupo de protocolos de red
que respaldan a Internet y que hacen posible la transferencia de datos entre redes de
ordenadores.
HTTP: HTTP es un protocolo de transferencia de hipertexto que se usa en la Web.
HTTP es una sigla que significa HyperText Transfer Protocol, o Protocolo de
Transferencia de Hipertexto. Este protocolo fue desarrollado por las instituciones
internacionales W3C y IETF y se usa en todo tipo de transacciones a travs de
Internet.

Pgina 3 de
20

Navegador Web: En el mbito de la tecnologa, un navegador o navegador web es

un programa informtico que permite visualizar la informacin contenida en una
pgina web, ya sea alojada en Internet o en un servidor local.
Servidor Web: Un servidor web es un programa que se ejecuta continuamente en
un computador, mantenindose a la espera de peticiones de ejecucin que le har un
cliente o un usuario de Internet.
HiperTexto: El hipertexto es una herramienta de software con estructura no
secuencial que permite crear, agregar, enlazar y compartir informacin de diversas
fuentes por medio de enlaces asociativos.
HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben
las pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite
escribir texto de forma estructurada, y que est compuesto por etiquetas, que
marcan el inicio y el fin de cada elemento del documento.
Pgina
Pgina
Web
Web

Hipertext
Hipertext
o
o

Sitio
Web
Sitio Web

HTM
L

Servidor
Servidor
Web
Web

Navegad
Navegad
or
Web
or Web

TCP/IP
TCP/IP

HTTP
HTTP

Para ampliar los conceptos consultar la presentacin Introduccin a HTML.ppt

Estructura de una pgina HTML

Pgina 4 de
20

Estructura bsica

Ejemplo Cdigo

Como ejercicio inicial vamos a crear una pgina bsica en HTML utilizando el
programa notepad ++, al abrir dicho programa digitaremos en un archivo nuevo el
cdigo de ejemplo que se encuentra en la parte superior.
Guardar el archivo con extensin html y depositarlo en una carpeta en el disco local
c: llamada pagina_prueba.
Nota: se recomienda que los nombres de las pginas, archivos o carpetas que se
escriban en un lenguaje de programacin que sea orientado a la web, como es el
caso de HTML, sean en minsculas y sin espacios, ya que ms adelante pueden
ocasionar problemas la subirlos al servidor.

Etiquetas para texto:

Como su nombre lo indican, las etiquetas para texto permiten modificar la apariencia
que tendr un bloque de texto al interior de la pgina. Se puede afectar todo un
prrafo, una lnea, una palabra, caracteres individuales, simplemente encerrando el
respectivo texto dentro de las etiquetas apropiadas. Algunos atributos de texto
pueden ser controlados por etiquetas diferentes obteniendo resultados similares
Para ampliar los conceptos consultar la presentacin HTML Body y Texto.ppt
Etiquetas para enlaces:

Pgina 5 de
20

A menudo encontramos, en pginas web y otros documentos html, enlaces que nos
conducen a otras pginas, documentos o aplicaciones. Cuando se abre la nueva
pgina o documento enlazado puede suceder que lo haga reemplazando a la pgina
de la que venimos o abriendo una nueva ventana del explorador.
La orden de enlazar con otra pgina web u otro documento se resuelve, en el
lenguaje html, con la etiqueta a que significa ancla o anchor en la expresin
anglosajona. Al encontrar un texto etiquetado con una etiqueta a, el cliente web
(Mozilla, IExplorer, Netscape, etc) lo presenta en la pantalla resaltado en color y
subrayado. Si el usuario de la pgina hace clic sobre ese texto marcado, el navegador
pedir al servidor otra pgina web o abrir otro documento.
Para ampliar los conceptos consultar la presentacin HTML Body y Texto.ppt
Etiquetas para imagen:
La etiqueta para las imgenes es <img ............ >, todo lo dems que va dentro son
detalles que se le aaden y que son necesarios (todos).
Esta etiqueta es algo especial, pues as como las etiquetas de prrafo y de ttulos (y
muchas otras que hemos visto) necesitan obligatoriamente de su correspondiente
etiqueta de cierre, la etiqueta de imagen no tiene etiqueta de cierre.
P.E:
1. <IMG SRC="amiguito.gif"> hace el llamado a una imagen que se encuentra en la misma carpeta
que el index.html

2. <IMG SRC=" imagenes/amiguito.gif"> hace llamado a una imagen que se encuentra en la carpeta
imgenes y que sta debe estar en la misma carpeta del index.

Pgina 6 de
20

Cualquiera de los mtodos para guardar imgenes en la pgina principal son vlidos, se recomienda
utilizar el segundo ya que una pgina puede llegar a tener muchsimas imgenes, y ser mejor tenerlas
organizadas en carpetas.

Para ampliar los conceptos consultar la presentacin HTML Texto e

imgenes.ppt
Etiquetas para 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> y </TABLE> son las etiquetas donde est contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila
(<th> y </th> si es una fila de cabecera)
<TD> y </TD> sealan una celda.
La tabla se va definiendo declarando una fila y a continuacin las celdas que contiene
esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas
contengan el mismo nmero de celdas.
Para ampliar los conceptos consultar la presentacin HTML Texto e
imgenes.ppt
Etiquetas para Formularios:
Un formulario HTML es una seccin de un documento que contiene contenido normal,
cdigo, elementos especiales llamados controles (casillas de verificacin
(checkboxes), radiobotones (radio buttons), menes, etc.), y rtulos (labels) en esos
controles. Los usuarios normalmente "completan" un formulario modificando sus
controles (introduciendo texto, seleccionando objetos de un men, etc.), antes de
enviar el formulario a un agente para que lo procese (p.ej., a un servidor web, a un
servidor de correo, etc.)
Aqu se muestra un ejemplo de un formulario simple que incluye rtulos, radio
botones y botones para reinicializar el formulario o para enviarlo:

Pgina 7 de
20

Para ampliar los conceptos consultar la presentacin HTML Formularios.ppt

3.1
Actividades de apropiacin del conocimiento
(Conceptualizacin y Teorizacin).
Crear varias pginas web que tengan las siguientes caractersticas:
La pgina debe llamarse index.html, debe tener una imagen de fondo completo
(pueden buscar en google images por fondos web o por c), adems de incluir una
lista con los tems que aparecen en pantalla. Puede agregarle una imagen a la pgina
del men.

Pgina 8 de
20

Vamos a crear un sitio que hable acerca de los 5 reinos de la naturaleza, para ello
vamos a construir una pgina index.html en una carpeta nueva, la pgina debe
cumplir con las siguientes caractersticas:
Una imagen de fondo.
Imagen general del tema la cual servir de introduccin junto con un texto que
se pueden descargar de Internet.
El texto de introduccin debe estar justificado.
Debe llevar un subttulo que diga Listado de Reinos.
Crear una lista ordenada para cada reino tal cual se muestra en la imagen en la
parte superior.
Luego vamos a crear las pginas secundarias del sitio, una para cada reino, por lo
que sern 6 en total incluyendo index.

Cada

pgina secundaria debe cumplir con las siguientes caractersticas:

Ttulo principal del Reino correspondiente.
Texto explicativo de cada reino, lo puede copiar de la web.
Al menos tres imgenes alusivas a cada reino.
Un enlace que retorne a la pgina principal.

Despus de tener dichas pginas, se procede a realizar el respectivo hipervnculo de

los tems de la pgina index.html con las pginas correspondientes a la informacin
que se solicita.
3.2

Actividades de transferencia del conocimiento.

A continuacin encontrar la documentacin bsica de algunos componentes del

lenguaje HTML 5 que van a ser utilizados
Manejo de Tablas en HTML4
Tablas Simples
Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas
donde cada una de ellas contiene un grupo de celdas (y no al revs). Las tablas,
como toda estructura en los documentos HTML, son definidas usando elementos.
Entonces, una tabla simple puede ser insertada en un documento HTML usando tres
elementos: el elemento HTML table (estructura contenedora principal), el elemento
HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo:
Pgina 9 de
20

Las tablas nos permiten representar y ordenar cualquier elemento de nuestra

presentacin en diferentes filas y columnas de modo que podamos resumir grandes
cantidades de informacin de una manera que puede representarse rpida y
fcilmente.
El contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table>.
Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las
tags <th> y <td> con sus correspondientes tags de cierre, indican para indicar las
filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de
celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las
tags <td>.....</td> indican que se trata de celdas comunes.
Los <td> elementos son los contenedores de datos en la tabla. Los <td> elementos
pueden contener todo tipo de elementos HTML, como texto, imgenes, listas, otras
tablas, etc
El ancho de una tabla puede ser definido mediante CSS.

Resultado de la tabla

Pgina 10 de
20

Una tabla HTML con un atributo border

Si no especifica un borde de la mesa, que se mostrar sin fronteras. Un borde se puede
aadir usando el atributo border:

HTML encabezamientos Tabla

Encabezamientos de las tablas se definen con el <th> etiqueta. Por defecto, todos los
principales navegadores muestran encabezados de la tabla en negrita y centrado:

Pgina 11 de
20

Tablas con Colspan y Rowspan

Es la forma de fusionar celdas en una tabla.
Rowspan, indica el nmero de fi las que ocupar la celda. Por defecto ocupa
una sola fi la.
Colspan, indica el nmero de columnas que ocupar la celda. Por defecto
ocupa una sola columna.
De esta forma si ponemos <td colsan=2>, quiere decir que la celda actual se
extiende en el ancho de dos celdas.
Algo parecido ocurre si ponemos <td rowspan=3>, la celda ocupar el alto de
3 celdas normales.
Veamos un ejemplo:
Si visualizamos esta tabla, podemos observar que la primera celda ocupa tres
fi las, y no sobrepasa la altura total de las tres celdas que tiene a la derecha.

Pgina 12 de
20

Cdigo fuente de la tabla:

Las tablas tambin manejas atributos entre sus etiquetas. Ver y aplicar algunos atributos a las
tablas creadas teniendo en cuenta la informacin de la siguiente pgina web
http://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.html
a. Utilizando tablas HTML hacer la siguiente pgina web

Pgina 13 de
20

b. Utilizando tablas HTML hacer la siguiente pgina web

c. Utilizando tablas HTML hacer la siguiente pgina web

Pgina 14 de
20

d. Utilizando tablas HTML hacer la siguiente pgina web

e. Retomando la actividad de los reinos de la naturaleza, y aplicando los conceptos

recin vistos de las etiquetas de tablas y atributos, vamos a redisear el sitio que
construimos inicialmente:

Pgina 15 de
20

La pgina principal o index debe tener el texto e imagen en una tabla como se
observa en la muestra.

Las pginas de cada uno de los reinos de la naturaleza deben contener el texto en
una tabla con borde = 0. Para las imgenes se deber construir una tabla aparte y
deben tener el mismo tamao conservando la relacin ancho y altura para no
distorsionarlas.
Se aconseja que el tamao del texto sea tamao 4 y la fuente Arial.

3.3 Actividades de evaluacin.

Evidencias de
Criterios de Evaluacin
Aprendizaje
Evidencias de
REPRESENTA PROCESOS
Conocimiento :
DEL SISTEMA A PARTIR

Tcnicas e Instrumentos
de Evaluacin

Pgina 16 de
20

Evidencias de
Desempeo:
Instrumento con ejercicios
con los temas tratados en
la presente gua de
aprendizaje

DE LA CONSTRUCCIN
DE ALGORITMOS, COMO
PARTE DE LA SOLUCIN A
SITUACIONES
PLANTEADAS,
UTILIZANDO LENGUAJES
DE
PROGRAMACIN
ORIENTADOS A OBJETOS.

Preguntas
y
ejercicios
sobre
etiquetas
HTML
planteadas
en
un
cuestionario CT-001

Materiales
formacin
RECURSOS
PARAdeEL
APRENDIZAJE
Materiales de formacin
devolutivos:
(Equipos/Herramientas)

ACTIVIDADES
DEL
PROYECTO

Talento Humano (Instructore

DURACI
N
(Horas)
Descripcin

Construir
el Sistema
de
Informaci
n
en
ambiente
Web

(consumibles)

44

Computador
de escritorio

Cantidad

16

Descripcin

Cantidad

Marcadores
Resma papel
carta

3
2

Especialidad

Ingeniero de
sistemas

GLOSARIO DE TERMINOS
Directorio web
Las pginas que se incluyen en la base de datos del directorio son previamente
revisadas por humanos (no es automatizado como los crawlers o araas). No se
agrega la pgina completa, sino nicamente algunos datos tales como el ttulo, la
URL y un breve comentario redactado especialmente que explique el contenido, y se
la ubica en una categora. Un ejemplo es www.yahoo.com
DNS
Servidor de Nombres de Dominio. Servidor automatizado utilizado en el internet cuya
tares es convertir nombres fciles de entender (como www.panamacom.com) a
direcciones numricas de IP.
Dominio

Pgina 17 de
20

Cant

Sistema de denominacin de hosts en Internet el cual est formado por un conjunto

de caracteres el cual identifica un sitio de la red accesible por un usuario. Los
dominios van separados por un punto y jerrquicamente estn organizados de
derecha a izquierda. Comprenden una red de computadoras que comparten una
caracterstica comn, como el estar en el mismo pas, en la misma organizacin o en
el mismo departamento. Los ms comunes son .com, .edu, .net, .org, .biz, .info
DoS
Denial Of Service (DoS), denegacin de servicio, incidente en el cual un usuario o una
organizacin se ven privados de un recurso que normalmente podran usar.
Habitualmente, la prdida del servicio supone la indisponibilidad de un determinado
servicio de red, como el correo electrnico, o la prdida temporal de toda la
conectividad y todos los servicios de red. En los peores casos, por ejemplo, un sitio
web accedido por millones de personas puede verse forzado temporalmente a cesar
de operar.
FAQ
Siglas del ingls Frequently Asked Questions (Preguntas Frequentes), que como su
nombre lo dice, es una compilacin de las preguntas ms frecuentes que se hacen de
cualquier tema. Es comn ver la palabra FAQ en los menus de los sitios web, aunque
sean en espaol. Leer los FAQs de un producto, sitio web, empresa, etc. puede ayudar
a resolver problemas o situaciones sin necesidad de contactar a alguien para
preguntarle.
Favicon
Corto en ingls para Favorite Icon (Icono Favorito). Es un mini grafico que puede ser
una marca o logo. Cuando un sitio web lo utiliza, aparece a los usuarios en la barra de
direcciones del navegador. En Internet Explorer salen cuando la pgina web con el
Favicon se guarda como Favorito (Bookmark). En Firefox sale siempre aunque no sea
un website marcado como favorito.
Favoritos
Marcador de un sitio web. Unos exploradores dicen 'favorito', otros usan el trmino
'marcador'. En ingls es 'bookmark'. La mayora de los navegadores tienen su lista de
"Favoritos", donde se puede guardar las direcciones de sitios web preferidos.
Firefox
Mozilla Firefox (originalmente conocido como Phoenix y Mozilla Firebird) es un
navegador de web grfico, gratuito, de cdigo abierto, desarrollado por la Fundacin
Mozilla y miles de colaboradores en el mundo. La versin 1.0 salio el 9 de noviembre
de 2004. Instalable en los sistemas operativos Windows, Linux i686 y Mac Os X.
Firewall
Combinacin de hardware y software la cual separa una red de rea local (LAN) en
dos o ms partes con propsitos de seguridad. Su objetivo bsico es asegurar que
todas las comunicaciones entre dicha red e Internet se realicen conforme a las
polticas de seguridad de la organizacin que lo instala. Adems, estos sistemas
suelen incorporar elementos de privacidad, autentificacin, etc.
Firma digital
Informacin cifrada que identifica al autor de un documento electrnico y autentica
su identidad.
Flash
Creado por Macromedia, esta tecnologa permite la creacin de animaciones, entre
otras cosas, utilizando menos ancho de banda que otros formatos, como AVI o MPEG.
Foros de Discusin
Pgina 18 de
20

Servicio automatizado de mensajes, a menudo moderado por un propietario, en el

cual los suscriptores reciben mensajes dejados por otros suscriptores por un tema
dado. Los mensajes se envan por correo electrnico.
Frames o marcos
Opcin que ofrece el lenguaje HTML de dividir una pgina web en varias zonas. Cada
una de las cuales puede tener un contenido independiente de las dems de forma
que cada zona es asimismo un frame.
Freeware
Programas de Dominio Pblico. Aplicaciones que pueden obtenerse directamente de
Internet con la caracterstica de que no es necesario pagar por su utilizacin.
FSF
Fundacin para el Software Libre. Entidad que busca eliminar las restricciones de uso,
copia, modificacin y distribucin del software. Apoya el desarrollo de sistemas
operativos (Linux), compilador GNU C (GCC), PERL, etc. Promueve, desarrolla el uso
del software libre en todas las reas de la computacin. Especficamente, la
Fundacin pone a disposicin de todo el mundo un completo e integrado sistema de
software llamado GNU. La mayor parte de este sistema est ya siendo utilizado y
distribuido. El costo del software nicamente est determinado por el costo del
material utilizado para distribuirlo.
FTP
File Transfer Protocol. Protocolo de transferencia de archivos. Se usan programas
clientes para FTP como son por ej. (para Windows) LeapFTP o Core FTP con soporte
para ssl, por mencionar algunos. Se usan programas servidores de FTP como por ej.
NcFTPd. Estos programas permiten la coneccin entre dos computadoras, usando por
lo general el puerto 21 para conectarse (aunque se puede usar otros puertos). Por
medio del Protocolo de transferencia de archivos se pueden uploadear y downloadear
archivos entre el cliente y el host (servidor).
REFERENTES BIBLIOGRFICOS
til enlace para aprender HTML5 por medio de ejemplos
http://www.w3schools.com/html/
enlace que muestra las etiquetas utilizadas en HTML de forma detallada
https://www.uv.es/jac/guia/
En esta pgina pueden conocer la estructura de HTML
http://www.codecademy.com/es/glossary/html#cabeza
Contiene descripciones y ejemplos de cada una de las etiquetas y
atributos
http://www.htmlpoint.com
Sitio que muestra las diferentes etiquetas y atributos propios de las
tablas
http://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.htm
l

Pgina 19 de
20

Editor online de HTML

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists
Pgina de la fundacin Mozilla para ensear HTML5
https://developer.mozilla.org/es/docs/Web/HTML
CONTROL DEL DOCUMENTO (ELABORADA POR)
Jos Fernando Murillo Arango
Alejandra Duque Ceballos

Pgina 20 de
20