WEB - HTML-CSS-JavaScript-Diferenças

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).
 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.
 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.
 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.
 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.
 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).
 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=””>.
 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.
 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.
 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.
 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:
 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.
 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.
 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.
Qual a diferença entre
FRONT-END e BACK-END?
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.
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.
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.
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.
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.

WEB - HTML-CSS-JavaScript-Diferenças

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

WEB - HTML-CSS-JavaScript-Diferenças

Enviado por

Direitos autorais:

Formatos disponíveis

HTML, CSS e JavaScript

 HTML é a abreviação para a expressão inglesa HyperText Markup Language, que

 O HTML é o esqueleto, composto dos ossos que o sustenta.

Você também pode gostar