SERVICIO NACIONAL DE APRENDIZAJE SENA

SISTEMA INTEGRADO DE GESTIN

Procedimiento Ejecucin de la Formacin Profesional
Integral
GUA DE APRENDIZAJE

Versin: 02
Fecha: 07/10/2016
Cdigo: GFPI-F-019

GUA DE APRENDIZAJE N 5

1. IDENTIFICACIN DE LA GUIA DE APRENDIZAJE

Programa de Formacin: Tcnico
en Cdigo: 228185
Sistemas
Versin: 1
Mantenimiento,
ensamble
y
soporte tcnico en
Nombre del Proyecto:
redes y cableado
Cdigo: 1117090
estructurado
en
sanidad y en el
hospital
de
la
polica.
Fase del proyecto:
Anlisis
Actividad (es) de
Aprendizaje:
Reconocimiento
del Lenguaje de
Actividad
(es)
del marcado para la
elaboracin
de
Proyecto:
Sitios
Web
HTML,
Identificar
conceptos
y
generales y aplicacin etiquetas
de las herramientas del estructura bsica.
paquete Microsoft office
(Word - Power Point,
Excel y Acces.

Resultados
Aprendizaje:

Ambiente
de
formacin
ESCENARIO
Ambiente
sistemas
CIDE, Sede
Sibat.

de Aplicar controles y Competenci

estructuras
a:
bsicas
de
.
programacin de
un
lenguaje
orientado
a
eventos
de
acuerdo con el
problema
a
solucionar.
Duracin de la gua ( en 30 Horas
horas):

MATERIALES DE
FORMACIN
DEVOLUTI CONSUMIB
VO
LE
(Herramie (unidades
nta empleadas
equipo)
durante el
programa)
Equipo de
escritorio
Marcadore
con
el s
paquete
borrables.
de
office
debidame
nte
instalado.
Aplicar
herramientas
Ofimticas,
redes
sociales y colaborativas
de acuerdo con el
proyecto a desarrollar.

Pgina 1 de 19

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

Versin: 02
Fecha: 07/10/2016
Cdigo: GFPI-F-019

2. INTRODUCCIN
Estimado Aprendiz:

La informacin en la Red necesita viajar de una manera rpida y precisa, para

lo cual se cre el protocolo de comunicacin HTTP o Hyper Text Transport
Protocol, el cual fue desarrollado en un laboratorio de fsica de partculas del
CERN en Suiza con el fin de transferir rpidamente a todos los usuarios los
ltimos resultados de sus investigaciones. Fue entonces este el comienzo de
las redes compuestas por diferentes servidores que proveen informacin de
todo tipo a los usuarios.
Inicialmente el WWW (Worl Wide Web) era poco interactivo, limitndose a
desplegar la informacin en modo texto. Luego el permanente avance de la
tecnologa, surgieron los visualizadores grficos (browsers) y con ellos el HTML
(Hypertext Markup Languaje) lenguaje utilizado para la presentacin de la
informacin en la red.
La finalidad de los browsers, como Netscape o Internet Explorer es interpretar
el cdigo HTML que llega a nuestros computadores por medio del HTTP.
Ahora para proporcionar mayor versatilidad a las pginas, se utiliza el Common
Gateway Interface (CGI), que le permite a un programa correr en el servidor de
acuerdo a los requerimientos del protocolo HTTP de las pginas.
3. ESTRUCTURACION DIDACTICA DE LAS ACTIVIDADES DE APRENDIZAJE
3.1 Actividades de Reflexin inicial.
Ingrese al enlace Foros de discusin, dispuesto en la plataforma y responda las
siguientes preguntas segn su criterio, no Investigue en internet, solo exponga su
punto de vista.
1. Considera que es importante para una empresa tener su propio sitio Web?
Por qu?
2. Nombre algunas ventajas de tener un Sitio Web
3.2 Actividades de contextualizacin e identificacin de conocimientos
necesarios para el aprendizaje.)
En hojas para el portafolio, investigue los siguientes conceptos y realice un ejemplo
de cada etiqueta.

Pgina 2 de
19

1. Investigue qu es el lenguaje HTML

