Transcript Elements of a Web Page

HTML
Concepts and Techniques
Fifth Edition
Chapter 2
Creating and Editing a Web Page
Chapter Objectives
•
•
•
•
•
•
•
•
•
•
Identify elements of a Web page
Start Notepad and describe the Notepad window
Enable word wrap in Notepad
Enter the HTML tags
Enter a centered heading and a paragraph of text
Create an unordered, ordered, or definition list
Save an HTML file
Use a browser to view a Web page
Activate Notepad
Identify Web page image types and attributes
Chapter 2: Creating and Editing a Web Page
2
Chapter Objectives
• Add an image, change the background color of
a Web page, and add a horizontal rule
• View the HTML source code in a browser
• Print a Web page and an HTML file
• Quit Notepad and a browser
Chapter 2: Creating and Editing a Web Page
3
Starting Notepad
• Click the Start button on the taskbar to display
the Start menu
• Click All Programs at the bottom of the left pane
on the Start menu to display the All Programs list
• Click Accessories in the All Programs list
• Click Notepad in the Accessories list to display
the Notepad window
• If the Notepad window is not maximized, click the
Maximize button on the Notepad title bar to
maximize it
Chapter 2: Creating and Editing a Web Page
4
Starting Notepad
Chapter 2: Creating and Editing a Web Page
5
Enabling Word Wrap in Notepad
• Click Format on the menu bar
• If the Word Wrap command does not have a
check mark next to it, click Word Wrap
Chapter 2: Creating and Editing a Web Page
6
Enabling Word Wrap in Notepad
Chapter 2: Creating and Editing a Web Page
7
Saving your work
• If you don’t have a drive mapped to Public, let’s
do that now.
• Save all your work to My Documents. This
folder will synchronize with the server when you
log off…
• Let’s test that theory to know that it will.
• Create a notepad document with your name in it.
• Save it to my documents
• Log off….log on at another machine so you can
check for its existence.
Chapter 2: Creating and Editing a Web Page
8
Elements of a Web Page
Title
Bo
Image
Text link
Image
Links
Heading
Paragraph
Background
Project 2: Creating and Editing a Web Page
9
HTML Tags and Their Functions
Chapter 2: Creating and Editing a Web Page
10
Elements of a Web Page
• Title - text that appears on the title bar
• Body – everything that is displayed in the browser
• Background – solid color or picture graphic against which
everything appears
• Headings – Used to set off paragraphs
• Image – Inline Image is NOT part of the HTML file
• Image map – image that has HOTSPOTS defined
• Horizontal rules – lines displayed across the web page
• Link – text, image, or other element that instructs the
browser to go to a specific location for something
Project 2: Creating and Editing a Web Page
11
Defining the Web Page Structure
Using HTML Tags
• Enter the HTML code shown in #1 & #2 on page HTML
38-39
Chapter 2: Creating and Editing a Web Page
12
Entering a Centered Heading
• Enter the information on pg. HTML 41, #1
• Don’t forget to save your Work!
• Name this file fooddrive.html and save it in My
Documents
Chapter 2: Creating and Editing a Web Page
13
Entering a Paragraph of Text
• Enter the code on pg. 42, #1.
Chapter 2: Creating and Editing a Web Page
14
Creating a List
• Unordered List – bulleted list
– <ul> and </ul>
• Ordered List – numbered list using # or letters
– <ol> and </ol>
• Use the <li> and </li> between the previous tags
to define a list item within the ordered or
unordered list.
• Notice the different types of list items on pg. 44.
Project 2: Creating and Editing a Web Page
15
Creating an Unordered List
• Enter the code on pg. 45, #1 for an unordered
list.
Chapter 2: Creating and Editing a Web Page
16
Other things with lists
• Use the tags <ul type=“ “> where you can put
what kinds of bullet you want to use.
• Definition list – offsets information in a dictionary
type style.
• Used less often than ordered or unordered lists
• <dl> and </dl> tags are used along with the <dt>
and <dd> tags.
Chapter 2: Creating and Editing a Web Page
17
Example of Definition List
Chapter 2: Creating and Editing a Web Page
18
Starting a Browser
Chapter 2: Creating and Editing a Web Page
19
Viewing a Web Page in a Browser
•
•
•
•
•
Find your fooddrive.html in My Documents.
Right click on it and chose Open with…
Choose Internet explorer.
You should see how your web page looks.
It should look like the following slide:….
Chapter 2: Creating and Editing a Web Page
20
Viewing a Web Page in a Browser
Chapter 2: Creating and Editing a Web Page
21
Activating Notepad
• Close or minimize the browser…find the
fooddrive.html document. Right click and choose
open with…Notepad…
Chapter 2: Creating and Editing a Web Page
22
3 Types of Images
• GIF – Graphics Interchange Format (.gif)
– Saved with a compression technique to make it smaller to
download on the Web
• JPEG – Joint Photographic Experts Group (.jpg,
.jpe, or .jpeg)
– Saved with a compression technique to make it smaller to
download on the Web
– Used for more complex images such as photos
– Supports more colors and resolutions than other file types
• PNG – Portable Network Graphics (.png or .ping)
– Patent free alternative to .gif files
Project 2: Creating and Editing a Web Page
23
Image Attributes – pg. 59
Chapter 2: Creating and Editing a Web Page
24
Adding a Background
See Appendix
B for more
colors!
Project 2: Creating and Editing a Web Page
25
Example of Horizontal Rules – pg. 61
Project 2: Creating and Editing a Web Page
26
Example of Horizontal Rules
(pg. 57)
Project 2: Creating and Editing a Web Page
27
Adding images/background
•
•
•
•
Do the exercises on pg. 59, pg. 62, & pg. 63.
Save your document
Open the notepad document with a browser
Click the Refresh button on the Standard toolbar
to display the modified Web page
• When you finish…your document will look like
this…..
Chapter 2: Creating and Editing a Web Page
28
Refreshing the View in a Browser
Chapter 2: Creating and Editing a Web Page
29
Validating HTML Code
• You can try to validate your HTML code with
W3C by following the instructions on pg. 66-67.
Chapter 2: Creating and Editing a Web Page
30
Validating HTML Code
Chapter 2: Creating and Editing a Web Page
31
Viewing HTML Source Code
for a Web Page
• Click View on the menu bar
• Click Source on the View menu
• Click the Close button on the Notepad title bar
Chapter 2: Creating and Editing a Web Page
32
Viewing HTML Source Code
for a Web Page
Chapter 2: Creating and Editing a Web Page
33
Printing a Web Page and an
HTML File
• Always print for me the HTML code from notepad
• NEVER print out the web page unless I specifically ask
you to.
Chapter 2: Creating and Editing a Web Page
34
Printing a Web Page and an
HTML File
Chapter 2: Creating and Editing a Web Page
35
Assignments for Ch. 2
• Homework –
– www.scsite.com/html5e/learn
Do the Flash Cards exercise.
– Choose 20 questions, do it
until you get at least a 75%.
– You will be given the score
you bring me to class!
– Due on Tue, Sept. 1, 2009,
beginning of class. After that,
it is late!
• Labs – Due date: TBA
– In The Lab: Lab 1 (pg. 75)
• Use the example as a guide
only.
• Fill it in with information
relevant to YOU!
– Cases & Places #4
• pg. 79
• You will get points for
creativity!
• Save everything in My Documents!
• ONLY print the HTML code, NOT
the actual Web Page.
Project 2: Creating and Editing a Web Page
36