Web Design: Como funcionam HTML, CSS e JavaScript

Você sabe o que é Web Design? Você já se perguntou como a programação de computadores funciona, mas não fez nada mais complicado na Web do que enviar uma foto para o Facebook?

Então você está no lugar certo.

Para alguém que nunca codificou antes, o conceito de criar um site a partir do zero – layout, design e tudo – pode parecer realmente intimidador. 

Você pode estar imaginando os alunos de Harvard do filme The Social Network , sentados em seus computadores com fones de ouvido gigantescos e martelando códigos e pensando consigo mesmo: ‘Eu nunca poderia fazer isso’.

Na verdade você pode.

>>> Quer ganhar um Ebook de “Marketing Digital para Principiantes” e ainda receber conteúdos exclusivos e novidades do mundo digital em seu e-mail? Clique aqui e inscreva-se agora! É totalmente GRATUITO!

Qualquer um pode aprender a codificar, assim como qualquer um pode aprender um novo idioma. De fato, a programação é como falar uma língua estrangeira – e é exatamente por isso que são chamadas linguagens de programação. 

Cada um tem suas próprias regras e sintaxe que precisam ser aprendidas passo a passo. Essas regras são maneiras de dizer ao seu computador o que fazer. Mais especificamente, na programação da Web, são maneiras de dizer ao seu navegador o que fazer.

O objetivo deste post é ensinar os conceitos básicos de HTML, CSS e uma das linguagens de programação mais comuns, o JavaScript. 

Mas antes de começarmos, vamos ter uma ideia do que realmente são as linguagens de programação.

O que é uma linguagem de programação?

Programar, ou codificar, é como resolver um quebra-cabeça. Considere uma linguagem humana, como inglês ou francês. Usamos essas linguagens para transformar pensamentos e ideias em ações e comportamentos. 

Na programação, o objetivo do quebra-cabeça é exatamente o mesmo – você está apenas conduzindo diferentes tipos de comportamento, e a fonte desse comportamento não é humana. É um computador.

Uma linguagem de programação é a nossa maneira de nos comunicar com o software. As pessoas que usam linguagens de programação são frequentemente chamadas de programadores ou desenvolvedores. 

O que dizemos ao software usando uma linguagem de programação pode ser fazer com que uma página da Web tenha uma certa aparência ou fazer com que um objeto na página se mova se o usuário humano executar uma determinada ação.

Programação em Desenvolvimento Web

Assim, quando um web designer recebe uma meta final como “criar uma página da web que tenha esse cabeçalho, essa fonte, essas cores, essas imagens e um unicórnio animado andando pela tela quando os usuários clicarem neste botão”, o trabalho do web designer é pegar essa grande ideia e desmembrá-la em pequenos pedaços, e depois traduzir esses pedaços em instruções de forma que o computador possa entender – incluindo colocar todas essas instruções na ordem ou sintaxe correta.

Cada página da Web que você visita é criada usando uma sequência de instruções separadas, uma após a outra. Seu navegador (Chrome, Firefox, Safari e outros) é um grande ator na conversão de código em algo que podemos ver em nossas telas e até interagir com ele. 

Pode ser fácil esquecer que o código sem um navegador é apenas um arquivo de texto – é quando você coloca esse arquivo em um navegador que a mágica acontece. Quando você abre uma página da web, seu navegador busca o HTML e outras linguagens de programação envolvidas e o interpreta.

HTML e CSS, na verdade, não são tecnicamente linguagens de programação; são apenas estrutura da página e informações de estilo. Mas antes de passar para JavaScript e outras linguagens verdadeiras, você precisa conhecer o básico de HTML e CSS, pois eles estão no front-end de todas as páginas e aplicativos da web.

No início dos anos 90, o HTML era a única linguagem disponível na web. Os desenvolvedores da Web tiveram que codificar minuciosamente sites estáticos, página por página. 

Muita coisa mudou desde então: agora existem muitas linguagens de programação de computadores disponíveis. 

Neste post, falaremos sobre HTML, CSS e uma das linguagens de programação mais comuns: JavaScript.

>>> Se você está buscando crescimento profissional ou deseja aprimorar suas habilidades para investir e empreender, CLIQUE AQUI confira os Ebooks Gratuitos e Cursos Online que recomendamos pra você começar hoje mesmo a alavancar sua carreira!

HTML, CSS e JavaScript: tutorial

Uma visão geral:

• O HTML fornece a estrutura básica dos sites, aprimorada e modificada por outras tecnologias, como CSS e JavaScript.
• CSS é usado para controlar a apresentação, formatação e layout .
• JavaScript é usado para controlar o comportamento de diferentes elementos.

Agora, vamos analisar cada um individualmente para ajudar você a entender os papéis que cada um desempenha em um site e, em seguida, abordaremos como eles se encaixam. 

Vamos começar com o bom e velho HTML.

HTML

