{"id":304,"date":"2018-01-09T17:11:51","date_gmt":"2018-01-09T19:11:51","guid":{"rendered":"http:\/\/eliezerladeira.com.br\/blog\/?p=304"},"modified":"2018-08-30T17:51:25","modified_gmt":"2018-08-30T20:51:25","slug":"guia-pratico-de-html","status":"publish","type":"post","link":"https:\/\/eliezerladeira.com.br\/blog\/guia-pratico-de-html\/","title":{"rendered":"Guia Pr\u00e1tico de HTML"},"content":{"rendered":"

[ratings]<\/p>\n

SOBRE O HTML<\/b><\/p>\n

O HTML \u00e9 uma linguagem de marca\u00e7\u00e3o de texto. Mais es<\/span>pecificamente, uma linguagem de marca\u00e7\u00e3o de hipertexto. Portanto, antes de come\u00e7ar a falar de HTML, vamos entender o que vem a ser uma linguagem de marca\u00e7\u00e3o.<\/span><\/p>\n

Linguagens de marca\u00e7\u00e3o<\/span> (markup languages, em ingl\u00eas)<\/em> s\u00e3o linguagens que combinam texto com informa\u00e7\u00f5es extras sobre o texto. Essa informa\u00e7\u00e3o extra pode ser representada por diversos s\u00edmbolos ou palavras-chave diferentes, dependendo da linguagem de marca\u00e7\u00e3o com que estivermos trabalhando.<\/span><\/p>\n

O HTML n\u00e3o \u00e9 uma linguagem de formata\u00e7\u00e3o de textos qualquer, ela possibilita ligar textos que est\u00e3o num computador a textos que est\u00e3o num outro computador, usando como meio a internet. O processador e visualizador de HTML \u00e9 chamado de navegador, pela caracter\u00edstica do hipertexto que permite ao usu\u00e1rio “nadar” na informa\u00e7\u00e3o.<\/span><\/p>\n

O navegador (tamb\u00e9m chamado de browser)<\/em>, nada mais faz do que abrir arquivos de computador e, caso esses arquivos contenham c\u00f3digos HTML, interpret\u00e1-los segundo o padr\u00e3o do hipertexto e gerar a “p\u00e1gina html”, que \u00e9 a manifesta\u00e7\u00e3o gr\u00e1fica dos c\u00f3digos – aquilo que voc\u00ea usualmente v\u00ea quando navega pela internet<\/em>. Por conven\u00e7\u00e3o, os nomes dos arquivos em HTML terminam com .html. Exemplo: index.html, foo.bar.html, etc. (existem tamb\u00e9m arquivos html que terminam com .shtml e outras extens\u00f5es malucas)<\/em>. Observe que esses arquivos podem estar tanto no computador do usu\u00e1rio que usa o navegador quanto em outros computadores: o navegador \u00e9 capaz de abrir esses arquivos desde que eles estejam acess\u00edveis – as tais p\u00e1ginas web.<\/span><\/p>\n

SUA PRIMEIRA P\u00c1GINA EM HTML<\/strong><\/p>\n

Uma\u00a0p\u00e1gina HTML \u00e9 dividida em duas partes: cabe\u00e7a e corpo. Na cabe\u00e7a (ou cabe\u00e7alho)<\/em> s\u00e3o definidos os atributos principais do documento, como o t\u00edtulo e as palavras-chave. O corpo cont\u00e9m a parte vis\u00edvel do documento, isto \u00e9, aquela que voc\u00ea ver\u00e1 processada em seu navegador. Existe ainda uma regi\u00e3o da p\u00e1gina que est\u00e1 tanto fora da cabe\u00e7a quanto do corpo (n\u00e3o! n\u00e3o \u00e9 a falta de ju\u00edzo!)<\/em>, mas n\u00e3o iremos entrar nesse m\u00e9rito.<\/span><\/p>\n

O QUE EST\u00c1 DENTRO DE UM ARQUIVO EM HTML?<\/strong><\/p>\n

Um\u00a0arquivo HTML \u00e9 constitu\u00eddo por textos que definem os elementos da linguagem HTML usando “etiquetas de marca\u00e7\u00e3o”.<\/p>\n

As\u00a0etiquetas de marca\u00e7\u00e3o d\u00e3o instru\u00e7\u00f5es ao navegador sobre a estrutura do documento e sobre a forma de como a p\u00e1gina deve ser apresentada graficamente.<\/p>\n

Os\u00a0arquivos HTML podem ser escritos usando um simples editor de textos e seus nomes devem possuir a extens\u00e3o .html.<\/p>\n

EXPERIMENTE VOC\u00ca MESMO<\/strong><\/p>\n

Se voc\u00ea\u00a0utiliza o Windows (95, 98, 2000, XP, etc)<\/em>, inicie o Bloco de Notas (Notepad).\u00a0<\/em><\/span>Agora digite o seguinte texto:<\/span><\/p>\n

<html><\/span>\r\n <head><\/span>\r\n  <title> T\u00edtulo da P\u00e1gina <\/title><\/span>\r\n <\/head><\/span>\r\n <body><\/span>\r\n  Esta \u00e9 minha primeira p\u00e1gina. <b>Este texto est\u00e1 em negrito<\/b><\/span>\r\n <\/body><\/span>\r\n<\/html><\/span><\/pre>\n
Salve este arquivo com o nome index.htm<\/strong><\/span><\/p>\n
Abra o seu navegador. Agora abra o arquivo que voc\u00ea salvou acima, chamado index.htm<\/strong> utilizando as op\u00e7\u00f5es do menu ou arrastando o \u00edcone do arquivo para dentro da janela do navegador. Observe o resultado.<\/span><\/p>\n
EXPLICA\u00c7\u00c3O DO EXEMPLO<\/strong><\/p>\n
A\u00a0primeira tag em seu documento HTML \u00e9 <html><\/strong>. Esta tag define o in\u00edcio de um documento HTML e indica ao navegador que todo conte\u00fado posterior deve ser tratado como uma s\u00e9rie de c\u00f3digos HTML. A \u00faltima tag em seu documento dever\u00e1 ser <\/html><\/strong>. Esta tag indica ao navegador que \u00e9 o fim de seu documento HTML.<\/span><\/p>\n
O texto entre as tags <head><\/strong> … <\/head><\/strong> \u00e9 a informa\u00e7\u00e3o do cabe\u00e7alho. Nenhuma informa\u00e7\u00e3o contida no cabe\u00e7alho \u00e9 exibida na janela do navegador.<\/span><\/p>\n
O texto entre as tags <title><\/strong> … <\/title><\/strong> \u00e9 o t\u00edtulo de seu documento. O t\u00edtulo ser\u00e1 exibido na legenda do navegador, na parte de cima do browser.<\/span><\/p>\n
O texto entre as tags <body><\/strong> … <\/body><\/strong> s\u00e3o as informa\u00e7\u00f5es que ser\u00e3o exibidas na p\u00e1gina.<\/span><\/p>\n
O texto entre <b><\/strong> … <\/b><\/strong> ficar\u00e1 com o estilo Negrito (Bold).<\/em><\/span><\/p>\n
.HTM OU .HTML?<\/strong><\/p>\n
Os\u00a0nomes dos arquivos escritos em HTML devem ter a extens\u00e3o .html<\/strong>, mas a extens\u00e3o .htm<\/strong> ainda \u00e9 utilizada. Este fato \u00e9 uma heran\u00e7a dos tempos (pr\u00e9-hist\u00f3ricos no que diz respeito \u00e0 Internet)<\/em> do MS-DOS e do Windows 16 bits, em que os nomes dos arquivos tinham no m\u00e1ximo 8 caracteres e as suas extens\u00f5es n\u00e3o podiam ter mais de 3 caracteres.<\/span><\/p>\n
Essas defici\u00eancias, que no passado obrigaram a usar a extens\u00e3o .htm<\/strong> em vez de .html<\/strong> j\u00e1 foram eliminadas. Por isso devemos usar a extens\u00e3o .html<\/strong>, a n\u00e3o ser que exista uma boa raz\u00e3o para voc\u00ea estar utilizando .htm<\/strong> (pouco prov\u00e1vel).<\/em><\/span><\/p>\n
EDITORES “PUROS” versus WYSIWYG<\/strong><\/p>\n
Existem\u00a0duas formas de se criar um texto formatado atrav\u00e9s de linguagens de marca\u00e7\u00e3o. A primeira consiste em escrever o texto, usando as instru\u00e7\u00f5es da linguagem, num editor de texto puro. Em seguida, usa-se o processador de texto para produzir o texto formatado.<\/span><\/p>\n
A outra maneira \u00e9 usar um editor de textos WYSIWYG<\/strong> (What You See Is What You Get – O Que Voc\u00ea V\u00ea \u00c9 O Que Voc\u00ea Tem<\/em>). Apesar da sigla ser comprida, o conceito \u00e9 simples: esse tipo de programa \u00e9 composto por um editor de texto que tamb\u00e9m \u00e9 um processador de textos formatados. A diferen\u00e7a aqui \u00e9 que o texto que o usu\u00e1rio est\u00e1 editando e visualizando n\u00e3o \u00e9 o texto puro, mas sim o texto j\u00e1 formatado graficamente, ou seja, o que voc\u00ea v\u00ea \u00e9 o que voc\u00ea tem.<\/span><\/p>\n
Voc\u00ea provavelmente j\u00e1 usou editores desse tipo. Os editores como o Word<\/em>, o AbiWord<\/em> e o OpenOffice Writer<\/em> s\u00e3o WYSIWYG<\/strong> e os documentos que eles geram utilizam linguagens de marca\u00e7\u00e3o.<\/span><\/p>\n
PERGUNTAS FREQ\u00dcENTES<\/strong><\/p>\n
Depois\u00a0<\/strong>que eu editei meu arquivo HTML, eu n\u00e3o consigo visualizar o resultado em meu navegador. Por qu\u00ea?<\/span><\/strong><\/p>\n
Verifique se voc\u00ea salvou o arquivo com o nome correto e que sua extens\u00e3o seja .htm<\/strong>. Confira tamb\u00e9m em sua barra de endere\u00e7os do navegador, verifique quanto ao diret\u00f3rio se est\u00e1 correto.<\/span><\/p>\n
Qual navegador eu devo utilizar?<\/span><\/strong><\/p>\n
Voc\u00ea pode utilizar qualquer browser, como o Internet Explorer, Mozilla, Opera, etc. Particularmente, recomendo o Firefox e o Internet Explorer.<\/span><\/p>\n
Porque utilizamos tags com letras min\u00fasculas?<\/span><\/strong><\/p>\n
Em HTML os nomes das tags e elementos podem ser escritos tanto com letras mai\u00fasculas quanto com letras min\u00fasculas, tanto que <B><\/strong> \u00e9 a mesma coisa que <b><\/strong>. Se voc\u00ea observar em tutoriais encontrados pela Web, vai notar que os mais antigos geralmente utilizam letras mai\u00fasculas para escrever os nomes das tags, mas os mais modernos utilizam exclusivamente letras min\u00fasculas.<\/span><\/p>\n
A nova gera\u00e7\u00e3o do HTML \u00e9 uma aplica\u00e7\u00e3o do XML\u00a0e \u00e9 designada por XHTML. O XHTML \u00e9 a melhor linguagem para se criar p\u00e1ginas para a Web, mas \u00e9 mais restrita do que o HTML (\u201crouba\u201d algumas das liberdades que o HTML oferece)<\/em>. Ao contr\u00e1rio do que acontece em HTML, em XML\u00a0as etiquetas <B><\/strong> e <b><\/strong> representam elementos diferentes, visto que em XHTML\u00a0foi adotado uma conven\u00e7\u00e3o segundo a qual todas as etiquetas devem ser escritas com letras min\u00fasculas. Por este motivo \u00e9 extremamente recomend\u00e1vel que se escreva todas as etiquetas com letras min\u00fasculas. Deste modo, voc\u00ea estar\u00e1 adquirindo bons modos e quase n\u00e3o ter\u00e1 trabalho de converter suas p\u00e1ginas HTML para XHTML.<\/span><\/p>\n
ELEMENTOS E ATRIBUTOS<\/strong><\/p>\n
Um\u00a0elemento \u00e9 uma estrutura sem\u00e2ntica, composta de tag de abertura, conte\u00fado e tag de fechamento.<\/span><\/p>\n
Os documentos HTML s\u00e3o simples arquivos de texto que cont\u00eam “tags de marca\u00e7\u00e3o”<\/em>. Essas etiquetas definem os elementos da linguagem HTML e os seus conte\u00fados. A lista seguinte indica algumas de suas caracter\u00edsticas:<\/span><\/p>\n
    \n
  • As “tags de marca\u00e7\u00e3o” do HTML s\u00e3o usadas para definir os elementos.<\/span><\/li>\n<\/ul>\n
      \n
    • As tags HTML escrevem-se utilizando os caracteres <<\/strong> e ><\/strong>\u00a0 e entre eles o nome do elemento e os seus atributos.<\/span><\/li>\n<\/ul>\n
        \n
      • A primeira tag do par \u00e9 a tag de in\u00edcio (ou de abertura)<\/em> e a segunda do par \u00e9 a tag de fim (ou de fechamento)<\/em>.<\/span><\/li>\n<\/ul>\n
          \n
        • Tudo o que se encontrar entre as tags de in\u00edcio e de fim fazem parte do conte\u00fado do elemento.<\/span><\/li>\n<\/ul>\n
            \n
          • Em XHTML as tags devem ser escritas sempre com letras min\u00fasculas, e as tags <b><\/strong> e <B><\/strong> n\u00e3o representam o mesmo elemento.<\/span><\/li>\n<\/ul>\n
            Voc\u00ea se lembra de nosso primeiro exemplo mostrado?<\/span><\/p>\n
            <html><\/span>\r\n <head><\/span>\r\n  <title> T\u00edtulo da P\u00e1gina <\/title><\/span>\r\n <\/head><\/span>\r\n <body><\/span>\r\n  Esta \u00e9 minha primeira p\u00e1gina. <b>Este texto est\u00e1 em negrito<\/b><\/span>\r\n <\/body><\/span>\r\n<\/html><\/span><\/pre>\n
            Esta parte abaixo \u00e9 um elemento HTML:<\/span><\/p>\n
            <b>Este texto est\u00e1 em negrito<\/b><\/span><\/p>\n
            Repare alguns aspectos do c\u00f3digo acima:<\/span><\/p>\n
              \n
            • Este elemento inicia com a tag: <b><\/span><\/li>\n
            • O conte\u00fado do elemento \u00e9 este: Este texto est\u00e1 em negrito<\/strong><\/span><\/li>\n
            • O elemento termina\u00a0com a tag final: <\/b><\/span><\/li>\n<\/ul>\n
              O prop\u00f3sito da tag <b><\/strong> \u00e9 colocar o conte\u00fado do elemento HTML em negrito (bold)<\/em><\/span><\/p>\n
              UM EXEMPLO MAIS COMPLEXO<\/strong><\/p>\n
              Este\u00a0exemplo abaixo tamb\u00e9m \u00e9 um elemento do HTML (mais complexo)<\/em>:<\/span><\/p>\n
              <body><\/span>\r\n Esta \u00e9 minha primeira p\u00e1gina. <b>Este texto est\u00e1 em negrito<\/b><\/span>\r\n<\/body><\/span>\r\n Este elemento HTML inicia<\/strong> com tag <\/span><body><\/span><\/strong> e termina<\/strong> com a tag<\/span> <\/body><\/span><\/strong><\/pre>\n
              O prop\u00f3sito da tag <body><\/strong> \u00e9 definir o conte\u00fado principal, o corpo do documento.<\/span><\/p>\n
              ATRIBUTOS DAS TAGS<\/p>\n
              Tag\u00a0\u00e9 um c\u00f3digo usado para marcar o in\u00edcio e, onde for requerido, o fim de um elemento HTML. H\u00e1, como exposto acima, tags de abertura e de fechamento. Uma tag de abertura \u00e9 representada por sinal de menor ( <<\/strong> ), um nome de elemento HTML e um sinal de maior ( ><\/strong> ) (ex. <p>)<\/em> e deve ser colocada imediatamente antes do in\u00edcio do conte\u00fado do elemento. Uma tag de fechamento se diferencia de uma tag de abertura apenas por uma barra ( \/<\/strong> ) antes do nome do elemento (ex. <\/p>)<\/em> e deve ser colocada imediatamente ap\u00f3s o fim do conte\u00fado do elemento.<\/span><\/p>\n
              Os atributos servem para definir uma propriedade de um elemento HTML. Os atributos HTML devem ser colocados sempre na tag de abertura logo ap\u00f3s o nome do elemento, precedido de um espa\u00e7o e \u00e9 composto de um nome de atributo, um sinal de igual ( =<\/strong> ) e um valor de atributo, cercado por aspas duplas ( “<\/strong> ) ou simples ( \u2018<\/strong> ).<\/span><\/p>\n
              A tag <body><\/strong> define o corpo ( body )<\/em> de uma p\u00e1gina HTML. No exemplo seguinte foi adicionado o atributo bgcolor<\/strong> (que significa “background color”, ou cor de fundo)<\/em> para indicar que queremos que a p\u00e1gina fique com uma cor vermelha em seu plano de fundo.<\/span><\/p>\n
              <html><\/span>\r\n <body bgcolor=\"red\"><\/span>\r\n  Esta \u00e9 a minha primeira p\u00e1gina da web.<\/span>\r\n <b>Este texto est\u00e1 em negrito<\/b><\/span>\r\n <\/body><\/span>\r\n<\/html><\/span><\/pre>\n
              Vamos considerar agora a tag <table><\/strong>, que define um elemento de uma tabela. Ao juntarmos o atributo border<\/strong> (que significa borda)<\/em> com o valor apresentado a seguir, estamos dizendo ao navegador para n\u00e3o colocar as bordas da tabela ( <table border=”0″> indica uma espessura nula para a linha de contorno da tabela):<\/em><\/span><\/p>\n
              <html><\/span>\r\n <body><\/span>\r\n  <table border=\"0\"><\/span>\r\n   <tr><\/span>\r\n    <td><\/span>\r\n     Esta \u00e9 a minha primeira tabela.<\/span>\r\n    <\/td><\/span>\r\n   <\/tr><\/span>\r\n  <\/table><\/span>\r\n <\/body><\/span>\r\n<\/html><\/span><\/pre>\n
              J\u00e1 no exemplo abaixo estamos dizendo ao navegador para desenhar uma linha de contorno com espessura 2 ( border=”2″ )<\/em><\/span><\/p>\n
              <html><\/span>\r\n <body><\/span>\r\n  <table border=\"2\"><\/span>\r\n   <tr><\/span>\r\n    <td><\/span>\r\n     Esta \u00e9 a minha segunda tabela.<\/span>\r\n    <\/td><\/span>\r\n   <\/tr><\/span>\r\n  <\/table><\/span>\r\n <\/body><\/span>\r\n<\/html><\/span><\/pre>\n
              Os atributos sempre entram em pares nome\/valor (name\/value), <\/em>assim: name=”value”<\/strong><\/span><\/p>\n
              Nota 1:<\/span><\/strong> Os atributos s\u00f3 podem aparecer nas tags de in\u00edcio. \u00c9 proibido colocar atributos nas tags de fechamento.<\/span><\/p>\n
              Nota 2:<\/span><\/strong> Para garantir a compatibilidade com a linguagem XHTML, utilize letras min\u00fasculas para escrever o nome dos atributos, e sempre coloque os valores entre aspas.<\/span><\/p>\n
              ATRIBUTOS PODEM SER APLICADOS \u00c0 MAIORIA DAS TAGS<\/strong><\/p>\n
              Voc\u00ea\u00a0normalmente usar\u00e1 atributos com mais freq\u00fc\u00eancia em algumas tags, tais como a tag body e raramente usar\u00e1 em outras, como por exemplo, a tag br que \u00e9 um comando para pular de linha e n\u00e3o precisa de nenhuma informa\u00e7\u00e3o adicional.<\/span><\/p>\n
              Assim como existem muitas tags, tamb\u00e9m existem muitos atributos. Alguns atributos s\u00e3o empregados em tags espec\u00edficas enquanto outros servem para v\u00e1rias tags. E vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter v\u00e1rios tipos.<\/span><\/p>\n
              Isto pode parecer um pouco confuso, mas \u00e0 medida que voc\u00ea for praticando vai constatar que tudo \u00e9 f\u00e1cil e l\u00f3gico, bem como vai verificar as in\u00fameras possibilidades que os atributos oferecem.<\/span><\/p>\n
              DEVEMOS USAR ASPAS OU AP\u00d3STROFOS (“TEXTO” OU ‘TEXTO’)?<\/strong><\/p>\n
              Acabamos\u00a0de ver que os valores dos atributos devem ser sempre colocados entre aspas. Normalmente utilizamos as aspas normais ( “<\/strong>\u00a0), mas os ap\u00f3strofos ( ‘\u00a0) tamb\u00e9m s\u00e3o permitidos.<\/span><\/p>\n
              Em alguns casos, o valor do atributo cont\u00e9m o pr\u00f3prio caractere aspas. Numa situa\u00e7\u00e3o dessas, devemos usar ap\u00f3strofos (que aqui funcionam como aspas simples)<\/em> para colocar em torno do valor do atributo, assim:<\/span><\/p>\n
              alt=\"<\/strong>Ele disse: \"N\u00e3o!\" \"<\/strong><\/span><\/pre>\n
              NOTAS R\u00c1PIDAS<\/strong><\/p>\n
                \n
              • As Tags HTML s\u00e3o utilizadas para marcar elementos HTML. Elas est\u00e3o cercadas pelos dois caracteres <<\/strong> (menor que)<\/em> e ><\/strong> (maior que).<\/em><\/span><\/li>\n<\/ul>\n
                  \n
                • As tags normalmente aparecem em pares, como <\/span><b><\/span><\/strong> e <\/span><\/b><\/span><\/strong>.<\/span><\/li>\n<\/ul>\n
                    \n
                  • A primeira tag em um par \u00e9 sempre a tag de in\u00edcio, a segunda tag do par \u00e9 a tag de fim.<\/span><\/li>\n<\/ul>\n
                      \n
                    • O texto entre o come\u00e7o e o fim da tag \u00e9 o conte\u00fado do elemento.<\/span><\/li>\n<\/ul>\n
                        \n
                      • HTML n\u00e3o \u00e9 sensitive<\/em>, ou seja, <\/span><b><\/span><\/strong> \u00e9 a mesma coisa que <\/span><B><\/span><\/strong>.<\/span><\/li>\n<\/ul>\n
                          \n
                        • Se por acaso voc\u00ea escreveu os c\u00f3digos HTML errado – por exemplo >b><\/strong> inv\u00e9s de <b><\/strong> – n\u00e3o se desespere, pois o m\u00e1ximo que pode acontecer \u00e9 o seu navegador interpretar sua p\u00e1gina de forma diferente do esperado e desenh\u00e1-la de um jeito maluco.<\/span><\/li>\n<\/ul>\n
                          O CABE\u00c7ALHO DE UM DOCUMENTO HTML<\/strong><\/p>\n
                          O\u00a0elemento <head><\/strong> cont\u00e9m informa\u00e7\u00e3o de caractere geral, tamb\u00e9m designada por meta-informa\u00e7\u00e3o, sobre o conte\u00fado do documento e sobre a forma como ele deve ser apresentado.<\/span><\/p>\n
                          Podemos dizer que o termo meta-informa\u00e7\u00e3o (ou meta-dados<\/em>) significa dados que descrevem outros dados ou informa\u00e7\u00f5es.<\/span><\/p>\n
                          Os\u00a0elementos contidos dentro do elemento <head><\/strong> n\u00e3o s\u00e3o exibidos na tela do navegador.<\/span><\/p>\n
                          O padr\u00e3o HTML estabelece que s\u00f3 um pequeno n\u00famero de elementos pode aparecer dentro do cabe\u00e7alho. Eles s\u00e3o: <base><\/strong>, <link><\/strong>, <meta><\/strong>, <title><\/strong>, <style><\/strong> e <script><\/strong>.<\/span><\/p>\n
                          A constru\u00e7\u00e3o seria o seguinte:<\/span><\/p>\n
                          <head><\/span>\r\n <p>Aqui temos algum texto<\/p><\/span>\r\n <\/head><\/span><\/pre>\n
                          Nesta situa\u00e7\u00e3o, o navegador pode reagir de duas formas:<\/span><\/p>\n
                            \n
                          • Apresentar o texto porque ele se encontra dentro de um elemento <p><\/span><\/li>\n
                          • Esconder o texto porque ele pertence ao cabe\u00e7alho<\/span><\/li>\n<\/ul>\n
                            Se voc\u00ea colocar um elemento n\u00e3o autorizado, como <h2> ou <p>, dentro do cabe\u00e7alho, a maioria dos navegadores vai escrever este elemento na p\u00e1gina.<\/span><\/p>\n
                            Aparentemente, as pessoas que s\u00e3o respons\u00e1veis pela concep\u00e7\u00e3o dos browsers acham que este g\u00eanero de erros \u00e9 aceit\u00e1vel. Esta e outras defici\u00eancias dos browsers s\u00e3o parcialmente respons\u00e1veis pelas m\u00e1s pr\u00e1ticas de codifica\u00e7\u00e3o adquiridas por muitos criadores de p\u00e1ginas HTML. Uma das raz\u00f5es que levaram \u00e0 cria\u00e7\u00e3o da linguagem XHTML foi a necessidade de acabar com estas situa\u00e7\u00f5es de uma vez por todas.<\/span><\/p>\n
                            ELEMENTOS DE CABE\u00c7ALHO<\/strong><\/p>\n\n\n\n\n\n\n\n\n
                            \n
                            Elemento \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<\/span><\/strong><\/p>\n<\/td>\n
                            		\n
                            Descri\u00e7\u00e3o<\/span><\/strong><\/p>\n<\/td>\n<\/tr>\n
                            \n
                            <head><\/span><\/p>\n<\/td>\n
                            		\n
                            Cont\u00e9m informa\u00e7\u00e3o importante a respeito do documento mas que n\u00e3o deve ser apresentada no corpo da p\u00e1gina<\/span><\/p>\n<\/td>\n<\/tr>\n
                            \n
                            <title><\/span><\/p>\n<\/td>\n
                            		\n
                            Define o t\u00edtulo da p\u00e1gina<\/span><\/p>\n<\/td>\n<\/tr>\n
                            \n
                            <base><\/span><\/p>\n<\/td>\n
                            		\n
                            Define um URL base comum para todas as liga\u00e7\u00f5es relativas da p\u00e1gina<\/span><\/p>\n<\/td>\n<\/tr>\n
                            \n
                            <link><\/span><\/p>\n<\/td>\n
                            		\n
                            Faz refer\u00eancia a um recurso externo e estabelece a liga\u00e7\u00e3o com ele<\/span><\/p>\n<\/td>\n<\/tr>\n
                            \n
                            <meta><\/span><\/p>\n<\/td>\n
                            		\n
                            D\u00e1 informa\u00e7\u00e3o sobre aquilo que o documento cont\u00e9m<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
                            DOCTYPE<\/strong><\/p>\n
                            A\u00a0declara\u00e7\u00e3o DOCTYPE<\/strong> serve para indicar o DTD a usar para validar na p\u00e1gina. Quando utilizada, deve aparecer logo no in\u00edcio da p\u00e1gina, antes do elemento <html><\/strong><\/span><\/p>\n\n\n\n\n
                            \n
                            Declara\u00e7\u00e3o \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<\/span><\/strong><\/p>\n<\/td>\n
                            		\n
                            Descri\u00e7\u00e3o<\/span><\/strong><\/p>\n<\/td>\n<\/tr>\n
                            \n
                            <!DOCTYPE><\/span><\/p>\n<\/td>\n
                            		\n
                            Define o tipo de documento. Deve ser colocada antes de qualquer elemento pelo que fica mesmo antes do elemento <html><\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
                            META<\/strong><\/p>\n
                            O\u00a0elemento <meta><\/strong> cont\u00e9m informa\u00e7\u00e3o de caractere geral (meta-informa\u00e7\u00e3o<\/em>) sobre o documento e deve ser colocado dentro do elemento <head><\/strong>. Sua finalidade \u00e9 fornecer informa\u00e7\u00e3o que descreve o documento.<\/span><\/p>\n
                            Durante alguns anos a utiliza\u00e7\u00e3o mais freq\u00fcente da informa\u00e7\u00e3o fornecida pelo elemento <meta><\/strong> foi a cria\u00e7\u00e3o de \u00edndices para sites de busca. Atualmente somente alguns buscadores ainda usam esta informa\u00e7\u00e3o para indexar p\u00e1ginas, e os de maior sucesso ignoram este elemento. No entanto, h\u00e1 partes que continuam a ser tidas em considera\u00e7\u00e3o pelos agentes (robots<\/em>) dos buscadores, como por exemplo, as indica\u00e7\u00f5es dadas sobre as pastas em que n\u00e3o deve ser feita qualquer indexa\u00e7\u00e3o.<\/span><\/p>\n
                            Alguns sistemas de busca (n\u00e3o muitos<\/em>) usam a informa\u00e7\u00e3o contida nos elemento meta para indexar as p\u00e1ginas. No fragmento de c\u00f3digo seguinte, o elemento <meta><\/strong> cont\u00e9m uma breve descri\u00e7\u00e3o da p\u00e1gina:<\/span><\/p>\n
                            <meta name=\"description\" content=\"Tutoriais e refer\u00eancias t\u00e9cnicas de HTML, CSS, JavaScript, XML, XSLT, SVG\"><\/span><\/pre>\n
                            Na parte do c\u00f3digo abaixo o elemento <meta><\/strong> cont\u00e9m uma palavras-chave para indexar a p\u00e1gina:<\/span><\/p>\n
                            <meta name=\"keywords\" content=\"HTML, DHTML, CSS, XML, XHTML, JavaScript, XSLT, SVG\"><\/span><\/pre>\n
                            Como acabamos de ver, os nomes dados ao atributo name<\/strong> indicam claramente a finalidade da informa\u00e7\u00e3o contida no elemento meta<\/strong>.<\/span><\/p>\n
                            Infelizmente, muitos criadores de p\u00e1ginas para a Web abusaram do elemento meta e usaram de forma contr\u00e1ria \u00e0 sua filosofia para enganar os motores de pesquisa. Em conseq\u00fc\u00eancia disso, os sites de busca passaram a ignorar cada vez mais o elemento <meta><\/strong>, o que acabou dificultando todos aqueles que pretendiam us\u00e1-lo de forma correta.<\/span><\/p>\n
                            Algumas vezes encontramos situa\u00e7\u00f5es em que o atributo name<\/strong> do elemento <meta><\/strong> cont\u00e9m um valor desconhecido, como no exemplo seguinte:<\/span><\/p>\n
                            <meta name=\"security\" content=\"low\"><\/span><\/pre>\n
                            Numa situa\u00e7\u00e3o destas devemos interpretar o elemento meta<\/strong> como contendo informa\u00e7\u00e3o que \u00e9 espec\u00edfica do website. Essa informa\u00e7\u00e3o pode ser importante para o autor da p\u00e1gina, mas provavelmente \u00e9 irrelevante para os visitantes. \u00c9 poss\u00edvel que essas informa\u00e7\u00f5es sejam \u00fateis para algum software que leia a p\u00e1gina.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
                            [ratings] SOBRE O HTML O HTML \u00e9 uma linguagem de marca\u00e7\u00e3o de texto. Mais especificamente, uma linguagem de marca\u00e7\u00e3o de<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"ngg_post_thumbnail":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[15],"tags":[79],"class_list":["post-304","post","type-post","status-publish","format-standard","hentry","category-informatica","tag-html"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":310,"url":"https:\/\/eliezerladeira.com.br\/blog\/html-basico\/","url_meta":{"origin":304,"position":0},"title":"HTML B\u00e1sico","author":"admin","date":"","format":false,"excerpt":"[ratings] HTML\u00a0\u00e9 uma abrevia\u00e7\u00e3o de HyperText Markup Language, que em portugu\u00eas significa Linguagem de Marca\u00e7\u00e3o de Hipertexto. Os arquivos HTML s\u00e3o interpretados pelos navegadores (browsers). Portanto, caso voc\u00ea tenha algum arquivo HTML no computador, basta pedir que o seu navegador o abra. O HTML trabalha com o sistema de tags\u2026","rel":"","context":"Em "Inform\u00e1tica"","block_context":{"text":"Inform\u00e1tica","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/informatica\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5014,"url":"https:\/\/eliezerladeira.com.br\/blog\/%f0%9f%8f%b7%ef%b8%8f-tags-basicas-no-html-guia-completo-para-iniciantes\/","url_meta":{"origin":304,"position":1},"title":"\ud83c\udff7\ufe0f Tags B\u00e1sicas no HTML: Guia Completo para Iniciantes","author":"admin","date":"","format":false,"excerpt":"Aprenda como funcionam as principais tags HTML e comece hoje mesmo a montar suas pr\u00f3prias p\u00e1ginas da web. Simples, direto e com exemplos pr\u00e1ticos!","rel":"","context":"Em "Desenvolvimento de Software"","block_context":{"text":"Desenvolvimento de Software","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/desenvolvimento-de-software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-Apr-9-2025-09_08_34-AM.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-Apr-9-2025-09_08_34-AM.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-Apr-9-2025-09_08_34-AM.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-Apr-9-2025-09_08_34-AM.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":4191,"url":"https:\/\/eliezerladeira.com.br\/blog\/html-guia-completo-para-iniciantes-e-avancados\/","url_meta":{"origin":304,"position":2},"title":"HTML: Guia Completo para Iniciantes e Avan\u00e7ados","author":"admin","date":"","format":false,"excerpt":"Descubra tudo sobre HTML neste guia completo! Aprenda a estrutura b\u00e1sica, principais tags e as novidades do HTML5, incluindo elementos sem\u00e2nticos, multim\u00eddia e formul\u00e1rios aprimorados.","rel":"","context":"Em "Desenvolvimento de Software"","block_context":{"text":"Desenvolvimento de Software","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/desenvolvimento-de-software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-modern-and-visually-engaging-illustration-of-HTML-and-web-development.-The-image-features-a-laptop-screen-displaying-HTML-code-surrounded-by-floati.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-modern-and-visually-engaging-illustration-of-HTML-and-web-development.-The-image-features-a-laptop-screen-displaying-HTML-code-surrounded-by-floati.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-modern-and-visually-engaging-illustration-of-HTML-and-web-development.-The-image-features-a-laptop-screen-displaying-HTML-code-surrounded-by-floati.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-modern-and-visually-engaging-illustration-of-HTML-and-web-development.-The-image-features-a-laptop-screen-displaying-HTML-code-surrounded-by-floati.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":4229,"url":"https:\/\/eliezerladeira.com.br\/blog\/o-que-e-indentacao\/","url_meta":{"origin":304,"position":3},"title":"O que \u00e9 Indenta\u00e7\u00e3o?","author":"admin","date":"","format":false,"excerpt":"Descubra o que \u00e9 indenta\u00e7\u00e3o, sua import\u00e2ncia na programa\u00e7\u00e3o, na escrita acad\u00eamica e na formata\u00e7\u00e3o de documentos. Veja exemplos pr\u00e1ticos e boas pr\u00e1ticas!","rel":"","context":"Em "Desenvolvimento de Software"","block_context":{"text":"Desenvolvimento de Software","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/desenvolvimento-de-software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-visually-appealing-digital-illustration-demonstrating-indentation-in-different-contexts.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-visually-appealing-digital-illustration-demonstrating-indentation-in-different-contexts.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-visually-appealing-digital-illustration-demonstrating-indentation-in-different-contexts.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-visually-appealing-digital-illustration-demonstrating-indentation-in-different-contexts.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":4418,"url":"https:\/\/eliezerladeira.com.br\/blog\/segredos-de-software-dicas-para-calculadora-paint-e-bloco-de-notas\/","url_meta":{"origin":304,"position":4},"title":"Segredos de software: dicas para Calculadora, Paint e Bloco de\u00a0notas","author":"admin","date":"","format":false,"excerpt":"Bloco de notas, Calculadora e Paint n\u00e3o s\u00e3o os aplicativos com maior destaque do Windows, mas eles t\u00eam alguns segredos interessantes incorporados. Use essas dicas para utilizar recursos extras desses acess\u00f3rios, que v\u00eam com toda instala\u00e7\u00e3o do Windows. Estes truques s\u00e3o \u00fateis quando \u00e9 necess\u00e1rio acessar ferramentas tipicamente encontradas em\u2026","rel":"","context":"Em "Tecnologia"","block_context":{"text":"Tecnologia","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":183,"url":"https:\/\/eliezerladeira.com.br\/blog\/asptear\/","url_meta":{"origin":304,"position":5},"title":"AspTear","author":"admin","date":"","format":false,"excerpt":"[ratings] Uma boa pr\u00e1tica para continuar aprendendo \u00e9 estar sempre vasculhando novidades que se escondem nesta vasta teia chamada Internet. Existem muitas comunidades de desenvolvedores, cada uma focada em uma determinada linguagem. Nestes sites, al\u00e9m de procurar solu\u00e7\u00f5es para seus problemas espec\u00edficos, voc\u00ea pode tamb\u00e9m ter surpresas muito agrad\u00e1veis, descobrindo\u2026","rel":"","context":"Em "Inform\u00e1tica"","block_context":{"text":"Inform\u00e1tica","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/informatica\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2017\/03\/AspNet.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2017\/03\/AspNet.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2017\/03\/AspNet.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts\/304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/comments?post=304"}],"version-history":[{"count":1,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts\/304\/revisions"}],"predecessor-version":[{"id":305,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts\/304\/revisions\/305"}],"wp:attachment":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/media?parent=304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/categories?post=304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/tags?post=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}