Scribd
Cargar
1K vistas8 páginas

Fundamentos de Componentes Frontend HTML

El documento presenta un análisis y desarrollo de componentes frontend para una página web de prueba utilizando HTML, CSS y JavaScript. Describe los componentes clave de la página como el header, varias secciones con artículos, y un footer. Explica el uso de etiquetas HTML como <header>, <section>, <h1-h2>, <p>, <img> y <footer> así como estilos CSS para dar formato y diseño a los componentes mediante fuentes, colores, bordes y posicionamiento. Finalmente, incluye una alerta de JavaScript para

Cargado por

ANTONIO HUERTAS SANTAMARIA
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
1K vistas8 páginas

Fundamentos de Componentes Frontend HTML

El documento presenta un análisis y desarrollo de componentes frontend para una página web de prueba utilizando HTML, CSS y JavaScript. Describe los componentes clave de la página como el header, varias secciones con artículos, y un footer. Explica el uso de etiquetas HTML como <header>, <section>, <h1-h2>, <p>, <img> y <footer> así como estilos CSS para dar formato y diseño a los componentes mediante fuentes, colores, bordes y posicionamiento. Finalmente, incluye una alerta de JavaScript para

Cargado por

ANTONIO HUERTAS SANTAMARIA
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Análisis y desarrollo de software

fundamentos en la
implementación de componentes
frontend, HTML, CSS, JS.
GA6-220501096-AA4-EV01
Código: 2522002

Versión: 01

Antonio Huertas Santamaria

Abril de 2023

Sistema Integrado de Gestión y


Autocontrol

1
Introduccion

Teniendo en cuenta el proceso formativo, se debe tener en cuenta, que el diseño responsive de una app o una
pagina web, se considera una de las practicas optimas y de calidad según nuestra ruta de aprendizaje teniendo
en cuenta la importancia de tener conocimiento clave y vital para cualquier programador.

2
Componentes de la página web de prueba

• Tipos de lenguajes usados

❖ Html

Se usan nociones básicas para realizar una pagina web con ejemplos y de prueba, se
describirán los componentes mas adelante

3
1. Header

En este caso se utiliza la etiqueta header titulo notorio de la pagina web y poner indicar de
que tratara este blog de prueba realizado, adicional se marca con una etiqueta id para
identificarla y se utiliza la etiqueta h1 para el texto

2. Section

Se usaron etiquetas de sección para diferenciar del resto del cuerpo de la pagina unos
ítems que llamamos artículos y con class “post”, de esa manera cuando se use css para
darle estilo, podremos generarlos de manera unificada, teniendo en cuenta que es un blog
Adicional se usa la etiqueta h2 para cambiar el tamaño del titulo y se agregan “p” para
4
poner un párrafo o texto y se insertan imágenes con la la etiqueta ims= src llamando
imágenes almacenadas y dándole un tamaño según lo que queremos.

3. Footer
Como es importante la distribución también generamos un pie de pagina, que tiene ciertas
funciones

Dentro de las cuales esta dejarlo fuera de las section anteriores para diferenciarlo,
marcándolo con la etiqueta footer, darle una opción con la etiqueta <a href=
Para que una vez el usuario llegue al final de la pagina, con ese botón que llamamos “ir al
comienzo” pueda regresar al principio sin hacer scroll con su mouse o dedo, según el
dispositivo que este usando

5
❖ CSS

Al igual que HTML, se describirán los componentes usados para el desarrollo web mas
adelante

1. Font Family

Con css busco cambiar el tipo de fuente predeterminada para darle algo mas de estilo y
diseño al blog de prueba

6
Como podemos ver, también le damos una margen redondeada en los bordes para que
sea mas estético y con un tamaño acorde a la pagina, que permita mantener la calidad de
la imagen, se agrega color y se le da la opción de que cuando el usuario pase por encima
de los ítems su puntero cambien

7
También se le da un estilo al footer, para diferenciarlo del cuerpo del blog, con un tono
mas oscuro y que este flotando usando la etiqueta FLOAT

❖ JS

Con javascrip debido a mi corto conocimiento del mismo, genere únicamente una aleta
den una ventana emergente, indicando que se logro la conexión entre el html y javascript

1 Análisis y desarrollo de software fundamentos en la implementación de componentes frontend,
2 Introduccion Teniendo en cuenta el proceso formativo, se debe tener en cuenta, que el diseño responsive de una app
3 Componentes de la página web de prueba • Tipos de lenguajes usados ❖ Html Se usan nociones básicas para rea
4 1. Header En este caso se utiliza la etiqueta header titulo notorio de la pagina web y poner indicar de que tratar
5 poner un párrafo o texto y se insertan imágenes con la la etiqueta ims= src llamando imágenes almacenadas y dándole un
6 ❖ CSS Al igual que HTML, se describirán los componentes usados para el desarrollo web mas adelante 1. Font Fa
7 Como podemos ver, también le damos una margen redondeada en los bordes para que sea mas estético y con un tamaño ac
8 También se le da un estilo al footer, para diferenciarlo del cuerpo del blog, con un tono mas oscuro y que este flo

También podría gustarte