HTML Concepts and Techniques Fourth Edition Project 2
- Slides: 29
HTML Concepts and Techniques Fourth Edition 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 Project 2: Creating and Editing a Web Page 2
Starting Notepad Project 2: Creating and Editing a Web Page 3
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 4
Enabling Word Wrap in Notepad Project 2: Creating and Editing a Web Page 5
HTML Tags and Their Functions Project 2: Creating and Editing a Web Page 6
Entering HTML Tags to Define the Web Page Structure <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <head> <title>Campus Tutoring Service Home Page</title> </head> <body> </html> Project 2: Creating and Editing a Web Page 7
Entering a Heading <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <head> <title>Campus Tutoring Service Home Page</title> </head> <body> <h 1>We'll be open soon!</h 1> </body> </html> Project 2: Creating and Editing a Web Page 8
Entering a Paragraph of Text <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <head> <title>Campus Tutoring Service Home Page</title> </head> <body> <h 1>We'll be open soon!</h 1> <p>The Campus Tutoring Service will be open for business soon!. . </p> </body> </html> Project 2: Creating and Editing a Web Page 9
Creating an Unordered List <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <head> <title>Campus Tutoring Service Home Page</title> </head> <body> <h 1>We'll be open soon!</h 1> <p>The Campus Tutoring Service will be open for business soon!. . </p> <h 2>Our services include tutors for the following courses: </h 2> <ul> <li> Math 101</li> <li> Accounting 200</li> <li> Economics 251</li> </ul> </body> </html> Project 2: Creating and Editing a Web Page 10
Saving an HTML File • Save as an index. html Project 2: Creating and Editing a Web Page 11
Starting a Browser Project 2: Creating and Editing a Web Page 12
Viewing a Web Page in a Browser • Type pathindex. html in the Address box • Press the ENTER key Project 2: Creating and Editing a Web Page 13
Viewing a Web Page in a Browser Project 2: Creating and Editing a Web Page 14
Adding an Image <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <head> <title>Campus Tutoring Service Home Page</title> </head> <body> <img src="cts_clip 8. gif“ width="474“ height=“ 128“ alt="Student Services logo" /> <h 1>We'll be open soon!</h 1> <p>The Campus Tutoring Service will be open for business soon!. . </p> <h 2>Our services include tutors for the following courses: </h 2> <ul> <li> Math 101</li> <li> Accounting 200</li> <li> Economics 251</li> </ul> </body> </html> Project 2: Creating and Editing a Web Page 15
Adding a Background Color See the color code http: //www. cs. gsu. edu/~csclxh/csc 1010/Color. Codes. html Project 2: Creating and Editing a Web Page 16
Adding a Background Color <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <head> <title>Campus Tutoring Service Home Page</title> </head> <body > <img src="cts_clip 8. gif“ width="474“ height=“ 128“ alt="Student Services logo" /> <h 1>We'll be open soon!</h 1> <p>The Campus Tutoring Service will be open for business soon!. . </p> <h 2>Our services include tutors for the following courses: </h 2> <ul> <li> Math 101</li> <li> Accounting 200</li> <li> Economics 251</li> </ul> </body> </html> Project 2: Creating and Editing a Web Page 17
Adding a Background Color <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <head> <title>Campus Tutoring Service Home Page</title> </head> <body bgcolor=“#fffbc 6” > <img src="cts_clip 8. gif“ width="474“ height=“ 128“ alt="Student Services logo" /> <h 1>We'll be open soon!</h 1> <p>The Campus Tutoring Service will be open for business soon!. . </p> <h 2>Our services include tutors for the following courses: </h 2> <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
Centering a Heading <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <head> <title>Campus Tutoring Service Home Page</title> </head> <body bgcolor=“#fffbc 6” > <img src="cts_clip 8. gif“ width="474“ height=“ 128“ alt="Student Services logo" /> <h 1 >We'll be open soon!</h 1> <p>The Campus Tutoring Service will be open for business soon!. . </p> <h 2>Our services include tutors for the following courses: </h 2> <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 "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <head> <title>Campus Tutoring Service Home Page</title> </head> <body bgcolor=“#fffbc 6” > <img src="cts_clip 8. gif“ width="474“ height=“ 128“ alt="Student Services logo" /> <h 1 align=“center” >We'll be open soon!</h 1> <p>The Campus Tutoring Service will be open for business soon!. . </p> <h 2>Our services include tutors for the following courses: </h 2> <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
Adding a Horizontal Rule <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <head> <title>Campus Tutoring Service Home Page</title> </head> <body bgcolor=“#fffbc 6” > <img src="cts_clip 8. gif“ width="474“ height=“ 128“ alt="Student Services logo" /> <hr /> <h 1 align=“center” >We'll be open soon!</h 1> <p>The Campus Tutoring Service will be open for business soon!. . </p> <h 2>Our services include tutors for the following courses: </h 2> <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
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 22
Refreshing the View in a Browser Project 2: Creating and Editing a Web Page 23
Upload it to your web server Project 2: Creating and Editing a Web Page 24
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 25
Viewing HTML Source Code for a Web Page Project 2: Creating and Editing a Web Page 26
Printing a Web Page and an HTML File Project 2: Creating and Editing a Web Page 27
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 28
HTML Concepts and Techniques Fourth Edition Project 2 Complete Creating and Editing a Web Page
Project 2 fourth edition
Html code for creating web page
Expert systems: principles and programming, fourth edition
Pathways algebra 2 answer key
Ethics in information technology fourth edition
Ethics in information technology 6th edition answers
A computer programming team has 13 members
Fourth generation techniques
Geography: realms, regions, and concepts (doc or html) file
Introduction to genetic analysis tenth edition
Biology concepts and connections 4th edition
Canvas доска
Slidetodoc.com
Doctype html html head
Bhtml?title=
Doctype html html head
Data mining concepts and techniques
Function of data mining
Concepts, techniques, and models of computer programming
Data mining slides
Data mining concepts and techniques slides
Operating system
Operating system concepts 6th edition
Database system concepts seventh edition
Mis chapter 6
Mis
Fonctions et solutions techniques
Html project
History of cephalosporins
First generation cephalosporin
