SEMESTRE B

DISEÑO DE PÁGINA WEB

Reporte de

práctica

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA

IBEROAMERICANO

ING. LILIA RIVERA GONZÁLEZ

LIZETH RAMÍREZ LÓPEZ

3RO “C”

Reporte

PROYECTO INTEGRADOR

“CREACIÓN DE PÁGINA

WEB”

Objetivo: El objetivo de la creación de la

página web por parte del alumno es para que pueda

comprender y mejorar más las herramientas de la creación de

la misma, al mismo tiempo poder identificar y hacer creación

de todo tipo gracias a las etiquetas de HTML.

En este proyecto se aplicara todo lo aprendido y enseñado por

el docente en el salón de clases.

Se mostrara como poner etiquetas básicas y etiquetas de

formato, de igual manera poder insertar audio, video,

imágenes, tablas y formulario para poder llegar a la creación de

nuestra linda página web.

Herramientas para la página web

REALIZACIÓN DE LA ESTRUCTURA DE LA PÁGINA WEB:

Bloc de notas: sirve para poder realizar el esqueleto de una

página web

Marcos: es el esqueleto de la página web, utilizando .TXT o

.HTML

.HTML

.TXT

etiqueta FRAMESET ROWS

etiqueta FRAME NAME

etiqueta FRAMESET COLS

etiqueta FRAMESET

REALIZACIÓN DEL TÍTULO DE LA PÁGINA WEB

Esqueleto de la página web

.HTML

Etiqueta BODY BACKGROUN

Etiqueta FONT FACE

Etiqueta FONT

Etiqueta BODY

INSERTAR AUDIO EN LA PÁGINA WEB

Esqueleto de la página web

.HTML

Etiqueta BODY BACKGROUND

Etiqueta EMBED

Etiqueta BODY

INSERTAR VIDEO EN LA PÁGINA WEB

Esqueleto de la página web

.HTML

Etiqueta BODY

Etiqueta VIDEO

INSERTAR GALERÍA A LA PÁGINA WEB

Esqueleto de la página web

Etiqueta HTML

Etiqueta BODY BACKGROUND

Etiqueta IMG

Etiqueta BODY

INSERTAR TABLA EN LA PÁGINA WEB

Esqueleto de la página web

.HTML

Etiqueta BODY

Etiqueta TABLE

Etiqueta TR

Etiqueta TD

Etiqueta BODY BACKGROUN

INSERTAR FORMULARIO A LA PÁGINA WEB

Esqueleto de la página web

Etiqueta FORM

Etiqueta TABLE BORDE

etiqueta TR

etiqueta TD

etiqueta INPUT

etiqueta SELECT

etiqueta OPTION VALUE

etiqueta TEXTAREA

etiqueta COLSPAN

etiqueta TABLE

Etiqueta BODY BACKGROUN

PROCEDIMIENTO E IMAGINES. REALIZACIÓN DE LA ESTRUCTURA DE LA PÁGINA WEB: Abrir un bloc

de notas para empezar a realizar el esqueleto de la página web que deseo

realizar sobre la empresa de Gamesa, utilizar todas las etiquetas

deseadas para darle su formato deseado y ponerlas presentables, por

ultimo guardarla con .TXT y luego con .HTML

Imagen 1.1.- Abrir un nuevo

bloc de notas para poder

empezar a realizar el

esqueleto de la página web.

Imagen 1.2.- Después de que

se agregan las etiquetas y

está todo listo se guarda como

.TXT

REALIZACIÓN DEL TÍTULO DE LA PÁGINA WEB: Para

comenzar a realizar el titulo tenemos que abrir un bloc de notas nuevo al

anterior, de igual manera tenemos que agregar las etiquetas de forma

precisa y ordenada para que todo nos salga bien, por último se tiene que

guardar el archivo en la misma carpeta del esqueleto y ponerlo con .TXT y

.HTML para que se vinculen con el esqueleto

Imagen 1.3.- después de guardar el bloc de notas en .TXT se guarda como

.HTML para que se pueda abrir con internet

Imagen 2.1.- Esqueleto con

etiquetas para el título y

guardado con .TXT

Imagen 2.2.- Esqueleto

guardado con .HTML

Imagen 2.3.- Esqueleto

vinculado con la página web

INSERTAR AUDIO EN LA PÁGINA WEB: Para comenzar a

poner el audio tenemos que abrir un bloc de notas nuevo al anterior, de

igual manera tenemos que agregar las etiquetas de forma precisa y

ordenada para que todo nos salga bien, por último se tiene que guardar el

archivo en la misma carpeta del esqueleto y ponerlo con .TXT y .HTML

para que se vinculen con el esqueleto.

INSERTAR VIDEO EN LA PÁGINA WEB: Para comenzar a poner

video tenemos que abrir un bloc de notas nuevo al anterior, de igual

manera tenemos que agregar las etiquetas de forma precisa y ordenada

para que todo nos salga bien, por último se tiene que guardar el archivo

en la misma carpeta del esqueleto y ponerlo con .TXT y .HTML para que

se vinculen con el esqueleto.

Imagen 3.1.- agregar las etiquetas

en el bloc de notas y guardarlo

como .TXT

Imagen 3.3.- guardarlo en la misma carpeta para que se

vincule con la página web

Imagen 3.2.- el bloc anterior

guardarlo como .HTML

INSERTAR GALERÍA A LA PÁGINA WEB: Para comenzar a poner

imágenes tenemos que abrir un bloc de notas nuevo al anterior, de igual

manera tenemos que agregar las etiquetas de forma precisa y ordenada

para que todo nos salga bien, por último se tiene que guardar el archivo

en la misma carpeta del esqueleto y ponerlo con .TXT y .HTML para que

se vinculen con el esqueleto.

Imagen 4.1.- agregar las etiquetas de video y guardar el

bloc como .TXT

Imagen 4.2.- el bloc de notas

guardarlo como .HTML

Imagen 4.3.- guardarlo en la

misma carpeta para que se

vinculen

Imagen 5.1.- agregar las

etiquetas de imagen

correspondientes y

guardarlo con .TXT

Imagen 5.2.-

guardar las

etiquetas

como .HTML

Imagen 5.3.- guardar el

bloc en la misma carpeta

para que se vinculen

INSERTAR TABLA EN LA PÁGINA WEB: Para comenzar a poner

imágenes tenemos que abrir un bloc de notas nuevo al anterior, de igual

manera tenemos que agregar las etiquetas de forma precisa y ordenada

para que todo nos salga bien, por último se tiene que guardar el archivo

en la misma carpeta del esqueleto y ponerlo con .TXT y .HTML para que

se vinculen con el esqueleto.

Imagen 6.1.- agregar las

etiquetas de tablas

correspondientes y

guardarlo con .TXT

Imagen 6.2.- guardar el bloc de notas

como .HTML

Imagen 6.3.- guardarlo en la misma carpeta con el esqueleto de

la página web para que se vinculen

INSERTAR FORMULARIO A LA PÁGINA WEB: Para comenzar a

poner el formulario tenemos que abrir un bloc de notas nuevo al anterior,

de igual manera tenemos que agregar las etiquetas de forma precisa y

ordenada para que todo nos salga bien, por último se tiene que guardar el

archivo en la misma carpeta del esqueleto y ponerlo con .TXT y .HTML

para que se vinculen con el esqueleto.

Imagen 7.1.- agregar las

etiquetas de formulario

correspondientes y

guardarlo con .TXT

Imagen 7.2.- guardar en

bloc de notas como .HTML

Imagen 7.3.- guardarlos en la misma carpeta que el esqueleto de la página

web para que se vinculen

PÁGINA WEB TERMINADA CON TODO

LO APRENDIDO EN CLASE.

Imagen 8.1.- página web terminada con todas las

etiquetas señaladas anteriormente.

CONCLUSIÓN La realización de la página web nos permitirá facilitar el huso del internet

a nuestro favor ya que con realizar una podemos poner en marcha un

proyecto tanto escolar como profesional en cualquier momento.

El hacer la página web se me complico un poco ya que no tenía los

conocimientos requeridos para hacerlo si no que lo enseñado por el

docente no le tomaba mucha importancia, lo cual fue un grave problema

ya que cuando la realice se me complico por no poner atención pero

después todo el turno de investigar cómo poner cada etiqueta

especificada en el bloc de notas con .HTML.

Con esta práctica realizada me quedan claras algunas cosas como poner

fondo a una página, el título, tablas, imágenes, formulario entre muchas

otras cosas.

Agradezco a la profesora Lilia Rivera por su enseñanza en la materia de

informática ya que sin su ayuda y apoyo no hubiéramos podido realizar

dicha página.