Como criar um site com HTML, CSS e JavaScript

Todo site é feito em HTML, mas a maior parte dos sites hoje é desenvolvida com ferramentas que criam esse HTML pra gente automaticamente. O WordPress, Wix ou Webflow são exemplos de serviços que fazem extamente isso.

Então, para criar sites hoje não é preciso saber HTML, apenas saber usar essas ferramentas.

No entanto, se você realmente quer desenvolver um site legal e diferenciado, provavelmente terá que fazer ajustes e entender como funciona a estrutura por trás. Isto é, saber como funciona o HTML, o CSS e, quem sabe, o JavaScript que compõe o site.

Nesse artigo, vou te mostrar como você pode começar o desenvolvimento de um site utilizando códigos simples.

Ao longo da jornada aqui da série de como criar um site, utilizamos sistemas simples e visuais para criar as páginas e funcionalidades.

Porém, agora vamos avançar para uma área um pouco mais técnica. Aprender como o HTML, CSS e JavaScript funcionam será muito importante para levar suas habilidades para um nível superior.

Ao mesmo tempo, esse é um tema que merce por si só dezenas de outros artigos. Inclusive, recomendo dar uma olhada em outra série que temos que se chama Como se tornar um desenvolvedor web.

1 – O que é HTML

De forma simples, o HTML é a estrutura dos sites. Como comentei, os navegadores apenas conseguem entender algumas linguages de programação.

O HTML, em especial, foi uma das primeiras linguagens aceitas na Web. O nome HTML vem do Inglês HyperText Markup Language. Traduzindo: Linguagem de Marcação de Hipertexto.

Esse acrônimo bonito se refere, portanto, a uma linguagem que tem como eu objetivo dar sentido e organizar as informações.

Cada vez mais o HTML vai se desenvolvendo, mas hoje sua função está cada vez mais semântica do que estrutural.

Antigamente, criávamos sites inteiros utilizando tabelas para organizar os conteúdos pois era a forma que tínhamos. Atualmente, se você remover o CSS e JavaScript da página, provavelmente terá apenas uma listagem de textos e imagens sem muita organização ou forma.

No entanto, essa é uma boa prática pois o HTML 5 (como referimos a essa fase do HTML) nos possibilita dizer aos buscadores e outros robozinhos muito sobre a organização do nosso conteúdo.

O HTML consegue fazer essa marcação através de Tags, que nada mais são do que pequenos códigos que colocamos antes e depois de um texto ou elemento que desejamos “marcar”.

Exemplo:

Se queremos marcar um texto como título – e assim o deixar grande e em destaque -, o envolvemos com uma tag <h1>.

 <h1>Olá, eu sou um título</h1>

Veja que adicionei um <h1> no início da frase e um </h1> no final. Essa barra indica o fechamento de uma tag.

Cada tag também tem atributos que as customizam de acordo com suas necessidades. Por exemplo, podemos determinar uma cor para esse título adicionando um atributo color.

 <h1 color="red">Olá, eu sou um título</h1>

Existem dezenas de tags diferentes e cada um serve um propósito. Algumas mais comuns com suas explicações:

• Marcar um link: <a>
• Marcar uma imagen: <img>
• Marcar uma tabela: <table>
• Marcar como negrito: <b>
• Marcar um parágrafo: <p>

Com o tempo você vai pegando o jeito e identificando as mais variadas tags. Uma boa fonte de estudo e referência é o site da W3.

Uma sugestão é você clicar com o botão direito nos sites que visitar e selecionar a opção “inspecionar elemento”. Assim vai abrir a área de desenvolvedores do Chrome ou outro navegador com a estrutura do HTML daquele site.

O HTML, no entanto, está longe de ser perfeito. É muito difícil criar layouts bonitos, dinâmicos e animados somente com ele. Para a parte do layout, então, vamos aprender um pouco sobre o CSS.

2 – O que é CSS

Assim como o HTML, o CSS vem de um termo em Inglês: Cascading Style Sheet. Isto é, uma folha de estilos em cascata.

O CSS foi desenvolvido pela W3 – World Wide Web Consortium – em 1996 com o objetivo de aprimorar e separar os estilos da página de sua estrutura. Ele funciona em conjunto com o HTML, fazendo com que não precisamos mais utilizar alguns atributos, como o de largura e cor, diretamente nas tags, mas sim em um arquivo separado e com opções muito mais poderosas.

