Project 4 - PowerPoint PPT Presentation

1 / 57
About This Presentation
Title:

Project 4

Description:

... click line 11, type tr as the tag, and then press the ENTER key ... immediately to the right of the /table tag on line 15. Press the ENTER key three times ... – PowerPoint PPT presentation

Number of Views:13
Avg rating:3.0/5.0
Slides: 58
Provided by: steve1704
Category:
Tags: project | tagon

less

Transcript and Presenter's Notes

Title: Project 4


1
Project 4
  • Creating Tables in a Web Site

2
Project Objectives
  • Define table elements
  • Describe the steps used to plan, design, and code
    a table
  • Create a borderless table to organize images
  • Create a vertical menu bar with text links

3
Project Objectives
  • Create a borderless table to organize text
  • Create a horizontal menu bar with text links
  • Create a table with borders
  • Change the horizontal alignment of text

4
Project Objectives
  • Add background color to rows and cells
  • Alter the spacing between and within cells using
    the cellspacing and cellpadding attributes
  • Insert a caption below a table
  • Use the rowspan and colspan attributes

5
Starting Notepad
  • Click the Start button on the taskbar
  • Point to All Programs on the Start menu, point to
    Accessories on the All Programs submenu, and then
    click Notepad on the Accessories submenu
  • If the Notepad window is not maximized, click the
    Maximize button on the Notepad title bar to
    maximize it
  • Click Format on the menu bar and, if necessary,
    click Word Wrap to turn Word Wrap on

6
Entering the HTML Tags to Define the Web Page
Structure
7
Creating a Borderless Table to Position Images
  • If necessary, click line 10
  • Type lttable border"0" cols"2 width"90"gt and
    then press the ENTER key

8
Creating a Borderless Table to Position Images
9
Inserting Images in a Table
  • If necessary, click line 11, type lttrgt as the
    tag, and then press the ENTER key
  • Type lttdgtltimg srcbellvideologo.gif width596
    height93 altBell Video Logo /gtlt/tdgt and
    then press the ENTER key
  • Type lttdgtltimg src"csexcellence.gif" width"144
    height54 altExcellence Award /gtlt/tdgt and
    then press the ENTER key
  • Type lt/trgt and then press the ENTER key
  • Type lt/tablegt and then press the ENTER key

10
Inserting Images in a Table
11
Creating a Vertical Menu Bar with Text Links
  • If necessary, click line 17
  • Enter the HTML code shown below
  • Press the ENTER key twice

12
Creating a Vertical Menu Bar with Text Links
13
Adding Text to a Table Cell
  • If necessary, click line 27
  • Enter the HTML code as shown in Table 4-5 on page
    HTM 151 and then press the ENTER key

14
Adding Text to a Table Cell
15
Saving and Printing the HTML File
  • With a USB drive plugged into your computer,
    click File on the menu bar and then click Save
    As. Type bellvideohome.htm in the File name text
    box
  • If necessary, click USB (G) in the Save in list.
    Click the Project04 folder and then click the
    ProjectFiles folder in the list of available
    folders. Click the Save button in the Save As
    dialog box
  • Click File on the menu bar and then click Print
    on the File menu

16
Viewing and Printing a Web Page
17
Copying and Pasting HTML Code to a New File
  • Click the Notepad button on the taskbar
  • Click immediately to the left of the lt in the
    lt!DOCTYPE html tag on line 1. Drag through the
    first lt/tablegt tag on line 15 to highlight lines
    1 through 15
  • Press CTRLC to copy the selected lines to the
    Clipboard
  • Click File on the menu bar and then click New
  • Press CTRLV to paste the contents from the
    Clipboard into a new file

18
Copying and Pasting HTML Code to a New File
19
Changing the Web Page Title
  • Highlight the words, Great Service, Great
    Selection, between the lttitlegt and lt/ title gt
    tags on line 7. Type - New Releases as the text
  • Click immediately to the right of the lt/tablegt
    tag on line 15. Press the ENTER key three times
  • Type lt/bodygt and then press the ENTER key
  • Type lt/htmlgt as the end tag

20
Changing the Web Page Title
21
Deleting an Image
  • Highlight line 13, which contains the code to
    insert the image, csexcellence.gif
  • Press the DELETE key twice

22
Deleting an Image
23
Creating a Horizontal Menu Bar with Text Links
  • If necessary, click line 16
  • Enter the HTML code as shown in Table 4-6 on page
    HTM 158
  • Press the ENTER key twice

24
Creating a Horizontal Menu Bar with Text Links
25
Creating a Table with Borders and Inserting Text
  • If necessary, click line 28
  • Enter the HTML code as shown in Table 4-7 on page
    HTM 162
  • Press the ENTER key twice

26
Creating a Table with Borders and Inserting Text
27
Creating Additional Cells and Inserting Text
  • If necessary, click line 52
  • Enter the HTML code as shown in Table 4-8 on page
    HTM 163

28
Creating Additional Cells and Inserting Text
29
Saving and Printing an HTML File
  • With a USB drive plugged into the computer, click
    File on the menu bar and then click Save As. Type
    newreleases.htm in the File name text box
  • If necessary, click USB (G) in the Save in list.
    Click the Project04 folder and then click the
    ProjectFiles folder in the list of available
    folders. Click the Save button in the Save As
    dialog box
  • Click File on the menu bar and then click Print
    on the file menu

30
Viewing and Printing the Web Page Using the
Browser
31
Testing Links in a Web Page
  • Click the Home link in the horizontal menu bar on
    the New Releases Web page
  • Click the New Releases link in the vertical menu
    bar on the home page to return to the New
    Releases Web page
  • Click the Type link in the horizontal menu bar on
    the New Releases Web page
  • Click the Actor link in the horizontal menu bar
    on the Type Web page

