DESENVOLVIMENTO WEB
CSS e HTML explicados para iniciantes: Parte 1
Primeiros passos para aprender a desenvolver páginas de internet
Algumas pessoas dizem que a melhor maneira de aprender algo é ensinando outras pessoas. Então, esta é minha tentativa de explicar as linguagens CSS e HTML em termos mais simples, para que iniciantes possam seguir estas etapas para iniciarem sua jornada na área de desenvolvimento web.
Neste artigo, abordaremos o que são CSS e HTML, e como desenvolvedores podem construir páginas web usando estas linguagens. A lógica por trás disso é semelhante a desenhar. Quer saber como? 🧑🎨
Introdução
Você provavelmente é um artista melhor do que eu, mas tenho certeza de que pelo menos uma vez você começou um desenho assim: primeiro, você desenha uma cabeça, com um famoso círculo; e então, fez uma linha reta de corpo, com membros superiores e inferiores.
Seu desenho provavelmente será algo assim:
Então, o que isto tem a ver com CSS e HTML? Que bom que você perguntou!
Se você deseja que um navegador de internet conheça a estrutura para renderizar uma página web, você deve apresentar-lhe uma estrutura.
HTML, e a estrutura de páginas 🏋️
Então aí vem o HyperText Markup Language (ou seu acrônimo, o HTML): ele informa ao navegador web onde os elementos estão localizados, e como eles existem.
💡 Como você percebeu, por definição, HTML é uma linguagem de marcação, e não uma linguagem de programação. Ela não contém nenhuma variável ou função, então não podemos fazer um aplicativo totalmente funcional, nem interagir diretamente com os elementos da página apenas usando HTML. Para isto, podemos usar JavaScript ou outra linguagem de programação.
Por padrão, os navegadores web mais modernos sabem como renderizar um parágrafo, um botão ou um campo de texto, mesmo que você não informe como estes devem aparecer. Isto é definido pelas Especificações do HTML e pelas definições padrão de folhas de estilo CSS na maioria dos navegadores.
Na verdade, esses elementos não têm a mesma aparência em todos os navegadores web. Por isso, há algumas ferramentas que ajudam os desenvolvedores para fazer com que tudo pareça “padronizado”, tais como o normalize.css.
Além disso, em HTML, podemos fazer com que o navegador se comporte de uma maneira determinada, importando algumas “bibliotecas” (que podem conter muitas funções, para que os desenvolvedores não tenham que reescrever, ou criar, repetidas vezes o mesmo código), e contendo alguns metadados, como o title, a linguagem (lang), o modo de visualização (viewport) e o padrão de codificação encoding de caracteres (geralmente, os desenvolvedores utilizam o UTF-8, que contém muitas das entidades que estamos acostumados a ler em inglês).
Essas bibliotecas e metadados são muito importantes para fazer o navegador web renderizar corretamente a página, portanto, podemos carregá-las antes mesmo que o navegador termine a tarefa de renderização da página. É por isso que normalmente o chamamos no cabeçalho, ou head, antes de definidos quais são os elementos, ou mesmo como eles devem ser estilizados.
Os elementos, logo após o head ser carregado, estão localizados no corpo da página web, ou body. E estes elementos podem ser "aninhados", como "galhos" (do inglês, branches) de uma árvore.
Portanto, essa é a estrutura básica do HTML, ou a estrutura de uma página web. Uma página real pode ter a seguinte aparência:
Observe como essa linguagem de marcação funciona: os elementos, como o title, o cabeçalho h1 e o parágrafo (p) são expressos começando com < e terminando com />. Além disso, existem dois elementos “dentro” do <html>: o head, que contém o elemento title; e o body, onde a maioria dos elementos estão localizados e exibidos no navegador web.
💡 Não se preocupe se você ainda não entendeu totalmente o que esse código faz. Estamos apenas começando e, se você chegou até esta parte, parabéns, você já está progredindo! 👏
CSS, e a aparência da página 💄
Agora, vamos voltar ao nosso desenho. Com certeza podemos torná-lo mais elegante, engraçado ou até sexy. Então, vamos colocar um pouco mais de cor em nosso personagem.
Podemos mudar a aparência dos elementos ou a aparência de toda a página adicionando algumas cores e efeitos em nosso desenho. Para ilustrar isso, podemos transformar nosso design em algo completamente diferente e mais “profissional”, como o “Desenho de Cavalo Inacabado”, o qual você provavelmente já conhece:
Essa é a magia do CSS, ou Cascading Style Sheets: esta “folha de estilos em cascata” informa ao navegador web como esses elementos e a estrutura da página web devem ser exibidos, a fim de renderizá-la corretamente.
Ajustando nosso arquivo CSS — você pode incluí-lo no head, ou no body, de nosso arquivo HTML, dependendo de quando queremos que ele seja carregado pelo navegador —, as alterações serão aplicadas assim que abrimos a página, ou logo após todos os elementos serem renderizados.
O CSS também pode fazer alterações na estrutura da página web. Ele pode conter regras para criar colunas ou linhas, como uma tabela, por exemplo, para exibição dos elementos. Além disso, o CSS pode ordenar as posições dos elementos entre si no espaço tridimensional(!).
Você provavelmente está familiarizado com os eixos X, Y e Z, certo? Nos arquivos CSS, podemos alterar a posição e a escala dos elementos, mas também o z-index, que informa a ordem dos elementos relacionados entre si: elementos com valores menores são posicionados mais ao fundo, e valores maiores, trazidos à frente, como em uma imagem 3D.
Um arquivo CSS básico pode apresentar a seguinte aparência:
A sintaxe do CSS, ou Cascading Style-Sheet, é diferente da linguagem de marcação HTML: os elementos são identificados por seu seletor, como o h1, do HTML; em seguida, seguidos por uma propriedade e seu respectivo valor, como color: blue; em nosso exemplo anterior; as declarações contendo propriedades e valores são inseridas dentro dos caracteres { e }.
Existem excelentes tutoriais sobre como criar páginas web de melhor aparência, além de modelos e tendências de design, disponíveis gratuitamente na internet — você pode conferir mais tarde, usando as tags #webdev, #ui e #ux, por exemplo.
Recap 🧩
Terminamos, agora vamos recapitular. Compreendemos o básico de HTML, e aprendemos sobre as estruturas head e body, que contêm os elementos e informam o navegador de internet como renderizar a página corretamente. Também, aprendemos o básico de CSS, que é responsável por alterar a aparência das páginas e a disposição dos seus elementos antes e depois da página ser carregada.
Conclusão 🎉
O HTML5 e CSS3 (as versões atuais e mais recentes de cada um) podem ser usados para criar animações, padrões de design, e até jogos interativos. Os navegadores de internet, também, estão cada vez mais inteligentes, à medida que os desenvolvedores criam novas ferramentas e especificações técnicas para resolver muitos dos problemas que temos hoje em dia.
Também, os ramos de UI (do inglês, User Interface, ou Interface do Usuário) e de UX (do inglês, User Experience, ou Experiência do Usuário) continuam desenvolvendo novas maneiras de usar essas folhas de estilo e estruturas, criando interfaces úteis e cada vez melhores para nós, usuários da rede mundial de computadores.
Próximos passos 🚶♂️
Agora que entendemos o básico de CSS e HTML, gostaria de te convidar para seguir esta série, para que possamos aprender ainda mais sobre desenvolvimento web. No próximo artigo, vamos abordar como construir uma página da web do zero usando essas linguagens.
Para você, qual será a próxima novidade que os desenvolvedores irão criar nas próximas versões, no HTML6 ou no CSS4? E que tipo de design você deseja criar nas próximas etapas? Deixe sua sugestão nos comentários. 📢
Referências
[1] “CSS: Cascading Style Sheets” (em inglês), em MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS.
[2] “CSS Introduction” (em inglês), em W3Schools: https://www.w3schools.com/css/css_intro.asp.
[3] “HTML: HyperText Markup Language” (em inglês), em MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML.
[4] “HTML Standard” (em inglês), em WHATWG community: https://html.spec.whatwg.org/.
