HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. WebPro Series HTML Fundamentals Practical Application of skills

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Introduction In this lesson we are going to employ the techniques you have learned in other lessons to create a “locker” for your homeroom. The “locker” will be a container for all of the notes, contacts and projects you create during this course. The end product will be a website that serves as a portfolio for your work.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. ¶A computer with Notepad or similar text editor. ËThe images on the companion disk. ÌYour imagination. What you will need:

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Planning: organization For the purpose of this demo, we’ll use the following categories: –Websites: contains a list of links to websites and other pages you have designed –Resume: HTML version of your resume –Photo gallery: gallery of images you’ve created / modified

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Planning: formatting Formatting your menu –across the top of the page –down the left side of the page We will use the left-menu option.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Ladies and gentlemen… start your engines. Basic tags for your page: Welcome to Joe’s Locker Joe’s Locker

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Save and Browse Let’s look at this in the web browser. 1Save the text file as locker.html 2Open locker.html in your browser. It should look something like this: (go to next slide.)

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Notice that the text inside of the tags appears in the menubar, not on the page. This is often a point of confusion for beginners. Remember that elements that appear inside the of the document are displayed on the page and elements in the of the document are not.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Now, a quick background check... Let’s add a background image. Add the following parameter to your body tag. Welcome to Joe's Locker Joe's Locker

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Keep in mind... The background parameter followed by a path and filename will put a background image into your page. If the browser window is larger than the image, the browser will tile the background. The background image that we’ve specified, locker_bg.gif, is located on your assets disk. We have not specified a path to the image, so you’ll need to copy this image to the same directory as your web page. If you wanted to put the image in a subdirectory called images, you would need to add the path images/locker_bg.gif to this text.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Save the file and refresh the page in your browser. It should look something like the graphic above. If your browser is sized larger than the image, you will see stacks of lockers. Don’t worry, the background image was designed to do this.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Table Tricks We’re using the locker image to visually divide the display area into two sections. We’ll use the blue locker on the left as the background for our menu, and the white area on the right will frame our content. In order to format the text over the background in the same manner, let’s use a trick with tables.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Table tricks Add the following lines inside the body of your code:

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. The table is a framework for our text to fit into. It consists of one row and two columns. The row will span 100% of the browser window size, but the first column will only be 120 pixels wide. We’ll remove the border after we take a look. 100% 120 pixels

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Type in the first menu link, Websites, between the first set of tags and center the text using the tags. Next move the title Joe’s Locker, along with the formatting tags in between the second set of tags. The new code should look like this: Websites Joe's Locker

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Save the changes and refresh the page in the browser. The table cells line up over the background image. Remove the border by replacing border=1 with border=0 Menu items will go in the first cell and all content will go in the second cell.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Could I have a menu, please? We need to change the font color for Websites, as well as add two new items with the same formatting. We also need to move the menu items down over the blank portion of the image so we can see the words clearly. }

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. First, change the color of Websites to white using the tag and in bold typeface using. Add the words Resume and Photo Gallery with the same formatting and separate these entries with paragraph breaks. Finally, add a line break between Photo and Gallery so that it will appear on two separate lines. Here is the new code: Websites Resume Photo Gallery

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Save your work and refresh the browser view. The new page should look like this:

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Alignment Move the menu items over the blank portion of the image by inserting five line breaks before the menu items. To align the title at the top of the page, add the parameter valign=”top” to the tag for the content cell. See next slide for the code...

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Websites Resume Photo Gallery Joe's Locker Save your work and refresh the browser view. The text should line up nicely.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Free Time Make the following changes: Replace Joe with your name (if you haven’t already) and start an introductory paragraph. Have fun writing your intro; use the included sample code for ideas.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Welcome to Joe's Locker Websites Resume Photo Gallery Your Locker Hi, my name is Joe Smith and I'm a currently working on my MCSE and degree in web design. I have three years of experience in internet development and have worked in the computer industry for the last ten years. I encourage you to take a look at websites that I have created in the Website section. Also, visit the Photo Gallery to see pictures of my award winning petunia garden. If you like my work, be sure to print out a copy of my online Resume.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. The text file will look like this in the browser.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Turn the Page So far we’ve created one page of your site. To make your site dynamic, we need to add three more pages and link them to the homepage. Let’s create three new pages: websites.html, resume.html. and photos.html.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Make links for the new pages on your homepage: Websites Resume Photo Gallery

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. More pages Now, use the homepage that we’ve already created as a template to make the three new pages; websites.html, resume.html and photos.html. The easiest way to accomplish this task is to select all of the text, copy it to the clipboard, paste it into a new notepad document and save it as the new file name.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Make changes to individualize the three documents. Delete the intro paragraph from all of the new pages. Change the titles for each page to Websites, Resume, and Photo Gallery, respectively. On each of the new pages, add a link back to the home page at the top of the list: Home Websites Resume Photo Gallery

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Here’s a trick......for each page, remove the link for that page (you don’t need a link if you’re already there) and change the font color to yellow. This will indicate visually which page you’re on in the site.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. And finally, the moment we’ve been waiting for... Fill each of your new pages with content. Continue the example using other HTML commands to format your pages. Refer to the files on the companion disk to get some ideas for your pages. One of the best ways to learn HTML is to reverse- engineer pages that other designers have created. Go out on the Web and find treatments that you like. Look at the source and figure out what they did, then try to replicate it in your pages.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. A few ideas: Websites –Use an unordered list of hyperlinks with short descriptions. Resume –Try to use the formatting tags that you’ve learned to create an online version of your resume. Photo Gallery –Use tables and inline images to display images that you’ve created.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Summary In this lesson, you have applied your skills to a real project that serves as your portfolio for future lessons. You’ve also learned to pull various media together and organize it into one coherent website. Together, these skills will serve as a foundation that you can build upon through the next lessons.

HTML Fundamentals Archimedes Performance, Inc. Epic Learning, Inc. Thank-you! This program was produced by: Epic Learning, Inc Peachtree Road NE Suite 2250 Atlanta, Ga Archimedes Performance, Inc. 184 Ben Burton Circle Suite 300 Athens, GA 30606