{"id":29039,"date":"2021-08-26T14:19:42","date_gmt":"2021-08-26T17:19:42","guid":{"rendered":"https:\/\/www.remessaonline.com.br\/blog\/?p=29039"},"modified":"2025-02-06T07:11:13","modified_gmt":"2025-02-06T10:11:13","slug":"como-aprender-a-programar-em-html","status":"publish","type":"post","link":"https:\/\/www.remessaonline.com.br\/blog\/como-aprender-a-programar-em-html\/","title":{"rendered":"Como aprender a programar em HTML?"},"content":{"rendered":"\n<p>O HTML est\u00e1 entre as linguagens de programa\u00e7\u00e3o mais utilizadas em projetos digitais. Isso porque \u00e9 ela quem d\u00e1 forma, estrutura e organiza o conte\u00fado em texto de um ambiente. Entender como essa linguagem funciona \u00e9 fundamental para quem quer trabalhar com tecnologia, desenvolvendo solu\u00e7\u00f5es web.<\/p>\n\n\n\n<p>Neste artigo, voc\u00ea vai entender o que \u00e9 HTML, qual a sua fun\u00e7\u00e3o e ter\u00e1 acesso ao b\u00e1sico para come\u00e7ar a estudar e se aprofundar no tema. Continue lendo este artigo e aprenda mais sobre essa linguagem de programa\u00e7\u00e3o t\u00e3o utilizada no mercado.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 HTML e qual \u00e9 a sua fun\u00e7\u00e3o?<\/h2>\n\n\n\n<p>Hypertext Markup Language (HTML) \u00e9, na verdade, uma linguagem de marca\u00e7\u00e3o, que oferece a base para a constru\u00e7\u00e3o de p\u00e1ginas na web. Esse c\u00f3digo \u00e9 utilizado para criar as estruturas das p\u00e1ginas e inserir o conte\u00fado nelas, assim, \u00e9 poss\u00edvel organizar todo o conte\u00fado em par\u00e1grafos. A estrutura\u00e7\u00e3o em HTML permite a inser\u00e7\u00e3o de imagens, tabelas e outros recursos de exibi\u00e7\u00e3o de conte\u00fado.<\/p>\n\n\n\n<p>Dessa forma, voc\u00ea vai ouvir falar bastante em linguagem de programa\u00e7\u00e3o, referindo-se ao HTML, mas seus c\u00f3digos s\u00e3o utilizados na marca\u00e7\u00e3o da estrutura do conte\u00fado. \u00c9 importante destacar ainda que o HTML \u00e9 utilizado em todos os sistemas web. Por esse motivo, seus c\u00f3digos s\u00e3o os mais utilizados pelos desenvolvedores web, podendo ser utilizado em um site comum de apresenta\u00e7\u00e3o apenas e at\u00e9 em uma aplica\u00e7\u00e3o SaaS (Software as a Service ou Software como um Servi\u00e7o, na sigla em ingl\u00eas), por exemplo.<\/p>\n\n\n\n<p>Para que o c\u00f3digo seja capaz de estruturar uma p\u00e1gina na web, os documentos que s\u00e3o escritos em HTML s\u00e3o enviados pela internet para serem lidos por web browsers e outros programas. Os c\u00f3digos s\u00e3o transformados em informa\u00e7\u00f5es, como textos, imagens, links, cores etc.&nbsp;<\/p>\n\n\n\n<p>No HTML, as marca\u00e7\u00f5es s\u00e3o feitas pelas tags, que especificam como cada informa\u00e7\u00e3o vai aparecer na p\u00e1gina. Todos os documentos em HTML devem ser estruturados do come\u00e7o ao fim com as tags de marca\u00e7\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como \u00e9 a anatomia de um documento em HTML?<\/h2>\n\n\n\n<p>Para come\u00e7ar um documento em HTML \u00e9 preciso, antes de mais nada, entender como \u00e9 a sua anatomia. Ou seja, quais elementos s\u00e3o necess\u00e1rios para construir a estrutura que vai formar o site ou solu\u00e7\u00e3o web. Os elementos devem ser combinados para que a p\u00e1gina seja estruturada. Veja a seguir como \u00e9 a estrutura e qual \u00e9 a import\u00e2ncia de cada elemento.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;title&gt;Minha p\u00e1gina de teste&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;img src=\"imagens\/firefox-icon.png\" alt=\"minha p\u00e1gina de teste\"&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Entenda a fun\u00e7\u00e3o de cada elemento:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;!DOCTYPE html&gt; \u2014 \u00e9 onde o documento come\u00e7a. Esse c\u00f3digo de marca\u00e7\u00e3o \u00e9 obrigat\u00f3rio para come\u00e7ar a estrutura. Logo que HTML foi criado e come\u00e7ou a ser utilizado no desenvolvimento de estruturas web, os doctypes funcionavam como links para um conjunto de regras que a p\u00e1gina tinha que seguir. S\u00f3 assim seria considerada como um bom HTML. No entanto isso mudou, hoje s\u00e3o usados apenas para garantir o comportamento certo do documento.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;html&gt;&lt;\/html&gt; \u2014 envolve todo o conte\u00fado da p\u00e1gina e tamb\u00e9m \u00e9 considerado como elemento raiz.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;head&gt;&lt;\/head&gt; \u2014 funciona como um recipiente de tudo o que ser\u00e1 colocado na p\u00e1gina HTML e que n\u00e3o \u00e9 o conte\u00fado, mas que voc\u00ea quer mostrar para o usu\u00e1rio. Por isso, pode contar com palavras-chave e uma descri\u00e7\u00e3o, por exemplo, al\u00e9m de c\u00f3digo CSS para dar estilo ao conte\u00fado etc.&nbsp;<\/li>\n<\/ul>\n\n\n<!-- This site is converting visitors into subscribers and customers with OptinMonster - https:\/\/optinmonster.com :: Campaign Title: [INB] CRO_Inline_Leads_Guia_Receber_Dev_Topo -->\n<div id=\"om-iu8omihkpic3zk16lfmc-holder\"><\/div>\n<script>(function(d,u,ac){var s=d.createElement('script');s.type='text\/javascript';s.src='https:\/\/a.omappapi.com\/app\/js\/api.min.js';s.async=true;s.dataset.user=u;s.dataset.campaign=ac;d.getElementsByTagName('head')[0].appendChild(s);})(document,27905,'iu8omihkpic3zk16lfmc');<\/script>\n<!-- \/ OptinMonster -->\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;meta charset=&#8221;utf-8&#8243;&gt; \u2014 vai definir qual \u00e9 o conjunto de caracteres que seu documento deve usar para o UTF-8. Isso inclui quase todos os caracteres da maioria dos idiomas escritos. Esse elemento permite manipular qualquer conte\u00fado em texto que voc\u00ea colocar na estrutura. Essa defini\u00e7\u00e3o vai te ajudar a evitar problemas no futuro.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;title&gt;&lt;\/title&gt; \u2014 o title define o t\u00edtulo que vai aparecer na guia do navegador quando a p\u00e1gina for carregada. Al\u00e9m de tamb\u00e9m descrever a p\u00e1gina quando for adicionada aos favoritos.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;body&gt;&lt;\/body&gt; \u2014 esse elemento re\u00fane todo o conte\u00fado que o p\u00fablico vai ver, podendo conter texto, imagens, v\u00eddeos, jogos, faixas de \u00e1udio etc.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Entendendo os elementos da anatomia de um HTML<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"683\" sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Entendendo-os-elementos-da-anatomia-de-um-HTML-1024x683.jpg\" alt=\"Programas\" class=\"wp-image-29231\" srcset=\"https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Entendendo-os-elementos-da-anatomia-de-um-HTML-1024x683.jpg 1024w, https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Entendendo-os-elementos-da-anatomia-de-um-HTML-300x200.jpg 300w, https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Entendendo-os-elementos-da-anatomia-de-um-HTML-768x512.jpg 768w, https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Entendendo-os-elementos-da-anatomia-de-um-HTML-1170x780.jpg 1170w, https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Entendendo-os-elementos-da-anatomia-de-um-HTML-585x390.jpg 585w, https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Entendendo-os-elementos-da-anatomia-de-um-HTML-263x175.jpg 263w, https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Entendendo-os-elementos-da-anatomia-de-um-HTML.jpg 1200w\" \/><\/figure>\n\n\n\n<p>A estrutura de um HTML depende de alguns elementos para que a sua anatomia seja formada. A seguir, voc\u00ea vai ver quais s\u00e3o as principais partes de um elemento e qual a fun\u00e7\u00e3o de cada um.<\/p>\n\n\n\n<p>Tag de abertura: \u00e9 formada pelo elemento entre par\u00eanteses angulares de abertura e fechamento, como por exemplo: <code>&lt;p&gt;<\/code>. O elemento mostra onde come\u00e7a uma anatomia. No caso do p \u00e9 onde come\u00e7a o par\u00e1grafo.<\/p>\n\n\n\n<p>Tag de fechamento: tem a mesma fun\u00e7\u00e3o da tag de abertura, por\u00e9m indica o fechamento da anatomia e \u00e9 acompanhado de uma barra antes do elemento, como por exemplo: <code>&lt;\/p&gt;<\/code>. Essa \u00e9 a indica\u00e7\u00e3o de que o elemento, nesse caso o par\u00e1grafo, acabou.&nbsp; \u00c9 bastante comum que pessoas iniciantes em HTML esque\u00e7am de fechar a tag, o que leva a um resultado incorreto.<\/p>\n\n\n\n<p>Conte\u00fado: \u00e9 apenas o texto que vai dentro do elemento. Voc\u00ea pode, por exemplo, come\u00e7ar o par\u00e1grafo &lt;p&gt; colocar uma informa\u00e7\u00e3o e fechar o par\u00e1grafo <code>&lt;\/p&gt;<\/code>.&nbsp;<\/p>\n\n\n\n<p>Elemento: \u00e9 formado pela tag de abertura, tag de fechamento e pelo conte\u00fado, mas tamb\u00e9m pode ser formado por atributos. Atributos s\u00e3o informa\u00e7\u00f5es extras sobre o elemento, que n\u00e3o ser\u00e3o mostrados no conte\u00fado. Por exemplo,<code> class<\/code> \u00e9 o nome do atributo e <code>editor-note<\/code> \u00e9 o valor do atributo. O atributo <code>class<\/code> permite aplicar informa\u00e7\u00f5es sobre o estilo ao elemento, por exemplo.<\/p>\n\n\n\n<p>A estrutura de um atributo deve ter: espa\u00e7o entre o atributo e o nome do elemento ou do atributo anterior, caso o elemento j\u00e1 tenha um. O nome do atributo deve vir depois do sinal de igual (=), al\u00e9m de ter aspas de abertura e fechamento envolvendo o valor do atributo.&nbsp;<\/p>\n\n\n\n<p>Voc\u00ea n\u00e3o precisa usar aspas em valores de atributos simples, que n\u00e3o t\u00eam espa\u00e7o em branco ASCII (codifica\u00e7\u00e3o usada para representar textos) ou os caracteres <code>\u201c \u2018 ` = &lt; &gt;<\/code>. Por\u00e9m, \u00e9 mais indicado colocar aspas em todos os valores de atributos. Assim, seu c\u00f3digo ficar\u00e1 mais consistente e f\u00e1cil de compreender.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como colocar os elementos dentro de outros elementos?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"683\" sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Como-colocar-os-elementos-dentro-de-outros-elementos-1024x683.jpg\" alt=\"\" class=\"wp-image-29230\" srcset=\"https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Como-colocar-os-elementos-dentro-de-outros-elementos-1024x683.jpg 1024w, https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Como-colocar-os-elementos-dentro-de-outros-elementos-300x200.jpg 300w, https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Como-colocar-os-elementos-dentro-de-outros-elementos-768x512.jpg 768w, https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Como-colocar-os-elementos-dentro-de-outros-elementos-1170x780.jpg 1170w, https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Como-colocar-os-elementos-dentro-de-outros-elementos-585x390.jpg 585w, https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Como-colocar-os-elementos-dentro-de-outros-elementos-263x175.jpg 263w, https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Como-colocar-os-elementos-dentro-de-outros-elementos.jpg 1200w\" \/><\/figure>\n\n\n\n<p>O aninhamento acontece quando elementos s\u00e3o colocados dentro de outros elementos. Se o objetivo do conte\u00fado \u00e9 enfatizar alguma informa\u00e7\u00e3o dentro do conte\u00fado, voc\u00ea pode criar destaques dentro da frase usando outros elementos. Nesse caso, basta envolver a palavra que quer enfatizar no elemento &lt;strong&gt;, que deixa o texto destacado. Vamos a um exemplo:<\/p>\n\n\n\n<p><code>&lt;p&gt;Receber transfer\u00eancias internacionais com a Remessa Online \u00e9 &lt;strong&gt;muito f\u00e1cil &lt;\/strong&gt;.&lt;\/p&gt;&nbsp;<\/code><\/p>\n\n\n\n<p>Para que a p\u00e1gina mostre a informa\u00e7\u00e3o da forma correta, \u00e9 preciso se certificar de que os elementos est\u00e3o aninhados. Por isso, come\u00e7amos a frase abrindo o elemento <code>&lt;p&gt;<\/code>, em seguida adicionamos o elemento <code>&lt;strong&gt;<\/code>. O pr\u00f3ximo passo \u00e9 fechar o elemento <code>&lt;strong&gt;<\/code> logo ap\u00f3s terminar o trecho que desejamos enfatizar. Em seguida, \u00e9 s\u00f3 fechar o elemento &lt;p&gt;.&nbsp;<\/p>\n\n\n\n<p>Abrir e fechar os elementos corretamente vai garantir que eles sejam transmitidos de forma clara ao usu\u00e1rio do ambiente. Quando os elementos n\u00e3o s\u00e3o devidamente marcados, o navegador vai tentar descobrir o que foi constru\u00eddo na estrutura e reportar erros.<\/p>\n\n\n\n<p>O HTML \u00e9 uma estrutura bem completa para construir a anatomia de um site. S\u00e3o tantas informa\u00e7\u00f5es que n\u00e3o seria poss\u00edvel colocar todas as orienta\u00e7\u00f5es neste conte\u00fado, se voc\u00ea quer aprender mais sobre HTML como, por exemplo, aplicar cores em suas tags, confira este outro conte\u00fado!<\/p>\n\n\n\n<div id=\"om-br4ral8cqtncouhsdhwk-holder\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea sabe o que \u00e9 HTML? Neste post voc\u00ea entender\u00e1 melhor a fun\u00e7\u00e3o do HTML e saber\u00e1 quais s\u00e3o os primeiros passos para se tornar um programador HTML. <\/p>\n","protected":false},"author":33,"featured_media":29229,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","om_disable_all_campaigns":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[43394,43390],"tags":[32886,26420,32893],"class_list":["post-29039","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas-e-tutoriais","category-tecnologia","tag-mercado","tag-remessa-online","tag-transferencias-internacionais"],"acf":[],"taxonomy_info":{"category":[{"value":43394,"label":"Dicas e tutoriais"},{"value":43390,"label":"Tecnologia"}],"post_tag":[{"value":32886,"label":"Mercado"},{"value":26420,"label":"Remessa Online"},{"value":32893,"label":"Transfer\u00eancias internacionais"}]},"featured_image_src_large":["https:\/\/www.remessaonline.com.br\/blog\/wp-content\/uploads\/2021\/08\/Como-aprender-a-programar-em-HTML-1024x673.jpg",1024,673,true],"author_info":{"display_name":"Fabiana Lima","author_link":"https:\/\/www.remessaonline.com.br\/blog\/author\/fabiana\/"},"comment_info":0,"category_info":[{"term_id":43394,"name":"Dicas e tutoriais","slug":"dicas-e-tutoriais","term_group":0,"term_taxonomy_id":43394,"taxonomy":"category","description":"Guias pr\u00e1ticos e passo a passo para aproveitar melhor ferramentas e solu\u00e7\u00f5es digitais.","parent":43390,"count":162,"filter":"raw","term_order":"0","cat_ID":43394,"category_count":162,"category_description":"Guias pr\u00e1ticos e passo a passo para aproveitar melhor ferramentas e solu\u00e7\u00f5es digitais.","cat_name":"Dicas e tutoriais","category_nicename":"dicas-e-tutoriais","category_parent":43390},{"term_id":43390,"name":"Tecnologia","slug":"tecnologia","term_group":0,"term_taxonomy_id":43390,"taxonomy":"category","description":"Not\u00edcias, an\u00e1lises e insights sobre tecnologia, inova\u00e7\u00e3o e ferramentas digitais que impactam neg\u00f3cios e a vida cotidiana.","parent":0,"count":604,"filter":"raw","term_order":"0","cat_ID":43390,"category_count":604,"category_description":"Not\u00edcias, an\u00e1lises e insights sobre tecnologia, inova\u00e7\u00e3o e ferramentas digitais que impactam neg\u00f3cios e a vida cotidiana.","cat_name":"Tecnologia","category_nicename":"tecnologia","category_parent":0}],"tag_info":[{"term_id":32886,"name":"Mercado","slug":"mercado","term_group":0,"term_taxonomy_id":32886,"taxonomy":"post_tag","description":"","parent":0,"count":3844,"filter":"raw","term_order":"0"},{"term_id":26420,"name":"Remessa Online","slug":"remessa-online","term_group":0,"term_taxonomy_id":26420,"taxonomy":"post_tag","description":"","parent":0,"count":2021,"filter":"raw","term_order":"0"},{"term_id":32893,"name":"Transfer\u00eancias internacionais","slug":"transferencias-internacionais","term_group":0,"term_taxonomy_id":32893,"taxonomy":"post_tag","description":"","parent":0,"count":897,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/www.remessaonline.com.br\/blog\/wp-json\/wp\/v2\/posts\/29039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.remessaonline.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.remessaonline.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.remessaonline.com.br\/blog\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.remessaonline.com.br\/blog\/wp-json\/wp\/v2\/comments?post=29039"}],"version-history":[{"count":0,"href":"https:\/\/www.remessaonline.com.br\/blog\/wp-json\/wp\/v2\/posts\/29039\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.remessaonline.com.br\/blog\/wp-json\/wp\/v2\/media\/29229"}],"wp:attachment":[{"href":"https:\/\/www.remessaonline.com.br\/blog\/wp-json\/wp\/v2\/media?parent=29039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.remessaonline.com.br\/blog\/wp-json\/wp\/v2\/categories?post=29039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.remessaonline.com.br\/blog\/wp-json\/wp\/v2\/tags?post=29039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}