, inserte el etiqueta de imagen: .
La imagen La etiqueta es lo que incrusta imágenes en archivos HTML. Es una etiqueta vacía que incluye atributos HTML como img origen y alternativa y no requiere una etiqueta de cierre.
Ahora, desglosaremos los otros elementos HTML requeridos después de la imagen etiqueta.
3. Agregue el atributo img src a la imagen
Abreviatura de fuente de imagen, img origen es un atributo HTML imprescindible de un elemento de imagen, ya que determina la ruta del archivo de la imagen en HTML. Si el img origen no se especifica correctamente, la imagen no se cargará.
Hay dos formas de escribir un img origen atributo, utilizando una ruta relativa o absoluta. En la opción de ruta relativa, la fuente de la imagen se basa en el directorio o carpeta actual de la imagen.
Esta opción se utiliza cuando la imagen se carga en el mismo directorio que el archivo HTML que desea editar.
Una sintaxis de ruta relativa se ve así:
img src=”imágenes/nombre-de-archivo.jpg”
Por otro lado, la ruta absoluta especifica la URL de la imagen como su fuente. Use esta ruta cuando las imágenes se carguen a través de WordPress Media o se encuentren en una carpeta diferente a la del archivo HTML que está editando.
Una sintaxis de ruta absoluta tiene la siguiente estructura:
img src=”URL de su sitio web/nombre de carpeta/nombre-de-archivo-de-imagen.jpg”
Para este tutorial, usaremos la ruta absoluta. En este caso, el ejemplo img origen por la imagen que subimos en el imágenes carpeta se vería así:
img src=”https://yoursite.com/wp-admin/images/website-logo.png”
Si carga la imagen a través de medios de WordPress, siga estas instrucciones para encontrar la fuente de la imagen:
- Desde el Tablero de WordPress, navegar a Medios de comunicación – Biblioteca.
- Haga clic en la imagen que planea agregar, luego desplace la barra lateral hasta que encuentre el campo URL del archivo. Presione el botón Copiar URL al Portapapeles y simplemente péguelo como la fuente de la imagen.
4. Establecer ancho y alto
Los atributos de ancho y alto especifican el tamaño de la imagen, generalmente en píxeles. Es fundamental establecer siempre el ancho y el alto de la imagen. Determinan cuánto espacio se necesita para la imagen cuando el navegador carga la página web.
Si no están configurados, el navegador no podrá determinar el tamaño de la imagen y utilizará sus medidas originales. Esto puede cambiar el diseño de la página web y causar errores cuando el navegador carga la imagen.
A continuación se muestra la sintaxis del atributo ancho con una medida de ejemplo:
ancho de imagen = “50px”
Mientras que la sintaxis del atributo de longitud se ve así:
longitud de imagen = “50px”
Cambie 50px al tamaño deseado, dependiendo de dónde planee colocar la imagen y el diseño de la página web.
5. Agregue un atributo Alt
el html alternativa El atributo le permite agregar texto o información alternativos a la imagen. Un texto descriptivo es fundamental cuando la imagen no carga debido a un error o conexión lenta. También ayuda a los lectores de pantalla a explicar la imagen a los visitantes con discapacidad visual.
Aparte de eso, el texto alternativo permite que los motores de búsqueda comprendan de qué se trata la imagen durante el proceso de rastreo. Aumenta la posibilidad de que las imágenes aparezcan en los resultados de búsqueda de imágenes y ayuda a que su página web se clasifique mejor.
Recuerde ser específico al describir la imagen y proporcionarle contexto. También es importante insertar palabras clave objetivo si es posible.
Un alternativa la sintaxis del atributo se ve así:
img alt=”insertar texto aquí”
6. Guardar cambios
Una vez que haya ingresado todos los atributos e información esenciales en el archivo HTML, el código de la imagen se verá así:
img src=”https://yoursite.com/wp-admin/images/website-logo.png” height=”50px” width=”50px” alt=”logotipo del sitio”
Verifique el código una vez más antes de hacer clic en el botón Actualizar archivo para guardar los cambios. Luego, vuelva a cargar el sitio web para ver si los cambios son exitosos.
Paso de bonificación: agregue un enlace a la imagen
Al cargar fotos e imágenes originales en su sitio web, es importante agregar URL personalizadas o enlaces a ellas. No desea que otros sitios web tomen y usen las imágenes sin permiso, crédito o vínculos de retroceso.
Si aún no ha implementado medidas para evitar que las personas enlacen sus imágenes, es posible rastrear los archivos incrustados a través de la URL de la imagen. Pegue la URL en Búsqueda de imágenes de Googley mostrará una lista de sitios que usan esa misma imagen.
Simplemente envuelva el elemento de anclaje en el código de la imagen si desea vincular una imagen en HTML. Un ancla es un texto que marca el inicio y el final de un enlace de hipertexto. Incluye la etiqueta de apertura a y la etiqueta de cierre /a.
Un código de imagen con una sintaxis de etiqueta de anclaje se verá así:
a href=”www.yourwebsite.com/image-name.html”img src=”file-name.jpg” height=”50px” width=”50px” alt=”about image”/a
Sin embargo, si carga imágenes a través de WordPress Media, no es necesario crear una URL personalizada. Una URL de imagen se genera automáticamente cuando se carga el archivo. Los sistemas de administración de contenido y los temas de los sitios web generalmente brindan opciones fijas para insertar imágenes, lo que puede no satisfacer las necesidades de todos.
- Cargue el archivo de imagen en una carpeta en el sitio public_html directorio a través del administrador de archivos proporcionado por el servidor web o WordPress Media. Acceda al archivo HTML donde desea insertar la imagen y agregue el imagen etiqueta. Incluya la img origen atributo para definir la fuente de la imagen. Agregue el ancho y altura atributos para definir cómo el navegador debe mostrar la imagen. Inserte el alternativa atributo para describir la imagen. Guarde los cambios.
También puede ser necesario agregar una URL de imagen personalizada para los archivos. Sin embargo, los enlaces ya se generan automáticamente para las imágenes multimedia de WordPress.
Vaya y pruebe los métodos descritos en este tutorial y, si tiene más preguntas, déjelas en la sección de comentarios a continuación.
Tabla de contenidos
