Article image
Renê Arruda
Renê Arruda02/07/2022 23:33
Compartilhe

HTML explicado!

  • #HTML

Este artigo trata de uma resumo em html, literalmente, onde tento mostrar em código com comentários em meu primeiro arquivo html, o que seria cada item. A ideia é que esse artigo possa ficar cada vez maior, com adição de CSS em código para o mesmo código descrito a abaixo, assim como melhorias, ou que os colegas possam opnar sobre o mesmo afim de melhorar. Detalhe, melhor copiar e usar o visual code studio, ficará mais didático.

<!DOCTYPE html>

<html lang="pt-BR"> <!--Aqui deixo meu comentário... a tag html indica o ínicio do arquivo!-->

<head> <!--Aqui onde fica as informações que serão lidas pelo browser!-->

  <meta charset="utf-8">

  <title>Renê Sousa Arruda</title>

  <link rel="stylesheet" href="style.css">

</head>

<!--ISSO AQUI É UM COMENTÁRIO DIVIDINDO O CORPO DO ARQUIVO HTML, NÃO TERÁ EFEITO NO CÓDIGO!!-->

<body>

  <header>

    <img src="html1.jpg" alt="foto html" class="post_image1">

    <h1 id="title">HTML Explicado</h1>

  </header>

<section>

    <header>

      <h2 class="subtitle">HMTL5</h2>

    </header>

  <article class="post">

    <header>

      <h3 class="post_title">Aqui vc vai aprender mais sobre a tag a</h3>

      <img src="html2.jpg" alt="foto html2" class="post_image2"> <!-- para imagem, segue o padrão com endereço da imagem após "src", se local, apenas nome da image com tipo de arquivo ou nao funciona, seguido de "alt", e descrição da imagem, caso por alguma motivo a mesma nao apareça, sendo então apresentado a descrição. Se for necessário descrever a image, usa-se a tag <p> e descreva a mesma!-->

    </header>

    <p class="post_content">Aqui podemos usar a tag a (âncora) como links para <a href= "mailto:renarruda1@hotmail.com" target="_blank">email</a> assim como, para links externos de sites, como o <a href="https://www.linkedin.com/in/ren%C3%AA-arruda-7568b928/" target="_blank">linkedin</a>. Mas preste atenção, após o endereço para redirecionar para outra página precisamos adicionar o "target="_blank"" logo após o email ou link. Veja o código html! Entre as tags a, você pode por o texto que servirá como link para o endereço externo, seja email ou sites!</p>

  </article>

</section>

<footer>

  <ul class="contacts_list">

    <li>

      <a href="mailto:renarruda1@hotmail.com" target="_blank">renarruda1@hotmail.com</a> <!--a tag "a" é onde colocamos os hiperlinks, como email e endereços externos. Email antecedido de mailto:o email aqui, e link externo com endereço completo, seguido de target="_blank" para abrir em outra página!-->

    </li>

    <li>

      <a href="https://www.linkedin.com/in/ren%C3%AA-arruda-7568b928/" target="_blank">linkedin</a>

    </li>

    <li>

      <a href="https://github.com/renarruda" target="_blank">GitHub</a>

    </li>

  </ul>

</footer>

</body>

</html>

<!--lembre-se, também dá para desativar parte do código apenas comentando o mesmo!-->

Compartilhe
Comentários (3)

DM

Douglas Martins - 18/03/2023 09:17

Obrigado

GA

Gustavo Andrade - 03/07/2022 11:09

Esse artigo me lembrou das aulas de algoritmos no primeiro ano de faculdade. hahaha. Parabéns, ficou muito bom!

MS

Maicon Silva - 03/07/2022 09:25

Parabéns pelo conteúdo!