Estuda agora, paga quando começares a trabalhar com o ISA - Para mais informações!
Voltar para todos os artigos

2 de maio de 2024 - 7 minutes

As diferenças entre HTML, CSS e Javascript (e algumas ótimas dicas para construir seu primeiro site!)

Together, HTML, CSS, and JavaScript come together to create an incredible website that your audience will love.

Juliette Carreiro

Tech Writer

Articles by Juliette

Já acenou com a cabeça para dizer que entendia algo, mas secretamente não entendeu? E então você fica como, Oh, meu Deus, por que eu fiz isso? E quando se apercebe, é-lhe feita uma pergunta sobre aquela coisa de que disse ter conhecimento ou pior, foi-lhe atribuída uma tarefa para fazer aquela coisa de que disse ter conhecimento. Pesadelo! Bem, para sua sorte, se continuar lendo, não terá esse problema quando se trata de CSS, HTML e Javascript. Mas talvez ainda o faça em outros aspectos de sua vida, como tentar impressionar alguém em um encontro. Você: "oh sim, eu adoro essa banda" - *banda na casa de banho* (a propósito, devias mesmo parar de fazer isso), mas ei, uma coisa de cada vez, somos apenas humanos ;). 

De qualquer forma, vamos direto ao assunto, certo? Se esteve a brincar com a ideia de construir o seu próprio sítio web ou se alguma vez teve de gerir o de outra pessoa, muito provavelmente já se deparou com HTML, CSS e Javascript. Esses são os três blocos de construção principais de qualquer sítio ou página da web. Eles trabalham juntos, mas, como explicaremos, todos desempenham papéis distintos quando se trata de codificação e criação da web. 

O que é HTML?

Talvez em alguma fase da sua vida, tenha clicado no pequeno ícone HTML (</>) e visto muito do que parece ser texto, e símbolos aleatórios e confusos que o fazem saltar e sentir que entrou em alguma versão confusa e de baixo orçamento do The Matrix e pressionou Esc um monte de vezes para esperar que tudo desaparecesse? E rezou para não ter estragado nada? Esse, meu amigo, é o mundo do HTML; prometemos que não é tão assustador ou mesmo confuso quanto parece. Depois de entender, é uma outra língua ou mundo que se passa a apreciar e talvez até amar. Então, vamos começar com a abreviatura de HTML; é o acrónimo de Hypertext Markup Language. O hipertexto é essencialmente o "texto estrutural", e uma linguagem de marcação é uma "linguagem" ou "conteúdo" especial que os computadores entendem, que foi originalmente projetado para descrever páginas da web e tornar o conteúdo interativo; pense nisso como o esqueleto de um sítio. O HTML foi lançado em 1989 como uma linguagem editorial oficial da World Wide Web e é o bloco inicial de construção da página web. Existem três elementos principais de HTML; tags, elementos e atributos, e sua versão mais recente é HTML5. O HTML5 ainda carrega todas as marcas registradas originais do HTML regular, é mais dinâmico e incorpora muito menos código, mas ainda permite que se crie algo brilhante em um instante!

O que é CSS?

CSS são duas coisas críticas. É uma banda assassina de rock alternativo dos anos 2000, para a qual recomendamos fortemente que você acompanhe o ritmo! Mas CSS, para os objetivos diretos deste artigo e de seu conhecimento, também é um bloco de construção essencial para codificar seu sítio!

Assim, CSS no mundo da tecnologia significa Cascade Styling Sheets (quão fixe é isso?!). Como o nome sugere, CSS define a aparência e o estilo do site. Ajuda a determinar a cor, as fontes, o posicionamento de certos elementos e até um pouco de animação. Isso significa que CSS constitui uma parte muito importante do seu site, sendo os elementos visuais e estéticos. O CSS seguiu a criação do HTML para fazer os sites parecerem mais bonitos e, de facto, pareciam de outra forma, os sites apenas teriam a mesma aparência, preto e branco, alguns hiperlinks em azul e às vezes uma nova fonte romana (CHATO!). Portanto, se HTML é o esqueleto, CSS é a pele, os olhos, o cabelo, o nariz e os pés de um website que o torna único e distinguível. 

Portanto, embora HTML e CSS funcionem bem juntos, eles são linguagens bastante distintas. E aprender os dois significa que também pode usá-los separadamente, já que ambos têm uma infinidade de aplicações diferentes! Pode concentrar-se nestes dois e construir um website com o nosso perito Uros Cirkovic em apenas 60 minutos, GRATUITAMENTE. Parece bastante bom, um pouco bom demais, mas prometemos não haver surpresas ocultas, apenas excelente conhecimento, e no final, terá o seu próprio website. Interessado? Veja "Como construir um website com HTML e CSS em 60 minutos". 

Muito bem, estamos quase lá ...

O que é Javascript?

