Hogar › Internet › Flotar a la izquierda que significa. Cómo funcionan las propiedades CSS flotante hacia la izquierda y flotante hacia la derecha. CSS Float: ¿por qué es necesario?

Flotar a la izquierda que significa. Cómo funcionan las propiedades CSS flotante hacia la izquierda y flotante hacia la derecha. CSS Float: ¿por qué es necesario?

Para inserción imágenes en HTML Los dos formatos principales utilizados son GIF y JPEG. El formato GIF puede almacenar animacion sencilla (pancartas dinámicas), JPEG es ideal para imágenes con mucho color, como fotografías. El tercer formato para gráficos web es formato PNG pero no recibió amplia aplicación en diseño web. Cualquier imagen en Formatos GIF o se inserta JPEG en una página web usando la etiqueta, no hay etiqueta de cierre.

atributo SRC

A través de atributo src se especifica la dirección (URL) del archivo de imagen, es decir el navegador encuentra la imagen deseada en el directorio del sitio utilizando la ruta (URL) especificada en este atributo. Para mayor comodidad, todas las imágenes del sitio están en carpeta separada, generalmente con un nombre imagen. Por ejemplo, tome cualquier imagen, preferiblemente de formato pequeño, y guárdela en la carpeta creada imagen, con el nombre imprimación.jpg. A continuación nos referiremos a él para la formación.

Bueno, intentemos insertar una imagen en la página. Escribimos el código (ruta - URL, escrita según la ubicación de la carpeta con imágenes):

src="imagen/primer.jpg" >

Sin qué no puedes crear un sitio web: ∼ ∼

Hola, queridos lectores del blog. Logramos hablar en detalle sobre cuáles y en qué casos sería mejor utilizarlos para insertar imágenes en las páginas de su sitio web en el artículo cuyo enlace se encuentra justo arriba.

Hoy veremos en detalle todos los aspectos del uso de la etiqueta Img para insertar imágenes, veamos cómo configurar el texto para que se ajuste alrededor de una foto en código HTML, aprenderemos cómo usar imágenes como fondo para el sitio, cómo cambiar su tamaño y establecer la alineación (centro, izquierda y derecha).

Usando la etiqueta Img y sus atributos Src, Ancho y Alto

Entonces, veamos cómo puedes usar gráficos en tu sitio web. En primer lugar, es posible insertar una imagen como elemento (objeto) en el código de la página HTML. Precisamente tal inserción se lleva a cabo utilizando Img, que es especial: elemento en línea con contenido reemplazado, que incluyen solo cuatro, algunos de los cuales ya hemos mencionado, y los otros tres (uso moderno de marcos), (para insertar videos y otros contenidos multimedia).

Se comporta exactamente como un elemento en línea, pero dentro de él se muestra contenido externo extraño (foto en el caso de Img o video y flash en el caso de Objeto e Incrustar). Cualquiera de estos cuatro elementos implica la presencia de un archivo externo que se cargará en esta misma zona, especificado en sus atributos.

Para indicar el camino hacia archivo gráfico, que debe cargarse en la página, sirve como un especial atributo origen.

El navegador del usuario, al analizar el código HTML de la página, tan pronto como encuentra la etiqueta Img en ella, crea inmediatamente un área para el elemento en línea en el que se carga. archivo externo(por ejemplo, fotografía). El navegador toma la ruta al archivo a partir del contenido de Src.

Cuando una imagen comienza a descargarse desde su servidor a la computadora del usuario, el navegador determina las dimensiones reales de esta imagen y expande en estas mismas dimensiones el área de línea que creó cuando detectó el elemento Img en el código.

Si desea que el navegador asigne inmediatamente un área del tamaño requerido para este elemento y luego no lo cambie cuando reciba datos sobre el tamaño de la imagen cargada, deberá especificar Atributos de ancho y alto.

Si los configura, el navegador del usuario crea un área con los tamaños correctos y tu foto encajará allí, aunque sea de diferente tamaño. Por cierto, a veces te encuentras con un error de este tipo en los sitios web de webmasters novatos.

