Fondos y colores en HTML

 Fondo y colores en HTML

En el lenguaje de HTML es posible logar personalizar y crear distintos aspectos. Por lo que en este blog veras algunos estilos , y también cosas relacionadas a los fondos de una página web.

El padding:
Esta es la propiedad encargada de crear un espacio o área alrededor de un elemento, por lo que se puede tratar de el contenido que se encuentra en cualquiera de las 4 direcciones posibles.

Border:
Cuando hablamos de esta propiedad se trata de lograr definir los bordes de los elementos seleccionados.

Programa: 


Explicación: 
<!DOCTYPE html>: Declaración para indicar que este es un documento HTML5.
<html lang="es">: Define el lenguaje del documento como español para el atributo lang.
Meta etiquetas:

<meta charset="UTF-8">: Especifica la codificación de caracteres UTF-8 para soportar la mayoría de los caracteres escritos.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ajusta la escala inicial y el ancho del contenido para dispositivos móviles.
Título de la página:

<title>Ejemplo de Fondo y Color en HTML</title>: Define el título de la página que se muestra en la pestaña del navegador.
Estilos CSS internos:

Sección <style> dentro de <head>: Contiene las reglas CSS para estilizar la página.
body: Define el estilo para el cuerpo de la página, estableciendo el color de fondo (background-color) y el color del texto (color).
.container: Estilo para el contenedor principal del contenido, definiendo el fondo, el borde, el sombreado (box-shadow), el radio de borde (border-radius), el ancho máximo (max-width) y el margen (margin).
h1 y p: Definen el estilo para los encabezados y los párrafos dentro del contenedor.
Contenido HTML:

<div class="container">: Contenedor principal que agrupa el contenido visible.

<h1> y <p>: Encabezados y párrafos que contienen el contenido textual de la página.
Conclusión


Ya ejecutada:

Conclusión:
Este ejemplo muestra cómo combinar HTML y CSS para controlar los fondos y colores de una página web. El uso de estilos CSS internos proporciona flexibilidad para ajustar el diseño visual de manera efectiva. Además, es importante mantener un contraste adecuado entre los colores de fondo y el texto para garantizar la legibilidad y la accesibilidad de la página web.



Bibliografías:

•border. (s/f). MDN Web Docs. Recuperado el 24 de junio de 2024, de https://developer.mozilla.org/es/docs/Web/CSS/border

•Vargas, D. (2022, septiembre 6). Padding vs Margin: ¿cuál es la diferencia en CSS? Tutoriales Hostinger. https://www.hostinger.mx/tutoriales/padding-vs-margin








Entradas más populares de este blog

Arrays En JavaScript

Imagen
Arrays en JavaScript  En el lenguaje de JavaScript/HTML es posible guardar datos de una manera muy eficiente y rápida, este elemento es llamado Vector o también es conocido como un "Array". Por lo que en este blog veremos qué es un Array, su funcionalidad e importancia, y por último como crearlo junto a un ejemplo práctico. Los arrays en JavaScript son estructuras de datos muy útiles que permiten almacenar y manipular colecciones de datos. En este ejemplo, se utilizan arrays para: Almacenamiento de Sueldos : Los sueldos ingresados por el usuario se guardan en un array, lo que permite calcular el total de manera eficiente y mostrar el listado completo.  Meses y Días : Los nombres de los meses y la cantidad de días de cada mes se almacenan en arrays, facilitando la búsqueda rápida de esta información cuando el usuario ingresa un número de mes. ¿Cuales con las ventajas? Organización de Datos : Permiten agrupar datos relacionados de manera estructurada. Facilidad de Acceso : Los ...
Leer más

Condiciónales anidadas

Imagen
 Condicionales Anidadas Las condicionales anidadas  se refieren al uso de declaraciones condicionales dentro de otras declaraciones condicionales. Estos se utilizan a menudo para crear procesos de toma de decisiones y lógica más complejos en el código. En JavaScript, los condicionales anidados se pueden implementar usando declaraciones "if", "else if" y "else". Para ejemplificar esto, creamos unas página web, la cual haga lo siguiente:  Realizar un programa que lea por teclado el nombre de una persona y pida dos números, si el primero es mayor al segundo imprimir su suma y resta, en caso contrario imprimir la multiplicación y la división del primero respecto al segundo. El código entero es el siguiente: Formularios: Para hacer la entrada de datos fue necesario crear un formulario, mediante "form", y después de esto un label el cual indica el dato a ingresar para después leer con input. Variables : Fue necesario crear algunas variables para poder ...
Leer más

Ejemplo de Formularios

Imagen
 Ejemplo De Formularios. En el lenguaje de PHP/HTML, los formularios nos permiten interactuar en gran manera con el usuario en las páginas web. Mediante elementos HTML, los cuales permiten a los usuarios enviar datos al servidor para su procesamiento. Para ejemplificar a los formularios, creamos una página web la cual mediante un formulario registra los datos de: Nombre, Apellido y edad, después una condición verificará si es mayor o menor de edad. Entrada de datos : Los campos de entrada (<input>) permiten al usuario ingresar información. En este caso, hay campos para el nombre, apellido y edad del usuario. Cada campo tiene un atributo name que especifica el nombre de la variable que será utilizada para recuperar el valor ingresado por el usuario. El formulario utiliza el método POST para enviar los datos. Esto significa que los datos del formulario se envían al servidor web como parte del cuerpo de la solicitud HTTP. Condicionales: Mostramos los datos ingresados y luego det...
Leer más