A Basic HTML and CSS Tutorial... Just enough to get you started

Lesson 2; Page structure and appearance

It's time to figure out how you'd like your page to look. While I'm not going to get into telling you what it should look like (there's lots of resources and other pages to look at), I will say that it will be worth your time to plan it out, maybe do some sketches even. So much for the paperless office, huh?

With that in mind, you have some options for organizing your page and adding some color and life to it. Straight HTML will create a page and allow you to do a lot of things. Cascading Style Sheets (CSS) will, too. So, here are some more options; Begin your page structure using CSS from the beginning, build it with only HTML, or build it with HTML and switch to CSS later on.

Here's what I'll recommend. Begin by building a basic HTML page, then you can modify it or even replace it entirely by a page with significant CSS formatting, possibly done through an external style sheet. However, if you are still going through this tutorial, chances are you're not familiar enough with HTML to just jump to the next level. Just remember that HTML is still going to be your foundation for your pages, so spending some time to reasonably understand it will benefit you later.

Let's continue with the page we created in Lesson 1, and we'll add a background color and a logo bar at the top. Open the previous file again in your text editor. Here's what it looked like:

HTML page with text only
            
            <html>

                <head>

                    <title>

                        Remove this and name the page whatever you like

                    </title>


                </head>

                <body>

                    This is where you'll be putting your page content

                </body>

            </html>

			

Add a background color to your page

Let's add a background color to liven things up a bit. To do this, we need to add another switch in the proper location within the above code. So, let's examine that code for a second.

The HTML element, consisting of the opening <html> tag and the closing </html> tag, could be likened to a big yellow envelope that contains everything on the page. As we narrow things down, categorizing them to effect, we create more envelopes within the big HTML envelope.

The HEAD element (remember that an element is created by an opening and closing tag pair) typically contains introductory information for the browser. I won't get too far into that right now, but the only part of that section that a site viewer would see is the TITLE, which gets displayed in the top of the browser window and on the tab in tabbed browsers. In the above code example, the title is too long to display fully on a tab, so I would recommend changing that to something shorter and more descriptive.

The only tag pair remaining is the BODY element. Once again, this is another "envelope" within that obnoxiously big HTML envelope. Code and text placed within this area is what will create the viewable portion of your page. When you want change the appearance or other aspects of a tag, we enter an attribute within the brackets of the first tag in the tag pair. So, it is here we will begin with adding a simple BGCOLOR attribute within the BODY tag to change the background color, the new code looking like this:

Page background color changed to light blue
                <html>

                    <head>

                        <title>

                            Remove this and name the page whatever you like

                        </title>


                    </head>

                    <body bgcolor="FFF5E8">

                        This is where you'll be putting your page content

                    </body>

                </html>

			
See what the page now looks like

Adding a logo bar at the top

Okay, let's add a simple table to the top to create a logo bar. Again, remember that we are working with the viewable portion of our Web page, therefore any code or text we place will be either in the BODY tag or between the opening and closing BODY tags.

Let me clarify something before we get much deeper. I said before that switches were turned on and then needed to be turned off. Remember that I also said that what went into the opening tag was a description of what the switch, or tag, actually was supposed to control. As such, attributes we place within the opening tag do not need to have a corresponding closing attribute. The closing tag itself does that. So, above we added the BGCOLOR attribute to the BODY tag. The closing BODY tag does eveything we need it to do, closing the attribute along with the tag.

We'll use a table, although some of this can be done with CSS, but I'll add some sections on that later. Think of a table in this way. It has columns that run up and down (vertically) and rows that run horizontally. Any time a column and a row intersect, the box that is created is called a cell. A table can consist of numerous cells, their position dictated by the number of columns and rows, or it can contain just one cell, described by naming just one column and one row.

To define the start of a row, we use the <tr> tag, and to define the start of a column, we use the <td> tag.

For our logo bar, we'll create a table that has just one cell. To do this, we will use the TABLE tag, placing it within the BODY tags. Because we want it at the top, we'll also make sure we place this code before anything else within the BODY tags. Additionally, we'll describe some width and height attributes so that the table won't take over our entire page. Here's what the code would look like with the added table:

Logo bar with text only

                <html>

                    <head>

                        <title>

                            Remove this and name the page whatever you like

                        </title>

                    </head>

                    <body bgcolor="BFE2F9">

                        <table height="100" width="100%">
		
                            <tr><td>

                                Here's our logo bar!
		                    
                            </td></tr>

                        </table>

                        This is where you'll be putting your page content

                    </body>

                </html>

			
Here's what the added table looks like so far

Now, we might want to do something to set the logo bar off from the rest of the page. One of many things we can do using attributes, let's stick with what we already know and use another background color. By adding the BGCOLOR attribute to the opening TABLE tag, we will change the color to something different than the main page background. Without specifying, the default for the table is transparent, thereby showing the existing background color (or image... we'll get to that later).

So, let's change the table's background color to a gray. Here's the code added to our previous HTML.

Changed logo bar color and its text size

                <html>

                    <head>

                        <title>

                            Remove this and name the page whatever you like

                        </title>

                    </head>

                    <body bgcolor="BFE2F9">

                        <table bgcolor="808080" height="100" width="100%">

                            <tr><td>
                                
                                Here's our logo bar!
                            
                            </td></tr>

                        </table>

                            This is where you'll be putting your page content

                        </body>

                    </html>

				
Here's what it looks like with the contrasting table color

Ultimately, we could use tables to structure and position a variety of page components. If you choose to do this, you can use additional attributes to size and position those tables, then place your content within each table. You can also use CSS, however, I will discuss some basic CSS page structure in a later lesson.

Your page is starting to actually look like something, isn't it? Next up, take a look at the following lesson to learn how to align text and change their sizes.

Next lesson; Changing text position and alignment