Vamos continuar nosso Curso de HTML Gr\u00e1tis – 2, vamos dar continuidade e falar sobre a estrutura b\u00e1sica do HTML.<\/p>\n
Antes de come\u00e7ar, devo lembrar a voc\u00ea que no post passado eu comentei a respeito do XHTML no modo Strict. Se voc\u00ea quiser saber mais sobre isso, clique aqui.<\/p>\n
Como o objetivo desse curso \u00e9 ensinar da maneira correta, eu aconselharia voc\u00ea a, ao menos no inicio, experimentar o XHTML no modo Strict.<\/p>\n
Sei que alguns desenvolvedores v\u00e3o odiar essa id\u00e9ia, dizendo que isso \u00e9 um retrocesso, que j\u00e1 existe o HTML 5, etc.<\/p>\n
Mas meu objetivo aqui \u00e9 apenas fazer voc\u00ea gravar alguns conceitos de boas pr\u00e1ticas. T\u00e3o logo se sinta confort\u00e1vel, pode migrar para o HTML 5 sem problemas \ud83d\ude42<\/p>\n
Os comando do HTML s\u00e3o em sua maioria comandos do tipo “abre e fecha”. Existem algumas tags que n\u00e3o precisam de fechamento, mas a maior funciona dessa forma.<\/p>\n
Assim, para fazer um t\u00edtulo, voc\u00ea abre uma tag de t\u00edtulo, digita o texto e em seguida fecha essa tag, como no exemplo abaixo:<\/p>\n
<h2><\/strong>Digite seu titulo aqui<\/h2><\/strong><\/p>\n Perceba que voc\u00ea “abriu” com um <h2> e “fechou” com um <\/h2>.<\/p>\n Como explicado acima, se voc\u00ea abriu algo, deve fechar. E em v\u00e1rios casos, voc\u00ea pode abrir v\u00e1rias tags, mas deve fech\u00e1-las na ordem em que foram abertas.<\/p>\n O c\u00f3digo abaixo \u00e9 V\u00c1LIDO: Perceba que voc\u00ea abriu uma tag div e dentro dela, abriu e fechou um titulo e em seguida, abriu e fechou um par\u00e1grafo. E por \u00faltimo, voc\u00ea fechou a tag div que voc\u00ea abriu l\u00e1 em cima.<\/p>\n O c\u00f3digo abaixo \u00e9 INV\u00c1LIDO: Perceba que voc\u00ea abriu a div, em seguida abriu o h2 mas n\u00e3o o fechou. Depois abriu uma tag p, n\u00e3o fechou esse p e fechou a div no lugar errado. E por \u00faltimo, fechou o h2, tamb\u00e9m no lugar errado.<\/p>\n Se voc\u00ea estiver utilizando o XHTML no modo Strict, ele acusaria erro. Utilizando o XHTML sem o modo Strict ou usando o HTML 5 por exemplo, o navegador iria exibir a informa\u00e7\u00e3o mesmo assim, mas o texto poderia ficar estranho ou ser exibido de uma forma diferente do que voc\u00ea espera.<\/p>\n Algumas tags possuem alguns atributos. Esse atributos muitas vezes n\u00e3o s\u00e3o percebidos pelo usu\u00e1rio comum, mas trazem benef\u00edcios.<\/p>\n Por exemplo: voc\u00ea possui o atributo “name”, “alt” e “title” dependendo da tag que estiver usando e podem ajudar no conceito de SEO ou quando o usu\u00e1rio \u00e9 portador de necessidades especiais.<\/p>\n Todo arquivo HTML possui a seguinte estrutura b\u00e1sica:<\/p>\n <!DOCTYPE html><\/strong> Explicando:<\/p>\n Como j\u00e1 expliquei acima, o Doctype \u00e9 a primeira coisa a ser declarada no documento. Hoje em dia, como estamos utilizando o HTML 5, basta declarar isso:<\/p>\n <!DOCTYPE html><\/strong><\/p>\n Nas vers\u00f5es anteriores do HTML, era necess\u00e1rio passar mais informa\u00e7\u00f5es. Essa era a declara\u00e7\u00e3o para um documento XHTML operando no modo “Strict”<\/strong>:<\/p>\n <!DOCTYPE html PUBLIC “-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN” “http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd”><\/strong><\/p>\n Havia tamb\u00e9m uma outra vers\u00e3o XHTML, chamada de “Transitional”<\/strong>. Essa op\u00e7\u00e3o era mais amig\u00e1vel, pois n\u00e3o interrompia a execu\u00e7\u00e3o quando encontrasse um erro no documento.<\/p>\n <!DOCTYPE html PUBLIC “-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN” “http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd”><\/strong><\/p>\n J\u00e1 falei um pouco sobre o Head um pouco para cima. Mas vou mostrar mais algumas tags que voc\u00ea pode colocar no HEAD:<\/p>\n Nesse post abordamos a estrutura b\u00e1sica do HTML, necess\u00e1ria para voc\u00ea come\u00e7ar a criar seu documento.<\/p>\n No pr\u00f3ximo post vamos continuar nosso estudo de HTML, iniciando o uso de algumas tags para come\u00e7ar a estruturar o nosso conte\u00fado.<\/p>\n","protected":false},"excerpt":{"rendered":" Vamos continuar nosso Curso de HTML Gr\u00e1tis – 2, vamos dar continuidade e falar sobre a estrutura b\u00e1sica do HTML. Antes de come\u00e7ar, devo lembrar a voc\u00ea que no post passado eu comentei a respeito do XHTML no modo Strict. Se voc\u00ea quiser saber mais sobre isso, clique aqui. Como o objetivo desse curso \u00e9…<\/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\/311"}],"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=311"}],"version-history":[{"count":3,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/311\/revisions"}],"predecessor-version":[{"id":323,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/311\/revisions\/323"}],"wp:attachment":[{"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Feche as coisas na ordem que voc\u00ea abriu<\/em><\/h3>\n
\n<div><\/strong>
\n<h2><\/strong>Digite seu titulo aqui<\/h2><\/strong>
\n<p><\/strong>Digite seu paragrafo aqui<\/p><\/strong>
\n<\/div><\/strong><\/p>\n
\n<div><\/strong>
\n<h2><\/strong>Digite seu titulo aqui
\n<p><\/strong>Digite seu paragrafo aqui<\/div><\/strong>
\n<\/h2><\/strong><\/p>\nPense sempre no bem do usu\u00e1rio<\/em><\/h3>\n
A estrutura b\u00e1sica do HTML<\/h2>\n
\n<html><\/strong>
\n<head><\/strong>
\n<title><\/strong>Titulo do Documento<\/title><\/strong>
\n<\/head><\/strong>
\n<body><\/strong>
\nConte\u00fado do documento
\n<\/body><\/strong>
\n<\/html><\/strong><\/p>\n\n
DOCTYPE<\/h2>\n
HEAD<\/h2>\n
\n
Pr\u00f3ximos passos<\/h2>\n