Exibindo informações na Web
A única linguagem que o navegador consegue interpretar para a exibição de conteúdo é o HTML. Para iniciar a exploração do HTML, vamos imaginar o seguinte caso: o navegador realizou uma requisição e recebeu como corpo da resposta o seguinte conteúdo:
Mirror Fashion. Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios. Confira nossas promoções. Receba informações sobre nossos lançamentos por email. Navegue por todos nossos produtos em catálogo. Compre sem sair de casa.
Para conhecer o comportamento dos navegadores quanto ao conteúdo descrito antes, vamos reproduzir esse conteúdo em um arquivo de texto comum, que pode ser criado com qualquer editor de texto puro. Salve o arquivo como index.html e abra-o a partir do navegador à sua escolha.
Parece que obtemos um resultado um pouco diferente do esperado, não? Apesar de ser capaz de exibir texto puro em sua área principal, algumas regras devem ser seguidas caso desejemos que esse texto seja exibido com alguma formatação, para facilitar a leitura pelo usuário final.
Usando o resultado acima podemos concluir que o navegador por padrão:
- Pode não exibir caracteres acentuados corretamente;
- Não exibe quebras de linha.
Para que possamos exibir as informações desejadas com a formatação, é necessário que cada trecho de texto tenha umamarcação indicando qual é o significado dele. Essa marcação também influencia a maneira com que cada trecho do texto será exibido. A seguir é listado o texto com uma marcação correta:
<!DOCTYPE html> <html> <head> <title>Mirror Fashion</title> <meta charset="utf-8"> </head> <body> <h1>Mirror Fashion.</h1> <h2>Bem-vindo à Mirror Fashion, sua loja de roupas e acessórios.</h2> <ul> <li>Confira nossas promoções.</li> <li>Receba informações sobre nossos lançamentos por email.</li> <li>Navegue por todos nossos produtos em catálogo.</li> <li>Compre sem sair de casa.</li> </ul> </body> </html>
Reproduza o código anterior em um novo arquivo de texto puro e salve-o como index-2.html. Não se preocupe com a sintaxe, vamos conhecer detalhadamente cada característica do HTML nos próximos capítulos. Abra o arquivo no navegador.
Agora, o resultado é exibido de maneira muito mais agradável e legível. Para isso, tivemos que utilizar algumas marcações do HTML. Essas marcações são chamadas de tags, e elas basicamente dão significado ao texto contido entre sua abertura e fechamento.
Apesar de estarem corretamente marcadas, as informações não apresentam nenhum atrativo estético e, nessa deficiência do HTML, reside o primeiro e maior desafio do programador front-end.
O HTML foi desenvolvido para exibição de documentos científicos. Para termos uma comparação, é como se a Web fosse desenvolvida para exibir monografias redigidas e formatadas pela Metodologia do Trabalho Científico da ABNT. Porém, com o tempo e a evolução da Web e de seu potencial comercial, tornou-se necessária a exibição de informações com grande riqueza de elementos gráficos e de interação.
Nenhum comentário:
Postar um comentário