creating and editing a web page - valencia high …...2007/09/10 · html project 2: 4 creating and...
Post on 03-Jun-2020
2 Views
Preview:
TRANSCRIPT
HTMLProject 2
Project 2
Creating and Editing a Web Page
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
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
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
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
6HTML Project 2: Creating and Editing a Web Page
Starting Notepad
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
8HTML Project 2: Creating and Editing a Web Page
Word Wrap in Notepad
9HTML Project 2: Creating and Editing a Web Page
Tags & Functions
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
11HTML Project 2: Creating and Editing a Web Page
Entering HTML Tags to Define the Web Page Structure
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!
13HTML Project 2: Creating and Editing a Web Page
Entering a Heading
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
15HTML Project 2: Creating and Editing a Web Page
Entering a Paragraph of Text
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
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 )
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.
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>
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>
21HTML Project 2: Creating and Editing a Web Page
Unordered List
• Notice the “Heading” tag used to identify the list.
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…
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”
24HTML Project 2: Creating and Editing a Web Page
Saving an HTML File
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
26HTML Project 2: Creating and Editing a Web Page
Starting a Browser
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
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.
29HTML Project 2: Creating and Editing a Web Page
Viewing a Web Page in a Browser
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
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”>
32HTML Project 2: Creating and Editing a Web Page
Adding an Image
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.
34HTML Project 2: Creating and Editing a Web Page
Adding a Background Color
35HTML Project 2: Creating and Editing a Web Page
Centering a Heading
<h1 align=“center”>
heading</h1>
<h1 align=“center”> heading </h1>
36HTML Project 2: Creating and Editing a Web Page
Centering a Heading
37HTML Project 2: Creating and Editing a Web Page
Horizontal Rule
•<hr>•<hr size=“50”>
– (pixels)
•<hr size=“50%”>– (% of window)
38HTML Project 2: Creating and Editing a Web Page
Adding a Horizontal Rule
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
40HTML Project 2: Creating and Editing a Web Page
Refreshing the View in a Browser
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)!!
42HTML Project 2: Creating and Editing a Web Page
Viewing HTML Source Code in a Browser
43HTML Project 2: Creating and Editing a Web Page
Printing a Web Page and an HTML File
• File Print Ok
• Ctrl + P Ok
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
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
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
HTMLProject 2
Project 2 Assignments
1. Apply Your Knowledge2. In the Lab3. Cases & Places
top related