Se sube un archivo gráfico al servidor. tamaño enorme y pesa varios megabytes (inmediatamente después de fotografiar sin procesar) y la ruta hacia él está escrita en Src. Y para que la imagen no ocupe toda la pantalla, a la etiqueta Img se le agrega Ancho y Alto con dimensiones aceptables en ancho y alto.

¿Y cuál es el resultado? El visitante de un sitio de este tipo observa una carga frustrantemente lenta de la imagen en un área relativamente pequeña especificada en los atributos mencionados (varios megabytes de peso caben en el tamaño de 300 por 400 píxeles).

Por lo tanto, cree inmediatamente imágenes para publicar en la Web del mismo tamaño que mostrará en el sitio e ingrese el Ancho y Alto de la etiqueta Img. Respeta a tus usuarios y no desperdicies su tráfico (especialmente el móvil). es posible, por ejemplo, en Imagen de piedra rápida Viewer o cualquier otro editor gráfico, por ejemplo, .

Por cierto, además de reducir de antemano el tamaño de las imágenes para insertarlas en las páginas del sitio web, también debes abordar la optimización del peso con sumo cuidado. A veces es posible lograr una reducción múltiple en el peso de los archivos gráficos sin pérdida de calidad, lo que conducirá a una carga mucho más rápida y reducirá la carga en el servidor de alojamiento. Puede utilizar una herramienta muy cómoda y eficaz para este fin.

Ahora veamos cómo puede especificar la ruta al archivo de imagen en Etiqueta Src Imagen. En realidad, puedes usar y, sobre lo cual ya escribí con cierto detalle en el artículo anterior. Todo depende de los matices y la conveniencia.

Aquellos. Src puede contener, por ejemplo, siguientes entradas:

En el primer caso, el archivo gráfico debe estar en la misma carpeta que el archivo de su página web (si usa , es poco probable que las dos primeras opciones le convengan, aunque para la tarea imagen de fondo Esto es muy conveniente en CSS). En el segundo caso, los gráficos están en una subcarpeta relativa al archivo de tu página, bueno, en el tercer caso se indica Src camino absoluto al archivo de imagen.

En general, de acuerdo con las reglas del lenguaje HTML, solo el documento en sí debe estar en su servidor ( Página web), y todos los demás documentos y archivos (gráficos, vídeos, scripts, estilos) que se cargarán junto con él se pueden ubicar en diferentes servidores.

Ésta, por cierto, es una de las formas de aumentar. Y los mismos contadores de visitas que probablemente usará en su recurso para monitorear también cargarán sus informantes y scripts desde hosts distintos al suyo.

¿Cómo insertar una imagen con un enlace, Alt y asignación de título en Img?

Si Img es inherentemente un elemento en línea, entonces puede ser simplemente contar mayúscula , lo que significa que no hay nada que nos impida convertir la imagen en un enlace al incluir esta etiqueta dentro de un hipervínculo. En general, ya escribí sobre esto con cierto detalle en un artículo reciente, pero no sería pecado repetirme un poco.

Es/image/webcamxp.png">

En el navegador IE, aparecerá un marco de tres píxeles de ancho alrededor de la imagen que vinculó. Para eliminarlo, deberá agregarlo a la etiqueta Img. Atributo de borde con valor cero:

Para todos aquellos casos en los que un archivo gráfico por algún motivo no se puede cargar junto con documento HTML(la ruta hacia él no está escrita correctamente o algo más), un especial atributo alternativo.

Alt actúa como una vista de imagen alternativa. ¿Qué sucede cuando los gráficos no se cargan? De todos modos, el navegador, al detectar el elemento Img en el código, forma un área para él que, dependiendo del navegador utilizado por el usuario, puede permanecer tamaño dado, o colapsar.

Pero para que el usuario tenga la idea de que debería haber una imagen en este lugar de la página, ingresa Alt en Img, donde ingresa el texto que describe lo que se debe representar aquí. El contenido de Alt se mostrará en el área de la foto descargada.