2. Qu son los TAGS
3. Investigue las etiquetas de mayor uso en la creacin de pginas Web con
HTML:
a) Inicio de pgina
b) Cierre de pgina
c) Etiquetas de formato (Negrita, Cursiva, Subrayado, Preformateado)
d) Etiquetas de alineacin (Texto alineado a la izquierda, derecha, centrado y
justificado)
e) Etiquetas para cambiar la Fuente (Tamao, tipo de letra, color de letra)
f) Etiquetas para prrafos (Nuevo prrafo, lnea horizontal, Salto de lnea)
g) Etiquetas para generar listas (Lista Numerada, Lista con vietas)
h) Etiquetas para vnculos
i) Etiquetas para agregar imgenes
j) Etiquetas para generar tablas
4. Mediante un ejemplo diga cul es la estructura bsica de una pgina Web en
HTML
5. Investigue el cdigo de colores utilizada en HTML
Durante la formacin se har una socializacin por parte de los aprendices con apoyo
de la instructora, con el fin de aprender el uso de las etiquetas de HTML.
3.3
Actividades de apropiacin del conocimiento (Conceptualizacin
y Teorizacin).
Desarrolle los siguientes ejemplos en el Bloc de notas, cada ejemplo debe quedar en
un documento diferente, al momento de guardarlo escriba el nombre del ejercicio y
colquele .html, guarde todos los ejercicios dentro de una misma carpeta, luego
busque el archivo guardado y bralo para ver los resultados obtenidos, explique para
que sirve cada una de las etiquetas utilizadas en el ejercicio, sto se debe hacer en
un documento de Word.
EJEMPLO 1.
<html>
<head>
<title>La exploracin espacial</title>
</head>
<body>
<h2>La exploracin espacial</h2>
<p>La <strong>exploracin espacial</strong> designa los esfuerzos del hombre en
estudiar el espacio y sus astros desde el punto de vista cientfico y de su explotacin
econmica. Estos esfuerzos pueden involucrar tanto seres humanos viajando en
naves espaciales como satlites con recursos de telemetra o sondas teleguiadas
enviadas a otros planetas (orbitando o aterrizando en la superficie de estos cuerpos
celestes).</p>
<p>Las personas que pilotan naves espaciales, o son pasajeros en ellas, se llaman
astronautas
(en
Rusia:
<em>cosmonautas</em>;
en
China:
Pgina 3 de
19

<em>taikonautas</em>). Tcnicamente se considera astronauta a todo aquel que

emprenda un vuelo sub-orbital (sin entrar en rbita) u orbital a como mnimo 100 km
de altitud (considerado el lmite externo de la atmsfera).</p>
<p>El cielo siempre ha atrado la atencin y los sueos del hombre. Ya en 1634 se
public la que se considera primera novela de ciencia ficcin, <em>Somnium</em>,
de <strong>Johannes Kepler</strong>, que narra un hipottico viaje a la Luna. Ms
tarde, en 1865, en una famosa obra de ficcin titulada <em>"De la Terre la
Lune"</em>, <strong>Julio Verne</strong> escribe sobre un grupo de hombres que
viaj hasta la Luna usando un gigantesco can.</p>
<p>En Francia, <strong>Georges Mlis</strong>, uno de los pioneros del cine,
tomaba la novela de Verne para crear <em>"Le voyage dans la Lune"</em> (1902),
una de las primeras pelculas de ciencia ficcin en la que describa un increble viaje a
la Luna. En obras como <em>"The War of the Worlds"</em> (1898) y <em>"The
First Men in The Moon"</em> (1901), <strong>Herbert George Wells</strong>
tambin se concibieron ideas de exploracin del espacio y de contacto con
civilizaciones extraterrestres.</p>
</body>
</html>
EJEMPLO 2.
<html>
<head>
<title>El rtico ha perdido el 14% de su hielo marino perenne en un solo ao</title>
</head>
<body>
<h1>El rtico ha perdido el 14% de su hielo marino perenne en un solo ao</h1>
<p><strong>WASHINGTON.-</strong> El hielo perenne del rtico se redujo en un
14%
durante
el
ltimo
ao,
al
perder
<strong>720.000
kilmetros
cuadrados</strong>, una superficie superior a la Pennsula Ibrica, segn datos de la
<acronym
title="National
Aeronautics
and
Space
Administration">NASA</acronym>.</p>
<p>Segn el <acronym title="Laboratorio de Propulsin a Chorro">JPL</acronym>,
la prdida del hielo perenne, que debiera mantenerse durante todo el verano, fue
todava mayor y se acerc a un 50% en el momento en que ese hielo se desplazaba
desde el rtico oriental hacia el oeste.</p>
<p><strong>Son Nghiem</strong>, investigador del <acronym title="Laboratorio
de Propulsin a Chorro">JPL</acronym> ha declarado que:</p>
<blockquote><em>"Los cambios registrados en esos aos en el hielo rtico son
rpidos y espectaculares. De mantenerse la situacin, sta tendr un impacto
profundo en el ambiente, as como en el transporte marino y el
comercio."</em></blockquote>

