Quando falamos em programação ou desenvolvimento, logo vem à cabeça de muita gente a ideia de letras sem sentido e números como os representados no filme Matrix, com os famosos zeros e uns infinitos.

E isso realmente é a programação e o desenvolvimento: letras e números que, ao final, resultam em algo visível (ou não)! 

Neste artigo, vamos te apresentar três das principais ''linguagens'' do desenvolvimento e que certamente são as mais conhecidas: HTML, CSS e JavaScript, que, ao serem combinadas, resultam em um front-end de encher os olhos!

Vamos lá?!

Mas afinal, o que significa o front-end?

O front-end é tudo aquilo que é visível em um desenvolvimento, ou seja, como o nome sugere, "front" é tudo o que está à sua frente, como a página de um site, por exemplo. Ele possui várias linguagens, inclusive, as três principais que você vai conhecer aqui e que são a base para desenvolver uma página web.

Agora, para começar e facilitar o imaginário, pense em uma pessoa e em alguns “elementos” das quais ela é feita: ossos, roupa e espírito.

O HTML é a estrutura do desenvolvimento. Dessa forma, ele seria o que corresponde aos ossos da pessoa e toda a sua parte esquelética. Porém, é impossível visualizar um corpo somente com a sua parte óssea, certo?

É aqui que entra o CSS, a etapa que vai dar o estilo para essa pessoa, entrando assim, com a roupa que vai vesti-la. Neste ponto, você já deve estar entendendo onde estamos chegando, não é mesmo?! 

Dando sequência, nada adianta ter tudo isso e não criar um movimento para esse corpo.

É nesta fase que entra o JavaScript para dar a ação ao desenvolvimento, logo, é o espírito do corpo.

Nesse caso do front-end, a programação fica completa com as três "linguagens" combinadas, afinal, resumidamente, olhar para um corpo esquelético seria algo sem vida e sem atração, assim como uma página em branco. 

O HTML

Agora, explicando mais a fundo, o HTML é uma abreviação inglesa de HyperText Markup Language, ou Linguagem de Marcação de Hipertexto (mas nunca é usado ou falado dessa forma em português).

Projetada por Tim Berners, esse recurso foi criado para a transferência de arquivos, facilitando o compartilhamento entre empresas nos anos 1990. Logo em seguida, no ano de 1992, surgiu o tão conhecido www (world wide web) e, após esse alcance mundial, o HTML se tornou uma ferramenta usada por todos.

Mas você ainda deve estar se perguntando: o que realmente significa e como podemos enxergar esse desenvolvimento? 

É simples! Olhe para a estrutura desta página mesmo em que você está: é possível perceber que existe uma organização separada por títulos, imagens, parágrafos, cabeçalho, tabelas, links, vídeos e outros elementos.

Toda a distribuição desses elementos quem faz é o HTML. Ele cria a estrutura da página utilizando tags que sinalizam onde os elementos serão adicionados. Olha só: um exemplo de tag seria: <p>Conheça o significado e algumas linguagens de programação!</p>, formando um parágrafo com a frase no meio das tags iniciais. 

O CSS 

Após desenvolver toda a parte dos elementos do HTML, você pode estilizar as fontes desse texto, alterar a cor do título ou até mesmo modificar a tonalidade da página inteira. É aqui que entra o CSS (Cascading Style Sheet), a ''linguagem'' do estilo que leva algo que seja atrativo para a criação web, porém, ainda sem movimento.

O CSS vai ser responsável por diferenciar o HTML, que é a estrutura óssea da parte estética do desenvolvimento. Então, ao criar um elemento CSS, você tem como base a tag do elemento HTML que você quer estilizar e dá uma propriedade para ela.
Veja o exemplo abaixo:

seletor {
        propriedade: valor;
}

Neste caso, o seletor será o elemento que o CSS irá estilizar, já a propriedade é o que vamos alterar - como a cor ou o tamanho de uma fonte - e o valor é a alteração em si. Na prática, para alterar a cor de fundo da sua página, você escreveria assim:

body {
        background-color: red;
}

O resultado desse estilo, seria o fundo da sua página toda na cor vermelha. Agora que você entendeu um pouco mais, você pode se questionar: “mas afinal, onde eu posso escrever essa linha?”

A gente te responde! 

O CSS pode ser escrito juntamente com o HTML apenas utilizando o elemento <style>. No entanto, caso você prefira, ele pode ser escrito separadamente, tendo a necessidade de ser adicionado ao arquivo HTML de outra forma.

O JavaScript

Completando o trio mais famoso do front-end, temos o JavaScript (cuidado para não confundir com o Java apenas, hein?!). 

Essa é a única linguagem de programação que fica no meio desse trio, pois o JS faz toda a parte de funcionalidade que você vê ao abrir um site, dando movimento às páginas e permitindo dar uma forma mais animada aos conteúdos criados.

Como mencionamos no início do texto, o JS é a alma, então é ele quem dá vida às estruturas do HTML. Com os exemplos anteriores, você pode notar que criamos um parágrafo no HTML e estilizamos a cor de fundo de uma página para vermelho com o CSS. Mas ainda faltam as funcionalidades dinâmicas.

Para finalizar, portanto, vamos dar uma amostra de código escrito abaixo e, logo após, duas imagens do resultado deste script. 

Recapitulando: o código terá o texto escrito pelo HTML, estilização de cor pelo CSS e ação pelo JS. 

Dica: antes de visualizar as imagens prontas, tente visualizar o resultado deste script.

<!DOCTYPE html>

<html>

<body>

<style>

body {

    background-color: lightblue;

}

h1 {

    color:red

}

button {

    color: red;

}

</style>

<h1>O que o JS faz?</h1>

<p id="demo"> O JavaScript pode mudar o conteúdo do HTML.</p>

<button type="button"

onclick="document.getElementById('demo').innerHTML = 'Bem- vindo ao artigo da MAVERICK 360! :D'">

Verifique a mensagem oculta!</button>

</body>

</html>

Verifique o resultado deste script simples abaixo:

No resultado acima, você pode ver os três elementos e uma alteração de texto ao clicar no botão ''verifique a mensagem oculta!''. 

E foi assim que esse simples script foi criado com HTML, CSS e JS!

Aproveite que a MAVERICK 360 utiliza a melhor plataforma front-end - que conta ainda com um design impecável e moderno - para a criação de websites, e entre em contato com a gente para desenvolver a página da sua empresa!

Entre em contato:

contato@agenciamaverick.com.br

+55 41 99980-9009

+55 41 99954-7416