Skip to content

Criar uma nova página da web usando o bloco de notas

23 de abril de 2021

O Bloco de notas do Windows é um programa básico de processamento de texto que você pode usar para escrever suas páginas da web. As páginas da Web são apenas texto e você pode usar qualquer programa de processamento de texto para escrever HTML.

Salve a página como HTML

Ao criar uma página, salve o arquivo antes de avançar muito. Use todas as letras minúsculas e sem espaços ou caracteres especiais no nome do arquivo.

  1. No Bloco de Notas, clique em Arquivo e depois Salvar como.
  2. Vá para a pasta onde você salvou os arquivos do seu site.
  3. Mudar o Salvar como tipo menu suspenso para Todos os arquivos (*.*).
  4. Nomeie o arquivo, usando uma extensão de .htm ou .html.

Comece a escrever a página da web

Desenhar código HTML em Notepad.exe

Inicie seu documento HTML5 do bloco de notas com o DOCTYPE. Esta string informa aos navegadores que tipo de HTML esperar. O doctype declaração não é uma etiqueta. Ele informa ao computador que um documento HTML5 está chegando. Ele vai no topo de cada página HTML5 e tem o seguinte formato:

Depois de especificar o doctype, comece seu HTML. Digite a tag inicial e a tag final e deixe algum espaço para o conteúdo do corpo da página da web. Seu documento de bloco de notas deve ter a seguinte aparência:

Crie um cabeçalho para sua página da web

Criação de um cabeçalho em HTML

O cabeçalho de um documento HTML é onde as informações básicas sobre sua página da web são armazenadas – coisas como o título da página e possivelmente metatags para otimização de mecanismo de pesquisa. Para criar uma seção head, adicione as tags head em seu documento de texto HTML do Notepad entre as tags html.

Tal como acontece com as tags html, deixe algum espaço entre elas para que você tenha espaço para adicionar as informações do cabeçalho.

Adicionar um título de página na seção principal

Adicionando um título de página em HTML

O título da sua página da web é o texto exibido na janela do navegador. É também o que está escrito nos marcadores e favoritos quando alguém salva o seu site. Armazene o texto do título entre as tags de título. Ele não aparecerá na própria página da web, apenas na parte superior do navegador. Esta página de exemplo é intitulada “McKinley, Shasta e outros animais de estimação.” McKinley, Shasta e outros animais de estimação

Não importa o tamanho do título ou se ele abrange várias linhas em seu HTML, mas títulos mais curtos são mais fáceis de ler e alguns navegadores cortam os longos na janela do navegador.

O corpo principal da sua página da web

Criação do corpo de um documento HTML

O corpo da sua página da web é armazenado nas tags do corpo. Deve vir depois das tags head, mas antes da tag html final. Esta área é onde você coloca o texto, títulos, subtítulos, imagens e gráficos, links e todos os outros conteúdos. Pode ser o tempo que você quiser. Deixe um espaço extra entre as tags de corpo inicial e final. Este mesmo formato pode ser seguido para escrever sua página da web no Bloco de notas.

Criação de uma pasta de imagens

Criação de uma nova pasta chamada Imagens no Windows

Antes de adicionar conteúdo ao corpo do seu documento HTML, configure seus diretórios para que você tenha uma pasta para imagens.

  1. Abra o Meus documentos janela.
  2. Abra a pasta onde você armazena seus arquivos da web.
  3. Clique Arquivo > Novo > Pasta.
  4. Nomeie a pasta imagens.

Armazene todas as imagens do seu site na pasta de imagens para que possa localizá-las posteriormente. Isso torna mais fácil carregá-los quando você precisar.

Usando o Notepad para HTML

Nos primórdios da web, ferramentas como o Bloco de notas eram a ferramenta padrão para escrever novas páginas da web. No entanto, dada a complexidade da maioria das páginas modernas, além da interação de HTML com CSS, quase ninguém usa mais o Notepad – eles usam ferramentas gráficas como Adobe Dreamweaver ou contam com plataformas de codificação como Visual Studio Code. Um ambiente de texto que oferece fiapos e correção de código é preferível a uma tela em branco e indiferenciada, portanto, embora o Bloco de notas funcione com dificuldade, é muito menos ideal para edição de HTML do que editores de codificação ou aplicativos gráficos de webdesign.