lesson 3 - setting up the page
So now you know the rules of html and some basic tags. Now it's time to put a page together.
The Basic Sections
If html is all about putting content in tags to define its meaning, the most basic page layout should be obvious. If you are making an html page, it only makes sense that all the content on the page will be enclosed within <html> tags. This way you are defining all the content on the page as html code. So far our page looks like this:
<html>
</html>
Within the html tags, the page is broken up into two main sections, the head and body.
The head tag contains all the information about the document. Nothing written in the head is displayed as part of the page, but all the information in the head informs the browser about the page. At the most basic level, we don't need to know too much about the head tag, we just need to include it in our web page.
The second section, the body, comes right after the head. Everything between the body tags is displayed as the content on webpage. Almost everything we code will be in the body. Adding the head and body tags, our page now looks like this:
<html>
<head>
</head>
<body>
</body>
</html>
adding content
Now that our basic structure is down, we can start adding the content of our webpage. Let's make a page with a heading, a paragraph, and a simple list. Here is how it could look:
<html>
<head>
</head>
<body>
<h2>Music I got last year</h2>
<p>2007 was a great year for music and I bought many albums, some great and others disappointments. Here is a list</p>
<ul>
<li><strong>The National</strong> - Boxer</li>
<li><strong>Atmosphere</strong> - Sad Clown Bad Summer</li>
<li><strong>Beirut</strong> - The Flying Cup Club</li>
<li><strong>Buck65</strong> - Situation</li>
</ul>
</body>
</html>
Parents and children
You'll notice in the code above that there are tags inside of tags. All of the tags in the page are within the html tags. All of the basic content on the page is within the body tag, which is inside of the html tag. The relation between these tags is called a parent-child relationship. If a tag is within a tag, it is a child of that tag. The tag that contains a tag is called its parent tag. If you look at the code above you will see that the <strong> tag is a child of the <li> tag, and that the <ul> tag is the parent of the <li> tag. Every tag on the page (with the exception of the <html> tag) is a child of another tag, and almost any tag can have child tags. Understanding this relationship is vital to designing the page and will aid in formatting your code in an understandable and efficient manner.
two types of tags
When a browser renders your html code, it has rules on how it will display your information. You've probably noticed by now that heading tags are bold and large, and lists have bullets, etc. While the browser renders each kind of tag according to its own rules, all browsers render tags in one of two general ways: inline or block level.
Here is the most fundamental difference between the two - inline tags don't break the flow of the content while block level tags create line breaks above and below. This is most easily understood in the context of tags you already know. Take the <h1>-<h6> tags for example. If you put content in an <h1> tag, that content will be on its own line. The same goes for paragraphs and list items to name a couple. Other tags, like <em> and <strong> will not break the flow of the text. If you insert <em> tags around a chunk of text within a paragraph, the text will flow continuously without creating line breaks. It is important to know the difference between the two so you can follow the basic rules of html and so you can format your code properly.
formatting
You might notice that the code above is formatted specifically, with line breaks after block level tags and indents for child tags. While this makes the code easy to read, it is not necessary to make the code render properly. Because your code dictates how the page will look in a browser, white spaces (the space bar) and carraige returns (the enter key) mean nothing. A single white space between text will create a single space in the text. Beyond that, it will not have any affect. The following two blocks of code will render indentically in a browser:
<html><head></head><body><h2>Music I got last year</h2><p>2007 was a great year for music and I bought many albums, some great and others disappointments. Here is a list</p><ul><li><strong>The National</strong> - Boxer</li><li><strong>Atmosphere</strong> - Sad Clown Bad Summer</li><li><strong>Beirut</strong> - The Flying Cup Club</li><li><strong>Buck65</strong> - Situation</li></ul></body></html>
and
<html>
<head>
</head>
<body>
<h2>Music I got last year</h2>
<p>2007 was a great year for music and I bought many albums, some great and others disappointments. Here is a list</p>
<ul>
<li><strong>The National</strong> - Boxer</li>
<li><strong>Atmosphere</strong> - Sad Clown Bad Summer</li>
<li><strong>Beirut</strong> - The Flying Cup Club</li>
<li><strong>Buck65</strong> - Situation</li>
</ul>
</body>
</html>
If both of these blocks of code render identically, why is the second block preferred? In web design, it is as important that the site looks as neat and structured in the code as well as the browser. By utilizing carraige returns, you can tell when a block level tag has ended and how it will logically look on the page. By leaving inline tags in line, you approximate how those will layout. Most importantly, by indenting child tags, you can quickly see how you have structured your page, and if you forgot to close a tag. It is always better to be safe and use too many carraige returns and white spaces than too few.