If you would like some guidance in practicing writing your own HTML code, work through creating your own version of the following pages.  You can look at the HTML code of each page by viewing the source code of the page or going to developer tools.  Exactly how will depend upon what browser you are using.  (This is a good time to use Google to search for the answer.)

Basic Page

The most basic page ever!!  This is an example of a simple layout with a (not visible) header and a main body region.  It is just black and white without any CSS page to give it color or control its layout.  If you view the code, you can see the basic HTML tags in action.

Adding Some Style

The next step is to add a style sheet (a CSS page) to your web site.  The style sheet dictates how a page will LOOK whereas the HTML page defines its structure.   Take at look at the better page HTML to see how the style sheet is linked to it.  And then compare how tags in the HTML page tie into style definitions in the CSS page.

Useful Tags

There are a few HTML tags that are used to structure sections of pages and that also are used (with special CSS styling) to create navigation bars.  Lists can be used to display lists (either bulleted or numbered) on a page such as in this example page.  But if you go onto the next section of these exercises, you will see how they can also be styled so that they form a nice navigation bar.

Tables are also introduced in this page, and they used to be used extensively to control the flow of text on a web page or to create a  layout by turning the table’s lines invisible.  However, this practice has been discontinued in favor of using <div>  tags combined with CSS styling to position them on a web page.  And, if you use the Bootstrap library, as in the Hartl tutorial, using specialized tags such as <header>, <footer>, <nav>, and <container> lets you have even more control of a page as well as some default styling (which can be overridden by your own CSS stylesheet).

So, stick to using tables to display tabular data, such as this class’ schedule but feel free to use unordered lists in navigation containers in Bootstrap.

Navigation Bars

This section demonstrates how unordered lists can be turned into horizontal navigation bars without using Bootstrap.

At first, without CSS, the page with a list for a navigation bar will look very strange.  But be patient!!

HTML regions actually are designed to appear as far to the top of a page as they can.  Which means that  a page section (or an image or a list item) will tend to appear beside (generally to the right) of the preceding section, if it will fit.  In order to make list items appear horizontally, we simply take advantage of that fact, and tell the list items that they are allowed to float with the CSS command:

float: left;

To see this in action, take a look at the revised page and the associated CSS sheet (the command we want is in the #navbar li section.