PREPARATORIA DE ORIENTE A.C REPORTE DE PÁGINA WEB INFORMÁTICA III MTRA. LILIA RIVERA GONZÁLEZ MERAZ PIÑA ALEXA CAMILA 3º A 2020-2021 meraz.alexac@preparatoriadeorienteac.edu.mx
PREPARATORIA DE ORIENTE A.C INFORMÁTICA III MTRA. LILIA RIVERA GONZÁLEZ REPORTE DE PÁGINA WEB MERAZ PIÑA ALEXA CAMILA 3º A
Propósito: Reconocer, entender, saber y aplicar de manera correcta las herramientas que un bloc de notas nos ofrece para la creación de una página web. ¿Qué es una página web? Documento digital de carácter multimediático, esto quiere decir que es capaz de incluir audio, video, texto y sus combinaciones adaptando a los estándares de la www y a la que se puede acceder a un navegador web. *Nota: Se realiza a través del lenguaje como HTML. Bloc de notas: El programa más básico que tiene Windows para crear documentos de texto. HTML: Lenguaje de marcas de Hipertexto, del inglés HyperText Markup Language. No es un lenguaje de programación, es un lenguaje de marcado que define la estructura de tu contenido. Normas fundamentales: Þ Es solo texto, por lo que usa bloc de notas para generar .txt. Þ No distingue entre mayúsculas y minúsculas. Þ Usa como interprete cualquier navegador. Þ Caracteres especiales. - Para escribir caracteres especiales se usa el código ASCII. Para aplicar una función en bloc de notas debemos utilizar un elemento básico en HTML, que son las Etiquetas, también llamadas marcas o tags, con las cuales conseguimos expresar las partes de un documento, cabecera, cuerpo, encabezado, párrafos, entre otros. Los tags se engloban entre los signos menor y mayor que (<>), y tienen un inicio y un cierre. Inicio:<Ejemplo> Cierre: </Ejemplo>
PREPARATORIA DE ORIENTE A.C INFORMÁTICA III MTRA. LILIA RIVERA GONZÁLEZ REPORTE DE PÁGINA WEB MERAZ PIÑA ALEXA CAMILA 3º A
Lo que se hizo en esta parte de la creación de una página web, fue insertar hipervínculos que dirigen a otras páginas web que también hice, introducir imágenes y videos, así como audios y tablas. Para introducir hipervínculos se necesita forzosamente el elemento ancla <a>, para que cuando el visitante haga click en él, abra otra página. Este elemento tiene la función de ser contenedor. Su estructura es la siguiente: <a>… </a> Sin embargo, para que esta herramienta te pueda llevar a otra página, lo que debes de hacer es aportar una URL de la página que quieres que abra y escribirla entre comillas después de HREF=. Cabe recalcar que el nombre de la página debe tener una terminación de .html. Para mejor entendimiento, aquí está un ejemplo: <A HREF= “páginaquequiero.html”> Nombre de la página </A> En este elemento existen atributos, los cuales son: ATRIBUTO FUNCIÓN TARGET= “_blank” Abre una ventana nueva. TARGET= “_self”
Muestra la nueva página en la misma ventana que ya estabas.
TARGET= “_parent”
La página es mostrada en el FRAMESET padre del frame actual.
TARGET= “_top”
El enlace es mostrado usanto todo el espacio de la ventana.
Mi creación de hipervínculos fue de la siguiente manera: 1. Tenía un esqueleto el cual estaba dividido en tres, titulo, menú y video; en la parte del menú es en la que hice mis hipervínculos. De igual manera ya tenía las páginas las cuales quería que se abrieran al darle click. 2. Inicié con <HTML>, después le puse el color que quería el fondo utilizando <BODY BGCOLOR>, para más sencillo los cerré los dos al final. 3. Después, indiqué qué alineación quería escribiendo <CENTER>.
PREPARATORIA DE ORIENTE A.C INFORMÁTICA III MTRA. LILIA RIVERA GONZÁLEZ REPORTE DE PÁGINA WEB MERAZ PIÑA ALEXA CAMILA 3º A
4. Luego apliqué el formato de fuente que tendrían mis hipervínculos, utilizando <FONT FACE="" COLOR= "" SIZE=> y de igual manera cerrando al final esta parte. 5. Posteriormente, ya comencé insertando el elemento ancla con su respectivo atributo, en mi caso utilicé TARGET= “_blank”. Escribí el título de cada página. 6. Por último, como lo mencioné en el paso 1, en donde hice todo este proceso fue en el apartado de Menú, por lo que guardé mi bloc de notas de esa manera y agregando .html. Todos los pasos que seguí, te los muestro en la imagen 1.
Imagen 1. Elaboración de hipervínculos.
Este es el resultado del Menú:
Imagen 2. Resultado del Menú.
PREPARATORIA DE ORIENTE A.C INFORMÁTICA III MTRA. LILIA RIVERA GONZÁLEZ REPORTE DE PÁGINA WEB MERAZ PIÑA ALEXA CAMILA 3º A
Para insertar imágenes, se utiliza la etiqueta <IMG>, que requiere de un atributo para poder ser utilizado correctamente. Algunos de los atributos son los siquientes: ATRIBUTO FUNCIÓN SRC Indica el nombre o la URL de la imagen a mostrar(forzoso). WIDTH
Indica el ancho de la imagen (en pixeles).
HEIGHT
Indica el alto de la imagen (en pixeles).
ALT
Establece un texto de imagen.
Los pasos que seguí para añadir imágenes a mis páginas, fueron los siguientes: 1. Tener mis páginas bien hechas, para poder insertar las imágenes sin problema. A su vez, tener las imágenes que añadiría a cada una de mis páginas guardadas con la extensión . 2. Después, observé bien mi página para ver en qué lugar la pondría la imagen, después de qué texto. 3. Inicié escribiendo la alineación que quería en mi imagen, <CENTER> y la cerré al final. 4. Por último, inserté el elemento <IMG SRC> con el nombre respectivo de mi imagen; también la altura y la anchura. Mis pasos a seguir se muestran en la imagen 3:
Imagen 3. Elemento <IMG>.
El resultado final fue el siguiente:
PREPARATORIA DE ORIENTE A.C INFORMÁTICA III MTRA. LILIA RIVERA GONZÁLEZ REPORTE DE PÁGINA WEB MERAZ PIÑA ALEXA CAMILA 3º A
Imagen 4. Resultado final de Imagen.
Continuando con el video, es muy parecido a insertar una imagen, seguí los mismos pasos, sin embargo agregué más herramientas que te mostraré a continuación: ATRIBUTO FUNCIÓN src Video para reproducir. Obligatoria si funciona como etiqueta contenedora. autoplay Comienza a reproducirse automáticamente. muted
El video no tiene sonido a no ser que lo pongas.
controls
width
Muestra los controles de reproducción que por defecto no se muestran. Indica el ancho del video(en pixeles).
heigth
Indica el alto del video (en pixeles).
loop
Inicia una y otra vez el video(bucle).
La fórmula que sigue es <VIDEO>… </VIDEO>. Lo que yo hice fue lo siguiente:
PREPARATORIA DE ORIENTE A.C INFORMÁTICA III MTRA. LILIA RIVERA GONZÁLEZ REPORTE DE PÁGINA WEB MERAZ PIÑA ALEXA CAMILA 3º A
1. En mi esqueleto tenía un apartado para el video, por lo que abrí un nuevo bloc de notas para comenzar con lo de siempre <HTML>, <BODY> para tambien cerrarlos al final: </HTML>, </BODY>. 2. Posteriormente, ya debía tener el video que quisiera agregar guardado con la extensión .mp4, así que escribí la herramienta <VIDEO> y agregué SRC junto con el nombre de mi video, quedando <VIDEO SRC= “sonden.mp4”>, y como en el paso 1, cerré la etiqueta al final; </VIDEO>. 3. Después agregué la altura y anchura de mi video, cuidando que estuviera bien posicionado en el espacio correspondiente. 4. Agregué los atributos controls, autoplay y muted, para mejor calidad al usuario que viera mi página. Estos pasos que seguí, te los muestro en la imagen 5:
Imagen 5. Insertar video.
Mi video en la página se muestra de la siguiente manera:
Imagen 6. Video en la página.
Como se podrá observar, está muteado.
PREPARATORIA DE ORIENTE A.C INFORMÁTICA III MTRA. LILIA RIVERA GONZÁLEZ REPORTE DE PÁGINA WEB MERAZ PIÑA ALEXA CAMILA 3º A
Prosiguiendo con el audio, es exactamente lo mismo que el video, omitiendo algunos atributos que si agregamos, no tendría caso poner audio. Lo que cambió fue que le agregué <P>… </P> para que lo tomara como un párrafo y pudiera reproducirse, al igual que agregué LOOP para que la canción en cuanto acabara volviera a iniciar Mi audio se muestra así:
Imagen 7. Audio en el bloc de notas.
Dentro de la página, se ve de la siguiente manera:
Imagen 8. Audio en la página.
Lo último que agregué a mi página, fue una tabla que contuviera los bailes más representativos de México con su respectiva canción. Para ello, utilicé el elemento básico para crear una tabla: <TABLE>… </TABLE>, <TR> y <TD>… </TD> ATRUBUTO FUNCIÓN Bgcolor Indica el color del fondo de la tabla. Border
Grosor del borde principal.
Bordercolor
Color del borde.
Colspan
Combina filas.
Align
Alinea la tabla.
Los pasos que seguí, fueron los siguientes:
PREPARATORIA DE ORIENTE A.C INFORMÁTICA III MTRA. LILIA RIVERA GONZÁLEZ REPORTE DE PÁGINA WEB MERAZ PIÑA ALEXA CAMILA 3º A
1. Tenía la idea de cómo quería mi tabla y la información ya descargada que esta tendría. Asímismo, la página en la que quería que apareciera y después de qué información. 2. Comencé agrgando <P> para que el alineado fuera más sencillo y toda mi tabla la tomara como un párrafo. Lo cerré al final (</P>). 3. Después abrí el elemento <TABLE>, agrgando en este el borde, el color del borde y el color de fondo de la tabla. 4. Posteriormente, inserté <TR> para comenzar a insertar mis filas, al yo querer que dos columnas se juntaran y fuera solo una, a <TR>, le agregué COLSPAN para que así sucediera, quedó <TD COLSPAN="2">. Esto sería unicamente para mi título. 5. Inserté toda la información de mi título. 6. Nuevamente inserté <TR> para indicar otra fila, agregué dos <TD> para indicar que quería dos columnas, en ambas agregué el mismo formato, la diferencia fue la información que esta contenía. Cerré los atributos que utilicé. 7. Otra vez inserté <TR> para agregar ora fila, en esta de igual manera quise dos columnas, así que agregué dos <TD>; en la primer columna, llevaba el nombre de un baile, así que inserté el color de texto que fue naranja. En la otra columna agregué un audio de la manera que aparece arriba. Para mis demás filas copié y pegué. Mi tabla en el bloc de notas se ve de la siguiente manera:
PREPARATORIA DE ORIENTE A.C INFORMÁTICA III MTRA. LILIA RIVERA GONZÁLEZ REPORTE DE PÁGINA WEB MERAZ PIÑA ALEXA CAMILA 3º A
Imagen 9. Tabla en el bloc de notas.
En la página, se ve así:
Imagen 10. Tabla en la página.
¿Qué aprendí? Como crear una tabla, como insertar audios, como agregar imágenes y cudeos, también nuevos atributos. ¿Qué fue fácil? Todo tuvo cierto grado de complejidad, sin embargo prestándo atención, los audios, videos e imágenes son muy sencillos.
PREPARATORIA DE ORIENTE A.C INFORMÁTICA III MTRA. LILIA RIVERA GONZÁLEZ REPORTE DE PÁGINA WEB MERAZ PIÑA ALEXA CAMILA 3º A
¿Qué se me dificultó? Saber cómo insertar una tabla, se ocupan muchas cosas para hacer una tabla estética y muy bien hecha. Conclusión: Me gustó mucho esta práctica porque puede serme muy útil, aunque fue muy laborioso, crear una buena página fue un buen reto.