-
Cómo hacer una imagen flotante en una página web
-
Las imágenes pueden amenizar aún más aburrida la página Web cuando se sabe qué hacer con ellos. HTML y CSS nos permiten insertar una imagen y luego ajustar el texto alrededor de ella usando el efecto de "flotación". El efecto de flotación se utiliza a menudo en las páginas Web donde las imágenes se complementan un cuerpo de texto como en una revista o libro. Con CSS (Cascading Style Sheets), puede cambiar la alineación después.
Instrucciones
Código CSS
1 Lance un editor de texto. Abra la hoja de estilo para la página Web que desea editar. Si no hay una hoja de estilos para ello, sin embargo, crear un nuevo archivo y guardarlo como "style.css". Se puede utilizar un nombre diferente, pero mantener la extensión .css.
2 Escriba la siguiente declaración CSS en la hoja de estilo. Tenga en cuenta que el "img" aquí es un selector CSS que corresponde a la etiqueta HTML <img> que se utiliza para insertar imágenes en una página web. La propiedad "flotar" y su valor "izquierda" (sin comillas) se alinearán la imagen a la izquierda cuando se muestra en una página Web.
img {
float: left;}
3 Añadir una clase al selector. Esto es opcional, pero es una buena idea utilizar uno si se utiliza más de una imagen por página web. Crear una clase para cada alineación de la imagen que va a utilizar.
Ejemplo:
img.floatleft {
float: left;}
Imágenes de la clase "floatleft" se flotó hacia la izquierda.
4 Haga clic a la derecha de la llave de la derecha. Pulse la tecla "Enter" dos veces para comenzar en una nueva línea en la hoja de estilo. Escriba el siguiente código:
img {
float: right;}
5 Añadir una clase para el código que acaba de introducir. Todas las imágenes de esta clase se flotaron hacia la derecha.
Ejemplo:
img.floatright {
float: right;}
6 Pulse la tecla "Enter" de nuevo un par de veces para iniciar una nueva línea. Escriba el siguiente código para las imágenes que van a heredar la alineación de la etiqueta HTML que se colocan en. Se puede utilizar cualquier nombre para la clase, siempre y cuando no se utiliza ese nombre para otra clase.
img.floatinherit {
float: inherit;}
7 Guarde la hoja de estilo usando el editor de texto.
código HTML
8 Abra la página Web en un editor de texto. Inserte el siguiente código entre las etiquetas <head> y </ head>. Si ya ha vinculado la hoja de estilo a la página web, usted no tiene que hacer esto.
<Link rel = "stylesheet" type = "text / css" href = "miestilo.css" />
9 Buscar en el código de la página web hasta encontrar el lugar donde desea insertar una imagen. Por ejemplo, es posible que desee agregar la imagen al comienzo de un párrafo.
10 Escriba el código HTML para insertar una imagen. Colocarlo entre las etiquetas HTML para el área en la que desea que aparezca. Por ejemplo, si desea que aparezca la imagen dentro de un párrafo, lo coloca entre las etiquetas <p> y </ p> etiquetas. Introduzca la ubicación de la imagen en el atributo "src" y un nombre de visualización para que en el atributo "alt".
Ejemplo:
<P> <img alt = "nombre de visualización de imagen" /> </ p>
11 Agregue la clase que desea utilizar. Utilice la clase que flote la imagen donde desee. Consulte la hoja de estilo.
Ejemplo: Para alinear la imagen a la izquierda, escriba el nombre de la clase que tiene una alineación "izquierda" en la hoja de estilo.
<P> <img class = "floatleft" alt = "nombre de visualización de imagen" /> </ p>
12 Repita este procedimiento para cada imagen que desea flotar. Guarde la página Web.
Consejos y advertencias
- No todos los navegadores soportan el valor de la propiedad "hereda".
