Situación de Aprendizaje Clase HTML Basico
15
Como hacer una página web de una forma muy Como hacer una página web de una forma muy sencilla. sencilla. Autor: Gregorio Morales Rojas Asesora: M.E.S. Karla Marisol Teutli Mellado
Transcript of Situación de Aprendizaje Clase HTML Basico
Como hacer una página web de una forma muy Como hacer una página web de una forma muy sencilla.sencilla.
Autor: Gregorio Morales Rojas
Asesora: M.E.S. Karla Marisol Teutli Mellado
Sit
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy s
en
cilla
.
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. A
pert
ura
Sit
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy s
en
cilla
.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. A
pert
ura
Sit
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy s
en
cilla
.¿Qué necesitamos?
2. D
esa
rrollo
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
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy s
en
cilla
.¿Como lo haremos?
2. D
esa
rrollo
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
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy s
en
cilla
.¿Como lo haremos?
2. D
esa
rrollo
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
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy s
en
cilla
.¿Como lo haremos?
2. D
esa
rrollo
Conocimientos Previos.
EditoresAparte 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
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy s
en
cilla
.¿Como lo haremos?
2. D
esa
rrollo
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
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy s
en
cilla
.¿Estás listo para iniciar?
2. D
esa
rrollo
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
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy
sen
cilla
.¿Estás listo para iniciar?
2. D
esa
rrollo
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
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy s
en
cilla
.¿Estás listo para iniciar?
2. D
esa
rrollo
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
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy s
en
cilla
.Preguntas Reto
3. C
ulm
inaci
ón
• ¿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
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy s
en
cilla
.¿Crees lograr estos retos?
3. C
ulm
inaci
ón
• 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
uaci
ón d
e
Apre
ndiz
aje
Com
o h
ace
r u
na p
ág
ina w
eb
de u
na f
orm
a m
uy s
en
cilla
.¿Crees lograr estos retos?
3. C
ulm
inaci
ón
• 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:
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 (10/3/2014), 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.docentesinnovadores.net%2FArchivos%2F5509%2FPasos%2520para%2520elaboraci%25C3%25B3n%2520del%2520proyecto%2520entre%2520pares%2520chiriqui.pptx&ei=WUcfU5PvJIHM2QWT_YG4Dw&usg=AFQjCNFfjnrXduFTwiabm4QjkbjcofXeUQ&sig2=kweGKxbcEQn9Pq9um3xkEQ)
Referencias de la situación de aprendizaje