Pgina 4 de
19

</body>
</html>
EJEMPLO 3.
<html>
<head>
<title>Espacios en blanco arbitrarios</title>
</head>
<body>
<h2>Caractersticas de los planetas</h2>
<pre>
## Nombre
Dimetro relativo
Perodo orbital
0,382
0,24 aos
0
Venus
0,949
0,62 aos
0
Tierra
1
1 ao
1
Marte
0,532
1,88 aos
2
Jpiter
11,209
11,86 aos
49
Saturno
9,449
29,46 aos
52
Urano
4,007
84,01 aos
27
Neptuno
3,883
164,80 aos
13
</pre>
</body>
</html>

Nmero de lunasMercurio

EJEMPLO 4.
<html>
<head>
<title>Mi Sitio</title>
</head>
<body>
<h1>Mi Sitio</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis posuere
justo. Nam vel neque. Proin sagittis mauris sit amet nisl. Sed ipsum. Aliquam vitae
justo.</p>
<h2>Ultimos proyectos</h2>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat. Aliquam dui ligula, porttitor eu, facilisis vitae, ornare
sed, tortor.</p>
<p><a href="portafolio/indice.html" title="ltimos proyectos realizados por Mi
Sitio">Acceder a los ltimos proyectos de Mi Sitio</a></p>
</body>
</html>

Pgina 5 de
19

EJEMPLO 5.
<html>
<head>
<title>Mi Sitio</title>
</head>
<body>
<h1>Mi Sitio</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis posuere
justo. Nam vel neque. Proin sagittis mauris sit amet nisl. Sed ipsum. Aliquam vitae
justo.</p>
<h2>Ultimos proyectos</h2>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat. Aliquam dui ligula, porttitor eu, facilisis vitae, ornare
sed, tortor.</p>
<p><a href="portafolio/indice.html" title="ltimos proyectos realizados por Mi
Sitio">Acceder a los ltimos proyectos de Mi Sitio</a></p>
</body>
</html>
Pgina principal del portafolio: ste cdigo va en otro documento porque se estn
trabajando hipervnculos. Analice el cdigo y verifique si los enlaces funcionan, de lo
contrario busque el error y corrjalo.
<html>
<head>
<title>Mi Sitio</title>
</head>
<body>
<p><a
href="portafolio/indice.html"
title="Pgina
principal
de
Mi
Sitio"
rel="index">Volver a la pgina principal</a></p>
<h1>ltimos proyectos</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis posuere
justo. Nam vel neque.</p>
<h3>Proyecto 1</h3>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat.</p>
<p><a
href="../imgenes/proyecto1.png"
title="Imagen
del
Proyecto
1"
type="image/png">Ver imagen del Proyecto 1</a></p>
<h3>Proyecto 2</h3>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat.</p>
<p><a
href="../imgenes/proyecto2.png"
title="Imagen
del
Proyecto
2"
type="image/png">Ver imagen del Proyecto 2</a></p>
</body>
</html>
EJERCICIO 6.

Pgina 6 de
19

