"Quanto mais nos elevamos, menores parecemos aos olhos daqueles que não sabem voar." -- Friedrich Wilhelm Nietzsche
A única linguagem que um navegador Web 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:
Bem-vindo à MusicDot, seu portal de cursos de música online.
Navegue por todos nossos cursos disponíveis.
Uma nota de atenção é que a imagem acima foi tirada dos navegadores: Microsoft Edge e Microsoft Internet Explorer 11. Veja o que acontece quando obtemos a mesma imagem porém com navegadores mais atuais:
A imagem acima foi tirada nos navegadores: Brave, Mozilla Firefox e Google Chrome.
Obs: existe a possibilidade de que mesmo nesses navegadores, se utilizada uma versão mais antiga, pode ser que o texto seja mostrado igual na foto dos navegadores da Microsoft.
Usando os resultados acima podemos concluir que os navegadores mais antigos e até mesmo o Microsoft Edge por padrão:
Podem não exibir caracteres acentuados corretamente;
Mas até mesmo nos navegadores mais novos:
Não exibem quebras de linha.
Para que possamos exibir as informações desejadas com a formatação, é necessário que cada trecho de texto tenha uma marcaçã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 esta marcação esperada pelo navegador:
<h2>Bem-vindo à MusicDot, seu portal de cursos de música online.</h2>
<li>Confira nossas promoções.</li>
<li>Navegue por todos nossos cursos disponíveis.</li>
<li>Aprenda sem sair de casa.</li>
O texto com as devidas marcações, comumente chamado de "código". Reproduza então 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 destas marcações nos próximos capítulos. Abra o arquivo no navegador.
Agora, uma página muito mais agradável e legível é exibida. Para isso, tivemos que adicionar as marcações que são pertencentes ao HTML. Essas marcações são chamadas de tags, e elas basicamente dão uma representação ao texto contido entre sua abertura e fechamento.
Apesar de estarem corretamente marcadas, as informações não apresentam pouco ou nenhum atrativo estético e, nessa deficiência do HTML, reside o primeiro e maior desafio de pessoas que desenvolvem para front-end.
O HTML (Hypertext Markup Language) ou linguagem de marcação de hipertexto foi desenvolvido para suprir a necessidade exibição de documentos científicos fornecidos por uma rede de Internet. 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.
O HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma página no navegador. No código que vimos antes, as tags são os elementos a mais que escrevemos usando a sintaxe <nomedatag>. Diversas tags são disponibilizadas pela linguagem HTML e cada uma possui uma funcionalidade específica.
Note a sintaxe. Uma tag é definida com caracteres < e >, e seu nome (h1 no caso). Muitas tags possuem conteúdo, como o texto do título ("MusicDot"). Nesse caso, para determinar onde o conteúdo acaba, usamos uma tag de fechamento com a barra antes do nome: </h1>.
Algumas tags podem receber algum tipo de informação extra dentro de sua definição chamada de atributo. São parâmetros usando a sintaxe de atributo="valor". Para definir uma imagem, por exemplo, usamos a tag <img> e, para indicar o caminho que está essa imagem, usamos o atributo src:
Repare que a tag img não possui conteúdo por si só, e sim ela carrega ali o conteúdo de um arquivo externo (a imagem). Nesses casos, não é necessário usar uma tag de fechamento como antes no h1.
O HTML é composto de diversas tags, cada uma com sua função e significado. Desde 2013, com a atualização da linguagem para o HTML 5, muitas novas tags foram adicionadas, que veremos ao longo do curso.
Nesse momento, vamos focar em tags que representam títulos, parágrafo e ênfase.
Quando queremos indicar que um texto é um título em nossa página, utilizamos as tags de heading em sua marcação:
As tags de heading são para exibir conteúdo de texto e contém 6 níveis, ou seja de <h1> à <h6>, seguindo uma ordem de importância, sendo <h1> o título principal, o mais importante, e <h6> o título de menor importância.
Utilizamos, por exemplo, a tag <h1> para o nome, título principal da página, e a tag <h2> como subtítulo ou como título de seções dentro do documento.
Obs: a tag <h1> só pode ser utilizada uma vez em cada página porque não pode existir mais de um conteúdo mais importante da página.
A ordem de importância tem impacto nas ferramentas que processam HTML. As ferramentas de indexação de conteúdo para buscas, como o Google, Bing ou Yahoo! levam em consideração essa ordem e relevância. Os navegadores especiais para acessibilidade também interpretam o conteúdo dessas tags de maneira a diferenciar seu conteúdo e facilitar a navegação do usuário pelo documento.
Quando exibimos qualquer texto em nossa página, é recomendado que ele seja sempre conteúdo de alguma tag filha da tag <body>. A marcação mais indicada para textos comuns é a tag de parágrafo:
Se você tiver vários parágrafos de texto, use várias dessas tags <p> para separá-los:
Nossa matriz fica em Mafra, em Santa Catarina. De lá, saem  grande parte das gravações de nossos cursos.
Marcações de ênfase
Quando queremos dar uma ênfase diferente a um trecho de texto, podemos utilizar as marcações de ênfase. Podemos deixar um texto "mais forte" com a tag <strong> ou deixar o texto com uma "ênfase acentuada" com a tag <em>. Do mesmo jeito que a tag <strong> deixa a tag "mais forte", temos também a tag <small>, que diminui o "peso" do texto.
Por padrão, os navegadores exibem o texto dentro da tag <strong> em negrito e o texto dentro da tag <em> em itálico. Existem ainda as tags <b> e <i>, que atingem o mesmo resultado visualmente, mas as tags <strong> e <em> são mais indicadas por definirem nossa intenção de significado ao conteúdo, mais do que uma simples indicação visual. Vamos discutir melhor a questão do significado das tags mais adiante.
<p>Aprenda de um jeito rápido e barato na <strong>MusicDot</strong>.</p>
A tag <img> indica para o navegador que uma imagem deve ser "renderizada" (mostrada/desenhada) naquele lugar e necessita dois atributos preenchidos: src e alt. O primeiro é um atributo obrigatório para exibir a imagem e aponta para a sua localização (pode ser um local do seu computador ou um endereço na Web), já o segundo é um texto alternativo que aparece caso a imagem não possa ser carregada ou visualizada.
O atributo alt não é obrigatório, porém é considerado um erro caso seja omitido, pois ele provê o entendimento da imagem para pessoas com deficiência que necessitam o uso de leitores de tela para acessar o computador, e também auxilia na indexação da imagem para motores de busca, como o Google etc.
O HTML 5 introduziu duas novas tags específicas para imagem: <figure> e <figcaption>. A tag <figure> define uma imagem em conjunto com a tag <img>. Além disso, permite adicionar uma legenda para a imagem por meio da tag <figcaption>.
<img src="img/matriz-musicdot.png" alt="Foto da matriz da musicdot">
A primeira página que desenvolveremos para a MusicDot será a Sobre, que explica detalhes sobre a empresa, apresenta fotos e a história.
Recebemos o design já pronto, assim como os textos. Nosso trabalho, como pessoas desenvolvedoras de front-end, é codificar o HTML e CSS necessários para esse resultado.