{"id":350,"date":"2006-06-04T15:35:36","date_gmt":"2006-06-04T21:35:36","guid":{"rendered":"http:\/\/www.familyresource.com\/blog\/?p=350"},"modified":"2006-06-04T15:35:36","modified_gmt":"2006-06-04T21:35:36","slug":"the-art-of-dom","status":"publish","type":"post","link":"https:\/\/www.familyresource.com\/blog\/2006\/06\/04\/the-art-of-dom\/","title":{"rendered":"The Art of DOM"},"content":{"rendered":"<p>Most of the people who read this entry will have no idea what I&#8217;m about to say. With that preface, I present to you the HTML DOM visualization of FamilyResource.com. HTML is the language Web pages are written in and the DOM is the document object model. In this case the DOM for HTML consists of objects like tables, anchors and images. Now that I&#8217;ve completely lost you, enjoy the art \u2014 I mean, the HTML DOM visualization of this website&#8217;s home page.<\/p>\n<h2>What do the colors mean?<\/h2>\n<ul>\n<li><span style=\"color: #000099; font-weight: bold\">blue<\/span>: for links (the A tag)<\/li>\n<li><span style=\"color: #ff0000; font-weight: bold\">red<\/span>: for tables (TABLE, TR and TD tags)<\/li>\n<li><span style=\"color: #009900; font-weight: bold\">green<\/span>: for the DIV tag<\/li>\n<li><span style=\"color: #cc00ff; font-weight: bold\">violet<\/span>: for images (the IMG tag)<\/li>\n<li><span style=\"color: #ffff33; font-weight: bold\">yellow<\/span>: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)<\/li>\n<li><span style=\"color: #ff9933; font-weight: bold\">orange<\/span>: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)<\/li>\n<li><span style=\"color: #000000; font-weight: bold\">black<\/span>: the HTML tag, the root node<\/li>\n<li><span style=\"color: #999999; font-weight: bold\">gray<\/span>: all other tags<\/li>\n<\/ul>\n<p><img decoding=\"async\" alt=\"fr-dom.png\" id=\"image434\" src=\"http:\/\/www.familyresource.com\/blog\/wp-content\/uploads\/2006\/06\/fr-dom.png\" \/><\/p>\n<p>You can create your own HTML DOM visualization at the <a href=\"http:\/\/www.aharef.info\/static\/htmlgraph\/\">Websites as Graphs<\/a> Web page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most of the people who read this entry will have no idea what I&#8217;m about to say. With that preface, I present to you the HTML DOM visualization of FamilyResource.com. HTML is the language&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56,4],"tags":[],"class_list":["post-350","post","type-post","status-publish","format-standard","hentry","category-arts-and-crafts","category-lifestyles"],"_links":{"self":[{"href":"https:\/\/www.familyresource.com\/blog\/wp-json\/wp\/v2\/posts\/350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.familyresource.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.familyresource.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.familyresource.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.familyresource.com\/blog\/wp-json\/wp\/v2\/comments?post=350"}],"version-history":[{"count":0,"href":"https:\/\/www.familyresource.com\/blog\/wp-json\/wp\/v2\/posts\/350\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.familyresource.com\/blog\/wp-json\/wp\/v2\/media?parent=350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.familyresource.com\/blog\/wp-json\/wp\/v2\/categories?post=350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.familyresource.com\/blog\/wp-json\/wp\/v2\/tags?post=350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}