<html>
<head>
<title>Lista simple anidada</title>
</head>
<body>
<h1>Menu</h1>
<ul>
<li>Inicio</li>
<li>
<strong>Noticias</strong>
<ul>
<li><a href="#" title="Ver las noticias ms recientes">Recientes</a></li>
<li><strong><a href="#" title="Ver las noticias ms ledas">Ms
ledas</a></strong></li>
<li><a href="#" title="Ver las noticias ms valoradas">Ms valoradas</a></li>
</ul>
</li>
</ul>
</body>
</html>
EJERCICIO 7.
<html>
<head>
<title>Lista compleja anidada</title>
</head>
<body>
<h1>Menu</h1>
<ul>
<li>Inicio</li>
<li>
<strong>Noticias</strong>
<ul>
<li><a href="#" title="Ver las noticias ms recientes">Recientes</a></li>
<li><strong><a href="#" title="Ver las noticias ms ledas">Ms
ledas</a></strong></li>
<li><a href="#" title="Ver las noticias ms valoradas">Ms valoradas</a></li>
</ul>
</li>
<li>
Artculos
<ol>
<li><strong>XHTML</strong></li>
<li>CSS</li>
<li>JavaScript</li>
<li>Otros</li>
</ol>
</li>
Pgina 7 de
19

<li>
Contacto
<dl>
<dt><em>Email</em></dt>
<dd><strong>nombre@direccion.com</strong></dd>
<dt><em>Telfono</em></dt>
<dd>900 900 900</dd>
<dt><em>Fax</em></dt>
<dd>900 900 900</dd>
</dl>
</li>
</ul>
</body>
</html>
EJERCICIO 8.
<html>
<head>
<title>Mi Sitio</title>
</head>
<body>
<p><a
href="portfolio/indice.html"
title="Pgina
principal
de
Mi
Sitio"
rel="index">Volver a la pgina principal</a></p>
<h1>ltimos proyectos</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis posuere
justo. Nam vel neque.</p>
<h3>Proyecto 1</h3>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat.</p>
<p><img src="../imgenes/proyecto1.png" title="Imagen del Proyecto 1" /></p>
<h3>Proyecto 2</h3>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat.</p>
<p><img src="../imgenes/proyecto2.png" title="Imagen del Proyecto 2" /></p>
</body>
</html>
EJERCICIO 9.
<html>
<head>
<title>Ejemplo de tabla sencilla</title>
</head>
<body>
<h1>Su pedido</h1>
<table>
<tr>
<th scope="col">Nombre producto</th>
Pgina 8 de
19

<th scope="col">Precio unitario</th>

<th scope="col">Unidades</th>
<th scope="col">Subtotal</th>
</tr>
<tr>
<td>Reproductor MP3 (80 GB)</td>
<td>192.02</td>
<td>1</td>
<td>192.02</td>
</tr>
<tr>
<td>Fundas de colores</td>
<td>2.50</td>
<td>5</td>
<td>12.50</td>
</tr>
<tr>
<td>Reproductor de radio &amp; control remoto</td>
<td>12.99</td>
<td>1</td>
<td>12.99</td>
</tr>
<tr>
<th scope="row">TOTAL</th>
<td>-</td>
<td>7</td>
<td><strong>207.51</strong></td>
</tr>
</table>
</body>
</html>
EJERCICIO 10.
<html>
<head>
<title>Ejemplo de tabla avanzada</title>
</head>
<body>
<h1>Resultado de la bsqueda</h1>
<table summary="Tabla con los datos de los resultados de la bsqueda">
<caption>Resultado de la bsqueda</caption>
<tr>
<th abbr="Imagen del producto" scope="col">Imagen</th>
<th abbr="Datos del producto" scope="col">Datos</th>
</tr>
<tr>
<td>
Pgina 9 de
19

<img src="imagenes/portatil.png" alt="Imagen del ordenador porttil" />

