clhenrick/index.html

## index.html
<!DOCTYPE html>

<!-- the root tag, everything must go in here -->
<html>

  <!-- meta information about our page as well as external links and styles -->
  <head>
    <!-- specify the character encoding of our page -->
    <meta charset="utf-8">

    <!-- the title of our webpage -->
    <title>My Webpage</title>

    <!-- contains our CSS -->
    <style type="text/css">

    /* where our CSS goes when writing it inside our HTML document */

      /*
      selector {
        css-property: value;
      }
      */

      div {
        background-color: hsl(10, 60%, 50%);
      }

      div#journal-items {
        background-color: orange;
      }

      img {
        max-width: 200px;
        max-height: 200px;
      }

    </style>
  </head>
  <body>
    <!-- This is a comment! -->
    <!-- The body is where all the viewable content goes -->

    <!-- a level one heading with an inline-CSS attribute -->
    <h1 style="color:red">Hello World!</h1>

    <!-- this creates a ruled line -->
    <hr>

    <!-- a div is used to group elements -->
    <div id="journal-items">

      <!-- Here is a group of journal items -->

      <!-- a level 3 heading -->
      <h3>Here is a sub-heading!</h3>

      <!-- a paragraph -->
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. End of first paragraph here!
        <br><br>
        Start of second paragraph here! Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </p>

      <!-- an ordered list -->
      <ul> Bicycle Parts
        <!-- list items go in both unordered and ordered lists -->
        <li>Handle Bars</li>
        <li>Wheels</li>
        <li>Pedals</li>
        <li>Chain</li>
        <li>breaks</li>
      </ul>

      <!-- an un-ordered list -->
      <ol> My Favorite Foods (In order of importance!)
        <li>Burrittos</li>
        <li>Tacos</li>
        <li>Quesadillas</li>
        <li>Falafel</li>
      </ol>
    </div>

    <!-- another div -->
    <div>

      <h3>My Images</h3>

      <!-- an image linked to a file on the web -->
      <img src="http://photos-c.ak.instagram.com/hphotos-ak-xaf1/10584747_629326203832418_218314038_n.jpg">

      <!-- I commented this one out because it won't work here as the file is on my computer -->
      <!-- <img src="/path/to/your/local/file.jpg"> -->


    </div>
  </body>
</html>
	<!DOCTYPE html>

	<!-- the root tag, everything must go in here -->
	<html>

	<!-- meta information about our page as well as external links and styles -->
	<head>
	<!-- specify the character encoding of our page -->
	<meta charset="utf-8">

	<!-- the title of our webpage -->
	<title>My Webpage</title>

	<!-- contains our CSS -->
	<style type="text/css">

	/* where our CSS goes when writing it inside our HTML document */

	/*
	selector {
	css-property: value;
	}
	*/

	div {
	background-color: hsl(10, 60%, 50%);
	}

	div#journal-items {
	background-color: orange;
	}

	img {
	max-width: 200px;
	max-height: 200px;
	}

	</style>
	</head>
	<body>
	<!-- This is a comment! -->
	<!-- The body is where all the viewable content goes -->

	<!-- a level one heading with an inline-CSS attribute -->
	<h1 style="color:red">Hello World!</h1>

	<!-- this creates a ruled line -->
	<hr>

	<!-- a div is used to group elements -->
	<div id="journal-items">

	<!-- Here is a group of journal items -->

	<!-- a level 3 heading -->
	<h3>Here is a sub-heading!</h3>

	<!-- a paragraph -->
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. End of first paragraph here!
	<br><br>
	Start of second paragraph here! Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
	</p>

	<!-- an ordered list -->
	<ul> Bicycle Parts
	<!-- list items go in both unordered and ordered lists -->
	<li>Handle Bars</li>
	<li>Wheels</li>
	<li>Pedals</li>
	<li>Chain</li>
	<li>breaks</li>
	</ul>

	<!-- an un-ordered list -->
	<ol> My Favorite Foods (In order of importance!)
	<li>Burrittos</li>
	<li>Tacos</li>
	<li>Quesadillas</li>
	<li>Falafel</li>
	</ol>
	</div>

	<!-- another div -->
	<div>

	<h3>My Images</h3>

	<!-- an image linked to a file on the web -->
	<img src="http://photos-c.ak.instagram.com/hphotos-ak-xaf1/10584747_629326203832418_218314038_n.jpg">

	<!-- I commented this one out because it won't work here as the file is on my computer -->
	<!-- <img src="/path/to/your/local/file.jpg"> -->


	</div>
	</body>
	</html>