Você pode usar o CSS de várias maneiras, mas não vou entrar em detalhes. Por hora, saiba que pode o utilizar como um atributo de uma tag HTML, dentro do arquivo HTML na sua própria tag <style> e em um arquivo separado.

Minha sugestão é utilizar ele em um arquivo separado sempre para facilitar a sua vida.

Como mencionei, o CSS funciona dando características visuais para as tags. Por exempo, podemos aproveitar o <h1> do nosso exemplo anterior. Podemos utilizar as propriedades do CSS de cor, tamanho e alinhamento para o colocar em vermelho, grande e centralizado.

HTML:
<h1>Olá, eu sou um título</h1>

CSS:
h1 {
    color: red;
    font-size: 40px;
    text-align: center;
}

Observe que estou “selecionando” qual é a tag que desejo impactar seguindo por {} e dentro as propriedades que desejo.

Como você deve imaginar, existem centenas de propriedades e valores possíveis para essas propriedades. Eu mesmo depois de anos mexendo com CSS ainda dou uma colada de vez em quando em algumas. O próprio site da W3 tem ótimos tutoriais e referências para todas as propriedades possíveis.

Mexer com desenvolvimento de software é diferente de fazer uma prova. As referências estão aí para serem consultadas e não há problema nenhum nisso. Não precisa sair decorando as coisas. Saber que elas são possíveis já é o suficiente nesse momento.

Alguns exemplos de propriedades do CSS para você ter uma ideia:

• Família da fonte: font-family
• Cor: color
• Cor do fundo: background-color
• Borda: border
• Largura: width

Seletores

Um outro conceito que começa a ser super importante aqui é o de seletores. No exemplo acima, selecionamos o <h1> através de um seletor de tag. Ou seja, simplesmente colocamos o nome da tag.

No entanto, essa é apenas uma das formas de fazermos isso. Afinal, precisamos de maneiras de selecionar individualmente um tipo de tag ou então um conjunto específico delas. Se fosse apenas pela tag, como faríamos para selecionar apenas o primeiro <h1> e não todos os da página?

Para isso, temos dois conceitos aqui que são importantes:

• ID
• Classe

Quando queremos dar uma identificação única para uma tag no nosso HTML, utilizamos a propriedade id.

<h1 id="idPrincipal">Olá, eu sou um título</h1>

Você pode dar o nome que quiser para suas IDs, no entanto sugiro manter um padrão que faça sentido para você. Nesse caso, o chamei de ‘idPrincipal’.

No CSS eu aplicaria estilos a esse <h1> da seguinte forma:

#idPrincipal {
    color: red;
    font-size: 40px;
    text-align: center;
}

Note que utilizei o símbolo # antes do nome da ID para a referenciar.

Agora, e se você quiser dar estilos para vários elementos distintos na página que não necessariamente são do mesmo tipo de tag? Para isso, usamos as classes.

No HTML fazemos assim:

<h1 class="red">Olá, eu sou um título</h1>
<p class="red">Esse é um parágrafo</p>
<a href="https://google.com" class="red">Esse é um link para o Google</a>

Veja que as três tags são diferentes, mas todas possuem a classe red.

Agora, no CSS podemos fazer da seguinte maneira:

.red{
    color: red;
}

Observe que agora utilizamos o símbolo . antes do nome da classe para a referenciar. O resultado é que todos esses elementos ficarão da cor vermelha.

Existem vários tipos de seletores e também é algo que você pode ir pegando com o tempo. A maior parte das vezes você vai utilizar seletores de tags, ids ou classes.

Agora já sabemos como fazemos para montar a estrutura do site também o estilizar – ou pelo menos sabemos como funciona. Porém, nos sites atualmente precisamos de funcionalidades e animações na nossa página e, para isso, usamos o JavaScript.

3 – O que é JavaScript

JavaScript não é uma sigla, mas sim uma linguagem de programação mais propriamente dita. HTML e CSS são formas de marcar e estilizar elementos nas páginas. São formas de escrever que os navegadores interpretam e geram as páginas que hoje vemos.

Já o JavaScript ele funciona tanto no navegador quanto no servidor e é muito poderoso.

Explicar como o JavaScript funciona, portanto, é um pouco mais complexo. No entanto, posso adiantar que ele serve para dar mais dinamismo para as páginas.