</td>
<td>
<h4><a href="#" title="Ver ms informacin sobre el porttil">Porttil - 3 GHz 4 GB RAM</a></h4>
<p><a href="#" title="Comprar el porttil">Comprar:</a> <del>2.990
&euro;</del> <strong>2.599 &euro;</strong></p>
</td>
</tr>
<tr>
<td><img src="imagenes/videocamara.png" alt="Imagen de la videocmara"
/></td>
<td>
<h4><a href="#" title="Ver ms informacin sobre la
videocmara">Videocmara - Alta definicin 1080p - 60 GB</a></h4>
<p><a href="#" title="Comprar la videocmara">Comprar:</a> <del>1.099
&euro;</del> <strong>999 &euro;</strong></p>
</td>
</tr>
<tr>
<td><img src="imagenes/tv.png" alt="Imagen del televisor" /></td>
<td>
<h4><a href="#" title="Ver ms informacin sobre el televisor">Televisor - 46" Full HD</a></h4>
<p><a href="#" title="Comprar el televisor">Comprar:</a> <del>1.999
&euro;</del> <strong>1.799 &euro;</strong></p>
</td>
</tr>
<tr>
<td><img src="imagenes/movil.png" alt="Imagen del mvil" /></td>
<td>
<h4><a href="#" title="Ver ms informacin sobre el mvil">Mvil - 3G - Wi-Fi 8 GB</a></h4>
<p><a href="#" title="Comprar el mvil">Comprar:</a> <del>399
&euro;</del> <strong>349 &euro;</strong></p>
</td>
</tr>
</table>
</body>
</html>
EJERCICIO 11.
<html>
<head>
<title>Ejemplo de tabla compleja</title>
</head>
<body>
<h3>Comparativa de reproductores MP3</h3>
Pgina 10 de
19

<table summary="Tabla comparativa de las caractersticas tcnicas de los

reproductores MP3">
<caption>Tabla comparativa de las caractersticas tcnicas de los reproductores
MP3</caption>
<tr>
<th></th>
<th abbr="Reproductor mini" scope="col" colspan="3">
<img src="imagenes/mp3_pequeno_blanco.png" alt="Imagen del reproductor
MP3 pequeo de color blanco" />
<img src="imagenes/mp3_pequeno_negro.png" alt="Imagen del reproductor MP3
pequeo de color negro" />
<br/><strong>MP3 mini</strong>
</th>
<th abbr="Reproductor estndar" scope="col" colspan="2">
<img src="imagenes/mp3_grande_blanco.png" alt="Imagen del reproductor MP3
grande de color blanco" />
<img src="imagenes/mp3_grande_negro.png" alt="Imagen del reproductor MP3
grande de color negro" />
<br/><strong>MP3 grande</strong>
</th>
</tr>
<tr>
<th scope="row" abbr="Capacidad">Capacidad de almacenamiento</th>
<td>4GB <br/> (1.000 canciones)</td>
<td>8GB <br/> (2.000 canciones)</td>
<td>16GB <br/> (4.000 canciones)</td>
<td>30GB <br/> (7.500 canciones)</td>
<td>80GB <br/> (20.000 canciones)</td>
</tr>
<tr>
<th scope="row" abbr="Colores disponibles">Colores</th>
<td>
<img src="imagenes/color_blanco.png" alt="Color blanco" />
</td>
<td>
<img src="imagenes/color_negro.png" alt="Color blanco" />
<img src="imagenes/color_verde.png" alt="Color verde" />
<img src="imagenes/color_azul.png" alt="Color azul" />
<img src="imagenes/color_rosa.png" alt="Color rosa" />
</td>
<td>
<img src="imagenes/color_negro.png" alt="Color negro" />
</td>
<td colspan="2">
<img src="imagenes/color_blanco.png" alt="Color blanco" />
<img src="imagenes/color_negro.png" alt="Color negro" />
</td>
</tr>
<tr>
Pgina 11 de
19

<th scope="row" abbr="Tamao de pantalla">Pantalla</th>

