HTMl- Frames, Tables, Lists

HTML Frames

With frames, you can display more than one Web page in the same browser window.

Examples
Vertical frameset
This example demonstrates how to make a vertical frameset with three different documents.
Horizontal frameset
This example demonstrates how to make a horizontal frameset with three different documents.
(You can find more examples at the bottom of this page)

Frames
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.
The disadvantages of using frames are:
• The web developer must keep track of more HTML documents
• It is difficult to print the entire page

The Frameset Tag
• The tag defines how to divide the window into frames
• Each frameset defines a set of rows or columns
• The values of the rows/columns indicate the amount of screen area each row/column will occupy

The Frame Tag
• The tag defines what HTML document to put into each frame
In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:




Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*").

Basic Notes - Useful Tips
If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the tag.
Add the tag for browsers that do not support frames. <br />Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done in the first example below. <br /> <br />More Examples <br />How to use the <noframes> tag <br />This example demonstrates how to use the <noframes> tag. <br />Mixed frameset <br />This example demonstrates how to make a frameset with three documents, and how to mix them in rows and columns. <br />Frameset with noresize="noresize" <br />This example demonstrates the noresize attribute. The frames are not resizable. Move the mouse over the borders between the frames and notice that you can not move the borders. <br />Navigation frame <br />This example demonstrates how to make a navigation frame. The navigation frame contains a list of links with the second frame as the target. The file called "tryhtml_contents.htm" contains three links. The source code of the links: <br /><a href ="frame_a.htm" target ="showframe">Frame a</a><br> <br /><a href ="frame_b.htm" target ="showframe">Frame b</a><br> <br /><a href ="frame_c.htm" target ="showframe">Frame c</a> <br />The second frame will show the linked document. <br />Inline frame <br />This example demonstrates how to create an inline frame (a frame inside an HTML page). <br />Jump to a specified section within a frame <br />This example demonstrates two frames. One of the frames has a source to a specified section in a file. The specified section is made with <a name="C10"> in the "link.htm" file. <br />Jump to a specified section with frame navigation <br />This example demonstrates two frames. The navigation frame (content.htm) to the left contains a list of links with the second frame (link.htm) as a target. The second frame shows the linked document. One of the links in the navigation frame is linked to a specified section in the target file. The HTML code in the file "content.htm" looks like this: <a href ="link.htm" target ="showframe">Link without Anchor</a><br><a href ="link.htm#C10" target ="showframe">Link with Anchor</a>. <br /> <br />Frame Tags <br />Tag Description <br /><frameset> <br />Defines a set of frames <br /><frame> <br />Defines a sub window (a frame) <br /><noframes> <br />Defines a noframe section for browsers that do not handle frames <br /><iframe> <br />Defines an inline sub window (frame) <br /> <br /> <br />HTML TABLES <br /> <br />With HTML you can create tables. <br /> <br />Examples <br />Tables <br />This example demonstrates how to create tables in an HTML document. <br />Table borders <br />This example demonstrates different table borders. <br />(You can find more examples at the bottom of this page) <br /> <br />Tables <br />Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. <br /><table border="1"> <br /><tr> <br /><td>row 1, cell 1</td> <br /><td>row 1, cell 2</td> <br /></tr> <br /><tr> <br /><td>row 2, cell 1</td> <br /><td>row 2, cell 2</td> <br /></tr> <br /></table> <br />How it looks in a browser: <br />row 1, cell 1 row 1, cell 2 <br />row 2, cell 1 row 2, cell 2 <br /> <br /> <br />Tables and the Border Attribute <br />If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. <br />To display a table with borders, you will have to use the border attribute: <br /><table border="1"> <br /><tr> <br /><td>Row 1, cell 1</td> <br /><td>Row 1, cell 2</td> <br /></tr> <br /></table> <br /> <br /> <br />Headings in a Table <br />Headings in a table are defined with the <th> tag. <br /><table border="1"> <br /><tr> <br /><th>Heading</th> <br /><th>Another Heading</th> <br /></tr> <br /><tr> <br /><td>row 1, cell 1</td> <br /><td>row 1, cell 2</td> <br /></tr> <br /><tr> <br /><td>row 2, cell 1</td> <br /><td>row 2, cell 2</td> <br /></tr> <br /></table> <br />How it looks in a browser: <br />Heading Another Heading <br />row 1, cell 1 row 1, cell 2 <br />row 2, cell 1 row 2, cell 2 <br /> <br /> <br />Empty Cells in a Table <br />Table cells with no content are not displayed very well in most browsers. <br /><table border="1"> <br /><tr> <br /><td>row 1, cell 1</td> <br /><td>row 1, cell 2</td> <br /></tr> <br /><tr> <br /><td>row 2, cell 1</td> <br /><td></td> <br /></tr> <br /></table> <br />How it looks in a browser: <br />row 1, cell 1 row 1, cell 2 <br />row 2, cell 1 <br />Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border). <br />To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible: <br /><table border="1"> <br /><tr> <br /><td>row 1, cell 1</td> <br /><td>row 1, cell 2</td> <br /></tr> <br /><tr> <br /><td>row 2, cell 1</td> <br /><td>&nbsp;</td> <br /></tr> <br /></table> <br />How it looks in a browser: <br />row 1, cell 1 row 1, cell 2 <br />row 2, cell 1 <br /> <br /> <br />Basic Notes - Useful Tips <br />The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in our XML tutorial. <br /> <br />More Examples <br />Table with no border <br />This example demonstrates a table with no borders. <br />Headings in a table <br />This example demonstrates how to display table headers. <br />Empty cells <br />This example demonstrates how to use "&nbsp;" to handle cells that have no content. <br />Table with a caption <br />This example demonstrates a table with a caption. <br />Table cells that span more than one row/column <br />This example demonstrates how to define table cells that span more than one row or one column. <br />Tags inside a table <br />This example demonstrates how to display elements inside other elements. <br />Cell padding <br />This example demonstrates how to use cellpadding to create more white space between the cell content and its borders. <br />Cell spacing <br />This example demonstrates how to use cellspacing to increase the distance between the cells. <br />Add a background color or a background image to a table <br />This example demonstrates how to add a background to a table. <br />Add a background color or a background image to a table cell <br />This example demonstrates how to add a background to one or more table cells. <br />Align the content in a table cell <br />This example demonstrates how to use the "align" attribute to align the content of cells, to create a "nice-looking" table. <br />The frame attribute <br />This example demonstrates how to use the "frame" attribute to control the borders around the table. <br />The frame and border attributes <br />How to use the "frame" and "border" attributes to control the borders around the table. <br /> <br />Table Tags <br />Tag Description <br /><table> <br />Defines a table <br /><th> <br />Defines a table header <br /><tr> <br />Defines a table row <br /><td> <br />Defines a table cell <br /><caption> <br />Defines a table caption <br /><colgroup> <br />Defines groups of table columns <br /><col> <br />Defines the attribute values for one or more columns in a table <br /><thead> <br />Defines a table head <br /><tbody> <br />Defines a table body <br /><tfoot> <br />Defines a table footer <br /> <br /> <br />HTML Lists <br /> <br />HTML supports ordered, unordered and definition lists. <br /> <br />Examples <br />An unordered list <br />This example demonstrates an unordered list. <br />An ordered list <br />This example demonstrates an ordered list. <br />(You can find more examples at the bottom of this page) <br /> <br />Unordered Lists <br />An unordered list is a list of items. The list items are marked with bullets (typically small black circles). <br />An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. <br /><ul> <br /><li>Coffee</li> <br /><li>Milk</li> <br /></ul> <br />Here is how it looks in a browser: <br />&#8226; Coffee <br />&#8226; Milk <br />Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. <br /> <br />Ordered Lists <br />An ordered list is also a list of items. The list items are marked with numbers. <br />An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. <br /><ol> <br /><li>Coffee</li> <br /><li>Milk</li> <br /></ol> <br />Here is how it looks in a browser: <br />1. Coffee <br />2. Milk <br />Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. <br /> <br />Definition Lists <br />A definition list is not a list of items. This is a list of terms and explanation of the terms. <br />A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag. <br /><dl> <br /><dt>Coffee</dt> <br /><dd>Black hot drink</dd> <br /><dt>Milk</dt> <br /><dd>White cold drink</dd> <br /></dl> <br />Here is how it looks in a browser: <br />Coffee <br />Black hot drink <br />Milk <br />White cold drink <br />Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc. <br /> <br />More Examples <br />Different types of ordered lists <br />This example demonstrates different types of ordered lists. <br />Different types of unordered Lists <br />This example demonstrates different types of unordered lists. <br />Nested list <br />This example demonstrates how you can nest lists. <br />Nested list 2 <br />This example demonstrates a more complicated nested list. <br />Definition list <br />This example demonstrates a definition list. <br /> <br />List Tags <br />Tag Description <br /><ol> <br />Defines an ordered list <br /><ul> <br />Defines an unordered list <br /><li> <br />Defines a list item <br /><dl> <br />Defines a definition list <br /><dt> <br />Defines a definition term <br /><dd> <br />Defines a definition description <br /><dir> <br />Deprecated. Use <ul> instead <br /><menu> <br />Deprecated. Use <ul> instead <br /> <br /></p> <div style='clear: both;'></div> </div> <div class='post-footer'> <p class='postmetadata'><small> <span> <abbr class='post_date' title='5:13 AM'>5:13&#8239;AM</abbr> </span> | <span class='post-labels'> </span> | <span class='post-icons'> <span class='item-action'> <a href='https://www.blogger.com/email-post/6747850777942446682/6699751949040349649' title='Email Post'> <span class='email-post-icon'>&#160;</span> </a> </span> <p class='postmetadata alt'> <small> This entry was posted on 5:13&#8239;AM You can follow any responses to this entry through the <a href='https://infosearch4u.blogspot.com/feeds/8032449888700751836/comments/default'>RSS 2.0</a> feed. You can <a href='https://www.blogger.com/comment/fullpage/post/6747850777942446682/6699751949040349649' onclick=''>leave a response</a>, or <a href='https://infosearch4u.blogspot.com/2008/05/html-frames-tables-lists.html' rel='trackback'>trackback</a> from your own site. </small></p> <span class='item-control blog-admin pid-1321919957'> <a href='https://www.blogger.com/post-edit.g?blogID=6747850777942446682&postID=6699751949040349649&from=pencil' title='Edit Post'> <span class='quick-edit-icon'>&#160;</span> </a> </span> </span></small> </p> <p class='post-footer-line post-footer-line-2'></p> <p class='post-footer-line post-footer-line-3'></p> </div> </div> <div class='comments' id='comments'> <a name='comments'></a> <h4> 0 comments: </h4> <dl id='comments-block'> </dl> <p class='comment-footer'> <a href='https://www.blogger.com/comment/fullpage/post/6747850777942446682/6699751949040349649' onclick=''>Post a Comment</a> </p> <div id='backlinks-container'> <div id='Blog1_backlinks-container'> </div> </div> </div> <!--Can't find substitution for tag [adEnd]--> </div> <div class='blog-pager' id='blog-pager'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' href='https://infosearch4u.blogspot.com/2008/05/html-forms-inputs.html' id='Blog1_blog-pager-newer-link' title='Newer Post'>Newer Post</a> </span> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='https://infosearch4u.blogspot.com/2008/05/html-text-formatting.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a> </span> <a class='home-link' href='https://infosearch4u.blogspot.com/'>Home</a> </div> <div class='clear'></div> <div class='post-feeds'> <div class='feed-links'> Subscribe to: <a class='feed-link' href='https://infosearch4u.blogspot.com/feeds/6699751949040349649/comments/default' target='_blank' type='application/atom+xml'>Post Comments (Atom)</a> </div> </div> </div><div class='widget HTML' data-version='1' id='HTML7'> <div class='widget-content'> Bidvertiser <!-- Begin BidVertiser code --> <script language="JavaScript1.1" src="//bdv.bidvertiser.com/BidVertiser.dbm?pid=131452%26bid%3D321061" type="text/javascript"></script> <noscript><a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">pay per click</a></noscript> <!-- End BidVertiser code --> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML4'> <div class='widget-content'> <!-- BEGIN STANDARD TAG - 468 x 60 - Computers and More: Infosearch4u.blogspot.com - DO NOT MODIFY --> <iframe scrolling="NO" frameborder="0" width="468" marginheight="0" src="http://ads.komli.com/st?ad_type=iframe&ad_size=468x60&section=387452" height="60" marginwidth="0"></iframe> <!-- END TAG --> <script type="text/javascript"> var dc_UnitID = 14; var dc_PublisherID = 43559; var dc_AdLinkColor = 'blue'; var dc_adprod='ADL'; var dc_open_new_win = 'yes'; </script> <script src="//kona.kontera.com/javascript/lib/KonaLibInline.js" type="text/javascript"></script> </div> <div class='clear'></div> </div></div> </div> </div> <div class='navigation'> <div class='alignleft'></div> <div class='alignright'></div> </div> </div> <div id='footwrap'> <!-- Please don't remove the designed by, you can remove the availabe free at if you want, but don't remove the designed by link --> <p>Designed by <a href='http://www.seotalk.es'>Posicionamiento Web</a> | Bloggerized by <a href='http://www.gosublogger.com/'>GosuBlogger</a> | <a href='http://www.eblogtemplates.com/blue-business-blogger/'>Blue Business Blogger</a></p> </div> </div> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/91768132-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY7uae9fuskcqGUUwKQO9vXLL4UGkA:1737172845930';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6747850777942446682','//infosearch4u.blogspot.com/2008/05/html-frames-tables-lists.html','6747850777942446682'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '6747850777942446682', 'title': 'COMPUTERS AND MORE', 'url': 'https://infosearch4u.blogspot.com/2008/05/html-frames-tables-lists.html', 'canonicalUrl': 'http://infosearch4u.blogspot.com/2008/05/html-frames-tables-lists.html', 'homepageUrl': 'https://infosearch4u.blogspot.com/', 'searchUrl': 'https://infosearch4u.blogspot.com/search', 'canonicalHomepageUrl': 'http://infosearch4u.blogspot.com/', 'blogspotFaviconUrl': 'https://infosearch4u.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en-US', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22COMPUTERS AND MORE - Atom\x22 href\x3d\x22https://infosearch4u.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22COMPUTERS AND MORE - RSS\x22 href\x3d\x22https://infosearch4u.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22COMPUTERS AND MORE - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/6747850777942446682/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22COMPUTERS AND MORE - Atom\x22 href\x3d\x22https://infosearch4u.blogspot.com/feeds/6699751949040349649/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-2656021733847397', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/d2c988fc3a56b1b1', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '6699751949040349649', 'pageName': 'HTMl- Frames, Tables, Lists', 'pageTitle': 'COMPUTERS AND MORE: HTMl- Frames, Tables, Lists'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'HTMl- Frames, Tables, Lists', 'description': 'HTML Frames\r \r With frames, you can display more than one Web page in the same browser window.\r \r Examples\r Vertical frameset\r This example...', 'url': 'https://infosearch4u.blogspot.com/2008/05/html-frames-tables-lists.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 6699751949040349649}}]); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'headersection', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'lsidebar', document.getElementById('HTML11'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML10', 'lsidebar', document.getElementById('HTML10'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML9', 'lsidebar', document.getElementById('HTML9'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'lsidebar', document.getElementById('HTML1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'lsidebar', document.getElementById('HTML6'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'lsidebar', document.getElementById('HTML2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML8', 'lsidebar1', document.getElementById('HTML8'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'lsidebar1', document.getElementById('LinkList1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'lsidebar1', document.getElementById('HTML5'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'lsidebar1', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_FeedView', new _WidgetInfo('Feed1', 'lsidebar1', document.getElementById('Feed1'), {'title': 'Recent Posts', 'showItemDate': true, 'showItemAuthor': true, 'feedUrl': 'http://feeds.feedburner.com/computersandmore', 'numItemsShow': 5, 'loadingMsg': 'Loading...', 'openLinksInNewWindow': false, 'useFeedWidgetServ': 'true'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'main', document.getElementById('HTML3'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/599103511-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML7', 'main', document.getElementById('HTML7'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'main', document.getElementById('HTML4'), {}, 'displayModeFull')); </script> </body> </html>