Como Definir um Plano de Fundo em HTML

Se você quer adicionar uma imagem a uma página web, será preciso fazê-lo em HTML. Para definir uma imagem como plano de fundo em um site, então você vai usar HTML e CSS. HTML (Hypertext Markup Language - Linguagem de marcação de hipertexto) é o código que diz ao navegador de internet como uma página web deve ser exibida. ^{[1]XFonte de pesquisa} O CSS (Cascading Style Sheets - Folhas de estilo em cascata) é usado para alterar a aparência e o layout de uma página na internet. ^{[2]XFonte de pesquisa} Este artigo vai ensiná-lo a usar uma imagem como plano de fundo em uma página web.

Parte 1

Parte 1 de 4:

Configurando os arquivos

Baixe em PDF

1
Crie uma pasta para armazenar seu arquivo HTML e a imagem de fundo. No seu computador, crie uma pasta e salve-a em um local de fácil acesso.
- Dê o nome que quiser a ela. Ao trabalhar com HTML, entretanto, é sempre bom criar o hábito de dar nomes curtos às pastas e aos arquivos, usando palavras únicas que sejam facilmente identificadas.
2
Salve a imagem que deseja usar como plano de fundo na pasta do HTML.
- Se não estiver preocupado em garantir que o website seja exibido corretamente em dispositivos mais antigos com uma conexão de internet mais lenta, então não problema em usar uma imagem de resolução maior. Imagens simples com luz e padrões repetitivos são boas escolhas para se usar de plano de fundo, pois elas permitem que o texto na página permaneça legível.
Dica: Caso não tenha uma imagem, baixe uma gratuitamente na internet. Depois de baixá-la, mova-a para a pasta do HTML criada.
3
Abra um editor de texto ou editor HTML. É possível criar um arquivo HTML usando um aplicativo básico de edição de texto, como o "Bloco de notas" (Windows) ou "TextEdit" (Mac). Você também pode usar um editor WYSIWYG (What You See Is What You Get - O que você vê é o que você obtém).
- Ao usar um editor WYSIWYG, clique na opção de abrir um arquivo HTML no início da página.
No Windows, clique em Salvar como no menu suspenso "Arquivo". No Mac, clique em Salvar no menu suspenso.
Digite um nome para o documento HTML Geralmente, a primeira página do website tem o nome de "index" (índice), mas pode ser diferente. Digite o nome desejado no campo de texto "Nome do arquivo".
7
Altere o tipo de arquivo para um documento HTML. Se estiver usando um editor WYSIWYG, basta apenas salvar o arquivo. No "Bloco de notas" ou "TextEdit", faça o seguinte para salvar o documento no formato HTML:
- Bloco de notas: substitua a extensão ".txt" no final do nome do arquivo por ".html".
- TextEdit: use o menu suspenso ao lado de "Formato do arquivo" para selecionar Página web (.html).
8
Clique em Salvar no canto inferior direito da janela. Fazê-lo vai salvar o arquivo como um documento HTML.
Publicidade

Parte 2

Parte 2 de 4:

Programando o arquivo HTML

Baixe em PDF

O código HTML é formado por tags de abertura e encerramento. Toda página HTML bem-desenvolvida deve começar com <!DOCTYPE html>. Esse código informa o navegador de internet que o arquivo é um documento HTML.
Essa é a tag de abertura do código HTML. Ela informa o navegador onde o código HTML começa.
Essa é a tag de abertura do cabeçalho do documento HTML. O cabeçalho contém metadados que não são exibidos em um navegador de internet. Entre eles, está o título da página e o CSS, que formata o visual do código HTML.
Esse é o código HTML que contém o título da sua página web. A tag "<title>" é a tag de abertura desse conteúdo. Já a tag "</title>" deve ser digitada ao final do título para encerrar o código. Substitua o texto "Título da página" pelo nome desejado à sua página web. Esse texto vai aparecer na aba do navegador de internet, no topo da página.
Essa é a tag de encerramento do cabeçalho do documento HTML. Se quiser incluir qualquer outra informação ou folhas de estilo ao documento HTML, faça-o depois da tag de abertura "<head>" e antes da tag de encerramento "</head>".
Essa é a tag de abertura do corpo do documento HTML. O corpo é o local onde todos os elementos visuais da página são inseridos. Entre eles: texto, imagens, botões e outros.
7
Digite <div style="background-image:url('[url da imagem]');"> na próxima linha. Essa é a tag usada para adicionar uma imagem de fundo na página web. Substitua "[url da imagem]" pelo endereço URL real da imagem q você quer adicionar. Esse pode ser o local da imagem que você enviou a um servidor online, ou então o endereço local dela no seu computador. ^{[3]XFonte de pesquisa}
- Como alternativa, use o CSS para definir uma imagem de fundo.
- Ao usar um nome de arquivo sem o caminho completo ou o URL (por exemplo: background-image: url("imagem.png");), o navegador de internet vai procurar na pasta da página web por uma imagem com esse nome. Se o arquivo estiver em outra pasta no seu sistema de arquivo, será preciso especificar o caminho completo dele.
Se quiser incluir outros elementos HTML na página, como texto, imagens, vídeos, links, botões e outros, faça-o na seção "Body" do documento HTML.
Essa é a tag de encerramento do corpo do documento HTML. Após terminar de incluir todos os elementos HTML no documento, digite essa tag na última linha.
Essa é a tag de encerramento de todo o documento HTML. Digite essa tag na última linha.
11
Salve o arquivo HTML. Depois que terminar de editá-lo, clique em Arquivo e depois em Salvar para salvar todo o seu trabalho. Agora, seu documento HTML completo deverá ficar mais ou menos assim:
Publicidade

Parte 3

Parte 3 de 4:

Usando o CSS

Baixe em PDF

Faça-o usando os passos da Parte 2. O documento HTML deve conter as tags de abertura de encerramento do HTML, do cabeçalho e do corpo. Não é preciso incluir a tag de imagem de fundo. Essa parte ensina a definir uma imagem de fundo usando CSS em vez de HTML.
2
Digite <style> no cabeçalho do documento HTML. Essa é a tag de abertura das folhas de estilo em cascata (CSS). Ela deve ser inserida depois da tag "<head>" e antes da tag "</head>".
- Como alternativa, crie o CSS em um documento separado e vincule-o ao documento HTML.
Esse é o código de abertura do CSS que estiliza o corpo do documento HTML.
4
Digite background-image: url('[url da imagem]'); na próxima linha. Essa linha especifica a imagem de fundo usada. Substitua texto no"[url da imagem]" pelo endereço URL real da imagem que você quer usar.
- Ao usar um nome de arquivo sem o caminho completo ou o URL (por exemplo: background-image: url("imagem.png");), o navegador de internet vai procurar na pasta da página web por uma imagem com esse nome. Se o arquivo estiver em outra pasta no seu sistema de arquivo, será preciso especificar o caminho completo dele.
. Essa linha informa o navegador de internet a exibir a imagem uma vez em vez de repeti-la.
. Essa linha informa o navegador de internet a cobrir todo o plano de fundo usando a imagem.
Se quiser incluir qualquer outra linha CSS que afete o corpo do documento HTML, faça-o agora. Digite "}" na última linha da seção "Body" do CSS para encerrar o corpo do documento.
Após incluir todos os elementos CSS desejados, digite "</style>" no final do documento. Essa é a tag de encerramento do CSS.
9
Salve o arquivo HTML. Depois que terminar de editá-lo, clique em Arquivo e depois em Salvar para salvar todo o seu trabalho. Agora, seu documento HTML completo deverá ficar mais ou menos assim:
Publicidade

Parte 4

Parte 4 de 4:

Conferindo o arquivo HTML

Baixe em PDF

Em seguida, um menu pop-up com algumas opções será aberto no lado direito.
Fazê-lo vai exibir uma lista de aplicativos que podem abrir o arquivo HTML.
Arquivos HTML podem ser abertos em qualquer navegador.
4
Confira o código do arquivo HTML. Analise ele todo e veja se está tudo ok.
- Quando o navegador de internet for aberto, se você vir o código HTML em vez de a imagem de fundo, então o arquivo HTML pode estar salvo em um formato .txt em vez de .html. Neste caso, tente editar o arquivo HTML em um editor de texto diferente.
Observação: Quando o navegador de internet é aberto, caso você não veja a imagem, verifique se o nome e endereço dela foram digitados corretamente na janela do editor de texto do arquivo index.html.
Na janela do editor de texto, mova o cursor entre as tags <body> </body>, e digite Olá, mundo!. Abra o navegador de internet novamente e veja se essa mensagem é exibida no topo da imagem de fundo.
Publicidade