Criando um projeto simples em HTML, CSS e um tiquinho de Javascript

Hoje vamos falar sobre HTML e CSS, mostrando alguns fundamentos que eles oferecem e como usamos essas marcações em nossas páginas e, para isso, vamos construir uma página simples que gera links de compartilhamento para diversas ferramentas da web. 

Como sempre, os exemplos utilizados e comentados estão no repositório em nosso GitHub e também em nosso CodePen que utilizamos para mostrar aqui na página as versões em tempo real.

Olá, caso seja a sua primeira vez aqui, nosso conteúdo é voltado a INOVAÇÃO (e para quem gosta de tecnologia/programação e está começando ou é de outra área) e, em especial, esta série é voltada à PROGRAMAÇÃO PARA INICIANTES.

Este assunto ainda será abordado em um vídeo em nosso canal no YouTube, que é um espaço em que compartilho algumas opiniões, dicas e projetos com outros interessados em tecnologia, seja você programador ou entusiasta. Aproveita para se inscrever lá e não perder os próximos vídeos, prometo que farei conteúdos interessantes e algumas lives com "coding sessions" bem legais.

Assim que postar o vídeo eu atualizo o post aqui para refletir o conteúdo.

Tudo certo? Então vem comigo.

O que é o HTML e CSS?

Se você está começando no mundo do desenvolvimento web, já deve ter ouvido falar em HTML (Hypertext Markup Language). E CSS (Cascading Style Sheets), ouviu falar? 

Há muita discussão se saber HTML é saber programação (spoiler, não é!) mas o fato é que todo mundo que se dedica ao desenvolvimento web precisa saber como funciona o HTML e o CSS para construir aplicações que rodem no navegador. De certa maneira é possível dizer que HTML e CSS são a "espinha dorsal" do desenvolvimento web.

Para quem é iniciante, aprender a base do HTML e CSS é um passo obrigatório e será certamente útil em qualquer aplicação web que você precisar desenvolver.

Como funciona o HTML?

Quando você acessa um site por meio de um navegador da Internet (Chrome, Firefox, Internet Explorer), esse navegador vai procurar por um arquivo que contém um código e será interpretado antes de ser exibido a você. 

Esse arquivo que contém código pode ter várias extensões possíveis, dependendo da tecnologia utilizada no site (como asp, php) mas, no final das contas, ainda que existam outras tecnologias possíveis o navegador receberá um código HTML. 

No caso mais simples e sem outras tecnologias envolvidas você pode ter uma página de extensão .htm ou .html que contém o código HTML e o seu navegador o interpretará.

Tags HTML

Os navegadores não são muito "exigentes" para interpretar código HTML, já que é uma sintaxe de markup e não uma linguagem de programação propriamente dita. 

Por exemplo, se você criar arquivos em seu computador chamados "Test_1.html", "Test_2.html" e "Test_3.html", e colocar os seguintes conteúdos, um de cada vez, todos abrirão no navegador da mesma forma:

Test_1.html

See the Pen Test_1.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

Test_2.html

See the Pen Test_2.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

Test_3.html

See the Pen Teste_3.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

Como podem perceber, o conteúdo desses três arquivos é diferente mas se testarem aí o resultado será igual.

Estão vendo essas palavras dentro dos sinais de maior e menor? Essas são tags HTML e indicam onde começa e onde termina (aquelas que fecham com "/") algum item do seu código. Por exemplo, quando digitamos <p> queremos indicar que ali tem um parágrafo, e que ele vai até onde o </p> aparecer.

E esse é mais ou menos o princípio para as demais tags HTML.

Algumas tags como "<img>" (para inserir uma imagem) não tem a tag de fechamento (não tem a "</img>") e, nesses casos, você pode "fechar" a tag nela mesma. colocando o "/" ao final da tag, assim:

<img src="imageurl" />

Tags HTML Básicas

Para montar um documento HTML você pode utilizar as tags HTML mais comuns e que atenderão possivelmente boa parte das suas necessidades -- veja o exemplo abaixo que contém essas tags mais comuns:

See the Pen example_basichtmlpage.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

