Guia sobre HTML, CSS e Javascript: como entender o básico da programação

Guia sobre HTML, CSS e Javascript: como entender o básico da programação

O aprendizado de programação parece coração de mãe: sempre cabe mais uma linguagem para ser aprendida. E é por isso que convidamos uma apaixonada por programação para criar um guia sobre HTML, CSS, Javascript!

Acompanhe neste artigo, em parceria com a nossa professora do curso, Natália Lira, e descubra as funcionalidades e diferenças para dar os primeiros passos na programação.

Guia sobre HTML, CSS e Javascript: por onde começar

Futuras e futuros desenvolvedores web, este artigo é para você que quer começar a programar, mas, com tanta informação, não sabe por onde começar.

A proposta é explicar o trio que sustenta qualquer página web, assim como qual a diferença entre HTML, CSS e Javascript.

E a explicação será a mais próxima possível do mundo não virtual. Vamos pensar no processo de construção de uma casa e as etapas importantes até termos o produto final, combinado?

Para colocar em prática os primeiros passos

E a pergunta número um é: como desenvolver esse passo a passo junto ao tutorial? Ou seja, será que meu computador possui todas as ferramentas necessárias?

A resposta é: sim, possui!

Precisamos criar arquivos e ter a liberdade de declarar qual extensão ele terá (que é a indicação do tipo de arquivo - documentos podem ser PDF e imagens JPEG, por exemplo), tudo isso somado ao bloco de notas que temos no computador.

Pronto. Isso já é mais que suficiente para darmos esse start sobre a resposta da pergunta que não quer calar: para que serve HTML, CSS, Javascript e, é claro, sobre desenvolvimento de códigos.

Então, crie uma pasta em seu computador para a prática e, dentro dela, faça dois arquivos, cada qual indicando a linguagem que utilizaremos em sua extensão:

- Um chamado index.html
- Outro chamado estilo.css

Como programar um site em HTML?

Precisamos levantar as paredes do nosso website, planejar quantos e quais cômodos teremos. Não há outra linguagem que faça isso melhor que o HTML.

Diferentemente do que alguns acreditam, não se trata de uma linguagem de programação, mas sim de marcação (Linguagem de Marcação de HiperTexto). Ou seja, iremos demarcar exatamente que tipo de conteúdo teremos em cada parte do site.

Isso é realizado por meio de tags, que são representadas pelo uso dos símbolos < e >, cada qual possuidora de um nome que a identifique e a diferencie.

A estrutura básica que todo arquivo HTML precisa ter é formada pelas quatro tags, representadas na imagem a seguir:

*em verde, há a explicação de cada uma delas


Além disso, tags html podem receber uma variedade de atributos (alguns opcionais e outros essenciais para seu funcionamento).

Atributos são informações adicionadas, a fim de personalizar seu comportamento na tela. Um exemplo prático da combinação destes dois conceitos é quando desejamos mostrar uma imagem em uma página web.

Para adicioná-la de forma semântica (que tenha significado na linguagem) podemos utilizar a tag img. Essa tag espera receber ao menos dois atributos:

- src: que indicará o caminho da imagem que queremos exibir;
- alt: que deve conter um texto descrevendo a imagem - para acessibilidade dos usuários que utilizam softwares sintetizadores de voz e também para quando, por alguma razão, existe problema de carregamento do site e a imagem não pode ser visualizada.

Usando o logo da Digital House como imagem, podemos utilizar o link online dele no código a seguir:



Um toque de estilo ao site

E é chegada a hora de dar acabamento nas paredes e colorir cada espaço. Esse é o papel da linguagem de estilização CSS em um website.

Por meio dela, podemos aplicar tamanho, profundidade, coloração, sombra, alinhamento entre itens, deixar em negrito, sublinhado e inserir lista grande de possibilidades. Portanto, basicamente, todo tipo de estilização é possível, graças ao CSS.

Há três formas de inserirmos estilo em uma página web. Neste tutorial, vamos usar o modo de link externo (apresentado na sexta linha do código anterior), onde utilizamos a tag link com os atributos rel (qual o tipo de relacionamento que as duas páginas terão entre si) e href (o caminho até o arquivo desejado).

Vamos aprender mais três palavras técnicas para iniciarmos nesta linguagem:

➜ Seletor (como iremos selecionar um ou mais elementos HTML);

➜ Propriedades (quais características queremos alterar - exemplo: cor, plano de fundo, altura);

➜ Valor (qual será o valor da propriedade citada - exemplo: vermelha, uma imagem, 1 pixel).


Há mais de 19 formas de selecionar um elemento no arquivo CSS. Para descomplicar ainda mais, vamos utilizar a mais famosa e simples delas: a seleção pelo nome da própria tag desejada!

Seguindo o exemplo que usamos até aqui, se quisermos aplicar um tamanho à imagem adicionada anteriormente, escrevemos o nome da tag e entre as chaves {} utilizaremos a propriedade width (largura em inglês) seguido pelo valor escolhido e a unidade de medida escolhida.

Uma das unidades mais conhecidas/utilizadas é o valor em pixels, representados pela abreviação px. Assim, nosso código ficará:



*Para quem tem acompanhado o código e quer ver o resultado no navegador*: clique com o botão direito sobre o ícone do arquivo index.html, clique na opção 'abrir como' e escolha seu navegador de preferência e poderá ver a página que acabou de criar aí na sua telinha.

'Hm.. se com HTML posso estruturar cada item do website e com CSS estilizá-los... o que mais devo aprender para me dar bem com o desenvolvimento front-end? Fique de olho no próximo ponto!

Agora vamos para a próxima parte deste guia sobre HTML, CSS e Javascript, a personalização (captando interação do usuário)

Personalizando: Javascript no HTML

Agora, nossa casa passou pelo processo de construção, acabamento e coloração. Parece que está tudo muito bom, não é mesmo?

O que mais pode ser implementado? Talvez agora seja o momento de mobiliar ela, de forma a ficar mais atraente ao nosso cliente. E se te contássemos que é possível deixar o site mais interativo?

Esse é um dos papéis que o Javascript desempenha (em sua forma pura) e que pode contribuir com o nosso trabalho. Podemos utilizar esta maravilhosa linguagem de programação para:

➜ Dar vida ao carrossel de imagens de um e-commerce;

➜ Apresentar um pop-up de alerta quando o usuário tenta deletar um produto cadastrado (conferindo se ele deseja mesmo continuar);

➜ Validar informações contidas em um formulário de cadastro;

➜ Avisar o usuário caso o e-mail digitado seja inválido.

Fazer o passo a passo de tudo isso é um assunto mais avançado, talvez pauta de uma outra conversa aqui, pelo blog.

O que é importante sabermos agora é por onde começar. Como toda e boa linguagem de programação, o Javascript possui algumas estruturas básicas e, ao conhecermos elas, o caminho torna-se mais natural para avançar de nível e complexidade.

Continue seus estudos deste guia sobre HTML, CSS e Javascript

Inicialmente, recomendamos entender o que são variáveis e suas variações, estruturas condicionais, de repetição e funções.

Entender esses conteúdos compilados e saber como utilizá-los para resolver problemas simples do dia a dia (por exemplo fazer um cálculo de soma de uma lista de comprar através do Javascript) é o que te ajudará a adquirir a lógica computacional, que nada mais é entender como podemos representar problemas reais e resolvê-los no mundo virtual.

Esse conteúdo foi baseado nas regras das linguagens de desenvolvimento web e você pode encontrá-las e saber mais nos seguintes links:
- HTML (https://developer.mozilla.org/pt-BR/docs/Web/HTML)
- CSS (https://developer.mozilla.org/pt-BR/docs/Web/CSS)
- JAVASCRIPT (https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)

Continue seus estudos deste guia sobre HTML, CSS e Javascript

Provavelmente este guia sobre HTML, CSS e Javascript impulsionou a sua curiosidade sobre o mundo da programação! A Digital House tem um curso de desenvolvimento Web Full Stack completo e atualizado. Ao longo das aulas você aprende a criar um site do zero em até 6 meses.


Leia mais no blog DH:

+ Minha primeira linguagem de programação: como escolher?

+ Primeiros passos no Git: o que eu preciso saber?

+ Pague só quando possuir renda: conheça o modelo ISA da DH

E aí, já segue a gente no Twitter? Vem pra rede, vamos conversar sobre habilidades digitais! ;)