<td colspan="3">LCD de 3 cm (diagonal) con retroiluminacin</td>
<td colspan="2">LCD de 6 cm (diagonal) con retroiluminacin</td>
</tr>
<tr>
<th rowspan="2" scope="row" abbr="Tiempo de carga">Tiempo de carga</th>
<td rowspan="2" colspan="3">Unas 3 horas</td>
<td colspan="2">Unas 4 horas</td>
</tr>
<tr>
<td colspan="2">Unas 2 horas para alcanzar el 80% de la capacidad</td>
</tr>
</table>
</body>
</html>
EJERCICIO 12.
<html>
<head>
<title>Rellena tu CV</title>
</head>
<body>
<h3>Rellena tu CV</h3>
<form action="/php/insertar_cv.php" method="post" enctype="multipart/formdata">
Nombre <br/>
<input type="text" name="nombre" value="" size="20" maxlength="30" />
<br/>
Apellidos <br/>
<input type="text" name="apellidos" value="" size="50" maxlength="80" />
<br/>
Contrasea <br/>
<input type="password" name="contrasena" value="" maxlength="10" />
<br/>
DNI <br/>
<input type="text" name="dni" value="" size="10" maxlength="9" />
<br/>
Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre
<br/>
<input type="radio" name="sexo" value="mujer" /> Mujer
<br/><br/>
Incluir mi foto <input type="file" name="foto" />
<br/><br/>
<input name="suscribir" type="checkbox" value="suscribir" checked="checked"/>
Suscribirme al boletn de novedades
<br/><br/>
Pgina 12 de
19

<input type="submit" name="enviar" value="Guardar cambios" />

<input type="reset" name="limpiar" value="Borrar los datos introducidos" />
</form>
</body>
</html>
EJERCICIO 13. Cambie el nombre de las ciudades por departamentos de Colombia.
<html>
<head>
<title>Rellena tu CV</title>
</head>
<body>
<h3>Rellena tu CV</h3>
<form action="/php/insertar_cv.php" method="post" enctype="multipart/formdata">
<fieldset>
<legend>Datos personales</legend>
<label for="provincia">Provincia</label> <br/>
<select id="provincia" name="provincia">
<option value="" selected="selected">- selecciona -</option>
<option value="01">lava/Araba</option>
<option value="02">Albacete</option>
<option value="03">Alicante/Alacant</option>
<option value="04">Almera</option>
<option value="33">Asturias</option>
<option value="05">vila</option>
<option value="06">Badajoz</option>
<option value="07">Balears (Illes)</option>
<option value="08">Barcelona</option>
<option value="09">Burgos</option>
<option value="10">Cceres</option>
<option value="11">Cdiz</option>
<option value="39">Cantabria</option>
<option value="12">Castelln/Castell</option>
<option value="51">Ceuta</option>
<option value="13">Ciudad Real</option>
<option value="14">Crdoba</option>
<option value="15">Corua (A)</option>
<option value="16">Cuenca</option>
<option value="17">Girona</option>
<option value="18">Granada</option>
<option value="19">Guadalajara</option>
<option value="20">Guipzcoa/Gipuzkoa</option>
<option value="21">Huelva</option>
<option value="22">Huesca</option>
<option value="23">Jan</option>
<option value="24">Len</option>
<option value="27">Lugo</option>
Pgina 13 de
19

<option value="25">Lleida</option>
<option value="28">Madrid</option>
<option value="29">Mlaga</option>
<option value="52">Melilla</option>
<option value="30">Murcia</option>
<option value="31">Navarra</option>
<option value="32">Ourense</option>
</select>
<br/><br/>
<label for="fecha_dia">Fecha de nacimiento</label> <br/>
<input type="text" size="3" maxlength="2" id="fecha_dia" name="fecha_dia" />
de
<select id="fecha_mes" name="fecha_mes">
<option value="1">Enero</option>
<option value="2">Febrero</option>
<option value="3">Marzo</option>
<option value="4">Abril</option>
<option value="5">Mayo</option>
<option value="6">Junio</option>
<option value="7">Julio</option>
<option value="8">Agosto</option>
<option value="9">Septiembre</option>
<option value="10">Octubre</option>
<option value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
de
<input type="text" size="5" maxlength="4" id="fecha_ano" name="fecha_ano" />
<br/><br/>
<label for="temasDeInteres">Temas de inters</label> <br/>
<select
multiple="multiple"
size="5"
id="temasDeInteres"
name="temasDeInteres">
<option value="3105">Administracin de bases de datos</option>
<option value="3106">Anlisis y programacin</option>
<option value="3107">Arquitectura</option>
<option value="3108">Calidad</option>
<option value="3109">ERP, CRM, Business Intelligence</option>
<option value="3110">Gestin de proyectos</option>
<option value="3111">Hardware, redes y seguridad</option>
<option value="3112">Helpdesk</option>
<option value="3113">Sistemas</option>
<option value="3114">Telecomunicaciones</option>
</select>
</fieldset>

