Programación Web » Aprender HTML » Unidad 3. Introducción a HTML:

Configurando fondo y texto en HTML

html

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.

2.1 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.

Podemos hacer desaparecer  la barra de desplazamiento si le añadimos al tag body el atributo scroll con el valor “no”, tal como se muestra el listado sin-barra.html.

<html>
                <head>
                <title> Título de la página </title>
                <head>
                <body scroll=”no”>
                Esto es una página sin barra de scroll
                </body>
</html>

El resultado de este código es la página que se ve en la siguiente figura:

domine html y dhtml Otra 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:

<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:

domine html y dhtml

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.

Diseño de páginas Web en Puerto Vallarta y Bahía de Banderas akus.net
subir

Síguenos en Facebook

Artículo de la semana

Cómo iniciar una página WebMetodología para la creación de sitios

Comprende las fases de Análisis, Planificación, Contenido, Diseño. ¿Qué método utilizas?