Assignment 9 - More Tables
Practice creating your own graphic design, plus review a few of the tags that have been covered so far.
Create a graphic design for your webpage, using colored table cells. You can copy the code straight from these examples (remember to erase the bold numbers), or use this table, which uses colspan and rowspan. Be sure to look at the Source Code by putting your mouse on the pop-up window, right-clicking the mouse and choosing the View Source option. You can also look at the source code by clicking here.
Also look at the Table Tutorials from Cyberbits. This site is great for giving detailed descriptions, complete codes and great examples for everything from basic <table> tags to the finer refinements such as align and valign.
Another great source of examples and experimenting opportunities is the W3Schools Table tutorials. You can actually change the code on their website, click on the Edit the text and click me button, and watch the table change according to your added codes.
Your new page should have a graphic heading of some sort, and a left-side navigation panel. In that panel, there should be one link to one of the webpages that you've already uploaded to the Angelfire site. Don't worry if the webpages are completely unrelated. This is just practice in connecting your pages.
Upload this page too, which means that the files will be on the same computer system (www.angelfire.com), and in the same folders (for example, from Lesson 7: bug/csis6). Once the pages are in the same folder on the same computer system, you can use the simple relative link:
<a href="customers.html">Read what our customers say</a>
A second link in your navigation panel should link to an outside page (outside your Angelfire website, to anything else on the Internet). For this link, you'll need to use the longer absolute link. Use the target="_blank" attribute, so that it will open up another browser window. For example:
<a href="http://www.comic-news.com" target="_blank">Our Philosophy</a>
Call your new page index.html.
To upload this page, log into your Angelfire.com account. Remember, for your member name, you'll use the 2 folder names, separated by the forward slash. For example:
bug/csis6
Your own account, of course, will be different. The password is the word you entered when you created your account.
To start editing your site, click on the web shell link on the top right corner of the screen.
Scroll down the page until you find the FILE UPLOAD section.
When you upload your index.html page, you'll be replacing the index.html page automatically put up by Angelfire. This means that you must check the box to overwrite that file. If you forget to check the box, your new index.html page will not be loaded.
You should also edit one of the pages that you've already loaded. Highlight one of your HTML documents in the box of listed files, and then click on the Edit button. The source code will appear in the box like the illustration below.
Within this box, you can add code to make a link back to your index page that you just loaded. Make sure everything is perfect (you can use the Preview button to check) and then, click Save.
You should now have two pages on your site that link back and forth to each other.
Hint: Because this page is called index.html, you don't have to include the file name in the URL. If the browser is given a URL that does not include a specific file name, such as: http://www.angelfire.com/bug/csis6/
then, it will automatically look for a file called index.html. You can click on the above link to see an example. Notice that the index page links to a second page (customers.html), which in turn links back to the index page.
|
