Como inserir texto em uma imagem com HTML

Passo 1

Abra seu editor de HTML. Selecione "Arquivo" e "Novo" na barra de navegação do programa. Um documento HTML em branco aparecerá na tela.

Passo 2

Codifique uma nova tabela. Defina as propriedades, borda, espaço de células e cellpadding como 0. Isso permitirá que as células na tabela fiquem alinhadas com a imagem.

Exemplo:

Passo 3

Insira um conjunto de dados e rótulos para linhas na tabela. Ajuste a altura e a largura dos dados na tabela para as dimensões da sua imagem.

Exemplo:

Passo 4

Adicione background = "ImageLink" no código de dados da tabela. Altere "imageLink" para o URL da sua imagem e mantenha as aspas. Isso define a imagem como plano de fundo da tabela.

Exemplo:

Passo 5

Escolha um lugar para o texto aparecer. O texto será exibido na parte inferior, superior ou central da imagem. Adicione valign = "bottom" ao código de dados da tabela para estabelecer o posicionamento. "Valign" refere-se ao alinhamento vertical. Altere "bottom" para "middle" ou "top", com base na sua localização pretendida.

Exemplo:

Passo 6

Escreva o texto que você deseja entre as tags de abertura e fechamento dos dados na tabela.

Exemplo:

Texto

Passo 7

Salve o documento HTML Visualize a página no navegador antes de enviá-lo ao seu servidor.