Part A:
Begin by opening one of your web pages, such as your Home page, from your course folder into either BlueGriffon or Notepad++ . The page you open should be the same one containing the text in your website document.
Using the ordered and/or unordered list tags, create your lists in your HTML page. You can either type the code for the lists by hand in Notepad++, or use BlueGriffon’s design mode to paste the bullets in and turn them into a list.
Next, open your CSS file into Notepad++. When it opens, add a style for the type of list(s) you created in your web page. Write the style so that it is the default for all ordered/unordered lists. Give the text a specific font, color, decoration, line size, etc. How many attributes you use is not important.
NOTE: If you had created more than one type of list in your document (e.g. one unordered list and one ordered list), and you decided to recreate more than one list in your web page, define a different style for each one so you can see the effects of each, and the contrast between them.
With your list(s) created, scroll to the top of your HTML page to create a new list. This list will be the navigation for your website the collection of links that will take users to each of your pages.
Either in Notepad++ or BlueGriffon, make an unordered list of the names of your pages. The names of each page should not be the file name for each page, only the basic function or title of each page (e.g. “About Us”, “Contact Us”, etc.).
The next step will be to link to each of your pages. For each item in your navigation list, use the <a> tag with the href property to link each word or phrase to the HTML page it applies to. In your href link, be sure to include the “.html” file extension.
You now have a rudimentary navigation to all of your pages that uses a list of linked words and phrases. One last link to create is to a location within the page you are editing.
In a space in your HTML file just after the end of all your content, add a few blank lines. Then, type “top of page”. This text will be used as a sort of rewind link to take users back to the top of this page without them having to scroll with their mouse or scroll bar buttons.
In your web page file, find the top-most heading. In order for internal links to function, they need an identification name as a target. When using external links, the href property is what is used as the target for the link. Internal links are different in that they use a different property as the target. In older versions of HTML, the “name” property was used for internal links. In HTML5, the property has changed to “id”.
In the top heading in your HTML file, add a space after the heading tag and type id=”top”. This will tell the browser that your top heading has the name/ID of “top”.
NOTE: If you are editing using BlueGriffon, you must switch to Source view to place the code in the header tag.
Now scroll back down to your “top of page” text. In BlueGriffon, select “top of page” and click Insert > Link. The Links dialog will appear; in the Target field, type “#top”. The “#” that you typed signals the browser that it needs to look for an element with that name. The one and only element, of course, is the header you added the ID to at the top of your file.
Leave the rest of the fields and options blank, and click OK.
NOTE: If you are writing the code by hand in Notepad++, place your cursor before “top” and type <a id=”top”>. Then, close the <a> tag after “page”. Here, the <a> tag tells the browser to target your heading at the top of the page.
Save your work and test your page in a browser of your choice. Your navigation links should load the appropriate page targets. Because our other pages do not yet have the navigation links, use the Back button in the browser to return to the page with the navigation. Your internal link, when clicked, should scroll the browser window to the top of the page.
Now that you have built a rudimentary navigation on one of your pages, you will need to replicate it to all of your other pages. The next portion of this lab will have you apply <div> tags to your content, including the navigation.
Part B:
Up to this point, all of your content have been contained in HTML tags that run within the <body> tag. But, when it comes to formatting a web page, all of these tags from <h> tags to <p> tags to list tags occupy their own space and function differently. What if you wanted to wrap several sections of content that use different tags into a sort of container that can move and position everything within it, wherever it is needed? We already know that using some tags outside their scope of use to achieve the formatting we need is considered bad form. The only solution, then, is to use a container tag like <div> to achieve the desired results.
In the following steps, you will learn how to apply the <div> tag to your HTML files, create a CSS style for your “divs”, and then replicate them across your pages.
Make sure that your HTML file with navigation is loaded in BlueGriffon or Notepad++. <div> tags are literal containers for the content that exists within them. Scroll to the top of your HTML file, and place your cursor just inside the opening <body> tag.
Before your first content tag, create a new blank line in the code and type “<div>”. Then, place your cursor before the closing <body> tag of the HTML. Type “</div>” to close the container.
Save your file and load it in a browser. You probably do not see anything different with how your page is displayed. The best way to visualize your content as the page is loaded, is to imagine a box outline around your content from top to bottom. The <div> tag has invisibly (for now) walled off all of the page’s content into a box whose properties you will be modifying shortly.
Make a new blank line before the code for your navigation list at the top, and type another opening <div> tag. Close this new div after the closing tag for your navigation list code.
You now have two divs: one encompasses the content of the page; the second encompasses the navigation you set up.
Open your other HTML pages and place opening and closing <div> tags around the main page content. Then, return to your file with the navigation list. Select the code for the navigation list, including the <div> it is in, and copy it.
On all of your other HTML files, make a few blank lines after the opening <body> tag, and paste the copied code.
All of your pages should now have navigation on them. In order to set the navigation further apart from your other content, you need to style the navigation to appear as a separate object or entity on the page. In Notepad++, open your CSS file if it isn’t already loaded.
From any location in the CSS file, make a couple blank lines and type the following:
.navigation {
background:orange;
border:1px;
border-radius:3px;
height:auto;
padding:10px;
position:relative;
width:100%;
}
Notice that this style begins with a period; this signifies that it can be used as a style class by any tag that calls it. Save your CSS file.
In the navigation <div> in each of your HTML pages, click in the opening <div> tag, press the spacebar, and type the following: class=”navigation”. The “class” property signals the navigation <div> to look for the “navigation” style in your CSS file. Save your HTML files once you have added this code, and test the pages in a browser.
You should see a rounded orange box with a thin border, containing your navigation links. As you scroll down, the navigation should remain visible even though the code is technically at the top of the HTML file.
Now is your chance to experiment. With your website style choices in mind, modify the navigation style by experimenting with hexadecimal colors, border widths and types, positioning, and more. Change the style in your CSS file as needed.
When you are satisfied with the style of your navigation <div>, write a new style in your CSS for the content <div>. If you have not done so already, add <div> tags to the content section(s) in each of your pages, and then call the new content style you wrote with the class property.
Save your files, and test them in a browser.