{"id":206,"date":"2024-09-18T09:51:33","date_gmt":"2024-09-18T12:51:33","guid":{"rendered":"https:\/\/dicasepromocoes.com.br\/web\/?page_id=206"},"modified":"2024-09-24T16:19:14","modified_gmt":"2024-09-24T19:19:14","slug":"curso-de-html-e-css-gratis-elementos","status":"publish","type":"page","link":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/","title":{"rendered":"Curso de html e css gr\u00e1tis &#8211; Elementos"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<p class=\"has-text-align-left has-black-color has-cyan-bluish-gray-background-color has-text-color has-background has-link-color wp-elements-5f90618acff291255124721b87f9aded\"><a href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis\/\" data-type=\"page\" data-id=\"143\">In\u00edcio<\/a><br><a href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-introducao\/\" data-type=\"page\" data-id=\"153\">Introdu\u00e7\u00e3o<\/a><br><a href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-editores-html\/\" data-type=\"page\" data-id=\"170\">Editores<\/a><br><a href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/\" data-type=\"page\" data-id=\"170\">B\u00e1sico<\/a><br><a href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/\" data-type=\"page\" data-id=\"206\">Elementos<\/a><br><a href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-gratis-atributos\/\" data-type=\"page\" data-id=\"249\">Atributos<\/a><br><a href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-gratis-formatacao\/\" data-type=\"page\" data-id=\"260\">Formata\u00e7\u00e3o<\/a><br><a href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-titulos-ou-cabecalhos\/\" data-type=\"page\" data-id=\"275\">T\u00edtulos<\/a><br><a href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-paragrafos\/\" data-type=\"page\" data-id=\"278\">Par\u00e1grafos<\/a><br><a href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-citacoes\/\" data-type=\"page\" data-id=\"267\">Cita\u00e7\u00f5es<\/a><br><a href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-estilos\/\" data-type=\"page\" data-id=\"280\">Estilos<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p>Como j\u00e1 vimos anteriormente um elemento HTML \u00e9 definido por uma &lt;tag de abertura&gt;, algum conte\u00fado e a &lt;\/tag de fechamento&gt;.<br>Como exemplo de elementos, n\u00f3s j\u00e1 aprendemos:<br>1 &#8211; a hierarquia de T\u00edtulos ou Cabe\u00e7alhos &#8211; &lt;h1&gt; at\u00e9 &lt;h6&gt;;<br>2 &#8211; par\u00e1grafo &#8211; &lt;p&gt;;<br>3 &#8211; todas as tags necess\u00e1rias para montar o esqueleto do HTML &#8211; &lt;html&gt;, &lt;head&gt;, &lt;body&gt;, &lt;title&gt;<br>Agora iremos falar sobre links e coment\u00e1rios<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Links HTML<\/h2>\n\n\n\n<p>Tamb\u00e9m conhecidos como hiperlinks, s\u00e3o elementos que conectam p\u00e1ginas web, permitindo que os usu\u00e1rios naveguem entre elas.<br>Os links podem ser representados por textos, frases, \u00edcones ou imagens. Quando um usu\u00e1rio clica sobre um link, ele \u00e9 direcionado para o conte\u00fado ao qual o link se refere.<\/p>\n\n\n\n<p>Para criar um link em HTML, \u00e9 usada a tag \u00e2ncora, que \u00e9 representada pela letra &#8220;a&#8221;. O <strong>atributo principal<\/strong> do elemento &#8220;a&#8221; \u00e9 o &#8220;href&#8221;, que especifica o destino do link. O atributo &#8220;href&#8221; \u00e9 composto por dois elementos: a URL (o link real) seguida do texto ou objeto clic\u00e1vel que vai aparecer na p\u00e1gina.<\/p>\n\n\n\n<p><strong>Vamos ent\u00e3o montar um link para acessar o site do Google.<\/strong><\/p>\n\n\n\n<p>Primeiro criamos um par\u00e1grafo e depois vamos criar a tag de abertura: &lt;a&gt;<br>Agora vamos colocar dentro da tag, o atributo: &lt;a href&gt;<br>No atributo vamos indicar o destino: &lt;a href=&#8221;https:\/\/google.com&#8221;&gt;<br>Feito isto, vamos colocar o conte\u00fado: &lt;a href=&#8221;https:\/\/google.com&#8221;&gt;Conhe\u00e7a o Google<br>E finalmente, vamos fechar a o elemento com a tag de encerramento:<br>&lt;a href=&#8221;https:\/\/google.com&#8221;&gt;Conhe\u00e7a o Google&lt;\/a&gt; e n\u00e3o esque\u00e7a de fechar a tag do par\u00e1grafo.<\/p>\n\n\n\n<p><strong>Criando um link de e-mail<\/strong><\/p>\n\n\n\n<p>O conceito \u00e9 o mesmo, criamos um par\u00e1grafo e depois come\u00e7amos pela tag &#8220;a&#8221;, acrescentando o atributo &#8220;href&#8221; colocando o destino do link, depois o conte\u00fado e finalmente fechando a tag.<br>&lt;a href=&#8221;mailto:alguem@google.com&#8221;&gt;Clique para enviar e-mail&lt;\/a&gt; e por \u00faltimo fechar a tag do par\u00e1grafo.<\/p>\n\n\n\n<p><strong>Fazendo coment\u00e1rios<\/strong><\/p>\n\n\n\n<p>Quando estamos editando um documento HTML precisamos de orienta\u00e7\u00e3o para nos lembrar onde voc\u00ea est\u00e1, ou o que foi feito, ou o que precisa fazer. Para isso n\u00f3s usamos os coment\u00e1rios.<\/p>\n\n\n\n<p>Em qualquer ponto de seu documento HTML voc\u00ea pode inserir coment\u00e1rios utilizando como c\u00f3digo de abertura &lt;!&#8211; ent\u00e3o voc\u00ea digita os coment\u00e1rios e para fechar utilize o c\u00f3digo  &#8211;&gt;<\/p>\n\n\n\n<p><strong>Exemplo de coment\u00e1rio<\/strong><\/p>\n\n\n\n<p>As vezes ficamos na d\u00favida se vamos precisar de alguma parte de um texto ou n\u00e3o, ent\u00e3o utilizamos os coment\u00e1rios para deixar invis\u00edvel ao visitante.<br>&lt;p&gt;Acho que vou precisar desta parte do texto, mas acredito que n\u00e3o vou precisar desta.&lt;\/p&gt; Ent\u00e3o colocamos o coment\u00e1rio na segunda parte do texto.<br>&lt;p&gt;Acho que vou precisar desta parte do texto&lt;!&#8211;, mas acredito que n\u00e3o vou precisar desta.&#8211;&gt;&lt;\/p&gt; Note, que neste caso terminamos o coment\u00e1rio antes do fechamento da tag do par\u00e1grafo pois precisamos dela mas n\u00e3o precisamos de parte do texto inclu\u00eddo nela.<\/p>\n\n\n\n<p><strong>Exercitando seu conhecimento<\/strong><\/p>\n\n\n\n<p>Monte o esqueleto do HTML e no corpo &lt;body&gt; coloque estes dois tipos de link fa\u00e7a a frase com o coment\u00e1rio. Salve o arquivo como index.html e clique nele para ver o resultado. Se tudo estiver certo vai ficar parecido com esta imagem abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"483\" src=\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina11.jpg\" alt=\"Editando links e coment\u00e1rios em HTML\" class=\"wp-image-213\" srcset=\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina11.jpg 812w, https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina11-300x178.jpg 300w, https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina11-768x457.jpg 768w\" sizes=\"auto, (max-width: 812px) 100vw, 812px\" \/><\/figure>\n\n\n\n<p>N\u00e3o deu certo?? Tente copiar este script abaixo e confira onde errou!<\/p>\n\n\n\n<p>&lt;!DOCTYPE html&gt;<br>     &lt;head&gt;<br>        &lt;title&gt;Nome da p\u00e1gina&lt;\/title&gt;<br>    &lt;\/head&gt;<br><br>    &lt;body&gt;<br>    &lt;p&gt;COMENT\u00c1RIO&lt;\/p&gt;<br>    &lt;p&gt;Acho que vou precisar desta parte do texto&lt;!&#8211;, mas acredito que n\u00e3o vou precisar desta.&#8211;&gt;&lt;\/p&gt;<br>    &lt;p&gt;LINK PARA O GOOGLE&lt;\/p&gt;<br>    &lt;p&gt;&lt;a href=&#8221;https:\/\/google.com&#8221;&gt;Conhe\u00e7a o Google&lt;\/a&gt;&lt;\/p&gt;<br>    &lt;p&gt;E-MAIL&lt;\/p&gt;<br>    &lt;p&gt;&lt;a href=&#8221;mailto:alguem@google.com&#8221;&gt;Clique para enviar e-mail&lt;\/a&gt;&lt;\/p&gt;<br>  &lt;\/body&gt;<br>&lt;\/html&gt;<\/p>\n\n\n\n<p><strong>OBS.:<\/strong> Se voc\u00ea n\u00e3o sabe o que \u00e9 o esqueleto volte ao primeiro cap\u00edtulo de nosso curso e aprenda passo a passo.<\/p>\n\n\n\n<p><strong>Trabalhando com imagens<\/strong><\/p>\n\n\n\n<p>Por favor, clique com o bot\u00e3o direito do mouse sobre a imagem abaixo e a salve na sua pasta HTML. Renomeie como flores300x300.jpg<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/flores300x300.jpg\" alt=\"flores\" class=\"wp-image-239\" srcset=\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/flores300x300.jpg 300w, https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/flores300x300-150x150.jpg 150w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>A tag para imagens -e &lt;img&gt; e o atributo principal \u00e9 o src que mostra o caminho para localizar a imagem. Vamos a um exemplo:<\/p>\n\n\n\n<p>&lt;img src=&#8221;flores300x300.jpg&#8221;&gt;<\/p>\n\n\n\n<p>Agora, por favor, dentro da pasta HTML crie uma nova pasta com o nome de imagens e depois clique com o lado direito do mouse nesta imagem abaixo e salve-a dentro da pasta imagens e renomeie para pao300x300.jpg<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/pao300x300.jpg\" alt=\"P\u00e3o\" class=\"wp-image-241\" srcset=\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/pao300x300.jpg 300w, https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/pao300x300-150x150.jpg 150w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>Como esta imagem est\u00e1 na pasta imagens, vamos alterar as informa\u00e7\u00f5es do atributo src que vai ficar como abaixo:<\/p>\n\n\n\n<p>&lt;img src=&#8221;imagens\/pao300x300.jpg&#8221;&gt;<\/p>\n\n\n\n<p>Uma outra forma de indicar uma imagem \u00e9 atrav\u00e9s de URL.<br>Novamente, com o bot\u00e3o do lado direito do mouse, clique sobre a imagem do p\u00e3o acima e selecione copiar endere\u00e7o da imagem e cole no src:<\/p>\n\n\n\n<p>&lt;img src=&#8221;<a href=\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/pao300x300.jpg\">https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/pao300x300.jpg<\/a>&#8220;&gt;<\/p>\n\n\n\n<p><strong>ATEN\u00c7\u00c3O<\/strong>: para utilizar imagens de outros sites voc\u00ea deve ter autoriza\u00e7\u00e3o pr\u00e9via.<\/p>\n\n\n\n<p>Podemos alterar as dimens\u00f5es de imagens com os atributos width (largura) e height (altura).<br>&lt;img&nbsp;src=&#8221;imagens\/pao300x300.jpg&#8221; width=&#8221;500&#8243;&nbsp;height=&#8221;500&#8243;&gt;<\/p>\n\n\n\n<p>Podemos adicionar tamb\u00e9m o atributo alt que \u00e9 obrigat\u00f3rio para a tag &lt;img&gt; pois ele mostra um texto alternativo para uma imagem, se a imagem por algum motivo n\u00e3o puder ser exibida. Isso pode ocorrer devido a uma conex\u00e3o lenta, a um erro de escrita no atributo src ou ao usu\u00e1rio usar um leitor de tela.<\/p>\n\n\n\n<p>&lt;img&nbsp;src=&#8221;imagens\/pao300x300.jpg&#8221; width=&#8221;500&#8243;&nbsp;height=&#8221;500&#8243; alt=&#8221;P\u00e3o franc\u00eas&#8221;&gt;<\/p>\n\n\n\n<p>N\u00e3o esque\u00e7a que cada atributo deve estar contido entre aspas duplas, do contr\u00e1rio vai arruinar o script da p\u00e1gina.<\/p>\n\n\n\n<p>Quando estiver passando estas informa\u00e7\u00f5es para o esqueleto HTML experimente preencher errado, por exemplo, tirando do texto acima a palavra imagens\/ e veja o que acontece.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"998\" height=\"836\" src=\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina15.jpg\" alt=\"Edi\u00e7\u00e3o de HTML caracterizando imagens e seus atributos\" class=\"wp-image-247\" srcset=\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina15.jpg 998w, https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina15-300x251.jpg 300w, https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina15-768x643.jpg 768w\" sizes=\"auto, (max-width: 998px) 100vw, 998px\" \/><\/figure>\n\n\n\n<p>Agora tente fazer voc\u00ea mesmo, se n\u00e3o der certo copie os textos da imagem acima e observe onde errou. <\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In\u00edcioIntrodu\u00e7\u00e3oEditoresB\u00e1sicoElementosAtributosFormata\u00e7\u00e3oT\u00edtulosPar\u00e1grafosCita\u00e7\u00f5esEstilos Como j\u00e1 vimos anteriormente um elemento HTML \u00e9 definido por uma &lt;tag de abertura&gt;, algum conte\u00fado e a &lt;\/tag de fechamento&gt;.Como exemplo de elementos, n\u00f3s j\u00e1 aprendemos:1 &#8211; a hierarquia de T\u00edtulos ou Cabe\u00e7alhos &#8211; &lt;h1&gt; at\u00e9 &lt;h6&gt;;2 &#8211; par\u00e1grafo &#8211; &lt;p&gt;;3 &#8211; todas as tags necess\u00e1rias para montar o esqueleto do HTML &#8211;&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/\">Leia mais<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-206","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Curso de html e css gr\u00e1tis - Elementos - Dicas e Promo\u00e7\u00f5es<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Curso de html e css gr\u00e1tis - Elementos - Dicas e Promo\u00e7\u00f5es\" \/>\n<meta property=\"og:description\" content=\"In\u00edcioIntrodu\u00e7\u00e3oEditoresB\u00e1sicoElementosAtributosFormata\u00e7\u00e3oT\u00edtulosPar\u00e1grafosCita\u00e7\u00f5esEstilos Como j\u00e1 vimos anteriormente um elemento HTML \u00e9 definido por uma &lt;tag de abertura&gt;, algum conte\u00fado e a &lt;\/tag de fechamento&gt;.Como exemplo de elementos, n\u00f3s j\u00e1 aprendemos:1 &#8211; a hierarquia de T\u00edtulos ou Cabe\u00e7alhos &#8211; &lt;h1&gt; at\u00e9 &lt;h6&gt;;2 &#8211; par\u00e1grafo &#8211; &lt;p&gt;;3 &#8211; todas as tags necess\u00e1rias para montar o esqueleto do HTML &#8211;&hellip; Leia mais\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/\" \/>\n<meta property=\"og:site_name\" content=\"Dicas e Promo\u00e7\u00f5es\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-24T19:19:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina11.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/\",\"url\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/\",\"name\":\"Curso de html e css gr\u00e1tis - Elementos - Dicas e Promo\u00e7\u00f5es\",\"isPartOf\":{\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina11.jpg\",\"datePublished\":\"2024-09-18T12:51:33+00:00\",\"dateModified\":\"2024-09-24T19:19:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/#primaryimage\",\"url\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina11.jpg\",\"contentUrl\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina11.jpg\",\"width\":812,\"height\":483,\"caption\":\"Editando links e coment\u00e1rios em HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/dicasepromocoes.com.br\/web\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Curso de html e css gr\u00e1tis &#8211; Elementos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/#website\",\"url\":\"https:\/\/dicasepromocoes.com.br\/web\/\",\"name\":\"Dicas e Promo\u00e7\u00f5es\",\"description\":\"Dicas e Promo\u00e7\u00f5es\",\"publisher\":{\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/#\/schema\/person\/12374dada2e436caa0c456a0a91e27cd\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dicasepromocoes.com.br\/web\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/#\/schema\/person\/12374dada2e436caa0c456a0a91e27cd\",\"name\":\"EMO\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg\",\"url\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg\",\"contentUrl\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg\",\"width\":800,\"height\":800,\"caption\":\"EMO\"},\"logo\":{\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg\"},\"sameAs\":[\"https:\/\/dicasepromocoes.com.br\/web\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Curso de html e css gr\u00e1tis - Elementos - Dicas e Promo\u00e7\u00f5es","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/","og_locale":"pt_BR","og_type":"article","og_title":"Curso de html e css gr\u00e1tis - Elementos - Dicas e Promo\u00e7\u00f5es","og_description":"In\u00edcioIntrodu\u00e7\u00e3oEditoresB\u00e1sicoElementosAtributosFormata\u00e7\u00e3oT\u00edtulosPar\u00e1grafosCita\u00e7\u00f5esEstilos Como j\u00e1 vimos anteriormente um elemento HTML \u00e9 definido por uma &lt;tag de abertura&gt;, algum conte\u00fado e a &lt;\/tag de fechamento&gt;.Como exemplo de elementos, n\u00f3s j\u00e1 aprendemos:1 &#8211; a hierarquia de T\u00edtulos ou Cabe\u00e7alhos &#8211; &lt;h1&gt; at\u00e9 &lt;h6&gt;;2 &#8211; par\u00e1grafo &#8211; &lt;p&gt;;3 &#8211; todas as tags necess\u00e1rias para montar o esqueleto do HTML &#8211;&hellip; Leia mais","og_url":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/","og_site_name":"Dicas e Promo\u00e7\u00f5es","article_modified_time":"2024-09-24T19:19:14+00:00","og_image":[{"url":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina11.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/","url":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/","name":"Curso de html e css gr\u00e1tis - Elementos - Dicas e Promo\u00e7\u00f5es","isPartOf":{"@id":"https:\/\/dicasepromocoes.com.br\/web\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/#primaryimage"},"image":{"@id":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/#primaryimage"},"thumbnailUrl":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina11.jpg","datePublished":"2024-09-18T12:51:33+00:00","dateModified":"2024-09-24T19:19:14+00:00","breadcrumb":{"@id":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/#primaryimage","url":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina11.jpg","contentUrl":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina11.jpg","width":812,"height":483,"caption":"Editando links e coment\u00e1rios em HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-elementos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/dicasepromocoes.com.br\/web\/"},{"@type":"ListItem","position":2,"name":"Curso de html e css gr\u00e1tis &#8211; Elementos"}]},{"@type":"WebSite","@id":"https:\/\/dicasepromocoes.com.br\/web\/#website","url":"https:\/\/dicasepromocoes.com.br\/web\/","name":"Dicas e Promo\u00e7\u00f5es","description":"Dicas e Promo\u00e7\u00f5es","publisher":{"@id":"https:\/\/dicasepromocoes.com.br\/web\/#\/schema\/person\/12374dada2e436caa0c456a0a91e27cd"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dicasepromocoes.com.br\/web\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":["Person","Organization"],"@id":"https:\/\/dicasepromocoes.com.br\/web\/#\/schema\/person\/12374dada2e436caa0c456a0a91e27cd","name":"EMO","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg","url":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg","contentUrl":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg","width":800,"height":800,"caption":"EMO"},"logo":{"@id":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg"},"sameAs":["https:\/\/dicasepromocoes.com.br\/web"]}]}},"_links":{"self":[{"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/pages\/206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/comments?post=206"}],"version-history":[{"count":19,"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/pages\/206\/revisions"}],"predecessor-version":[{"id":338,"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/pages\/206\/revisions\/338"}],"wp:attachment":[{"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/media?parent=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}