Como codificar um site do zero! 5 etapas simples

Quais são os diferentes tipos de linguagens de programação?

As linguagens de programação para sites se enquadram em duas categorias principais, nomeadamente Frontend e backend. As linguagens usadas para programar uma página web para o Frontend são HTML, CSS e JavaRoteiro.

Idiomas de front-end incluem

• Linguagem de marcação de hipertexto (HTML) – Esta linguagem é usada para formatar páginas da web e organizar elementos em uma página da web. É composto por tags de abertura e fechamento, cada uma com uma tarefa específica. Por exemplo, a tag title é usada para escrever o título da página web na barra de endereço.
• Folhas de Estilo em Cascata (CSS) – Como o nome sugere, CSS é usado para estilizar páginas da web. Por exemplo, você pode usar CSS para definir o fonte do site, tamanho da fonte, cores, etc. CSS pode ser escrito em um arquivo e reutilizado continuamente em vários elementos de uma página da web.
• JavaRoteiro (JS) - JavaO script é usado para tornar os sites mais interativos. Digamos que você criou um botão e quer que ele exiba uma mensagem quando for clicado. Você pode usar JavaScript para escrever essa funcionalidade.

Idiomas de back-end

O backend pode ser codificado em qualquer linguagem que suporte desenvolvimento web. Você pode usar JavaScript no lado do servidor usando NodeJS, Python, Ruby ou PHP. Um dos programas mais comumente usados ​​para desenvolvimento de sites é o PHP. Neste guia, focaremos no PHP como linguagem de script.

PHP:

PHP significa Pré-processador de hipertexto. Ao contrário das tecnologias frontend que são executadas no navegador da web, o PHP é executado no servidor da web. É comumente usado para realizar atividades como registrar usuários, autenticar usuários, enviar e-mails, etc.

Como codificar um site – Guia completo para iniciantes

Neste guia completo, ensinaremos como fazer um site do zero e escrever todo o código sozinho, ou você pode usar uma plataforma existente como WordPress ou Joomla, etc.

Abordaremos os seguintes tópicos neste guia completo.

• Criando do zero vs. usando um sistema de gerenciamento de conteúdo
• Criando um site do zero usando um framework (PHP MVC Framework)
• Criação de um site usando um sistema de gerenciamento de conteúdo (WordPress)

O conceito básico de HTML

Um documento HTML é um arquivo de texto que contém tags e elementos HTML e geralmente termina com uma extensão de arquivo .html.

HTML também pode ser incorporado em outras extensões de arquivo de linguagem de script, como *.php, *.jsp ou *.asp.

Os navegadores da Web analisam documentos HTML para exibir páginas da Web. Você pode visualizar o HTML que compõe a página da web no navegador.

Aqui estão as etapas que ajudam você a criar um site:

Passo 1) Clique com o botão direito na página da web para exibir o menu pop-up.

Passo 2) Selecione Exibir fonte da página.

Passo 3) O código HTML será exibido em texto simples, e você poderá ver as tags HTML e os elementos que compõem a página.

Você também pode ver alguns CSS e JavaScript incorporado ou incluído como arquivos externos separados.

A função do navegador da web é traduzir o documento HTML em um formato legível por humanos. O navegador também processa o JavaScript incluído na página web.

Entenda a estrutura do documento HTML

Suponha que você já tenha criado um documento do Word. Nesse caso, compreender a estrutura de um documento HTML será bastante fácil para você. Em um documento do Word, você terá o título do documento, o índice clicável, as seções de conteúdo formatadas de forma diferente e o rodapé. A estrutura de um documento HTML é mais ou menos a mesma do documento Word que acabamos de descrever.

Todos os documentos HTML estão incluídos na tag HTML. Dentro da tag HTML, você terá outras tags, como head e body. A tag de cabeçalho contém outras tags, como o título para exibir o título da página. Também inclui links para arquivos externos para estilos CSS, JavaScript e metadados. A tag body contém os elementos que compõem a página da web. Os elementos dentro da tag body podem ser div, tabelas, listas, etc.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>How to create a website for beginners</title>
    <meta name="description" content="My First Webpage created using HTML, CSS, JavaScript, and PHP">
    <meta name="author" content="Guru99">
    <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
    <h3>Welcome to my first webpage</h3>
