una tamaño porcentaje para pagina notas mostrar insertar imagenes imagen desde como codigo carpeta cambiar bloc alineacion agregar html css

tamaño - insertar imagen html url



¿Cómo agrego un borde a una imagen en HTML? (10)

¿Cómo puedo agregar un borde a una imagen usando HTML?

Dos caminos:

<img src="..." border="1" />

o

<img style=''border:1px solid #000000'' src="..." />

Jack,

Puede aprender mucho sobre las fronteras y cómo usarlas en http://www.w3schools.com/css/css_border.asp . Dicho esto, hay un par de maneras diferentes en que puede lograr esto.

A continuación se muestra cómo generalmente lo hago, pero leyendo la documentación en w3schools puede encontrar su propio método deseado.

.addBorder { /* Thickness, Style, and Color */ border: 1px solid #000000; } <img src="mypicture.jpg" alt="My Picture" class="addBorder" />

Editar:

Noté que la pregunta original no era "Cómo agregar un borde a una imagen", sino que era "cómo agregar un cuadro alrededor de una imagen usando html". La pregunta fue reescrita por otros, así que no estoy 100% seguro de que quisieras un borde en tu imagen.

Si solo deseara un recuadro alrededor de sus imágenes, podría usar un DIV, con sus propios estilos:

.imageBox { background-color:#f1f1f1; padding:10px; border:1px solid #000000; } <div class="imageBox"> <img src="picture.jpg" alt="My Picture" /> </div>

La forma correcta depende de si solo desea que una imagen específica en su contenido tenga un borde o si hay un patrón en el código donde ciertas imágenes deben tener un borde. En el primer caso, vaya con el atributo de estilo en el elemento img; de lo contrario, asígnele un nombre de clase significativo y defina ese borde en su hoja de estilo.

También prefiero CSS sobre HTML; HTML es sobre contenido, CSS sobre presentación.

Con CSS tienes tres opciones.

  1. CSS en línea (como en las soluciones de Trevor y Diodeus). Es difícil de mantener y no garantiza la consistencia: tendrá que comprobar que cada imagen tenga el mismo ancho de borde y color de borde.
  2. Hoja de estilo interna. Resuelve el problema de coherencia para todas las imágenes de la página que tenga class = "hasBorder", pero deberá incluir una hoja de estilo para cada página, y nuevamente asegurarse de que "hasBorder" se defina de la misma manera cada vez.
  3. Hoja de estilo externa. Si incluye un enlace al archivo CSS externo en cada página, todas las imágenes con class = "hasBorder" en todas las páginas tendrán el mismo borde.

Ejemplo usando la hoja de estilo interna:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Image with border</title> <style type="text/css"> img.hasBorder { border:15px solid #66CC33; } </style> </head> <body> <img class="hasBorder" src="peggy.jpg" alt="" /> </body> </html>

Si desea una hoja de estilo externa, reemplace el bloque <style> ... </ style> con

<link rel="stylesheet" type="text/css" href="somestylesheet.css" />

También puede agregar relleno para un efecto agradable.

<img src="image.png" style="padding:1px;border:thin solid black;">

Aquí hay algunos códigos HTML y CSS que resolverían su problema:

CSS

.ImageBorder { border-width: 1px; border-color: Black; }

HTML

<img src="MyImage.gif" class="ImageBorder" />

Las respuestas anteriores son muy buenas, estoy seguro. Pero para los débiles, como yo, recomiendo Snagit 10. Puedes darle a la imagen un borde en cualquier ancho, estilo y color antes de insertarlo en tu página web. Hacen un programa de trabajo completo en 30 días de prueba.

CSS

img{border:2px solid black;}

border="1" EN LA etiqueta IMAGE o usando el border:1px solid #000; css border:1px solid #000;