S4 tarea4 esvaj
17
COMO HACER UNA PÁGINA WEB DE UNA FORMA MUY SENCILLA. Autor: Jorge Iván Espinosa Valle Asesora: Xóchitl Adriana Leal González
-
Upload
coquis-espivalle -
Category
Education
-
view
17 -
download
1
Transcript of S4 tarea4 esvaj
C O M O H A C E R U N A P Á G I N A W E B D E U N A F O R M A M U Y S E N C I L L A .
Autor: Jorge Iván Espinosa Valle
Asesora: Xóchitl Adriana Leal González
INTRODUCCIÓN
E N E L A C T U A L T R A B A J O S E T R A B A J A R Á U N A S I T U A C I Ó N D E A P R E N D I Z A J E Q U E
C O N S I S T E E N C O M O H A C E R U N A P Á G I N A W E B D E U N A F O R M A M U Y S E N C I L L A .
D O N D E C O M P R E N D E T R E S M O M E N T O S :
• I N I C I O : S E R E A L I Z A R Á N P Á G I N A S W E B B Á S I C A S , U T I L I Z A N D O A L G U N A S
E T I Q U E T A S H T M L . E S T O S E R E A L I Z A R Á E N 5 P A S O S Q U E E L A L U M N O P O D R Á
P O N E R E N P R Á C T I C A , I D E N T I F I C A N D O L A S E T I Q U E T A S P R I N C I P A L E S Q U E S E
U T I L I Z A N E N E L L E N G U A J E H T M L .
• D E S A R R O L L O : Q U E S E N E C E S I T A , C O N O C I M I E N T O S P R E V I O S Y Q U E S E V A A
C O N S T R U I R
• C I E R R E : A Q U Í S E C O N T E M P L A N D O S R E T O S Q U E T E N D R Á Q U E R E A L I Z A R E L
A L U M N O
Y P O R U L T I M O L A S C O N C L U S I O N E S Y L A S R E F E R E N C I A S B I B L I O G R Á F I C A S
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
Se Realizarán páginas web básicas, utilizando algunas
etiquetas HTML.
Esto se realizará en 5 Pasos que el alumno podrá poner en
práctica, identificando las etiquetas principales que se
utilizan en el lenguaje HTML.
Código Resultado
1.I
NIC
IO
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
Preguntas Generadoras
¿Qué importancia le das a las
telecomunicaciones?
¿Te gustaría construir una página web
donde puedas mostrar información de
interés a una comunidad?
¿Consideras que sea importante tener
este tipo de conocimientos hoy en día?
1.
INIC
IO
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
¿Qué necesitamos?
2.
De
sa
rro
llo
Lo único que necesitamos para poder
hacer una página web es lo siguiente:
1. Una computadora o laptop conectada
a internet.
2. Conocimientos básicos de HTML.
3. Un block de notas.
4. La información que queremos
publicar.
5. Imaginación.
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
¿Como lo haremos?
2. D
esa
rro
llo
Conocimientos Previos.
¿Que es pagina web? Es un documento o información electrónica capaz de contener texto,
sonido, vídeo, programas, enlaces, imágenes, y muchas otras cosas, y
que puede ser accedida mediante un navegador <ver definición
completa>
¿Qué es HTML? HTML, siglas de HyperText Markup Language («lenguaje de marcas de
hipertexto»), hace referencia al lenguaje de marcado para la
elaboración de páginas web<Ver Definición completa>
¿Que es un elemento en HTML? Las estructuras básicas del HTML son los elementos, (también
conocidos como etiquetas, marcadores o tags). Son construcciones
que le indican al navegador cómo debe presentar un determinado
texto, o que debe incluir una imagen o un enlace, entre otras muchas
posibilidades.
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
¿Como lo haremos?
2. D
esa
rro
llo
Conocimientos Previos.
¿Que es un tag? En el lenguaje HTML un tag es una etiqueta que
delimita a información que se quiere desplegar, como
un texto <font> </font>, una imagen <img> y que puede
contener ciertos atributos como tamaño, color, etc. ej. <Font size=10>. <ver>
¿Qué es un link? Es un vínculo o liga hacia otras página, es decir, al dar
click en el link de direccionará hacia otra pagina. Ej. <a
href=www.google.com>
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
¿Como lo haremos?
2.
De
sa
rro
llo
Conocimientos Previos.
Editores Aparte del block de notas, existen
programas editores para crear tus
propias páginas web, estos editores
puede estar tan completos, que te
den un ambiente de diseño y otro de
edición de etiquetas como el
Dreamweaver de Adobe o algunos
otros que son para aficionados como
HTML Instant que puedes editar
directamente en línea
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
¿Como lo haremos?
2.
De
sa
rro
llo
Elementos básicos de una página
<HEAD></HEAD>
<TITLE></TITLE>
<BODY></BODY>
<p></p>
<font></font>
<a href=Direccion></a>
<img scr=“imagen.jpg”>
• Encabezado de la página
• Título de la página
• Cuerpo de la página
• Párrafo
• Fuente
• Referencia
• Imagen
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
¿Estás listo para iniciar?
2. D
esa
rro
llo
Paso a paso
1. Abre un block de notas.
2. Guarda el archivo como
“paginas.html”
3. Al guardar debes cambiarle al
tipo que no sea de tipo txt. Sino
como tipo todos los archivos.
4. Inserta el código de la siguiente
lamina
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
¿Estás listo para iniciar?
2.
De
sa
rro
llo
Paso a paso
1. Después de haberlo insertado, asegúrate de que
exista en la misma carpeta una imagen con el
nombre de “imagen.jpg” que es la imagen que
queremos desplegar.
2. Si no la hay, necesitas guardar cualquier imagen
en la carpeta con ese nombre.
3. Guarda el archivo y al final da solo doble click
sobre el archivo.
4. Y listo se te abrirá una pantalla parecida a la de
la siguiente lámina.
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
¿Estás listo para iniciar?
2.
De
sa
rro
llo
Iniciando con un pequeño ejemplo
<HEAD>
<TITLE>Soy Gregorio</TITLE> Ponemos un Título de
la página
</HEAD>
<BODY>
<p>Este es un párrafo</p>
<font face=arial size=12>Este es un texto con
fuente</font>
<a href=http://www.google.com>Este es un link</a>
<img scr=“imagen.jpg”>
</BODY>
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
Preguntas Reto
3. C
ierr
e
• ¿Que información crees que puedes
meter en este apartado?
<HEAD></HEAD>
• ¿Que información crees que puedes
meter en este otro apartado?
<BODY> </BODY>
• ¿Que importancia crees que tenga la
creación de paginas Web?
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
¿Crees lograr estos retos?
3. C
ierr
e
• Realiza una pagina web donde incluyas una
tabla con 2 imágenes, cada imagen debe de
contener un link que direccione uno a la pagina
principal de google u otra a la de yahoo.
Reto 1:
SIT
UA
CIÓ
N D
E A
PR
EN
DIZ
AJE
CO
MO
H
AC
ER
U
NA
P
ÁG
IN
A
WE
B
DE
U
NA
F
OR
MA
M
UY
S
EN
CI
LL
A.
¿Crees lograr estos retos?
3. C
ierr
e
• Realiza una pagina web donde despliegues un
anuncio tuyo que incluya imágenes publicitaras,
además un letrero que esté caminando
(investiga el tag <marquee>), de la misma forma
despliega los datos de tu negocio.
Reto 2:
CONCLUSIONES
EN ESTA PRESENTACIÓN SE REALIZÓ UNA SITUACIÓN DIDÁCTICA EN DONDE EL ALUMNO SE APOYARÁ DE SUS
CONOCIMIENTOS PARA CONSTRUIR UNA PÁGINA WEB DE UNA FORMA MUY SENCILLA.
LO QUE SE PRETENDE ES QUE EL ALUMNO CONTRUYA SU CONOCIMIENTO Y DONDE SOLO EL DOCENTE GUIE
EL DESARROLLO DE LA PÁGINA, PARA QUE CUANDO LA TERMINEN SE LES SOMETA A DOS RETOS MAS EN
RELACION A COMPLEMENTAR LA PRIMERA PÁGINA REALIZADA, DE ESTA MANERA YA VAN A TENER UN
CONOCIMIENTO PREVIO QUE LES PERMITIRÁ QUE PUEDAN REALIZAR VARIAS PAGINAS WEB EN EL FUTUTO
REFERENCIAS DEL MÉTODO
http://bitelia.com/2012/08/curso-html
http://www.taringa.net/posts/info/2070607/Manual-de-HTML-para-principiantes.html
http://html.conclase.net/w3c/html401-es/struct/links.html
http://html.hazunaweb.com/116.php
Modelos de Diseño y Desarrollo de Estrategias Instruccionales, Textos complementarios de la Sesión 4. Didáctica crítica, [CD-ROM], ETAC, 1,
Windows.
Castillo, Danilo. Pasos para elaborar el proyecto. Recuperado el (15/11/2016), de
(http://www.google.com.mx/url?sa=t&rct=j&q=&esrc=s&frm=1&source=web&cd=2&ved=0CDMQFjAB&url=http%3A%2F%2Fwww.docentesinnovad
ores.net%2FArchivos%2F5509%2FPasos%2520para%2520elaboraci%25C3%25B3n%2520del%2520proyecto%2520entre%2520pares%2520chir
iqui.pptx&ei=WUcfU5PvJIHM2QWT_YG4Dw&usg=AFQjCNFfjnrXduFTwiabm4QjkbjcofXeUQ&sig2=kweGKxbcEQn9Pq9um3xkEQ)
Referencias de la situación de aprendizaje