É aqui que as coisas ficam um pouco mais complicadas. Javascript está presente em quase todos os sites funcionais e permite que os sítios web sejam dinâmicos e interativos. É a linguagem que os criadores da web utilizam para criar sítios web que respondem aos comandos e movimentos do utilizador. E o Javascript pode realmente dar-lhe o poder de alterar o HTML e o CSS num website. É como o mestre de marionetas.

Por exemplo, com Javascript, pode fazer o seguinte:

  • Reproduza uma prévia quando o cursor passar sobre um vídeo

  • Reproduza uma animação ao rolar para baixo

  • Faça aparecer um menu quando se carrega num botão do teclado

  • Crie atalhos de teclado para seu sítio

  • Crie uma galeria de fotos em movimento para que os usuários possam alternar entre os slides

E a lista continua... 

Como esses três funcionam juntos?

Um breve exemplo: se tiver uma loja de moda online e a primeira coisa que obtém em seu site é um pop-up "10% de desconto para se inscrever hoje", isso é Javascript. Enquanto HTML é o preço, tamanhos, descrição, imagem do artigo, etc., e CSS será o aspecto da sua loja online, as cores, tipo de letra, tamanho da imagem, quadros e muito mais. 

Agora que sabe a diferença entre HTML, CSS e Javascript e como eles se ajudam mutuamente, temos algumas dicas essenciais para começar a planear o seu website. E lembre-se, este é um processo do qual se pode realmente desfrutar!

 

8 dicas que deve seguir para construir um sítio do zero

1. Escolha!

Escolha o que quer pôr em prática, como escrever um CV, Portfolio, ou página de destino sobre uma determinada oferta de serviço.

2. Pode, por favor, não se concentrar em como ele se parece neste estágio? 

Tire essa pressão imediatamente! Em breve, poderá "brilhar" o seu sítio web, mas só precisa de ter a estrutura e o conteúdo ordenados nesta fase.

3. Escabroso!

Há uma razão para a palavra rascunho; é uma cópia rudimentar da sua brilhante ideia que em breve se tornará realidade. Pense nisso como um diamante bruto que logo será lapidado.

4. Pense sobre a estrutura 

Pode sempre olhar para outros sítios web de que gosta para se inspirar, mas mantenha-o simples para começar. Por exemplo, pense onde quer que a navegação principal esteja e o que quer no rodapé da página. Honestamente, muitos de nós, desenvolvedores, simplesmente pegamos uma caneta e papel e desenhamos rapidamente para imaginar o layout básico (muitos de nós ainda desenham pior do que crianças de 7 anos, então não espere uma obra-prima; não precisa dela aqui) .

5. Pratique suas habilidades de redator

Pode adicionar um pouco de lorem ipsum neste momento, mas se sentir que sua criatividade está fluindo, apenas escreva-a grosseiramente. Isto poupar-lhe de voltar, pois o texto estará lá, pronto e à espera. Além disso, se, por exemplo, optar por praticar seu Portfólio, pense em algumas linhas sobre o que faz e quem é e as áreas em que trabalha e sua experiência de trabalho e educação.

6. Verifique algumas referências de design com antecedência.

Faça alguma pesquisa de inspiração visual. Quando se trata de CSS, terá que pensar no design em si, como largura, altura, margem, preenchimento, posição, cor de fundo, tamanho da fonte, etc. Por isso, recomendamos-lhe que visite alguns sítios web que goste como ponto de referência para ter um conceito visual mais claro.

7. Faça isso assistindo ao nosso webinar :)

Permita-nos ajudá-lo! Confie em nós, é muito mais fácil, e somos muito amigáveis :). Portanto, temos certeza de que a experiência de aprendizagem será divertida e fácil de absorver, em vez de ler e tentar tudo sozinho. Nosso webinar é quase como uma aula particular, e será feito em apenas 60 minutos!

8. Celebre!

Oooh sim, conseguiste! Seja o que for que pareça, você deu um salto gigante! E para tornar esse processo mais agradável, é hora de comemorar! Taça de vinho? Dançar em seu quarto com sua música favorita? Abraçar alguém que se ama? Seja o que for, nós o encorajamos fortemente! 

Assim, agora que leu este artigo e sabe uma ou duas coisas sobre a construção de um website a partir do zero, talvez esteja a pensar, "isto é interessante", "eu gosto disto", "eu poderia fazer isto como um trabalho". Pense em todas as celebrações que vai ter de fazer. Mas com toda a honestidade, pode fazer uma carreira séria a partir disso e se tornar um profissional total (acredite, será muito solicitado!). Por isso, se está a sonhar em grande e quer tornar-se um mestre em Desenvolvimento Web, veja aqui os nossos Bootcamps !

 

Artigos Relacionados

Recomendado para você

Pronto para te juntares a nós?

Mais de 11,000 amantes de tecnologia lançaram as suas carreiras na indústria da tecnologia com os bootcamps da Ironhack. Começa esta nova jornada e faz parte da revolução tecnológica!