</body>
</html>

Explicação:

• define o tipo de documento que é HTML
• … define a tag HTML com um atributo de idioma que especifica o idioma do site.
• Neste exemplo simples, o idioma do site é o inglês. Dentro da tag HTML de abertura e fechamento, teremos tags como head e body, que por sua vez incluem outras tags e elementos.
• … define a tag head que contém metadados.
• … define o corpo que contém o conteúdo do site.

Conheça os seletores CSS

Os seletores CSS selecionam os elementos da página da web que você deseja formatar com base nas regras CSS definidas.

Os seletores CSS são categorizados em cinco categorias principais, a saber:

• Seletores simples: Esses seletores são usados ​​para selecionar elementos com base em atributos como id, nome ou classe.
• Combinador CSS: assim como o nome sugere, esse tipo de seletor seleciona um elemento com base em uma combinação de elementos relacionados. Por exemplo, você pode usar este método para selecionar apenas elementos de parágrafo que estejam dentro de elementos div.
• Pseudoclasses CSS: Esses seletores funcionam com base no estado de um elemento. Por exemplo, passe o mouse sobre um hiperlink. Você pode alterar a cor de fundo para mostrar ao usuário para onde ele está apontado no momento. Assim, quando o usuário afasta o mouse do hiperlink, a formatação é removida automaticamente.
• Pseudoelementos CSS: Este seletor é usado para selecionar partes específicas de um elemento. Por exemplo, você pode usar um seletor de pseudoelemento para ampliar a primeira letra da primeira palavra de cada parágrafo e deixar as outras letras intactas.
• Atributo CSS: Este seletor funciona com base nos atributos aplicados aos elementos ou valores de atributos específicos. Por exemplo, você pode usar um seletor de atributos CSS para formatar todos os botões HTML para a cor de fundo verde que contém o valor do atributo “enviar”. cor de fundo verde para os botões que possuem o valor do atributo definido para enviar.

Monte uma folha de estilo CSS

Esta seção criará um documento de estilo CSS simples que executa estilos simples definindo as seguintes regras de estilo.

• Texto centralizado com base em um centro de aula: Esta regra centralizará o texto e alterará a cor do texto para vermelho.
• Formate o texto com base no ID do elemento: Criaremos uma regra de estilo para o título do ID que mudará a cor para laranja, deixará a espessura da fonte em negrito e alterará a caixa do texto para maiúscula.
• Formate o texto com base no elemento de título número 2: Esta regra definirá a cor do texto de um título como azul e o tamanho da fonte em 60 pixels.

O código a seguir define um documento CSS com as regras acima.

.center {
    text-align: center;
    color: red;
}
#title {
    color: orange;
    text-transform: uppercase;
    font-weight: bold;
}
h2 {
    font-size: 60px;
    color: blue;
}

Explica:

• .center {…} – define um centro de regras de classe que alinha o texto no centro e altera a cor da fonte.
• #title {…} – define uma regra de título que altera a cor da fonte, transforma todas as letras em maiúsculas e altera a espessura da fonte para negrito.
• h2 {…} – define regras que serão aplicadas a todos os elementos h3. O tamanho da fonte será definido para 60 pixels e a cor da fonte será atualizada para azul.

Baixar / instalar Bootstrap

Bootstrap é uma estrutura CSS que vem com um bom número de estilos que você pode começar a usar imediatamente. Ele contém estilos para layouts e elementos de formatação.

Você pode escrever seus estilos CSS que personalizam as configurações padrão do framework CSS bootstrap. Para isso, você pode baixar Bootstrap diretamente do site oficial ou você pode incluí-lo em seu documento HTML da rede de distribuição de conteúdo (CDN).

Como alternativa, você pode usar uma ferramenta de gerenciamento de pacotes, como o Node Package Manager (NPM), para instalar Bootstrap, mas isso é para desenvolvedores web avançados. Para baixar Bootstrap, você pode clicar aqui link aqui e use-o em seu projeto como qualquer outro CSS e JavaArquivo de script.

Aprenderemos como usá-lo na seção abaixo, quando analisarmos a criação de sua primeira página da web.

O papel do HTML e CSS

A função do HTML é fornecer estrutura às páginas da Web. Os navegadores da Web usam essa estrutura para exibir conteúdo apresentável aos usuários. Em segundo lugar, os spiders dos mecanismos de pesquisa usam a estrutura HTML para navegar na página da web e indexá-la.

A função do CSS é fornecer estilo ao conteúdo para que seja visualmente atraente para os usuários.

Compreendendo os termos HTML comuns

Vejamos agora alguns dos termos HTML comuns com os quais você deve estar familiarizado como desenvolvedor web.

S / N	INVERNO	Descrição
1	Element	Elementos são palavras-chave usadas para definir estruturas e conteúdo específicos da página da web. Por exemplo, o elemento H3 é usado para definir uma estrutura de título. Outros exemplos de elementos incluem parágrafos (p), âncoras (a) e contêineres (div), etc.
2	etiqueta	Tags são rótulos que marcam o início e o fim de um elemento. As tags incluem palavras-chave de elementos entre colchetes angulares. Por exemplo, Parágrafo é uma tag de parágrafo onde é a tag de abertura e é a tag de fechamento.
3	Atributo	Atributos são propriedades de elementos que fornecem informações complementares. Por exemplo, podemos usar o atributo id para dar um nome exclusivo a um elemento. O id pode ser usado em CSS ou JavaRoteiro.
4	Hyperlink	Um hiperlink é um link clicável que abre uma nova página da web. Você pode criá-lo usando o elemento âncora.
5	Head	A tag head contém informações ocultas do usuário, mas úteis para o navegador da web e para os mecanismos de pesquisa.
6	Corpo	A tag body contém informações que ficam visíveis para o usuário no navegador da web.
7	Rodapé	A tag de rodapé contém informações exibidas na seção de rodapé da página da web.
8	Comentário	Os comentários são usados ​​para documentar e explicar o código HTML e são ignorados pelo navegador ao analisar o documento HTML.
9	Div	Div é um elemento contêiner usado para criar layouts.
10	Título	A tag de título é usada para criar títulos HTML.
11	Quebra de linha	Este elemento é usado para criar uma nova quebra de linha.
12	Ligações	Os links são usados ​​para incluir outros arquivos, como arquivos CSS externos, nos documentos HTML.
13	metadados	A tag de metadados fornece informações complementares sobre a página da web que são mais úteis para os bots dos mecanismos de pesquisa.
14	Lista	A tag list é usada para criar uma lista. A lista pode ser ordenada ou não ordenada.
15	parágrafo	O elemento parágrafo é usado para exibir dados de texto em formato de parágrafo
16	mesa	Este elemento é usado para criar uma tabela
17	Título	Assim como o título sugere, é usado para definir o título da página web.
18	Contato	A tag form é usada para criar formulários que podemos usar para obter informações dos usuários.
19	Script	A tag de script está vinculada a um externo JavaScript ou inline JavaCódigo de script dentro do documento HTML.
20	AJAX	AJAX significa Assíncrono JavaScript e XML. É uma tecnologia usada para atualizar certas partes da página da web sem recarregar a página inteira.

Compreendendo os termos CSS comuns

A seguir estão alguns dos termos CSS comuns com os quais você deve estar familiarizado.

S / N	INVERNO	Descrição
1	Seletor	Refere-se ao CSS responsável por selecionar os elementos do documento HTML que desejamos formatar.
2	Propriedades Comparativas	Propriedades referem-se ao atributo do elemento para o qual desejamos definir um valor.
3	Valores	Assim como o nome sugere, atribuímos o valor à propriedade para fins de estilo.
4	Comentário	Comentários são usados ​​para documentar e explicar o código CSS
5	Conjunto de regras	Refere-se a uma seção completa do código CSS composta pelo seletor, colchete de declaração, propriedades e respectivos valores.
6	Declaração	Refere-se a uma única linha de código dentro do documento CSS
7	Bloco de declaração	Refere-se à seção do CSS que define as regras de estilo. Ele é colocado entre colchetes.
8	Palavra-chave	Esta é uma palavra reservada que tem um significado especial em CSS. Por exemplo, a palavra auto tem um significado especial, portanto, é uma palavra-chave
9	Seletor de Atributo	O seletor seleciona um elemento com base no valor do atributo.
10	Seletor universal	Este seletor é usado para corresponder a qualquer elemento dentro de um determinado contexto. O contexto geralmente é aplicado a um elemento pai, como uma lista, para que todos os itens da lista possam herdar o estilo do elemento pai.
11	Seletor de Id	Este seletor faz uma seleção com base no id do elemento.
12	Seletor de Classe	Este seletor faz uma seleção com base no valor ou valores do atributo de classe.
13	Seletor de tipo de elemento	Este seletor é baseado no tipo de elemento utilizado no documento HTML.

Editores de HTML

Editor HTML é um programa usado para escrever e editar código HTML. Você pode usar qualquer editor de texto para escrever código HTML, mas os editores HTML vêm com muitos recursos integrados que facilitam a escrita de código.

Vejamos algumas das escolhas populares:

Visual Studio Code

Visual Studio Code é um editor de código multiplataforma desenvolvido por Microsoft. Você pode usar Visual Studio Code para editar código para vários idiomas, incluindo HTML, CSS, JavaScript e PHP. Visual Studio Code é gratuito e funciona Windows, Mac e Linux.

Sublime Text

Sublime Text é um editor de código multiplataforma que também pode ser usado para escrever e editar HTML, CSS, JavaScript e código PHP. É um produto comercial e você precisa comprá-lo. Você também pode usá-lo gratuitamente no modo não registrado.

Notepad++

Notepad++ é um editor de código leve que também oferece suporte a vários idiomas. Diferente Visual Studio Code e Sublime Text, Notepad++ não é multiplataforma. Só funciona no Microsoft Windows plataforma.

NetBeans IDE

NetBeans é um ambiente de desenvolvimento integrado (IDE) que oferece mais recursos do que um editor de código normal. NetBeans é gratuito e multiplataforma.

Construindo sua primeira página da web

Vamos agora criar uma página web simples. Aqui criamos um documento HTML simples e aplicamos alguns estilos usando Bootstrap CSS. Teremos também um botão clicável que exibirá uma mensagem simples usando JavaRoteiro.

Aqui estão algumas etapas que ajudam você a aprender como fazer um site do zero:

Passo 1) Abra seu editor de texto favorito.

Aqui, abrimos o bloco de notas.

Passo 2) Crie um novo arquivo.

chamado index.html.

Passo 3) Adicione o seguinte código,

no arquivo index.html.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>My First Web Page</title>
    <script>
    function displayMessage() {
        document.getElementById("message").innerHTML = "Greetings from JavaScript!";
    }
    </script>
</head>
<body>
    <div class="container">
        <h1>My Web App!</h1>
        <p id="message">Your message will appear here.</p>
        <button type="button" class="btn btn-primary" onclick="displayMessage()">Click Me!</button>
    </div>
</body>

</html>

Explicação:

• define o tipo de documento.
• … define a tag head que contém os metadados invisíveis para os usuários.
• O cabeçalho também contém uma tag de script que contém JavaCódigo de script que exibe uma mensagem de saudação.
• Também estamos carregando Bootstrap CSS de uma rede CDN.
• … define o conteúdo da nossa página: um título, um parágrafo e um botão que aplica algum estilo de Bootstrap css.

Criando do zero vs. usando um sistema de gerenciamento de conteúdo

Criar um site do zero requer habilidades e conhecimentos adequados. Também leva mais tempo e pode custar muito dinheiro.

Por outro lado, você não precisa ser um programador qualificado para criar seu site usando um sistema de gerenciamento de conteúdo como o WordPress. Os sistemas de gerenciamento de conteúdo são semelhantes a aplicativos como Microsoft Word.

Com um sistema de gerenciamento de conteúdo, você se concentra em criar páginas, escrever conteúdo e publicá-lo, assim como criar documentos em palavras e imprimi-los em uma impressora.

A tabela a seguir compara os dois métodos populares de criação de sites.

