Curso de HTML Grátis – 4

Continuando nosso Curso de HTML Grátis – 4, vamos aprender mais algumas tags que você vai precisar para desenvolver um website.

E vamos entrar um pouco também na questão de SEO (Search Engine Optimization), que é a otimização para os motores de busca, ou seja: melhorar seu site para aparecer melhor nos motores de busca.

Como criar links no HTML

A tag responsável por criar links em HTML é a tag A. Essa tag contém duas informações básicas que são necessárias para o funcionamento dela:

<a href=”url-do-link“>texto-do-link</a>

Veja que você deve passar primeiro o “url-do-link”, ou seja, o endereço para onde esse link está apontando. Em seguida, você indica o “texto-do-link”, que é o texto que você quer que seja exibido.

Veja o exemplo abaixo:

<a href=”http://www.labweb.com.br/blog/web-design/curso-de-html-gratis-4“>Curso de HTML grátis – 4</a>

Isso vai criar um link apontando para essa post. Se você precisar realizar testes, você pode utilizar a “#”, dessa forma:

<a href=”#“>Esse é um outro link</a>

Também é possível criar ancoras em HTML, ou seja, links internos apontando para determinadas partes do documento.

Para isso, você pode adicionar um “id” em algum elemento, que é um identificador. Isso vai criar uma ancora no seu documento e você pode apontar para ele:

<h2 id=”links-html“>Como trabalhar com links</h2>
<p>algum conteúdo</p>
<p>mais um conteúdo</p>
<a href=”#links-html“>Clique aqui para ir para o titulo</a>

Obviamente o exemplo acima não fará muita diferença, já que o conteúdo está muito próximo. Mas você pode por exemplo criar um índice com os tópicos logo no início do documento ou no final se preferir.

Adicionando imagens no HTML

Para adicionar imagens, você vai precisar da tag IMG. Para ela funcionar, basta você informar o link de alguma imagem existente:

<img src=”link-da-imagem“/>

Veja no exemplo abaixo como isso funciona:

<img src=”http://www.labweb.com.br/css/logo_labweb.png“/>

Agora que você já sabe como funciona a tag IMG, você vai gostar de saber que é possível criar links também com imagens, juntando os dois elementos:

<a href=”#links-html“><img src=”http://www.labweb.com.br/css/logo_labweb.png“/></a>

Perceba que no exemplo acima, ao invés de adicionar um texto, você está apontando para uma imagem. Na verdade, é possível criar um link para praticamente qualquer tipo de elementos, você poderia por exemplo criar um link para uma página inteira se quisesse.

Negrito e Itálico em HTML

Agora vamos ver 2 tags que podem ser interessantes: a tag B e a tag I. Elas permitem que você marque, respectivamente partes de um texto para ficar em negrito e itálico: B (Bold) / I (itálico).

O uso dessas tags é bastante simples:

<p>Esse é um exemplo de <b>negrito</b> em um texto</p>
<p>Esse é um exemplo de <i>itálico</i> em um texto</p>

O resultado é esse:

Esse é um exemplo de negrito em um texto

Esse é um exemplo de itálico em um texto

Embora você possa usar essas duas tags, vale lembrar que desde o lançamento do HTML 5 vem se falando muito de semântica.

Esse é um termo que determina um conjunto de boas práticas, de forma que o conteúdo seja sempre valorizado.

E uma das regras da semântica é a de que você deve sempre focar no conteúdo e nunca na estilização.

Vou explicar: você não deve aplicar a tag B ou I pensando em deixar um texto em negrito ou itálico. Ao invés disso, você deve pensar “esse conteúdo é importante” ou “esse conteúdo deve ser destacado”?

Se sua resposta for “NÃO” e o que você precisa é apenas estilizar o texto, você pode fazer isso usando a tag SPAN. Simplesmente marque o texto que você deseja e você poderá aplicar os estilos com CSS depois.

Mas se a sua resposta for “SIM”, indicando que você quer destacar o texto porque aquele conteúdo É IMPORTANTE, você deve utilizar outras duas tags:

STRONG – usada para destacar algum conteúdo que é importante.
EM – usada para dar enfase em algum conteúdo.

Basicamente, o STRONG seria o equivalente ao B e o EM é equivalente ao I. Visualmente essas tags operam iguais, mas semanticamente você deve utilizar as tags novas, ao invés das antigas:

<p>Esse é um exemplo de <strong>conteúdo importante</strong> em um texto</p>
<p>Esse é um exemplo de <em>conteúdo importante</em> em um texto</p>

Veja como fica:

Esse é um exemplo de conteúdo importante em um texto

Esse é um exemplo de conteúdo importante em um texto

Usabilidade e SEO

Como comentei lá em cima, o SEO (Search Engine Optimization) é a otimização para os motores de busca.

Como via de regra, seguimos as melhores práticas, pensando no Google, já que ele é o maior buscador. Mas o bom disso é que essa preparação também serve para os outros buscadores também.

Já a usabilidade diz respeito a você desenvolver seu site para fornecer uma melhor experiência para o usuário.

Ou seja, pensar em cada elemento e detalhe do seu site de forma a ajudar o usuário a enxergá-lo melhor e a navegar melhor pelo seu site.

O bom disso tudo é que algumas coisas você pode fazer e servem tanto para um quanto para outro. Aqui vou dar uma pincelada nas coisas, mas vale a pena estudar os dois mais a fundo depois.

Vamos acrescentar alguns atributos a mais a algumas tags que já explicamos:

<a href=”url-do-link” title=”titulo-do-link”>texto-do-link</a>

<img src=”link-da-imagem” title=”titulo-do-link” alt=”texto-alternativo”/>

Vamos agora entender o que esses atributos fazem:

• TITLE: esse atributo adiciona uma dica, também chamado “tooltip”, que é uma caixinha de texto com um texto pequenininho quando você passa o mouse em cima do elemento.
• ALT: esse atributo usado na tag IMG exibe um texto alternativo caso a imagem não seja encontrada. Você já deve ter navegado por sites em que a imagem não existe mais e aparece um quadradinho no lugar, usando ALT você veria o texto.

Os dois atributos (ALT e TITLE) são importantes para os motores de busca, porque fornecem informações a mais na indexação do site. Veja um exemplo:

<a href=”#links-html” title=”Lista dos Campeões 2018″>Lista dos campeões</a>

<img src=”http://www.labweb.com.br/css/logo_labweb.png” alt=”Logo Labweb” title=”Labweb – Web e Design Criativo”/>

Veja o resultado passando o mouse por cima:

Lista dos campeões

E aqui temos o exemplo acima, mas com uma imagem que não foi encontrada. Veja que digitei o endereço da imagem errado:

<img src=”logo_labweb.png” alt=”Logo Labweb” title=”Labweb – Web e Design Criativo”/>

Veja o resultado:

O atributo ALT também é importante para as pessoas com deficiência visual. Eles utilizam leitores de sites ou mesmo smartphones que leem os textos para eles.

Assim, quando você aplica o atributo ALT eles conseguem entender a informação que você quis passar.

Se você não colocar um texto alternativo os leitores não terão nada para mostrar a eles.

Próximo passo

No próximo post, vamos continuar trabalhando com html… e ver como você pode organizar o conteúdo do site com as tags DIV, SECTION, HEADER, FOOTER e ASIDE,