Neste documento simples HTML temos o seguinte (esses comentários também estão no documento dentro do nosso repo):

  <!DOCTYPE html> Indica ao navegador que estamos lidando com um documento HTML

  <html>  Indica que o documento HTML começa aqui

  <head>  Traz informações que são necessárias ao documento mas que

          não representam elementos na página renderizada. Podemos

          incluir aqui, por exemplo, scripts, estilos CSS, informações

          sobre o título, links e meta-tags.

  <title> É o título da página e que aparece na aba do navegador

  <body>  Aqui começa o "corpo" do documento, e é onde todos os elementos

          que devem aparecer na página renderizada devem estar.

  <div>   Um dos elementos mais utilizados principalmente para organização

          de elementos na tela, o div é como se fosse uma "divisão" da

          página. Ao colocar um <div> a sua página terá aquele elemento que

          representa uma divisão no documento que possui algum conteúdo que

          deve ser exibido.

  <h1>    É um cabeçalho no documento (header), sendo h1 o maior e h6 o menor.

  <em>    Deixa o texto destacado (geralmente itálico e poderia ser <i> também,

          mas <em> é melhor para acessibilidade já que pode ser interpretado

          em softwares para leitura)

  <strong>Deixa o texto negritado (poderia ser <b> também, mas strong é melhor

          para acessibilidade)

  <br />  Pula uma linha: vem de break

  <p>     Um parágrafo

  <span>  É também uma divisão, mas esta ocorre na própria linha. Serve para

          segmentar o texto.

  <a>     Representa um link

  <img /> Representa uma imagem

  <input /> Campo de entrada de dados (formulario)

  <ul>    Lista não ordenada (bullet points)

  <ol>    Lista ordenada (numerada)

  <li>    Item de lista

  <table> Tabela

  <tr>    Linha da tabela

  <td>    Coluna da tabela

<!-- -->Tag de comentários: tudo o que estiver dentro dessa marcação não será

          renderizado

Outras Tags HTML: "HTML AVANÇADO"

Quando se fala em HTML é comum que os desenvolvedores acabem simplificando tudo e jogando apenas os elementos mais comuns. Por exemplo, em qualquer página que você encontrar provavelmente vai encontrar uma série de elementos <div> já que são usados para criar divisões na página.  

Isso não é errado em si e decorre do funcionamento do HTML antes do HTML5, mas há vantagens em se utilizar tags específicas para diferentes partes do documento, principalmente quando se fala em acessibilidade de usuários (usuários com deficiência visual, por exemplo) e mesmo em relação à leitura do seu documento por mecanismos de busca.

Mas você sabia que o HTML e, principalmente o HTML5, possui muitas funções interessantes para dar aquele "up" na sua página? Vamos listar alguns deles aqui em um modo "HTML Avançado", se é que dá pra falar isso 🤣

Tags HTML5

Com o HTML5 foram introduzidas as chamadas Tags Semânticas, que tem o objetivo de descrever alguns blocos de código que possuem funções específicas na página e que são bastante comuns. Antes do HTML5 tudo era feito em <div> mas é boa prática usar tags semânticas quando possível.

Ao colocar essas tags sem qualquer outro estilo, você verá apenas linhas uma abaixo da outra. Para fazer o uso correto dessas tags você deverá complementá-las com o restante visual da página para um layout correto (leia-se CSS, que abordaremos mais adiante).

See the Pen example_html5page.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

E neste documento com as tags semânticas temos o seguinte:

  <header>      Cabeçalho da página, em que você pode colocar um banner

                por exemplo

  <nav>         Navegação: geralmente um menu de navegação

  <aside>       Menu lateral

  <main>        Local em que se encontra o conteúdo principal da página

  <section>     Em não havendo tags semânticas mais específicas, você

                pode utilizar uma <section> para indicar uma seção na página

  <footer>      Rodapé da página

Mais tags e atributos HTML interessantes

Hoje temos muito mais possibilidades com o HTML do que você poderia imaginar há anos atrás. E isso é muito positivo pois elimina a necessidade de utilizar Javascript, por exemplo, em um monte de casos.

Vamos ver algumas tags e atributos de tags HTML interessantes:

See the Pen example_unusualhtml.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

Precisa de mais? Encontrei aqui na Internet um site bem interessante que tem muitas referências e exemplos de HTML que você pode usar: https://htmlcheatsheet.com/

COMO FUNCIONA O CSS?

O combo HTML + CSS é o que fará a sua página web mais próxima do resultado final.

