Qué etiquetas permiten el uso de imágenes. Etiquetas HTML para insertar imágenes e imágenes en HTML. Insertar imágenes en un documento HTML
Descripción
para insertar imagenes graficas El documento HTML utiliza una etiqueta HTML (imagen abreviatura del ingles palabras imagen- imagen). Las imágenes no se insertan directamente en la página web, la etiqueta solo contiene un enlace a la imagen y crea el tamaño requerido de espacio en el que se muestra la imagen. formato gráfico GIF, JPEG o PNG:
- JPG es el formato más común para fotografías. Las imágenes con la extensión .jpg muestran millones de colores, lo cual es especialmente importante para mostrar con precisión diferentes tonos y degradados en las fotografías. Sin embargo, dichas imágenes no pueden contener áreas transparentes.
- GIF se utiliza para gráficos simples como logotipos. Las imágenes GIF no se utilizan para fotografías porque no pueden contener tanta información de color como las imágenes JPG. Sin embargo, las imágenes GIF pueden tener áreas transparentes y pueden comprimirse en archivos de tamaño muy pequeño. También formato gif admite animación.
- PNG es un formato de imagen que, al igual que JPG, permite mostrar millones de colores y contener áreas transparentes. Sin embargo, como regla general, las imágenes con extensión .png tienen varios tamaño más grande que JPG o GIF.
etiqueta HTML tiene dos atributo requerido: origen y alt.
El atributo src no papel importante al mostrar gráficos en una página: establece la ruta (relativa o absoluta) a una imagen que técnicamente no está insertada en la página: el navegador muestra la imagen a la que conduce el enlace.
El atributo alt especifica un texto alternativo para la imagen que solo se mostrará si la imagen no se puede mostrar (no se especifica). la manera correcta o la imagen ha sido eliminada).
Si es necesario, la imagen puede convertirse en un enlace; para ello, sólo necesita colocar una etiqueta; dentro del elemento. En este caso, aparecerá un marco alrededor de la imagen, que se puede eliminar fácilmente usando CSS:
Las imágenes también se pueden utilizar como mapas de imágenes: aquí es donde una imagen contiene múltiples puntos de acceso. diferentes formas, cada uno de los cuales es un enlace independiente. tal mapa apariencia No es diferente de una imagen normal.
Nota: Para agregar imágenes a una página web, también puede usar la propiedad CSS background-image, que permite lo habitual fondo reemplace el elemento con una imagen.
Atributos
src: le dice al navegador la ubicación (URL) de la imagen deseada. Ejemplo » alt: Proporciona descripción del textoimágenes, que se muestran en la pantalla sólo si por algún motivo la imagen no se puede mostrar. Nota: para crear una información sobre herramientas cuando pasa el cursor sobre la imagen, debe utilizar el menú global atributo de título . El valor del atributo es cadena arbitraria , en el que puedes informar información adicional
sobre la imagen. Ejemplo » Si una imagen se utiliza como decoración de una página web y no tiene ningún significado semántico, en lugar de describir la imagen, puede dejar una línea vacía (alt="") como valor. altura: Especifica la altura de la imagen en píxeles.Valores válidos Atributo booleano ismap: Cuando hace clic en el área interactiva del mapa de imagen, las coordenadas del clic se envían al servidor en la cadena de consulta URL. Nota: el atributo ismap sólo se utiliza si el elemento es
elemento hijo
y crea conexiones entre elementos Y .
Ejemplo "
Nota: el atributo usemap no se puede utilizar si el elemento es descendiente del elemento o
Ancho: Especifica el ancho de la imagen en píxeles.
Las imágenes nos permiten comprender instantáneamente lo interesante que puede ser para nosotros un determinado sitio o artículo, crean un ambiente y pueden revelar un tema de una manera nueva. A veces una foto vale más que mil palabras.
Pero no deberías participar de ellos si no tienes Instagram o una tienda online. Es aconsejable que las imágenes:
- fueron informativos
- correspondió combinación de colores tu sitio
- fueron apropiados
Si no tiene una foto adecuada, puede utilizar el llamado fotostock (banco de fotos) - un lugar donde muchas fotografías, ilustraciones y gráficos vectoriales. Hay muchos recursos de este tipo, es posible que incluso hayas oído hablar de uno de los más importantes: Shutterstock, pero las descargas son de pago.
Para aquellos a los que no les gusta pagar de más, al final del artículo hemos preparado prima- una lista de varios bancos de fotografías donde puedes descargar una gran cantidad de fotos de alta calidad hermosos materiales completamente gratis :)
Formatos de imagen
En World Wide Web Se utilizan principalmente 3 tipos de imágenes:
gif(Formato de intercambio de gráficos - formato de intercambio de imágenes)
Este es el primer formato que se empezó a utilizar en Internet. Las ventajas de este formato son la disponibilidad. animaciones Y tamaño pequeño, la página se carga rápidamente. Además, apoya la transparencia. Desventaja: solo usado 256 colores(en realidad es por eso que el tamaño es pequeño), es decir. no se puede utilizar para imágenes a todo color.
jpeg, también conocido como jpg(Grupo Conjunto de Expertos en Fotografía - Grupo Conjunto de Expertos en Fotografía - este es el nombre de la organización de desarrollo)
adecuado para crear imágenes a todo color y de alta calidad, fotos. El tamaño de estas imágenes es grande, por lo que suelen dar carga pesada al servidor. Si necesita comprimir un jpeg (para un peso de imagen menor), le recomendamos tomar el tamaño de la imagen final múltiplo de ocho , por lo que la pérdida de calidad será mínima.
png(Gráficos de red portátiles - Portátil gráficos de red . Se pronuncia de la misma manera que ping, es decir. )
Este formato fue desarrollado originalmente para la web, es decir. La imagen suele pesar poco y no ralentiza la página al cargar. Este formato fue creado para reemplazar el gif obsoleto, pero a diferencia de él, no admite animación. png-8, al igual que los gif, utiliza sólo 256 colores. Formato png-24 Admite 16 millones de colores, aunque ya es bastante pesado. png-32 contiene la misma cantidad de colores que png-24, y además te permite obtener una imagen Con fondo transparente y puede ajustar el grado de transparencia. Al disminuir tamaños png No hay pérdida en la calidad del color.
resumamos
gif- para animación
jpeg- para fotografías
png- para iconos, botones, fondos, logotipos, capturas de pantalla, dibujos, textos, fotografías con fondo transparente
Insertar una imagen en un archivo html
Para agregar una imagen a la página, use etiqueta
(de la imagen en inglés - imagen, imagen). Este etiqueta única, no necesita cierre. Esta etiqueta contiene atributos en su interior.
Atributo src(de la fuente en inglés - fuente) indica la ruta al archivo (el lugar donde se encuentra la imagen). Si la imagen está en su computadora (el sitio aún está en desarrollo) o en su servidor, use enlace relativo. Si la imagen es de la red, entonces necesita referencia absoluta. Lea cómo hacer esto en el artículo "Enlaces".
Entonces, para conectar una imagen a su página web, necesita escribir un código como este:
atributo alternativo(de la alternativa en inglés - alternativa) indica el texto que verá el usuario si la imagen no se carga. La ruta es incorrecta, la imagen ha sido eliminada. mala internet- Puede haber muchas razones y es aconsejable que una persona comprenda qué se esconde detrás de este odiado icono.
Los motores de búsqueda prestan mucha atención a garantizar que este atributo esté completo. Y el validador html (un recurso para verificar la corrección del código) percibirá la ausencia del atributo alt como un error. Si todos los atributos
En el siguiente ejemplo, especificamos deliberadamente una ruta inexistente para la imagen para que puedas ver cómo funciona el atributo alt.
Alto y ancho de imágenes.
También puede establecer la altura y el ancho de la imagen si la imagen original es, por ejemplo, más de lo que necesitas.
En HTML5 se recomienda hacer esto usando CSS o atributo de estilo
, como esto:
En este ejemplo, tomamos el 30% del ancho, no de la imagen original, sino del tamaño de la ventana del navegador. Cuando ancho = 100%, la imagen se abre en todo el ancho del navegador. Recuerda esta característica por ciento, como unidades de medida.
Por cierto, si hubiéramos escrito solo el ancho, el resultado hubiera sido el mismo, prueba:
< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda en el arbol" estilo = "ancho: 30%;" > |
También puede establecer el ancho y el alto en píxeles. En el caso de nuestro panda, cuyas dimensiones originales son 1196 x 796 píxeles, para que el animal no sufra al comprimirse, debemos mantener las proporciones, y aquí no se puede prescindir de una calculadora. Digamos que queremos reducir el tamaño de la imagen 3 veces, luego debemos establecer las dimensiones en 399 x 265 píxeles.
Tenga en cuenta que si ampliamos la imagen proporcionalmente, basta con especificar solo un parámetro, por ejemplo. ancho. El propio navegador inteligente calculará el tamaño completo de la imagen.
Intente ejecutar este código y observe el resultado:
< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda en el arbol" estilo = "ancho: 399px;" > |
Establezca siempre las dimensiones de la imagen. Normalmente, las imágenes tardan más en cargarse que el resto del código html. Si el navegador sabe cuánto espacio reservar para las imágenes, puede continuar cargando el sitio sin esperar a que se carguen las imágenes.
un poco de naftalina
Si juega con el código de un sitio creado en HTML-4 o incluso antes, notará que los tamaños de las imágenes se configuran mediante herramientas especiales. atributos de ancho Y altura. Este es un método obsoleto, aunque sigue siendo válido en HTML5. Sin embargo, recomendamos usar estilo, porque Los atributos de ancho y alto pueden verse afectados por estilos internos o externos que residirán en el navegador o en su archivo CSS. Entraremos en más detalles sobre esto cuando veamos CSS, pero por ahora solo mire un ejemplo de cómo los estilos afectan los atributos de alto y ancho.
Hay 3 pestañas en esta ventana: en la primera verá el código html, en la segunda el código CSS y en la última, como siempre, el resultado. Esto funciona como si la primera pestaña fuera un archivo index.html, la segunda un archivo style.css y la tercera un navegador. Entonces, ahora nuestro CSS dice que todos los elementos con la etiqueta img tienen un ancho del 100%. Los tamaños predeterminados de los atributos de ancho y alto están en píxeles, por lo que no es necesario agregar ninguna unidad aquí.
La diferencia en los resultados es obvia :)
También en versiones anteriores de HTML se utilizaban los siguientes atributos:
alinear, que se utilizó para alinear la imagen horizontal o verticalmente.
hespacio- sangría a la izquierda y a la derecha de la imagen en el contenido circundante (por ejemplo, texto o una imagen adyacente)
vespacio- sangría arriba y abajo desde la imagen hasta el contenido que la rodea.
borde- establece el grosor del marco alrededor de la imagen (por defecto es cero)
Hoy en día, toda esta manipulación (y mucho más) se realiza mediante CSS, por lo que decidimos no molestarte con eso aquí. Si todavía estás interesado en cómo trabajar con estos atributos, escribe en los comentarios, agregaremos este elemento :)
Colocar una imagen en el código.
Desde donde colocamos nuestra etiqueta Depende de cómo se mostrará en el navegador.
Ejemplo No. 1 - antes del párrafo:
Elementos como
Y
referirse a elementos de bloque
. Siempre comienzan en una nueva línea y ocupan todo el ancho disponible de la ventana del navegador. Si tu primer lugar ![]()
, y después un elemento de bloque, por ejemplo un párrafo, se moverá a la siguiente línea.
Ejemplo No. 2 - al principio del párrafo
Este es un elemento en línea, cabe dentro de un elemento de bloque y no comienza una nueva línea. En el ejemplo anterior, el texto rodea la imagen porque el código
registrado dentro
Leyendas de ilustraciones
Para marcar o firmar una foto en una página, utilice etiqueta
Etiqueta
Tenga en cuenta que, de forma predeterminada, el navegador tiene algunas configuraciones de estilo para la etiqueta.
Así que tú y yo hemos aprendido
- agregar una imagen a la página: usando etiqueta
- Aprendí los atributos requeridos para esta etiqueta: src para indicar el camino y alternativo para describir la imagen
- Comprenda qué formato es mejor y qué usar: jpeg para fotografías, png para logotipos y capturas de pantalla, gif para animación
- la mejor manera de establecer las dimensiones de la imagen: usando atributo de estilo con parametros ancho, que contiene el atributo href. altura
- Descubrimos cómo se mostrará la imagen dependiendo del lugar en el código: por separado si está delante de un elemento de bloque y con una envoltura si está dentro de un elemento de bloque (por ejemplo
)
Y para que podamos tener algo con qué trabajar, necesitamos tomar estas imágenes de algún lugar, sin violar los derechos de autor de nadie.
Así que es hora de recibir un bono :)
Lista de bancos de fotos gratuitos
Antes de comenzar, tenga en cuenta que cada captura de pantalla aquí es un enlace al sitio. Cómo hacer que las imágenes sean enlaces, lea el artículo "Enlaces".
En pixabay encontrarás 680 mil imágenes gratuitas sobre cualquier tema, las cuales se distribuyen bajo la licencia Creative Commons CCO (CC Zero), es decir. se pueden utilizar, distribuir y modificar para cualquier fin, incluso comercial.
El banco de fotografías contiene 390 mil fotografías e imágenes gratuitas. Es más difícil encontrar una imagen interesante aquí, pero también hay buenos ejemplos. La publicidad de los bancos de fotografías de pago distrae bastante. Ponemos este recurso en segundo lugar por la cantidad de imágenes, pero en términos de amabilidad probablemente ocupará el último lugar en nuestro ranking.
Photostock cuenta con más de 250 mil fotografías gratuitas, la mayoría de alta calidad. Puedes descargar incluso sin registrarte. Disponible sólo en inglés.
Muchas fotografías elegantes con licencia CC Zero. Puedes descargar sin registrarte. Este banco de fotos también te entenderá sólo en inglés.
El sitio fue creado por un diseñador web indio que comprende lo difícil que puede ser encontrar fotografías de alta calidad. Todas las fotografías fueron tomadas por él personalmente y puedes hacer lo que quieras con ellas. Le gusta fotografiar comida, escritorio, ordenadores y todo tipo de objetos. Buscar - sólo en inglés.
Insertar una imagen:
Descripción y uso
Etiqueta inserta una imagen en un documento HTML.
Tenga en cuenta que técnicamente las imágenes no se insertan en la página. De hecho, las imágenes enlazan con páginas HTML. Etiqueta Crea un contenedor para la imagen.
en la etiqueta dos atributos requeridos: src y alt.
Diferencia entre HTML y XHTML
En etiqueta HTML no tiene etiqueta de cierre.
En etiqueta XHTML debe estar correctamente cerrado.
Los atributos "align", "border", "hspace" y "vspace" del elemento img están en desuso y no son compatibles con XHTML 1.0 Strict.
Consejo: El atributo alt se utiliza como texto alternativo cuando no hay imagen, en lugar de como texto al pasar el mouse. Para mostrar texto cuando pasa el cursor sobre una imagen, utilice el atributo de título. Como esto: 
.
Atributos requeridos
Atributos opcionales
| Atributo | Significado | Descripción |
|---|---|---|
| alinear | izquierda derecha arriba medio abajo | Anticuado. Usar CSS |
| borde | píxeles | Anticuado. Usar CSS |
| altura | % de píxeles | Define la altura de la imagen. |
| hespacio | píxeles | Anticuado. Usar CSS |
| ismapa | ismapa | Define la imagen como un mapa de imágenes del lado del servidor. Muy raramente usado. |
| largodesc | URL | Especifica la ruta a un documento que contiene una descripción larga de la imagen. |
| mapa de uso | #nombre_mapa | Define la imagen como un mapa de imágenes del lado del servidor. |
| vespacio | píxeles | Anticuado. Usar CSS |
| ancho | % de píxeles | Define el ancho de la imagen. |
Atributos estándar
| Atributo | Significado | Descripción |
|---|---|---|
| clase | nombre_clase | Define el nombre de clase para el elemento. |
| directorio | litro rtl | Define la dirección del texto para el contenido de un elemento. |
| identificación | identificación | Define una identificación única para un elemento. |
| idioma | código_idioma | Especifica el código de idioma para el contenido de un elemento. |
| estilo | definición_estilo | Define un estilo en línea para un elemento. |
| título | texto | Define información adicional sobre un elemento. |
| xml:idioma | código_idioma | Define el código de idioma para el contenido de un elemento en documentos XHTML. |
Atributos del evento
| Atributo | Significado | Descripción |
|---|---|---|
| abortar | guion | El script se ejecutará si hay algún problema al cargar la imagen. |
| al hacer clic | guion | El script se ejecutará al hacer clic. |
| hacer clic | guion | El script se ejecutará al hacer doble clic. |
| con el mouse abajo | guion | El script se ejecutará cuando se presione el botón del mouse. |
| mover el mouse | guion | El script se ejecutará cuando se mueva el cursor del mouse. |
| en el mouse | guion | El script se ejecutará cuando el cursor del mouse abandone el elemento. |
| sobre el mouse | guion | El script se ejecutará cuando el cursor del mouse esté sobre el elemento. |
| en el ratón | guion | El script se ejecutará cuando se suelte el botón del mouse. |
| onkeydown | guion | El script se ejecutará cuando se presione una tecla. |
| al presionar una tecla | guion | El script se ejecutará cuando se presione y luego se suelte una tecla |
| encendido | guion | El script se ejecutará cuando se suelte la tecla. |
imágenes HTML agregado a páginas web usando una etiqueta . El uso de gráficos hace que las páginas web sean más atractivas visualmente. Las imágenes ayudan a transmitir mejor la esencia y el contenido de un documento web.
Usando etiquetas HTML
Insertar imágenes en un documento HTML
1. Etiqueta ![]()
Elemento representa una imagen y su contenido alternativo, que se agrega mediante el atributo alt. Desde el elemento
está en minúscula, se recomienda colocarlo dentro de un elemento de bloque, por ejemplo,
O
Etiqueta tiene un atributo src requerido cuyo valor es la ruta absoluta o relativa a la imagen:
Para etiqueta Los siguientes atributos están disponibles:
| Atributo | Descripción, valor aceptado. |
|---|---|
| alternativo | El atributo alt agrega texto alternativo a una imagen. Se muestra donde aparece la imagen antes de cargarla o cuando los gráficos están deshabilitados, y también se muestra como información sobre herramientas al pasar el mouse sobre la imagen. Sintaxis: alt="descripción de la imagen" . !} |
| origen cruzado | El atributo crossorigin le permite cargar imágenes de recursos en otro dominio mediante solicitudes CORS. Las imágenes cargadas en el lienzo mediante solicitudes CORS se pueden reutilizar. Valores permitidos: Anónimo: la solicitud entre orígenes se realiza mediante un encabezado HTTP y no se transmiten credenciales. Si el servidor no proporciona credenciales al servidor desde el que se solicita el contenido, la imagen se dañará y su uso será limitado. use-credentials: la solicitud de origen cruzado se realiza pasando credenciales. Sintaxis: crossorigin="anónimo" . |
| altura | El atributo de altura especifica la altura de la imagen. Se puede especificar en px o %. Sintaxis: altura: 300px. |
| ismapa | El atributo ismap indica que la imagen es parte de una imagen de mapa ubicada en el servidor (una imagen de mapa es una imagen con áreas en las que se puede hacer clic). Cuando hace clic en la imagen de un mapa, las coordenadas se envían al servidor como una cadena de consulta URL. El atributo ismap sólo se permite si el elemento Sintaxis: ismap. |
| largodesc | Una URL de descripción de imagen extendida que complementa el atributo alt. Sintaxis: longdesc="http://www.example.com/description.txt" . |
| src | El atributo src especifica la ruta a la imagen. Sintaxis: src="flor.jpg" . |
| tamaños | Establece el tamaño de la imagen según las opciones de visualización. Solo funciona cuando se especifica el atributo srcset. El valor del atributo es una o más cadenas, separadas por comas. |
| conjunto de caracteres | Crea una lista de fuentes de imágenes que se seleccionarán según la resolución de la pantalla. Se puede utilizar junto con o en lugar del atributo src. El valor del atributo es una o más cadenas, separadas por comas. 
|
| mapa de uso | El atributo usemap especifica la imagen como un mapa de imagen. El valor debe comenzar con el símbolo #. El valor está asociado con el valor del nombre de la etiqueta o el atributo de identificación. |
| ancho | El atributo de ancho especifica el ancho de la imagen. Se puede especificar en px o %. Sintaxis: ancho: 100%. |
1.1. Dirección de imagen
La dirección de la imagen se puede especificar completa (URL absoluta), por ejemplo:
URL(http://anysite.ru/images/anyphoto.png)
O a través de una ruta relativa desde documento. directorio raíz sitio web:
url(../images/anyphoto.png) - ruta relativa desde el documento,
url(/images/anyphoto.png): ruta relativa desde el directorio raíz.
Esto se interpreta de la siguiente manera:
../ - significa subir un nivel, al directorio raíz,
imágenes/ - ir a la carpeta con imágenes,
anyphoto.png: apunta a un archivo de imagen.
1.2. Dimensiones de la imagen
Sin configurar las dimensiones de la imagen, el dibujo se muestra en la página en su tamaño real. Puede editar las dimensiones de la imagen utilizando los atributos de ancho y alto. Si solo se especifica uno de los atributos, el segundo se calculará automáticamente para mantener las proporciones del dibujo.
1.3. Formatos de archivos gráficos
formato JPEG (Grupo Conjunto de Expertos en Fotografía). Las imágenes JPEG son ideales para fotografías y pueden contener millones de colores diferentes. Las imágenes se comprimen mejor que los GIF, pero el texto y las áreas grandes de color sólido pueden aparecer borrosos.
formato gif (Formato de intercambio de gráficos). Ideal para comprimir imágenes que tienen áreas de color sólido, como logotipos. Los GIF le permiten configurar uno de los colores para que sea transparente, lo que permite que el fondo de una página web se muestre a través de parte de la imagen. Los GIF también pueden incluir animaciones simples. Las imágenes GIF contienen sólo 256 tonos, lo que hace que las imágenes parezcan manchadas y con colores poco realistas, como carteles.
formato PNG (Gráficos de red portátiles). Incluye las mejores características de los formatos GIF y JPEG. Contiene 256 colores y permite hacer transparente uno de los colores, mientras comprime las imágenes en un tamaño más pequeño que un archivo GIF.
formato APNG (Gráficos de red portátiles animados). Un formato de imagen basado en el formato PNG. Le permite almacenar animaciones y también admite transparencia.
formato SVG (Gráficos vectoriales escalables). Un dibujo SVG consta de un conjunto de formas geométricas descritas en formato XML: línea, elipse, polígono, etc. Se admiten gráficos estáticos y animados. El conjunto de funciones incluye varias transformaciones, máscaras alfa, efectos de filtro y la posibilidad de utilizar plantillas. Las imágenes SVG se pueden cambiar de tamaño sin perder calidad.
formato BMP (Imagen de mapa de bits). Es una imagen de mapa de bits sin comprimir (original) cuya plantilla es una cuadrícula rectangular de píxeles. Un archivo de mapa de bits consta de un encabezado, una paleta y datos gráficos. El encabezado almacena información sobre la imagen gráfica y el archivo (profundidad de píxel, alto, ancho y número de colores). La paleta se indica únicamente en aquellos archivos de mapa de bits que contienen imágenes de paleta (8 bits o menos) y no constan de más de 256 elementos. Los datos gráficos representan la imagen misma. La profundidad de color en este formato puede ser 1, 2, 4, 8, 16, 24, 32, 48 bits por píxel.
formato ICO (icono de Windows). Formato de almacenamiento de iconos de archivos en Microsoft Windows. Además, el icono de Windows se utiliza como icono en sitios web de Internet. Es una imagen de este formato que se muestra junto a la dirección del sitio web o al marcador en el navegador. Un archivo ICO contiene uno o más iconos, cuyo tamaño y color se pueden configurar por separado. El tamaño del icono puede ser de cualquier tamaño, pero los más comunes son los iconos cuadrados con lados de 16, 32 y 48 píxeles.
2. Etiqueta
Etiqueta
La etiqueta tiene un atributo de nombre disponible, que especifica el nombre del mapa. El valor del atributo de nombre para la etiqueta.
Elemento
3. Etiqueta
Etiqueta describe sólo una región activa como parte de un mapa de imagen del lado del cliente. El elemento no tiene etiqueta de cierre. Si un área activa se superpone a otra, se implementará el primer enlace de la lista de áreas.
| Atributo | Breve descripción |
|---|---|
| alternativo | Establece texto alternativo para el área del mapa activo. |
| coordenadas | Determina la posición del área en la pantalla. Las coordenadas se especifican en unidades de longitud y están separadas por comas: Para círculo— coordenadas del centro y radio del círculo; Para rectángulo— coordenadas de las esquinas superior izquierda e inferior derecha; Para polígono— coordenadas de los vértices del polígono en el orden requerido; también se recomienda indicar las últimas coordenadas, iguales a las primeras, para completar lógicamente la figura. |
| descargar | Complementa el atributo href y le dice al navegador que el recurso debe cargarse en el momento en que el usuario hace clic en el enlace, en lugar de, por ejemplo, tener que abrirlo primero (como un archivo PDF). Al especificar un nombre para un atributo, le estamos dando un nombre al objeto cargado. Está permitido utilizar un atributo sin especificar su valor. |
| href | Especifica la URL del enlace. Se puede especificar una dirección de enlace absoluta o relativa. |
| hreflang | Especifica el idioma del documento web asociado. Sólo se utiliza junto con el atributo href. Los valores aceptados son una abreviatura que consta de un par de letras que indican el código de idioma. |
| medios de comunicación | Determina para qué tipos de dispositivos se optimizará el archivo. El valor puede ser cualquier consulta de medios. |
| rel | Expande el atributo href con información sobre la relación entre el documento actual y el relacionado. Valores aceptados: alternativo: enlace a una versión alternativa del documento (por ejemplo, una forma impresa de la página, una traducción o un espejo). autor: enlace al autor del documento. marcador: URL permanente utilizada para marcadores. ayuda: enlace para ayudar. licencia: enlace a la información de derechos de autor de este documento web. siguiente/anterior: indica la relación entre URL individuales. Gracias a este marcado, Google puede determinar que el contenido de estas páginas está relacionado en una secuencia lógica. nofollow: evita que el motor de búsqueda siga enlaces en una página determinada o en un enlace específico. noreferrer: indica que al seguir un enlace, el navegador no debe enviar un encabezado de solicitud HTTP (Referrer), que registra información sobre de qué página proviene el visitante del sitio. captación previa: indica que el documento de destino debe almacenarse en caché, es decir, El navegador en segundo plano descarga el contenido de la página a su caché. búsqueda: indica que el documento de destino contiene una herramienta de búsqueda. etiqueta: especifica la palabra clave para el documento actual. |
| forma | Especifica la forma del área activa en el mapa y sus coordenadas. Puede tomar los siguientes valores: rect - área activa rectangular; círculo — área activa en forma de círculo; poli: área activa en forma de polígono; predeterminado: el área activa ocupa toda el área de la imagen. |
| objetivo | Especifica dónde se descargará el documento cuando se haga clic en el enlace. Acepta los siguientes valores: _self — la página se carga en la ventana actual; _blank: la página se abre en una nueva ventana del navegador; _parent: la página se carga en el marco principal; _top: la página se carga en la ventana completa del navegador. |
| tipo | Especifica el tipo MIME de los archivos de enlace, es decir. extensión de archivo. |
4. Ejemplo de creación de un mapa de imágenes.
1) Marque la imagen original en áreas activas de la forma deseada. Las coordenadas de las áreas se pueden calcular utilizando un programa de procesamiento de fotografías, por ejemplo, Adobe Photoshop. Pintar.
Arroz. 1. Ejemplo de marcado de imágenes para crear un mapa. 2) Establezca el nombre de la tarjeta agregándola a la etiqueta
Jpg" alt="flores_foto" width="680" height="383" usemap="#flowers">
!}
Arroz. 2. Un ejemplo de creación de un mapa de imágenes, cuando haces clic con el cursor del mouse en una flor, accedes a una página con una descripción.
Es difícil encontrar un sitio web en Internet que no contenga imágenes, y esto no es sorprendente, porque son la parte principal del diseño del sitio web, lo que le da un aspecto memorable. Un buen diseño web es la clave para su exitoso desarrollo. Para mostrar imágenes en html solo hay una etiqueta
.
1. Sintaxis de etiquetas ![]()
Descripción de la imagen" src ="URL " [atributos ]>
Tenga en cuenta que esta etiqueta es única y no requiere etiqueta de cierre .
El atributo src es obligatorio. Se utiliza para especificar la dirección de la imagen mostrada. Puede especificar una URL absoluta o relativa. Si no especifica la dirección o la escribe con error, la imagen no se mostrará.
Atributo alt="descripción" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}
Los atributos restantes son opcionales; los veremos a continuación. Primero, demos un ejemplo simple de cómo enviar una imagen a HTML.
2. Cómo insertar una imagen en html
Para insertar una imagen en html, use la etiqueta . Miramos la sintaxis un poco más arriba. Pongamos ejemplos prácticos.
Ejemplo 2.1. Usando una etiqueta ![]()
...
este codigo
EN en este ejemplo Indicamos la dirección directa de la imagen de las imágenes en Yandex Photos. La mayoría de las veces, se proporcionan enlaces a imágenes que se encuentran en la misma URL. Por ejemplo, src="/img/kartinka.jpg", es decir se indica la dirección relativa.
Es posible colocar varias imágenes seguidas. Si no caben en una línea, automáticamente pasarán a la siguiente.
Ejemplo 2.2. Mostrar varias imágenes en html una tras otra
...
Se convierte a lo siguiente en la página:
Si tuviéramos que publicar otra imagen, sería con nueva linea, porque ya no cabría en este.
Ejemplo 2.3. Usando texto alternativo (alt) en img
Se recomienda incluir texto alternativo ( atributo alternativo) en la etiqueta , para asegurarse contra el caso de que la imagen no esté disponible. A continuación se muestra un ejemplo usando texto alternativo. En el primer caso no especificamos el tamaño de la imagen, pero en el segundo sí.
...
Se convierte a lo siguiente en la página:
Si colocáramos otra imagen, estaría en una nueva línea, ya que ya no cabría en esta línea.
Ahora echemos un vistazo más de cerca a todos los atributos de las etiquetas.
.
3. Etiquetar atributos y propiedades ![]()
1. Propiedad align="parámetro": determina la alineación de la imagen. Este valor también afecta cómo fluirá el texto alrededor de la imagen. Puede aceptar los siguientes parámetros:
- izquierda - alineación izquierda
- medio: alinea el centro de la imagen con la línea de base. línea actual
- inferior: alinea el borde inferior de la imagen con el texto circundante
- top: el borde superior de la imagen está alineado con el elemento más alto de la línea actual
- derecha - alineación derecha
Ejemplo 3.1. Alinear una imagen en html a la derecha
...
Se convierte a lo siguiente en la página:
2. Propiedad alt="texto" - подсказка/описание картинки. Выполняет сразу две важные функции:!}
- Muestra información sobre herramientas al pasar el mouse
- Si las imágenes están deshabilitadas en el navegador, se muestra este texto.
Este atributo también es muy importante al clasificar imágenes en Yandex Images y Imágenes de Google. Debe agregarse a cada imagen, ya que este es uno de los factores en los algoritmos de los motores de búsqueda.
Ejemplo 3.2. Generar una imagen en html con un marco (borde)
...
Se convierte a lo siguiente en la página:
4. Propiedad bordercolor="color": establece el color del borde que rodea la imagen. Sólo tiene sentido si el atributo del borde es mayor que 0.
Ejemplo 3.3. Generar una imagen en html con un marco de color
...
El resultado se puede ver justo arriba.
NotaLos atributos de borde y color de borde se pueden configurar en estilos CSS para img:
...
5. Propiedad altura="NÚMERO" - establece la altura de la imagen: en píxeles o como porcentaje. Por ejemplo, si la imagen tiene un tamaño de 400x200 y especificamos una altura de 150 píxeles, entonces se comprime a 300x150 (un 25% más pequeño), es decir. proporcionalmente.
6. Propiedad width="NÚMERO" - establece el ancho de la imagen: ya sea en píxeles o como porcentaje. Por ejemplo, si una imagen tiene un tamaño de 1000x800 y el ancho se especifica como 1200 píxeles, se expande automáticamente en un 20% a 1200x960.
7. Propiedad hspace="NÚMERO": establece la sangría horizontal de la imagen en píxeles de otros objetos html.
8. Propiedad vspace="NÚMERO" - conjuntos espacio vertical imágenes en píxeles de otros objetos html.
NotaEn lugar de hspace y vspace, le aconsejo que utilice el margen antiguo y probado (puede leer más sobre esto en la lección sobre cómo describir estilos html). Déjame recordarte brevemente:
- margen superior: X px;
- (X - guión superior)
- margen inferior: Y px;
- (Y - sangría inferior)
margen izquierdo: L px; (L - sangría izquierda) margen derecho: R px;
(R - sangría derecha)
...
Se convierte a lo siguiente en la página:
. De forma predeterminada, hereda el valor del antepasado o tiene un valor de 0.
Por ejemplo. El relleno izquierdo es de 50 píxeles y el relleno superior es de 10 píxeles.
margen superior: 10px; margen izquierdo: 50px
"src=" En este ejemplo, la sangría en la parte superior era de 10 píxeles y en la izquierda de 50 píxeles.
9. Propiedad class="class_name": puede asignar una clase a una imagen para establecer el estilo de todas las imágenes de esta clase.
...
etiqueta (enlace).
Adónde_el_enlace conduce dirección_imagen
