of the page shows at the top of the browser window or on the tab of a browser window, and in the search listing for a site. Let’s pick something that will make sure people know what the site is, and what page they are currently on. Something like «Whitewater Rafting Vacations | Dry Oar Boating | Home».

Getting Started: Create the Home Page in HTML

If you completed the Software setup activity you should already have an html file ready called index.html. It should look something like this:

Naming files for the web

• Always name the first page of your site index.html
• Most web hosts are case-sensitive which means there is a difference between I ndex.html and index.html
• So. Make your filenames all lowercase to avoid problems with case sensitivity.
• Avoid spaces and other special characters in your filenames (a-z, 0-9, -, and _ are all safe to use)

Inspect the

Change the title

Let’s go ahead and change the title next. The

Note!

We will NOT be adding colors and other styles this week. Our only goal is to get all of the content onto the page that is shown on the wireframe. Our Page will NOT look like the wireframe when we finish this week. Each week will get us closer, but our page will not look exactly like the wireframe for several weeks, so patience will be required 🙂

«Framing» with semantic elements

Building a website is actually a lot like building a house. You start with a blueprint (wireframe) and then you build the foundation and frame for the house. We have already built the foundation. We did that when we added the , , and elements above. The framing takes the rooms outlined on the blueprint and creates a real space to put them. We need to do the same thing for our webpage, except for instead of rooms we are looking at content areas. The way we «frame» in our webpage is by looking carefully at our wireframe to see what «rooms» we have. Then we use some special HTML tags to define them.

Take a moment to review the wireframe again to help remember what we are trying to do. Remember that I mentioned above that we are looking right now at content areas. elements on the page that are related and grouped. The wireframe has colored boxes to help you to see those relationships. We need to add some markup to create those containers in our html. Html has several tags specifically for this purpose. Some have specific semantic meanings and others don’t. We should always try and use the ones with meaning whenever we can. Here is a list of some of the more common of these tags: , , , , , , , , , and . Last week you were asked to review a short article on HTML Semantics . There is a chart there that does a nice job of showing how those elements might be used in a simple site layout. Take a minute to go check it out again. All of these elements behave the same in the browser except for , but they are used to show different sections of the page. Try to use the more specific ones first, using a generic only if none of the others seems to apply to the content you are boxing in.

Add HTML elements to your body to start outlining content areas. The first we need is at the top of the page. Notice that there is a box around the logo and navigation bar. Those elements are related and form the header of the page. Lucky for us if you look in the list of tags above you will see that there is a

The first thing we need inside our new element is a banner image that will stretch all the way across the screen. Let’s add some html to hold that. In this case a simple is probably the right answer.

Tip!

There will be a lot of code examples in this and other lessons. Avoid the temptation to just copy/paste them into your page. Type them out! This might seem like a bother, but you will remember the HTML and CSS we use much better if you do 😉

Below that banner is a bunch of content. It is separate from the banner, but related. Let’s use an HTML element to group the content in that section together. Another