Bueno, y además de esto, para imágenes en código HTML, así como para otros elementos del lenguaje. marcado de hipertexto(por ejemplo, todos para los mismos hipervínculos) es posible, cuando el usuario pasa el cursor del mouse sobre ellos, mostrarle algún texto que los acompañe.

Esto se hace usando atributo especial Título, que en nuestro caso se inserta en Img. Es esencialmente una información sobre herramientas y se puede utilizar para casi todos los elementos de código HTML visibles en la página cuando necesita aclarar algo más.

Anteriormente, por cierto, agregar texto alternativo también generaba información sobre herramientas, pero ahora este comportamiento se está abandonando y este atributo ahora sirve principalmente solo como texto alternativo, y el Título se usa exclusivamente para información sobre herramientas.

Pngе" height="71" width="90" alt="" title="">

De hecho, el contenido de Alt y Etiqueta de título Img no sólo sirve para la comodidad de los visitantes de su sitio, sino que también puede tener un papel muy importante en el éxito de la promoción de su proyecto.

Para hacer esto, no olvides usar , ya que he escrito sobre esto muchas veces, por ejemplo, en un artículo o en una publicación sobre .

Palabras clave en Alt y Título (especialmente en Alt) pueden mejorar significativamente, así como en los servicios. Sin embargo, con esto hay que tener cuidado, porque es bastante fácil hundirse.

Ajustar texto alrededor de una imagen en HTML: el atributo Align de la etiqueta Img

Ahora hablemos de alinear imágenes insertadas en código HTML. los cuatro elementos en línea con contenido reemplazado (Img, Iframe, Objeto e Incrustar) es posible alinear usando el atributo Alinear. Pero en realidad solo se aplica a elementos de bloque y las etiquetas mencionadas son etiquetas en línea.

Por lo tanto algunos Alinear valores para Img (por ejemplo, configurar el texto para que se ajuste alrededor de una imagen) significará algo completamente diferente que cuando se usa el mismo atributo en elementos de bloque(etc.).

En general, alinear imágenes con usando Alinear cuando se utiliza en Img se puede dividir en dos grupos.

Entonces, ¿qué sucede cuando insertamos un archivo gráfico en el texto de un documento? De hecho, aparece como una gran letra:

La alineación predeterminada es borde inferior, es decir. agregando al elemento atributo de imagen align="bottom" no cambiará nada. Pero puedes intentar establecer la alineación de la imagen en el borde superior agregando align="top" al elemento:

Png" align="arriba">

En este caso, el texto de la línea donde se ubica la foto estaba alineado a lo largo de su borde superior.

Hay otro valor posible para este atributo. alinear="medio":

Png" align="medio">

En este caso, el texto en la línea con la imagen se alineará en el medio de esta misma imagen.

Pero además de la alineación vertical, HTML también proporciona fluir alrededor Imágenes con texto, para qué se utilizan los valores. Izquierda y derecha. Este grupo de valores de atributos de Alinear es muy diferente al anterior.

Cuando usamos los valores Izquierda y Derecha dentro del elemento Img, logramos el llamado ajuste de texto alrededor de la imagen, que se especifica en el código HTML. En este caso, el dibujo se vuelve y el texto comienza a fluir a su alrededor.

Por ejemplo, con align="left" obtenemos el siguiente resultado:

Png" align="izquierda">

El valor Izquierda en Img significa que la foto flota en lado izquierdo, y el texto fluye a su alrededor a la derecha. En el caso de align="right", la imagen flotará hacia la derecha y el texto fluirá alrededor de ella hacia la izquierda:

Png" align="derecha">

Al configurar el texto para que se ajuste alrededor de una imagen, hay una advertencia: el texto está demasiado cerca de ella, lo que crea una apariencia desagradable. efecto adhesivo. este problema bastante fácil de resolver con la ayuda de , pero también en HTML puro hay una solución.

Para hacer esto, puede usar los atributos del elemento Img: Hespacio y Vespacio. Se utilizan para presionar el texto envolvente lejos de la imagen. Hspace especifica el relleno izquierdo y derecho desde la imagen hasta el texto circundante, y Vspace especifica la parte superior e inferior. Las sangrías se establecen en , por ejemplo:

Png" align="izquierda" hspace="30" vspace="30">

Fondo: cómo crear un fondo para un sitio web en HTML puro

Los archivos gráficos se pueden utilizar no sólo como elementos de código de página, sino también como relleno como fondo. Por lo general, en el lenguaje HTML puedes configurarlo ya sea por color o usando imágenes de fondo. Bueno, el uso de propiedades CSS es uno de los elementos principales, porque no se insertan elementos de diseño usando Img en las páginas de los sitios modernos.

Por tanto, las imágenes de fondo juegan un papel muy importante. papel importante V diseño moderno Con usando CSS(hablaremos de esto en el artículo siguiente). Por ahora, veremos cómo se hace todo esto en HTML puro usando el atributo Fondo elemento Cuerpo y , muestra la ruta al archivo gráfico con el que se rellenará la página web o tabla (o su celda individual).

Por ejemplo, agregar el atributo Fondo al Cuerpo el siguiente tipo:

Recibiremos un fondo para nuestro sitio, compuesto por una foto multiplicada, que ocupará todo el área visible como un azulejo:

Imagen de fondo comenzando desde la izquierda esquina superior, se repite a lo largo de dos ejes a la vez (abscisa y ordenada). El siguiente está conectado al anterior, etc. Por cierto, si desea rellenar el fondo de una página o tabla con un color, para ello no debe utilizar el Fondo, sino el atributo. colorbg, cuyo valor puede insertar , por ejemplo, así:

Luego obtenemos el siguiente color de fondo especificado mediante bgcolor:

De la misma manera que con el atributo de fondo, bgcolor también se puede utilizar para establecer el fondo de toda la tabla o de sus elementos individuales.

¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.

Puedes ver más vídeos entrando a

");">

Quizás te interese

Caracteres de espacios en blanco y su formato de código en HTML, así como caracteres especiales. espacio sin rupturas y otros mnemónicos
Etiquetas de encabezado y atributos H1-H6, linea horizontal Hr, salto de línea Br y salto de párrafo P según el estándar Html 4.01
Tablas en HTML: etiquetas Table, Tr y Td, así como Colspan, Cellpadding, Cellspacing y Rowspan para crearlas Seleccionar, Opción, Área de texto, Etiqueta, Conjunto de campos, Leyenda - etiquetas formularios HTML listas desplegables y campo de texto
Incrustar y objetar - etiquetas HTML para mostrar contenido multimedia (vídeo, flash, audio) en páginas web

Las imágenes de las páginas web se pueden utilizar de dos formas: como fondo y como imagen independiente. Se recomienda utilizar tres formatos gráficos: JPEG, GIF y PNG. Todos los navegadores los admiten; otros formatos pueden requerir herramientas especiales.

Como regla general, todas las imágenes de un sitio se almacenan en una carpeta separada, por ejemplo, Imágenes. Y las rutas a las imágenes están escritas de la misma forma que en los enlaces. Si lo olvidaste, echa un vistazo.

En todos los ejemplos posteriores, las rutas a las imágenes se escribirán basándose en el hecho de que las imágenes están en la carpeta de imágenes y las páginas en la carpeta del sitio, ubicada en el mismo nivel.

Imágenes de fondo

La imagen de fondo ocupa todo el espacio del elemento para el que se especifica. Entonces, especificando en la etiqueta atributo fondo="fon.gif", la imagen fon.gif ocupará toda la ventana del navegador.

Código de muestra: Resultado

preguntando imagen de fondo documento, no olvide especificar también el parámetro colorbg. Esto se debe al hecho de que el usuario puede haber desactivado la carga de imágenes y su hermoso fondoél no verá. Entonces el navegador utilizará el parámetro colorbg.

Incrustar imágenes

La etiqueta se utiliza para colocar imágenes en la página. , que tiene un único parámetro requerido src, que especifica la URL de la imagen.

Código de muestra:

img tag Resto del contenido del documento

Resultado:

Resto del contenido del documento

De acuerdo, el texto al lado de la imagen no se ve muy bien.

