Nesse post, meu objetivo é mostrar alguns conceitos básicos que são essenciais para todo desenvolvedor web, dentre eles, o HTML e CSS – O que são? Como funciona? onde vivem? 🙂
Ahh, antes de continuar você precisa saber que esse post faz parte de uma sequência de posts que estou preparando para vocês. Clique aqui e acesse!
Back-end ou Front-end?
Antes de falarmos sobre essas linguagens, precisamos entender a diferença entre back e front end.
Back end é a parte que o usuário não consegue enxergar, mas que precisa estar lá para uma aplicação funcionar, como por exemplo, um banco de dados. É a parte que roda em um servidor, onde fica toda a parte lógica da aplicação. De maneira geral, o desenvolvedor Back end é responsável por fazer uma conexão/manipulação entre os dados oriundos do navegador com um banco de dados, e vice-versa, podendo usar tecnologias como PHP, Java, C# etc.
O Front end é a parte visual de um site ou aplicação, aquela que conseguimos interagir. É a parte que roda no dispositivo da pessoa que está usando a aplicação, onde fica toda parte visual e interação com o usuário. O desenvolvedor Front end é responsável por codificar uma interface gráfica, normalmente com as tecnologias mais básicas da Web, como HTML, CSS e JavaScript.
Certo, Van, mas e o Full Stack?
O full stack é o cara que trabalha com tudo isso e mais um pouco rs. Mas a caminhada é bem longa. Eu, Vanessa, optei por trilhar o caminho do Front-End, então vem comigo e vamos aprender juntos, do zero.
HTML e CSS, qual a diferença?
HTML (Hyper Text Markup Language) é o esqueleto/estrutura de uma página. Trata-se de uma linguagem de marcação de texto feita para indicar para o navegador qual o tipo de conteúdo que está sendo colocado em uma página, como um título, um parágrafo, uma imagem, um link para outra página etc. E sabe quando essa linguagem nasceu? 1991, por um cara chamado Tim Berners-Lee, com o intuito de possibilitar o compartilhamento de documentos de forma mais prática.
Quer saber mais? clique aqui.
CSS (Cascading Style Sheet) é uma linguagem criada para estilizar coisas em uma página web, como tamanho de fontes, cores de caixas, efeitos visuais etc. Ou seja, se você não tiver uma estrutura, não tem o que ser estilizado. Então primeiro a gente aprende a montar uma casa e depois a gente coloca portas, janelas e a pintura. A princípio, toda a parte estética era escrita no mesmo arquivo da parte estrutural, tornando o código gigante e de difícil entendimento; então, em 1995, foi criado o CSS para cuidar apenas parte estética da página, de forma separada da estrutura.
Quer saber mais? clique aqui.
Mas como eu conecto essas duas coisas? Vem comigo.
Configurando o CSS
Existem três formas diferentes para configurarmos nosso CSS.
CSS inline: na mesma linha que temos uma tag HTML, adicionamos uma propriedade do CSS (style) e essa recebe o atributo cor. O problema dessa forma é que precisamos repetir o mesmo comando em todas as tags <p> que quisermos a mesma formatação, e pior, caso eu queira mudar a cor “cyan” para “red”, seria necessário refazer todas as linhas manualmente.
// Aqui a propriedade style, que está dentro da tag <p>, recebe a cor.
<p style="color: cyan"> Esse modo é inline </p>Tag style: aqui definimos essa tag lá no <head> e dentro dela inserimos uma marcação, como p, e colocamos as propriedades do nosso interesse. Assim, quando alterarmos um parágrafo, todos os demais seguem a mesma formatação, no nosso caso, a cor cyan.
// Aqui é preciso abrir a tag <style> e dentro dela colocamos o p{ }. Logo, todos os p receberão a mesma formatação.
<style>
p {
color: cyan
}
</style>
<p> Esse modo é com uso de tag style </p>Arquivo externo: forma mais comum onde podemos usar a mesma estilização, ou seja, o mesmo arquivo CSS para mais de uma página HTML.
// Para linkar o CSS no arquivo HTML:
<head>
<link rel="stylesheet" href="nomedoarquivo.css">
</head>Agora que já sabemos isso, podemos começar a aprender os primeiros passos. Bora? Então clica aqui e vamo aprender comigo.