S / N	Prós/Contra	Criando do zero	Usando um sistema de gerenciamento de conteúdo
1	Tempo	Requer muito tempo.	Leva pouco tempo. Pode ser criado em menos de 24 horas.
2	Custo	Pode ser caro contratar um programador qualificado.	Você pode fazer isso sozinho ou contratar alguém para criá-lo para você.
4	Competências	Requer um programador experiente e qualificado	Requer menos habilidades. Você precisa ter conhecimentos de informática para fazer isso.
5	Total	Os hackers não conseguem encontrar facilmente pontos fracos no código para explorar.	Os hackers podem facilmente encontrar pontos fracos no código e explorá-los. Atualizações regulares são importantes por razões de segurança.
6	Agilidade (Speed)	Tende a ser mais rápido porque apenas os recursos necessários são carregados em tempo de execução.	Tende a ser mais lento porque o Sistema de gerenciamento de conteúdo é uma solução de uso geral que pode carregar recursos que você não precisa necessariamente.
7	Manutenção	Fácil de manter porque as atualizações só são feitas quando necessário	Requer mais trabalho, pois você precisa fazer atualizações regulares no CMS por motivos de segurança.
8	Otimização de mecanismos de pesquisa (SEO)	Requer mais trabalho e o programador precisa ser lembrado porque a maioria dos programadores não são especialistas em SEO	A maioria dos sistemas de gerenciamento de conteúdo vem com ferramentas de SEO prontas para uso. Recursos extras podem ser facilmente adicionados usando plug-ins.

Usando uma estrutura (estrutura PHP MVC)

Nesta seção, veremos como podemos criar nosso site do zero. Todo site deve usar tecnologias de front-end, como HyperText Markup Language (HTML), JavaScript e Folhas de Estilo em Cascata (CSS).

O backend tem mais opções de linguagens de programação. Você pode usar PHP, Python, Rubi, JavaScript, etc. PHP é um dos mais comuns. Falaremos sobre tecnologias PHP nesta seção.

Você pode usar PHP porque é um processo lento, então mesmo os programadores que criam sites do zero precisam usar uma estrutura de desenvolvimento. O mais popular é o framework Model-View-Controller (MVC). Exemplos de frameworks PHP MVC incluem Laravel, CodeIgniter, Cake PHP, Symfony, etc.

As estruturas MVC fornecem os seguintes recursos:

• Conectividade de banco de dados integrada com bibliotecas: Isso economiza tempo para escrever código para se conectar ao banco de dados com segurança para gravar e recuperar dados.
• Módulos de autenticação integrados: Isso economiza tempo para escrever o código que exigirá que os usuários façam login e logout do site, se necessário.
• Código estruturado: O padrão de design MVC separa a lógica de negócios da apresentação. Isso facilita ter um programador que possa trabalhar no back-end e um web designer que trabalhe no desenvolvimento do Front-end.
• Pacotes: Estas são coleções de bibliotecas que executam tarefas extremamente específicas. Por exemplo, você pode usar ou baixar um pacote para adicionar recursos como;
  • Adicionando recurso de comentários do Disqus ao seu site
  • Chamando uma API
  • Integrando um gateway de pagamento.

Você pode usar estruturas MVC para acelerar o tempo de desenvolvimento. Você também pode usar modelos HTML para acelerar o desenvolvimento do Frontend usando modelos HTML de código aberto. Você também pode comprar um modelo HTML comercial e personalizá-lo de acordo com suas necessidades. Alguns criadores de modelos HTML até criam modelos HTML de estrutura MVC específicos.

Por exemplo, você pode comprar um modelo HTML que usa um modelo blade, um mecanismo de modelo integrado ao framework Laravel MVC.

Criação de um site usando um sistema de gerenciamento de conteúdo (WordPress)

Nesta seção, veremos como você pode criar um site usando WordPress:

Baixando WordPress

Você pode baixar o WordPress do site oficial e executá-lo em seu computador local se tiver um servidor web e PHP instalados. Porém, se você já possui uma conta de hospedagem, pode instalar o WordPress diretamente do seu cPanel.

Introdução ao WordPress

Depois de instalar o WordPress, você pode começar a criar seu site.

Hospedagem na Web:

Antes de começar, você precisa ter um nome de domínio e hospedagem na web conta. A conta de hospedagem web deve ter PHP instalado e MySQL como mecanismo de banco de dados. Você pode contratar o serviço de Bluehost, Godaddy, ou você pode hospedar com WP Engine, especializado em fornecer hospedagem gerenciada de WordPress.

Instalação:

A maioria dos provedores de hospedagem web possui scripts especiais no painel administrativo que permitem a instalação do WordPress. Se o seu provedor de hospedagem usa cPanel, você poderá instalar o WordPress clicando no ícone do WordPress como mostrado na imagem abaixo:

Depois de selecionar a opção acima, serão apresentados os seguintes passos do Windows para concluir a instalação.

Configurações:

A seção de configurações permite que você configure coisas como nome do site, links permanentes de URL, fuso horário, se alguém pode se registrar em seu site, etc.

Modelo:

Os modelos nos permitem ver a aparência do nosso site. O WordPress vem com modelos integrados gratuitos que você pode usar imediatamente. Você também pode baixar modelos criados por terceiros. Além de modelos gratuitos, você também pode comprar modelos premium em mercados como ThemeForest.

Plug-ins:

Os plug-ins permitem estender a funcionalidade do WordPress. Por exemplo, você pode usar um plugin para permitir que seus clientes paguem via PayPal em seu site. Você também pode usar plug-ins para forçar os usuários a usar conexões seguras (HTTPS) ou gerar mapas do site.

Construtores de sites:

Os construtores de sites vêm com muitos recursos que facilitam a criação de sites usando métodos de arrastar e soltar. Os construtores de sites geralmente são instalados como plug-ins e vêm com modelos que você pode usar.

Vejamos alguns dos construtores de sites mais populares:

Astra

Astra é um tema WordPress rápido, leve e altamente personalizável. Ele vem com modelos iniciais que você pode usar para criar seus sites rapidamente. Possui modelos iniciais gratuitos e premium.

Elementador:

Elementor é um construtor de sites de arrastar e soltar para WordPress usado por mais de 5 milhões de usuários. Elementor oferece recursos gratuitos e premium.

Construtor de castor:

Beaver Builder é um construtor de sites de arrastar e soltar fácil de usar para WordPress que permite criar sites com aparência profissional rapidamente.

Alternativas ao WordPress

WordPress não é o único sistema de gerenciamento de conteúdo que você pode usar para construir seu site. Você também pode procurar alternativas como

• Joomla: Joomla é um sistema de gerenciamento de conteúdo de código aberto que pode ser usado para publicar conteúdo, fóruns de discussão, aplicativos de comércio eletrônico, etc. Ele usa PHP como linguagem de programação e MySQL como mecanismo de banco de dados.
• Drupal: É um sistema de gerenciamento de conteúdo da web que pode criar blogs pessoais, sites corporativos ou gerenciamento de conhecimento para colaboração empresarial. Drupal é escrito em PHP e JavaRoteiro.
• MODX: É um sistema de gerenciamento de conteúdo de código aberto escrito em PHP. E usa MySQL como mecanismo de banco de dados. Ele pode ser usado tanto na web quanto na intranet.
• Constant Contact: este é um construtor de sites que oferece recursos de arrastar e soltar. Ele pode ser usado para criar sites básicos e lojas de comércio eletrônico.

Resumo

• Os sites são criados usando código de computador.
• O código do computador são instruções legíveis por humanos que instruem o computador a executar uma tarefa específica.
• Os sites podem ser criados do zero ou usando uma plataforma existente como o WordPress.
• Criar um site do zero leva mais tempo do que criar usando uma plataforma.
• Criar um site do zero é mais flexível do que usar uma plataforma existente.
• As linguagens de programação usadas para criar sites são HTML, CSS, JavaScript e linguagens de script para o backend, como PHP, Python, rubi, etc
• WordPress é um sistema de gerenciamento de conteúdo que pode ser usado para criar sites muito rapidamente.
• WordPress oferece suporte a plug-ins como Astra, Elementor ou Beaver Builder, etc., para fornecer recursos de arrastar e soltar de design de sites.
• Frameworks MVC como Laravel ou CodeIgniter podem ser usados ​​para acelerar o desenvolvimento de sites do zero.