Iniciar página con título y fondo

INICIAR UNA PÁGINA

1) CÓMO...

1.1) Crear una página HTML.

Una página HTML se compone esencialmente de:

Cabecera (en inglés "head" = cabeza) o parte inicial y
Cuerpo (en inglés "body" = cuerpo) o bloque principal.

Para crear la cabecera existe un par de tags (ver el capítulo anterior) que a nadie sorprenderá ya que sean  <HEAD>....................</HEAD>.

Para crear el cuerpo hay otro par de tags que (casi no hace falta decirlo) son <BODY>......................</BODY>.

He escrito los tags en MAYÚSCULAS para que se vean bien claros pero pueden escribirse en minúsculas o incluso mezclando unas y otras (por ejemplo, <HeAd> o <bOdY>) si a alguien le divierte hacerlo (hay colegas muy pintorescos en la Net). El navegador no presta atención a esos detalles (está demasiado ocupado con cosas más importantes), pero no pienses que es analfabeto ni mucho menos... Si escribes <BODI> <VODY> <VODI> <Bodí> , olvidas la H de HEAD o cometes cualquier otro error... la habrás "pifiado". El navegador NO PERDONA NI UNO y tu página puede parecer cualquier cosa... o simplemente NO APARECER.

Los puntos (.....................) que he escrito entre los dos elementos del tag no forman parte de él (no deben escribirse); son una forma de indicar que allí habrá "cosas" que tratándose del código de una página HTML serán (ver capítulo anterior) TEXTOS, otros TAGS o NOMBRES de archivos, targets, o URLs...

EXISTE ADEMAS UN TAG (o mejor dicho un par de tags) que indican que todo el código es eso: código HTML  y que encierra dentro de sus dos elementos TODO EL CÓDIGO DE CADA PÁGINA. Y no resulta nada extraño que ese tag sea:  <HTML>.......................</HTML>.

Así que, por lo que vamos viendo el código de cualquier página será SIEMPRE así (con COSAS - más tags, textos y nombres - DENTRO): 

<HTML>
<HEAD>
.......................
.......................
</HEAD>
<BODY>
.......................
.......................
.......................
.......................
.......................
</BODY>
</HTML>

He puesto un par de líneas de puntos dentro de <HEAD> y algunas más dentro de <BODY> para indicar que entre <HEAD> y </HEAD> irán algunas cosas..., pero entre <BODY> y </BODY> irá TODO EL CUERPO de la página, o sea prácticamente TODA LA PAGINA.

Apliquemos ahora nuestro método "COPIAR y PEGAR" (ver capítulo anterior si hay dudas) para hacer tu primera prueba.

Este es el código más sencillo que se me ocurre para tu primera página HTML (tan sencillo que no tiene ni cabecera... - por ahora podemos prescindir de ella - ) :

<HTML>
<BODY>
Esta es mi primera página HTML.
</BODY>
</HTML>

ABRE tu "Bloc de Notas" de Windows'95 con archivo nuevo y minimiza su ventana, de momento. SELECCIONA con el ratón el código que tienes a la vista y COPIALO. (Por si alguien no sabe qué hay que hacer para COPIAR: Estando seleccionado el texto a copiar, que aparecerá por tanto en "negativo" sobre fondo oscuro, coloca el puntero del ratón SOBRE ESE TEXTO, haz clic con el botón DERECHO y en el menú que aparece haz clic en Copiar). RESTAURA la ventana del Bloc de notas, haz clic sobre ella para que aparezca el cursor, si no ha aparecido ya, haz clic de nuevo, ahora con el botón DERECHO, y en el menú que aparezca haz clic en Pegar. El código seleccionado previamente aparecerá en tu ventana del Bloc de Notas. ¡Enhorabuena! Ya tienes escrito el código de tu primera página.

AHORA, para que tu código sea reconocido por el Explorador de Windows como una página HTML tienes que salvarlo con la extensión .htm  o  .html (da lo mismo). Así que en el menú "Archivo" haz clic en "Guardar como...", elige el directorio en el que quieras salvarlo... (cualquiera vale pero puedes crear uno "Pruebas de HTML"...) y escribe para él un nombre, por ejemplo "mipagina.htm".

Conviene que te acostumbres ya desde ahora a emplear nombres cortos (quiero decir sobre todo sin espacios, aunque pueden tener más de ocho letras...), en minúsculas y que no contengan eñes, acentos, diéresis, ni ningún carácter que no pertenezca al alfabeto INGLES, porque si no lo haces así, aunque todo te funcionará muy bien en tu propio equipo, cuando quieras cargar tu página en el servidor (para que podamos verla los demás a través de Internet) el servidor no te aceptará los archivos con nombres que no sigan esa norma, ya que casi todos los servidores emplean el UNIX como Sistema Operativo y el UNIX no acepta esas letras, ni espacios en los nombres de archivos.