Pgina 14 de
19

</form>
</body>
</html>
EJERCICIO 14
<html>
<head>
<title>Informacin sobre el producto</title>
</head>
<body>
<h3>Informacin sobre el producto</h3>
<form action="/php/insertar_subasta.php" method="post" enctype="multipart/formdata">
<fieldset>
<legend>Datos bsicos</legend>
<label for="nombre">Nombre</label> <br/>
<input type="text" name="nombre" id="nombre" size="50" maxlength="250" />
<br/><br/>
<label for="descripcion">Descripcin</label> <br/>
<textarea name="descripcion" id="descripcion" cols="40" rows="5"></textarea>
<br/><br/>
Foto <input type="file" name="foto" />
<br/><br/>
<input name="contador" type="checkbox" value="si" /> Aadir contador de visitas
</fieldset>
<fieldset>
<legend>Datos econmicos</legend>
<label for="precio">Precio</label>
<input type="text" size="5" id="precio" name="precio" /> &euro;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="impuestos">Impuestos</label>
<select id="impuestos" name="impuestos">
<option value="4">4%</option>
<option value="7">7%</option>
<option value="16">16%</option>
<option value="25">25%</option>
</select>
<br/><br/>
<label>Promocin</label> <br/>
<input type="radio" name="promocion" value="ninguno" checked="checked" />
Ninguno <br/>
<input type="radio" name="promocion" value="portes" /> Transporte gratuito
<br/>
<input type="radio" name="promocion" value="descuento" /> Descuento 5%
</fieldset>
</form>
Pgina 15 de
19

</body>
</html>
3.4

Actividades de transferencia del conocimiento.

1. Ingrese
al
siguiente
enlace
http://platea.pntic.mec.es/~rluna/CursoHTML/index.html#indice y desarrolle las
prcticas propuestas en cada uno de los ejercicios para profundizar un poco
ms en el uso de las etiquetas de HTML. Haga una breve lectura de la
explicacin dada si es necesario, de lo contrario proceda. Guarde cada ejercicio
dentro de una carpeta con el nombre PRACTICAS HTML para luego ser enviado
a travs de la plataforma.
2. Luego de haber realizado los ejercicios anteriores, analizando la funcin de
las diferentes etiquetas de HTML, disee una pgina Web del tema de su
preferencia aplicando todas las etiquetas vistas. Guarde todo dentro de una
carpeta que se llame MI PRIMERA PAGINA WEB, comprmala y envela por el
enlace correspondiente dispuesto en la plataforma.
3.5 Actividades de evaluacin.
Apreciado aprendiz, el temario objeto de la evaluacin al final de esta gua esta
contenido a lo largo de este documento, que le proveer todos los conocimientos
para resolver los talleres y evaluaciones planteadas por el instructor.
Evidencias de
Aprendizaje

Criterios de Evaluacin

Evidencias
Conocimiento :

de Aplicando
preguntas
aleatorias de diferentes
tipos, se realizara una
Evaluacin escrita sobre evaluacin escrita que
los conceptos bsicos del permita evidenciar los
conocimientos
lenguaje HTML.
adquiridos.
Evidencias
Desempeo:

Tcnicas e Instrumentos
de Evaluacin
Cuestionario.

de

Talleres Prcticos
Observacin directa
las
etiquetas Lista de Chequeo
Desarrollo de los ejemplos Utiliza
prcticos que involucran correspondientes para la
el
manejo
de
la creacin de una pgina
herramienta
para
la Web en HTML.
creacin de Pginas Web.
Evidencias de
Producto:
Disear una pgina Web
de un tema elegido por

Observacin.
La pgina Web
contener
todas
etiquetas vistas.

debe
las

Pgina 16 de
19

usted, aplicando todas las

etiquetas vistas.

4. RECURSOS PARA EL APRENDIZAJE

Materiales de
formacin
devolutivos:
(Equipos/Herramienta
s)
ACTIVIDA DURA
DES DEL
CIN
PROYECT (Horas
O
)

