homefinance blog
Las imágenes pueden decir miles de palabras. Sí, cualquier página web sin imágenes no podría mantener a sus usuarios en ella durante mucho tiempo. Las imágenes HTML no solo se usan para hacer que la página web hermosa y atractiva, de hecho, las imágenes también ofrecen mensajes importantes en las imágenes. Las imágenes son la parte importante del diseño, también cualquier diseño web sin la ayuda de las imágenes no tendría ese impacto que el diseño admitido por las imágenes puede tener. Por ejemplo, sin el logotipo en su página web. ¿Crees que puedes hacer la marca correcta de tu negocio? No creo que puedas hacer esto y el logotipo se puede colocar con la etiqueta de la imagen en HTML.
Hay varias partes en la página web usando imágenes. Por ejemplo, los anuncios que ve en su sitio también son imágenes aceptadas. El logotipo de su sitio, imágenes deslizantes, pancartas, imágenes de perfil, servicios y más. Espero que ahora entiendas la importancia de las imágenes en HTML. Veamos cómo usar la etiqueta de imagen en HTML. ¿Cómo insertar una imagen en la página HTML? Similar a otras etiquetas, la etiqueta de imagen es muy simple, pero la etiqueta de la imagen en HTML no tiene etiqueta final. La etiqueta de la imagen en realidad se cierra, en lugar de tener una etiqueta de cierre diferente. La etiqueta de la imagen en html comienza con
, por lo que la etiqueta completa puede ser
. Donde los atributos internos como src = “” definen la URL de la imagen. El atributo es la descripción de la imagen. Tomemos un ejemplo del ejemplo del código de imagen HTML.
En el ejemplo anterior podemos ver que la etiqueta <img tiene dos atributos diferentes. Sintaxis de imagen HTML La etiqueta de imagen comienza con
, mientras que la etiqueta src = “” es donde proporciona la URL de la imagen. Puede decir que la ubicación de la imagen estará en src = “” donde <img etiqueta toma la imagen y se mostrará en la página web. Atributo Alt en el ejemplo de imagen de texto alternativo cuando la imagen no se carga.
Si digo el atributo, que significa un atributo alternativo en la etiqueta de imagen, es más importante que la imagen en sí. Esto no estaría mal porque su objetivo principal de crear cualquier página web es clasificarse en los motores de búsqueda y generar tráfico. El otro atributo es lo que dicen los motores de búsqueda y otros robots sobre lo que se trata en la imagen. El otro atributo también muestra el texto sustituyente cuando la imagen no se puede cargar o no existe. Es una práctica muy importante y buena que debe adoptar para usar alternativamente o comenzar a describir sus imágenes en palabras. Use alt = “” y describa su imagen maravillosamente, lo que le ayudará mucho a lograr excelentes resultados. Y si trabaja para otros, esto es lo que sus clientes o jefe beneficiarán.
Nota: Siempre debe estar con sus ojos en la extensión de sus imágenes. Además, durante el nombre de las imágenes, no debe haber espacio en nombre de la imagen. No se puede usar ningún personaje especial. Pero puedes usar, y _. Vea a continuación cómo debe nombrar imágenes u otros documentos HTML. Nombre de la imagen correcto:
Japanflag.jpgjapan_flag.jpg
Japan-flag.jpg
Japanflag.jpg
Nombres de imágenes incorrectos:
Se utiliza el espacio Japan Flag.jpg
Japón y flag.jpg personaje especial
La bandera de Japón le falta la extensión
Tamaño de la imagen: ancho y altura Hay dos formas diferentes de proporcionar el ancho y la altura de las imágenes. El método recomendado es la causa CSS que puede mantener la relación de apariencia adecuada cuando desea arreglar la altura, pero puede hacer automáticamente el ancho, para que se ajuste. En HTML tenemos atributos de ancho y altura para imágenes y se pueden usar.
Ejemplo de atributos Ancho y altura HTML
Ejemplo de ancho y altura CSS.
Imágenes En otra carpeta hay diferentes situaciones, como donde está su página actual. La imagen está en una carpeta que está cerca de ese archivo o en su página web. La otra situación puede ser que la carpeta es un paso atrás. Entonces, ¿cómo puedes acceder?
../ Tomará al usuario una carpeta de regreso e ingresará otra carpeta para encontrar el nombre del archivo. Y, si la siguiente carpeta, solo proporcione el nombre de la carpeta y / con el nombre del archivo. Recuerde la extensión si su imagen es JPG, PNG, JPEG o GIF. Esto significa que la URL del sitio web de imágenes es diferente de la URL que tiene su página web. En tal situación, no puede ingresar a los directores de ese servidor directo, debe proporcionar la referencia de imagen completa. Quién dice en este sitio en este directorio este nombre de archivo. Entonces, vea el siguiente ejemplo de cómo dar URL de la imagen completa.
Imágenes animadas que no puede hacer nada con HTML para hacer un imagen animada. De hecho, las imágenes en sí mismas son imágenes animadas, por ejemplo, imágenes GIF. Entonces, si los navegadores aceptan la imagen GIF e inserte esa imagen animada con su etiqueta HTML. La animación funcionará a medida que se cargue la imagen.
!Esto hará clic en la imagen y abrirá la URL en href = “” la etiqueta de anclaje.Vea el ejemplo a continuación.Como puede ver, la etiqueta <a comienza antes de que la etiqueta <img y se cierra después />, lo que significa que la imagen está dentro , lo que la convierte en una imagen atada.
La imagen flotante principalmente, flotante es manejada por clases CSS o CSS en línea.También tenemos el atributo de alineación en muchas etiquetas HTML.Lo que puede ayudarnos a flotar en las imágenes de izquierda o derecha a lo largo de algún texto u otros elementos.
Align = “Left”, Align = “Right” son las diferentes formas del atributo de alineación que se puede usar para alinear la imagen. Por defecto, la imagen es un bloque, lo que significa que la imagen contiene el ancho completo y no dejaría que nada llegue al área izquierda o derecha a menos que alinee la imagen con el CSS o los atributos de alineación. * “Alt =” Japan Flag “Align =” Right ” /> Con CSS solo puede usar el estilo y luego flotar hacia la izquierda o hacia la derecha. Puede hacer las clases para su alineación y usarlas, que es la mejor práctica. Pero aquí le daría un ejemplo de CSS en línea.>
alinear la imagen en el centro no hay CSS directo o un atributo de imagen al que puede aplicar la imagen y alinear el centro. Tienes que empacar la imagen en un DIV o en cualquier otro elemento de bloque HTML. En las versiones HTML anteriores, solía tener las etiquetas HTML que envolviendo la imagen en estas etiquetas podrían alinear la imagen con el centro. Sin embargo, la etiqueta todavía es aceptada por la mayoría de los navegadores, pero no permitirá que su código HTML cruce la prueba de validación W3C.
Entonces, para que pueda alinear la imagen en el hermoso centro. Solo alineación de texto: la propiedad CSS es suficiente para alinear la imagen en el centro. Si desea dar un ancho fijo a la imagen, también puede establecer el borde automático, pero no se recomienda.
Si desea obtener más información sobre diferentes etiquetas HTML y cómo usarlas. Esta tabla periódica HTML5 puede ayudarlo. Conclusión Las imágenes son una parte muy importante de las páginas HTML. Hacen el diseño hermoso y envían un mensaje fuerte a los visitantes. Por lo tanto, no hay una sola página web que pueda sobrevivir sin la ayuda de las imágenes. Se le recomienda hacer las buenas prácticas de las imágenes si desea ser un profesional en HTML. También hice un video, mira a continuación. Si desea obtener el tutorial de imagen HTML completo, descargue en el siguiente enlace. Consulte el ejemplo del código de imagen en HTML. Descargue el código/recursos de imagen en HTML Consulte la conferencia anterior: Enlaces en HTML de la siguiente manera: HTML Tablas-HTML Tutorial-Development Web Application Development