Bueno, ya tienes hecha tu primera página HTLM. Localízala en el Explorador y haz "doble clic" sobre su nombre: Se abrirá una nueva ventana de tu navegador y en ella leerás una sola línea de texto:

Esta es mi primera página HTML.

ES TU PRIMERA PÁGINA HTML...

(Si no obtienes este resultado es que HAS HECHO ALGO MAL. Vuelve a empezar desde el principio hasta que te funcione todo bien).

Para ver el código de tu página haz clic con el botón DERECHO sobre cualquier parte de ella y luego sobre el comando "Ver código fuente" del menú que aparece. Se abrirá tu Bloc de Notas con el archivo "mipagina.htm" abierto y allí podrás volver a ver el código que habías PEGADO hace un momento. ¡NO CIERRES EL BLOC DE NOTAS! Mantenlo abierto minimizado porque vas a seguir usándolo para poner TÍTULO y FONDO a tu primera página.

1.2) Poner título a la página.

Se llama TÍTULO de la página no a la primera línea de texto que puede constituir el título del texto de la página, como es corriente en cualquier texto, sino al título de la página misma (que no tiene por qué coincidir tampoco con el nombre del archivo de la página). Este título de la página no aparece en el texto de la página al visualizarla sino en la barra superior del navegador que empleemos y nos sirve para identificar la página que estamos viendo. Es también el texto que con el que se registrará en la lista de "Favoritos" (si al añadirlo no es modificado por el usuario). No es imprescindible y, si no ponemos ninguno, en la barra superior (y en "Favoritos")aparecerá la URL de la página (abreviada o completa, según tengamos configurado el navegador).

Para poner título a una página basta COPIAR y PEGAR, dentro de su tag <HEAD>, el siguiente código, que ya conoces :

<TITLE>Título de esta página</TITLE>

Como prescindiste del tag <HEAD> en el código de tu primera página, tendrás que añadirlo ahora, así que el código que debes COPIAR y PEGAR (a continuación del primer tag <HTML>) será éste:

<HEAD><TITLE>Título de esta página</TITLE></HEAD>

SELECCIONA, COPIA y PEGA este código en el código de tu página (que tienes abierto en tu Bloc de Notas) y, antes de guardar el archivo, CAMBIA el texto "Título de esta página" por el que en realidad quieras que tenga, que puede ser CUALQUIERA, sin ninguna limitación, en principio. Por ejemplo puedes llamarla: "No está mal para ser la primera" o lo que te venga en gana. La cuestión es que te vayas acostumbrando a CAMBIAR COSAS en los códigos pegados SIN TOCAR PARA NADA los tags...

HAZLO y guarda el archivo "mipagina.htm" que contendrá el código de una página con título, como podrás comprobar "recargándola" en el navegador, pinchando el icono "Actualizar" de la barra de herramientas o simplemente pulsando F5. (¿Ha ido todo bien? Si no, ya sabes... a volver a empezar donde estabas...).

1.3) Poner fondo a tu página.

Verdaderamente, no resulta muy vistosa tu paginita... Vamos a mejorarla un poco poniendola un FONDO.

En cuanto a fondos, tienes dos posibilidades a elegir: La primera es poner un fondo de color uniforme y liso... La segunda es poner una imagen de fondo... La elección depende de tus gustos y algo también (aunque nada te obliga a ello) del contenido de tu página. Porque no parece muy adecuado, por ejemplo, utilizar una imagen de flores y mariposas multicolores para una página que trate sobre electrónica... Aunque ¿quién sabe?... El artista decidirá.

De momento supongamos que has decidido poner un fondo de color liso... Pues la cosa no puede ser más sencilla. Ni siquiera necesitarás PEGAR NADA en tu código. Basta con que vuelvas al Bloc de Notas, en el que hemos quedado que mantendrías abierto el archivo con el código de tu página, y añadas escribiéndolas un par de palabrejas que ahora te diré, inmediatamente después de la primera palabra "BODY" del tag <BODY> que inicia el CUERPO de tu página, dejando un espacio en blanco, o sea <BODY AQUÍ>. Las palabras a añadir son:

BGCOLOR="nombre del color que prefieras"

Pero, claro, no se te vaya a ocurrir elegir como color preferido "azul Soraya ligeramente oscuro" o algo así, porque el navegador sólo reconoce como nombres de colores los que aparecen en la tabla siguiente y los demás... los ignora olímpicamente: Para ver la tabla haz clic AQUÍ.

