HTML, CSS e JavaScript
Diferenças
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 1/22
HTML, CSS e Javascript
A base da programação Front-End* é o tripé: HTML + CSS + Javascript.
Estas três linguagens de programação se completam e juntas elas trabalham
de forma uniforme, como se fossem um ser humano perfeito.
Elas funcionam da seguinte forma:
O HTML é a base da programação (como se fosse o esqueleto o corpo).
O CSS é o que dá estilo aos códigos (como se fosse a roupa que a pessoa
utiliza).
O Javascript é o que dá movimento e ação (como se fosse o espírito do
corpo).
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 2/22
HTML, CSS e Javascript
Para ficar mais fácil de entender, vamos imaginar o esqueleto de um corpo
humano.
Você não consegue identificar as características de um ser humano apenas
olhando para o esqueleto certo?!
Não! É preciso ver o corpo, as formas, a respiração, os movimentos!
Programar um sistema web apenas com a linguagem HTML seria como olhar
para uma pessoa e ver apenas o esqueleto.
É estranho. Sem vida. Sem atração.
Por isso, para que a programação fique completa, precisamos aprender a
utilizar a base da programação front-end: HTML, CSS e Javascript.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 3/22
HTML, CSS e Javascript
HTML é a abreviação para a expressão inglesa HyperText Markup Language, que
significa Linguagem de Marcação de Hipertexto.
O HTML define o que vai em cima, o que é texto, o que é coluna, o que é imagem.
Ele estrutura muito bem a página com início, meio e fim.
Ou, se preferir, head, body e footer (cabeça, corpo e pé).
Mas ele deixa a página feia, sem colorido. Tudo fica apenas um textão.
E é aí que entra o CSS. Esta linguagem é como se fosse a roupa que o corpo usa.
Ela vai dar cor, definir negrito e vai deixar a página mais atrativa e muito, muito mais
bonita.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 4/22
HTML, CSS e Javascript
Como assim “linguagem de marcação”? Pois é, o HTML não é considerado uma linguagem de
programação como as demais e você já vai descobrir o motivo disso.
No HTML é possível perceber que existem diversos elementos separados, como cabeçalho, título,
parágrafos, imagens e muitos outros. Toda a organização desses elementos é feita pelo HTML. Ele é
utilizado para criar toda a estrutura da página e, para isso, utiliza as famosas tags (etiquetas) para
sinalizar onde cada tipo de elemento será implementado.
Por exemplo, se você deseja inserir um parágrafo na tela, poderá utilizar a tag <p></p> para isso,
colocando o texto desejado dentro do elemento, como mostrado abaixo:
Sendo assim, existem diversas tags de diversas estruturas para montar o esqueleto da página.
Mas, como é possível deixar esse parágrafo azul? Ou mudar a fonte da letra? Aí entra a nossa
próxima tecnologia: CSS.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 5/22
HTML, CSS e Javascript
CSS – Cascading Style Sheets – é um mecanismo para adicionar estilo coo cores, fontes,
espaçamento, entre outras a um documento web. Em vez de colocar a formatação
dentro do documento, o CSS cria um link para uma página que contém os estilos.
Imagine aquele cara que é bem mais ou menos, só que ao vestir uma roupa da hora fica
super cool. Ou aquela garota que ao colocar um jeans bacana fica super atraente.
Esse e o resultado do CSS. Ele dá atratividade à sua criação web. Mas ainda deixa a
página engessada, pois não pode dar movimento.
E é aí que entra o Javascript, ele é praticamente o espírito que dá vida ao corpo. Com o
javascript você vai poder dar movimento e ação à sua página e tudo ficará super
atrativo para quem visita sua página.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 6/22
HTML, CSS e Javascript
Cascading Style Sheet, mais conhecido como CSS, é uma linguagem de estilos que, assim como o
HTML, também não é considerada uma linguagem de programação.
Ela é responsável por separar a parte estrutural da aplicação (que ficará nas mãos do HTML) da
parte estética. Para utilizar o CSS, usamos da seguinte sintaxe:
O seletor será o elemento que queremos estilizar (podendo ser uma tag, uma classe, um
identificador...), a propriedade será o que iremos alterar (como color, font-size, width...) e o valor
será de fato a alteração (como por exemplo: red para color, 18px para font-size e assim por diante).
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 7/22
HTML, CSS e Javascript
Sendo assim, quando utilizamos uma tag HTML, como o que usamos de exemplo acima,
podemos estilizá-la da seguinte forma:
Com isso, todos os parágrafos ficarão azuis. Mais uma informação interessante: se
traduzirmos o nome dessa tecnologia, teremos “folha de estilo em cascata”.
O que significa isso?
O CSS pode ser escrito dentro do arquivo HTML, utilizando o style como elemento <style> ou
como atributo de algum outro elemento <p style=””>.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 8/22
HTML, CSS e Javascript
Assim como também pode ser escrito em um arquivo separado, apenas de CSS, importando-o
no documento HTML da seguinte forma:
Porém, algo muito importante a ser destacado é a possibilidade de usar mais de um arquivo
CSS ao mesmo tempo, para estilizar a aplicação.
Daí a palavra “cascata”.
Isso permite várias interações diferentes, porém é preciso tomar cuidado para não se perder
e deixar o código confuso, seguindo sempre as regras para isso.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 9/22
HTML, CSS e Javascript
JavaScript é uma linguagem de programação criada para ser parte dos navegadores
web, para que scripts possam ser executados do lado do cliente e interajam com o
usuário sem a necessidade deste script passar pelo servidor, controlando o navegador,
realizando comunicação assíncrona e alterando o conteúdo do documento exibido.
JavaScript é uma linguagem de programação que permite a você criar conteúdo que se
atualiza dinamicamente, controlar múltimídias, imagens animadas, e tudo o mais que há
de intessante.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 10/22
HTML, CSS e Javascript
Para completar a grande tríade do desenvolvimento front-end, temos o Javascript, a
única linguagem de programação das 3 tecnologias citadas.
Você conseguiu perceber que já criamos a estrutura da página com o HTML e já
estilizamos os elementos com o CSS.
Mas e as funcionalidades dinâmicas que vemos quando abrimos um site, como
acontecem?
Isso é feito pelo Javascript. Ele adiciona movimento às páginas web, além de permitir o
processamento e transformação de dados enviados e recebidos.
Ele permite criar conteúdos que se atualizam de forma dinâmica e animada, dando vida
às aplicações que antes eram apenas estruturadas com HTML de forma estática.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 11/22
HTML, CSS e Javascript
Sempre que vir uma caixinha de alerta apitando em um site, ou um mecanismo de
autocomplete em algum campo, saiba que é o Javascript agindo.
Um exemplo de código utilizando a caixa de alerta:
Assim como o CSS, o Javascript pode ser escrito tanto dentro do código HTML:
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 12/22
HTML, CSS e Javascript
Quanto em um arquivo separado, sendo importado dentro do atributo desse mesmo
elemento:
Algo importante a ser destacado é que essa linguagem pode tanto ser usada do lado do
cliente, como do lado do servidor, utilizando de tecnologias necessárias para isso, como
o Node.js.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 13/22
HTML, CSS e Javascript
O papel de cada uma na aplicação
Portanto, depois de conhecer um pouco de cada uma dessas tecnologias, é possível
perceber as diferentes funções que desempenham dentro de uma página web:
HTML: linguagem de marcação utilizada para estruturar os elementos da página,
como parágrafos, links, títulos, tabelas, imagens e até vídeos.
CSS: linguagem de estilos utilizada para definir cores, fontes, tamanhos,
posicionamento e qualquer outro valor estético para os elementos da página.
Javascript: linguagem de programação utilizada para deixar a página com mais
movimento, podendo atualizar elementos dinamicamente e lidar melhor com
dados enviados e recebidos na página.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 14/22
HTML, CSS e Javascript
Comparando agora cada uma delas, podemos utilizar de exemplo o corpo humano como uma
página web da seguinte forma:
O HTML é o esqueleto, composto dos ossos que o sustenta.
O CSS é a pele, cabelo e roupas, criando o visual que realmente enxergamos quando olhamos
para alguma pessoa.
E por fim, o Javascript é o músculo, que dá movimento ao corpo.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 15/22
Qual a diferença entre
FRONT-END e BACK-END?
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 16/22
Qual a diferença entre front-end e back-end?
A área da tecnologia da informação aborda tantas linguagens e nomenclaturas que
acaba sendo difícil compreender tudo.
No entanto, existem dois desses termos que são populares no setor mas que, mesmo
assim, geram dúvidas em relação ao significado e funcionalidade.
Continue a leitura para entender qual a diferença entre front-end e back-end.
De uma forma bem simples, podemos pensar nesses dois termos da tecnologia como
um espetáculo de teatro, onde temos os bastidores, que aqui seria o back-end, e o
palco onde o show acontece, que seria o front-end.
Ou seja, o back-end resume-se a tudo o que está por trás do site, que o usuário/leitor
não tem acesso direto e não consegue interagir.
Já o front-end corresponde à parte em que os usuários conseguem ver e interagir, como
cores, fontes, menus, imagens entre outras funcionalidades.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 17/22
Especificação do BACK-END
Em uma abordagem mais técnica, o back-end envolve servidor, banco de dados e
aplicação.
Desta forma, o desenvolvedor na área é responsável por construir e manter esses
componentes juntos para que as informações sejam organizadas e armazenadas
corretamente, o que permite que uma página funcione bem, de maneira segura e se
mantenha no ar para os usuários acessarem.
Por exemplo, quando você acessa um site na web, o servidor dessa determinada página
envia todas as informações necessárias para que ela se torne visível e você consiga
acessá-la.
Mas não é só isso, o back-end também é responsável por armazenar dados e garantir a
segurança do site como um todo.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 18/22
Especificação do BACK-END
Tudo isso é construído a partir de linguagens específicas de back-end, utilizadas para
desenvolver a parte interna de um site. Algumas dessas linguagens são:
PHP (Hypertext Preprocessor): linguagem de scripit específica para o
desenvolvimento de sites e aplicações web;
Phyton: lançada em 1991, é uma linguagem de alto nível utilizada para desktop, web,
servidores e ciência de dados;
Java: uma das linguagens mais populares que engloba plataforma de software e
linguagem de programação;
JavaScript: linguagem voltada para desenvolvimento web totalmente versátil.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 19/22
Especificação do FRONT-END
Também conhecido como “o lado do cliente”, o front-end é o responsável por toda a
estrutura, design, conteúdo, comportamento, desempenho e capacidade de resposta de um
site ou aplicação, ou seja, tudo o que é apresentado aos usuários para interação.
Resumidamente, o front trabalha para criar a arquitetura que fornecerá uma boa experiência
às pessoas.
Por esse motivo, é essa parte da programação que certifica se um site é responsivo e funciona
perfeitamente em todas as telas de variados dispositivos.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 20/22
Especificação do FRONT-END
Assim como o back-end, o trabalho do desenvolvedor front-end também é baseado algumas
linguagens principais. São elas:
HTML (HyperText Markup Language): utilizada para documentação e páginas web a partir
de marcação de hipertexto;
CSS (Cascading Style Sheets): é uma linguagem de formatação de conteúdo, responsável
pelo visual de um site; muito utilizada com HTML;
JavaScript:a linguagem também é utilizada para front-end, principalmente para criar
dinamicidade nos sites.
É claro que o trabalho de um desenvolvedor back-end e front-end não se resume apenas às
linguagens, existem ainda ferramentas de framework, bibliotecas, estruturas e softwares.
Contudo, já fica evidente a diferença entre os dois termos da programação e a necessidade
dessas duas áreas trabalharem em conjunto para fornecer boas experiências e conteúdos
online.
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 21/22
HTML, CSS e Javascript
Prof. João Falcão – Web Designer – Curso Técnico em Informática - Ano: 2023 22/22