Para que nuestras imágenes se vean como queremos, debemos alinearlas. Y el parámetro nos ayudará con esto. alinear.

Este parámetro tiene varios significados. Veámoslos todos con ejemplos.

Código de ejemplo con parámetro alinear="izquierda"

Etiqueta img con el parámetro align="left" La imagen está a la izquierda y el texto fluye alrededor de ella a la derecha, y este texto puede ocupar varias líneas.

Resultado:

La imagen está a la izquierda y el texto fluye a su alrededor a la derecha, y este texto puede ocupar varias líneas.

Código de ejemplo con parámetro alinear="derecha"

Etiqueta img con el parámetro align="right" La imagen está a la derecha y el texto fluye a su alrededor a la izquierda, y este texto puede ocupar varias líneas.

Resultado:

La imagen está a la derecha y el texto fluye a su alrededor a la izquierda, y este texto puede ocupar varias líneas.

Código de ejemplo con parámetro alinear="arriba"

etiqueta img con align="top" El borde superior de la imagen está alineado con el elemento más alto línea actual. La imagen parece estar incrustada en la línea. Si la imagen es grande, la línea se expande a esta altura.

Resultado:

El borde superior de la imagen está alineado con el elemento más alto de la línea actual. La imagen parece estar incrustada en la línea. Si la imagen es grande, la línea se expande a esta altura.

Código de ejemplo con parámetro alinear = "texto superior"

Etiqueta img con parámetro align="texttop" El borde superior de la imagen está alineado al más alto elemento de texto línea actual ( mayúscula pauta).

Resultado:

El borde superior de la imagen está alineado con el elemento de texto más alto de la línea actual (la letra mayúscula de la línea).

Código de ejemplo con parámetro alinear="medio"

Etiqueta img con parámetro align="middle" Alinea el centro de la imagen con la línea base de la línea actual.

Resultado:

Alinea el centro de la imagen con la línea base de la línea actual. * fuente grande hecho para aclarar la diferencia entre el abdomen medio

Código de ejemplo con parámetro align="absmedio"

Etiqueta img con parámetro align="absmiddle" Alinea el centro de la imagen con el centro de la línea actual.

Resultado:

Alinea el centro de la imagen con el centro de la línea actual.

Código de ejemplo con parámetro alinear="abajo"

Etiqueta img con parámetro align="bottom" Alinea el borde inferior de la imagen con la línea base de la línea actual.

Resultado:

Alinea el borde inferior de la imagen con la línea base de la línea actual.

Código de ejemplo con parámetro align="absbottom"

Etiqueta img con parámetro align="absbottom" Alinea el borde inferior de la imagen con el borde inferior de la línea actual.

Resultado:

Alinea el borde inferior de la imagen con el borde inferior de la línea actual.

Si queremos que el texto se ubique debajo de la imagen, entonces debemos usar la etiqueta
con parámetro claro, que prohíbe el flujo. Se puede prohibir el flujo con lado derecho(derecha), en el lado izquierdo (izquierda) y en ambos lados (todos).

Código de muestra:

Prohibición de envolver imágenes
Otros elementos del documento.

Resultado:

Otros elementos del documento.

Tamaños de imagen

Cualquier imagen tiene un tamaño especificado en píxeles. Al incrustar una imagen en una página, es posible que deba reducir el tamaño de la imagen original.

Para ello la etiqueta hay parametros ancho- ancho y altura- altura. Se especifican en píxeles o porcentajes (porcentaje del ancho de la pantalla)

Cuando carga una imagen, el navegador escalará automáticamente su imagen para parámetros dados ancho y alto. Sólo tenga en cuenta que una configuración incorrecta de los parámetros puede provocar un cambio en las proporciones de la imagen y, en consecuencia, su distorsión.

Código de muestra:

Resultado:

Separar imágenes del texto

Probablemente hayas notado que el texto se pega mucho a las imágenes. No siempre es bonito. Hay opciones para solucionar este problema. hespacio- sangría horizontal y vespacio- sangría vertical. Las sangrías se especifican en píxeles.

Código de muestra:

La etiqueta img tiene sangría. El resto del contenido del documento ya no está pegado a la imagen.

