Project 1

1
Project 1

• Creating and Editinga Web Page

2
Objectives

• Identify elements of a Web Page
• Start Notepad
• Describe the Notepad window
• Enter the , , , and
  tags
• Enter a paragraph of text, a bulleted list, and
  HTML tags
• Save an HTML file

3
Objectives

• Change the background color of a Web page
• Center a heading
• Start your browser
• View the HTML file in your browser
• Print an HTML file from Notepad
• Print a Web page from your browser

4
Objectives

• Use a definition list
• Quit Notepad
• Quit your browser

5
Web Page Elements

• Title
• Bookmarks
• Body
• Background
• Normal text
• Paragraph
• Bulleted list

• Headings
• Images
• Horizontal Rules
• Image map
• Hotspot
• Animated images
• Hyperlinks

6
Web Page Elements
7
Starting Notepad
8
The Notepad Window
9
The Notepad Window
10
Wrapping Text in Notepad

• The text you type will scroll continuously to the
  right unless the WordWrap feature is turned on
• Select Word Wrap in the Edit menu

11
Entering HTML Tags and Text

• Four tags define the overall structure of
  standard Web pages
• and
• Indicates file is an HTML document
• and
• Introduction to the rest of the file
• Indicates the area where the title will be placed
• and
• Indicates the title that will display in the
  title bar
• and
• Indicates the boundaries of the Web page

12
HTML Tags and Functions
13
Entering Initial HTML Tags
It is good form to be consistent when you type
tags, adhering to a standard practice
14
Entering Initial HTML Tags
If you notice an error in the text, use the
BACKSPACE key to erase all the characters back to
and including the one that is incorrect
15
Headings

• Used to separate text and introduce new topics
• Vary in size, from through
• Use the same sized heading for the same level of
  topic

16
(No Transcript)
17
Entering Headings
Since the Chiaravalle Pizza heading is the first
line after the BODY tag, it will be the first
thing displayed on the Web page
18
Paragraphs

• Most text on Web pages is in paragraph format
• The tag has an optional ending tag
• When a browser finds a tag, it starts a new
  line and adds a paragraph break
• Try not to type large sections of text without
  having paragraph breaks

19
Entering Paragraphs
The
(break) tag breaks a line of text and
starts a new line, but does not add
vertical spacing like a tag
20
Creating a List

• Lists structure your text in outline format
• Unordered (bulleted) lists
• and
  marks the beginning and end of
  unordered lists
• Ordered (numbered) lists
• and
  marks the beginning and end of
  ordered lists
• The
• and
tags define list items
• The TYPE attribute defines the default bullet or
  number type

21
Unordered Lists
Unordered Lists

• Firs
  t item type disc
• Second item type
  disc

• First
  item type square
• Second item type
  square
• First
  item type circle
• Second item type
  circle

22
Ordered Lists
Ordered Lists


1. First item type 1
2. Second item
   type 1


1. First item type A
2. Second item
   type A


1. First item type a
2. Second item
   type a


1. First item type I
2. Second item
   type I


1. First item type i
2. Second item
   type i

23
Creating a Bulleted List
24
Saving the HTML File
• You must save the file before you can view it in
  your browser
• HTML files must end with an extension of .htm or
  .html
• .html extensions only work on Web servers running
  an operating system that supports long filenames

25
Saving the HTML File
26
Saving the HTML File
27
Saving the HTML File
28
Saving the HTML File
29
Saving the HTML File
30
Saving the HTML File
31
Using a Browser to View a Web Page
• After you save your HTML file, you may view your
  Web page in a browser
• The HTML file displays in your browser just as it
  would on the Web
• Windows allows you to view the page in your
  browser while keeping Notepad open

32
Starting Your Browser
Locate and click on the icon in your Start menu
that identifies your Web browser This varies on
each computer
33
Your Browser
34
Opening a Web Page in Your Browser
35
Opening a Web Page in Your Browser
36
Your Web Page
37
Activating Notepad
38
Activating Notepad
Now it is time to add some elements to the Web
page that make it more interesting
39
(No Transcript)
40
Adding Background Color
Locate the 6-character code of the color you
wish to use
41
Adding Background Color
42
Centering the Heading
• Text can be aligned differently on the page
• ALIGN LEFT
• ALIGN RIGHT
• ALIGN CENTER
• The default alignment for headings is
  left-alignment

43
Centering the Heading
44
Adding a Horizontal Rule
• Horizontal Rules are graphical images that act as
  dividers
• The tag used to insert a Horizontal Rule is
• Horizontal Rules are easy to insert

45
Adding a Horizontal Rule
Horizontal RulesD Default
HR HR with size1 SIZE1 HR with size5 HR
with size10 HR with size10
and noshade ML
46
Adding a Horizontal Rule
horizontalrule tag
47
Viewing the Modified File in Your Browser
48
Viewing Your Web Page Source
• You can view the HTML code on any Web page from
  within your browser
• This allows you to see how others created their
  Web pages

49
Viewing Your Web Page Source
50
Viewing Your Web Page Source
51
Printing a Copy
2. Select Print from the File menu
3. Click the OK button in the Print dialog box
4. Retrieve the printout
52
Printing the HTML
From the Notepad window, select Print from the
File menu
53
Quitting Notepad and Your Browser
54
Quitting Notepad and Your Browser
55
Definition Lists
• Used to list information without the standard
  bullet or numbered list symbols
• Syntax is not as straightforward as
  ,
  ,
  or
  2. and start and end the list
  3. and are used to create the actual list
     elements, terms, and definitions
  
  56
  Definition Lists
  57
  (No Transcript)
  58
  (No Transcript)
  59
  Summary
  • Identify elements of a Web Page
  • Start Notepad
  • Describe the Notepad window
  • Enter the , , , and
    tags
  • Enter a paragraph of text, a bulleted list, and
    HTML tags
  • Save an HTML file
  
  60
  Summary
  • Change the background color of a Web page
  • Center a heading
  • Start your browser
  • View the HTML file in your browser
  • Print an HTML file from Notepad
  • Print a Web page from your browser
  
  61
  Summary
  • Use a definition list
  • Quit Notepad
  • Quit your browser
  
  62
  What You Should Know
  63
  Project 1 Complete