Olá, aluno(a)! Na lição anterior, aprendemos sobre algumas funções que um desenvolvedor Front-End executa, vimos o que são tags em HTML e, também, as regras de negócio que envolvem o nosso cotidiano. Como devemos projetar uma ideia, na maioria das vezes, há uma necessidade do cliente em transformá-la em um produto digital. Nos dias de hoje, a tendência é utilizar tecnologias digitais, essas que facilitam e agilizam a nossa vida no dia a dia, de preferência, em alguns cliques. Por exemplo, imagine uma fila de banco, quanto tempo ficamos esperando a nossa vez para sermos atendidos. Você já chegou a imaginar, um dia, que existiria a era digital, em que podemos realizar transações, como transferências, pagamentos, pix, tudo pelo celular, laptop e computadores?

Nesta lição, aprofundaremos no HTML e aprenderemos a renderizar com a linguagem Cascading Style Sheets (CSS), ou seja, inserir estilos nas páginas de acordo com o trabalho ofertado pelos designers, que criam layouts para serem codificados pelos desenvolvedores de Front-End. Esses layouts são elaborados para exibirem uma aparência agradável e para que suas informações possam ser disseminadas e seus conteúdos sejam fáceis de serem encontrados.

Nos dias de hoje, muitas organizações precisam disseminar suas informações, de forma rápida e fácil de ser entendida. Pense em um site que foi desenvolvido pela equipe de designer para ser implementado e codificado pelo desenvolvedor de Front-End, que, também, faz parte da equipe. Assim, a função do desenvolvedor Front-End é implementar o HTML dessa página inicial e, depois, renderizá-la, por meio do CSS, e, por último, estruturar, com a linguagem JavaScript, aplicando a regra de negócio solicitada pelo cliente.

A função principal do desenvolvedor Front-End é dominar as três linguagens básicas de programação, como HTML, CSS e JavaScript. Pense como seria codificar uma página de internet, como a Netflix ou outra página de web do seu interesse. Quais os códigos utilizados que, ao pesquisar um filme ou, até mesmo, exibir a imagem do filme, precisam ser interpretados pelos navegadores web? É interessante dominar quais elementos que serão utilizados nas linguagens? Quais propriedades em CSS são inseridas para introduzir uma imagem de fundo, nomeada background? Se inserir um cadastro, como o site do iFood, como que se vinculam os dados do usuário com o login de suas redes sociais em que o próprio usuário está logado no momento de fazer seu pedido?

