<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://extension.harvard.edu/">Harvard Extension School</a></div><div id="coursename"><a href="http://cscie12.dce.harvard.edu/">CSCI E-12 Fundamentals of Web Site Development<span class="term">  |  Spring 2020</span></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: 2,
    head: 2,
    script: 27,
    meta: 47,
    title: 5,
    link: 21,
    body: 2,
    a: 229,
    span: 39,
    div: 332,
    header: 7,
    button: 8,
    b: 3,
    svg: 3,
    path: 3,
    img: 32,
    nav: 5,
    ul: 27,
    li: 133,
    main: 2,
    figure: 7,
    picture: 7,
    source: 9,
    p: 56,
    h1: 3,
    form: 5,
    label: 4,
    input: 10,
    article: 4,
    h2: 13,
    time: 23,
    aside: 1,
    iframe: 2,
    footer: 2,
    hr: 2,
    section: 10,
    noscript: 2,
    h3: 21,
    h4: 1 },
 unique_tag_count: 39,
  url: 'http://www.harvard.edu/',
  title: 'Harvard University' , thumb: 'thumb-harvard200.png'}
,{ tagname:
  { html: 3,
    head: 3,
    script: 29,
    meta: 79,
    title: 16,
    link: 37,
    body: 3,
    a: 536,
    span: 204,
    div: 707,
    header: 24,
    button: 8,
    b: 3,
    svg: 32,
    path: 34,
    img: 100,
    nav: 9,
    ul: 37,
    li: 183,
    main: 2,
    figure: 73,
    picture: 7,
    source: 9,
    p: 70,
    h1: 76,
    form: 5,
    label: 4,
    input: 10,
    article: 77,
    h2: 30,
    time: 23,
    aside: 1,
    iframe: 2,
    footer: 3,
    hr: 3,
    section: 33,
    noscript: 2,
    h3: 82,
    h4: 5,
    g: 15,
    i: 39,
    circle: 6,
    polyline: 11,
    line: 11 },
 unique_tag_count: 44,
  url: 'http://www.wbur.org/',
  title: 'WBUR' , thumb: 'thumb-wbur200.png'}
,{ tagname:
  { html: 1,
    head: 1,
    script: 14,
    meta: 23,
    title: 4,
    link: 15,
    body: 1,
    a: 74,
    span: 11,
    div: 65,
    header: 1,
    button: 6,
    b: 3,
    svg: 3,
    path: 3,
    img: 16,
    nav: 4,
    ul: 11,
    li: 56,
    main: 1,
    figure: 7,
    picture: 7,
    source: 9,
    p: 7,
    h1: 1,
    form: 3,
    label: 2,
    input: 8,
    article: 4,
    h2: 5,
    time: 1,
    aside: 1,
    iframe: 1,
    footer: 1,
    hr: 2,
    section: 1 },
 unique_tag_count: 36,
  url: 'https://www.whitehouse.gov/',
  title: 'The White House' , thumb: 'thumb-whitehouse200.png'}
,{ tagname:
  { html: 4,
    head: 4,
    script: 48,
    meta: 118,
    title: 17,
    link: 46,
    body: 4,
    a: 602,
    span: 286,
    div: 833,
    header: 25,
    button: 9,
    b: 3,
    svg: 32,
    path: 34,
    img: 105,
    nav: 9,
    ul: 47,
    li: 224,
    main: 2,
    figure: 73,
    picture: 7,
    source: 9,
    p: 74,
    h1: 77,
    form: 7,
    label: 7,
    input: 18,
    article: 77,
    h2: 32,
    time: 23,
    aside: 1,
    iframe: 3,
    footer: 3,
    hr: 3,
    section: 34,
    noscript: 3,
    h3: 82,
    h4: 5,
    g: 15,
    i: 39,
    circle: 6,
    polyline: 11,
    line: 11,
    style: 1,
    strong: 9,
    br: 37,
    em: 1,
    sup: 1,
    small: 1 },
 unique_tag_count: 50,  url: 'https://investor.vanguard.com/home/',
  title: 'Vanguard: Helping you reach your investing goals | Vanguard' , thumb: 'thumb-vanguard200.png'}
,{ tagname:
  { html: 5,
 head: 5,
 script: 79,
 meta: 138,
 title: 21,
 link: 85,
 body: 5,
 a: 805,
 span: 510,
 div: 1359,
 header: 26,
 button: 170,
 b: 3,
 svg: 66,
 path: 63,
 img: 136,
 nav: 9,
 ul: 47,
 li: 224,
 main: 2,
 figure: 73,
 picture: 7,
 source: 11,
 p: 79,
 h1: 78,
 form: 8,
 label: 8,
 input: 19,
 article: 79,
 h2: 33,
 time: 23,
 aside: 1,
 iframe: 3,
 footer: 3,
 hr: 3,
 section: 34,
 noscript: 3,
 h3: 89,
 h4: 5,
 g: 42,
 i: 106,
 circle: 8,
 polyline: 11,
 line: 11,
 style: 28,
 strong: 9,
 br: 37,
 em: 1,
 sup: 1,
 small: 1,
 polygon: 10,
 video: 2,
 ol: 1 },
unique_tag_count: 53,
  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>