Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and...
Transcript of Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and...
![Page 1: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/1.jpg)
HTMLProject 2
Project 2
Creating and Editing a Web Page
![Page 2: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/2.jpg)
2HTML Project 2: Creating and Editing a Web Page
Project Objectives
1. Identify elements of a Web page2. Start Notepad and describe the Notepad
window3. Enable word wrap in Notepad4. Enter the HTML tags5. Enter headings and a paragraph of text
![Page 3: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/3.jpg)
3HTML Project 2: Creating and Editing a Web Page
Project Objectives
6. Create an unordered, ordered, or definition list
7. Save an HTML file8. Use a browser to view a Web page9. Activate Notepad10. Identify Web page image types and
attributes
![Page 4: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/4.jpg)
4HTML Project 2: Creating and Editing a Web Page
Project Objectives
11.Add an image, change the background color of a Web page, center a heading, and add a horizontal rule
12.View the HTML source code in a browser
13.Print a Web page and an HTML file14.Quit Notepad and a browser
![Page 5: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/5.jpg)
5HTML Project 2: Creating and Editing a Web Page
Starting Notepad
• Many ways to start Notepad1. Start Programs Accessories Notepad2. Start Run notepad3. Right Click New Text Document
Save As Give Name CHANGE FILE EXTENSION to .htm OR .html
![Page 6: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/6.jpg)
6HTML Project 2: Creating and Editing a Web Page
Starting Notepad
![Page 7: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/7.jpg)
7HTML Project 2: Creating and Editing a Web Page
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 8: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/8.jpg)
8HTML Project 2: Creating and Editing a Web Page
Word Wrap in Notepad
![Page 9: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/9.jpg)
9HTML Project 2: Creating and Editing a Web Page
Tags & Functions
![Page 10: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/10.jpg)
10HTML Project 2: Creating and Editing a Web Page
Web Page Structure /Skeleton
• Type <html> and then press the ENTER key• Type <head> and then press the ENTER key• Type <title>Campus Tutoring Service Home Page</title> and then press the ENTER key– Title shows up on the “title bar” of the web page & on
page when it is printed.• Type </head> and then press the ENTER key• Type <body> and then press the ENTER key
twice• Type </body> and then press the ENTER key• Type </html> as the end tag
![Page 11: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/11.jpg)
11HTML Project 2: Creating and Editing a Web Page
Entering HTML Tags to Define the Web Page Structure
![Page 12: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/12.jpg)
12HTML Project 2: Creating and Editing a Web Page
Entering a Heading
• Click the blank line below the <body> tag, type <h1>We'll be open soon!</h1>
• in the text area, and then press the ENTER key twice
• WHITE SPACE is not read by the browser with the exception of ONE space!
![Page 13: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/13.jpg)
13HTML Project 2: Creating and Editing a Web Page
Entering a Heading
![Page 14: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/14.jpg)
14HTML Project 2: Creating and Editing a Web Page
Entering aParagraph of Text
• With the insertion point on line 12, press the ENTER key and then type
<p>The Campus Tutoring Service will be open for business soon! The Campus Tutoring Service wants to make sure that all students can be successful, especially in their first year on campus. We have student tutors available for several freshman-level classes.
</p>• and then press the ENTER key
![Page 15: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/15.jpg)
15HTML Project 2: Creating and Editing a Web Page
Entering a Paragraph of Text
![Page 16: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/16.jpg)
16HTML Project 2: Creating and Editing a Web Page
Creating LISTS
• Three types of lists:• Ordered
– Sequence is important• Recipes• Directions
• Unordered– Sequence not important– A list of your classes
![Page 17: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/17.jpg)
17HTML Project 2: Creating and Editing a Web Page
Ordered Lists
• Alpha Numeric– Will be numbered or lettered
• Arabic Numerals ( 1 )• Roman Numerals Upper Case ( I )• Roman Numerals Lower Case ( i )• Arabic Letters Upper Case ( A )• Arabic Letters Lower Case ( a )
![Page 18: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/18.jpg)
18HTML Project 2: Creating and Editing a Web Page
Unordered Lists
• Also called “bulleted lists”– A symbol is used to indicate an item in the list
• Circle• Disk• Square• Some other symbol you select.
![Page 19: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/19.jpg)
19HTML Project 2: Creating and Editing a Web Page
Using Lists
• All lists are automatically indented and have the number, or other symbol added to the beginning.
• First tag that requires TWO tags to make the whole tag work
<ol>TAG name for Ordered List<li> first item in the list </li><li> second item in the list </li>
</ol>
![Page 20: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/20.jpg)
20HTML Project 2: Creating and Editing a Web Page
Unordered List
<ul> Tag name for Unordered list<li>Math 141(1st item)</li>
<li>Accounting 200 (2nd item)</li><li>Economics 251 (3rd item)</li>
</ul>
![Page 21: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/21.jpg)
21HTML Project 2: Creating and Editing a Web Page
Unordered List
• Notice the “Heading” tag used to identify the list.
![Page 22: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/22.jpg)
22HTML Project 2: Creating and Editing a Web Page
Saving an HTML File
• All files will be saved to the U:/ Drive in your folder.
• Within your folder you MUST make another folder and call it Web Design.
• Within that folder you MUST make yet another folder and call it HTML.
• Within the HTML folder you MUST make a folder for EACH Project we do in the book and call it “Project 1” etc…
![Page 23: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/23.jpg)
23HTML Project 2: Creating and Editing a Web Page
Saving an HTML File
• You may NOT use a floppy, memory stick, jump drive, or any other device to save files.
• ALL work must be done in the classroom or at the library!
• Know the difference between “SAVE” and “SAVEAS”
![Page 24: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/24.jpg)
24HTML Project 2: Creating and Editing a Web Page
Saving an HTML File
![Page 25: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/25.jpg)
25HTML Project 2: Creating and Editing a Web Page
Starting a Browser
• Many ways to open your browser:• Start All Programs Internet Explorer• Start Run iexplore• Double Click the icon on the desktop
![Page 26: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/26.jpg)
26HTML Project 2: Creating and Editing a Web Page
Starting a Browser
![Page 27: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/27.jpg)
27HTML Project 2: Creating and Editing a Web Page
Viewing a Web Page in a Browser
• When the browser window appears, click the Address bar
• Typeu:\ssawyer\”your name”\web design
in the Address box• Press the ENTER key
![Page 28: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/28.jpg)
28HTML Project 2: Creating and Editing a Web Page
Viewing a Web Page in a Browser
• Use the “My Computer” icon to locate the drive and proper folder.– Double click the icon of the page you want to view.
• Use the “ ‘Windows’ Explorer” to find your drive and proper folder.– Double click the icon of the page you want to view.
![Page 29: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/29.jpg)
29HTML Project 2: Creating and Editing a Web Page
Viewing a Web Page in a Browser
![Page 30: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/30.jpg)
30HTML Project 2: Creating and Editing a Web Page
Activating Notepad
• Click the Notepad button on the taskbar• Start Programs Accessories Notepad• Start Run Notepad
![Page 31: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/31.jpg)
31HTML Project 2: Creating and Editing a Web Page
Adding an Image• <img src="cts_clip8.gif“/>
• <img src="cts_clip8.gif“alt="Student Services logo" />
• <img src="cts_clip8.gif“alt="Student Services logo”width="484“height="62“target=“_blank”>
![Page 32: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/32.jpg)
32HTML Project 2: Creating and Editing a Web Page
Adding an Image
![Page 33: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/33.jpg)
33HTML Project 2: Creating and Editing a Web Page
Adding a Background Color & Image
<body bgcolor=“#fffbc6”>
<body background=“picname.jpg”
style=“background-repeat: no-repeat;”>
• Hexadecimal vs. TextName– Internet can give you listing of hundreds of
different hex color numbers.
![Page 34: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/34.jpg)
34HTML Project 2: Creating and Editing a Web Page
Adding a Background Color
![Page 35: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/35.jpg)
35HTML Project 2: Creating and Editing a Web Page
Centering a Heading
<h1 align=“center”>
heading</h1>
<h1 align=“center”> heading </h1>
![Page 36: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/36.jpg)
36HTML Project 2: Creating and Editing a Web Page
Centering a Heading
![Page 37: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/37.jpg)
37HTML Project 2: Creating and Editing a Web Page
Horizontal Rule
•<hr>•<hr size=“50”>
– (pixels)
•<hr size=“50%”>– (% of window)
![Page 38: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/38.jpg)
38HTML Project 2: Creating and Editing a Web Page
Adding a Horizontal Rule
![Page 39: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/39.jpg)
39HTML Project 2: Creating and Editing a Web Page
Refreshing the View in a Browser
• Must “SAVE” in the code view (notepad) first in order to see the change in the browser
• THEN in the browser view click the “REFRESH” button on the Standard toolbar
![Page 40: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/40.jpg)
40HTML Project 2: Creating and Editing a Web Page
Refreshing the View in a Browser
![Page 41: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/41.jpg)
41HTML Project 2: Creating and Editing a Web Page
Viewing HTML Source Code from Browser View
• Internet Explorer– Click View on the menu bar– Click Source on the View menu– Click the Close button on the Notepad title bar
• Netscape same procedure but…– (Can’t edit source from “view” menu)!!
![Page 42: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/42.jpg)
42HTML Project 2: Creating and Editing a Web Page
Viewing HTML Source Code in a Browser
![Page 43: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/43.jpg)
43HTML Project 2: Creating and Editing a Web Page
Printing a Web Page and an HTML File
• File Print Ok
• Ctrl + P Ok
![Page 44: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/44.jpg)
44HTML Project 2: Creating and Editing a Web Page
Project Summary
1. Identify elements of a Web page2. Start Notepad and describe the Notepad
window3. Enable word wrap in Notepad4. Enter the HTML tags5. Enter headings and a paragraph of text
![Page 45: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/45.jpg)
45HTML Project 2: Creating and Editing a Web Page
Project Summary
6. Create an unordered, ordered, or definition list
7. Save an HTML file8. Use a browser to view a Web page9. Activate Notepad10. Identify Web page image types and
attributes
![Page 46: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/46.jpg)
46HTML Project 2: Creating and Editing a Web Page
Project Summary
11.Add an image, change the background color of a Web page, center a heading, and add a horizontal rule
12.View the HTML source code in a browser13.Print a Web page and an HTML file14.Quit Notepad and a browser
![Page 47: Creating and Editing a Web Page - Valencia High …...2007/09/10 · HTML Project 2: 4 Creating and Editing a Web Page Project Objectives 11.Add an image, change the background color](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee04c45ad6a402d666b8204/html5/thumbnails/47.jpg)
HTMLProject 2
Project 2 Assignments
1. Apply Your Knowledge2. In the Lab3. Cases & Places