Como Criar Uma Página Web Simples com o Bloco de Notas

PDF download Baixe em PDF
Coescrito por Equipe wikiHow

PDF download Baixe em PDF

Este artigo vai ensiná-lo a criar uma página web simples à base de texto usando o aplicativo "Bloco de notas" em um computador Windows. A linguagem usada é a HTML.

Parte 1
Parte 1 de 4:

Criando um documento HTML

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/77\/533547-1.jpg\/v4-460px-533547-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/77\/533547-1.jpg\/v4-728px-533547-1.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para fazê-lo, clique no logo do Windows localizado no canto inferior esquerdo da tela. Em seguida, um pequeno menu vai aparecer.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0c\/533547-2.jpg\/v4-460px-533547-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/533547-2.jpg\/v4-728px-533547-2.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Em seguida, você verá uma lista de itens correspondentes perto do topo do menu "Iniciar".
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ee\/533547-3.jpg\/v4-460px-533547-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ee\/533547-3.jpg\/v4-728px-533547-3.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ele tem um ícone de um caderno e está no topo da lista de resultados. Em seguida, o "Bloco de notas" será aberto.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3a\/533547-4.jpg\/v4-460px-533547-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3a\/533547-4.jpg\/v4-728px-533547-4.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Em seguida, um menu suspenso será exibido.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9b\/533547-5.jpg\/v4-460px-533547-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9b\/533547-5.jpg\/v4-728px-533547-5.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Em seguida, a janela "Salvar como" será aberta.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cc\/533547-6.jpg\/v4-460px-533547-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cc\/533547-6.jpg\/v4-728px-533547-6.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Essa opção está perto do final da janela, e deverá aparecer rotulada como "Documentos de texto (*.txt)". Fazê-lo vai abrir um menu suspenso.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3c\/533547-7.jpg\/v4-460px-533547-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3c\/533547-7.jpg\/v4-728px-533547-7.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Agora, você poderá salvar o arquivo como um documento HTML.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/533547-8.jpg\/v4-460px-533547-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/533547-8.jpg\/v4-728px-533547-8.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    No lado esquerdo da janela, clique no nome da pasta na qual você deseja salvar o documento.
    • Por exemplo, para salvá-lo na área de trabalho, desça a barra lateral e clique em Área de trabalho .
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/533547-9.jpg\/v4-460px-533547-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/533547-9.jpg\/v4-728px-533547-9.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Clique na caixa de texto "Nome do arquivo" e digite o nome desejado juntamente com a extensão .html .
    • Por exemplo, para dar o nome à sua página de "olá", digite olá.html .
  10. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6d\/533547-10.jpg\/v4-460px-533547-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6d\/533547-10.jpg\/v4-728px-533547-10.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Em seguida, o documento do "Bloco de notas" será salvo em HTML. Neste ponto, você pode seguir com a configuração da estrutura inicial da página web.
    • Caso o "Bloco de notas" feche acidentalmente ou você precise abrir o documento mais tarde, clique no arquivo HTML com o botão direito e selecione Editar no menu suspenso resultante.
    Publicidade
Parte 2
Parte 2 de 4:

Configurando a página web

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/96\/533547-11.jpg\/v4-460px-533547-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/96\/533547-11.jpg\/v4-728px-533547-11.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    A primeira tag que precisa ser adicionada informa o "Bloco de notas" que o resto do documento usará a linguagem HTML. Para fazê-lo, digite o seguinte no seu documento: 
     <!DOCTYPE html> 
 < 
 html 
 >
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/30\/533547-12.jpg\/v4-460px-533547-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/30\/533547-12.jpg\/v4-728px-533547-12.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Essas tags marcam o início e final do título da página, criadas no próximo passo. Por ora, digite apenas <head> depois da tag "<html>", pressione a tecla ↵ Enter duas vezes para deixar um espaço e digite </head> .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1c\/533547-13.jpg\/v4-460px-533547-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1c\/533547-13.jpg\/v4-728px-533547-13.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    O título, que deve ser inserido entre as tags "<title></title>", precisa ser inserido entre as tags "head". Ele dita o nome do website, exibido na aba do navegador de internet. Para adicionar um cabeçalho ao nome do website, como "Meu website", por exemplo, digite o seguinte: 
     < 
 title 
 > 
Meu website </ 
 title 
 >
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/90\/533547-14.jpg\/v4-460px-533547-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/90\/533547-14.jpg\/v4-728px-533547-14.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":409,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Todo o código da página web deve ser inserido entre essas tags, que por sua vez devem ser inseridas abaixo da tag "</title>": 
     < 
 body 
 > 
 </ 
 body 
 >
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/533547-15.jpg\/v4-460px-533547-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/533547-15.jpg\/v4-728px-533547-15.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    A última tag do documento será a do HTML, representando o final da página. Digite </html> abaixo da tag "</body>" para encerrar a tag HTML.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/533547-16.jpg\/v4-460px-533547-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/533547-16.jpg\/v4-728px-533547-16.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Neste ponto, o documento deverá estar mais ou menos assim: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Meu website </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8a\/533547-17.jpg\/v4-460px-533547-17.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8a\/533547-17.jpg\/v4-728px-533547-17.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para fazê-lo, utilize o atalho Ctrl + S . Agora, você pode continuar adicionando os elementos da página, como parágrafos e cabeçalhos, ao documento.
    Publicidade
Parte 3
Parte 3 de 4:

Adicionando elementos de uma página web

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e7\/533547-18.jpg\/v4-460px-533547-18.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e7\/533547-18.jpg\/v4-728px-533547-18.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":409,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Qualquer um deles - mesmo cabeçalho ou parágrafo - precisa ser digitado depois da tag "<body>" e antes da tag "</body>".
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2f\/533547-19.jpg\/v4-460px-533547-19.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2f\/533547-19.jpg\/v4-728px-533547-19.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Digite <h1></h1> entre as tags "body", depois digite o texto desejado entre as tags "<h1></h1>". Por exemplo, para criar uma página com o cabeçalho "Bem-vindo", digite o seguinte: 
     < 
 h1 
 > 
Bem-vindo </ 
 h1 
 >
    • Você pode usar das tags "<h2></h2>" até "<h6></h6>" para criar cabeçalhos menores ou maiores.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b1\/533547-20.jpg\/v4-460px-533547-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b1\/533547-20.jpg\/v4-728px-533547-20.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":408,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Digite as tags "<p></p>", e, entre elas, o texto desejado. Ao final, o código deverá ficar mais ou menos assim: 
     < 
 p 
 > 
Este é o meu website. Vote em mim para presidente de sala! </ 
 p 
 >
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1c\/533547-21.jpg\/v4-460px-533547-21.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1c\/533547-21.jpg\/v4-728px-533547-21.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":409,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Caso queira espaço extra entre um parágrafo ou cabeçalho, digite <br> após a tag de encerramento da linha. Por exemplo, para criar uma quebra de linha após um parágrafo, o código deverá ficar mais ou menos assim: 
     < 
 p 
 > 
Este é o meu website. Vote em mim para presidente de sala! </ 
 p 
 >< 
 br 
 > 
 < 
 p 
 > 
Eu também gosto de batatas. </ 
 p 
 >
    • Você pode usar uma tag "<br>" adicional depois da primeira para adicionar outra quebra de linha, criando, assim, um espaço entre o primeiro e segundo parágrafo.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/58\/533547-22.jpg\/v4-460px-533547-22.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/58\/533547-22.jpg\/v4-728px-533547-22.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":409,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    É possível aplicar o efeito negrito, itálico e sublinhado (bem como texto sobrescrito e subscrito) em qualquer palavra, frase ou bloco de texto, contanto que eles estejam entre as tags apropriadas: 
     < 
 b 
 > 
Texto negrito </ 
 b 
 > 
 < 
 i 
 > 
Texto itálico </ 
 i 
 > 
 < 
 u 
 > 
Texto sublinhado </ 
 u 
 > 
 < 
 sup 
 > 
Texto sobrescrito </ 
 sup 
 > 
 < 
 sub 
 > 
Texto subscrito </ 
 sub 
 >
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fa\/533547-23.jpg\/v4-460px-533547-23.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fa\/533547-23.jpg\/v4-728px-533547-23.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Embora os elementos da página possam variar, o documento deverá estar mais ou menos assim: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Meu website </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Bem-vindo! </ 
 h1 
 > 
 < 
 p 
 > 
Este é o meu website. Espero que você goste! </ 
 p 
 > 
 < 
 p 
 >< 
 b 
 > 
Este texto está em negrito para dar ênfase. </ 
 b 
 ></ 
 p 
 > 
 < 
 p 
 >< 
 i 
 > 
O texto em itálico é um pouco estranho. </ 
 i 
 ></ 
 p 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Publicidade
Parte 4
Parte 4 de 4:

Testando a página web

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4e\/533547-24.jpg\/v4-460px-533547-24.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4e\/533547-24.jpg\/v4-728px-533547-24.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para fazê-lo, utilize o atalho Ctrl + S . Fazê-lo garante que o documento HTML exiba a versão mais recente da página ao abri-la.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c0\/533547-25.jpg\/v4-460px-533547-25.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c0\/533547-25.jpg\/v4-728px-533547-25.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Em seguida, um menu suspenso vai aparecer.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/80\/533547-26.jpg\/v4-460px-533547-26.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/80\/533547-26.jpg\/v4-728px-533547-26.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Fazê-lo vai abrir um menu pop-up.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/41\/533547-27.jpg\/v4-460px-533547-27.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/41\/533547-27.jpg\/v4-728px-533547-27.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Todos os navegadores de internet são capazes de abrir documento HTML, então escolha a opção do seu agrado no menu pop-up. Em seguida, a página será aberta no navegador selecionado.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f4\/533547-28.jpg\/v4-460px-533547-28.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f4\/533547-28.jpg\/v4-728px-533547-28.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Se a formatação estiver boa, você poderá fechar o "Bloco de notas".
    • Caso queira continuar editando o documento HTML, voltei ao "Bloco de notas" e faça as edições necessárias, lembrando de salvar o documento arquivo depois.
    Publicidade

Dicas

Publicidade

WikiHows Relacionados

Como
Criar uma Página Simples da Web com HTML
Como
Redirecionar um URL
Como
Alinhar Algo em HTML
Como
Inserir Uma Linha em HTML
Como
Criar um Link de Imagem em HTML
Como
Verificar a Versão do PHP
Como
Adicionar Comentários em um Código HTML
Como
Adicionar um Hiperlink com HTML
Como
Criar um Plano de Fundo Transparente Usando o Pixlr
Como
Fazer um Texto Piscar com HTML
Como
Esconder um Link em HTML
Como
Aprender HTML
Publicidade

Sobre este guia wikiHow

Em outras línguas
Esta página foi acessada 95 837 vezes.

Este artigo foi útil?

Publicidade