<html><head><meta charset="UTF-8"/><title>Slide 28 - Elements that Make up a Page - and How Many Times § Session 01 - The Internet, World Wide Web, Web Browsers</title><meta name="lecture" content="1"/><meta name="date" content="Session 01"/><link rel="stylesheet" type="text/css" href="slide_cscie12.css"/><link rel="stylesheet" type="text/css" href="resources/jquery/css/smoothness/jquery-ui.css"/><script src="resources/js/jquery-1.9.0.min.js" type="text/javascript"> </script><script src="resources/js/jquery-ui-1.10.0.custom.min.js" type="text/javascript"> </script><link type="text/css" rel="stylesheet" href="prism/prism.css"/><script type="text/javascript" src="prism/prism.js"> </script><script src="resources/js/site.js">/* site.js */</script><script type="text/javascript">
    $(document).ready(function(){
      $('pre[class*="language-"]').addClass('prism');
      $('pre[class*="language-"] code').addClass('prism');
      $('code[class*="language-"]').addClass('prism');

      var $myhost = location.host;
      if ($myhost.match(/localhost/)) {
        $('.hide-for-localhost').hide();
      }
    });
  </script></head><body><div id="header"><div id="schoolname"><a href="https://www.summer.harvard.edu/">Harvard Extension School, Fall 2018</a></div><div id="coursename"><a href="http://cscie12.dce.harvard.edu/">CSCI E-12 Fundamentals of Web Site Development</a></div></div><div class="nav"><table width="100%"><tr><td style="text-align: right;"><div class="navprevnext"><a href="slide27.html" title="Distinct Elements In a Webpage" accesskey="&lt;">« previous</a> | <span class="hide-for-localhost"> Slide 28</span></div></td></tr></table></div><h2>Elements that Make up a Page - and How Many Times</h2><script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"> /* load handlebars */ </script><script>
var pagedata = {sites: [
{ tagname: 
   { html: 1,
     head: 1,
     script: 13,
     meta: 23,
     link: 4,
     title: 1,
     noscript: 2,
     body: 1,
     div: 295,
     ul: 20,
     li: 81,
     a: 167,
     header: 7,
     h1: 2,
     span: 33,
     nav: 1,
     form: 2,
     label: 2,
     input: 2,
     button: 2,
     main: 1,
     section: 9,
     img: 23,
     h2: 8,
     p: 53,
     h3: 22,
     iframe: 2,
     time: 22,
     footer: 1,
     h4: 1 },
  unique_tag_count: 30,
  url: 'http://www.harvard.edu/',
  title: 'Harvard University' , thumb: 'thumb-harvard200.png'}
,{ tagname: 
   { html: 1,
     head: 1,
     meta: 19,
     title: 11,
     link: 15,
     script: 4,
     body: 1,
     div: 365,
     a: 297,
     span: 221,
     noscript: 4,
     svg: 28,
     path: 29,
     h1: 70,
     g: 16,
     nav: 4,
     ul: 9,
     li: 39,
     i: 45,
     circle: 6,
     img: 65,
     section: 24,
     article: 71,
     figure: 63,
     p: 14,
     header: 16,
     h2: 16,
     h3: 62,
     hr: 1,
     h4: 6,
     polyline: 12,
     line: 12,
     footer: 1 },
  unique_tag_count: 33,
  url: 'http://www.wbur.org/',
  title: 'WBUR' , thumb: 'thumb-wbur200.png'}
,{ tagname: 
   { html: 1,
     head: 1,
     meta: 30,
     link: 32,
     title: 1,
     script: 11,
     body: 1,
     div: 67,
     p: 9,
     a: 133,
     section: 1,
     header: 1,
     span: 39,
     nav: 4,
     ul: 38,
     li: 146,
     img: 4,
     i: 7,
     form: 1,
     h2: 6,
     label: 1,
     input: 3,
     article: 1,
     br: 1,
     footer: 2 },
  unique_tag_count: 25,
  url: 'https://www.whitehouse.gov/',
  title: 'The White House | whitehouse.gov' , thumb: 'thumb-whitehouse200.png'}
,{ tagname: 
   { html: 1,
     head: 1,
     link: 8,
     meta: 37,
     title: 1,
     script: 16,
     body: 1,
     div: 136,
     a: 69,
     span: 85,
     ul: 10,
     li: 40,
     form: 2,
     label: 3,
     input: 7,
     h1: 1,
     img: 5,
     button: 1,
     sup: 2,
     em: 2,
     h2: 2,
     h3: 5,
     hr: 1,
     p: 8,
     header: 1,
     strong: 9,
     br: 37,
     small: 1,
     noscript: 1,
     iframe: 1 },
  unique_tag_count: 30,
  url: 'https://investor.vanguard.com/home/',
  title: 'Vanguard: Helping you reach your investing goals | Vanguard' , thumb: 'thumb-vanguard200.png'}
,{ tagname: 
   { html: 1,
     head: 1,
     title: 1,
     meta: 5,
     link: 11,
     script: 17,
     style: 2,
     body: 1,
     div: 403,
     a: 279,
     span: 181,
     ul: 34,
     li: 137,
     form: 3,
     input: 9,
     p: 89,
     dl: 1,
     dt: 7,
     i: 5,
     dd: 7,
     code: 1,
     label: 2,
     button: 2,
     h2: 2,
     b: 1,
     section: 1,
     header: 1,
     h1: 1,
     img: 23,
     br: 1,
     strong: 1,
     time: 26 },
  unique_tag_count: 32,
  url: 'https://www.reddit.com/',
  title: 'reddit: the front page of the internet' , thumb: 'thumb-reddit200.png'}

]};
for (s in pagedata['sites']) {
  tagname = pagedata['sites'][s]['tagname'];
  var mytags = [];
  var keys = Object.keys(tagname), i, len = keys.length;
  keys.sort();
  var countar = [];
  for (i in keys)
  {
    k = keys[i];
    mytags.push({'name': k, 'count': tagname[k]});
    countar.push(tagname[k]);
  }
  var top5min = countar.sort(function(a,b){return b - a})[4];
  for (t in mytags) {
    var myclass = 'normal';
    if (gteq(mytags[t]['count'],top5min)) {
      myclass = 'highlight5';
    }
    console.log(t);
    console.log(myclass + ' ' + mytags[t]['count'] + ' ' + top5min);
    mytags[t]['class'] = myclass;
  }
  pagedata['sites'][s]['tags'] = mytags;
}

$(document).ready(function(){
var mysource = $("#pagedata-template").html(); 
var mytemplate = Handlebars.compile(mysource);
$('#pagedata').html(mytemplate(pagedata));
});
</script><div id="pagedata">
  Data on Pages goes here...</div><script id="pagedata-template" type="text/x-handlebars-template"><table class="grid"><tr>
{{#sites}}<td style="width: 210px;" rowspan="1" colspan="1"><p><strong>{{title}}</strong></p></td>
{{/sites}}</tr><tr>
{{#sites}}<td rowspan="1" colspan="1"><img style="width: 200px;" src="images/{{thumb}}" alt="{{title}}"/></td>
{{/sites}}</tr><tr>
{{#sites}}<td rowspan="1" colspan="1"><p><a href="{{url}}" shape="rect">{{url}}</a></p></td>
{{/sites}}</tr><tr>
{{#sites}}<td rowspan="1" colspan="1">{{unique_tag_count}} distinct elements</td>
{{/sites}}</tr><tr>
{{#sites}}<td rowspan="1" colspan="1"><table class="grid"><tr><th rowspan="1" colspan="1">Element</th><th rowspan="1" colspan="1">Count</th></tr>
{{#tags}}<tr class="{{class}}"><td rowspan="1" colspan="1">{{name}}</td><td rowspan="1" colspan="1">{{count}}</td></tr>
{{/tags}}</table></td>
{{/sites}}</tr></table></script><div id="pagedata"/><div style="display:none;"><a href="images/thumb-reddit200.png" shape="rect">thumb</a><a href="images/thumb-whitehouse200.png" shape="rect">thumb</a><a href="images/thumb-harvard200.png" shape="rect">thumb</a><a href="images/thumb-wbur200.png" shape="rect">thumb</a><a href="images/thumb-vanguard200.png" shape="rect">thumb</a></div><div class="nav"><table width="100%"><tr><td style="text-align: left;"><a href="slide1.html">TOC</a></td><td style="text-align: right;"><div class="navprevnext"><a href="slide27.html" title="Distinct Elements In a Webpage">« previous</a> | <span class="hide-for-localhost"> Slide 28</span></div></td></tr></table></div><div><p style="float: right; width: 40%; text-align: right; font-size: 80%;">Copyright © David Heitmeyer</p></div><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2675499-2");
pageTracker._initData();
pageTracker._trackPageview();
</script></body></html>