halloffame · February 4, 2013 07:03
diff --git a/beginning.html b/beginning.html
 <!-- This is a comment, anythign you put here won't be evaluated -->

 <!doctype html>  
 <!-- this must be the very first thing in your HTML document (comments don't count). 
  This declaration tells the web browser what kind of document to expect. 
  You can see a list of compatible doctypes here http://www.w3schools.com/tags/tag_doctype.asp
  For our purposes, we will always be using the above syntax. -->
 <html>
  <!-- This is the first tag in this document. It is the only one of it's kind and it's sole purpose is to wrap the entire document -->

  <head>
    <!-- Inside the <html></html> tags you always have two and only two children. The <head> tag and the <body> tag.
     Nothing in the <head> is seen by the user. It's purpose is to set up the document.
     In it, you link to external stylesheets and javascript files that are used to style your site and provide dynamic content.
     It also provides some other information to the browswer. -->

    <meta charset="UTF-8" />
    <!-- This just tells the browser what type of characters you are using... just do it. -->

    <title>Example</title>
    <!-- This is the title you see up in the tab on your browser. You can make it say anythign you want but it should let the user know where they are -->

    <link rel="stylesheet" href="http://example.com/css/style.css" />
    <!-- This is a link to an external stylesheet. This usually lives on your own server in the same project as this page.
      It's currently being referenced 'absolutely', which means the full URL is given.
      It can also be referenced 'relatively', which means it is located relative to this file, for example...
        "../css/style.css". The "../" syntax says to go one folder up, and then go into the folder named "css", and then look for the file named "style.css" -->

    <style>
      /* You can also declare styles right here inline. Everything in this <style></style> tag is now considered CSS (Cascading Style Sheet).
         Because this is CSS, the syntax will now be a little different. Notice the syntax for comments has changed. */
      h1 { 
        color: blue;
        font-size: 40px;
        /* This applies the above styles to anything inside an <h1></h1> tag. There is a whole list of style rules that you will come to know over time.
            There are also a bunch of reference sites you can look this type of thing up. */
      }
      .black-border {
        border: 1px solid black;
        /* This gives anything with the class "main-content" a 1 pixel black border. In our case this will aply to the <div> tag below */
      }
      #main-content {
        /* the # looks for the first tag with the ID of "main-content". There should only be one of any given ID on a page. If you want to apply it
        to more things than just one thing, you should use the class attribute instead. */
      }
    </style>
    
  </head>
  <!-- This is a closing tag. Most tags need them, there are only a few that don't, like the <link/> tag and the <img/> tag to list a few. 
    Often times those will be terminated in a backslash, but it's not required by the browser.  -->

  <body>
    <!-- This is where all the content of the page goes. This is what will be seen by the user. -->

    <h1>Hello World!</h1>
    <!-- This opens and closes an h1 header. There are 5 headers you can use, h1, h2, h3, h4, h5... and maybe even h6, but I've never gone that far. -->

    <div class="black-border" id="main-content">
      <!-- This is a <div> tag. It is used just as a container for wrapping and styling content. By itself it doesn't have any attributes and is invisible to the user.
        The class and id attrubutes are used by the CSS and Javascript to select this particular tag if you want to style it a certain way.
        This div will have a 1 pixel black border. Classes can be used more than once all around the page. If you want to be more specific
        and only refer to one specific item on the page, you should use the "id" attribute -->
      
      <p>This is a paragraph tag. It typically has some padding on the bottom of it, but you can style it however you like.</p>
    </div>

    <!-- That is the end. You can learn more about the structure of an HTML document here http://reference.sitepoint.com/html/page-structure.
     There are a lot more tag types that can be used, this just scratches the surface. You can find more here http://reference.sitepoint.com/html/elements. -->
  </body>
 </html>
	<!-- This is a comment, anythign you put here won't be evaluated -->

	<!doctype html>
	<!-- this must be the very first thing in your HTML document (comments don't count).
	This declaration tells the web browser what kind of document to expect.
	You can see a list of compatible doctypes here http://www.w3schools.com/tags/tag_doctype.asp
	For our purposes, we will always be using the above syntax. -->
	<html>
	<!-- This is the first tag in this document. It is the only one of it's kind and it's sole purpose is to wrap the entire document -->

	<head>
	<!-- Inside the <html></html> tags you always have two and only two children. The <head> tag and the <body> tag.
	Nothing in the <head> is seen by the user. It's purpose is to set up the document.
	In it, you link to external stylesheets and javascript files that are used to style your site and provide dynamic content.
	It also provides some other information to the browswer. -->

	<meta charset="UTF-8" />
	<!-- This just tells the browser what type of characters you are using... just do it. -->

	<title>Example</title>
	<!-- This is the title you see up in the tab on your browser. You can make it say anythign you want but it should let the user know where they are -->

	<link rel="stylesheet" href="http://example.com/css/style.css" />
	<!-- This is a link to an external stylesheet. This usually lives on your own server in the same project as this page.
	It's currently being referenced 'absolutely', which means the full URL is given.
	It can also be referenced 'relatively', which means it is located relative to this file, for example...
	"../css/style.css". The "../" syntax says to go one folder up, and then go into the folder named "css", and then look for the file named "style.css" -->

	<style>
	/* You can also declare styles right here inline. Everything in this <style></style> tag is now considered CSS (Cascading Style Sheet).
	Because this is CSS, the syntax will now be a little different. Notice the syntax for comments has changed. */
	h1 {
	color: blue;
	font-size: 40px;
	/* This applies the above styles to anything inside an <h1></h1> tag. There is a whole list of style rules that you will come to know over time.
	There are also a bunch of reference sites you can look this type of thing up. */
	}
	.black-border {
	border: 1px solid black;
	/* This gives anything with the class "main-content" a 1 pixel black border. In our case this will aply to the <div> tag below */
	}
	#main-content {
	/* the # looks for the first tag with the ID of "main-content". There should only be one of any given ID on a page. If you want to apply it
	to more things than just one thing, you should use the class attribute instead. */
	}
	</style>

	</head>
	<!-- This is a closing tag. Most tags need them, there are only a few that don't, like the <link/> tag and the <img/> tag to list a few.
	Often times those will be terminated in a backslash, but it's not required by the browser. -->

	<body>
	<!-- This is where all the content of the page goes. This is what will be seen by the user. -->

	<h1>Hello World!</h1>
	<!-- This opens and closes an h1 header. There are 5 headers you can use, h1, h2, h3, h4, h5... and maybe even h6, but I've never gone that far. -->

	<div class="black-border" id="main-content">
	<!-- This is a <div> tag. It is used just as a container for wrapping and styling content. By itself it doesn't have any attributes and is invisible to the user.
	The class and id attrubutes are used by the CSS and Javascript to select this particular tag if you want to style it a certain way.
	This div will have a 1 pixel black border. Classes can be used more than once all around the page. If you want to be more specific
	and only refer to one specific item on the page, you should use the "id" attribute -->

	<p>This is a paragraph tag. It typically has some padding on the bottom of it, but you can style it however you like.</p>
	</div>

	<!-- That is the end. You can learn more about the structure of an HTML document here http://reference.sitepoint.com/html/page-structure.
	There are a lot more tag types that can be used, this just scratches the surface. You can find more here http://reference.sitepoint.com/html/elements. -->
	</body>
	</html>