{"id":3304,"date":"2022-07-26T22:17:58","date_gmt":"2022-07-27T01:17:58","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=3304"},"modified":"2025-09-02T14:31:40","modified_gmt":"2025-09-02T17:31:40","slug":"html","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2022\/07\/26\/html","title":{"rendered":"HTML"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

E a\u00ed pessoal, nesta edi\u00e7\u00e3o do PET Reda\u00e7\u00e3o vamos abordar um tema muito importante para quem deseja se aprofundar melhor no desenvolvimento web, o HTML.<\/span><\/b><\/p>

HTML: Conceito<\/span><\/strong><\/p>

Primeiramente, HTML n\u00e3o \u00e9 uma linguagem de programa\u00e7\u00e3o; \u00e9 uma linguagem de marca\u00e7\u00e3o, usada para definir a estrutura do conte\u00fado de uma p\u00e1gina web, essa linguagem consiste em um conjunto de <\/span>elementos<\/span>, que podem ser utilizados para delimitar e agrupar diferentes partes do conte\u00fado para que ele atue de uma certa maneira.\u00a0<\/span><\/b><\/p>

HTML: Funcionamento<\/span><\/strong><\/p>

O HTML est\u00e1 lado a lado com os navegadores de internet e conectado com as ferramentas de busca, quando uma p\u00e1gina de HTML est\u00e1 pronta, os navegadores s\u00e3o capazes de interpret\u00e1-la e assim, renderizar o site.\u00a0<\/span><\/b><\/p>

HTML: Busca<\/span><\/strong><\/span><\/p>

Quando voc\u00ea busca por alguma palavra em algum mecanismo de busca, \u00e9 poss\u00edvel visualizar diferentes resultados, apesar de diferentes hospedagens, seguem a mesma estrutura; <\/span>um t\u00edtulo e uma pequena descri\u00e7\u00e3o do conte\u00fado<\/span> da p\u00e1gina. Essas informa\u00e7\u00f5es s\u00e3o fornecidas pelo HTML.<\/span>
<\/b><\/p>

HTML: Tags, Atributos e Elementos<\/span><\/strong><\/span><\/p>

A linguagem \u00e9 basicamente dividida entre estas tr\u00eas denomina\u00e7\u00f5es (tags, atributos e elementos) para identificar os diferentes itens da estrutura HTML.<\/span><\/p>

  • Tags:<\/span> S\u00e3o representa\u00e7\u00f5es de um elemento, \u00e9 utilizada para rotular a fun\u00e7\u00e3o daquele conte\u00fado e deve sempre ser escrita entre os s\u00edmbolos \u201c<\u201d e \u201c>\u201d, como por exemplo, a tag <h1> que adiciona um t\u00edtulo \u00e0 sua p\u00e1gina. Existem tags que podem ser utilizadas sozinhas ou em conjunto com a tag de fechamento, em que h\u00e1 a di\u00e7\u00e3o do caractere \u201c\/\u201d, por exemplo, a tag de fechamento de <h1> ser\u00e1 <\/h1>.\u00a0<\/span><\/p><\/li><\/ul>

    Veja o exemplo abaixo:<\/span><\/b><\/p>

    <h1> Seu t\u00edtulo aqui <\/h1><\/span><\/b><\/p>

    • Elementos:<\/span> S\u00e3o itens presentes na p\u00e1gina, como por exemplo, uma imagem, link, par\u00e1grafo e at\u00e9 mesmo um formul\u00e1rio. Os elementos podem ou n\u00e3o serem formados por conjunto de tags, essa condi\u00e7\u00e3o depende da necessidade de delimita\u00e7\u00e3o que voc\u00ea deseja fazer ao conte\u00fado do elemento. Podemos dividir os elementos em duas categorias: elementos de bloco e elementos de linha.<\/span><\/p><\/li><\/ul>

      Os elementos de bloco s\u00e3o isolados pela inser\u00e7\u00e3o de uma linha antes e depois da exibi\u00e7\u00e3o do conte\u00fado e sempre ocupam toda a largura que h\u00e1 dispon\u00edvel. Por exemplo, tags como: <h1>, <form>, <table>, etc.<\/span><\/b><\/p>

      Os elementos de linha, pelo contr\u00e1rio, apenas ocupam o espa\u00e7o daquilo que ser\u00e1 inserido na tela. Por exemplo, as tags: <img>, <a>, <button>, <input>, etc.<\/span><\/b><\/p>

      Veja o exemplo de elementos abaixo:<\/span><\/b><\/p>

      div<\/span>: elemento utilizado para organizar o conte\u00fado exibido na p\u00e1gina, geralmente aplicado na defini\u00e7\u00e3o do layout.<\/span><\/b><\/p>

      iframe<\/span>: elemento utilizado para exibir conte\u00fado de outras p\u00e1ginas.<\/span><\/b><\/p>

      • Atributos<\/span>: Representam todas as caracter\u00edsticas e funcionalidades que os elementos podem ter, o atributo de uma imagem (img), por exemplo, tem o atributo alt, que permite adicionar um texto alternativo caso o carregamento do arquivo venha a falhar.<\/span><\/p><\/li><\/ul>

        \u00a0<\/b><\/p>

        HTML: Estrutura b\u00e1sica<\/span><\/strong><\/p>

        Por fim, n\u00f3s temos a estrutura b\u00e1sica de um documento HTML.<\/span><\/p>

        \u00a0<\/b><\/p>

        <!DOCTYPE html><\/span><\/p>

        <html><\/span><\/p>

        <head><\/span><\/p>

        <title>T\u00edtulo da p\u00e1gina<\/title><\/span><\/p>

        <meta charset=”utf-8″ \/><\/span><\/p>

        <\/head><\/span><\/p>

        <body><\/span><\/p>

        <h1>T\u00edtulo<\/h1><\/span><\/p>

        <\/body><\/span><\/p>

        <\/html><\/span><\/p>

        \u00a0<\/b><\/p>

        <!DOCTYPE html>, \u00e9 uma declara\u00e7\u00e3o que informa qual a vers\u00e3o do HTML est\u00e1 sendo utilizada para que o navegador possa interpretar, neste caso, essa declara\u00e7\u00e3o representa o HTML5, vers\u00e3o mais recente.<\/span><\/p>

        <html>, essa tag informa para o navegador que esse documento \u00e9 HTML, \u00e9 importante manter todos os elementos dentro desta tag.<\/span><\/p>

        <head>, aqui cont\u00e9m todos os metadados da p\u00e1gina, que s\u00e3o informa\u00e7\u00f5es n\u00e3o vis\u00edveis para o usu\u00e1rio<\/span><\/p>

        <title>, nessa tag, \u00e9 definido o t\u00edtulo da p\u00e1gina, que aparece na aba da p\u00e1gina no navegador.<\/span><\/p>

        <meta charset>, usada para definir as informa\u00e7\u00f5es dos metadados, neste caso, o charset define a codifica\u00e7\u00e3o que ser\u00e1 utilizada na p\u00e1gina, geralmente \u00e9 utilizada a codifica\u00e7\u00e3o UTF-8, que tem suporte \u00e0 acentos.<\/span><\/p>

        <body>, o corpo da p\u00e1gina, onde todo o conte\u00fado da p\u00e1gina \u00e9 inserido, que \u00e9 o que aparece para o usu\u00e1rio final.<\/span><\/p>

        <h1>, no c\u00f3digo acima, essa tag est\u00e1 determinando o t\u00edtulo do corpo da p\u00e1gina.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

        E a\u00ed pessoal, nesta edi\u00e7\u00e3o do PET Reda\u00e7\u00e3o vamos abordar um tema muito importante para quem deseja se aprofundar melhor no desenvolvimento web, o HTML. HTML: Conceito Primeiramente, HTML n\u00e3o \u00e9 uma linguagem de programa\u00e7\u00e3o; \u00e9 uma linguagem de marca\u00e7\u00e3o, usada para definir a estrutura do conte\u00fado de uma p\u00e1gina web, essa linguagem consiste em […]<\/p>\n","protected":false},"author":3802,"featured_media":3305,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,112],"tags":[74,149,192],"class_list":["post-3304","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destaques","category-redacao","tag-linguagem-de-programacao","tag-redacao","tag-web-e-front-end"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/users\/3802"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=3304"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3304\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/3305"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=3304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=3304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=3304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}