Preparatoria de oriente a.c. Preparatoria incorporada a la buap Clave 8089 Informática iii
PREPARATORIA DE ORIENTE Reporte
“diseño de mi sitio web” Propósito- El propósito de esta práctica es que el alumno aprenda a realizar un sitio web con la suficiente creatividad. Utilizando diferentes herramientas para lograrlo, como hipervínculos, tablas, imágenes audio entre otras cosas con ayuda del lenguaje de hipertexto (HTML). Informática lll Profesora- Lilia Rivera Gonzáles Alumna- Guadalupe Hernández Aquino 3° A Fecha de entrega- 20-05-2021 hernandez.guadalupe@preparatoriadeorienteac.edu.mx
Preparatoria de oriente a.c. Preparatoria incorporada a la buap Clave 8089 Informática iii
Propósito- El propósito de esta práctica es que el alumno aprenda a realizar un sitio web con la suficiente creatividad. Utilizando diferentes herramientas para lograrlo, como hipervínculos, tablas, imágenes audio entre otras cosas con ayuda del lenguaje de hipertexto (HTML). En este último parcial terminamos de realizar nuestro sitio web, vimos diferentes herramientas que nos ayudaron a tener una mejor visión de ella. Las herramientas que vamos a explicar posteriormente serán:
Hipervínculos en HTML. Imágenes en HTML. Video y audio en HTML. Tabla en HTML.
Comenzaremos describiendo la primera. Los hipervínculos en HTML, utilizan el elemento ancla <a> para crear un enlace, que al momento de hacer clic el navegador abra otra página, ya sea interna o externa. El problema del elemento ancla, es que, para convertirlo en un enlace, debe aportar un URL mediante el atributo HREF (referencia de hipervínculo). El atributo que se relacionan con hipervínculos, son de TARGET, estos son Target= “Black”- Está fuerza al documento referenciado por el enlace, para que sea mostrado en una nueva ventana del navegador. Target= “Self”- El documento enlazado será mostrado por el mismo frame o ventana donde está el enlace. Se utiliza cuando la etiqueta “BASE”, para especificar en frame distinto del actual. Target= “Parent”- Provoca que el documento sea mostrado en el FRAMESET padre del frame actual. Target= “Top”- Está dice que el enlace debe ser mostrado usando todo el espacio de la ventana del navegador destruyendo toda la estructura de frames. Es usado cuando creemos un enlace a una página externa a nuestro sitio web. A continuación, mostraremos un ejemplo de lo dicho anteriormente. (Imagen 1-Hipervinculos).
(Imagen 1-Hipervinculos)
Preparatoria de oriente a.c. Preparatoria incorporada a la buap Clave 8089 Informática iii Seguimos con la segunda herramienta, la cual es imágenes en HTML. Este se trata de un elemento vacío, es decir que no contiene ningún texto o etiqueta de cierre, pero requiere de un atributo para ser utilizado. Los atributos que puede utilizar son:
SRC= Indica el nombre o la URL de la imagen a mostrar. WIDTH= Indica el ancho de la imagen. HEIGHT= Indica el alto de la imagen. ALT= Establece un texto alternativo que se describe en la imagen.
Para alinear la imagen puedes utilizar los siguientes: ALIGN: “LEFT” ALIGN: “RIGHT” ALIGN: “CENTER” Si quieres poner tu imagen debajo del texto, debes dejar un espacio y recuerda que para eso debes usar la siguiente extensión de etiqueta: <BR> Las recomendaciones con este elemento es que las imágenes estén dentro de tu carpeta y siempre revisar el formato de la imagen. A continuación, un ejemplo de lo mencionado. (Imagen 2- Imagen)
(Imagen 2- Imagen)
La siguiente herramienta que veremos es audio y video en HTML. El video es un sistema de grabación y reproducción de imágenes, que pueden estar acompañadas de sonidos. Para poder agregar un video en una página web deberás utilizar la etiqueta: <VIDEO> </VIDEO> El audio son sonidos que pueden reproducirse en cualquier parte. Para poder agregarlo a una página o sitio web necesita ser acompañado de la etiqueta: <AUDIO> </AUDIO>
Preparatoria de oriente a.c. Preparatoria incorporada a la buap Clave 8089 Informática iii Ambas etiquetas pueden utilizar los siguientes atributos: (Imagen 3- Atributos).
(Imagen 3- Atributos)
La siguiente herramienta que veremos es la de tablas en HTML, recordemos que una tabla es un medio de organizar datos en filas y columnas. Para realizar una tabla básica, debemos utilizar los siguientes tres elementos: Table- Contenedor principal. Tr- Esté representa las filas que van a contener a las celdas. Td- Esté va a representar a las celdas. Los atributos que utiliza son los siguientes:
BACKGROUND- Nos permite colocar un fondo de imagen en la tabla. BGCOLOR- Da color al fondo de la imagen. BORDER- El grosor del borde principal. BORDERCOLOR- El color del borde. CELLPADDING- Espacio entre el borde y el contenido. CELLSPACING- Espacio entre los bordes. HEIGHT- Altura de la tabla. COLSPAN- Combinar columnas. ALIGN- Alineación de la tabla. WIDHT- Anchura de la tabla. ROWSPAN- Combinar filas.
*Nota personal- Solo en este caso pueden existir dos cuerpos*
Preparatoria de oriente a.c. Preparatoria incorporada a la buap Clave 8089 Informática iii
Aplicación de las herramientas en mi sitio web. Lo primero que realizamos en nuestra página fue la realización de nuestros hipervínculos. A continuación, mostraremos como quedo nuestro esqueleto. (Imagen 4- Hipervínculos en S.W.)
(Imagen 4- Hipervínculos en S.W.)
En mi sitio web, realice 3 hipervínculos, para esto yo ocupe que mi sección tuviera un fondo, por eso utilizamos la etiqueta “BODY BACKGROUND” porque esa me ayudaría a colocar cualquier imagen que estuviera guardada en mi dispositivo. Posteriormente ocupe lo qué fue “FONT FACE”, eso fue para definir como quería que fuera la letra y su tamaño. Para mis hipervínculos, comencé con el elemento <A>, para que se creara el enlace, posteriormente ocupe la etiqueta HREF para convertirlo en enlace. Ya después puse el nombre de cómo se llamaría la página que quiero que se inserte en mi sitio, después ocupamos el atributo “TARGET BLANK”, para que el documento que íbamos a meter, se visualizara en otra ventana del navegador. Después colocamos el título de como queríamos que dijera nuestro hipervínculo y listo, ya solo queda cerrar nuestras etiquetas. Aquí podemos ver como se visualizan nuestros hipervínculos. (Imagen 5Muestra de hipervínculos)
(Imagen 5- Muestra de hipervínculos)
Preparatoria de oriente a.c. Preparatoria incorporada a la buap Clave 8089 Informática iii Después, para proseguir teníamos que crear nuestras páginas de información que abrieran nuestros hipervínculos, a continuación, mostraremos los esqueletos de las páginas que se van a mostrar en los hipervínculos. (Imagen 6- Pagina 1) (Imagen 7- Pagina 2) (Imagen 8- Pagina 3).
. (Imagen 6- Pagina 1)
(Imagen 7- Pagina 2)
Preparatoria de oriente a.c. Preparatoria incorporada a la buap Clave 8089 Informática iii
(Imagen 8- Pagina 3)
En la sección de páginas, realmente son etiquetas básicas que vimos en el parcial anterior, lo importante ahí, era colocar la información que querías que se viera, podrías poner información relacionada con tu tema, de cualquier tipo. Ahora lo que debíamos hacer era colocar imágenes en nuestra información para que no se viera muy vacía y aburrida, para esto debiste haber descargado una imagen relacionada con tu tema y guardarla en tu carpeta. A continuación, mostraremos el esqueleto de una imagen. (Imagen 9- Imagen en información 1).
(Imagen 9- Imagen en información 1)
Como podemos observar, estamos ocupando la etiqueta <CENTER>, para que nuestra imagen estuviera centrada, después abrimos ya lo que fue IMG porque vamos a insertar una imagen, le sigue SRC, eso es obligatorio, ya que con esa etiqueta podremos colocar el nombre de cómo esta guardada nuestra imagen.
Preparatoria de oriente a.c. Preparatoria incorporada a la buap Clave 8089 Informática iii Después ocupamos lo que fue WITDH, para definir el ancho de la imagen que en ese caso lo ocupe de 800, y HEIGHT, que ese nos ayudó a definir el alto de nuestra imagen. Por ultimo cerramos las etiquetas utilizadas y listo. A continuación, mostraremos como se ve la imagen en nuestra página. (Imagen 10- Imagen en página)
(Imagen 10- Imagen en página)
Posteriormente, ahora debíamos colocar, audio y video en nuestra página. Vamos a mostrar el esqueleto que ocupamos para poder realizar esto. (Imagen 11- Esqueleto audio y video).
(Imagen 11- Esqueleto audio y video)
Bueno aquí, lo primero que debemos ocupar es la etiqueta <AUDIO> para poder agregar un audio de una canción o de lo que sea a nuestra página. Posteriormente volvemos a ocupar lo que es SRC para poder mencionar el nombre de cómo está guardado el audio que queremos que se inserte en nuestra página. Después colocamos CONTROLS, para los controles de reproducción que por defecto no se muestran, después le sigue el AUTOPLAY y este es para que comience a reproducirse el sonido automáticamente. Después, para insertar nuestro video, debíamos empezar con la etiqueta <VIDEO>, para posteriormente volver a ocupar SRC para insertar después
Preparatoria de oriente a.c. Preparatoria incorporada a la buap Clave 8089 Informática iii el nombre de cómo está guardado nuestro video, posteriormente colocamos CONTROLS para los controles de reproducción que no se muestran, después colocamos AUTOPLAY para que comience a reproducirse en automático, luego colocamos lo que fue MUTED para que el audio de nuestro video no se escuchara y como es imagen volvemos a ocupar WIDTH y HEIGHT para definir el ancho y la altura de nuestra imagen. Posteriormente cerramos las etiquetas utilizadas y listo, a continuación, mostraremos como se ve nuestro audio y video. (Imagen 12- Audio y video).
(Imagen 12- Audio y video)
Ya finalmente, utilizamos el elemento de tablas en HTML. A continuación, mostraremos el esqueleto de cómo hacerlo. (Imagen 13- Esqueleto de tabla)
(Imagen 13- Esqueleto de tabla)
Preparatoria de oriente a.c. Preparatoria incorporada a la buap Clave 8089 Informática iii Como podemos ver es un esqueleto un poco amplio ya que utilizamos algunas cosas, comenzamos con la alineación porque queríamos que nuestra tabla estuviera en el centro, por eso ocupamos <P ALING="CENTER">, posteriormente TABLE BORDER, para definir el ancho de nuestro borde principal, después utilizamos BORDERCOLOR para el color del borde. Después utilizamos las etiquetas TR para representar las filas contenedoras y TD para representar las celdas. Para el título de nuestra tabla utilizamos <TH COLSPAN> para que nuestro título abarque todas las filas y no solo se quede el título en una sola. Si quieres poner más celdas solo debes ocupar TD, para colocar la información que tú quieras, también puedes cambiarles el fondo a las celdas ocupando BGCOLOR. También puedes ponerle a tu tabla, videos, imágenes o audios, solo debes abrir una celda nueva y colocar el esqueleto de como insertar un video, audio o imagen que ya mencionamos anteriormente. Al finalizar no olvides cerrar las etiquetas que utilizaste. A continuación, mostraremos como nos quedó la tabla. (Imagen 14- Tabla en página)
(Imagen 14- Tabla en página)
Y así fue como terminamos el diseño de nuestro sitio web.
Preparatoria de oriente a.c. Preparatoria incorporada a la buap Clave 8089 Informática iii
Conclusión… Bueno, realmente realizar un sitio web no es tan fácil en algunos aspectos. Aunque es un poco divertido cuando al final puedes ir notando los resultados correctamente y alegrarte porque sabes que tu esqueleto está correcto. La parte más complicada de hacer para mí fue insertar las imágenes, creo que fue porque quizá no estaban bien guardadas las imágenes en mi carpeta o la extensión al guardarlas no era la correcta, pero si me costó intentarlo en diferentes dispositivos para que las imágenes pudieras insertarse en mis páginas web. Después, para realizar la tabla, me pareció igual un poco complicado, ya que al mencionar mucho TR o TD, como que te revuelve un poco, pero cuando ves gráficamente la tabla vas comprendiendo cada cambio que se va haciendo, que, si el borde es más grueso, que quieres otro color en el borde, todo eso lo vas comprendiendo mejor cuando la ves ya insertada en tu página. La función que a mí se me hizo más fácil fue la de los hipervínculos porque considere que utiliza menos funciones y fu más fácil realizarlos, sin necesidad de insertar algo más. Así fue como terminamos nuestro sitio web.