Da mesma forma que o CSS, podemos aproveitar dos seletores de tags, classes e ids para modificar os elemetnos das páginas. Podemos fazer cálculos, girar, fazer aparecer, esconder, animar e até conectar com um banco de dados para puxar informações que não estavam inicialmente presentes no HTML.

Podemos criar novas tags dinamicamente, remover algumas através de ações do usuário e até mesmo trocar as páginas. Tudo isso através do código.

Um grande uso do JavaScript vem de sua capacidade de “ouvir” o que o usuário está fazendo no site. Quando clicamos em algum botão ou parte do site, quando passamos o mouse em algum lugar ou até mesmo quando rolamos. Tudo isso pode ser acessado pelo JavaScript que, por sua vez, pode fazer ações específicas.

O site da Mozilla tem uma explicação bem completa que recomendo que você leia.

Para entender um pouco mais de como o JavaScript funciona eu recomendo um curso de lógica de programação. Existem vários no YouTube, Udemy ou outros locais.

4 – A estrutura de um site

Como o objetivo aqui é te dar uma noção de como as coisas funcionam, vou te apresentar como normalmente os sites são estruturados.

Segue o exemplo e vamos destrinchar abaixo.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Título da página</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Título</h1>
<p>Primeiro parágrafo</p>
<button>Botão para clicar</button>

<script src="script.js"></script>
</body>
</html>

Vamos lá! Primeiramente, temos a tag de identificação da versão do HTML que estamos usando <!DOCTYPE html>. Antigamente essa tag era mais importante, pois tínhamos que referenciar até a documentação da versão do HTML usada. Hoje, basta adicionar isso no topo que está tranquilo.

Em seguinda, temos a tag <html>, que é a nossa principal e está acompanhada da propriedade lang indicando a língua dessa página- Português do Brasil.

Dentro da tag <html> temos duas partes que também são envolvidas por duas tags: <head> e <body>.

Como o próprio nome já diz, temos a cabeça e o corpo. A cabeça é onde adicionamos elementos que fazem parte das configurações e referências dessa página. O que está alí são coisas com o título, o favicon (aquela imagenzinha que fica nas abas dos navegadores), a descrição da página, palavras-chave, links para os arquivos de CSS, entre outros.

Já no corpo é onde vamos adicionar todas as tags que realmente farão parte da nossa página. Nesse caso, temos alí um título, um parágrafo e um botão. Além disso, observe que também temos uma tag <script> alí no finalzinho do <body>. Normalmente, também usamos o JavaScript em um arquivo separado e, por motivos de performance, carregamos ele no final da página.

Agora, recomendo novamente você dar uma olhada no código fonte de um site que gosta – como o da Iglu 🙂 – e veja se consegue encontrar essa estrutura.

5 – Templates e hospedagem gratuitos

Bacana! Agora esperançosamente você já tem uma noção de como funciona uma página por trás dos panos (ou pixels).

Minha sugestão é que você pegue alguns templates em HTML gratuitos e brinque com eles. Tente trocar alguns textos, imagens e links. Eu tenho um post aqui na Iglu cheio de templates bonitos que você pode baixar gratuitamente.

Aí, para você editá-los vai precisar baixar também um editor de texto. Não, não é um Word da vida, mas sim um editor de código.

Algumas sugestões:

• Visual Studio Code
• Atom

Esses dois são excelentes e são bem fáceis de usar. Basta baixá-los e abrir os arquivos .html com eles. Verá de cara a estrutura do HTML.

Por fim, se quiser ver como seu site fica na web, sugiro a hospedagem gratuita do Netlify. Com ela você consegue arrastar a pasta do seu projeto direto para lá e seu site fica num link já na web.

Inclusive, eu mesmo o utilizo para hospedar vários sites estáticos. Um site estático é um site que não tem banco de dados, ou seja, só o HTML, CSS e JavaScript.

Conclusão

Essse artigo foi um tanto quanto mais complexo do que os que estamos acostumados aqui na série Como Criar um Site. No entanto, ele realmente só faz sentido se você quer elevar o seu nível na criação dos sites.

Recomendo muito ter uma compreensão básica do HTML e CSS para poder bolar sites mais bonitos, responsivos e dinâmicos.

Quero saber se a explicação está bacana, então deixa abaixo um comentário e continuamos a conversa por lá.

Divirta-se!