Como crear una imagen html?

La presencia de imagenes en paginas web mejora su apariencia, llama la atencion y tambien promueve una mejor percepcion de los textos. Envolver la imagen con el texto html le permite vincular el contenido con las ilustraciones y colocar el material de manera racional. Desarrollar constantemente nuevas formas de crear imagenes, lo que permite incorporar ideas creativas. Al mismo tiempo, los nuevos estilos de disenos se basan en los mismos metodos, creando un espacio infinito de imaginacion.

El posicionamiento de las imagenes con respecto al texto se puede hacer en html o usando propiedades de CSS.

Etiquetas Html: envuelven texto alrededor del texto

Las imagenes se colocan en la pagina de tres maneras:

  • posicion central;
  • envoltura de texto;
  • inserta en el campo.

Con un tamano grande, la imagen se coloca en el medio de la pagina, primero colocandola en un contenedor

tag img, despues de lo cual establece el atributo align = “center”. Si a menudo usa una imagen, debe aplicar el estilo CSS a la etiqueta

.

Cuando la imagen es pequena, el texto esta al lado de ella. El metodo es el mas comun. El ajuste de texto se realiza de varias maneras. Pero primero debes mostrar la imagen en la pantalla. Si se conoce una ruta, por ejemplo, “foto1.jpg”, se pega a la pagina html usando la siguiente entrada:

El ejemplo corresponde al caso en que los archivos html y de imagen estan en la misma carpeta.

Si la imagen sigue el texto, se ubicara debajo. Esto no siempre es conveniente, ya que habra espacios vacios en cada lado, por lo que la pagina esta disenada para crear un flujo alrededor de la imagen con el texto html. Para hacer esto, la etiqueta img tiene un atributo de alineacion que especifica la ubicacion de la foto o imagen relativa al texto. De este parametro depende en que borde de la pagina esta el material grafico y como fluye alrededor del texto. El atributo se puede establecer en los siguientes valores:

  • a la izquierda: mueva la imagen a la izquierda al ajustar el texto a la derecha;
  • a la derecha: el flujo alrededor de la imagen a la izquierda cuando se coloca a la derecha;
  • abajo – el valor predeterminado, cuando la imagen esta a la izquierda, la primera linea de texto comienza en el nivel de su parte inferior;
  • arriba – la imagen se coloca de manera similar al valor anterior, pero la primera linea se ubica en su nivel superior;
  • medio: la linea inicial del texto se ejecuta frente al centro de la imagen.

La etiqueta img tiene parametros que le permiten especificar la distancia desde el texto a la imagen (hspace y vspace). Sin su aplicacion, el texto se colocara cerca de la imagen. Ademas, se seleccionan las dimensiones generales del dibujo de ancho y alto. En este caso, se debe observar la proporcion entre el ancho y la altura. Si no especifica las dimensiones, de manera predeterminada, el dibujo se mueve con el tamano de la fuente, lo que no siempre es conveniente.

Mover la imagen al borde izquierdo con su envoltura de texto se puede hacer con la ayuda de la entrada:

Texto

Aplicando tablas

Es facil dibujar un texto alrededor de una imagen con el texto html usando una tabla, dentro de la cual se coloca la imagen. Aqui, la propiedad de alineacion se usa para la etiqueta de tabla. Las tablas tienen parametros mas controlables, lo que les crea ventajas:


El limite de la tabla se vuelve invisible y no permite que el texto se acerque a la imagen. El espaciado entre y dentro de las celdas se puede ajustar.

Usando estilos

De los ejemplos anteriores, puede ver como simplemente ajustar la imagen con el texto html. CSS le permite lograr resultados similares. Cree una envoltura utilizando la propiedad flotante. Aqui, la alineacion tambien es proporcionada por los valores a la izquierda y a la derecha.

Para hacer esto, se crea una clase y se asignan estilos CSS:

.fotoleft {

flotar: izquierda;

margen: 5px 12px 3px 0px;

}

Luego, la propiedad de estilo flotante se agrega al selector img:

Ademas de alinear la imagen con el valor restante, aqui tambien las sangrias del texto de la imagen se establecen por la propiedad del margen. Del mismo modo, el texto esta envuelto alrededor de la izquierda, si aplica la propiedad correcta.

Los estilos le permiten superponer texto directamente en la imagen. Para hacer esto, el texto se inserta en el bloque con un fondo semitransparente, que se superpone a la imagen.

Hacer un flujo efectivo alrededor del texto y su superposicion en las imagenes no es tan dificil, ya que esto se logra mediante experimentos sucesivos.

Envolviendo imagenes redondas con texto html

Las paginas web consisten principalmente en areas rectangulares. Todo el mundo sabe como dibujar texto alrededor de la imagen en html. Los estilos se utilizan para crear formas geometricas, pero no estan asociados con el diseno de contenido dentro o fuera de los elementos. Puede dividir el patron en 2 partes y colocar bloques de sangrias de diferentes anchuras en ambos lados. Ellos son seguidos inmediatamente por texto.

El proceso de creacion de dicho flujo es laborioso, y debe hacerse por separado para cada nuevo dibujo.

Texto que envuelve formas complejas

Al desarrollar una nueva especificacion, CSS Shapes logro influir en el diseno existente y proporcionarle nuevas perspectivas. Ahora el contenido puede fluir alrededor de formas complejas y areas curvilineas.

La especificacion es compatible con el navegador Chrome Canary, y ahora estan tratando de implementarlo en el resto. Le permite crear disenos complejos sin la ayuda de editores de graficos.

Envolver una imagen redonda con texto html se proporciona con la siguiente entrada:

#circle

{

forma-exterior: circulo (-300px, -300px, 300px); / * (x, y, radio) * /

flotar: izquierda;

}

Texto de muestra

El codigo crea un circulo perfectamente optimizado por el texto.

Del mismo modo, se creara cualquier forma incorrecta, gracias al soporte de Photoshop, que le permitira obtener el codigo de forma CSS.

Conclusion

Al crear disenos de paginas utilizando diferentes formas de colocar imagenes y texto sobre ellos, puede crear un diseno unico. Para hacer esto, necesita dominar las reglas basicas de diseno, asegurando el flujo alrededor de la imagen con el texto html.