Cómo insertar texto en una imagen con HTML (En 7 Pasos)
No necesariamente necesitas Photoshop para poner texto en tus fotos de vacaciones para la web. Con HTML, puedes escribir texto a la derecha en la parte superior de las mismas fotos. Esto te permite modificar el texto cada vez que quieras. Otra ventaja es que no estropearás las fotos, imprimiendo texto permanentemente en ellas.
Paso 1
Abre tu editor de HTML. Selecciona "Archivo" y "Nuevo" en la barra de navegación del programa. Un documento HTML en blanco aparecerá en la pantalla.
Paso 2
Codifica una nueva tabla. Establece las propiedades, border, cellspacing y cellpadding a 0. Esto permitirá que las celdas de la tabla queden al ras con la imagen.
Ejemplo:
Paso 3
Introduce un conjunto de datos y etiquetas para filas de la tabla. Ajusta la altura y la anchura de los datos de la tabla a las dimensiones de tu imagen.
Ejemplo:
Paso 4
Añade background="ImageLink" en el código de los datos de la tabla. Cambia "imageLink" a la URL de tu imagen y manten las comillas. Esto establece la imagen como fondo para la tabla.
Ejemplo:
Paso 5
Elige un lugar para que el texto aparezca. El texto se mostrará en la parte inferior, superior o en el centro de la imagen. Añade valign="bottom" al código de los datos de la tabla para establecer el posicionamiento. "Valign" se refiere a la alineación vertical. Cambia "bottom" a "middle" o "top", en base a tu ubicación prevista.
Ejemplo:
Paso 6
Escribe el texto que desees entre las etiquetas de apertura y cierre de los datos de la tabla.
Ejemplo:
| Texto |
Paso 7
Guarda el documento HTML. Haz una vista previa de la página en el navegador web antes de subirla a tu servidor.
