<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
     <title>What is CSS? | Webpage After CSS #1</title>
     <base href="http://whatiscss.michaelfokken.com/" />
     
     <meta name="description" content="View this example of a webpage with the CSS styles." />
     <meta name="keywords" content="css example, html page with css, example of css" />
     
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     
     <link rel="stylesheet" type="text/css" href="/assets/css/with-css.css" />
</head>

<body>     <div class="main">
          <div id="menu">
<ul><li class="first"><a href="http://whatiscss.michaelfokken.com/" title="What is CSS?" >What is CSS?</a></li>
<li><a href="all-examples/" title="View All Examples" >All the Examples</a></li>
<li><a href="without-css/" title="Webpage Before CSS" >Webpage Before CSS</a><ul><li class="first"><a href="without-css/view-html/" title="View the HTML" >View HTML</a></li>
</ul></li>
<li class="active"><a href="with-css/" title="Webpage After CSS #1" >Webpage After CSS #1</a><ul><li class="first"><a href="with-css/view-css/" title="View the CSS" >View CSS</a></li>
<li class="last active"><a href="with-css/view-html/" title="View the HTML" >View HTML</a></li>
</ul></li>
<li><a href="with-css-2/" title="Webpage After CSS #2" >Webpage After CSS #2</a><ul><li class="first"><a href="with-css-2/view-css/" title="View the CSS" >View CSS</a></li>
<li class="last"><a href="with-css-2/view-html/" title="View the HTML" >View HTML</a></li>
</ul></li>
<li class="last"><a href="about-site/" title="About the Site" >About</a></li>
</ul>
          </div>
          
          <h1>HTML is Like Writing a Paper</h1>
          
          <h2 id="first_h2">1) The Introduction</h2>
          <p class="level_one">
               When you're developing a website, create each page like an outline. You know, like when you had to give a speech in high school or write a paper for English class. Let's compare it to writing a paper. So, first you start with your main idea. Next you explain what you're going to talk about. You talk about it. And then at the end you tell us what you just talked about.
          </p>
          <h3>A) First Paragraph</h3>
          <p class="level_two">
               The first paragraph is your introduction, which states your main idea and tells us what you are going to talk about. You need to get the attention of the reader quickly or else they won't read the rest of it. (Thinking back, I feel sorry for my English teacher having to read through a bunch of really badly written papers, some of which were probably mine.)
          </p>
          <h3>B) Three Ideas</h3>
          <p class="level_two">
               At the end of your first paragraph you need to introduce the points you're going to be talking about throughout the rest of the paper, which needs to be at least three ideas. We're going to pretend to have three points.
          </p>
          
          <img class="image" src="/assets/images/misc/this-is-an-image.jpg" alt="This is an Image" width="290px" height="231px" border="0" />
          
          <h2>2) Main Idea One</h2>
          <p class="level_one">
               Now that you have the readers attention and they are wondering what's coming next, you transition from the first paragraph into the second paragraph that discusses the first point or idea that you want to make.
          </p>
          <h3>A) Deeper Explanation of Idea One</h3>
          <p class="level_two">
               The first point you want to make can be your stongest, but personally I would put your second strongest point here. That way you still keep the attention of the reader. (Notice how my outline has headings and different sections? This is how your HTML will look.)
          </p>
          <h3>B) Transition into Idea Two</h3>
          <p class="level_two">
               You can then transition into idea number two at the end of this paragraph or you can wait to transition into idea two at the beginning of the next paragraph.
          </p>
          
          <h2>3) Main Idea Two</h2>
          <p class="level_one">
               Next you discuss your main idea number two. This idea, I believe, should be your weakest. The reader will read through this idea because your introduction and first point were good. That's what drew them into reading your paper in the first place.
          </p>
          
          <h2>4) Main Idea Three</h2>
          <p class="level_one">
               Now you transition into your last idea.
          </p>
          <h3>A) Deeper Explanation of Idea Three</h3>
          <p class="level_two">
               This is your last point you are going to make.
          </p>
          <h3>B) Your Final Idea is Your Best</h3>
          <p class="level_two">
               This idea should be your best idea. This is like your climax, like in a book or movie. You don't read books or watch movies that the best part was at the beginning.
          </p>
          <h4>one) Further Explanation</h4>
          <p class="level_three">
               If I have several ideas I want to teach someone, I teach them the one I want them to remember last.
          </p>
          <h4>two) Compared to a Movie</h4>
          <p class="level_three">
               In a movie they lead us towards one main idea or a few main ideas, with a few tangents to keep it interesting.
          </p>
          <img id="second_image" class="image" src="/assets/images/misc/this-is-an-image.jpg" alt="This is an Image" width="290px" height="231px" border="0" />
          <h5>a) The Last Fifteen Minutes</h5>
          <p class="level_four">
               In most movies everything happens in the last fifteen minutes. That's when everything gets resolved. The good guy wins and the bad guy loses.
          </p>
          <h3>C) Finish Your Last Idea</h3>
          <p class="level_two">
               Finish your last point.
          </p>
          
          <h2>5) The Conclusion</h2>
          <p class="level_one">
               This is where you tell us what you just told us. The conclusion, along with the introduction, are close to the most important parts of a paper.
          </p>
          <h3>A) The Gist</h3>
          <p class="level_two">
               So what I'm saying is that a webpage needs to be built like a good paper or outline. It's divided into digestible sections, that lead from one to the other. (Now that your paper is finished you can finally come up with the title. This is the most important part, just like the heading of each of your webpages, it's what people see first. It's what makes them either click to go to your website or to some one else's.)
          </p>
     </div>
</body>

</html>