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

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


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


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


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


Starting Notepad


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


Word Wrap in Notepad


Tags & Functions


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


Entering HTML Tags to Define the Web Page Structure


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!


Entering a Heading


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


Entering a Paragraph of Text


Creating LISTS

• Three types of lists:• Ordered

– Sequence is important• Recipes• Directions

• Unordered– Sequence not important– A list of your classes


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 )


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.


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>


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>


Unordered List

• Notice the “Heading” tag used to identify the list.


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…


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”


Saving an HTML File


Starting a Browser

• Many ways to open your browser:• Start All Programs Internet Explorer• Start Run iexplore• Double Click the icon on the desktop


Starting a Browser


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



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




Activating Notepad

• Click the Notepad button on the taskbar• Start Programs Accessories Notepad• Start Run Notepad


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”>


Adding an Image


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.


Adding a Background Color


Centering a Heading

<h1 align=“center”>

heading</h1>

<h1 align=“center”> heading </h1>


Centering a Heading


Horizontal Rule

•<hr>•<hr size=“50”>

– (pixels)

•<hr size=“50%”>– (% of window)


Adding a Horizontal Rule


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


Refreshing the View in a Browser


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)!!


Viewing HTML Source Code in a Browser


Printing a Web Page and an HTML File

• File Print Ok

• Ctrl + P Ok


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


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


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

Documents

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