Construindo seu próprio site para iniciantes: 5 etapas

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

Se você já sonhou em ser um programador de computador ou já usou um site, vamos enfrentá-lo, quase todos nós, a tecnologia da informação se tornou a espinha dorsal dos negócios. Embora a programação possa parecer um pouco assustadora no início, meu objetivo é ensinar a você os conceitos básicos de design da web para que, após este tutorial, você seja capaz de fazer sua própria página da web. Com isso fora do caminho, vamos lá!

Suprimentos

• Um PC Macintosh ou Windows (embora distros Linux também possam ser usadas, estou pulando-as por enquanto, pois esta é uma introdução para iniciantes).
• Editor de texto de sua escolha (Notepad no Windows, TextEdit no Mac) ou IDE de sua escolha. Na minha experiência, descobri que o Visual Studio Code funciona melhor para mim, então eu também recomendo conferir aqui: https://code.visualstudio.com/ para não mencionar que funciona em todas as plataformas de sistema operacional.

Etapa 1: Tags e um pouco de história

Depois de decidir sobre sua escolha de editor de texto ou IDE, vamos começar com o básico.

Acredite ou não, HTML ou HyperText Markup Language já existe há quase 30 anos e a cada ano vem mais e mais melhorias para a linguagem. Agora, você pode estar se perguntando, como um navegador interpreta o que colocar na tela? Isso é feito em algumas partes:

A formatação de documentos HTML é fácil. Você tem duas seções conhecidas como cabeça e corpo. O cabeçalho de um site contém um código que não é visível para o usuário. Isso é usado para vincular folhas de estilo e declarar outras partes necessárias para que o site seja exibido corretamente. Seguindo a cabeça, o corpo é como parece, o corpo do site. É aqui que você fala a sua voz e mostra ao público suas fantásticas habilidades em HTML! Agora não é tão fácil quanto apenas digitar texto no corpo e exibi-lo exatamente da maneira que você deseja, mas é quase tão fácil em certo sentido com o uso de coisas que chamamos de tags.

Aqui estão algumas das tags HTML básicas:

• título - usado para informar ao navegador qual é o título da página. Isso também é o que você vê quando olha a guia de uma página da web.
• h1, h2, h3, h4 - que são usados para diferentes tamanhos de cabeçalhos, com h1 sendo o maior e h4 sendo o menor. Abordarei mais sobre isso na próxima seção.
• p - parágrafo, usado para escrever parágrafos de texto. Como parágrafos em um papel.
• br - quebra, que insere uma quebra na linha do texto.
• a - usado para criar links para outras páginas, como um link clicável.
• img - usado para vincular uma imagem à página da web.
• ul, ol, li - listas não ordenadas, listas ordenadas e itens de lista.
• - usado para fazer comentários embutidos no código que não serão vistos pelo usuário final.

E aqui estão algumas tags CSS (visual):

• color - usado para atribuir uma cor específica a um elemento específico ou conjunto na página da web.
• font-size - usado para alterar o tamanho da fonte na página.
• background-color - usado para alterar a cor de fundo de um determinado elemento ou de toda a página.

Também anexei uma pequena folha de dicas para ajudá-lo se você se sentir um pouco perdido, mas não se preocupe, você vai pegar o jeito em pouco tempo! Além disso, www.w3schools.com também é um recurso fantástico para qualquer uma de suas perguntas sobre programação. Eles definitivamente me salvaram um tempo ou também.

Basicamente, a forma como o navegador lê o arquivo é fácil. Ele segue linha por linha e processa função por função. Os caracteres são usados para declarar uma tag como

e são usados para fechar a tag, como

. Isso é importante, caso contrário, o navegador não pára por onde parar. Entre o

e

tags, é onde você insere o que quiser!

Etapa 2: configuração do editor

Agora que cobrimos um pouco sobre os elementos básicos de um site HTML, vamos mergulhar e experimentar por nós mesmos. Para esta próxima etapa, estarei usando o Visual Studio Code para programar o site, mas o layout do código será o mesmo se você estiver mais confortável usando apenas o Notepad ou TextEdit.

No bloco de notas:

• Com o Bloco de notas, o programa é iniciado com um arquivo em branco, o que torna muito fácil começar. Isso também nos permitirá pular algumas etapas em comparação com o uso do VS Code. Vamos começar salvando o arquivo no formato correto.
• Clique em Arquivo> Salvar
• Digite um nome para o arquivo seguido de.html e, em Salvar como tipo, selecione todos os arquivos. Clique em salvar.

Dentro do código VS:

• A melhor maneira de você aproveitar todas as vantagens de todos os recursos do IDE é começar criando o arquivo e dizendo ao IDE que tipo de arquivo ele é. Isso pode ser feito da seguinte forma:
• Clique em Arquivo> Novo Arquivo
• Um arquivo em branco é aberto

• Em seguida, você vai querer começar salvando o arquivo, embora em branco, pois isso permitirá que o IDE seja capaz de entender que tipo de arquivo o produto final será. Ao salvar, certifique-se de incluir a extensão.html no final do nome do arquivo. Clique em salvar.

Etapa 3: Plantas

Depois de salvar com sucesso seu arquivo filename.html, vamos começar criando a estrutura para nossa página da web. Lembre-se de quais partes principais do arquivo precisamos declarar antes de começarmos a criar o resto da página HTML. Dica de profissional: ao iniciar a estrutura do site, a tag HTML! DOCTYPE informa ao navegador que o arquivo que está lendo é um arquivo html. Isso pode ser útil se você tiver diferentes tipos de código no mesmo arquivo e quiser alternar entre os interpretadores. Para o escopo deste Instructable, não tocaremos muito nisso, mas se depois deste Instructable você estiver curioso para verificar mais sobre o desenvolvimento de HTML, sinta-se à vontade para tentar. Inserirei a tag HTML! DOCTYPE na parte superior do arquivo para obter as melhores práticas. Lembre-se de abrir e fechar com.

É aqui que salvar o arquivo antes de iniciar a programação é útil, agora que o IDE sabe que está trabalhando com um arquivo HTML, ele usará o intellisense para terminar a expressão e oferecer sugestões para que você não esqueça acidentalmente de fechar uma tag. Observe que, para aqueles que estão usando o Bloco de notas, o intellisense não está disponível como no IDE. Começamos inserindo as tags head e body como segue: (veja a segunda imagem).

Agora que a configuração do documento foi concluída, podemos sair para as corridas e nos divertir um pouco!

Etapa 4: Código; Código; Código;

Podemos começar inserindo um título para nosso arquivo recém-criado. Digite o que você quiser. Lembre-se de que este é o nome que aparece na guia do navegador. Também vamos começar inserindo um título para nosso site. Lembre-se de como fazemos isso. Eu ouvi h1 / 2/3/4? Está correto!

Antes de continuarmos, acho útil abrir nosso arquivo em uma janela do navegador para que possamos ver em tempo real como nossas alterações estão refletindo no navegador. Você pode fazer isso clicando em Arquivo> Salvar para salvar o arquivo, navegando até a pasta na qual o arquivo HTML está salvo, para mim, esta é a área de trabalho e use o navegador de sua escolha para abrir o arquivo e você examinaria isso, aí está sua página da web! Nota: Eu pessoalmente uso o Safari como meu navegador de escolha no meu computador, no entanto, no desenvolvimento da web, o Firefox é o navegador padrão ouro para teste, pois funciona com quase todas as linguagens de script da web.

Como você pode ver, o título está sendo exibido na guia, bem como nosso cabeçalho h1. Eu prefiro ter a janela do navegador do arquivo aberta junto com o IDE, pois quando você faz uma alteração no IDE e salva, as alterações são instantâneas no navegador.

Sinta-se à vontade para adicionar tags e brincar com as diferentes coisas que você pode fazer com HTML. Como você pode ver abaixo, adicionei alguns parágrafos, quebras, hiperlink externo para Instructables.com, uma imagem (que pode ser vinculada de uma fonte externa ou dentro do mesmo diretório onde o arquivo. HTML está armazenado), um exemplo de uma lista não ordenada, uma lista ordenada e, por último, um comentário.

Se quiser tentar adicionar alguma cor e opções de organização, você pode inserir uma tag de estilo no cabeçalho do arquivo. Este é o ponto em que isso muda de HTML para CSS, mas para fins visuais, irei inserir algumas linhas para que você possa ver como isso funciona. Basicamente, o modo como o CSS funciona é que permite controlar os elementos HTML dentro das funções usando colchetes {} para inserir seu código para um elemento HTML específico.

Etapa 5: considerações finais

E aí está; você criou com sucesso sua primeira página da web! Como este é um guia para iniciantes, quero tornar sua primeira experiência com HTML agradável. A melhor maneira de aprender com a minha experiência é mergulhar e experimentar as coisas na prática, ver o que você pode fazer com seu código e também ver como você pode decifrá-lo. Isso constrói integridade e ajuda você a entender melhor como e por que o código funciona dessa maneira. Lembre-se de que www. W3Schools.com é um ótimo recurso para perguntas e até oferece uma sandbox virtual dentro do navegador para testar seu código. Espero que você tenha aprendido algo e feliz codificando!