{"id":4,"date":"2014-10-18T15:31:59","date_gmt":"2014-10-18T18:31:59","guid":{"rendered":"http:\/\/ricardoartur.com.br\/mmr2\/?p=4"},"modified":"2023-04-21T11:53:34","modified_gmt":"2023-04-21T14:53:34","slug":"introducao-html","status":"publish","type":"post","link":"https:\/\/ricardoartur.com.br\/web\/2014\/10\/18\/introducao-html\/","title":{"rendered":"Introdu\u00e7\u00e3o ao HTML"},"content":{"rendered":"

A base para a montagem de sites \u00e9 o dom\u00ednio do HTML. O HTML (Hypertext Markup Language)\u00a0<\/em>\u00e9 uma linguagem de marca\u00e7\u00e3o que se baseia em etiquetas (tags) que\u00a0definem o comportamento dos elementos do documento. Para come\u00e7ar um documento HTML \u00e9 importante definir alguns pontos importantes do documento. Um deles \u00e9 a declara\u00e7\u00e3o sobre o tipo de documento. Isso \u00e9 feito a partir do\u00a0\u00a0!DOCTYPE:<\/p>\n

<!DOCTYPE html><\/pre>\n
Com isso informamos o navegador que estamos trabalhando no padr\u00e3o HTML5. A principal tag para definir um documento HTML \u00e9 a pr\u00f3pria tag html. Assim como a maioria das tags, deve ser aberta e depois fechada. Como \u00e9 a tag principal, deve ficar no in\u00edcio e no final do documento.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<\/html><\/pre>\n
Todo documento HTML possui duas partes que o estruturam: HEAD e BODY.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n   <head>\r\n   <\/head>\r\n   <body>\r\n   <\/body>\r\n<\/html><\/pre>\n
Em HEAD, se concentram as informa\u00e7\u00f5es sobre o documento, como t\u00edtulo, meta-dados e links para outros documentos necess\u00e1rios para o funcionamento da p\u00e1gina.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n   <head>\r\n      <title> Esse \u00e9 o t\u00edtulo da p\u00e1gina <\/title>\r\n   <\/head>\r\n   <body>\r\n   <\/body>\r\n<\/html><\/pre>\n
O\u00a0uso do title n\u00e3o fica vis\u00edvel no corpo da m\u00e1gina, mas na barra do navegador. Vemos abaixo o resultado no Safari em um MacOS. \"Title\"<\/a><\/p>\n
 <\/p>\n
No exemplo\u00a0h\u00e1 um problema com a codifica\u00e7\u00e3o dos caracteres, pois esta n\u00e3o foi avisada sobre qual padr\u00e3o adotar. Para resolv\u00ea-lo, basta declarar a meta tag “charset”.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n   <head>\r\n      <title> Esse \u00e9 o t\u00edtulo da p\u00e1gina <\/title>\r\n      <meta charset=\"utf-8\">\r\n   <\/head>\r\n   <body>\r\n   <\/body>\r\n<\/html><\/pre>\n
E o resultado ser\u00e1 ajustado para a codifica\u00e7\u00e3o para o padr\u00e3o UTF-8, que admite acentos.<\/p>\n
\"Title2\"<\/a><\/p>\n
Em BODY fica o conte\u00fado do documento, propriamente dito. A\u00ed entram t\u00edtulos, par\u00e1grafos, tabelas, imagens etc.<\/p>\n
Abaixo adicionamos um t\u00edtulo (h1), um par\u00e1grafo (p) uma lista n\u00e3o ordeanda (ul) e tr\u00eas t\u00f3picos (li).<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n   <head>\r\n      <title> Esse \u00e9 o t\u00edtulo da p\u00e1gina <\/title>\r\n      <meta charset=\"utf-8\">\r\n   <\/head>\r\n   <body>\r\n       <h1> Esse \u00e9 um t\u00edtulo (h1) <\/h1>\r\n       <p> Esse \u00e9 um par\u00e1grafo (p) <\/p> \r\n       <ul>\r\n          <li> Esse \u00e9 um t\u00f3pico (li) dentro de uma lista (ul) <\/li>\r\n          <li> Esse \u00e9 outro t\u00f3pico (li) dentro de uma lista (ul) <\/li>\r\n          <li> Esse \u00e9 mais um t\u00f3pico (li) dentro de uma lista (ul) <\/li>\r\n       <\/ul>\r\n   <\/body>\r\n<\/html><\/pre>\n
E o resultado\u00a0que vemos na p\u00e1gina do site \u00e9 o seguinte:<\/p>\n
\"Body\"<\/a><\/p>\n
Para fazer o download do arquivo mostrado aqui, basta acessar esse link<\/a>.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
A base para a montagem de sites \u00e9 o dom\u00ednio do HTML. O HTML (Hypertext Markup Language)\u00a0\u00e9 uma linguagem de marca\u00e7\u00e3o que se baseia em etiquetas (tags) que\u00a0definem o comportamento dos elementos do documento. Para come\u00e7ar um documento HTML \u00e9 importante definir alguns pontos importantes do documento. Um deles \u00e9 a declara\u00e7\u00e3o sobre o tipo […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,1],"tags":[5,4,6,3],"class_list":["post-4","post","type-post","status-publish","format-standard","hentry","category-html","category-sem-categoria","tag-base","tag-documento","tag-estrutura","tag-html-2"],"_links":{"self":[{"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/posts\/4","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/comments?post=4"}],"version-history":[{"count":5,"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/posts\/4\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/posts\/4\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/media?parent=4"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/categories?post=4"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/tags?post=4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}