Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.

Similar presentations


Presentation on theme: "HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page."— Presentation transcript:

1 HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page

2 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

3 Project 2: Creating and Editing a Web Page 3 Starting Notepad

4 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

5 Project 2: Creating and Editing a Web Page 5 Enabling Word Wrap in Notepad

6 Project 2: Creating and Editing a Web Page 6 HTML Tags and Their Functions

7 Project 2: Creating and Editing a Web Page 7 Entering HTML Tags to Define the Web Page Structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Campus Tutoring Service Home Page

8 Project 2: Creating and Editing a Web Page 8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Campus Tutoring Service Home Page We'll be open soon! Entering a Heading

9 Project 2: Creating and Editing a Web Page 9 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Campus Tutoring Service Home Page We'll be open soon! The Campus Tutoring Service will be open for business soon!.... Entering a Paragraph of Text

10 Project 2: Creating and Editing a Web Page 10 Creating an Unordered List <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Campus Tutoring Service Home Page We'll be open soon! The Campus Tutoring Service will be open for business soon!.... Our services include tutors for the following courses: Math 101 Accounting 200 Economics 251

11 Project 2: Creating and Editing a Web Page 11 Saving an HTML File Save as an index.html

12 Project 2: Creating and Editing a Web Page 12 Starting a Browser

13 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

14 Project 2: Creating and Editing a Web Page 14 Viewing a Web Page in a Browser

15 Project 2: Creating and Editing a Web Page 15 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Campus Tutoring Service Home Page We'll be open soon! The Campus Tutoring Service will be open for business soon!.... Our services include tutors for the following courses: Math 101 Accounting 200 Economics 251 Adding an Image

16 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

17 Project 2: Creating and Editing a Web Page 17 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Campus Tutoring Service Home Page We'll be open soon! The Campus Tutoring Service will be open for business soon!.... Our services include tutors for the following courses: Math 101 Accounting 200 Economics 251 Adding a Background Color

18 Project 2: Creating and Editing a Web Page 18 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Campus Tutoring Service Home Page We'll be open soon! The Campus Tutoring Service will be open for business soon!.... Our services include tutors for the following courses: Math 101 Accounting 200 Economics 251 Adding a Background Color

19 Project 2: Creating and Editing a Web Page 19 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Campus Tutoring Service Home Page We'll be open soon! The Campus Tutoring Service will be open for business soon!.... Our services include tutors for the following courses: Math 101 Accounting 200 Economics 251 Centering a Heading

20 Project 2: Creating and Editing a Web Page 20 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Campus Tutoring Service Home Page We'll be open soon! The Campus Tutoring Service will be open for business soon!.... Our services include tutors for the following courses: Math 101 Accounting 200 Economics 251 Centering a Heading

21 Project 2: Creating and Editing a Web Page 21 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Campus Tutoring Service Home Page We'll be open soon! The Campus Tutoring Service will be open for business soon!.... Our services include tutors for the following courses: Math 101 Accounting 200 Economics 251 Adding a Horizontal Rule

22 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

23 Project 2: Creating and Editing a Web Page 23 Refreshing the View in a Browser

24 Project 2: Creating and Editing a Web Page 24 Upload it to your web server

25 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

26 Project 2: Creating and Editing a Web Page 26 Viewing HTML Source Code for a Web Page

27 Project 2: Creating and Editing a Web Page 27 Printing a Web Page and an HTML File

28 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.

29 HTML Concepts and Techniques Fourth Edition Project 2 Complete Creating and Editing a Web Page


Download ppt "HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page."

Similar presentations


Ads by Google