Artículos
→ CSS →

Imágenes con borde

Creado: 04/Jun/2007 Actualizado: 11/Oct/2021

Cuando se empezó a definir el lenguaje HTML, el elemento img (que nos sirve para poner imágenes) llevaba asociado un atributo llamador border para poder tener imágenes con borde. Aplicando un valor en pixels a dicho atributo conseguíamos que la imagen asociada al elemento apareciese con un borde.

Hay que indicar que por compatibilidad, dicho atributo sigue siendo soportado. Si bien, es recomendable no utilizarlo.

La línea de código sería como la que sigue:

<img src="mi_imagen.jpg" border="3">

Pero con la aparición de las hojas de estilo CSS, dicho atributo quedo obsoleto. A partir de ese momento tendríamos que asignar un estilo a la imagen, para que esta tuviese un borde.

El atributo CSS que nos permite asociar un borde a un elemento (en este caso a una imagen) es border-width. A dicho atributo podremos asociarle un valor que representará el ancho del borde.

La sintaxis del atributo border-width es la siguiente:

border-width : <line-width>{1,4}

De esta manera, para asociar un borde a una imagen tendremos que asociar un estilo a la imagen, mediante el atributo style. Quedándonos la siguiente línea de código:

<img src="mi_imagen.jpg" style="border-width:1px;">

Lo bueno que tienen los estilos es que se han ido añadiendo nuevas propiedades, las cuales nos permiten personalizar el borde. Una de estas propiedades es border-style, la cual nos permite indicar el estilo del borde que queremos (solido, con líneas discontinuas,…). Siendo su sintaxis la siguiente:

border-style : <line-style>{1,4}

Algunos de los valores para el estilo de línea de border-style son: dotted, dashed, solid,.. 

Ahora, la línea de código nos quedaría de la siguiente forma:

<img src="mi_imagen.jpg" style="border-style:dotted;border-width:1px;">

Espero que os haya sido de utilidad este artículo en el que hemos visto cómo poder tener imágenes con borde.

Código Fuente

Descárgate el código fuente de Imágenes con borde
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Artículos
→ Javascript →

Imprimir una página web

Creado: Actualizado: 20/May/2015

Una de las cosas que posiblemente quiera hacer un usuario en nuestra página web, sea la de imprimir la página. Está claro que esto lo pueden realizar mediante las opciones de los navegadores.

La idea de este ejemplo es posibilitar la impresión de la misma página. Para ello nos apoyaremos en código JavaScript. Dentro de JavaScript tenemos el objeto Window y en concreto en el método .print().

Window.print();

Este método lo que hace es imprimir la página tal y como la estamos visualizando en el navegador.

Esta soportado por el Internet Explorer (a partir de la versión 5), FireFox y Opera. Es por ello que para el caso del Internet Explorer deberemos de comprobar que no se está visualizando la página con una versión inferior a la 5. Ya que, a día de hoy, todavía se encuentran Internet Explorer de menor versión.

La versión del navegador la comprobamos mediante el objeto Navigator, y en concreto con la propiedad .appVersion. El código quedaría de la siguiente forma:

function imprimir(){
  if (parseInt(navigator.appVersion)>4)
    window.print();
}

Solo nos quedará invocar a la función imprimir:

Imprimir la página web

Código Fuente

Descárgate el código fuente de Imprimir una página web
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript