We’re gonna move quickly and fit a lot of information in this section. Let’s go!

The typical website layout goes like this:
Typical Website Layout

In HTML, you use DIV’s to create sections for putting content into.  Think of div’s as the rooms of a house. You have a room which you paint and put furniture into. Or you can think of them as a corkboard that you pin notes and pictures to. Either way, it’s a container used to organize sections of your website. I tend to create a container div for the whole website just inside the <body> tag.

<body>
<div id=”container”>

</div>
</body>

Setting it up this way allows the body of your website, essentially the background, to be set apart from the actual information you set up. You can then put color or images on the body tag and a white background on the container div for all of the content.

Something to note – the ‘id’ parameter is a unique identifier, meaning you can only have 1 id per page. No other id on this page can use the “container” value as it will cause problems. This is more essential when adding CSS than it is with just HTML, but it needs mentioning now.

Moving on. I’m going to go ahead and add the rest of sections in.

<body>
<div id=”container”>

<div id=”header”>
<div id=”navigation”>

</div>
</div>

<div id=”content”>

<p>Hello World!</p>

</div>

<div id=”footer”>

</div>

</div>
</body>

You’ll notice that the “navigation” div is nested inside of the “header” div. You can nest divs inside of other divs as a way of keeping those sections together. If you’ll remember in the illustration at the top, the navigation box is inside of the header box. In this case, I want the navigation to fall under the same settings as the header when it comes to positioning and styling later. It could sit on it’s own between the header and content, but that would make for a dull tutorial! That and most people put the navigation in the header…

At this point, all we’ve done is add a bunch of html to create sections. If you saved it and re-opened the file in the browser, still all you would see is a the “Hello World!” sitting at the top left of the page. That’s OK! We’re just looking at the practical HTML and we’ll get to CSS in the next tutorial.

Did you add that code to your index.html file and check it out in the browser yet? If you did, right click on your page and hit “View Source” or “View Page Source”. You’ll see the code you wrote, even if it isn’t showing any different.

Let’s add some more content so you can see how it shapes up.

<div id=”header”>

<h1> My First Website</h1>

<div id=”navigation”>

<a href=”#”>Home</a> – <a href=”#”>About</a> – <a href=”#”> Hi Mom!</a>

</div>

</div>

<div id=”content”>

<p>Hello World!<p>

<p>This is my new website! I made it myself by writing HTML code! <br />This text is now on the next line.</p>

</div>

<div id=”footer”>

<p>Website design by: John Doe</p>

</div>

So what happened here is we added content inside of the respective divs.

The header got a website title wrapped inside of <h1> tags, which stand for ‘Heading 1″, which is large bold font with space above and below. This can go down to an <h6>. You’ll use this for title of certain things and they can receive their own set of CSS based strictly on the html tag.

The navigation received some links. The <a href=”#”> is an anchor tag with the href property. The ‘#’ is a way of activating the link with out actually going anywhere when you click it. It’s good to do this when designing/developing your site so you can see the function of the link with out leaving the page. Just make sure you change them before you publish your site! There are three of these tags in a row, all wrapped around a word and all closed before the next one starts. The dashes are for visual spacing between the links; no fancy code, it’s just a dash.

The content and footer are pretty self explanatory. The <p> tags are there to give the text a “paragraph” format. The <br /> is a tag that will break the content on to the next line. <p> will put spaces between lines of text while <br /> just makes it go to the next line. You’ll see when you view your page.

So go, type that code in your index.html file, save and view it! It should look like the below image.
Tutorial - HTML Layout with Content

Your code should look like this (click to enlarge):
Tutorial - Intro to HTML Code

The code is indented to show a hierarchy in the structure. This is a good practice for keeping your code organized. This tutorial doesn’t keep the spacing when I type it into the editor, so it’s a bit messy. I’ll have to come up with a different solution.

That’s all for this section. In the last section of the Introduction to HTML tutorial, we’ll create the other pages and add them to the links: “More Than 1 Page”.