Embed Size (px)
Citation preview
HTMLConcepts and Techniques
Fourth Edition
Project 2
Creating and Editing a Web Page
Project 2: Creating and Editing a Web Page 2
Project Objectives
• Create a web page (index.html)– Title
– Header
– Paragraph
– Background color
– Insert an image
• Upload the file to your school web server.• Use a browser to view a Web page
Project 2: Creating and Editing a Web Page 3
Starting Notepad
Project 2: Creating and Editing a Web Page 4
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
Project 2: Creating and Editing a Web Page 5
Enabling Word Wrap in Notepad
Project 2: Creating and Editing a Web Page 6
HTML Tags and Their Functions
Project 2: Creating and Editing a Web Page 7
Entering HTML Tags to Define the Web Page Structure
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title>Campus Tutoring Service Home Page</title> </head><body>
</body>
</html>
Project 2: Creating and Editing a Web Page 8
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title>Campus Tutoring Service Home Page</title> </head><body><h1>We'll be open soon!</h1>
</body>
</html>
Entering a Heading
Project 2: Creating and Editing a Web Page 9
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title>Campus Tutoring Service Home Page</title> </head><body><h1>We'll be open soon!</h1> <p>The Campus Tutoring Service will be open for business soon!....</p></body>
</html>
Entering a Paragraph of Text
Project 2: Creating and Editing a Web Page 10
Creating an Unordered List
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title>Campus Tutoring Service Home Page</title> </head><body><h1>We'll be open soon!</h1> <p>The Campus Tutoring Service will be open for business soon!....</p>
<h2>Our services include tutors for the following courses:</h2><ul><li> Math 101</li><li> Accounting 200</li><li> Economics 251</li></ul></body>
</html>
Project 2: Creating and Editing a Web Page 11
Saving an HTML File
• Save as an index.html
Project 2: Creating and Editing a Web Page 12
Starting a Browser
Project 2: Creating and Editing a Web Page 13
Viewing a Web Page in a Browser
• Type path\index.html in the Address box• Press the ENTER key
Project 2: Creating and Editing a Web Page 14
Viewing a Web Page in a Browser
Project 2: Creating and Editing a Web Page 15
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title>Campus Tutoring Service Home Page</title> </head><body><img src="cts_clip8.gif“ width="474“ height=“128“ alt="Student Services logo" /><h1>We'll be open soon!</h1> <p>The Campus Tutoring Service will be open for business soon!....</p>
<h2>Our services include tutors for the following courses:</h2><ul><li> Math 101</li><li> Accounting 200</li><li> Economics 251</li></ul></body>
</html>
Adding an Image
Project 2: Creating and Editing a Web Page 16
See the color code
http://www.cs.gsu.edu/~csclxh/csc1010/ColorCodes.html
Adding a Background Color
Project 2: Creating and Editing a Web Page 17
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title>Campus Tutoring Service Home Page</title> </head>
<body ><img src="cts_clip8.gif“ width="474“ height=“128“ alt="Student Services logo" /><h1>We'll be open soon!</h1> <p>The Campus Tutoring Service will be open for business soon!....</p>
<h2>Our services include tutors for the following courses:</h2><ul><li> Math 101</li><li> Accounting 200</li><li> Economics 251</li></ul></body>
</html>
Adding a Background Color
Project 2: Creating and Editing a Web Page 18
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title>Campus Tutoring Service Home Page</title> </head>
<body bgcolor=“#fffbc6” ><img src="cts_clip8.gif“ width="474“ height=“128“ alt="Student Services logo" /><h1>We'll be open soon!</h1> <p>The Campus Tutoring Service will be open for business soon!....</p>
<h2>Our services include tutors for the following courses:</h2><ul><li> Math 101</li><li> Accounting 200</li><li> Economics 251</li></ul></body>
</html>
Adding a Background Color
Project 2: Creating and Editing a Web Page 19
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title>Campus Tutoring Service Home Page</title> </head><body bgcolor=“#fffbc6” ><img src="cts_clip8.gif“ width="474“ height=“128“ alt="Student Services logo" /><h1 >We'll be open soon!</h1> <p>The Campus Tutoring Service will be open for business soon!....</p>
<h2>Our services include tutors for the following courses:</h2><ul><li> Math 101</li><li> Accounting 200</li><li> Economics 251</li></ul></body>
</html>
Centering a Heading
Project 2: Creating and Editing a Web Page 20
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title>Campus Tutoring Service Home Page</title> </head><body bgcolor=“#fffbc6” ><img src="cts_clip8.gif“ width="474“ height=“128“ alt="Student Services logo" />
<h1 align=“center” >We'll be open soon!</h1> <p>The Campus Tutoring Service will be open for business soon!....</p>
<h2>Our services include tutors for the following courses:</h2><ul><li> Math 101</li><li> Accounting 200</li><li> Economics 251</li></ul></body>
</html>
Centering a Heading
Project 2: Creating and Editing a Web Page 21
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title>Campus Tutoring Service Home Page</title> </head><body bgcolor=“#fffbc6” ><img src="cts_clip8.gif“ width="474“ height=“128“ alt="Student Services logo" /><hr /><h1 align=“center” >We'll be open soon!</h1> <p>The Campus Tutoring Service will be open for business soon!....</p>
<h2>Our services include tutors for the following courses:</h2><ul><li> Math 101</li><li> Accounting 200</li><li> Economics 251</li></ul></body>
</html>
Adding a Horizontal Rule
Project 2: Creating and Editing a Web Page 22
Refreshing the View in a Browser
• Click the Campus Tutoring Service Home Page button on the taskbar
• Click the Refresh button on the Standard toolbar
Project 2: Creating and Editing a Web Page 23
Refreshing the View in a Browser
Project 2: Creating and Editing a Web Page 24
Upload it to your web server
Project 2: Creating and Editing a Web Page 25
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
Project 2: Creating and Editing a Web Page 26
Viewing HTML Source Code for a Web Page
Project 2: Creating and Editing a Web Page 27
Printing a Web Page and an HTML File
Project 2: Creating and Editing a Web Page 28
Project Summary
• Create your index.html file and upload it to your page.
• Send the link to the TA.
HTMLConcepts and Techniques
Fourth Edition
Project 2 Complete
Creating and Editing a Web Page
