FICHA DE IDENTIFICACION

FOTO

NOMBRE DEL ALUMNO

Carrera
Semestre
Modulo
Submodulo
Titulo y cdigo de la
norma
Titulo y cdigo de la
unidad de competencia

Titulo y cdigo de el
elemento de competencia
Contenido de aprendizaje

Resultado del aprendizaje

NUMERO DE CONTROL

TECNICO EN INFORMATICA
III SECCION A
II CREACIN DE PRODUCTOS MULTIMEDIA A
TRAVS DE SOFTWARE DE DISEO
3 ELABORACION DE PAGINAS WEB
NIE CREAR DISEOS GRAFICOS UTILZANDO EL PROGRAMA DE
DISEO COREL DRAW
1.- UTILIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEO
2.- MANEJAR LOS ELEMENTOS BASICOS DE UN LENGUAJE
UTILIZABLE EN LA CREACION DE PAGINAS WEB (HTML,
DREAMWEVER)
3.- DISEAR UNA PAGINA WEB UTILIZANDO HTML Y
DREAMWEVER
4.- PUBLICAR LAS PAGINAS WEB CREADAS

DISEAR Y ELABORAR DOS PAGINAS WEB, UNA PARA

PROMOCION DEL PLANTEL CON EL TEMA DEL BICENTENARIO Y
CENTENARIO DE LA INDEPENDENCIA Y REVOLUCION DE MEXICO,
LA OTRA CON TEMA LIBRE, UTILIZANDO SOFTWARE DE DISEO Y
ANIMACION (COREL DRAW 12, FLASH Y DREAMWEVER) Y
LENGUAJE HTML, Y DESARROLLAR LAS COMPETENCIAS
GENRICAS NECESARIAS PARA ACTUAR CON EFICIENCIA NO
SLO EN EL TRABAJO, SINO A LO LARGO DE LA VIDA, DE
CONFORMIDAD CON EL DESEMPEO INTEGRAL DEL TCNICO EN
INFORMTICA
Competencias profesionales:
1. Utilizar los elementos fundamentales del diseo
2. Manejar los elementos bsicos de un lenguaje utilizable en la
creacin de pginas Web (HTML)
3. Disear una Pgina Web con un software de aplicacin
(Dreamweaver)
4. Publicar pginas Web
Competencias genricas
1. Se conoce y valora a s mismo y aborda problemas y retos
teniendo en cuenta los objetivos que persigue.
4.-Escucha, interpreta y emite mensajes pertinentes en distintos
contextos mediante la utilizacin de medios, cdigos y
herramientas apropiados.
5. Desarrolla innovaciones y propone soluciones a problemas a
partir de mtodos establecidos.
6. Sustenta una postura personal sobre temas de inters y
relevancia general, considerando otros puntos de vista de
manera crtica y reflexiva.
7. Aprende por iniciativa e inters propio a lo largo de la vida.
8. Participa y colabora de manera efectiva en equipos diversos.
11. Contribuye al desarrollo sustentable de manera crtica, con
acciones responsables.

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

Duracin
Domicilio particular
Telfono particular
Lugar y fecha

ALUMN A(O)

15 de nov al 10 de dic de 2010

LA PARTIDA, TORREON, COAH 24 DEAGOSTO DE
2009..

FACILITADOR
ING. J. LENIN AXAYACATL CORTINAS RIOS

NOMBRE Y FIRMA

NOMBRE Y FIRMA

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

Evaluacin diagnostica
Responda las siguientes preguntas anotando lo que corresponda, si tiene
alguna duda pregunte a su maestro:
No
.
1
2
3
4
5

REACTIVO

SI

NO

SABES QUE ES UNA PAGINA WEB?

SABES QUE PROGRAMAS DE COMPUTACION SE UTILIZAN PARA
SU DISEO?
HAS UTILIZADO ALGUNO DE ELLOS?
Cul?
HAS TRABAJADO CON HTML Y DREAMWEVER?
HAS CREADO PAGINAS WEB?

COMENTARIOS:
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
Qu TE GUSTARIA APRENDER EN ESTE MODULO?
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________

