ctide/HTML.md

## HTML.md

      
    Raw
  

              HTML.md
            
          
    Every HTML page we make here will follow the same pattern:
<!DOCTYPE html>
<html>
</html>


Doctype - tells the browser which version of HTML we are using.  We will only be writing modern HTML, so we only need DOCTYPE html.


HTML element -  This is our 'root element'.  All of our other elements must be descendants of this element.


We know there's more to HTML than that, so let's dive into what the html element actually is.
Elements

Each  element has a starting tag, which is a tag name, followed by an attribute list, wrapped in < >:
<tag_name attr1="attr1value" attr2="attr2value">
The attribute list is a list of key->value pairs, where the keys are unquoted strings with no whitespace, and the values are either unquoted strings with no whitespace or quoted strings that can have whitespace.  For your own sanity, I suggest you wrap all element values in quotes.
Let's look at a couple examples:
<img src="imageurl.png" />
This should look familiar.  img is the tag name, and the src attribute has the value imageurl.png.
Some elements, like img, are void elements.  They have no content and no closing tag.  The rest, like div, have a starting tag with a tag name and attributes, then contents, then a closing tag.  The closing tag is a forward slash, then the tag name, all wrapped in angle brackets: </html>. For void elements, it's a good practice to include the closing forward slash at the end of the element declaration.
The contents an element can have vary by element.  Let's go to the MDN and compare the acceptable contents of the <html> element and the <div> element.
https://developer.mozilla.org/en-US/
We can see that the permitted content for the html tag is one head element followed by one body element.  The permitted content for the div, on the other hand, is any kind of flow content, which could be any of a great big list of elements, or it could be text.  Using MDN, you can read about flow content vs sectioning content vs phrasing content, if you're interested.
<!DOCTYPE html>
<html attribute_name="I'm the value of an attribute">
  <body>
    <div> 
      <h3>First div!</h3>
      <ul>
        <li> First Item </li>
        <li> Second Item </li>
        <li> Third Item </li>
      </ul>
    </div>
    <div> 
      <h2>Here are some contents of the second div!</h2>
      <p> First paragraph. </p>
      <p> Second paragraph. </p>
    </div>
  </body>
</html>
As you can see, adding elements and content just put it on the page, without any kind of control over the layout or the colors.  To move elements around the page and give the content of our HTML form, we use CSS, short for Cascading Style Sheets.
Remember that the html element has a head element as well as a body.  In that head element, we're going to put a style element.
<!DOCTYPE html>
<html>
  <head>
	  <style>
      div {
        color: blue;
      }
      #firstdiv { 
        float: left;
        margin-right: 40px;
        color: #8A2908;
      }
      #firsth2 {
        margin-top: 2px;
      }
    </style>
  </head>
  <body>
    <div id=firstdiv> 
      <h2 id=firsth2>First div!</h2>
      <ul>
        <li> First Item </li>
        <li> Second Item </li>
        <li> Third Item </li>
      </ul>
    </div>
    <div> 
      <h2>Here are some contents of the second div!</h2>
      <p> First paragraph. </p>
      <p> Second paragraph. </p>
    </div>
  </body>
</html>
As you can see, we've moved the first div to the left of the second, and we've colored the text in both the divs.
In the sites we make, we will not be putting CSS in a style element like this.  We will be using separate css files.
<!DOCTYPE html>
<html>
  <head>
  	  <link rel="stylesheet" type="text/css" href="6.css">
  </head>
  <body>
    <div id=firstdiv> 
      <h2 id=firsth2>First div!</h2>
      <ul>
        <li> First Item </li>
        <li> Second Item </li>
        <li> Third Item </li>
      </ul>
    </div>
    <div> 
      <h2>Here are some contents of the second div!</h2>
      <p> First paragraph. </p>
      <p> Second paragraph. </p>
    </div>
  </body>
</html>
Now we can change the content and the styling remains the same:
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="6.css">
  </head>
  <body>
    <div id=firstdiv> 
      <h2 id=firsth2>Here are some of my fave sites!</h2>
      <ul>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web">The Mozilla Developer Network</a></li>
        <li><a href="http://paulirish.com">Paul Irish's Blog</a></li>
        <li><a href="http://www.flickr.com/photos/girliemac/sets/72157628409467125/">
          Http Status Cats</a></li>
      </ul>
    </div>
    <div> 
      <h2>R</h2>
      <p> I am a teacher! </p>
      <p> Now we are learning about CSS! </p>
    </div>
  </body>
</html>