Curso-Frontend_CodeBlue/aula0.6.html at master · oliheitor/Curso-Frontend_CodeBlue · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <title>Links, meta-tags e CSS</title>
    <link rel="stylesheet" href="../Aulas/css/aula6.css" />
    <!-- Meta tags sempre vão na região head do código -->
    <!-- Backlnks - autoridade e relevância no goolge quando um site é apontado por outro, garantindo posiçôes nas pesqisas do google -->

    <!-- Meta-tags de SEO -->
    <meta
      name="description"
      content="Aqui inserimos textos que tenham em media 150 caracteres para que fique bom na pesquisa do google"
    />
    <meta name="robots" content="index, follow" />
    <!-- Resumidamente aqui quer dizer "Ei, Google, pode indexar esse site e as páginas que se seguem ligadas a ela". Valores como noindex e nofollow também podem ser usados. -->

    <!-- Meta-tags de classificação -->
    <meta name="rating" content="mature" />
  </head>
  <body>
    <h1>Texto de exemplo 1</h1>
    <h2><span>Texto</span> de exemplo 2</h2>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta quaerat
      iusto, omnis id dolorem praesentium quos non cumque quia dolores nobis ut
      possimus ducimus a doloremque amet eaque optio quis.
    </p>
    <br />
    <p class="teste1">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum unde
      veritatis in aspernatur explicabo. Eveniet,
      <span>veniam natus</span> deserunt doloremque minus sint labore debitis
      commodi ratione necessitatibus velit culpa voluptatem deleniti!
    </p>
    <br />
    <h3 id="teste2">Texto exemplo <span>3</span></h3>
    <br />
    <p class="teste1 teste3">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      <span>Quas at illo officia</span> voluptate, ea reiciendis repellendus qui
      explicabo suscipit culpa eveniet minus soluta, asperiores beatae accusamus
      facilis modi maxime ipsam!
    </p>

    <br /><br /><br /><br />

    <!-- Marcador de Âncora -->
    <a name="topo"></a>
    <p><a href="#fim">Vá para o fim da página</a></p>

    <!-- tag link é um elemento inline, deve ser sempre inserido em um elemento de bloco -->

    <!-- Link Relativo - quando os links levam a rquivos d mesmo projeto, normalmente até me mesma pasta -->
    <p><a href="aula5.html">Clique e vá para a Aula 5</a></p>

    <!-- Link Absoluto - quando o link leva a um arquivo ou site que não faz parte do projeto e/ou está fora do projeto. É de muita importacia colocar "target= "_blank" quando usr lninks absolutos para que a pessoa não saia do site ao clicar em um link, sessa forma o contúdo do link absoluto é aberto em uma nova guia -->
    <p>
      <a href="http://www.google.com.br" target="_blank">Veja isso no Google</a>
    </p>

    <!-- Link de Download -->
    <p><a href="~Arquivo~"></a>Baixe o Arquivo</p>

    <!-- Link de email -->
    <p><a href="mailto: qualquer.coisa@gmail.com"></a> Fale Comigo</p>

    <!-- Link de Whats -->
    <p><a href="https://wa.me/55XXXXXXXXXXX"></a>Fale comigo no Whats</p>

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <!-- Link de Âncora - necessario colocar um # anes do nome do marcador de âncora para que o código não fique marcado como um arquivo em um link de download-->
    <p><a href="#topo">Voltar para o topo</a></p>

    <a name="fim"></a>
  </body>
</html>