Tecnología

Inicio

Cómo poner una imagen en el título de una página Web

Cómo poner una imagen en el título de una página Web


El título de una página Web es la frecuencia de la primera cosa que un espectador encuentros. Como tal, sirve para introducir el contenido de la página y puede presentar el estilo para todo el sitio Web. Una imagen puede ser un gran activo para el título de su página Web, aumentando el texto. En HyperText Markup Language (HTML), hay dos formas en las que se pueden incorporar imágenes en su título.

Instrucciones

La imagen

1 Obtener o diseñar una imagen en un programa de edición de imágenes. Si está utilizando una imagen que no es el suyo, asegúrese de que tiene permiso de copyright y dar crédito al creador. Si va a crear un icono, asegúrese de que es de 16 píxeles por 16 píxeles y tiene ya sea la extensión .ico o .png.

2 Asegúrese de que su imagen no hace que el texto de su página no sea visible si se utiliza como un fondo. Si el texto es negro y tiene la intención de colocar una imagen debajo de ella, asegúrese de que su imagen se proyectará de manera adecuada y no demasiado oscuro.

3 Guardar su imagen en la misma carpeta que la página Web.

Imagen como fondo

4 Abra la página Web en un programa de procesamiento de textos. Asegúrese de utilizar el \ "Abrir con ... \" función en lugar de hacer doble clic en el archivo HTML.

5 Si quieres poner una imagen detrás del título de la página en la ventana del navegador, necesitará el estilo de la imagen apropiada. Si bien esto puede llevarse a cabo dentro de su código HTML, el uso de hojas de estilo en cascada (CSS) permite una mayor flexibilidad.

6 En CSS, realizar modificaciones en el cuerpo de la etiqueta. Utilice Imagen de fondo para especificar la imagen, background-repeat para apagar repeticiones, y background-position para especificar la posición de la imagen. Por ejemplo:

cuerpo {

background-image: URL(\"yourimage.jpg\")

IR

background-repeat: no-repeat

IR

background-position: 50% 0%

IR

}

Las modificaciones de las posiciones de fondo alteran la posición de la imagen con respecto a su cuadro de relleno. Se enumeran en x%, orden y%. En este ejemplo, la imagen sería 50% a través de la caja (en otras palabras, en su centro) y 0% abajo de la caja (en su parte superior).

7 Abra la página Web en un navegador Web y asegúrese de que la imagen se visualice lo deseas. Realice los cambios necesarios en el código HTML y CSS.

El icono

8 Con el fin de crear un icono que va a ir al lado de su título en la pestaña del navegador Web (a menudo llamado \ "favicon \"), tendrá que modificar la etiqueta <head> del código HTML. Abra la página Web en un programa de procesamiento de textos.

9 Si el icono no es un archivo .ico, convertirlo en una usando el software de conversión de icono.

10 En la etiqueta <head>, insertar la etiqueta siguiente <link> para su icono:

<Link rel = \ "icono de acceso directo \" href = \ "youricon.ico \">


Artículos relacionados