Cómo Insertar Un Enlace En Un Banner

Tabla de contenido:

Cómo Insertar Un Enlace En Un Banner
Cómo Insertar Un Enlace En Un Banner

Video: Cómo Insertar Un Enlace En Un Banner

Video: Cómo Insertar Un Enlace En Un Banner
Video: Como! Poner Enlace En el BANNER (Cabecera) de Mi CANAL DE YOUTUBE 2024, Mayo
Anonim

Si tiene un banner, pero no hay un código html listo para insertarlo en la página, entonces agregar el enlace que necesita no es tan difícil. Incluso si el banner está hecho con tecnología flash. A continuación se describen las posibles opciones para organizar enlaces a banners en formatos gráficos y flash en el código fuente.

Cómo insertar un enlace en un banner
Cómo insertar un enlace en un banner

Instrucciones

Paso 1

Si el banner está en uno de los formatos gráficos (gif, jpg, png, bmp), entonces será suficiente poner la etiqueta de la imagen dentro de la etiqueta del enlace, primero forma la etiqueta de la imagen. En el lenguaje de marcado de páginas web (HTML - Lenguaje de marcado de hipertexto - "lenguaje de marcado de hipertexto"), su versión más simple se ve así: Aquí la "dirección relativa" de la imagen se especifica en el atributo src. En esta versión, el navegador asumirá que la imagen está en la misma carpeta en su servidor donde la página en sí es donde se inserta el banner. Pero es mejor especificar una "dirección absoluta":

Paso 2

Hay algunos atributos más para agregar a esta etiqueta. Dos atributos indicarán las dimensiones del banner (alto y ancho). Estos son atributos opcionales: la imagen se mostrará sin ellos si todo va bien cuando la página se carga desde el servidor al navegador. Pero si la imagen por alguna razón no está cargada, entonces la falta de dimensiones puede llevar al hecho de que todos los demás elementos de diseño estarán fuera de lugar. La etiqueta de tamaño se verá así:

Paso 3

De forma predeterminada, el navegador dibuja un borde azul alrededor de las imágenes de los enlaces. Para evitar esto, agregue un atributo de borde con un valor nulo a la etiqueta del banner:

Paso 4

Agregue un atributo más (título), que contendrá el texto de la información sobre herramientas cuando pase el cursor del mouse sobre el banner:

Paso 5

Ha preparado la etiqueta de la imagen con los atributos más importantes, ahora debe colocarla dentro de la etiqueta del enlace. Cada hipervínculo está formado por dos etiquetas: apertura y cierre: la etiqueta de apertura contiene el atributo href, que contiene la dirección para enviar la solicitud. Entre estas dos etiquetas de enlace e inserte la etiqueta de banner: El código HTML del banner con el enlace está listo, no olvide reemplazar: - en el atributo href: "https://kakprosto.ru" con la dirección de su enlace para el banner; - en el atributo src: "https://kakprosto.ru/banner.gif" a la dirección de la imagen del banner; - en el atributo de ancho: "468" para el ancho de su banner; - en el atributo de altura: "60" para la altura de su banner; - en el atributo de título: "¡Es un banner!" texto emergente para su banner;

Paso 6

Todo lo anterior se refiere a banners de imagen, pero también hay banners hechos con tecnología flash. Para insertar un enlace en una película flash de forma estándar, debe tener no solo el banner en sí, sino también su código fuente. Además, puede editar el código fuente y luego compilar la película Flash solo en un editor especializado; un editor de texto normal no es adecuado para esto. Sin embargo, hay una manera de sortear todas estas dificultades, limitándose a editar solo HTML y CSS (Hojas de estilo en cascada - "hojas de estilo en cascada"). El lenguaje CSS se utiliza para una descripción más detallada (en comparación con HTML) de la apariencia de los elementos de la página. Con su ayuda, se pueden construir estructuras multicapa bastante complejas en las páginas. Usaremos esto colocando el banner Flash en la capa inferior y colocando la capa con el enlace encima. El código HTML del banner se verá así:

No olvide reemplazar los atributos de ancho y alto en él (en dos lugares), el nombre del banner banner.swf (en dos lugares) y la dirección del enlace https://kakprosto.ru (en un lugar). Y el código SCC correspondiente a este código HTML debería ser así:

div.linkedFlashContainer {posición: relativa; índice z: 1; borde: 0px; ancho: 468px; altura: 60px}

a.flashLink {posición: absoluta; índice z: 2; ancho: 468px; altura: 60px; background: url (spacer.gif) no-repeat;}

Aquí se utiliza una imagen transparente (de cualquier tamaño) llamada spacer.gif. Y aquí, también, no olvide cambiar el tamaño del ancho y la altura (en dos lugares).

Recomendado: