HTML: Tags Básicas

Prof. Alexsander

1. Introdução

Nessa aula vamos aprender a utilizar as tags básicas do HTML e para isso vamos criar a página que pode ser vista na Animação 1.

Animação 1

No final da página vamos trabalhar com um projeto mais completo “Criando um Site Profissional”

”

Veja no Flow abaixo o que vamos aprender.

Agora que você já sabe a importância de aprender as tags básicas, podemos seguir e conhecer a página que vamos criar neste curso. Este é o assunto da próxima aula.

Checkpoint – Aprender as tags básicas é essencial para se criar uma página web.

2. Entendendo o exemplo

Já entendemos a importância das tags básicas. Para aprendermos a utilizá-las vamos criar a página que pode ser vista na Animação 1.

Animação 1. Página criada utilizando as tags básicas

Checkpoint – Agora que conhecemos o nosso exemplo ficará mais fácil aprendermos cada tag básica.

3. Relembrando o conceito de Tags HTML

No curso anterior aprendemos o que são tags e elementos HTML, porém por serem conceitos importantes vamos relembrar no Flow abaixo.

Checkpoint – É através das tags HTML que o navegador vai saber como exibir um conteúdo para o usuário.

4. Tag title

O título de uma página web permite que o usuário identifique o tipo de conteúdo que ele pode esperar dentro daquela página. Esse título pode ser definido por meio da tag title, como vemos no flow a seguir:

No Código 1 vemos o código usado no flow.

<!DOCTYPE html>

<html>

    <head>

        <title>Tags básicas do HTML – Tag Title</title>

    </head>

    <body>

        <h1>Tag Title</h1>

        <p>A tag title é responsável por definir o título de uma página web.</p>

        <p>O conteúdo do título de uma página é muito importante para a otimização do mecanismo de pesquisa (SEO)! O título da página é usado pelos algoritmos do mecanismo de pesquisa para decidir a ordem ao listar as páginas nos resultados da pesquisa.</p>

    </body>

</html>

Código 1. Código do flow

Antes de vermos como usar a tag title, vamos ver a posição dessa tag no arquivo HTML no flow a seguir:

Agora que vimos o posicionamento da tag title no documento, vamos ver no flow abaixo como utilizamos essa tag:

Caso a tag title não seja definida no arquivo html, o título que aparecerá na aba da página será o nome do arquivo.

Checkpoint
A tag title é muito importante para o documento HTML. Além dela indicar qual o conteúdo que será abordado na página, ela é importante para os mecanismos de busca como o Google por exemplo

5. Tags h1, h2, h3, h4, h5 e h6

Toda página web possui títulos para que o usuário possa entender do que se trata o conteúdo apresentado. No Flow abaixo vamos aprender como exibir esses títulos.

O Código 1 apresenta exemplos de títulos.

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

Código 1. Exemplo de criação de títulos

Checkpoint – Através dos títulos conseguimos identificar do que se trata um conteúdo.

6. Tag p

Na nossa página web é comum separarmos textos ou conteúdos através de parágrafos. Aprenda no Flow abaixo como criá-lo.

O Código 1 apresenta um exemplo de uso do parágrafo.

1 <p>Título de nível 1</p>

Código 1. Exemplo de criação do uso de parágrafos

Checkpoint – Ao separar o conteúdo da página em parágrafos garantimos a acessibilidade à dispositivos de leitura

7. Tag a

Criar links em uma página web significa utilizar a tag <a>. Aprenda no Flow abaixo como utilizar esta tag.

Além de abrir um link externo como por exemplo uma nova página, um número de telefone ou um endereço de e-mail, um link pode enviar o usuário para uma parte específica do próprio site como pode ser visto na Animação 1.

Animação 1. Enviando o usuário para uma parte específica da página

Veja no Flow abaixo como isso é feito.

O Código 1 apresenta exemplos de links.

1  <!-- Abrir uma página do próprio site -->
2
3   <a href="pagina2.html">
4    Abrir página 2
5  </a>
6
7  <!-- Link para um número de telefone -->
8  <a href="tel:+5561995115774">
9    +55 61 99511 - 5774
10  </a>
11
12  <!-- Link para um email -->
13  <a href="mailto:suporte@exemplo.com">
14    Enviar email
15  </a>
16
17  <!-- Âncora para um elemento da própria página -->
18  <a href="#contato">
19    Contato
20  </a>
21
22  <!-- Link para um site externo que abrirá em uma nova guia -->
23  <a href="https://www.mercadolivre.com.br/" target="_blank">
24    Site do mercado livre
25  </a>

Código 1. Exemplo de links

Checkpoint – A tag <a> é utilizada para enviar o usuário para outra página, ligar para um telefone, enviar um email ou enviar para outra parte da sua página web

8. Tag img

Para exibir uma imagem na página é muito simples basta utilizar a tag <img> que pode ser vista no Flow abaixo.

Para exibir uma imagem local é necessário que ela esteja no mesmo diretório do seu projeto. Veja no Flow abaixo como isso é feito.

É possível exibir uma imagem que não esteja na mesma pasta do arquivo que a exibe, desde que ela esteja dentro do diretório do projeto. Veja no Flow abaixo como isso é feito.

O Código 1 apresenta exemplos do uso da tag img.

1 <!-- Imagem do mesmo diretório que o projeto e na mesma pasta que o arquivo que a exibe -->
2 <img src="computador.jpg" alt="Notebook Lenovo Ideapad S145" title="Notebook Lenovo">
3
4 <!-- Imagem do mesmo diretório que o projeto porém em uma subpasta -->
5 <img src="assets/computador.jpg" alt="Notebook Lenovo Ideapad S145" title="Notebook Lenovo">
6
7 <!-- Imagem de uma url externa -->
8 <img src="https://http2.mlstatic.com/D_NQ_NP_785711-MLA40805775472_022020-O.webp" alt="Notebook Lenovo Ideapad S145" title="Notebook Lenovo">

Código 1. Exemplo de exibição de imagens

Checkpoint – A tag
<igm> exibe uma imagem na página.

9. Tag div

Uma das tags mais utilizadas no HTML é a tag <div>. Ela é usada para agrupar elementos como pode ser visto no Flow abaixo.

O Código 1 apresenta um exemplo do uso da tag div.

1 <div>
2  <img src="computador.jpg" alt="Notebook Lenovo Ideapad S145"
3       title="Notebook Lenovo">
4  <a href="pagina2.html">
5    Abrir descrição do produto
6  </a>
7 </div>

Código 1. Exemplo do uso da tag div

Checkpoint – Utilizamos a tag div para organizar melhor nosso documento HTML

10. Tag span

Em uma frase às vezes é necessário que algumas palavras recebam algum tipo de destaque. Nesse caso utilizamos a tag span para definir quais são essas palavras. Entenda melhor sobre ela no flow abaixo:

O Código 1 apresenta um exemplo do uso da tag span.

1 <div>
2    <h3>
3        <span>Notebook Lenovo Ideapad</span> S145 8ª Intel Core I5 8GB 1TB HD 15,6" W10 Prata
4    </h3>
5
6    <p>
7       Com o Notebook da Lenovo você terá um notebook de <span>última geração</span>, prático e <span>veloz</span>, com excelente capacidade de <span>armazenamento</span>, design inovador e exclusivo, além de você estar sempre conectado com estilo. Sua tela de 15.6" oferece.
8    </p>
9 </div>

Código 1. Exemplo do uso da tag span

Como vimos <span> não possui aparência visual, porém mais a frente quando você estudar CSS ela poderá ser estilizada. Veja na Figura 1 a aparência do exemplo das tags span antes e depois de serem estilizadas com o CSS.

Checkpoint – Utilizamos a tag span para marcar textos e com isso organizar melhor nosso documento HTML, além de inserir estilos CSS a elas

11. Tag iframe

A tag iframe é usada para incorporar, ou seja, trazer o conteúdo de uma página web externa para o nosso site. Entenda melhor no flow abaixo:

Veja no flow abaixo como utilizamos a tag iframe:

O Código 1 apresenta o exemplo de uso da tag iframe.

1 <div>
2    <h3>Previsão do tempo</h3>
3
4    <p>Veja o como está o clima hoje.</p>
5
6    <iframe
7      src="https://www.accuweather.com/"
8      width="600" height="450"
9    > </iframe>
10
11 </div>

Código 1. Exemplo de uso de iframe

Existem alguns sites que não permitem que você copie a sua URL e a utilize no iframe dentro do seu site. Ao fazer isso o iframe no seu site não será carregado como pode ser visto na Figura 1.

Veja no Código 2 o exemplo do iframe direto da página inicial do Google Maps.

1 <iframe
2     src="https://www.google.com/maps/"
3     width="600" height="450"
4   ></iframe>

Código 2. Exemplo de uso de iframe no Google Maps

O Google Maps, assim como outros sites, possui uma URL específica para iframe.

Veja no flow abaixo um exemplo de como inserir corretamente um iframe do Google Maps no seu site.

Veja no Código 3 a codificação usada para incorporar corretamente o Google Maps no seu site.

1 <div>
2    <h3>Contato</h3>
3
4    <p>Endereço: Av. Ayrton Senna, 3000 - Barra da Tijuca, Rio de Janeiro - RJ</p>
5
6    <iframe
7      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3673.1178584692666!2d-43.36403258535193!3d-22.982693146361264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9bda2ec9620a2d%3A0x5c8412e8969fa343!2sDevMedia!5e0!3m2!1spt-BR!2sbr!4v1614278713361!5m2!1spt-BR!2sbr"
8      width="600" height="450"
9    ></iframe>
10
11  </div>

Código 3. Incorporando corretamente o Google Maps no seu site

Checkpoint – A tag iframe incorpora o conteúdo de uma página externa no nosso site

12. ARQUITETURA DO PROJETO

A página que vamos criar pode ser vista na Animação 1.

Animação 1. Página que vamos criar neste curso

Antes de colocar a mão no código vamos conhecer como nosso documento é dividido.

Checkpoint – Nosso projeto é uma loja virtual que exibe dois produtos em promoção

13. Criando a estrutura do projeto

Antes de começarmos a digitar nosso documento HTML crie uma pasta para o projeto e baixe as imagens dos produtos (Figura 1) que estão disponíveis no botão acima Down.

Feito isso crie um arquivo chamado index.html e insira o Código 1.

1 <!DOCTYPE html>
2 <html lang="pt-br">
3  <head>
4      <meta charset="UTF-8">
5      <meta name="viewport" content="width=device-width, initial-scale=1.0">
6      <title>Loja virtual</title>
7  </head>
8  <body>
9      Produtos em promoção
10
11      Informática
12
13      Notebook Lenovo Ideapad S145 8ª Intel Core I5 8GB 1TB HD 15,6" W10 Prata
14      R$ 3 500,00
15      imagem computador.jpg
16      Com o Notebook da Lenovo você terá um notebook de última geração,
17      prático e veloz, com excelente capacidade de armazenamento, design
18      inovador e exclusivo, além de você estar sempre conectado com estilo.
19      Sua tela de 15.6" oferece...
20      Comprar
21
22      Computador Desktop Completo
23      R$ 2 500,00
24      imagem desktop.jpg
25      Já vem com Monitor LED HDMI Intel Core i5 8GB HD 500GB com caixas
26      de som mouse e teclado EasyPC Standard Plus.
27      Comprar
28
29  </body>
30  </html>

Código 1. Criando a estrutura do nosso projeto.

Entenda no Flow abaixo o que criamos.

Ao salvar as alterações perceba que nosso site é apenas um conjunto de textos como podemos ver na Figura 2.

Na próxima aula vamos inserir as tags que aprendemos neste curso e teremos o resultado da Animação 1.