Cómo insertar texto en una imagen con HTML

Escrito por scott stanchak | Traducido por daniel gómez villegas
Cómo insertar texto en una imagen con HTML

Puedes añadir texto a las imágenes sin software de edición de fotos.

http image by chrisharvey from Fotolia.com

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.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Necesitarás

  • Editor de HTML

Lista completaMinimizar

Instrucciones

  1. 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.

  2. 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: <table border="0" cellpadding="0" cellspacing="0"> </table>

  3. 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: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="500" height="500"></td> </tr> </table>

  4. 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: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="500" height="500" background="imagelink"></td> </tr> </table>

  5. 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: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="500" height="500" background="imagelink" valign="bottom"></td> </tr> </table>

  6. 6

    Escribe el texto que desees entre las etiquetas de apertura y cierre de los datos de la tabla. Ejemplo: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="500" height="500" background="imagelink" valign="bottom"> <font size="3" color="#FFFFFF">Texto</font> </td> </tr> </table>

  7. 7

    Guarda el documento HTML. Haz una vista previa de la página en el navegador web antes de subirla a tu servidor.

No dejes de leer...

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2015 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media