O HTML está no centro de todas as páginas da web, independentemente da complexidade de um site ou do número de tecnologias envolvidas. É uma habilidade essencial para qualquer profissional da web. É o ponto de partida para quem aprende a criar conteúdo para a web. E, felizmente para nós, é surpreendentemente fácil de aprender.

Como funciona o HTML?

HTML significa HyperText Markup Language. Markup Language, ou “Linguagem de marcação”, significa que, em vez de usar uma linguagem de programação para executar funções, o HTML usa tags para identificar diferentes tipos de conteúdo e os propósitos que cada um deles serve para a página da web.

Deixe-me mostrar o que eu quero dizer. 

Dê uma olhada no artigo abaixo. Se eu pedisse para você rotular os tipos de conteúdo da página, você provavelmente se sairia bem: existe o cabeçalho na parte superior, um subtítulo abaixo, o texto do corpo e algumas imagens na parte inferior, seguidas por um mais alguns pedaços de texto.

As linguagens de marcação funcionam da mesma maneira que você fez quando você rotulou esses tipos de conteúdo, exceto que eles usam código para isso – especificamente, eles usam tags HTML, também conhecidas como “elementos”. Essas tags possuem nomes bastante intuitivos: tags de cabeçalho, tags de parágrafo, tags de imagem e assim por diante.

Cada página da web é composta por um monte dessas tags HTML que denotam cada tipo de conteúdo na página. Cada tipo de conteúdo na página é “encapsulado”, ou seja, cercado por tags HTML.

Por exemplo, as palavras que você está lendo agora fazem parte de um parágrafo. Se eu estivesse codificando esta página do zero, eu teria iniciado este parágrafo com uma tag de parágrafo de abertura: <p>. A parte “tag” é denotada por colchetes, e a letra “p” informa ao computador que estamos abrindo um parágrafo em vez de algum outro tipo de conteúdo.

Depois que uma tag é aberta, presume-se que todo o conteúdo a seguir faça parte dela até que você “feche” a tag. Quando o parágrafo termina, eu coloco uma tag de parágrafo final: </p>. Observe que as tags de fechamento são exatamente iguais às tags de abertura, exceto que há uma barra após o colchete angular esquerdo. Aqui está um exemplo:

<p>Este é um parágrafo.</p>

Usando HTML, você pode adicionar cabeçalhos, formatar parágrafos, controlar quebras de linha, criar listas, enfatizar texto, criar caracteres especiais, inserir imagens, criar links, criar tabelas, controlar alguns estilos e muito mais.

CSS

CSS significa Cascading Style Sheets (Folhas de estilo em cascata). 

Essa linguagem de programação determina como os elementos HTML de um site devem realmente aparecer no front-end da página.

HTML vs CSS

O HTML fornece as ferramentas brutas necessárias para estruturar o conteúdo em um site. O CSS, por outro lado, ajuda a estilizar esse conteúdo para que ele apareça ao usuário da maneira que ele deveria ser visto. Essas linguagens são mantidas separadas para garantir que os sites sejam criados corretamente antes de serem reformatados.

Se HTML é a parede, CSS é a tinta.

Enquanto o HTML era a estrutura básica do seu site, CSS é o que dá estilo a todo o site. Essas cores lisas, fontes interessantes e imagens de fundo? Tudo graças ao CSS. 

Essa linguagem afeta todo o humor e o tom de uma página da Web, tornando-a uma ferramenta incrivelmente poderosa – e uma habilidade importante para os desenvolvedores aprenderem. 

É também o que permite que os sites se adaptem a diferentes tamanhos de tela e tipos de dispositivos.

Para mostrar o que o CSS faz em um site, observe as duas capturas de tela a seguir. A primeira captura de tela é uma postagem de blog mostrada em HTML básico, e a segunda captura de tela é a mesma postagem de blog com HTML e CSS.

Exemplo de HTML (sem CSS)

Observe que todo o conteúdo ainda está lá, mas o estilo visual não está. É isso que você pode ver se a folha de estilos não carregar no site, por qualquer motivo. 

Agora, veja como é a mesma página da Web com o CSS adicionado.

Exemplo de HTML + CSS

Isso não é mais bonito?

Simplificando, CSS é uma lista de regras que podem atribuir propriedades diferentes às tags HTML, especificadas para tags únicas, múltiplas, um documento inteiro ou vários documentos. 

Existe porque, como elementos de design, como fontes e cores, foram desenvolvidos, os web designers tiveram muitos problemas para adaptar o HTML a esses novos recursos.

Veja bem, o HTML, desenvolvido em 1990, não pretendia realmente mostrar nenhuma informação de formatação física. Originalmente, o objetivo era apenas definir o conteúdo estrutural de um documento, como cabeçalhos versus parágrafos. 

O HTML superou esses novos recursos de design, e o CSS foi inventado e lançado em 1996: Toda a formatação pode ser removida dos documentos HTML e armazenada em arquivos CSS (.css) separados.

