Todo sobre HTML, Hypertext Markup Language o el lenguaje de marcas hipertexto, con el que se realiza la creación básica de páginas web. Aquí encontrarás manuales, artículos prácticos y muchos complementos para empezar a desarrollar sitios web.
HTML es un lenguaje de marcación que sirve para definir el contenido de las páginas web. Se compone en base a etiquetas, también llamadas marcas o tags, con las cuales conseguimos expresar las partes de un documento, cabecera, cuerpo, encabezados, párrafos, etc. En definitiva, el contenido de una página web.
HTML es el primer lenguaje que debe aprender cualquier persona interesada en construir un sitio web. A partir del HTML podemos pasar a muchos otros lenguajes interesantes que sirven para hacer cosas diversas y más avanzadas. Es decir, sea cual sea la tecnología, herramienta o gestor de contenido que nos hayamos propuesto aprender, o que tengamos que usar en nuestro día a día, HTML siempre será el lenguaje en el que toda web se construye y, por tanto, es de obligado conocimiento para todos.
Aprender HTML es sencillo. En pocos días o semanas serás capaz de entender y usar las etiquetas más comunes y componer documentos HTML (páginas web) correctas. Aquí encontrarás muchas ayudas para poder dar esos primeros pasos y luego profundizar en cualquier área que necesites.
Esqueleto de un documento HTML
Un documento HTML, una página web, contiene un árbol de etiquetas, que tiene una organización básica. La etiqueta raíz de un documento HTML es <html> y dentro tiene dos etiquetas principales:
- <head>: con la información de cabecera de la página. Es información que en principio no aparecerá en el cuerpo de la página, pero que sirve para saber de qué trata la página, cómo deben interpretarla los distintos clientes web, etc.
- <body>: que es la información del cuerpo, es decir, lo que se verá en el navegador cuando el usuario entre.
Además, hay algunas otras etiquetas básicas de control, como podemos ver en el siguiente esqueleto de documento HTML básico.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Título del documento HTML</title>
</head>
<body>
</body>
</html>
La primera etiqueta (DOCTYPE) indica el tipo de documento. Esta etiqueta debe estar siempre al principio. Fue definido y simplificado así desde HTML 5, ya que antes el doctype se expresaba con una etiqueta mucho mayor.
Posteriormente tenemos la etiqueta <html>, con el atributo "lang" opcional. En este caso hemos indicado que el idioma es español.
Luego encontramos el <head>, que tiene varias etiquetas. Las importantes son:
- charset, siendo UTF-8 el recomendado. Lógicamente es importante que ese juego de caracteres se esté usando realmente al guardar el archivo con el código .html. Si usamos algún editor orientado a programadores seguramente se guarde con UTF-8 o al menos tengas la opción de escoger este juego de carácteres.
- Title, que es lo que mostrará el navegador en la pestaña donde se muestre esta página. También es muy importante para que Google y otros motores identifiquen bien el contenido.
Hay otras etiquetas en el <head> que son realmente aconsejables. El caso más claro es el del viewport. También es el lugar correcto para importar estilos CSS, por ejemplo.
Para acabar, el <body> contendrá la mayor parte de las etiquetas, con todo el marcado necesario para definir el contenido completo que se verá en la página.
Archivos HTML
Los archivos HTML son ficheros de texto con extensión .html.
Como archivos de texto deben estar escritos con un editor ee texto plano, como los que generalmente se usan para programación.
La recomendación es que estos archivos se guarden con codificación UTF-8.
Los archivos HTML se pueden almacenar en cualquier carpeta del ordenador y para abrir los generalmente es suficiente con hacer doble clic sobre ellos, con ello el ordenador los abrirá con el navegador predeterminado configurado en el equipo.
Varios archivos HTML enlazados entre sí es lo que llamamos un sitio web. generalmente se encontrarán todos almacenados en la misma carpeta o en carpetas dependientes de un directorio principal.
El archivo index.htnl de la carpeta principal es el documento raíz del siti web, o la portada. Al index.html también se le llama documento por defecto o documento predeterminado y es el que se carga en el acceso a una carpeta, si no se indica ningún otro nombre de archivo HTML al que se pretenda acceder.
Cómo trabajar con fondos de imagen en HTML, con ejemplos de código para usar imágenes de fondo en páginas web.
En el presente taller de HTML vamos a tratar de explicar asuntos relativos al uso de fondos de imagen en HTML. Indicaremos la manera de utilizarlos correctamente, pues los fondos son capaces de lo peor y de lo mejor, es decir, pueden ser tan bonitos y vistosos como feos y molestos. Por supuesto, se trata de quedarnos con la parte buena!
Pero antes de empezar, cabe recordar que HTML es un lenguaje que use debe usar para expresar el contenido de las páginas web. Sin embargo, el tema de los fondos es algo relativo a la presentación, por lo que lo lógico sería usar CSS para integrarlos. Al final de este artículo te explicaremos también cómo colocar el fondo usando CSS, así podrás aprender las dos partes.
Colocar un fondo en una página web
Para incluir un fondo en una página web necesitamos utilizar el atributo background en la etiqueta <BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio distinto que la página web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localización.
<body background="fondo.gif">Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la página como fondo. Por defecto, la imagen de fondo aparece como un mosaico, repitiéndose a lo largo de todo el espacio de la página.
Fondo en otros elementos
No solo la página puede tener un fondo, también lo podemos colocar a las tablas o las celdas, por ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas.
<table background="fondo.gif">
<td background="fondo.gif">Estos dos elementos (tablas y celdas), junto con el propio cuerpo de la página, eran los que permitían fondos en la web antes de existir el lenguaje CSS. Pero hoy, como veremos enseguida, con CSS podemos colocar fondos en casi cualquier elemento que tengas en tu página.
Consejos para utilizar fondos
Veamos ahora algunos consejos que se deberían seguir para una correcta utilización de los fondos de imagen.
1) Colocar un fondo de color parecido a la imagen
Cuando colocamos un fondo en una página debemos utilizar el atributo bgcolor para asignar un color de fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente muchos de nosotros habremos accedido a una página en la que no se ve nada y, cuando se carga el fondo, nos damos cuenta que sí que había texto en la página, lo que ocurre es que no se veía porque no contrastaba con el color de fondo blanco por defecto. Es posible que en estos casos la imagen de fondo fuera oscura y que el texto fuera blanco y, hasta que no se carga la imagen de fondo, no se puede ver nada. Este problema se agrava si el fondo no se llega a cargar por un error en la transferencia del archivo o porque la imagen ha sido borrada del servidor accidentalmente.
2) Que se puedan leer bien los textos
Los fondos están para hacer más vistosa la página, no para molestar en la lectura de los textos. Es un error muy común utilizar un fondo que luego molesta al leer los textos. Ya es bastante difícil leer una web en un monitor como para que encima el texto no contraste bien con el fondo que se está utilizando. En este caso cabe indicar también que es muy importante que las combinaciones de color del texto y del fondo sean agradables, ya que hay ciertos colores que, aunque contrastan bien, provocan unas combinaciones difíciles de leer, por ejemplo un fondo con un color azul predominante y el texto en rojo.
3) Los fondos de imagen de color homogéneo
Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una misma gama. Si la imagen tiene partes oscuras y claras, ¿de qué color pondremos el texto para asegurarnos de que se lea bien siempre? Si el texto es claro no contrastará bien con las partes del fondo que también son claras. Igual pasará si colocamos el texto con un color oscuro, que no contrastará bien con las partes oscuras del fondo.
4) Tener cuidado con las distintas definiciones de pantalla
Es importante saber que un visitante puede acceder a una página con un tamaño de ventana variable. A veces un fondo se comporta bien con una definición dada, pero no con otras mayores. Ocurre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de dimensiones reducidas. Luego accede una persona con una definición de monitores de alta gama y ve la página incorrectamente porque se realiza un mosaico con el fondo que no había tenido en cuenta el desarrollador.
5) Hacer un fondo suficientemente grande
Es importante que el tamaño del archivo que vamos a utilizar como fondo tenga un cierto tamaño. Si utilizamos como fondo una imagen de unos pocos pixels, nuestro ordenador trabajará mucho para crear el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un poco más grande, para realizar el mosaico hubiera trabajado mucho menos.
En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto que pueden dificultar mucho la presentación de la información en la página de una manera clara. Por supuesto, el buen gusto y el sentido común ayudarán bastante.
Si deseamos utilizar un fondo que pudiera dar algún problema, una idea para asegurarnos que los textos se visualicen correctamente es colocar todo el contenido de la página dentro de una tabla y asignarle a la tabla un color de fondo con el atributo bgcolor.
<html>
<head>
<title>Fondo de prueba</title>
</head>
<body background="fondo1.jpg" bgcolor="FFCECB">
<table width="550" bgcolor=FFCECB align=center>
<tr>
<td>
<h1 style="color:000000">Probando...</h1>
<br>
Este texto se lee bien porque tiene un fondo plano.
<br>
</td>
</tr>
</table>
</body>
</html>Fondos de imagen con CSS
Como habíamos dicho, antes de existir el lenguaje CSS, la única manera de conseguir poner fondos en las páginas web era con HTML. Sin embargo, ha pasado ya mucho tiempo desde entonces.
Hoy lo correcto es usar solamente el lenguaje CSS para colocar un fondo en una página web, ya sea como fondo en toda la página o como fondo en un elemento concreto.
Si no conocemos CSS podemos aprender en el Manual de CSS de DesarrolloWeb. En ese manual aprenderemos que existen varias maneras de aplicar estilos CSS a un documento HTML. También conoceremos varios de los atributos de las CSS, al menos los más importantes. Sin ese conocimiento de base es complicado entender los ejemplos que vamos a ver, al menos completamente, pero vamos allá.
Fondo para toda la página
En CSS podemos colocar el fondo a toda la página con el selector "body", que sirve para darle estilo a la etiqueta BODY.
body {
background-color: #ffdd90;
background-image: url("mi-imagen.jpg");
}En el código anterior estamos expresando un fondo de color sólido, junto con un fondo de archivo gráfico llamado "mi-imagen.jpg".
Lo bueno de las CSS es que nos permiten colocar no solo el fondo de una imagen, con un archivo gráfico, sino además decir si queremos que ese fondo se coloque con forma de mosaico, si queremos que tenga unas dimensiones dadas, un desplazamiento, etc.
El código para colocar el fondo sobre un elemento cualquiera de la página es prácticamente el mismo. Por ejemplo, así estaríamos colocando un fondo de imagen sobre todos los párrafos de la página.
p {
background-color: #309d20;
background-image: url("otro.png");
}Conclusión sobre el uso de fondos de imagen
Esperamos que se hayan aclarado tus dudas iniciales sobre el uso de fondos en páginas web. Hemos aprendido varias maneras de usar fondos, pero recuerda que lo más adecuado sería implementarlos mediante CSS.
Existen infinidad de artículos en DesarrolloWeb.com donde tratamos también el uso de fondos. Puedes aprender a colocar múltiples imágenes de fondo sobre un elemento. usar fondos con transparencia (semitransparentes), posicionar el fondo dentro del elemento (para que se vea justo la parte que quieres) o usar fondos con degradados, entre muchas otras informaciones que encontrarás entre nuestros artículos.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...