32
Testing Links in a Web Page
33
Opening an HTML File
  • Click the Notepad button on the taskbar
  • With the USB drive plugged into your computer,
    click File on the menu bar and then click Open on
    the File menu
  • If necessary, click the Look in box arrow and
    then click USB (G). Click the Project04 folder
    and then click the Project Files folder in the
    list of available folders
  • If necessary, click the Files of type box arrow
    and then click All Files
  • Click actor.htm in the list of files and then
    click the Open button in the Open dialog box

34
Opening an HTML File
35
Adding Cellspacing and Cellpadding to a Table
  • Click immediately to the right of the 5 in
    border5 in line 28 and then press the SPACEBAR
  • Type cellpadding2 cellpadding5 as the
    attributes

36
Adding Cellspacing and Cellpadding to a Table
37
Adding a Table Caption
  • Highlight the text lt!--Insert caption here --gt on
    line 69
  • Type ltcaption alignbottomgtltemgtListing of
    movies by actorlt/emgtlt/captiongt as the tag

38
Adding a Table Caption
39
Saving and Printing the HTML File and Viewing and
Printing the Web Page
  • With the USB drive plugged into your computer,
    click File on the menu bar and then click Save
  • Click File on the menu bar and then click Print
  • Click the Internet Explorer button on the taskbar
  • Click the Refresh button on the Standard Buttons
    toolbar
  • Click the Print button on the Standard Buttons
    toolbar

40
Saving and Printing the HTML File and Viewing and
Printing the Web Page
41
Opening an HTML File
  • Click the Notepad button on the taskbar
  • With the USB drive plugged into your computer,
    click File on the menu bar and then click Open on
    the File menu
  • If necessary, click the Look in box arrow and
    then click USB (G). Click the Project04 folder
    and then click the ProjectFiles folder in the
    list of available folders
  • If necessary, click the Files of type box arrow,
    click All Files, and then double-click type.htm
    in the list of files

42
Creating the First Heading That Spans Columns
  • Click line 31 and type lttr bgcolor"ffffff"gt
  • Highlight lt!-- Insert first Title - Actor(s)
    colspan here --gt text on line 33, then press the
    DELETE key
  • Enter the code as shown in Table 4-9 on page HTM
    175

43
Creating the First Heading That Spans Columns
44
Creating the Second Heading That Spans Columns
  • Highlight the lt!--Insert first Title - Actor(s)
    colspan here --gt text on line 51
  • Type ltth colspan"2" bgcolor"gainsboro"gt and
    then press the ENTER key
  • Type ltfont color"blue" size"1"gtTitle -
    Actor(s)lt/fontgt and then press the ENTER key
  • Type lt/thgt and then press the ENTER key
  • Type lt/trgt and then press the ENTER key

45
Creating the Second Heading That Spans Columns
46
Creating the Headings That Span Rows
  • Highlight the lt!--Insert Drama rowspan here --gt
    text on line 32 and then press the DELETE key
  • Type ltth rowspan"3" width"20" bgcolor"black"gt
    and then press the ENTER key
  • Type ltfont color"ffffff" size"1"gtDramalt/fontgt
    and then press the ENTER key
  • Type lt/thgt as the tag

47
Creating the Headings That Span Rows
  • Highlight the lt!--Insert Comedy rowspan here --gt
    text on line 36 and then press the DELETE key
  • Type ltth rowspan"3" width"20" bgcolor"black"gt
    and then press the ENTER key
  • Type ltfont color"ffffff" size"1"gtComedylt/fontgt
    and then press the ENTER key
  • Type lt/thgt as the tag

48
Creating the Headings That Span Rows
49
Spanning the Main Heading across All Columns
  • Highlight the lt!Insert Movies by Type colspan
    here --gt text on line 29. Type lttrgt and then
    press the ENTER key
  • Type ltth colspan"3" bgcolor"blue"gt and then
    press the ENTER key
  • Type ltfont colorwhite face"chaucer
    size"2"gtMovies by Typelt/fontgt and then press
    the ENTER key
  • Type lt/thgt and then press the ENTER key
  • Type lt/trgt as the end table row tag

50
Spanning the Main Heading across All Columns
51
Saving and Printing the HTML File and Viewing and
Printing the Web Page
  • With the HTML Data Files in the USB drive, click
    File on the menu bar and then click Save
  • Click File on the menu bar and then click Print
  • Click the Internet Explorer button on the taskbar
  • Click the Refresh button on the Standard Buttons
    toolbar
  • Click the Print button on the Standard Buttons
    toolbar

52
Saving and Printing the HTML File and Viewing and
Printing the Web Page
53
Quitting Notepad and a Browser
  • Click the Close button on the browser title bar
  • Click the Close button on the Notepad window
    title bar

54
Project Summary
  • Define table elements
  • Describe the steps used to plan, design, and code
    a table
  • Create a borderless table to organize images
  • Create a vertical menu bar with text links

55
Project Summary
  • Create a borderless table to organize text
  • Create a horizontal menu bar with text links
  • Create a table with borders
  • Change the horizontal alignment of text

56
Project Summary
  • Add background color to rows and cells
  • Alter the spacing between and within cells using
    the cellspacing and cellpadding attributes
  • Insert a caption below a table
  • Use the rowspan and colspan attributes

57
Project 4 Complete
  • Creating Tables in a Web Site
Write a Comment
User Comments (0)
About PowerShow.com