Quando você monta o HTML, na verdade está montando a estrutura e conteúdo da sua página. Ali você define os elementos que compõem a página, texto e imagens que ele deverá carregar. Mas ainda assim, isso é o texto "cru", como um esqueleto. Para fazer com que a sua página tenha um visual mais refinado, você precisará utilizar CSS. 

O CSS permite que você estilize cada um dos elementos HTML da sua página, conferindo propriedades visuais que apenas o HTML não é capaz de fornecer.

Para usar o CSS em seu HTML você possui três opções:

- CSS Inline

- CSS Interno

- CSS Externo

CSS Inline

No CSS Inline você utiliza os estilos que deseja dentro do elemento HTML com um atributo style, da seguinte forma:

<p style="font-weight:bold">Sample text</p>

CSS Interno

No CSS Interno podemos adicionar uma tag <style> dentro da tag <head> no HTML, definindo ali os estilos desejados. 

<style>

  p{

    font-weight: bold;

  }

</style>

<p>Sample text</p>

CSS Externo

Finalmente, podemos incluir um arquivo CSS Externo que contenha os estilos desejados, colocando uma tag <link> dentro da tag <head>

<!DOCTYPE html>

<html>

<head>

  <title>Page Title</title>

  <link rel='stylesheet' type='text/css' href='main.css'>

</head>

<body>

  <p>Sample text</p>

</body>

</html>

main.css

p{

  font-weight: bold;

}

Independentemente da forma que você resolver usar o CSS na sua página, basta saber que basicamente você precisa indicar o elemento, tipo de elemento ou classe de um elemento que será alterado visualmente e, após, indicar quais propriedades serão alteradas. Basicamente:

See the Pen example_basiccss.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

Trabalhar com CSS possibilita que você faça MUITA coisa, levando o seu HTML a outro nível. Em alguns próximos conteúdos vamos falar um pouco de mais de CSS e vou mostrar a vocês como é possível fazer coisas muito extremas com CSS e que vocês nem imaginam!

Se você quiser uma referência de CSS, pode usar o mesmo site de HTML que mencionamos acima, já que ele tem uma seção para CSS também: https://htmlcheatsheet.com/css/

CRIANDO UM PROJETO SIMPLES COM HTML E CSS

E agora que finalmente cobrimos o básico do funcionamento do HTML e do CSS, vamos colocar a mão na massa e montar um projetinho simples que use principalmente HTML e CSS, trazendo alguma utilidade por menor que seja.

Para o nosso projeto vamos criar um site que recebe um texto e prepara o código HTML para que o usuário possa criar um link de compartilhamento daquele texto em diferentes mídias sociais: WhatsApp, Facebook, Twitter, etc. O programa em si é bem simples, mas é uma boa oportunidade para mostrarmos a aplicação de conceitos de HTML e CSS na prática.

O resultado final você encontra aqui: https://octaviosi.github.io/link-share-generator/

E você pode conferir todo o código fonte utilizado aqui em nosso repositório no GitHub: https://github.com/OctavioSI/link-share-generator

O que faz este projeto?

Pensei em fazer este projeto após encontrar essa lista de links de compartilhamento para redes sociais montada pelo @markodenic nesse gist do GitHub: https://gist.github.com/markodenic/592f4196623690caf83379f2b33a4c9f

Em realidade, se você já tiver essa lista o seu problema está resolvido, mas aproveitei a ideia para montar um programinha muito simples mostrando como podemos usar HTML para montar a estrutura de um programa, o CSS para conferir uma camada estética melhor e finalmente um pouco de Javascript para dar alguma funcionalidade. Como sempre, o código está todo comentado com alguns pontos que julguei relevantes para que vocês consigam acompanhar o que foi feito.

Ao acessar o repo deste projeto (https://github.com/OctavioSI/link-share-generator) você verá três arquivos na pasta principal: index.html, main.js e main.css.

Analise o arquivo index.html para encontrar todos os elementos que compõem a nossa página, como botões, textos e campos de input.

No arquivo main.css você encontrará os estilos utilizados no texto e ícones presentes na tela.

Finalmente, no arquivo main.js você encontrará algumas funções que tornam o nosso programa útil, permitindo que o programa seja mais interativo com o que é chamado na tela.

Recomendo que leiam os comentários que deixei nos arquivos e interpretem o código também. Analisar o código de outras pessoas é uma ótima forma de aprender mais sobre programação. Sugestões são sempre bem-vindas. 😀

/* Fim do post, até a próxima! */