Resultado:

Texto alternativo

Si el usuario ha desactivado el modo de carga de imágenes, en lugar de la imagen verá una cruz roja (en Explorador de Internet) u otro icono (en otros navegadores). Sería bueno darle una pista de lo que se muestra en la imagen. Para hacer esto, use el parámetro alternativo. El texto de esta opción se mostrará en lugar de la imagen (si el modo de carga de imágenes está deshabilitado). Si se muestra la imagen, este parámetro da una pista al pasar el cursor del mouse, aunque no en todos los navegadores.

EN imágenes HTML insertado usando una etiqueta imagen.
Etiqueta imagen- vacío, contiene atributos y no tiene etiqueta de cierre.

El atributo se utiliza para mostrar una imagen en la página. src. Src vino de la fuente, que significa Fuente. El valor del atributo src es URL imágenes.

La línea de arriba significa que la imagen está en el mismo directorio (carpeta) que el archivo html vinculado a esta imagen. Digamos que tienes una carpeta HTML, que contiene índice.html con el código anterior y la propia imagen con el título imagen.jpg.

En este caso, al abrir índice.html Verás esta imagen en tu navegador. Si lo tiene en otro lugar (una carpeta superior o inferior), verá un campo blanco o un pequeño rectángulo con una cruz roja (la imagen no se pudo cargar).

Las imágenes no siempre se encuentran en el mismo directorio (carpeta) que el archivo en sí, por lo que la especificación de rutas se describirá más específicamente un poco más adelante.

atributos de la etiqueta img

Además de src, la etiqueta img tiene otros atributos que son responsables del tamaño de la imagen mostrada, su título, etc.

src- dirección de imagen
ancho- ancho de la imagen
altura- altura de la imagen
título- firma que aparece cuando pasas el cursor sobre la imagen
alternativo - texto alternativo. Necesario para robot de búsqueda e indexación de imágenes
borde- espesor del borde de la imagen. 0 - sin borde, 1 - borde más delgado, etc.

Dirección de la imagen insertada (ejemplos)

Por regla general, imágenes no se almacenan en la misma carpeta que el archivo html. Para ello se crea una carpeta en el mismo directorio. imágenes(o img, según gusto y color). Y ya está todo puesto en ello. imágenes requeridas. En el caso de almacenamiento separado, deberá especificar una dirección diferente para el atributo src

Si el archivo está en la carpeta de arriba, entonces

También puede insertar una imagen de otro sitio sin descargarla a su carpeta. Para hacer esto debes tener conexión estable a Internet y aproximadamente el siguiente código, en el que ingresas la dirección de la imagen en Internet en la dirección:

Imagen de fondo en HTML

Como imagen de fondo Pueden aparecer archivos con extensiones. gif, jpg, jpeg Y png. Si el tamaño de la imagen es más pequeño que la ventana del navegador, la imagen continuará ocupando automáticamente el fondo restante. EN cuerpo usa el atributo fondo, en el que especificamos la ruta a la imagen.

Todo lo que se sabe sobre este hombre es
que no estaba en prisión, pero se desconoce por qué no estaba en prisión.
Mark Twain.

Esta es una lección sobre cómo insertar una imagen en HTML, cómo diseñarlo, cómo ajustar el texto alrededor de una imagen, etc. Después de todo, se sabe que las imágenes hacen que un sitio sea más atractivo y diferente de otros recursos, por lo que la posibilidad de utilizar la etiqueta y sus atributos es muy útil en internet moderno. ¡Pero lo principal aquí es el sentido de la proporción!

Un exceso de gráficos hará que la página HTML sea más pesada y, en consecuencia, aumentará su tiempo de carga. Además, la presencia gran número las imágenes distraerán a los visitantes del contenido principal del sitio (a menos, por supuesto, que los gráficos sean el contenido principal del sitio). Por lo tanto, manténgalo con moderación y úselo sólo donde sea necesario. ¡Y serás feliz!

En la lección sobre, ya hablé sobre cómo puedes usar imágenes como fondo de un documento HTML. Ahora hablemos de cómo se utilizan los gráficos en la "capa superior" de una página HTML.

