Nesse post vamos dar continuidade do nosso Curso de HTML Gr\u00e1tis, onde vamos explicar o funcionamento de algumas tags HTML de texto, que s\u00e3o b\u00e1sicas para gerar conte\u00fado.<\/p>\n
Essas s\u00e3o as tags mais b\u00e1sicas, ent\u00e3o o objetivo aqui \u00e9 voc\u00ea come\u00e7ar a entender o funcionamento e como voc\u00ea vai fazer a demarca\u00e7\u00e3o do conte\u00fado no seu documento HTML.<\/p>\n
Umma observa\u00e7\u00e3o: com exce\u00e7\u00e3o do DOCTYPE visto no post anterior, todas as outras tags html s\u00e3o digitadas sempre em minusculo.<\/p>\n
Basicamente, voc\u00ea vai ter sempre dois tipos de tags: tags do tipo em inline<\/strong> e tags do tipo block<\/strong>.<\/p>\n Mas qual a diferen\u00e7a entre elas?<\/p>\n As tags do tipo inline s\u00e3o tags que est\u00e3o “em linha” e ocupam exatamente o espa\u00e7o do conte\u00fado que elas cont\u00e9m.<\/p>\n J\u00e1 as tags do tipo block sempre v\u00e3o ocupar um certo espa\u00e7o, mesmo que o conte\u00fado delas seja menor.<\/p>\n voc\u00ea pode pensar em tags inline como se fossem tijolos. Voc\u00ea pode colocar v\u00e1rios tijolos em uma linha, ou seja, quantos couberem.<\/p>\n E usando a mesma analogia, voc\u00ea pode pensar nas tags do tipo block como se fossem canos. Mesmo que n\u00e3o tenha nada dentro deles, eles sempre v\u00e3o ocupar um espa\u00e7o determinado.<\/p>\n Vamos dar um exemplo explicando duas tags: SPAN<\/strong> e P<\/strong>. Fa\u00e7a esse teste:<\/p>\n <span><\/strong>Batata<\/span><span><\/strong>Batata<\/span><span><\/strong>Batata<\/span><span<\/strong>>Batata<\/span><\/strong> Como esses conte\u00fados ser\u00e3o exibidos no navegador:<\/p>\n BatataBatataBatata<\/strong> Repare que embora o conte\u00fado tenha a mesma quantidade de letras, cada “Tomate” ficou em uma linha, porque ele ocupa um “bloco”, ou seja, 100% do tamanho dispon\u00edvel.<\/p>\n Vamos agora especificar as tags de texto que voc\u00ea pode utilizar, com as defini\u00e7\u00f5es se s\u00e3o elementos em bloco ou inline:<\/p>\n P<\/strong> – (bloco) Adiciona um par\u00e1grafo. Elementos Inline dentro de blocos<\/p>\n Voc\u00ea tamb\u00e9m podem combinar elementos inline dentro de elementos bloco, dessa forma:<\/p>\n <p><\/strong>Tomate e <spam><\/strong>Beringela<\/span><\/p><\/strong> E o resultado ficaria assim: Voc\u00ea pode se perguntar: mas porqueu eu faria isso? Um dos motivos seria para voc\u00ea conseguir estilizar a “beringela”. Se voc\u00ea trabalhar com CSS, \u00e9 poss\u00edvel deixar apenas a beringela com um estilo diferente, assim:<\/p>\n Tomate e Beringela<\/strong><\/em><\/span> O HTML permite 2 tipos de listas: ordenadas e n\u00e3o ordenadas.<\/p>\n As listas ordenadas permitem que voc\u00ea adicione n\u00fameros ou letras a uma listagem. Uma lista n\u00e3o ordenada conter\u00e1 marcadores (bullets) antes dos itens da lista:<\/p>\n OL<\/strong> – Listas Ordenadas A sintaxe de uso acontece como abaixo: <ol><\/strong> O resultado fica como abaixo:<\/p>\n Voc\u00ea tamb\u00e9m pode colocar uma lista dentro de outra.<\/p>\n <ul><\/strong> O resultado fica como abaixo:<\/p>\n Quando voc\u00ea estiver adicionando conte\u00fado no seu site, voc\u00ea pode em alguns casos precisar usar uma quebra de linha.<\/p>\n Para isso, temos duas tags <hr\/><\/strong> e <br\/><\/strong>, que fazem essa fun\u00e7\u00e3o. Mas qual a diferen\u00e7a?<\/p>\n O BR<\/strong> vai inserir uma quebra de linha no ponto especificado e a partir dele o texto continua.<\/p>\n J\u00e1 o HR<\/strong> vai quebrar o texto e inserir uma linha que ocupa todo o tamanho da tela. Antigamente ele tinha uma fun\u00e7\u00e3o apenas est\u00e9tica, mas hoje em dia tem tamb\u00e9m fun\u00e7\u00e3o sem\u00e2ntica, ou seja, serve para separar o conte\u00fado.<\/p>\n A diferen\u00e7a entre elas \u00e9 que o HR simplesmente quebra a linha, enquanto que o HR quebra o texto e adiciona uma linha que ocupa toda a largura da tela. Abaixo dessa linha o texto continua. Olhe como funciona:<\/p>\n Veja por exemplo esse texto<br\/> que foi quebrado com a tag BR. Agora, veja esse texto <hr\/> que foi quebrado com a tag HR.<\/p>\n Que ficaria assim:<\/p>\n Veja por exemplo esse texto que foi quebrado com a tag HR.<\/p>\n Essa tag j\u00e1 foi abordada. Sempre que voc\u00ea precisar escrever um texto, deve envolve-lo entre as tags <p> e <\/p>, delimitando seu inicio e fim.<\/p>\n Nota: lembre de envolver cada par\u00e1grafo com essa tag.<\/p>\n Caso voc\u00ea queira fazer um teste, \u00e9 possivel simplesmente colocar o texto no documento HTML e ele ser\u00e1 exibido sem problemas. Ent\u00e3o porque voc\u00ea deve usar essa tag?<\/p>\n A resposta \u00e9 simples: o HTML apenas demarca o que cada parte do documento faz. Mas para estilizar (cor, margem, etc) voc\u00ea vai precisar usar CSS.<\/p>\n E para o CSS funcionar, voc\u00ea precisa especificar qual tag vai receber a formata\u00e7\u00e3o. Ou seja: se voc\u00ea n\u00e3o delimitar um texto como par\u00e1grafo n\u00e3o conseguir\u00e1 alter\u00e1-lo com o CSS.<\/p>\n Al\u00e9m disso, todo o conte\u00fado do documento deve estar envolvido com as suas respectivas tags.<\/p>\n E j\u00e1 que estamos falando e par\u00e1grafos, nada mais justo que falarmos de t\u00edtulos.<\/p>\n Os t\u00edtulos em HTML s\u00e3o numerados, indo de H1, H2, H3, H4, H5 at\u00e9 H6. Sendo que o H1 tem um peso maior, enquanto o H6 tem um peso bem menor.<\/p>\n Pense nos titulos como estando aninhados, um dentro do outro, separando o conte\u00fado e separando as informa\u00e7\u00f5es, com t\u00edtulos, subst\u00edtulos e novas sera\u00e7\u00f5es para compor o conte\u00fado.<\/p>\n Como regra, apenas a tag H1 exige uma aten\u00e7\u00e3o especial: voc\u00ea deve utilizar obrigatoriamente 1 tag H1 no seu documento e APENAS um H1.<\/p>\n No pr\u00f3ximo post vamos falar da tag A, IMG, I, B, EM, STRONG e… um pouco de SEO!<\/p>\n","protected":false},"excerpt":{"rendered":" Nesse post vamos dar continuidade do nosso Curso de HTML Gr\u00e1tis, onde vamos explicar o funcionamento de algumas tags HTML de texto, que s\u00e3o b\u00e1sicas para gerar conte\u00fado. Essas s\u00e3o as tags mais b\u00e1sicas, ent\u00e3o o objetivo aqui \u00e9 voc\u00ea come\u00e7ar a entender o funcionamento e como voc\u00ea vai fazer a demarca\u00e7\u00e3o do conte\u00fado no…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[8],"_links":{"self":[{"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/314"}],"collection":[{"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=314"}],"version-history":[{"count":3,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/314\/revisions"}],"predecessor-version":[{"id":324,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/314\/revisions\/324"}],"wp:attachment":[{"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n<p><\/strong>Tomate<\/p><p><\/strong>Tomate<\/p><p><\/strong>Tomate<\/p><\/strong><\/p>\n
\nTomate<\/strong>
\nTomate<\/strong>
\nTomate<\/strong><\/p>\nAs tags de texto<\/h2>\n
\nSPAN<\/strong> – (Inline) Demarca um texto para ser estilizado.
\nBLOCKQUOTE<\/strong> – (bloco) Adiciona um quote (coment\u00e1rio) do tipo Bloco.
\nQ<\/strong> – (inline) Demarca um texto para como quote, adicionando aspas ao conte\u00fado<\/p>\n
\n<p><\/strong>E ent\u00e3o, ele disse <q><\/strong>Feliz estava eu<\/q><\/strong> quando lhe perguntaram<\/p><\/strong><\/p>\n
\nTomate e Beringela
\nE ent\u00e3o, ele disse “Feliz estava eu” quando lhe perguntaram<\/p>\n
\nE ent\u00e3o, ele disse “Feliz estava eu” quando lhe perguntaram<\/p>\nListas<\/h2>\n
\nUL<\/strong> – Listas N\u00e3o ordenadas
\nLI<\/strong> – Um elemento da lista (ordenada ou n\u00e3o ordenada)<\/p>\n
\n<ul><\/strong>
\n<li><\/strong>Item 1<\/li><\/strong>
\n<li><\/strong>Item 2<\/li><\/strong>
\n<li><\/strong>Item 3<\/li><\/strong>
\n<\/ul><\/strong><\/p>\n
\n<li><\/strong>Item 1<\/li><\/strong>
\n<li><\/strong>Item 2<\/li><\/strong>
\n<li><\/strong>Item 3<\/li><\/strong>
\n<\/ol><\/strong><\/p>\n\n
\n
\n<li><\/strong>Item 1<\/li><\/strong>
\n<li><\/strong>Item 2<\/li><\/strong>
\n<li><\/strong>Item 3
\n<ul><\/strong>
\n<li><\/strong>Sub 1<\/li><\/strong>
\n<li><\/strong>Sub 2<\/li><\/strong>
\n<li><\/strong>Sub 3<\/li><\/strong>
\n<\/ul><\/strong>
\n<\/li><\/strong>
\n<li<\/strong>>Item 4<\/li><\/strong>
\n<\/ul><\/strong><\/p>\n\n
\n
Quebra de Linha<\/h2>\n
\nque foi quebrado com a tag BR. Agora, veja esse texto<\/p>\n
\nPar\u00e1grafos<\/h2>\n
T\u00edtulos<\/h2>\n
Pr\u00f3ximos passos<\/h2>\n