{"id":1372,"date":"2008-10-27T22:54:00","date_gmt":"2008-10-28T01:54:00","guid":{"rendered":"https:\/\/felipeelia.com.br\/?p=1372"},"modified":"2019-10-01T19:03:29","modified_gmt":"2019-10-01T22:03:29","slug":"comece-a-pensar-em-html","status":"publish","type":"post","link":"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/","title":{"rendered":"Comece a pensar em HTML"},"content":{"rendered":"\n

Este post foi migrado l\u00e1 do\u00a0Melancia na Cabe\u00e7a<\/a>.<\/em><\/p>\n\n\n\n

Sabe Matrix? Pois \u00e9… Comece a se conformar que olhar para c\u00f3digos e ver documentos \u00e9 poss\u00edvel.<\/p>\n\n\n\n

P\u00e1ginas em XHTML (o X antes \u00e9 s\u00f3 pra dizer que \u00e9 extens\u00edvel, n\u00e3o tem nada a ver com os X-men) s\u00e3o os c\u00f3digos e o que voc\u00ea v\u00ea no navegador \u00e9 o resultado (o que voc\u00ea v\u00ea no navegador na verdade \u00e9 o resultado do seu HTML somado com seu CSS, mas explico depois). O grande problema aparece quando se percebe que para o mesmo resultado existe uma infinidade de c\u00f3digos poss\u00edveis. Existem muitos motivos para se fazer HTML da melhor forma poss\u00edvel indo de profissionalismo e cuidado \u00e0 otimiza\u00e7\u00e3o para busca.<\/p>\n\n\n\n

Para a cria\u00e7\u00e3o de um bom HTML \u00e9 preciso um pouco de pr\u00e1tica e senso cr\u00edtico. Para quem nunca viu, o processo normalmente \u00e9 assim: o webdesigner cria um layout (no Photoshop, no Illustrator ou outro parecido) e voc\u00ea cria o HTML e o CSS (essa fun\u00e7\u00e3o tamb\u00e9m \u00e9 conhecida como HTMLer).<\/p>\n\n\n\n

Voc\u00ea ent\u00e3o olha pra cara do layout e analisa cada elemento buscando identificar qual \u00e9 o significado daquela parte no todo. Por exemplo o layout de uma p\u00e1gina interna de um site: Existe um topo, um menu lateral, o conte\u00fado e um rodap\u00e9.<\/p>\n\n\n\n

Se essas partes est\u00e3o claramente divididas cada uma delas provavelmente ser\u00e1 uma div (o provavelmente \u00e9 porque existem exce\u00e7\u00f5es), ou seja, uma divis\u00e3o da p\u00e1gina. Se no topo tem um t\u00edtulo provavelmente ele ser\u00e1 o <h1><\/code> da p\u00e1gina, ou seja, o primeiro t\u00edtulo, o t\u00edtulo de maior import\u00e2ncia. Se ao lado existe um slogan est\u00e1 a\u00ed um candidato a <h2><\/code>.<\/p>\n\n\n\n

O menu lateral provavelmente \u00e9 uma lista de links, ent\u00e3o tasque uma <ul><\/code> e pra cada item uma <li><\/code>. Tente entender cada tag que voc\u00ea usar para facilitar a memoriza\u00e7\u00e3o – todo nome de tag tem um porqu\u00ea. A <ul><\/code> \u00e9 ul por ser uma lista desordenada – unordered list<\/em> – e a <li><\/code> por ser um item da lista – list item.<\/p>\n\n\n\n

No conte\u00fado pode ter uma penca de coisas, mas possivelmente ser\u00e1 s\u00f3 uma penca de par\u00e1grafos ent\u00e3o vamos de <p><\/code> pra eles.<\/p>\n\n\n\n

No rodap\u00e9 mora um perigo: se for uma lista de itens (tipo “Fale Conosco”, “Mapa do Site”, etc) tamb\u00e9m v\u00e1 de <ul><\/code>. Mesmo tendo seus itens um do lado do outro continua sendo uma lista.<\/p>\n\n\n\n

Quando terminar abra seu HTML e veja se realmente o que est\u00e1 sendo mostrado pelo seu navegador \u00e9 o que o layout est\u00e1 transmitindo. Se estiver de acordo com o planejado chegou a hora de estilizar, se n\u00e3o volte e melhore seu c\u00f3digo.<\/p>\n\n\n\n

Um c\u00f3digo bem escrito ajuda n\u00e3o s\u00f3 a diminuir o tamanho do arquivo como tamb\u00e9m a ser entendido melhor pelos buscadores e leitores de tela pra cegos (sim, cegos usam internet).<\/p>\n\n\n\n

Para ver se seu c\u00f3digo est\u00e1 no m\u00ednimo bem formado utilize os validadores da W3C (existe extens\u00e3o do firefox pra isso), mas lembre-se: nem sempre c\u00f3digo validado pela W3C \u00e9 sem\u00e2ntico, ou seja, tem no seu conte\u00fado o significado desejado.<\/p>\n\n\n\n

Antes que surja alguma d\u00favida: lista n\u00e3o \u00e9 s\u00f3 pra links n\u00e3o t\u00e1?<\/p>\n\n\n\n

Outra coisa importante: esque\u00e7a a parte est\u00e9tica<\/strong>, isto \u00e9, n\u00e3o veja cores, posicionamentos, alinhamentos, negritos, it\u00e1licos, nada disso entra no seu HTML. Nele entra s\u00f3 o que cada coisa \u00e9. Seu HTML s\u00f3 vai parecer com o layout proposto quando come\u00e7ar a parte de CSS, mas isso fica para um pr\u00f3ximo post.<\/p>\n\n\n\n

Abra\u00e7os e comentem!<\/p>\n","protected":false},"excerpt":{"rendered":"

Dicas para come\u00e7ar a pensar em HTML<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[12],"tags":[],"yoast_head":"\nComece a pensar em HTML | Felipe Elia<\/title>\n<meta name=\"description\" content=\"Dicas para come\u00e7ar a pensar em HTML\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comece a pensar em HTML | Felipe Elia\" \/>\n<meta property=\"og:description\" content=\"Dicas para come\u00e7ar a pensar em HTML\" \/>\n<meta property=\"og:url\" content=\"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Felipe Elia\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/felipe.elia\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/felipe.elia\" \/>\n<meta property=\"article:published_time\" content=\"2008-10-28T01:54:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-10-01T22:03:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/09\/query-posts.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Felipe Elia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/felipe_elia\" \/>\n<meta name=\"twitter:site\" content=\"@felipe_elia\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Elia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/\"},\"author\":{\"name\":\"Felipe Elia\",\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"headline\":\"Comece a pensar em HTML\",\"datePublished\":\"2008-10-28T01:54:00+00:00\",\"dateModified\":\"2019-10-01T22:03:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/\"},\"wordCount\":612,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"articleSection\":[\"HTML\/CSS\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/\",\"url\":\"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/\",\"name\":\"Comece a pensar em HTML | Felipe Elia\",\"isPartOf\":{\"@id\":\"https:\/\/felipeelia.com.br\/#website\"},\"datePublished\":\"2008-10-28T01:54:00+00:00\",\"dateModified\":\"2019-10-01T22:03:29+00:00\",\"description\":\"Dicas para come\u00e7ar a pensar em HTML\",\"breadcrumb\":{\"@id\":\"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/felipeelia.dev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comece a pensar em HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/felipeelia.com.br\/#website\",\"url\":\"https:\/\/felipeelia.com.br\/\",\"name\":\"Felipe Elia\",\"description\":\"Programa\u00e7\u00e3o com WordPress de um jeito f\u00e1cil, do b\u00e1sico ao avan\u00e7ado\",\"publisher\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/felipeelia.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\",\"name\":\"Felipe Elia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg\",\"contentUrl\":\"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg\",\"width\":400,\"height\":400,\"caption\":\"Felipe Elia\"},\"logo\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/\"},\"description\":\"Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.\",\"sameAs\":[\"https:\/\/www.facebook.com\/felipe.elia\",\"https:\/\/www.instagram.com\/felipe.elia\/\",\"https:\/\/www.linkedin.com\/in\/felipeelia\/\",\"https:\/\/twitter.com\/https:\/\/twitter.com\/felipe_elia\",\"https:\/\/www.youtube.com\/channel\/UCD_26rOE3ClALcZreTkyIoQ\"],\"url\":\"https:\/\/felipeelia.com.br\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comece a pensar em HTML | Felipe Elia","description":"Dicas para come\u00e7ar a pensar em HTML","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:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Comece a pensar em HTML | Felipe Elia","og_description":"Dicas para come\u00e7ar a pensar em HTML","og_url":"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/","og_site_name":"Felipe Elia","article_publisher":"https:\/\/www.facebook.com\/felipe.elia","article_author":"https:\/\/www.facebook.com\/felipe.elia","article_published_time":"2008-10-28T01:54:00+00:00","article_modified_time":"2019-10-01T22:03:29+00:00","og_image":[{"width":"1200","height":"630","url":"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2017\/09\/query-posts.jpg","type":"image\/jpeg"}],"author":"Felipe Elia","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/felipe_elia","twitter_site":"@felipe_elia","twitter_misc":{"Escrito por":"Felipe Elia","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/#article","isPartOf":{"@id":"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/"},"author":{"name":"Felipe Elia","@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"headline":"Comece a pensar em HTML","datePublished":"2008-10-28T01:54:00+00:00","dateModified":"2019-10-01T22:03:29+00:00","mainEntityOfPage":{"@id":"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/"},"wordCount":612,"commentCount":0,"publisher":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"articleSection":["HTML\/CSS"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/","url":"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/","name":"Comece a pensar em HTML | Felipe Elia","isPartOf":{"@id":"https:\/\/felipeelia.com.br\/#website"},"datePublished":"2008-10-28T01:54:00+00:00","dateModified":"2019-10-01T22:03:29+00:00","description":"Dicas para come\u00e7ar a pensar em HTML","breadcrumb":{"@id":"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/felipeelia.com.br\/comece-a-pensar-em-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/felipeelia.dev\/"},{"@type":"ListItem","position":2,"name":"Comece a pensar em HTML"}]},{"@type":"WebSite","@id":"https:\/\/felipeelia.com.br\/#website","url":"https:\/\/felipeelia.com.br\/","name":"Felipe Elia","description":"Programa\u00e7\u00e3o com WordPress de um jeito f\u00e1cil, do b\u00e1sico ao avan\u00e7ado","publisher":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/felipeelia.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":["Person","Organization"],"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292","name":"Felipe Elia","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/","url":"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg","contentUrl":"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg","width":400,"height":400,"caption":"Felipe Elia"},"logo":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/"},"description":"Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.","sameAs":["https:\/\/www.facebook.com\/felipe.elia","https:\/\/www.instagram.com\/felipe.elia\/","https:\/\/www.linkedin.com\/in\/felipeelia\/","https:\/\/twitter.com\/https:\/\/twitter.com\/felipe_elia","https:\/\/www.youtube.com\/channel\/UCD_26rOE3ClALcZreTkyIoQ"],"url":"https:\/\/felipeelia.com.br\/author\/admin\/"}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false,"yarpp-thumbnail":false},"uagb_author_info":{"display_name":"Felipe Elia","author_link":"https:\/\/felipeelia.com.br\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"Dicas para come\u00e7ar a pensar em HTML","_links":{"self":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts\/1372"}],"collection":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/comments?post=1372"}],"version-history":[{"count":0,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts\/1372\/revisions"}],"wp:attachment":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/media?parent=1372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/categories?post=1372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/tags?post=1372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}