§ 1. Cómo insertar una imagen

Para insertar imágenes en HTML, use la etiqueta IMG Con obligatorio atributo SRC. Este atributo le indica al navegador la ruta al archivo de imagen. Aquellos. para insertar una imagen con el nombre logo.jpg a un lugar determinado de la página (siempre que tanto la página como la imagen estén ubicadas en una carpeta(directorio)) es necesario insertar el siguiente código html en este lugar:

src="logotipo.jpg">

Si la imagen y la página se encuentran en diferente directorios (carpetas), luego debe especificar la ruta a la imagen relativamente páginas. Por ejemplo, si una página html está ubicada en el directorio (carpeta) del sitio, en el mismo directorio (carpeta) hay un subdirectorio (carpeta) de imágenes, en el que se encuentra nuestra imagen logo.jpg, entonces, para insertarla, debe escribe así:

imágenes/logotipo.jpg">

O no tienes que preocuparte y señalar dirección completa fotos. Por ejemplo, así:

http://www..png">

En este último caso, el navegador mostrará el código así:

Nota. Si la imagen se encuentra en tu computadora, pero quieres insertarlo a la pagina de internet, entonces no saldrá nada. Para hacer esto, primero debes mover la imagen a algún lugar. En Internet(Por ejemplo, ). E indicar la dirección completa en el código de la página. hasta este punto con una foto.

Además atributo requerido SRC en la etiqueta IMG Hay algunos atributos opcionales más. Echemos un vistazo más de cerca.

§ 2. Especificación del tamaño de la imagen.

Comencemos con los atributos que le permiten configurar dimensiones de la imagen(más precisamente, reserve espacio para estas dimensiones en las páginas). Aquí están:

ancho- ancho de la imagen en píxeles o porcentaje;

altura- la altura de la imagen en píxeles o porcentajes.

Si se utilizan estos atributos, primero asignará espacio para los gráficos, preparará el diseño del documento, mostrará el texto y solo luego cargará la imagen. Al mismo tiempo, colocará la imagen en un rectángulo del tamaño seleccionado, incluso si el ancho y alto reales de la imagen son mayores (comprimir) o menores (estirar). En el caso de que no se utilicen estos atributos, el navegador cargará la imagen inmediatamente y la visualización del texto y otros elementos siguientes se retrasará.

El ancho y alto de las imágenes se puede especificar tanto en píxeles (el tamaño de la imagen será constante independientemente de la resolución de la pantalla) como en porcentajes (el tamaño de la imagen dependerá de la resolución de la pantalla del usuario). Por ejemplo:

ancho="50" alto="20">

ancho="10%" alto="5%">

§ 3. Texto alternativo

Si el usuario ha desactivado la visualización de imágenes en la configuración del navegador, en lugar de la imagen se puede mostrar un texto alternativo que explicaría qué tipo de gráficos debería haber allí. Esto se logra utilizando el atributo ALTA:

En este caso, el navegador reservará espacio en la página para la imagen, pero en lugar de la imagen en sí, mostrará el texto que escribas en el valor del atributo. ALTA:

Repito, esto sucederá si el usuario ha desactivado la visualización de gráficos. De lo contrario, la imagen ocultará el texto alternativo.

§ 4. Alinear la imagen

Usando un atributo que ya conoces alinear puede controlar la alineación de las imágenes en relación con otros elementos de la página html. En atributo alinear hay varios significados, pero somos el más en este momento Me interesan dos:

izquierda- la imagen está ubicada en el borde izquierdo de la página y el texto fluye alrededor de la imagen de la derecha;

bien- la imagen está ubicada en el borde derecho de la página y el texto y otros elementos fluyen alrededor de la imagen de la izquierda.

Por ejemplo, código HTML

el navegador se mostrará así

Y este código HTML:

se verá así:

Para evitar que el texto se ajuste alrededor de una imagen, puede usar la etiqueta BR(familiar para nosotros de la sección anterior sobre). en la etiqueta BR hay un atributo claro, que puede tomar tres valores: