humphd/index.html

## index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Experiments with HTML Elements</title>
  </head>
  <body>
    <h1>Main Title of Document</h1>

    <h2>Embed</h2>

    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/6uhRxK_EOm4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>

    <h2>Media</h2>

    <h3>Video/Audio</h3>

    <video
      src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4"
      width="600"
      controls
      muted
    ></video>

    <h3>Images</h3>

    <img
      src="toronto.jpg"
      width="600"
    >

    <h2>Hyperlinks</h2>

    <!-- Absolute URL (https://....) -->
    <a href="https://web222.ca">WEB222</a>
    <!-- Relative URL-->
    <a href="abou.html">About</a>
    <a href="./data/info.html">Info</a>
    <!-- ID in the page -->
    <a href="#address">Address</a>
    <a href="#date-and-time">Date and Time</a>

    <h2>Lists</h2>

    <h3>Ordered List</h3>
    <ul>
      <li>Red</li>
      <li>Green</li>
      <li>Blue</li>
    </ul>

    <h3>Unordered List</h3>
    <ol type="A">
      <li>Red</li>
      <li>Green</li>
      <li>Blue</li>
    </ol>

    <h2>Emphasis</h2>

    <p>
      <strong>NOTE:</strong> dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit odio at mi pulvinar, id sodales urna dignissim. Donec nec tellus ullamcorper, tincidunt magna non, porta massa. Morbi a urna sit amet est dignissim pellentesque in ut elit. Vestibulum facilisis scelerisque sem a condimentum. Maecenas fermentum mi id tortor pellentesque euismod. Duis tortor tellus, fermentum et finibus maximus, sodales sit amet libero. Quisque at purus sapien. Nulla condimentum consectetur cursus. Nam pretium elit ac feugiat scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <h2>Quotes</h2>

    <p>This is a <q>quote</q></p>

    <blockquote>
      I'm not a great programmer; I'm just a good programmer with great habits.
      <cite>Kent Beck</cite>
    </blockquote>

    <h2>Sub- and Super-script</h2>

    <p>H<sub>2</sub>0</p>
    <p>x<sup>2</sup></p>

    <h2>Code</h2>

    <p>printf("Hello world\n");</p>
    <code>printf("Hello world\n");</code>

    <h2>Abbreviation</h2>

    HTML <abbr title="Hypertext Markup Language">HTML</abbr>

    <p>
    <abbr title="Cascading Style Sheet">CSS</abbr>
    </p>

    <h2 id="date-and-time">Date and Time</h2>

    <p><time>2020-07-11</time></p>
    <time datetime="2020-07-11">Yesterday</time><br>
    <time datetime="2020-07-12 17:00">Tomorrow at 5pm</time>

    <h2 id="address">Address</h2>

    <address>
      Finch Ave E,<br>
      North York,<br>
      ON M2J 2X5
    </address>

    <h2>Text</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit odio at mi pulvinar, id sodales urna dignissim. Donec nec tellus ullamcorper, tincidunt magna non, porta massa. Morbi a urna sit amet est dignissim pellentesque in ut elit. Vestibulum facilisis scelerisque sem a condimentum. Maecenas fermentum mi id tortor pellentesque euismod. Duis tortor tellus, fermentum et finibus maximus, sodales sit amet libero. Quisque at purus sapien. Nulla condimentum consectetur cursus. Nam pretium elit ac feugiat scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <p>Vivamus laoreet et libero ut semper. Morbi vitae bibendum libero. Vivamus justo neque, molestie at pharetra ut, accumsan id massa. Pellentesque venenatis non sem eu gravida. Sed et enim eget dolor ullamcorper condimentum. Sed facilisis finibus fringilla. Sed posuere mattis orci, in cursus odio euismod at. Suspendisse sodales sem mi, ut sollicitudin tortor dictum eget. Integer sollicitudin quam at dictum efficitur. Aenean id ex est. Sed at tortor sed eros ullamcorper ornare. Nulla ac dictum augue, vel vestibulum augue.</p>

    <p>Donec posuere nisi sit amet tellus aliquet fringilla. Duis nec blandit lectus, nec semper lorem. Aliquam erat volutpat. Mauris eleifend tincidunt sagittis. Nullam fermentum tempor fringilla. Integer laoreet ornare consequat. Suspendisse vel fermentum nulla. Maecenas non pulvinar ligula, at tempus leo. Aliquam erat volutpat. Aenean porta vel ligula nec scelerisque.</p>

    <p>Phasellus sollicitudin mi nisi, ac dapibus leo hendrerit eget. Praesent at dapibus urna. Cras feugiat velit vitae dolor porta feugiat. Etiam eleifend lectus vel elementum vehicula. Pellentesque et sem sed ante dapibus feugiat. Praesent leo nunc, sodales non sapien quis, aliquam cursus justo. Pellentesque sed odio mollis, ornare eros quis, sodales odio. Nulla at ligula velit. Maecenas non tempus eros.</p>

    <p>Duis varius est et purus aliquam, et euismod dui tincidunt. Ut non vehicula orci, quis sollicitudin erat. Aliquam vel feugiat tortor. Suspendisse scelerisque luctus erat in consectetur. Nunc vulputate est non quam mattis suscipit. Donec faucibus eleifend mauris, a lobortis enim sodales vitae. Nunc porttitor suscipit justo, in tempor urna malesuada sed. Ut euismod ligula vitae ullamcorper vulputate. Curabitur id elit in sapien auctor laoreet. Mauris nisi nulla, tristique vel bibendum a, tincidunt eu tortor. Vestibulum at arcu eget velit sagittis vulputate et in eros. Quisque nec ipsum neque. Quisque in lectus ut diam vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur interdum ullamcorper sapien ac facilisis. Maecenas mollis tellus ante, ac auctor nunc luctus quis.</p>

  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Experiments with HTML Elements</title>
	</head>
	<body>
	<h1>Main Title of Document</h1>

	<h2>Embed</h2>

	<iframe
	width="560"
	height="315"
	src="https://www.youtube.com/embed/6uhRxK_EOm4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen
	></iframe>

	<h2>Media</h2>

	<h3>Video/Audio</h3>

	<video
	src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4"
	width="600"
	controls
	muted
	></video>

	<h3>Images</h3>

	<img
	src="toronto.jpg"
	width="600"
	>

	<h2>Hyperlinks</h2>

	<!-- Absolute URL (https://....) -->
	<a href="https://web222.ca">WEB222</a>
	<!-- Relative URL-->
	<a href="abou.html">About</a>
	<a href="./data/info.html">Info</a>
	<!-- ID in the page -->
	<a href="#address">Address</a>
	<a href="#date-and-time">Date and Time</a>

	<h2>Lists</h2>

	<h3>Ordered List</h3>
	<ul>
	<li>Red</li>
	<li>Green</li>
	<li>Blue</li>
	</ul>

	<h3>Unordered List</h3>
	<ol type="A">
	<li>Red</li>
	<li>Green</li>
	<li>Blue</li>
	</ol>

	<h2>Emphasis</h2>

	<p>
	<strong>NOTE:</strong> dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit odio at mi pulvinar, id sodales urna dignissim. Donec nec tellus ullamcorper, tincidunt magna non, porta massa. Morbi a urna sit amet est dignissim pellentesque in ut elit. Vestibulum facilisis scelerisque sem a condimentum. Maecenas fermentum mi id tortor pellentesque euismod. Duis tortor tellus, fermentum et finibus maximus, sodales sit amet libero. Quisque at purus sapien. Nulla condimentum consectetur cursus. Nam pretium elit ac feugiat scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

	<h2>Quotes</h2>

	<p>This is a <q>quote</q></p>

	<blockquote>
	I'm not a great programmer; I'm just a good programmer with great habits.
	<cite>Kent Beck</cite>
	</blockquote>

	<h2>Sub- and Super-script</h2>

	<p>H<sub>2</sub>0</p>
	<p>x<sup>2</sup></p>

	<h2>Code</h2>

	<p>printf("Hello world\n");</p>
	<code>printf("Hello world\n");</code>

	<h2>Abbreviation</h2>

	HTML <abbr title="Hypertext Markup Language">HTML</abbr>

	<p>
	<abbr title="Cascading Style Sheet">CSS</abbr>
	</p>

	<h2 id="date-and-time">Date and Time</h2>

	<p><time>2020-07-11</time></p>
	<time datetime="2020-07-11">Yesterday</time><br>
	<time datetime="2020-07-12 17:00">Tomorrow at 5pm</time>

	<h2 id="address">Address</h2>

	<address>
	Finch Ave E,<br>
	North York,<br>
	ON M2J 2X5
	</address>

	<h2>Text</h2>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit odio at mi pulvinar, id sodales urna dignissim. Donec nec tellus ullamcorper, tincidunt magna non, porta massa. Morbi a urna sit amet est dignissim pellentesque in ut elit. Vestibulum facilisis scelerisque sem a condimentum. Maecenas fermentum mi id tortor pellentesque euismod. Duis tortor tellus, fermentum et finibus maximus, sodales sit amet libero. Quisque at purus sapien. Nulla condimentum consectetur cursus. Nam pretium elit ac feugiat scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

	<p>Vivamus laoreet et libero ut semper. Morbi vitae bibendum libero. Vivamus justo neque, molestie at pharetra ut, accumsan id massa. Pellentesque venenatis non sem eu gravida. Sed et enim eget dolor ullamcorper condimentum. Sed facilisis finibus fringilla. Sed posuere mattis orci, in cursus odio euismod at. Suspendisse sodales sem mi, ut sollicitudin tortor dictum eget. Integer sollicitudin quam at dictum efficitur. Aenean id ex est. Sed at tortor sed eros ullamcorper ornare. Nulla ac dictum augue, vel vestibulum augue.</p>

	<p>Donec posuere nisi sit amet tellus aliquet fringilla. Duis nec blandit lectus, nec semper lorem. Aliquam erat volutpat. Mauris eleifend tincidunt sagittis. Nullam fermentum tempor fringilla. Integer laoreet ornare consequat. Suspendisse vel fermentum nulla. Maecenas non pulvinar ligula, at tempus leo. Aliquam erat volutpat. Aenean porta vel ligula nec scelerisque.</p>

	<p>Phasellus sollicitudin mi nisi, ac dapibus leo hendrerit eget. Praesent at dapibus urna. Cras feugiat velit vitae dolor porta feugiat. Etiam eleifend lectus vel elementum vehicula. Pellentesque et sem sed ante dapibus feugiat. Praesent leo nunc, sodales non sapien quis, aliquam cursus justo. Pellentesque sed odio mollis, ornare eros quis, sodales odio. Nulla at ligula velit. Maecenas non tempus eros.</p>

	<p>Duis varius est et purus aliquam, et euismod dui tincidunt. Ut non vehicula orci, quis sollicitudin erat. Aliquam vel feugiat tortor. Suspendisse scelerisque luctus erat in consectetur. Nunc vulputate est non quam mattis suscipit. Donec faucibus eleifend mauris, a lobortis enim sodales vitae. Nunc porttitor suscipit justo, in tempor urna malesuada sed. Ut euismod ligula vitae ullamcorper vulputate. Curabitur id elit in sapien auctor laoreet. Mauris nisi nulla, tristique vel bibendum a, tincidunt eu tortor. Vestibulum at arcu eget velit sagittis vulputate et in eros. Quisque nec ipsum neque. Quisque in lectus ut diam vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur interdum ullamcorper sapien ac facilisis. Maecenas mollis tellus ante, ac auctor nunc luctus quis.</p>

	</body>
	</html>