INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. PREPARATORIA INCORPORADA A LA B.U.A.P. CLAVE: 8109 CICLO ESCOLAR 2015-2016
1
PAGINA WEB
PAGINA WEB INFORMATICA.
15 DE MAYO DE 2016 JOSE ANTONIO MENDOZA TORIBIO. INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. PREPARATORIA INCORPORADA A LA B.U.A.P. CLAVE: 8109 CICLO ESCOLAR 2015-2016
2
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. PREPARATORIA INCORPORADA A LA B.U.A.P. CLAVE: 8109 CICLO ESCOLAR 2015-2016
3
INTRODUCCION………………………………………….......................................................................4
MI PAGINA WEB……………………………………..………………………..…........................................5
CREACION DEL ESQUELETO…………………………………………………………………………............6
INSERTAR TITULO .……………………..……………………….…......................................................7
INSERTAR IMÁGENES .………………………………………………………………………...……………......8
INSERTAR VIDEO ……..……………………………………………..…………………………………..………9
INSERTAR AUDIO ...………………………………………………………………….……………................10
INSERTAR TABLA ………………………….………………………………………………………………….11
CONCLUSION ………..……………………………………………………………………………………….12
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. PREPARATORIA INCORPORADA A LA B.U.A.P. CLAVE: 8109 CICLO ESCOLAR 2015-2016
4
En este reporte de practica expongo el producto que realice sobre todo el semestre B, Todo lo que pude aprender se lo debo a la encargada de dicha materia. Les hablare acerca de mi proyecto sobre mi página web donde les presento los pasos que realice paso a paso para poder ir formando poco a poco mi página pues existían partes donde tenía duda y me atrasaba pero nada es imposible espero y sea de su agrado mi reporte miss y también quiero agradecerle por lo que me ha enseñado en este semestre al principio se me dificulto en todo pero poco a poco empecé a salir adelante gracias espero y sea de su agrado mi trabajo…
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. PREPARATORIA INCORPORADA A LA B.U.A.P. CLAVE: 8109 CICLO ESCOLAR 2015-2016
5
OBJETIVO: Aprender a utilizar el NOTE BLOC para crear frameset que después convertiremos a lenguaje HTML para crear una página WEB comenzando con lo más básico hasta llegar a crear una página WEB de la mejor calidad.
HERRAMIENTAS: Computadora
Bloc de notas
Libreta de informática
Internet Explorer
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. PREPARATORIA INCORPORADA A LA B.U.A.P. CLAVE: 8109 CICLO ESCOLAR 2015-2016
Primero que nada al realizar este proyecto teníamos que realizar un bosquejo de como queríamos que se viera nuestra página web la cual fue revisada por la miss para ver si estaba bien. Después de que fue revisada por la miss abrimos un bloc de notas donde empezamos a crear cada uno de los espacios o divisiones que queríamos que tuviera nuestra página.
boceto para la creacion de la pagina wed
Resultado de creación del esqueleto en HTML y frameset.
6
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. PREPARATORIA INCORPORADA A LA B.U.A.P. CLAVE: 8109 CICLO ESCOLAR 2015-2016
Ya que se tiene el esqueleto se tiene que crear una carpeta para la página web lo que sigue es abrir un nuevo frameset e ir creando la etiqueta que necesites para hacer que tu título sea muy vistoso pues es parte importante que se demuestre como vas a cambiar el tamaño de la letra, la fuente, o el color de cada espacio de tu página esto con motivo del frameset. Después de crear la etiqueta se guarda con el nombre que está diseñado para el espacio y se guarda en la carpeta destinada
En esta imagen se muestra la etiqueta del título para la página
Así es como se dé el producto en HTML.
7
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. PREPARATORIA INCORPORADA A LA B.U.A.P. CLAVE: 8109 CICLO ESCOLAR 2015-2016
Para la parte de las imágenes es necesario usar imágenes que estén en mapa de bits ya que es más fácil de modificar estas y no se vean borrosas o pixeleadas. Inmediatamente después de seleccionar las imágenes tenemos que abrir otro bloc de notas y empezar hacer las etiquetas de cada una de las partes para insertar las imágenes utilizando el siguiente ejemplo. Después de crear la etiqueta se guarda con el nombre que está diseñado para el espacio y se guarda en la carpeta destinada.
En este bloc de notas se muestra cómo se puede hacer una pequeña galería.
En esta imagen se muestra como están las imágenes que queremos para la galería.
8
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. PREPARATORIA INCORPORADA A LA B.U.A.P. CLAVE: 8109 CICLO ESCOLAR 2015-2016
En este paso se tiene que crear un video tipo comercial para que pueda ser utilizado en la página con el fin de hacer una propaganda donde se muestra lo que ofrece la empresa pues es bastante fácil además de que el formato recomendable tiene que ser en MP4 y la etiqueta que utilice fue dada por la miss en clases las modificaciones para que quede acorde a la página son a medida del espacio y cuando se termina de crear la etiqueta se guarda con el nombre que está diseñado para el espacio y se guarda en la carpeta destinada.
En este bloc se muéstrala etiqueta del video además de una imagen.
En esta imagen se muestra el video y la parte donde se añade la imagen.
9
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. PREPARATORIA INCORPORADA A LA B.U.A.P. CLAVE: 8109 CICLO ESCOLAR 2015-2016
En esta etiqueta lo primero que hay que hacer es buscar una canción o sonido agradable para la página y la etiqueta que se debe utilizar es la de EMBED al igual que el video pues es de suma importancia que el audio este en MP3 ya que sino no lo reproducirá o pasara a un hipervínculo pues es la única forma de que pueda ser reproducido en internet. Después de crear la etiqueta se guarda con el nombre que está diseñado para el espacio y se guarda en la carpeta destinada.
Aquí se muestra la etiqueta que se utiliza para el audio.
Así es como queda en HTML donde se demuestra el audio.
10
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. PREPARATORIA INCORPORADA A LA B.U.A.P. CLAVE: 8109 CICLO ESCOLAR 2015-2016
Al realizar esta etiqueta se tiene que ir haciendo la tabla fila por fila así como sus divisiones pues en esta yo quise poner algunos ejemplos de los planes que se ofrecen al igual esta etiqueta fue enseñada en clase por la miss y también es utilizadas todas las herramientas como el titulo para modificar el título, la fuente y el tamaño. Se guarda con el nombre destinado en el espacio y en la carpeta destinada.
Aquí se muestra la etiqueta de la tabla.
Aquí se muestra la tabla ya en HTML.
11
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. PREPARATORIA INCORPORADA A LA B.U.A.P. CLAVE: 8109 CICLO ESCOLAR 2015-2016
En esta práctica se tiene que tener mucha paciencia además de colocar bien cada una de las etiquetas que van paso por paso además de cerrar todas las notas en el bloc también es indispensable saber cómo se va modificando o que se va a modificar pues es muy difícil pero cuando lo logras es muy bueno lo que ves que tienes en el siguiente ejemplo es como quedo mi página web espero les agrade agradezco a la miss por explicarnos el trabajo y sacarnos de dudas gracias a todos les muestro mi página terminada.
Aquí muestro mi carpeta de mi página.
aquí muestro mi página web.
12