COLOCAR UNA IMÁGEN CON TEXTO EN UN LADO EXPLICITO O TODO ALREDEDOR

COLOCAR UNA IMÁGEN CON TEXTO EN UN LADO EXPLICITO O TODO ALREDEDOR.

Las Imágenes son la portada de una publicación donde el Lector se fija en la primera mirada y a continuación va a por el texto que tiene que ser de calidad pero primero va a la imágen por esto el texto tiene que estar muy bien colocado alrededor de la Imágen.

ahora os explicare el caso más clásico es el de envolver con texto una foto que se ubicará contra el margen izquierdo.

Aqui lo que debemos hacer es “flotar” hacia la izquierda el elemento, en este caso, la imagen.



Para esto, CSS dispone de una propiedad llamada “float”, justamente como su nombre lo indica, sirve para flotar elementos dentro del documento HTML.

La propiedad “float” puede tomar 3 posibles valores:

float: left
(flota el elemento contra la izquierda)

float: right
(flota el elemento contra la derecha)

float: none
(no flota el elemento hacia ningún lado, es la opción por defecto)

Bien, realicemos el caso típico de flotar una imagen contra la izquierda y automáticamente la misma se rodeará con el texto.

Para este caso utilizaremos un DIV contenedor y dentro de el una imagen y un texto.


El código HTML estándar para esto sería:

<div><img style="float:left;" src="URL_imagen" />Texto a mostrar</div>

Esto se vería así:

Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).

Nótese que aquí aplicamos la propiedad “float: left” a la etiqueta IMG directamente dentro de la línea HTML y no desde un archivo.

Esta técnica se llama “inline” y si bien es válida, hoy por hoy se recomienda poner las propiedades CSS dentro de un archivo para tal fin. Pero aquí lo hago así para simplificar el código.

Hagamos práctico el ejemplo con imagen a la derecha:"left"

<div>
 <img src="imagen.jpg" hspace="5" vspace="5" style="float: left;" />
 Texto a mostrar
 </div>

Esto se vería así:

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

La diferencia a la Imágen anterior es la distancia de la imagen al texto que la primera está
junta y esta tiene unos px de separación,

He utilizado un texto de ejemplo bastante largo para que se aprecie el efecto visual.

<div>
 <img src="imagen.jpg" hspace="5" vspace="5" style="float: right;" />
 Texto a mostrar
 </div>

Hagamos práctico el ejemplo con imagen a la izquierda: "right"

Esto se vería así:

Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32

Y ahora un ejemplo con el float por defecto que sería “none”:

<div>
 <img src="imagen.jpg" hspace="5" vspace="5" style="float: none;" />
 Texto a mostrar
 </div>

Esto se vería así:

Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayoría sufrió alteraciones en alguna manera, ya sea porque se le agregó humor, o palabras aleatorias que no parecen ni un poco creíbles. Si vas a utilizar un pasaje de Lorem Ipsum, necesitás estar seguro de que no hay nada avergonzante escondido en el medio del texto. Todos los generadores de Lorem Ipsum que se encuentran en Internet tienden a repetir trozos predefinidos cuando sea necesario, haciendo a este el único generador verdadero (válido) en la Internet. Usa un diccionario de mas de 200 palabras provenientes del latín, combinadas con estructuras muy útiles de sentencias, para generar texto de Lorem Ipsum que parezca razonable. Este Lorem Ipsum generado siempre estará libre de repeticiones, humor agregado o palabras no características del lenguaje, etc.

En este último ejemplo podemos ver como el texto se coloca directamente después de donde termina la imagen, es decir, sin flotarse hacia ningún lado.
Rodeando con texto otros elementos como videos

Tal cual lo acabamos de hacer con las imágenes, se puede rodear con texto otros elementos, por ejemplo videos.

Para ellos solo basta reemplazar la imagen por otro DIV que contenga el video y aplicarle a este último DIV la misma propiedad “float”.

<div>
 <div  style="float: left;" />
 <iframe width="300" height="200" src="https://www.youtube.com/embed/ChOAt7oWY18" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
 </div>
Texto a mostrar
 </div>

Esto se vería así:

Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).

Aquí coloque el mismo DIV externo, luego dentro otro DIV con la propiedad float: left, y dentro de este DIV coloque el código Youtube del video a insertar.


Como puedes ver con la propiedad FLOAT puedes flotar cualquier elemento de tu documento y colocarle texto alrededor. Solo basta aplicarla al elemento que deseas flotar.

 Fecha de la Publicación; 31-12-2018

 Fuente;  psdahtmlpasoapaso

 Publicado por;