{"id":318,"date":"2018-05-23T19:00:20","date_gmt":"2018-05-23T22:00:20","guid":{"rendered":"http:\/\/www.labweb.com.br\/blog\/?p=318"},"modified":"2018-10-23T06:47:17","modified_gmt":"2018-10-23T08:47:17","slug":"curso-de-html-gratis-4","status":"publish","type":"post","link":"https:\/\/www.labweb.com.br\/blog\/?p=318","title":{"rendered":"Curso de HTML Gr\u00e1tis \u2013 4"},"content":{"rendered":"

Continuando nosso Curso de HTML Gr\u00e1tis – 4, vamos aprender mais algumas tags que voc\u00ea vai precisar para desenvolver um website.<\/p>\n

E vamos entrar um pouco tamb\u00e9m na quest\u00e3o de SEO (Search Engine Optimization), que \u00e9 a otimiza\u00e7\u00e3o para os motores de busca, ou seja: melhorar seu site para aparecer melhor nos motores de busca.<\/p>\n

Como criar links no HTML<\/h2>\n

A tag respons\u00e1vel por criar links em HTML \u00e9 a tag A. Essa tag cont\u00e9m duas informa\u00e7\u00f5es b\u00e1sicas que s\u00e3o necess\u00e1rias para o funcionamento dela:<\/p>\n

<a href=”<\/strong>url-do-link“><\/strong>texto-do-link<\/a><\/strong><\/p>\n

Veja que voc\u00ea deve passar primeiro o “url-do-link”<\/strong>, ou seja, o endere\u00e7o para onde esse link est\u00e1 apontando. Em seguida, voc\u00ea indica o “texto-do-link”<\/strong>, que \u00e9 o texto que voc\u00ea quer que seja exibido.<\/p>\n

Veja o exemplo abaixo:<\/p>\n

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

Isso vai criar um link apontando para essa post. Se voc\u00ea precisar realizar testes, voc\u00ea pode utilizar a “#”, dessa forma:<\/p>\n

<a href=”<\/strong>#“><\/strong>Esse \u00e9 um outro link<\/a><\/strong><\/p>\n

Tamb\u00e9m \u00e9 poss\u00edvel criar ancoras em HTML, ou seja, links internos apontando para determinadas partes do documento.<\/p>\n

Para isso, voc\u00ea pode adicionar um “id” em algum elemento, que \u00e9 um identificador. Isso vai criar uma ancora no seu documento e voc\u00ea pode apontar para ele:<\/p>\n

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

Obviamente o exemplo acima n\u00e3o far\u00e1 muita diferen\u00e7a, j\u00e1 que o conte\u00fado est\u00e1 muito pr\u00f3ximo. Mas voc\u00ea pode por exemplo criar um \u00edndice com os t\u00f3picos logo no in\u00edcio do documento ou no final se preferir.<\/p>\n

Adicionando imagens no HTML<\/h2>\n

Para adicionar imagens, voc\u00ea vai precisar da tag IMG. Para ela funcionar, basta voc\u00ea informar o link de alguma imagem existente:<\/p>\n

<img src=”<\/strong>link-da-imagem“\/><\/strong><\/p>\n

Veja no exemplo abaixo como isso funciona:<\/p>\n

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

<\/p>\n

Agora que voc\u00ea j\u00e1 sabe como funciona a tag IMG, voc\u00ea vai gostar de saber que \u00e9 poss\u00edvel criar links tamb\u00e9m com imagens, juntando os dois elementos:<\/p>\n

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

<\/a><\/p>\n

Perceba que no exemplo acima, ao inv\u00e9s de adicionar um texto, voc\u00ea est\u00e1 apontando para uma imagem. Na verdade, \u00e9 poss\u00edvel criar um link para praticamente qualquer tipo de elementos, voc\u00ea poderia por exemplo criar um link para uma p\u00e1gina inteira se quisesse.<\/p>\n

Negrito e It\u00e1lico em HTML<\/h2>\n

Agora vamos ver 2 tags que podem ser interessantes: a tag B e a tag I. Elas permitem que voc\u00ea marque, respectivamente partes de um texto para ficar em negrito e it\u00e1lico: B (Bold) \/ I (it\u00e1lico).<\/p>\n

O uso dessas tags \u00e9 bastante simples:<\/p>\n

<p><\/strong>Esse \u00e9 um exemplo de <b><\/strong>negrito<\/b><\/strong> em um texto<\/p><\/strong>
\n<p><\/strong>Esse \u00e9 um exemplo de <i><\/strong>it\u00e1lico<\/i><\/strong> em um texto<\/p><\/strong><\/p>\n

O resultado \u00e9 esse:<\/p>\n

Esse \u00e9 um exemplo de negrito<\/b> em um texto<\/p>\n

Esse \u00e9 um exemplo de it\u00e1lico<\/i> em um texto<\/p>\n

Embora voc\u00ea possa usar essas duas tags, vale lembrar que desde o lan\u00e7amento do HTML 5 vem se falando muito de sem\u00e2ntica.<\/p>\n

Esse \u00e9 um termo que determina um conjunto de boas pr\u00e1ticas, de forma que o conte\u00fado seja sempre valorizado.<\/p>\n

E uma das regras da sem\u00e2ntica \u00e9 a de que voc\u00ea deve sempre focar no conte\u00fado e nunca na estiliza\u00e7\u00e3o.<\/p>\n

Vou explicar: voc\u00ea n\u00e3o deve aplicar a tag B<\/strong> ou I<\/strong> pensando em deixar um texto em negrito ou it\u00e1lico. Ao inv\u00e9s disso, voc\u00ea deve pensar “esse conte\u00fado \u00e9 importante” ou “esse conte\u00fado deve ser destacado”?<\/p>\n

Se sua resposta for “N\u00c3O” e o que voc\u00ea precisa \u00e9 apenas estilizar o texto, voc\u00ea pode fazer isso usando a tag SPAN<\/strong>. Simplesmente marque o texto que voc\u00ea deseja e voc\u00ea poder\u00e1 aplicar os estilos com CSS depois.<\/p>\n

Mas se a sua resposta for “SIM”, indicando que voc\u00ea quer destacar o texto porque aquele conte\u00fado \u00c9 IMPORTANTE, voc\u00ea deve utilizar outras duas tags:<\/p>\n

STRONG<\/strong> – usada para destacar algum conte\u00fado que \u00e9 importante.
\nEM<\/strong> – usada para dar enfase em algum conte\u00fado.<\/p>\n

Basicamente, o STRONG<\/strong> seria o equivalente ao B<\/strong> e o EM<\/strong> \u00e9 equivalente ao I<\/em>. Visualmente essas tags operam iguais, mas semanticamente voc\u00ea deve utilizar as tags novas, ao inv\u00e9s das antigas:<\/p>\n

<p><\/strong>Esse \u00e9 um exemplo de <strong><\/strong>conte\u00fado importante<\/strong><\/strong> em um texto<\/p><\/strong>
\n<p>Esse \u00e9 um exemplo de <em><\/strong>conte\u00fado importante<\/em><\/strong> em um texto<\/p><\/strong><\/p>\n

Veja como fica:<\/p>\n

Esse \u00e9 um exemplo de conte\u00fado importante<\/strong> em um texto<\/p>\n

Esse \u00e9 um exemplo de conte\u00fado importante<\/em> em um texto<\/p>\n

Usabilidade e SEO<\/h2>\n

Como comentei l\u00e1 em cima, o SEO (Search Engine Optimization) \u00e9 a otimiza\u00e7\u00e3o para os motores de busca.<\/p>\n

Como via de regra, seguimos as melhores pr\u00e1ticas, pensando no Google, j\u00e1 que ele \u00e9 o maior buscador. Mas o bom disso \u00e9 que essa prepara\u00e7\u00e3o tamb\u00e9m serve para os outros buscadores tamb\u00e9m.<\/p>\n

J\u00e1 a usabilidade diz respeito a voc\u00ea desenvolver seu site para fornecer uma melhor experi\u00eancia para o usu\u00e1rio.<\/p>\n

Ou seja, pensar em cada elemento e detalhe do seu site de forma a ajudar o usu\u00e1rio a enxerg\u00e1-lo melhor e a navegar melhor pelo seu site.<\/p>\n

O bom disso tudo \u00e9 que algumas coisas voc\u00ea 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.<\/p>\n

Vamos acrescentar alguns atributos a mais a algumas tags que j\u00e1 explicamos:<\/p>\n

<a href=”url-do-link” title=”titulo-do-link”<\/strong>>texto-do-link<\/a><\/p>\n

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

Vamos agora entender o que esses atributos fazem:<\/p>\n