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!
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 (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.
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.
Esse post foi modificado em 23 de janeiro de 2022 10:07
This website uses cookies.