Web Fundamental: Programação web para iniciantes

Um guia de programação para não programadores

Introdução

Estudar HTML, CSS e Javascript deixou de ser exclusividade para pessoas que trabalham com programação. Este conteúdo se torna cada vez mais necessário para qualquer profissional à medida que mais e mais ferramentas no-code e low-code estão acessíveis para todos.

Os termos no-code e low-code se referem a plataformas que oferecem a criação de aplicativos, sites e sistemas para pessoas com pouco ou nenhum conhecimento em programação.

Em um futuro muito próximo, a criação de aplicativos, sites e sistemas será um trabalho em conjunto de diversas áreas de uma empresa e não mais exclusiva de profissionais de tecnologia. 

Este conteúdo foi criado para pessoas que não trabalham com programação e não pretendem trabalhar exclusivamente com isso. Se você já programa, talvez esse guia não seja de muita utilidade, mas se sinta à vontade também.

Ao final deste guia você compreenderá o funcionamento das páginas web, entender como funciona a construção de layouts e trechos de componentes html.

Como a web funciona

Quando acessamos um determinado endereço na web em um dispositivo qualquer, por exemplo https://itgolabs.com, de forma bastante simplificada, esse endereço aponta para um computador em algum lugar do mundo. Esse computador possui alguns arquivos (em geral) HTML, CSS e Javascript que são copiados para o seu computador ou celular para serem exibidos em seu navegador, além de exibir outros tipos de recursos como: imagens, textos, links, etc.

Chamamos estes computadores de servidores de hospedagem. Eles precisam estar disponíveis sempre que alguém digita o endereço do site no navegador. Falando em endereço, para garantir a exclusividade de um, além de contratar uma hospedagem para guardar os arquivos, será necessário registrar um nome de domínio.

Nome de domínio é o que conhecemos como: google.com, globo.com, itgolabs.com e cada endereço de site está vinculado a um número de IP (Internet Protocol), que é uma sequência de números parecidos com: 187.12.175.134. Mas você concorda que é mais fácil decorar itgolabs.com do que uma sequência de números, certo? 

Aqui no Brasil a maioria dos servidores de hospedagem de sites possuem o serviço de registro de domínios também, mas você pode registrar diretamente no site registro.br que é a entidade responsável por registrar e manter os domínios com final .br.

Para que servem html, css e javascript

Os arquivos que ficam guardados nesses servidores podem ser escritos em diversas linguagens de programação, mas em geral temos HTML, CSS e Javascript, que são alguns dos tipos de arquivos que os navegadores entendem e interpretam para o usuário final (que na maioria das vezes somos nós).

Por isso a importância de se aprender essas ferramentas, que resumidamente são:
HTML: É uma linguagem de marcação de texto. Através dela nós envolvemos os textos de um documento (site) indicando se aquele texto é um título, um parágrafo, um elemento estrutural, etc. As marcações são feitas com elementos chamados de tags, veja o exemplo abaixo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Documento</title>
    </head>
    <body>
        <h1>Olá mundo!</h1>
    </body>
</html>

CSS: É uma linguagem de estilo. Com ela referenciamos os elementos do HTML dizendo que determinado título possui uma cor, tamanho específico ou determinada posição no documento. É o CSS que dá beleza ao documento HTML.

Javascript: É uma linguagem de programação. Através dela criamos interações mais poderosas no HTML, manipulamos elementos e nos comunicamos com outras linguagens de programação. Exemplo: quando você tenta entrar em um site com seu login e senha e recebe o aviso que a senha está incorreta. Muitas vezes é o javascript que mostra essa mensagem para você.

Estrutura e arquivos de um website

Um site possui documentos de texto, imagens e outros recursos. Dependendo da estrutura e quantidade de conteúdo, serão muitos arquivos, porém uma estrutura simplificada pode conter os arquivos do exemplo abaixo.

O documento que reúne todas as informações e conexões nesse caso, é o index.html e, por padrão, esse deve ser o nome do arquivo aberto no navegador. Quando você acessa um site no navegador, o arquivo index.html está configurado para abrir, por isso normalmente esse arquivo não aparece no endereço do site.

O que é e como funciona o HTML

HTML não é uma linguagem de programação, é uma linguagem de marcação. Com ela nós definimos qual será a estrutura do nosso documento HTML. Ela consiste em uma série de elementos que chamamos de tags, que servem para delimitar e/ou agrupar diferentes partes do conteúdo, para que ela atue de uma determinada maneira.

Veja um exemplo:

<p>Meu primeiro parágrafo</p>

As tags <p> e </p> delimitam o texto “Meu primeiro parágrafo”. O resultado na página HTML será a marcação desse texto como um parágrafo. A maioria das tags funciona desta mesma forma e sua preocupação nesse momento deve ser: sempre que abrir uma tag, feche-a.

Não se preocupe em saber quantas tags existem e qual a função de cada uma. À medida que a necessidade for surgindo, vamos incluindo as novas tags para serem utilizadas.

HTML possui muitas tags e você não precisa se preocupar em conhecer todas para começar a construir suas páginas. Nesse primeiro momento, vamos olhar para as tags de forma agrupada por função que ela desempenha em uma página.
São cerca de 21 elementos que serão utilizados ao longo deste guia, então observe quais são e suas descrições.

Estes são os elementos presentes em todas as páginas html e fazem parte da sua estrutura básica de um documento.

Vamos utilizar estes e outros elementos para organizar o conteúdo do documento de forma mais lógica. Para ficar mais claro, quando você entra em uma página web (site) visualmente é possível perceber um cabeçalho (onde ficam os menus e uma logo), as seções com conteúdos e um rodapé (com um conjunto de links e outras informações de contato).

Os elementos de separação de conteúdo criam uma espécie de identidade para cada parte do site, abaixo descrevo aqueles que vamos utilizar:

<header> Representa um grupo de suporte introdutório ou navegacional. Pode conter elementos de cabeçalho, uma logo, menus, etc. Não confunda esse elemento com o <head> do exemplo anterior.

<footer> Representa o rodapé para o seu conteúdo de seção mais próximo. Aqui entram informações de direitos autorais, links para documentos relacionados, etc.

<section> Utilizado em seções genéricas de um documento, quando não existir um elemento semântico mais específico para representá-lo.

<nav> Elemento de navegação e representação. É uma seção que aponta (como links) para outras páginas ou áreas da mesma página.

<h1>…<h6> h1 até h6 representam níveis de título de uma seção, sendo h1 o nível mais alto (visualmente ele é o maior) e h6 o mais baixo e visualmente menor.

São utilizados para comportar o conteúdo textual da página e normalmente são utilizados dentro dos elementos citados acima. Alguns deles:

<div> É um elemento genérico e não significa nada. Quando não existir um elemento semântico para representar o conteúdo (como article ou section) este elemento pode ser utilizado. É comum que iniciarmos a construção de páginas utilizando <div> no lugar de elementos mais semânticos, então não se preocupe. Se não souber qual utilizar, utilize um <div> para separação de blocos de seção. Visualmente funcionam muito bem.

<hr> Visualmente exibe uma linha horizontal, mas semanticamente ela tem um significado e representa uma quebra de cena de uma história ou de tema de uma seção.

<p> Representa um parágrafo. E lembre-se que parágrafos podem conter outros conteúdos como imagens e campos de formulário dentro deles.

<ul> Elemento de uma lista não ordenada. Representa uma lista de itens onde sua ordem é irrelevante.

<li> Item de uma lista. Ele deve estar dentro de um pai (<ul> ou <ol>).

Os elementos deste grupo definem significado (estrutura ou estilo) para uma palavra, linha ou qualquer outro tipo de texto. Diferentemente do Conteúdo textual, estes elementos são indicados para serem utilizados em uma porção menor de um conteúdo (linha ou palavra). Alguns elementos deste grupo:

<a> Elemento de âncora. Quando utilizado com o atributo href cria uma ligação entre outras páginas ou conteúdos de um mesmo documento.

<b> Utilizado para destacar partes de um texto. Sua apresentação visual é o negrito.

<br> Elemento de quebra de linha. Normalmente utilizado onde o local da quebra de linha é relevante (poemas por exemplo).

<i> Utilizado para destacar partes de um texto. Sua apresentação visual é o itálico.

<span> Muito parecido com o elemento <div>, pois não possui significado semântico e deve ser utilizado apenas quando não existir outro elemento para substituí-lo. A diferença entre os dois elementos é o grupo a qual pertencem.

<strong> Dá uma forte importância para o texto e sua apresentação visual é o negrito. Apesar de ser similar ao <b>, <strong> dá relevância lógica para o conteúdo, enquanto que <b> é apenas uma apresentação visual.

<img> Representa a inserção de imagem no documento. É através dessa tag que os sites exibem imagens dentro deles.

<form> Representa uma seção que possui controles interativos que permitem ao usuário enviar informações a um determinado servidor web. Você já deve ter utilizado um formulário de login, cadastro de conta, pagamentos. Sempre que for necessário enviar informações para o site, os formulários serão utilizados.

<input> Utilizado para criar os elementos dentro dos formulários para interação do visitante. Sua semântica depende do atributo type. Existem os types: text, password, email, entre outros. Quando você digita uma senha, aparecem os asteriscos no lugar do texto certo? Isso acontece porque o type dele é diferente dos outros.

<textarea> Elemento de controle que permite ao visitante criar um texto mais longo de forma livre. Você encontra esses elementos quando vai fazer uma publicação no Linkedin, Facebook, Twitter ou enviar uma mensagem mais longa em um site.

<button> Representa um botão clicável. Utilizado para enviar as informações de um formulário.

Existem elementos que separam seções inteiras e elementos que identificam uma parte pequena de um texto. A maioria dos elementos possuem uma finalidade de utilização, porém visualmente muitos podem se comportar de forma similar e às vezes torna essa separação aparentemente inútil, mas não se engane. Sites são lidos por humanos e máquinas, então a semântica dos elementos é muito importante.

Mas reforço: não se desespere. Esse conhecimento é construído ao longo do tempo. É comum no começo ocorrer alguma confusão sobre a utilização dos elementos, mas deixo aqui uma forma de diferenciá-los:

Para criação de layouts (colunas, cabeçalhos, grandes blocos de elementos) utilize os elementos da seção Conteúdo Textual.

Para blocos com conteúdo (textos ou imagens), utilize Conteúdo Textual.Para pequenas porções de texto, utilize Conteúdo Textual Inline.

Os elementos HTML possuem atributos que são valores adicionais que configuram os elementos ou ajustam o comportamento deles de algumas maneiras. A forma de escrita de um elemento HTML com um determinado atributo é a seguinte:

Um pouco mais sobre atributos: id e class

Os atributos que mais utilizaremos nesta etapa são id e class e isso também é uma verdade para a maioria dos projetos que você vai encontrar. Estes atributos podem ser utilizados para identificar e manipular os elementos de diversas formas. Nós vamos nos beneficiar desses recursos no módulo de CSS para dar forma aos elementos.

<body>
    <p id="paragrafo-diferentao">Este é um elemento único na página</p>
    
    <p class="paragrafo-comum">Elemento repetido</p>
    <p class="paragrafo-comum">Elemento com a mesma configuração do anterior</p>
</body>

Um elemento com um determinado atributo id, deve ser único na página. No exemplo acima o elemento <p> com id paragrafo-diferentao deve único aqui, mas pode existir em outras páginas como  mesmo id. 
Já os elementos com o atributo class, podem se repetir na mesma página e são utilizados para criação de elementos com as mesmas características. Veja um exemplo da utilização das classes no site da BYeCAR. São vários elementos com as mesmas características (títulos e cores), porém com conteúdos (carros) diferentes.

Sobre o funcionamento de formulários

Formulários são elementos de controle interativo que permitem que um visitante do seu site, faça alguma interação com você, enviando e-mails, mensagens, etc.

É importante ficar atento que existe uma combinação de elementos que devem ser utilizados para que um formulário funcione, são eles: <form>, <label>, <input> e <button>. Estes são os elementos básicos que precisam ser utilizados em um formulário. Vamos ao exemplo:

<form action="pagina-destino.php">
    <label for="nome-completo">Nome completo</label>
    <input id="nome-completo" type="text" />
    
    <button>Enviar</button>
</form>

Lembrando que os formulários podem ser muito mais elaborados, mas nesse momento vamos buscar apenas o entendimento básico deles.

Todos os elementos precisam ficar dentro de uma tag <form>. Essa tag tem alguns atributos que foram omitidos neste momento para facilitar o entendimento.

A tag <label> exibe o título para o campo input a qual se referencia. Essa referência vem através do atributo for, nesse caso, “nome-completo”. O conteúdo do atributo for, deve ser o id do <input> correspondente.

A tag <input> tem, além de outros, os atributos id e type e uma sintaxe um pouco diferente de outras tags. O atributo type pode ter diferentes valores e são padronizados pelo HTML. Você não pode colocar type="tipo-que-inventei", não vai funcionar. Os types mais comuns são: text e password. A versão 5 do HTML trouxe novos types, mas não vamos abordá-los nesse guia.

A tag <button> é um botão clicável utilizado também dentro do <form>. Quando for clicado, as informações serão enviadas para o destino especificado no atributo action conforme o exemplo acima.

Como funciona o CSS

CSS, assim como HTML, não é uma linguagem de programação. É uma linguagem de estilos. Com ele você consegue adicionar estilo (cores e formas) ao seu documento, seja para navegador, para impressão, fala ou outras mídias. Neste guia falaremos apenas do site funcionando em um navegador no computador.

Por exemplo: para deixar todos os parágrafos tag <p> de um documento com uma cor vermelha, o código seria este:

Adicionando estilo às páginas

As formas mais comuns de adicionar estilo a um documento são: criar um arquivo separado com a extensão .css e vincular à página HTML, adicionar um bloco de estilo na própria página ou adicionar estilos inline dentro nos próprios elementos html.

Você precisa entender qual é a sua necessidade e aplicar a solução que é possível para cada momento.

Lembre-se que o CSS trabalha diretamente com o HTML, referenciando elementos que existam dentro do documento. É importante entender esta conexão.

Entendendo a sintaxe do CSS

A forma de se escrever um bloco de código em CSS é muito simples e, ao mesmo tempo, muito poderosa.

seletor{
  propriedade: valor;
}
p{
  color: blue;
}

Como falamos anteriormente, o CSS conversa com os elementos HTML. O elemento p que você vê acima, está dentro de um documento HTML na tag <p>. Simples né?

Seletores são os elementos HTML que o CSS precisa se comunicar para realizar as alterações de estilo. Se o seu documento HTML possui uma tag com uma classe menu <div class="menu">, para identificar este elemento no CSS seria: .menu{} ou div.menu{}.

Propriedades são as características dos elementos que você deseja modificar. Para alterar a altura, largura e a cor de fundo do elemento <div class="menu">, as propriedades a serem acionadas são: height, width e background-color. Seu bloco de código fica mais ou menos assim:

.menu{
  width: 300px;
  height: 300px;
  background-color: green;
}

Valores são as novas características adquiridas a partir da manipulação de um determinado elemento.

Quando você deve ser específico e o Efeito cascata

Com relação a identificação dos seletores, podemos ser genéricos ou específicos. No exemplo abaixo, estamos sendo bastante genéricos ao identificar um elemento p. Nesse caso, todos os elementos p estarão na cor azul dentro do documento.

p{
  color: blue;
}

No entanto, podemos ser mais específicos nessa identificação, veja o exemplo:

E qual a necessidade de ser específico? Pare um pouco e pense sobre isso.

Quando somos específicos, podemos por exemplo, atribuir cores e formatos diferentes para elementos de tags iguais, veja:

Quando não somos específicos na identificação do elemento, deixamos o caminho livre para ação do efeito cascata das folhas de estilo, então lembre-se que: a última declaração feita para um elemento sobrescreve as anteriores.

Este conteúdo é um material complementar de uma série de vídeos que publiquei no Youtube. Está página está em processo de atualização, mas a série Web Fundamental em vídeo está completa neste link.