>> Veja o treinamento completo que recomendamos para você começar hoje mesmo a criar seu negócio na internet.

Então, o que exatamente significa CSS? 

Significa folhas de estilo em cascata – e “folha de estilos” refere-se ao próprio documento. 

Cada navegador possui uma folha de estilos padrão, portanto, cada página da Web é afetada por pelo menos uma folha de estilos – a folha de estilos padrão de qualquer navegador que o visitante da página esteja usando – independentemente de o web designer aplicar ou não estilos . 

Por exemplo, o estilo de fonte padrão do meu navegador é Times New Roman, tamanho 12, por isso, se eu visitasse uma página em que o designer não aplicasse uma folha de estilo própria, veria a página em Times New Roman, tamanho 12 .

Obviamente, a grande maioria das páginas que visito não usa Times New Roman, tamanho 12 – isso ocorre porque os web designers por trás dessas páginas começaram com uma folha de estilo padrão que tinha um estilo de fonte padrão e substituíram a formatação do meu navegador com CSS personalizado. 

É aí que a palavra “cascata” entra em jogo. Pense em uma cachoeira – quando a água cai em cascata no outono, ela atinge todas as rochas no caminho, mas apenas as rochas na parte inferior afetam onde acabará fluindo. 

Da mesma forma, a última folha de estilos definida informa ao meu navegador quais instruções têm precedência.

JavaScript

O JavaScript é uma linguagem mais complicada que o HTML ou CSS, e não foi lançado na versão beta até 1995.

Atualmente, o JavaScript é suportado por todos os navegadores da web modernos e é usado em quase todos os sites para uma funcionalidade mais poderosa e complexa.

Para que serve o JavaScript?

JavaScript é uma linguagem de programação baseada em lógica que pode ser usada para modificar o conteúdo do site e fazê-lo se comportar de maneiras diferentes em resposta às ações do usuário. Os usos comuns do JavaScript incluem caixas de confirmação, call-to-actions e adição de novas identidades às informações existentes.

Em resumo, o JavaScript é uma linguagem de programação que permite que desenvolvedores Web projetem sites interativos. 

A maior parte do comportamento dinâmico que você verá em uma página é graças ao JavaScript, que aumenta os controles e comportamentos padrão de um navegador.

Criando caixas de confirmação

Um exemplo de JavaScript em ação são as caixas que aparecem na tela. 

Pense na última vez em que você inseriu suas informações em um formulário online e uma caixa de confirmação apareceu, solicitando que você pressione “OK” ou “Cancelar” para continuar. 

Isso foi possível devido ao JavaScript – no código, você encontrará uma instrução “if … else …” que informa ao computador para fazer uma coisa se o usuário clicar em “OK” e outra se o usuário clica em “Cancelar”.

Acionando CTAs de slides

Outro exemplo de JavaScript em ação é uma chamada de ação (CTA) deslizando, como as que são colocadas em postagens no blog, que aparece no canto inferior direito da tela quando você desce até o final da página.

>>> Veja aqui os Cursos Online que recomendamos pra você!

Armazenando novas informações

O JavaScript é particularmente útil para atribuir novas identidades aos elementos existentes do site, de acordo com as decisões que o usuário toma ao visitar a página. 

Por exemplo, digamos que você esteja criando uma página de destino com um formulário do qual você gostaria de gerar leads capturando informações sobre o visitante de um site. Você pode ter uma “comando” de JavaScript dedicada ao primeiro nome do usuário. Essa string pode ser algo como isto:

 function updateFirstname() {
    let Firstname = prompt('Primeiro Nome');
 } 

Em seguida, depois que o visitante do site digitar seu primeiro nome – e qualquer outra informação necessária na página de destino – e enviar o formulário, essa ação atualizará a identidade do elemento “Primeiro nome” inicialmente indefinido em seu código. 

Veja como você pode agradecer ao visitante do site pelo nome em JavaScript:

 para.textContent = 'Obrigado', + Firstname + "! Agora você pode fazer o
 download do seu e-book. " 

Na sequência de JavaScript acima, o elemento “Firstname” recebeu o primeiro nome do visitante do site e, portanto, produzirá seu primeiro nome real no front-end da página. 

Para um usuário chamado Kevin, a frase seria assim:

Obrigado Kevin! Agora você pode baixar seu e-book.

Segurança, jogos e efeitos especiais

Outros usos do JavaScript incluem criação de senha de segurança, formulários de verificação, jogos interativos, animações e efeitos especiais. 

Também é usado para criar aplicativos móveis e aplicativos baseados em servidor. Você pode adicionar JavaScript a um documento HTML adicionando esses “scripts” ou trechos de código JavaScript ao cabeçalho ou corpo do documento.

A parte mais difícil da codificação está começando – mas depois que você aprender o básico, será mais fácil aprender linguagens de programação mais avançadas.

Confie em mim, você vai se sentir melhor.