WebPro Series

1
WebPro Series

• HTML Fundamentals
• Practical Application of skills

2
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.

3
What you will need

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

4
Planning organization

• For the purpose of this demo, well 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 youve created /
  modified

5
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.

6
Ladies and gentlemen start your engines.

• Basic tags for your page

• lthtmlgt
• ltheadgt
• lttitlegtWelcome to Joes Lockerlt/titlegt
• lt/headgt
• ltbodygt
• lth1gtJoes Lockerlt/h1gt
• lt/bodygt
• lt/htmlgt

7
Save and Browse

• Lets look at this in the web browser.
• Save the text file as locker.html
• Open locker.html in your browser. It should look
  something like this (go to next slide.)

8
Notice that the text inside of the lttitlegt 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
ltbodygt of the document are displayed on the page
and elements in the ltheadgt of the document are
not.
9
Now, a quick background check...

• Lets add a background image. Add the following
  parameter to your body tag.

• lthtmlgt
• ltheadgt
• lttitlegtWelcome to Joe's Lockerlt/titlegt
• lt/headgt
• ltbody background"locker_bg.gif"gt
• ltcentergtlth1gtJoe's Lockerlt/h1gtlt/centergt
• lt/bodygt
• lt/htmlgt

10
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 weve specified,
  locker_bg.gif, is located on your assets disk.
  We have not specified a path to the image, so
  youll 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.

11
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.
Dont worry, the background image was designed to
do this.
12
Table Tricks

• Were using the locker image to visually divide
  the display area into two sections. Well 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, lets use
  a trick with tables.

13
Table tricks

• Add the following lines inside the body of your
  code

• lttable border1 width"100" cellpadding"5"
  cellspacing"5"gt
• lttrgt
• lttd width"120"gt
• lt/tdgt
• lttdgt
• lt/tdgt
• lt/tablegt

14

• 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.
• Well remove the border after we take a look.

100
120 pixels
15

• Type in the first menu link, Websites, between
  the first set of lttdgt tags and center the text
  using the ltcentergt tags.
• Next move the title Joes Locker, along with
  the formatting tags in between the second set of
  lttdgt tags.
• The new code should look like this

• lttable border1 width"100" cellpadding"5"
  cellspacing"5"gt
• lttrgt
• lttd width"120"gt
• ltcentergtWebsiteslt/centergt
• lt/tdgt
• lttdgt
• ltcentergtlth1gtJoe's Lockerlt/h1gtlt/centergt
• lt/tdgt
• lt/tablegt

16

• Save the changes and refresh the page in the
  browser.
• The table cells line up over the background
  image.
• Remove the border by replacing border1 with
  border0
• Menu items will go in the first cell and all
  content will go in the second cell.

17
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.

18

• First, change the color of Websites to white
  using the ltfontgt tag and in bold typeface using
  ltbgt.
• Add the words Resume and Photo Gallery with the
  same formatting and separate these entries with
  ltpgt paragraph breaks.
• Finally, add a line break ltbrgt between Photo and
  Gallery so that it will appear on two separate
  lines.
• Here is the new code

• lttd width"120"gt
• ltcentergtltfont color"white"gtltbgtWebsiteslt/bgtlt/fontgt
  lt/centergt
• ltpgt
• ltcentergtltfont color"white"gtltbgtResumelt/bgtlt/fontgtlt/
  centergt
• ltpgt
• ltcentergtltfont color"white"gtltbgtPhotoltbrgtGallerylt/b
  gtlt/centergt
• lt/tdgt

19
Save your work and refresh the browser view. The
new page should look like this
20
Alignment

• Move the menu items over the blank portion of the
  image by inserting five line breaks ltbrgt before
  the menu items.
• To align the title at the top of the page, add
  the parameter valigntop to the lttdgt tag for
  the content cell.

See next slide for the code...
21

• lttable border"0" width"100" cellpadding"5"
  cellspacing"5"gt
• lttrgt
• lttd width"120"gt
• ltbrgtltbrgtltbrgtltbrgtltbrgt
• ltcentergtltfont color"white"gtltbgtWebsitesltbgt
  lt/fontgtlt/centergt
