Cómo hacer una imagen de cabecera CSS Clickable

Puede utilizar las hojas de estilo en cascada, o CSS, para ayudarle a configurar atributos de estilo de una imagen de cabecera se puede hacer clic en su página web para. Esto es útil cuando se desea que el usuario pueda hacer clic en la imagen para llevarlos a otra página Web. La cabecera etiquetas HTML "h1" a "h6" están reservados para uso en HTML. Puede establecer los atributos de esta cabecera, añadir una imagen a él y luego hacer que se puede hacer clic con una combinación de CSS y HTML.

Instrucciones

1

Abra un editor de texto, como el Bloc de notas de Windows y abra el archivo fuente HTML.

2

Añadir una división (div) etiqueta con un ID de clase para su nueva imagen de cabecera puede hacer clic, dentro del cuerpo del archivo fuente HTML. Por ejemplo, "<div class =" myheaderimage ">".

3

Añadir un encabezado (h1) etiqueta. Por ejemplo, "<div class =" myheaderimage "> <h1>".

4

Añadir una etiqueta "a href" para darle a su imagen un enlace. Por ejemplo, "<div class =" myheaderimage "> <h1> <a href="http://www.mysite.com">".

5

Añadir una etiqueta "img" para especificar qué archivo de imagen a utilizar. Por ejemplo, "<div class =" myheaderimage "> <h1> <a href="&lt;img"> http://www.mysite.com"> & lt; img etiqueta, la etiqueta de cabecera y la etiqueta de la división. Por ejemplo, "<div class =" myheaderimage "> <h1> <a href="&lt;img"> http://www.mysite.com"> & lt; img src = "miimagen.jpg"> </ a > </ h1> </ div> ".

7

Guarde el archivo HTML y cerrarla.

8

Abra el archivo CSS.

9

Añadir secciones de estilo CSS que se corresponden con el ID de clase división utilizado en su archivo fuente HTML. Puede crear tantas secciones como desee para la división, la cabecera, la imagen y los estilos de enlace. Por ejemplo, "#myheaderimage {width: 800px;} #myheaderimage h1 {color: #bfffff;}".

10

Guarde el archivo CSS, y subir sus archivos de origen actualizados a su servidor Web. Su página Web mostrará ahora una imagen de cabecera enlazable cuando se abre.

Consejos y advertencias

  • Si su archivo CSS no está vinculado en el archivo fuente HTML, añadir en la parte de "<HEAD>" de su página web utilizando el formato "<href = ENLACE" mycssfile.css "rel =" "type =" stylesheet texto / css ">".