PRACTICA PÁGINA WEB “CHILI´S” INSTITUTO DE INVESTIACIÓN Y ENSEÑANZA IBEROAMERICANO A.C INFORMATICA III 3° “B” ING. LILIA RIVERA GONZALEZ VICTORIA DE LA ROSA GUZMÁN CICLO ESCOLAR 2015 – 2016 14. MAYO. 2016
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
PRACTICA 1.- CREACIÓN DE UNA PÁGINA WEB OBJETIVO: Crear una página web partiendo de las diferentes etiquetas que existen en el lenguaje HTML, posteriormente con las etiquetas de diseño para así obtener un producto final, la página web de algún bien o servicio.
HERRAMIENTAS: Boceto de la estructura de la página Frames Rows Cols Border Width, Height Etiquetas básicas Table Embed IMG SRC Font Marquee Formatos HTML .txt
PROCEDIMIENTO: 1.- Abrir un bloc de notas 2.-Con ayuda de los frames crear la estructura con respecto al boceto que teníamos de la página web.
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
3.- Guardar en documento como .txt
1.-ESTRUCTURA DE PÁGINA WEB
4.- Guardar ese mismo documento ahora como HTML 5.- Comprobar que el documento en HTML se abra y quede conforme a nuestro boceto
2.-DISEÑO DE PÁGINA WEB
DISEÑO DE PÁGINA 6.- Abrir un bloc de notas 7.- Comencé con el titulo, así que revise las notas que nos había proporcionado y empecé a realizar mi estructura de acuerdo a como quería que quedara mi titulo así que ocupe las etiquetas de:
FONT FACE
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
SIZE COLOR MARQUEE BGCOLOR
Y mi estructura quedo así:
3.-ESTRUCTURA DE TITULO
8.- Guardar el documento en HTML, corroborar que se abra el documento en HTML y después en la estructura de la página web
4.-DISEÑO DE TITULO
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
5.-TITULO EN PÁGINA WEB
9.-Hacer o descargar un video en formato MP4 para que se abra en la estructura del video
6.-VIDEO PARA LA PÁGINA WEB
10.-Para el video también haremos lo mismo, pero en esta ocación será mas fácil porque solo tenemos que ocupar la etiqueta de:
EMBED
Y en esta etiqueta seleccionaremos si queremos que empiece solo con “AUTOSTART” y configuraremos el tamaño del video y por último guardarlo como documento .txt
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
7.-ESTRUCTURA DE VIDEO
11.-Por ultimo tenemos que guardar el mismo documento pero ahora en HTML y verificar que se habrá en HTML y en la estructura de la página web
8.-VIDEO EN HTML
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
9.-VIDEO EN LA PÁGINA WEB
12.-Continuaremos con la Galería de fotos, así que yo descargue algunas imágenes del restaurante y en algunos emplee el logotipo que anteriormente habíamos creado.
10.-IMAGENES PARA GALERÍA DE FOTOS
13.-Para crear la estructura de la galería de fotos solo tenemos que ocupar la etiqueta de:
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
IMG SRC
Y en esta misma etiqueta vamos a poder editar como queremos las imágenes, tanto el bode entre cada una de ellas con “BORDER” y la alineación de estas con “ALIGN” 14.-Ahora solo tenemos que guardar el documento en .txt
11.-ESTRUCTURA PARA GALERÍA DE FOTOS
15.-Guardaremos el mismo documento pero ahora como HTML y verificamos que la galería se abra en la página web
12.-GALERÍA DE FOTOS EN HTML
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
13.-GALERÍA DE FOTOS EN LA PÁGINA WEB
En este caso como yo solo tengo una sección quise juntar una tabla, el audio y una imagen para que se vea con una mayor presentación. 16.-Primero vamos a crear la tabla, así que para esto vamos a crearla con ayuda de las etiquetas:
TABLE BORDER BORDER COLOR BR, TR, TD
14.-ESTRUCTURA DE TABLA
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
17.- Después vamos a continuar con el audio, así que primero tenemos que seleccionar una canción que sea de nuestro gusto o que fuera de acuerdo al bien o servicio que estamos presentando en nuestra página web
15.-AUDIO
18.- Vamos a crear la estructura del audio con las etiquetas:
EMBED SRC AUTOSTART LOOP WIDTH, HEIGHT
Así que vamos a crear la estructura del audio con las etiquetas dadas.
16.-ESTRUCTURA DE AUDIO 19.-Por ultimo vamos a trabajar con la imagen, así que seleccionaremos una imagen que se relacione con nuestra página por ejemplo esta:
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
17.-IMAGEN DE CHILI´S PARA PÁGINA
20.-Con ayuda de las etiquetas:
IMG SRC BORDER, ALIGN
Y después hare la estructura con las mismas etiquetas y me quedo algo así.
18.-ESTRUCTURA DE IMAGEN
20.-Por ultimo solo tenemos que guardar estas 3 estructuras en un documento .txt 21.- El mismo documento guardarlo pero ahora en HTML y como ultimo paso verificar que se habrá en HTML y en la página web
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
19.-TABLA, AUDIO E IMAGÉN EN HTML
20.-TABLA, AUDIO E IMAGEN
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. VICTORIA DE LA ROSA GUZMÁN INFORMATICA III CICLO ESCOLAR 2015-2016
CONCLUCIÓN: En este semestre aprendí mucho, ya que no tenía ni la menor idea de como hacer una página web y mucho menos a mi manera o gusto. Me gustó mucho hacer la página ya que después puedo emplear estas mismas etiquetas en otra página o para cuando tenga mi empresa. Espero que realmente le guste mi página ya que le heche muchas ganas y además de todo a mí me encanto mi página. Gracias por apoyarme en las cosas que no podía hacer y hasta checar mis errores.