NOMBRE DEL ALUMNO

________________________________

SEMESTRE SECCION

____________________________________

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

EVALUACION

PRODUCTO
- PAGINA WEB CBTa No.1
- PAGINA WEB LIBRE
CARPETA
CUESTIONARIO INDIVIDUAL
TOTAL

80

20
100

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

CUESTIONARIO
Lea las siguientes cuestiones y escriba lo solicitado, si tiene alguna
duda pregunte con toda confianza.
1.
2.
3.
4.
5.
6.
7.

Qu es HTML?
Qu significa HTML?
Cual es la estructura bsica de un documento html?
Cmo se encuentra dividido un documento html?
Cules son los editores utilizados para crear un documento html?
Cmo se guarda un documento html?
Cmo visualizar la pagina web creada, utilizando internet
Explorer?
8. Qu es una pgina web?
9. Mencione cinco cosas que debemos tomar en cuenta al disear
una pgina web?
10.
Cul es el nombre recomendado para la primer pagina de
nuestro sitio?
10.- Qu es una etiqueta?
11.- Como se redactan las instrucciones en html?
12.- Escriba las etiquetas para las siguientes acciones:
- Fuente
- Tamao
- Estilo
- Color
- Negrita
- Cursiva
- Subrayado
- Subndice
- Superndice
- Prrafo
- Salto de lnea
- Prrafo
- Espacio entre palabras
- Alineacin
- Derecha, izquierda, centrado, etc
ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

- Titulos (6 formatos)
- Listas (ordenadas y no ordenadas y de definicin)
- Lineas
- Ancho
- Color
- Alineacin
c Imgenes
- Tamaos
- Ubicacin
- Distancia entre el texto y la imagen
- Bordes
- Fondos de pgina
- Sonido
- Video
- hipervnculos, internos y externos
- tablas
13.- A que se refieren las extensiones applet, marquee, frames,
scripts y efectos de sonido?
14.- Qu es Dreamwever?
15.- Cules son los elementos de la pantalla activa de dreamwever?
16.- Cmo se complementan html y dreamwever?

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

ACTIVIDADES
1.- Genere una definicin de html y dreamwever de manera individual
2.- En parejas obtengan una definicin de html y dreamwever
3.- Cree una carpeta en su memoria usb y utilizando el procesador de
texto genere un documento de html con la siguiente informacin:
- titulo: Su nombre completo
- Encabezado: mi proyecto de vida, en negritas
- Cuerpo: Yo soy el mejor, reptalo en cinco lneas con tamaos y
colores diferentes.
- Mis padres son utilizando negritas
- Mis hermanos son utilizando cursivas
- Mis tos son utilizando subrayado
- insertando lneas y saltos de lnea
- genere 3 columnas (alinear a la izquierda, derecha y centro) con los
siguientes ttulos: mis alimentos, mis amigos y mis diversiones

APRENDAMOS HTML

A) Le ponemos ttulo a la pgina con la instruccin <title> </title> que tenemos que poner dentro
del encabezado (entre head y head)
<html>
<head>
<title>Mi primera Pagina</title>
</head>
<body>
</body>
</html>

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

B) Vamos a poner el texto en negrilla "Soy un fenmeno". La instruccin para negrilla es <b> y
<b/>. Y el texto hay que colocarlo dentro del cuerpo (entre body y body) de la pgina.
Por tanto nos queda
<html>
<head>
<title>Mi primera Pagina</title>
</head>
<body>
Soy el mejor
</body>
</html>

DAR FORMATO A LAS LETRAS

Cambiar los atributos de las letras utilizamos el comando <font> </font> (fuente o tipo de letra). El
color o el tamao son atributos del elemento tipo de letra.
Podemos dar distintos atributos a las letras.
A) TAMAO DEL TEXTO
* Si queremos poner las letras de distinto tamao empleamos el atributo
SIZE="".
* Dentro de las comillas pondremos "+" para aumentar el tamao y "-" para disminuirlo
EJEMPLO 1
<FONT SIZE="+1">este texto se ve con mayor tamao</FONT>
El resultado:

este texto se ve con mayor tamao

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