• ltpgt
• ltcentergtltfont color"white"gtltbgtResumelt/bgtlt/fontgtlt
  /centergt
• ltpgt
• ltcentergtltfont color"white"gtltbgtPhoto
  ltbrgtGallerylt/bgtlt/centergt
• lt/tdgt
• lttd valign"top"gt
• ltcentergtlth1gtJoe's Lockerlt/h1gtlt/centergt
• lt/tdgt
• lt/tablegt

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

• Make the following changes
• Replace Joe with your name (if you havent
  already) and start an introductory paragraph.
• Have fun writing your intro use the included
  sample code for ideas.

23

• lthtmlgt
• ltheadgt
• lttitlegtWelcome to Joe's Lockerlt/titlegt
• lt/headgt
• ltbody background"locker_bg.gif"gt
• lttable border"0" width"100" cellpadding"5"
  cellspacing"5"gt
• lttrgt
• lttd width"120"gt
• ltbrgtltbrgtltbrgtltbrgtltbrgt
• ltcentergtltfont color"white"gtltbgtWebsitesltbgt
  lt/fontgtlt/centergt
• ltpgt
• ltcentergtltfont color"white"gtltbgtResumelt/bgtlt/fontgtlt
  /centergt
• ltpgt
• ltcentergtltfont color"white"gtltbgtPhoto
  ltbrgtGallerylt/bgtlt/centergt
• lt/tdgt
• lttd valign"top"gt
• ltcentergtlth1gtYour Lockerlt/h1gtlt/centergt

24
The text file will look like this in the browser.
25
Turn the Page

• So far weve created one page of your site.
• To make your site dynamic, we need to add three
  more pages and link them to the homepage.
• Lets create three new pages websites.html,
  resume.html. and photos.html.

26

• Make links for the new pages on your homepage

• lta hrefwebsites.htmlgt
• ltcentergtltfont color"white"gtltbgtWebsitesltbgtlt/fontgtlt
  /centergt
• lt/agt
• ltpgt
• lta hrefresume.htmlgt
• ltcentergtltfont color"white"gtltbgtResumelt/bgtlt/fontgtlt/
  centergt
• lt/agt
• ltpgt
• lta hrefphotos.htmlgt
• ltcentergtltfont color"white"gtltbgtPhoto
  ltbrgtGallerylt/bgtlt/centergt
• lt/agt

27
More pages

• Now, use the homepage that weve 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.

28

• 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

• lta hreflocker.htmlgt
• ltcentergtltfont color"white"gtltbgtHomeltbgtlt/fontgtlt/cen
  tergt
• lt/agt
• lta hrefwebsites.htmlgt
• ltcentergtltfont color"white"gtltbgtWebsitesltbgtlt/fontgtlt
  /centergt
• lt/agt
• ltpgt
• lta hrefresume.htmlgt
• ltcentergtltfont color"white"gtltbgtResumelt/bgtlt/fontgtlt/
  centergt
• lt/agt
• ltpgt
• lta hrefphotos.htmlgt
• ltcentergtltfont color"white"gtltbgtPhoto
  ltbrgtGallerylt/bgtlt/centergt
• lt/agt

29
Heres a trick ...

• ...for each page, remove the link for that page
  (you dont need a link if youre already there)
  and change the font color to yellow. This will
  indicate visually which page youre on in the
  site.

30
And finally, the moment weve 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.

31
A few ideas

• Websites
• Use an unordered list ltulgt of hyperlinks with
  short descriptions.
• Resume
• Try to use the formatting tags that youve
  learned to create an online version of your
  resume.
• Photo Gallery
• Use tables and inline images ltimg
  srcfilename.jpggt to display images that youve
  created.

32
Summary

• In this lesson, you have applied your skills to
  a real project that serves as your portfolio for
  future lessons. Youve 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.

33
Thank-you!

• This program was produced by
• Epic Learning, Inc.
• 3340 Peachtree Road NESuite 2250Atlanta, Ga.
  30326
• Archimedes Performance, Inc.
• 184 Ben Burton Circle
• Suite 300
• Athens, GA 30606