Todo este conhecimento é adquirido estudando e se aprofundando nestas linguagens e, também, na paciência em aprender e sempre se aperfeiçoar conforme surgem os avanços nas tecnologias. Primeiramente, o uso de um editor de texto ou editor online é obrigatório. Veremos algumas sugestões neste tópico. Outro fator importante está na estruturação em criar uma excelente semântica para todos os usuários terem acesso à informação disponibilizada pelo site. As tags em HTML devem ter uma semântica (estruturação) bem definida e validada pelo site da W3School (https://www.w3schools.com/). Todo desenvolvedor Front-End, ao estudar as propriedades dos elementos em HTML, deve saber se o seu código será aceito pelos navegadores de web, como: Google Chrome, Firefox, Safari, Opera, Internet Explorer e/ou Edge, entre outros. Precisa ter um norte para começar, ou seja, uma prova real que o seu código está correto. Por isso, é importante implementar seu código e validar o HTML no site da W3School.

Uma excelente dica, para implementar uma página de internet, é que todo o site se comporta em três etapas: entrada, processamento e saída, ou seja, o navegador recebe alguns dados, executa a lógica de programação inserida pelo desenvolvedor Front-End e apresenta a resposta. Como as linguagens de HTML, CSS e JavaScript são muito valorizadas por empresas de desenvolvimento de web pela propriedade de adicionar inúmeros recursos em suas páginas, temos uma interação entre os usuários e a criação de sites profissionais que atendem à necessidade dessas organizações.

Outra dificuldade que todo o desenvolvedor de Front-End encontra é definir qual editor de código deve ser adotado como ferramenta de desenvolvimento para codificação das linguagens. Alguns editores estão disponíveis online, como W3Schools ou um editor profissional que contém diversos recursos, facilitando o trabalho do desenvolvedor Front-End, como é o caso do editor Visual Studio Code. 

Nesta lição, desenvolveremos uma página de web por meio da linguagem HTML (Hypertext Markup Language), em que devemos criar um arquivo HTML e definir o conteúdo e a semântica dos elementos que compõem a página. Para implementar uma página de web, temos que dividir o site em três partes: cabeçalho, corpo e rodapé. No cabeçalho, devem constar as tags em HTML que serão implementadas. No corpo do site, precisamos demarcar os conteúdos propostos por meio de tags que melhor representam essas informações. Por último, no rodapé, deverão ter três blocos, sendo eles: horário de atendimento, fale conosco e monte sua pizza. Neste caso, podemos ter três tags “div” contendo seus conteúdos. Após a criação das tags HTML, temos que renderizar a página para ter a mesma semelhança proposta pelo designer da equipe. Assim, utilizaremos a linguagem CSS para isso.

O layout apresentado no tópico case apresenta uma lógica que pode ser adotada, lembrando que pode ser adotado diversos recursos para implementar o layout da página inicial. Estudaremos a semântica do HTML que será aplicado nesta seção. Primeiramente, adotaremos um editor de texto, que, no nosso caso, tem um disponível no mesmo site que valida o HTML: o W3schools, disponível no link: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default. Outra dica é adotar o bloco de notas, que é nativo do Windows, fica a seu critério. Dê um duplo clique, com o botão esquerdo do mouse, no link da W3schools ou, se preferir, acesse o navegador do Google Chrome instalado em seu sistema operacional Windows e copie e cole o link. Ao acessar o link da W3schools digite o código a seguir:

Analisemos as linhas: 

• Linha 1: na primeira linha, informamos ao navegador qual é a versão do HTML que adotaremos. Por exemplo, até a versão 4.0, o HTML era baseado no modo de Declaração de tipo de Documento (DTD). Assim, a declaração utilizada era: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">. A partir da versão 5.0, o HTML evoluiu apenas para esta declaração <!DOCTYPE html>, simplificando o seu entendimento.

• Linha 2:  é especificado o idioma da página, em nosso caso, adotamos pt-br, que é o padrão adotado para os sites hospedados com domínio em território brasileiro (LEPSEN, 2018).

• Linha 3, 7 e 8: inicializamos a abertura da tag <head>, que define a seção cabeçalho da página. Dentro dela, são inseridas três metatags e a tag <title>, que significa o título da página. Nesta tag, conseguimos colocar um título que será explícito na aba do navegador, ao acessar o site. Na sétima linha, fechamos a tag </head>.

• Linhas 4, 5 e 6:  na quarta linha, temos a metatag <meta charset="UTF-8">, que auxilia na acentuação de caracteres. Assim, a configuração é realizada no formato “UTF-8”, a mesma utilizada para conversão e correção de acentuação em banco de dados (SILVEIRA; ALMEIDA, 2013). Na quinta linha, temos a metatag <meta http-equiv="X-UA-Compatible" content="IE=edge">, que é empregada para a compatibilidade de todos os navegadores, principalmente conteúdos acessados pelos navegadores Internet Explorer e/ou Microsoft Edge. Esta metatag foi definida para todos os navegadores serem compatíveis com a linguagem de programação JavaScript. Na sexta linha, a metatag <meta name="viewport" content="width=device-width, initial-scale=1.0"> tem correlação com o processo de criação de página responsivas, ou seja, esta metatag consegue responder aos diversos tipos de dispositivos que os usuários possam acessar sua página, como computadores, laptops, tablets e smartphones (GRONER, 2018; LEPSEN, 2018).

• Linhas 9, 10 e 11: iniciamos com a tag <body>, na nona linha, que significa “corpo”. Na décima linha, inserimos o código para a criação de aplicativos, sites, entre outros. Na décima primeira linha, fechamos com a tag </body>.

• Linha 12: finalizamos com o fechamento da tag </html>, a qual foi inicializada na segunda linha. 

Ao entender sobre como utilizar as tags HTML, conceitualizaremos os layouts para aprofundarmos em quais tags devemos utilizar. Para isso, analisemos a Figura 1:

A Figura 1 apresenta os tipos de elementos que são utilizados para criar um layout, dizemos que são estruturados como elementos semânticos. Antigamente, muitos sites denotavam código em HTML, com a divisão por meio da tag <div></div>, considerados códigos não semânticos. Exemplo: <div class="header">, <div id="main"> e <div id="footer">, para demarcar cabeçalho, conteúdo principal e rodapé. Em HTML, têm-se diversos elementos semânticos que podem ser utilizados na criação de páginas. A World Wide Web Consortium (W3C, [2022]) define que uma página de web desenvolvida com elementos semânticos permite que seus objetos, propriedades, dados, informações, entre outros, sejam compartilhados e reutilizados entre outros aplicativos.

O elemento <header></header> é representado como bloco ou contêiner que utilizamos para inserir conteúdo de introdução na página ou em um conjunto de links de navegação. No elemento <header>, temos elementos de títulos com níveis de <h1> a <h6>, logotipos e ícones (como redes sociais, sessão de login etc.) e informações de autoria da empresa ou autor. Um fator importante é que pode conter vários <header> em um documento HTML, mas a tag <header> não pode ser inserida dentro das tags <footer>, <address> ou de outro <header> como elemento (W3SCHOOLS, [2022]).

O elemento semântico <nav> é utilizado para definir um conjunto de links de navegação. Não são todos os links de um layout que devem estar dentro de uma tag <nav>. A tag <nav> é destinada apenas aos principais blocos para navegação. Em um layout de site, para criar um menu de navegação, contendo os itens Home, Pedidos, Cardápio, Promoções e Cadastra-se, utiliza-se a tag <nav>. Assim, a tag <nav> facilita o acesso e a compreensão para os usuários com deficiência (W3SCHOOLS, [2022]).

O elemento semântico <section></section> define a seção principal de um documento ou agrupamento temático de conteúdo, como o conteúdo da página do site, por exemplo: a página de Cardápio, que deve conter todos os produtos disponíveis para que o cliente possa escolher conforme o seu gosto. No elemento <section>, podemos utilizar capítulos, introdução de conteúdos, itens de pedidos ou produtos, entre outros. Uma página de web, normalmente, pode ser dividida em seções (UZAYR, 2022).

O elemento semântico <article></article> é usado para especificar conteúdos que sejam fáceis de distribuí-los, independentemente do resto do site. Podemos atribuir em postagens de fórum, postagens em blog, comentários de usuários no site, propagandas e itens de destaque, artigos de jornais, entre outros (W3C, [2022]). O elemento semântico <aside></aside> é utilizado para conteúdos direcionados, como frames, ou seja, uma barra lateral do layout do site. Esta tag, muitas vezes, apresenta conteúdo que está, indiretamente, relacionado ao conteúdo principal do documento.

No elemento <footer></footer>, é definido como rodapé do site e tem a mesma funcionalidade do elemento <section>, por isso, não utilizamos uma tag <section> dentro da tag <footer>. Normalmente, os elementos que contêm no rodapé podem ser: informações de autoria, informações de contato, mapa do site, links de voltar ou ir para o topo do site e informações sobre direitos autorais reservados de quem desenvolveu o conteúdo da página.

Os conceitos vistos sobre como desenvolver uma página de internet utilizando elementos semânticos facilitam muito a implementação dos documentos em HTML, principalmente o que é ilustrado no tópico case. Com esses conceitos, pensemos como seria a criação do menu de navegação, sabemos que o elemento <nav></nav> precisará ser utilizado. Umas das opções, para a implementação do menu de navegação, podem ser adotadas, a seguir:

Os conceitos abordados entre as linhas 1 e 8 já foram vistos no tópico de conceitualização. O menu de navegação foi criado dentro do elemento <body> e <header>, linhas 9 e 10, respectivamente. Entre as linhas 11 e 24, foram implementados o menu não ordenado <ul></ul> e, também, a logo que está na tag <figure></figure>. Repare que temos o elemento “id” com o nome “menu-esquerda” e “menu-direita”, especificando quais as posições de cada item.

Agora é com você, crie o rodapé do site, conforme especificado na Figura 3. Lembre-se, o rodapé do site deve conter o elemento semântico <footer></footer> dentro da tag <body></body>. Na próxima lição, explicaremos sobre o HTML da Figura 3. Bons estudos!