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

HTML FundamentalsArchimedes Performance, Inc.

Epic Learning, Inc.

WebPro SeriesWebPro Series

•HTML Fundamentals•Practical Application of skills


Epic Learning, Inc.

IntroductionIntroduction

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.


Epic Learning, Inc.

A computer with Notepad or similar text editor. The images on the companion disk. Your imagination.

What you will need:What you will need:


Epic Learning, Inc.

Planning: organizationPlanning: 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


Epic Learning, Inc.

Planning: formattingPlanning: formatting

• Formatting your menu– across the top of the page – down the left side of the page

• We will use the left-menu option.


Epic Learning, Inc.

Ladies and gentlemen…Ladies and gentlemen…start your engines.start your engines.

Basic tags for your page:

<html><head> <title>Welcome to Joe’s Locker</title></head><body> <h1>Joe’s Locker</h1></body></html>


Epic Learning, Inc.

Save and BrowseSave and Browse

Let’s look at this in the web browser.

1 Save the text file as locker.html2 Open locker.html in your browser. It should

look something like this: (go to next slide.)


Epic Learning, Inc.

Notice that the text inside of the <title> 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 <body> of the document are displayed on the page and elements in the <head> of the document are not.


Epic Learning, Inc.

Now, a quick background Now, a quick background check...check...

Let’s add a background image. Add the following parameter to your body tag.

<html><head> <title>Welcome to Joe's Locker</title></head><body background="locker_bg.gif"> <center><h1>Joe's Locker</h1></center></body></html>


Epic Learning, Inc.

Keep in mind...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.


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.


Epic Learning, Inc.

Table TricksTable 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.


Epic Learning, Inc.

Table tricksTable tricks

Add the following lines inside the body of your code:

<table border=1 width="100%" cellpadding="5" cellspacing="5"> <tr> <td width="120">

</td> <td>

</td> </table>


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


Epic Learning, Inc.

• Type in the first menu link, Websites, between the first set of <td> tags and center the text using the <center> tags. • Next move the title Joe’s Locker, along with the formatting tags in between the second set of <td> tags. The new code should look like this:

<table border=1 width="100%" cellpadding="5" cellspacing="5"> <tr> <td width="120"> <center>Websites</center> </td> <td> <center><h1>Joe's Locker</h1></center> </td> </table>


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.


Epic Learning, Inc.

Could I have a menu, Could I have a menu, please?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.

}


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:

<td width="120"><center>Websites</center>

<center>Resume</center>

<center>Photo Gallery</center></td>


Epic Learning, Inc.

Save your work and refresh the browser view. The newpage should look like this:


Epic Learning, Inc.

AlignmentAlignment

• 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 <td> tag for the content cell.

See next slide for the code...


Epic Learning, Inc.

<table border="0" width="100%" cellpadding="5" cellspacing="5"> <tr> <td width="120">

 <center>Websites</center>

<center>Resume</center><center>Photo

 Gallery</center> </td> <td valign="top"> <center><h1>Joe's Locker</h1></center> </td> </table>

Save your work and refresh the browser view. The text should line up nicely.


Epic Learning, Inc.

Free TimeFree 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.


Epic Learning, Inc.

<html><head> <title>Welcome to Joe's Locker</title></head><body background="locker_bg.gif">

<table border="0" width="100%" cellpadding="5" cellspacing="5"> <tr> <td width="120">

 <center>Websites</center>

<center>Resume</center><center>Photo Gallery</center>

</td>

<td valign="top"> <center><h1>Your Locker</h1></center>

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.

</td> </table>

</body></html>


Epic Learning, Inc.

The text file will look like this in the browser.


Epic Learning, Inc.

Turn the PageTurn 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.


Epic Learning, Inc.

•Make links for the new pages on your homepage:

•<a href=”websites.html”>•<center>Websites</center>•</a>••<a href=”resume.html”>•<center>Resume</center>•</a>••<a href=”photos.html”>•<center>Photo Gallery</center>•</a>


Epic Learning, Inc.

More pagesMore 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.


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:

<a href=”locker.html”><center>Home</center></a><a href=”websites.html”><center>Websites</center></a>

<a href=”resume.html”>

<center>Resume</center></a>

<a href=”photos.html”>

<center>Photo Gallery</center></a>


Epic Learning, Inc.

Here’s a trick ...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.


Epic Learning, Inc.

And finally, the moment we’ve And finally, the moment we’ve been waiting for...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.


Epic Learning, Inc.

A few ideas:A few ideas:

• Websites– Use an unordered list <ul> 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 <img

src=”filename.jpg”> to display images that you’ve created.


Epic Learning, Inc.

SummarySummary

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.


Epic Learning, Inc.

Thank-you!Thank-you!

This program was produced by:Epic Learning, Inc.

3340 Peachtree Road NESuite 2250

Atlanta, Ga. 30326

Archimedes Performance, Inc.184 Ben Burton Circle

Suite 300Athens, GA 30606

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

Documents

epic learning

background image

html version

modified slide

joes locker joes locker

web page

background parameter

web browser