Página da Web Bare Bones: 10 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:38

Hoje vamos criar uma página da web muito simples e básica do zero. Falaremos sobre elementos HTML, estilização de sua página da web (cores, fontes, alinhamento, etc.) e, finalmente, como inserir uma imagem em sua página da web!

Ao final deste instrutível, você terá as habilidades básicas para criar uma página da web do zero e descobrirá que a codificação não é tão difícil quanto parece!

Etapa 1: usando o bloco de notas

Vamos usar o Bloco de notas no Windows para criar nossa primeira página da web. Embora qualquer editor de texto sirva, o bloco de notas vem pré-instalado em máquinas Windows, portanto, é um ótimo ponto de partida.

Para abrir o bloco de notas, vá até a barra de pesquisa no canto inferior esquerdo da tela e digite "Bloco de notas". Em seguida, selecione o aplicativo "Bloco de notas" que aparece nos resultados da pesquisa. Uma nova janela deve ser aberta.

Etapa 2: Adicionando a árvore de documentos HTML básicos

Todas as páginas da web devem seguir uma estrutura esquelética padrão para que o seu navegador (Chrome, Firefox, Edge, Internet Explorer, Safari …) processe e exiba sua página da web.

Isso é chamado de árvore de documentos html. No Bloco de notas, digite os "elementos" ou "tags" html conforme exibidos na captura de tela. Sinta-se à vontade para copiar e colar também:

Etapa 3: Salvar como uma página.html

Agora que temos nossa estrutura html básica no Bloco de Notas, vamos salvá-la para não perdermos nenhum trabalho e para que possamos ver nossas mudanças à medida que avançamos no Instructable.

1. Selecione 'Arquivo'> 'Salvar como…' (Captura de tela 1)
2. Altere o tipo de arquivo para 'Todos os arquivos' (captura de tela 2)
3. Dê ao seu arquivo um nome de sua escolha. Certifique-se de anotar onde você está salvando o documento em seu computador para que possa abri-lo mais tarde. NOTA: A parte mais importante de salvar este arquivo é anexar ".html" ao final do nome do arquivo. Isso permitirá que seu computador o reconheça como uma página da web. Portanto, se você deseja nomear seu arquivo "my_webpage", certifique-se de adicionar.html ao final, por exemplo, "my_webpage.html"

Etapa 4: Adicionando um título à sua página da web

Portanto, temos a estrutura html básica necessária para que os navegadores interpretem e exibam nossa página da web, mas não temos nenhum conteúdo. Vamos mudar isso!

A primeira coisa que devemos fazer é atribuir um título à nossa página web. Quase todas as páginas da web têm um título. Isso é o que é exibido na guia do seu navegador (veja a captura de tela). Vou dar à minha página o título "Site da Taylor". Para fazer isso, precisamos adicionar um elemento 'título'.

Site da Taylor's

Neste ponto, você notará que cada tag possui uma tag de "abertura" e uma tag de "fechamento". Tal como

e.

Isso é para discernir onde o título começa e onde termina. Quase todas as tags html seguem isso, no entanto, há algumas exceções.

Etapa 5: Adicionando conteúdo à sua página da web

Bem, temos um título para nossa página da web, mas ainda não temos nenhum conteúdo real para ela. Vamos adicionar um pouco de talento!

Adicionamos um título à nossa página da web usando um elemento 'título'. Vamos dar a nossa página da web um cabeçalho grande e chamativo usando um elemento 'h1' que é um elemento de cabeçalho.

Site da Taylor's

Bem-vindo ao meu site

Etapa 6: Vendo nossas mudanças até agora

Temos um título, temos algum conteúdo, vamos dar uma olhada em nossa página da web para saber como está indo até agora.

1. Salve seu arquivo no bloco de notas
2. Vá para onde você salvou seu arquivo e clique duas vezes nele. Ele deve abrir automaticamente em seu navegador padrão. Parece bom!

Etapa 7: Adicionar uma tag de parágrafo

Temos um título, um cabeçalho, agora vamos adicionar um parágrafo com mais algum texto. O nome do elemento para um parágrafo é 'p'. Você pode ver seu uso abaixo:

Site da Taylor's

Bem-vindo ao meu site

Hoje vamos aprender como criar esta página web muito simples!

Nota: Você pode ver suas alterações a qualquer momento, salvando o bloco de notas e abrindo o arquivo.

Etapa 8: dê um pouco de cor

Nossa página da Web está funcionando bem, mas é bem simples. Vamos dar um pouco de cor à nossa tag de parágrafo!

Podemos colorir diferentes elementos adicionando um atributo 'style' à tag 'p' conforme detalhado abaixo:

Site da Taylor's

Bem-vindo ao meu site

Hoje vamos aprender como criar esta página web muito simples!

Etapa 9: Adicionar uma imagem

O que é um site sem fotos? Vamos adicionar uma foto ao nosso site!

O primeiro passo é encontrar uma imagem que você goste. Usei imagens do Google para pesquisar um golden retriever. Puxe a imagem para cima e verifique se o URL termina em.jpg,.png,.gif,-j.webp

Depois de escolher sua imagem, precisamos adicioná-la à página html usando uma tag 'img'. Minha imagem é:

Adicione-o à sua página usando uma tag 'img' com um atributo 'src':

Site da Taylor's

Bem-vindo ao meu site

Hoje vamos aprender como criar esta página web muito simples!

Etapa 10: Visualizando o Produto Final

Salve o arquivo do bloco de notas e abra o produto final. Você deve ver sua página da web!