EJEMPLO 2
Si queremos aun mayor tamao ponemos un nmero mayor. Voy a probar con 4
<FONT SIZE="+4">este texto se ve muy grande</FONT>

este texto se ve muy

grande
EJEMPLO 3
Para disminuir el tamao ponemos -1
<FONT SIZE="-1">al poner -1 disminuye el tamao</FONT>
Al poner -1 disminuye el tamao

Podemos poner el texto en negrilla, en cursiva o subrayado

PONER EL TEXTO EN NEGRILLA

Para poner el texto en negrilla utilizamos el tag "b" (de bold)
Soy el <b>mejor</b> de la clase
Soy el mejor de la clase

PONER EL TEXTO EN CURSIVA

Para ponerlo en cursiva utilizamos "i" (de italian)
Poner un <i>texto en cursiva</i>
Poner un texto en cursiva

PONER EL TEXTO SUBRAYADO

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

Para subrayado
Ahora toca el <u>subrayado</u> de parte de la frase
Ahora toca el subrayado de parte de la frase

PONER COLORES

La instruccin para poner color a las letras es

<FONT COLOR="entre estas comillas va el nombre o el nmero del color">aqu el texto al que
queremos dar color</FONT>

EJEMPLO 1
Para poner el texto en rojo
<FONT COLOR="RED">este texto se pone rojo</font>
El resultado si lo ponemos dentro de los cdigos del fichero html ser
este texto se pone rojo

EJEMPLO 2
Para poner el texto en azul
<FONT COLOR="BLUE">este texto se pone en azul</font>
este texto se pone en azul

LAS PARTES DE LAS INSTRUCCIONES

Por tanto vemos que las instrucciones de HTML tienen varias partes.
Las instrucciones de html se componen de tres partes fundamentales:
A) El elemento al que se refiere la instruccin. Es la palabra que va despus del signo <.
Por ejemplo <font es un elemento. En este caso el elemento es el tipo de letra. La instruccin por
tanto se refiere al tipo de letra.
B) El atributo. El tamao o el color son atributos posibles del tipo de letra.
C) El valor que toma el atributo. Por ejemplo rojo o verde.

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

10

Por ejemplo, queremos:

A) Al elemento tipo de letra
B) Darle el atributo color
C) Con el valor rojo.
Elemento

Atributo

Valor

<FONT

COLOR=

"RED">

El tag de
cierre
</FONT>

Valor
"+1">

</FONT>

Otro ejemplo, letra tamao grande

Elemento
<FONT

Atributo
SIZE=

ALINEAR EL TEXTO
Para alinear el texto utilizamos el atributo align
align=left para alinear a la izquierda
align=right para alinear a la derecha
align=center para centrar el texto

EJEMPLO ALINEAR A LA IZQUIERDA

<p align="left">alineamos el texto a la derecha</p>
alineamos el texto a la izquierda

EJEMPLO "ALINEAR A LA DERECHA"

<p align="right">alineamos el texto a la derecha</p>
alineamos el texto a la derecha
EJEMPLO DE CENTRAR
<p align="center">centramos el texto</p>

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

11

centramos el texto

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

12

LINEAS HORIZONTALES
El elemento para crear una lnea horizontal es HR. Este "tag" no necesita un "tag" de cierre
Y a este elemento podemos darle distintos atributos
width para definir el largo de la lnea con un cierto nmero de pixel o un porcentaje del
documento>
size para asignar el ancho de la linea
noshade para el fondo de la lnea

EJEMPLO
Lnea de 100 pixels
<HR WIDTH=100>

Lnea de 200 pixels

<HR WIDTH=200

Lnea de un 50% del ancho del documento

<HR WIDTH=50%>

Lnea del 100% del ancho del documento

<HR WIDTH=100%>

Lnea con 10 de ancho

<HR SIZE=10>

Podemos combinar varios atributos. Por ejemplo lnea de un 50% de largo y 10 pixel de ancho
<HR WIDTH=50% SIZE=10>

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

13

ING. J. LENIN AXAYACATL CORTINAS RIOS, NOVIEMBRE 2010

14