Identificar
conceptos
generales y
aplicacin
de
las
herramient
as
del
paquete
Microsoft
office
(Word
Power
Point, Excel
y Acces.

30

Descripci
n

Sillas
Mesas
PC

Cantidad

15
15
15

Materiales de
formacin
(consumibles)

Descripc
in

Marcador
es
borrables

Cantidad

Talento Humano
(Instructores)

Especialidad

Sistemas

5. GLOSARIO DE TERMINOS

Pgina 17 de
19

Cantida

ETIQUETA: instruccin mediante la cual podemos realizar pginas HTML. Un

ejemplo es <b> que6.noREFERENTES
permite ponerBIBLIOGRFICOS
en negrita las letras que estn englobadas
por medio de esta etiqueta. Estas etiquetas son interpretadas por los navegadores
a la hora de reproducir las pginas HTML.
Hipertexto: este concepto fue creado por el fsico norteamericano Vannevar Bush
en 1945. En Internet el trmino se aplica a los enlaces existentes en las pginas
escritas en HTML. Estos enlaces conducen a otras pginas que pueden ser a su vez
pginas de hipertexto. Las pginas de hipertexto son mostradas a travs de
navegadores.
HTML: El HTML, acrnimo ingls de Hypertext Markup Language (lenguaje de
formato de documentos de hipertexto), es un lenguaje de marcas diseado para
estructurar textos y presentarlos en forma de hipertexto, que es el formato
estndar de las pginas web.
HTTP: Abreviacin de "Hypertext Transfer Protocol" o, en espaol, "Protocolo de
Transferencia de Hipertexto". Es el tipo de comunicacin utilizado entre un servidor
y un navegador. Por este motivo, las direcciones de las pginas web comienzan por
"http://...". URL: Es el Localizador Uniforme de Recursos, o dicho ms claramente,
es la direccin que localiza una informacin dentro de Internet.
Link (enlace): apuntador de hipertexto que tiene como misin llevarnos de una
informacin a otra, de una pgina a otra, o de un servidor a otro. Cuando
navegamos por internet
World Wide Web (WWW): (del ingls, Telaraa Mundial), la Web o WWW, es un
sistema de hipertexto que funciona sobre Internet. Para ver la informacin se
utiliza una aplicacin llamada navegador web para extraer elementos de
informacin (llamados "documentos" o "pginas web") de los servidores web (o
"sitios") y mostrarlos en la pantalla del usuario.
Pgina web: Unidad mnima que integra sitios web, el cual puede estar integrado
por una o ms pginas. Dicho de otro modo es cada una de las pantallas que
puede verse desde el navegador. Tcnicamente se trata de un archivo que enva
el servidor de Internet donde est alojada la citada pgina y que el navegador que
tiene instalado el usuario (Mozilla, Explorer, etc.) es capaz de interpretar.
Pago por clic: Modelo de contrato publicitario en Internet. Segn esta frmula los
anunciantes pagan a la agencia, o directamente al propietario de un sitio web, en
funcin del nmero de veces que los consumidores cliquean sobre un anuncio que
les lleva directamente a una pgina web del anunciante.
Password: Trmino ingls que, en espaol, significa: contrasea. Aunque, como se
ve, existe la palabra espaola, an se sigue empleando masivamente el trmino
ingls.
PHP: Acrnimo de las palabras inglesas: Hypertext Preprocessor, aunque
originalmente, significaba Personal Home Page Tools. Es decir, herramientas para
la creacin de pginas personales. El Php es un lenguaje de programacin
Pgina 18 de
19
multiplataforma que se utiliza en el desarrollo de pginas web, las cuales
se
presentan con las extensiones: "php", "php3" o "phtml".

http://www.oocities.org/mx/anyje19102/glosario.html
http://personales.mundivia.es/papi/glosario.html
http://www.codecademy.com/es/glossary/html
http://www.htmlya.com.ar/
http://librosweb.es/xhtml/capitulo_15/ejercicio_12.html

7. CONTROL DEL DOCUMENTO (ELABORADA POR)

Lady Johanna Romero Villamil.
Instructora Competencia TIC en el programa Gestin Administrativa
Centro Industrial y Desarrollo Empresarial
ladyrv@misena.edu.co

Pgina 19 de
19