Código HTML de color para fondo y texto en página Web

Cómo poner un color de fondo en nuestra página y cómo modificar el texto, formatearlo, cambiar el tamaño, la tipografía, entre otras cosas.

Código HTML de color para fondo y texto en página Web | Aprender HTML | Cómo poner un color de fondo en nuestra página y cómo modificar el texto, formatearlo, cambiar el tamaño, la tipografía, entre otras cosas
COMPÁRTELO:

Vamos a aprender cómo poner un color de fondo en nuestra página y cómo modificar el texto, formatearlo, cambiar el tamaño, la tipografía, etc.

Además, aprenderemos algunos recursos para colocarlos en la parte de la página que nos interese.

Con lo que aprendamos en este artículo ya seremos capaces de hacer una página sencillita. Más adelante, ya veremos cómo darle más alegría.

Configurando el fondo

Son varias las cosas que podemos configurar de fondo. En este artículo aprenderemos algunas de ellas.

Por ejemplo, ¿Se ha fijado en la barra de desplazamiento que aparece a la derecha del área de navegación? Bueno, pues resulta muy útil… si su página es lo suficientemente grande como para no caber completa en la pantalla. De esta forma, puede desplazarse arriba y abajo.

Pero si su página cabe en el área de navegación sin necesidad de desplazarse, la barra no es necesaria. Y, sin embargo, aparece allí. Está inhabilitada, pero está. Y podría ser su deseo que no apareciera.

Incluso puede mejorar el diseño final de la página. Para ello, necesitamos usar un atributo. Los atributos son parámetros que se añaden a los tags para configurar su funcionamiento.

La técnica más moderna y adecuada sería combinar nuestro documento web (HTML) junto con una hoja de estilo (CSS) para lograr quitar la barra de scroll. La ventaja de esta térnica es que se aplica a todos los navegadores, garantizando la compatibilidad. Nuestro documento Web por nombre sin-barra.html quedará de la siguiente manera:


<!DOCTYPE html>
<html>
	<head>
		<title>Título de la página</title>
		<link href="css/estilo.css" type="text/css" media="all">
	<head>
	<body>
	Esto es una página sin barra de scroll
	</body>
</html> 

Como ve, la barra ha desaparecido. De todas formas, debe asegurarse de no usar este efecto si su página necesita desplazamiento, ya que, si quita la barra, el usuario no tendrá modo de ver toda la página. La alternativa es grabar el atributo scroll con el valor “auto”. Así aparecerá la barra sólo si es necesario.

Quizá una de las posibilidades más llamativas a la hora de montar una página sea el uso de colores para el fondo de la misma. En los ejemplos del artículo anterior hemos creado una página cuyo color de fondo es el blanco. Este es el color por defecto del área de navegación. Veamos cómo cambiar eso. Para ello necesitamos añadirle al tag <body> otro atributo. En concreto, el que usamos para cambiar el color de fondo de la página es bgcolor, y le asignamos un valor que indique el color que deseamos. La palabra bgcolor es acrónimo de background color (color de fondo). Por ejemplo: si queremos que nuestra página tenga como color de fondo el amarillo, el tag <body> quedará de la siguiente forma:

<body bgcolor="yellow">

En este artículo vamos a aprender muchas cosas sobre colores, y el color del fondo de una página es, sin duda, lo primero que capta el usuario. Veamos cómo modificarlo. Abra con el bloc de notas el código texto_simple.htm del artículo anterior y modifique el tag <body> para que el código le quede de la siguiente forma:


<DOCTYPE! html>
<html>
	<head>
		<title>Título de la página </title>
	</head>
	<body bgcolor="yellow">
		Esto es una línea de texto.
	</body>
</html>

Este código lo guarda con el nombre fondo_amarillo.htm. Cierre el bloc de notas y ejecute el código que acaba de crear.  El resultado lo ve en la siguiente figura:

Página Web con fondo amarillo

Como ve, toda la página tiene el fondo amarillo. Esto es así porque el atributo bgcolor, que es el que se ha encargado de establecer este color, está asociado al tag body que es, como ya sabe, el encargado de definir el área de navegación  de la página.

Quiero que se fije también en que el tag que abre el body incorpora ahora un atributo, pero el tag que cierra el body no ha sido modificado.  Esto es así siempre en HTML. Aunque la apertura de un tag utilice atributos, el cierre no los lleva incorporados. Nunca incluya atributos en el cierre de un tag.

Colores para fondo y texto en página Web

Cómo poner colores de fondo e imágenes

Cómo poner un color de fondo o imagen en nuestra página.
🤖

ChatGPT Gratis
Realiza preguntas sobre cualquier tema

¡Participa!

¡Compártelo en tus Redes Sociales!
Compartir en:

CITAR ARTÍCULO


Para tareas, investigaciones, tesis, libros, revistas, blogs ó artículos académicos

Referencia en Formato APA:

Delgado, Hugo. (2013).
Código HTML de color para fondo y texto en página Web.
Recuperado 19 de abril, 2024, de
https://disenowebakus.net/domine-html-y-dhtml-configurando-fondo-y-texto.php

Profesor en la Universidad de Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Profesional en Desarrollo Web y Posicionamiento SEO desde hace más de 15 años continuos.
Contamos con más de 200 constancias y reconocimientos en la trayectoria Académica y Profesional, incluidos diplomados certificados por Google.

CONTINÚA APRENDIENDO

Menú categoría


Aprender HTML

TAMBIÉN MERECE LA PENA VISITAR:

¿Te gustaría aprender más sobre Diseño Web?

Conoce todos los cursos y tutoriales que tenemos para ti completamente gratis
Aprender Diseño Web

¿Todavía no encuentras lo que necesitas?

Usa nuestro buscador interno para descubrir más información
Contenido relacionado:

1 Comentario en "Código HTML de color para fondo y texto en página Web"

  1. Avatar usuario
    Jose

    Nunca incluya atributos en el cierre de un tag.

 

Deja tu Comentario

PATROCINADOR

Tu negocio también puede aparecer aquí. Más información
Anunciate aquí

Tu navegador ha bloqueado la publicidad.
Por favor 🙏 permite visualizar los anuncios para poder acceder, gracias.