1 / 29

Project 2

Project 2. Creating and Editing a Web Page. 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. Starting Notepad. Enabling Word Wrap in Notepad.

vconlan
Download Presentation

Project 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 html PUBLIC "-//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. Entering a Heading <!DOCTYPE html PUBLIC "-//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> Project 2: Creating and Editing a Web Page

  9. Entering a Paragraph of Text <!DOCTYPE html PUBLIC "-//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> 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"> <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. Adding an Image <!DOCTYPE html PUBLIC "-//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> Project 2: Creating and Editing a Web Page

  16. Adding a Background Color See the color code http://www.cs.gsu.edu/~csclxh/csc1010/ColorCodes.html Project 2: Creating and Editing a Web Page

  17. Adding a Background Color <!DOCTYPE html PUBLIC "-//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> Project 2: Creating and Editing a Web Page

  18. Adding a Background Color <!DOCTYPE html PUBLIC "-//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> Project 2: Creating and Editing a Web Page

  19. Centering a Heading <!DOCTYPE html PUBLIC "-//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> Project 2: Creating and Editing a Web Page

  20. Centering a Heading <!DOCTYPE html PUBLIC "-//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> Project 2: Creating and Editing a Web Page

  21. Adding a Horizontal Rule <!DOCTYPE html PUBLIC "-//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> 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. Project 2: Creating and Editing a Web Page

  29. Project 2 Complete Creating and Editing a Web Page

More Related