HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.
-
Upload
devyn-mathes -
Category
Documents
-
view
216 -
download
1
Transcript of HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.
![Page 1: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/1.jpg)
HTMLConcepts and Techniques
Fourth Edition
Project 2
Creating and Editing a Web Page
![Page 2: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/2.jpg)
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
![Page 3: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/3.jpg)
Project 2: Creating and Editing a Web Page 3
Starting Notepad
![Page 4: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/4.jpg)
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
![Page 5: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/5.jpg)
Project 2: Creating and Editing a Web Page 5
Enabling Word Wrap in Notepad
![Page 6: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/6.jpg)
Project 2: Creating and Editing a Web Page 6
HTML Tags and Their Functions
![Page 7: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/7.jpg)
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>
![Page 8: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/8.jpg)
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
![Page 9: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/9.jpg)
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
![Page 10: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/10.jpg)
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>
![Page 11: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/11.jpg)
Project 2: Creating and Editing a Web Page 11
Saving an HTML File
• Save as an index.html
![Page 12: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/12.jpg)
Project 2: Creating and Editing a Web Page 12
Starting a Browser
![Page 13: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/13.jpg)
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
![Page 14: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/14.jpg)
Project 2: Creating and Editing a Web Page 14
Viewing a Web Page in a Browser
![Page 15: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/15.jpg)
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
![Page 16: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/16.jpg)
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
![Page 17: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/17.jpg)
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
![Page 18: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/18.jpg)
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
![Page 19: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/19.jpg)
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
![Page 20: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/20.jpg)
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
![Page 21: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/21.jpg)
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
![Page 22: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/22.jpg)
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
![Page 23: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/23.jpg)
Project 2: Creating and Editing a Web Page 23
Refreshing the View in a Browser
![Page 24: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/24.jpg)
Project 2: Creating and Editing a Web Page 24
Upload it to your web server
![Page 25: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/25.jpg)
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
![Page 26: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/26.jpg)
Project 2: Creating and Editing a Web Page 26
Viewing HTML Source Code for a Web Page
![Page 27: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/27.jpg)
Project 2: Creating and Editing a Web Page 27
Printing a Web Page and an HTML File
![Page 28: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/28.jpg)
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.
![Page 29: HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.](https://reader033.fdocuments.in/reader033/viewer/2022052913/56649c745503460f94927560/html5/thumbnails/29.jpg)
HTMLConcepts and Techniques
Fourth Edition
Project 2 Complete
Creating and Editing a Web Page