¿Qué te parece el surtido? Yo pienso que no está mal. Elige el que más te guste, teniendo en cuenta el color en el que te ha salido escrito el texto de tu página (que no puedo saber cuál es porque de momento depende de cómo hayas confidurado los colores "por defecto" de tu navegador) para que hagan contraste y pueda verse el texto... Si tu texto, como es lo más probable, se ha visualizado en negro o un color oscuro elige para fondo un color claro. Nada te impide, naturalmente, hacer pruebas hasta que encuentres la combinación que más te guste...

Supongamos que eliges "verde claro". Deberás escribir "lime" (sin olvidar las dobles comillas) y el tag quedarìa así:

<BODY BGCOLOR="lime">

Guarda tu archivo "mipagina.htm" pero no cierres aún el Bloc de Notas, porque vas a volver a usarlo en seguida.

Antes que nada convendrá  que compruebes si todo ha ido bien, volviendo a recargar tu página en el navegador, con el comando correspondiente o pulsando F5... Porque... si no aparece el fondo elegido o no te gusta demasiado... ya sabes...

Todo fue bien... (¡Enhorabuena!) pero.... lo has pensado mejor y has decidido que prefieres una imagen de fondo. ¡NO PROBLEM! como se diría en inglés... Pero para ello lo primero que necesitamos es una imagen copiada en el mismo directorio o carpeta que el archivo "mipagina.htm", o sea que tu página. En principio podrías usar como fondo de tu página cualquier imagen de extensión JPG, GIF o BMP (incluso GIF animadas, que quizás sepas lo que son y si no no te preocupes porque te lo explicaré unos capítulos más adelante) y de cualquier tamaño. Pero... hay que elegir muy cuidadosamente la imagen a utilizar porque esa imagen (o esa imagen repetida automáticamente hasta completar el tamaño de la pantalla) nos llenará por completo la página y muy posiblemente nos impedirá ver los textos y otras imágenes que queramos mostrar.

Como imágenes de fondo suelen emplearse pequeñas imágenes de tipo JPG que, como decía hace unas líneas se repiten hasta llenar la pantalla,de colores claros (si el texto es oscuro) o por el contrario, de colores oscuros (si el texto es claro). Se pueden copiar muy fácilmente de cualquier página de Internet que tenga fondo simplemente haciendo clic con el botón DERECHO sobre cualquier punto de la página que no tenga otra imagen y luego volviendo a hacer clic sobre el comando "Guardar fondo como..." del menú que aparece. Elegimos el directorio en el que guardar la imagen y el mismo navegador nos indica un nombre (que podemos cambiar) y se encarga de añadir la extensión que corresponda según el tipo de imagen de que se trate...sin más que "pinchar" en "Guardar".

Para simplificar las cosas voy a dejarte que copies la imagen de fondo de esta misma página, que es una creación mía compuesta con mi retrato en bajorrelieve superpuesto, como "marca de agua", a un estucado blanco grisáceo... Me dió bastante trabajo hacerla pero me gusta cómo quedó. Haz lo que te he indicado en el párrafo anterior y verás que la imagen se llama "buhobg.jpg" y,cuando la hayas copiado verás también que sólo ocupa 4 KB. COPIALA con ese mismo nombre en el mismo directorio donde tienes el archivo "mipagina.htm".

Si lo has hecho bien...YA TIENES UNA IMAGEN para fondo de tu página. Si no has conseguido copiarla... ya sabes... (a repetir hasta que lo consigas...)

Y ¿cómo la insertamos en tu página? Pues de un modo muy sencillo, parecido al que has usado antes para el color de fondo. No hace falta PEGAR nada: VUELVE al Bloc de Notas con el código de tu página, BORRA la "frase" BGCOLOR="lime" y en su lugar ESCRIBE esta otra: BACKGROUND="buhobg.jpg". GUARDA el archivo y esta vez puedes cerrar el Bloc de Notas, aunque convendrá que mires una vez más si todo ha ido bien recargando tu página pulsando F5 o con el botón "Actualizar" de la barra de herramientas del navegador.

Tu página deberá tener ahora el mismo bonito fondo que ésta, con mi retrato repetido vigilando toda la pantalla. Y si no es así...pues, ya sabes...

¡¡¡YA SABES... CREAR y PONER TÍTULO y FONDO a una PÁGINA!!!

2) COPIAR y PEGAR

Código para iniciar una página con título y fondo. (COPIA, PEGA y COMPLETA, CAMBIA o BORRA los datos que figuran en color rojo)

<HTML>
<HEAD><TITLE>
Escribe aquí el título</TITLE></HEAD>
<BODY BGCOLOR="
color" BACKGROUND="imagen.jpg">
Aquí los textos e imágenes a incluir en la página.
</BODY>
</HTML>

=== FIN DEL CAPÍTULO 1. 2 ===

Volver a la Biblioteca