Tutorial de HTML

Instruções: Salve este arquivo no seu computador, clicando com o botão direito do mouse sobre a página. Abra este arquivo no seu navegador de preferência (duplo clique) para visualizar a página publicada. Abra outra janela com o arquivo em um editor de texto para programação (Visual Studio Code, Atom, etc.). Se não possuir um, abra no bloco de notas (clique direito do mouse, abrir com, bloco de notas). Coloque as janelas lado a lado para estudar, simultaneamente, o código e resultado publicado pelo navegador.

O que é HTML e CSS?

Hypertext Markup Language (Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada na construção de páginas na Internet. Uma linguagem de marcação consiste em um conjunto de códigos aplicados a um texto ou trecho de texto, acrescentando informações adicionais que ajudam o computador a compreender corretamente aquele documento. Por exemplo, a partir destas marcações, o navegador sabe o que é um título, citação, link, imagem, etc.

Cada parte marcada do documento, portanto, passa a ter um sentido para o computador e para o programador. É o que chamamos de web semântica.

Se a HTML é responsável por marcar e atribuir sentido às diferentes partes de um texto, o CSS (Cascading Style Sheets) é responsável por dar uma aparência bonita e customizada para cada uma destas partes, sendo uma linguagem de estilo. O CSS descreve para o navegador como a página deve ser exibida, qual a sua aparência..

O website CSS Zen Garden demonstra todo o poder da HTML e do CSS, conferindo vários estilos diferentes ao mesmo texto em HTML. Ou seja, todos estes websites disponíveis no CSS Zen Garden, tão diferentes um do outro na aparência, possuem o mesmíssimo conteúdo em termos de texto. Veja alguns exemplos:

A HTML também permite repassar informações relevantes sobre a página para os mecanismos de busca (DuckDuckGo, Google, etc.) e para os softwares leitores de tela, utilizados por pessoas com deficiência.

O código HTML: Tags

Para fazer a marcação, inserimos códigos ao longo do texto. O código da HTML é formado principalmente por tags (etiquetas). Cada tag possui uma abertura (colchetes angulares e código) e um fechamento (colchetes angulares barra e código). A tag de abertura indica quando começa a marcação. A de fechamento, quando termina. Veja como exemplo a tag para negrito abaixo (letra b de bold):

                A linguagem de marcação HTML foi criada pelo físico britânico Tim Berners-Lee, em 1990.

                A linguagem de marcação <b>HTML</b> foi criada pelo físico britânico Tim Berners-Lee, em 1990.

Este conjunto formado pelas tags e seu conteúdo denomina-se elemento. Os elementos podem ser inline (dentro do texto) ou block-level elements (conformam um bloco separado).

Acessibilidade

Uma marcação bem feita da HTML contribui para a acessibilidade, uma vez que o software leitor de tela será capaz de conduzir uma correta navegação e narração do texto. Atributos especiais, como ARIA Roles, inserem legendas no texto especialmente para este fim. Para saber mais sobre acessibilidade para a Internet consulte o website Web Accessibility Initiative

Comentários

Os comentários não aparecem para o usuário e são ignorados pelo navegador, não impactam a página que está sendo exibida. Servem para documentar e explicar o código para outros programadores, bem como para adicionar lembretes para o próprio autor do código. Assim, sempre que o programador retornar ao seu código compreenderá suas intenções e atividades em andamento.

Os comentários também podem ser inseridos para fins didáticos. Neste tutorial, utilizei os comentários para explicar as marcações em HTML.

Por fim, a tag de comentário pode ser adicionada para desativar temporariamente um código. A cor diferenciada, em geral cinza ou verde, demarca para o leitor o que é um código ativo e o que é comentário. Marcamos um comentário com colchetes, sinal de exclamação e dois traços.

<!-- Este é um exemplo de comentário em HTML. -->

Títulos

A tag de título é marcada com a letra h (headline) seguida pelo número do seu nível, que varia de 1 a 6. Ajudam a estruturar a hierarquia (importância) do texto, compondo títulos e subtítulos e facilitando a compreensão por parte do leitor. A hierarquia dos títulos também é muito importante para a acessibilidade, facilitando a navegação pelo texto utilizando softwares leitores de tela.

Veja os exemplos a seguir:

                    
Título 1
 <h1>
                    
Título 2
 <h2>
                    
Título 3
 <h3>
                    
Título 4
 <h4>
                    
Título 5
 <h5>
                    
Título 6
 <h6>

Parágrafos

Para marcar um parágrafo no texto, utilize a tag com a letra p. Assim, será possível demonstrar onde o parágrafo começa e onde ele termina. Caso contrário, o texto exibido no navegador será um bloco compacto, sem espaço entre os parágrafos.

<p>Este é um exemplo de texto marcado com a tag parágrafo.</p>

Itálico

Existem duas tags que resultam em um texto em fonte itálica. A primeira, com a letra i, apenas indica a aparência do texto. A segunda, com as letras "em", comunicam para o computador que aquele texto está sendo também enfatizado pelo autor. Isto terá impacto, por exemplo, para a locução do texto. Veja este exemplo:

Esta <i>palavra</i> está em itálico, já esta outra <em>palavra</em> está, além do itálico, também destacada.

Negrito

Assim como o itálico, o negrito também possui uma tag para realçar a importância e força de um texto (strong), contando com outra, a tag b como já vimos, apenas para destacar parte do texto em negrito. Confira o exemplo:

                    <strong>Atenção!</strong> Na HTML é importante não se esquecer de <b>fechar a tag</b>.

                    Atenção! Na HTML, é importante não se esquecer de fechar a tag.

Listas

Em HTML, listas (tag li) podem ser utilizadas em vários contextos. No primeiro exemplo, temos uma lista de itens marcados com uma bolinha (Unordered List, tag ul):

O segundo exemplo (Ordered List, tag ol), confere uma sequência na lista por meio de números:

  1. HTML
  2. CSS
  3. JavaScript

Por fim, no terceiro tipo temos uma lista na qual um termo é relacionado à uma ou mais definições. É o caso, por exemplo, de um glossário (Definition Term, tag dt):

HTML - HyperText Markup Language.
Linguagem de marcação, que confere significado a um texto.
A primeira linguagem que um programador web precisa aprender.

CSS - Cascading Style Sheets
Linguagem que confere estilo às páginas de HTML.
A segunda linguagem que um programador web precisa aprender.

JavaScript
Linguagem de programação, que confere interatividade às páginas na web.
A terceira linguagem que um programador web precisa aprender.

Menu de Navegação

Para construirmos um menu de navegação (como o desta página), basta incluirmos uma lista dentro da tag nav. Além disto, precisamos que cada item de nossa lista seja um link, de modo com que o menu seja navegável. Em seguida, utilizando CSS, conferimos ao menu uma aparência mais sofisticada do que uma simples lista de links.

Citação

Citações dentro de um parágrafo devem ser escritas entre aspas (tag q). Utilizando CSS, podemos posteriormente conferir aparência diferenciada a uma citação. Para isto, devemos inserir seu conteúdo em um bloco de citação (blockquote), marcando ainda o autor com tags específicas (cite).

<blockquote>

No trabalho, quando as pessoas olham para a tela do meu computador e a veem cheia de código, não é incomum fazerem comentários dizendo que parece muito complicado ou que devo ser muito inteligente para compreender isso. A verdade é que não é tão difícil aprender a escrever páginas web e a ler o código usado para criá-las (...) Entender HTML e CSS pode ajudar qualquer um que trabalha com a web.

<cite>Jon Duckett - Livro HTML&CSS: Projete e construa websites</cite>

</blockquote>

Atributos

Além das informações visíveis para o leitor no navegador, podemos comunicar para o computador, por meio de código, atributos adicionais. Os atributos também classificam o elemento para que formatações de estilo possam ser programadas em CSS.

Por exemplo, podemos utilizar a tag time para informar que aquele texto se refere à uma data e/ou hora. Acrescentamos o atributo datetime, que seguirá um padrão da máquina para datas (YYYY-MM-DD hh-mm).

Assim, a data pode ser escrita por extenso no texto, em qualquer formato (amanhã ao meio dia, dois dias atrás, 11 de março de 2020, etc.), pois a data precisa será informada para o computador via atributo, conforme no exemplo abaixo:

                     

                    <time datetime:"2021-06-17 14:00"> 14 horas do dia 11 de Março de 2020 </time>

Link

A tag de link utiliza a letra a de anchor element. Também demanda um atributo href, que aponta para o conteúdo a ser aberto pelo link. Refere-se à Hypertext Reference. Em seguida, vem o conteúdo clicável, que pode ser um texto, uma imagem, dentre outros.

Webmuseu

<a href="https://webmuseu.org/">Webmuseu</a>

Imagens

Cada imagem contém quatro atributos. O src (source) indica qual arquivo será carregado. O alt (texto alternativo) consiste em uma descrição objetiva do conteúdo da imagem. Esta descrição será apresentada caso a imagem não carregue ou lida pelos softwares leitores de tela (para pessoas com deficiência visual). Se o conteúdo da imagem não for relevante (por exemplo, uma faixa colorida apenas para decorar a página), deixar em branco. Por fim, temos as dimensões da imagem em pixels.

Para saber mais sobre como escrever um texto alternativo para imagens, acesse este link no Codex do WordPres.

<img scr="html_css_book.jpg" alt="três exemplares do livro HTML & CSS Design and build websites" width="700" height="300">

três exemplares do livro HTML & CSS Design and build websites

Fonte: Website do livro HTML & CSS

Áudio e Vídeo

Áudios e vídeos podem ser inseridos diretamente na página via HTML. Entretanto, o mais comum é utilizarmos serviços de publicação de podcasts e vídeos, como Vimeo ou YouTube, inserindo o arquivo por meio de código fornecido pelo próprio serviço.

As vantagens de se embedar um vídeo, como se chama este processo, são muitas. Por exemplo, estas plataformas especializadas ajustam a resolução do vídeo ao longo da exibição, de acordo com a qualidade da conexão do usuário. Automatizam funções e oferecem recursos de forma fácil, como legendas.

As legendas são extremamente importantes nos vídeos, por vários motivos: acessibilidade (pessoas surdas ou com deficiência auditiva), usuários em locais públicos que não estejam de posse de um fone de ouvido ou, ainda, quando o áudio do vídeo está rápido demais. As legendas também permitem melhorar a compreensão das pessoas que não falam a mesma língua da mídia, não possuam o mesmo sotaque, usuários pouco familiarizados com vocabulários específicos, para citarmos alguns exemplos. Por tudo isto, em muitos casos, a legenda é inclusive exigida por lei.

Além de vídeos e áudios, é possível embedar uma série de outros conteúdos nas páginas em HTML, como mapas e posts de redes sociais. Entretanto, a inserção de códigos externos numa página requer cuidados com a cibersegurança. Confira se as fontes são confiáveis e se o conteúdo inserido não se alterou ao longo do tempo.

Outras tags

<br> Quebra de linha (esta tag não tem fechamento).

<code></code> Permite escrever um código em forma de texto.

<pre></pre> Segue a formatação atribuída ao texto, incluindo indentações.

<sub></sub> Subescrito, como o 2 em CO2.

<sup></sup> Superescrito, como em números de notas1 de rodapé.

<small></small> Textos com menor relevância, como o Copyright desta página.

Para aprender mais

HTML: Linguagem de Marcação de Hipertexto - MDN web docs (Tutorial)

Curso de HTML5 para iniciantes - Cursos7 (Curso on-line gratuito)

HTML Tutorial - W3Schools

Html Essential Training - Jen Simmons (Curso em Inglês no LinkedIn)

HTML Living Standard (Padrão oficial da HTML)

Padrões do HTML - W3C

© Ana Cecília Rocha Veiga - anacecilia.digital