dr. chen, management information systems - html chapter 2: creating and editing a web page using...

Dr. Chen, Management Information Systems - HTML

Chapter 2:Creating and Editing a Web Page

Using Inline Styles

Jason C. H. Chen, Ph.D.Professor of MIS

School of Business AdministrationGonzaga UniversitySpokane, WA 99258

[email protected]

Dr. Chen, Management Information Systems - HTML2

Chapter Objectives

• Identify elements of a Web page• Start Notepad++ and describe the Notepad++

window• Enable word wrap in Notepad++• Enter HTML tags• Enter a centered heading and a paragraph of

text• Create an unordered, ordered, or definition list• Save an HTML file• Use a browser to view a Web page


Chapter Objectives

• Identify Web page image types and attributes• Improve the appearance of your web page

by– adding an image (and saved in a new folder),

changing the color of headings on a Web page, changing bulleted list style, and adding a horizontal rule using inline styles

• Validate and View HTML source code in a browser

• Print a Web page and an HTML file • Quit Notepad++ and a browser


Plan Ahead

• Complete Web page planning• Analyze the need for the Web page• Choose the content for the Web page• Determine the file naming convention that you

will use for this Web page • Determine where to save the Web page


Plan Ahead

• Determine what folder structure to use on your storage device

• Identify how to format various elements of the Web page

• Find appropriate graphical images • Establish where to position and how to format the

graphical images • Test the Web page for XHTML compliance


Type the following URLs

The task of this chapter is to create a “fooddrive” home page with additional features mentioned in the “chapter objective”.

http://barney.gonzaga.edu/~chenta/html02/fooddrive.html






H: [root directory] |

public_html [web folder]

index.htmlmyself.pptxmyresume.docx

images [images folder]

book.gif, events.gifgcan.gif, wall.gifmailbox.gif, worm.gif

html02 [folder for HTML#2]


fooddrivelogo.gif

fooddrive.html

For chapter02

What’s new here?How do you create it?

The following is the Directory Structure for HTML#2 assignment


Starting Notepad++

• Click the Start button on the Windows taskbar to display the Start menu

• Click All Programs at the bottom of the left pane on the Start menu to display the All Programs list

• Click the Notepad++ folder in the All Programs list • Click Notepad++ in the list to display a blank

Notepad++ window• If the Notepad++ window is not maximized, click the

Maximize button on the Notepad++ title bar to maximize it


Starting Notepad++


Enabling Word Wrap in Notepad++

• Click View on the menu bar• If Word Wrap does not have a check mark

next to it, click Word Wrap


Enabling Word Wrap in Notepad++


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Hunger Fight</title></head><body><h1 style="color: #3D60B1">Fight Against World Hunger</h1><div><img src=“images\hungerfightlogo.jpg" width="763" height="210" alt="Hunger Fight logo" /></div><p>Our school and schools around the world have recently joined forces to fight against world hunger. The office for the Fight Against World Hunger team is located next to the bookstore. You can drop off food and money donations there. We also have donation drop-off locations at participating grocery stores. See the list of stores as well as additional information on the bulletin board outside our team office.</p><hr /><h2 style="color: #3D60B1">What you can do to help:</h2><ul style="font-style: italic">

<li>Join the school's Fight Against World Hunger team with a $10 donation</li><li>Buy requested food at participating grocery stores and leave at drop-off locations</li><li>Volunteer to collect money and donations around the community</li>

</ul><br/> <br /><i> This document was last updated on:<script type="text/javascript"> document.write(document.lastModified);</script> </i></body> </html>

Fig. 1-10 (b) Create myhungerfight.html using Notepad (final version)

What is difference?

Required for all html HWs


Defining the Web Page Structure Using HTML Tags

• Enter the HTML code shown in Table 2–2. Press ENTER at the end of each line. If you make an error as you are typing, use the BACKSPACE key to delete all the characters back to and including the incorrect characters, and then continue typing

• Press the ENTER key twice to start the next line of code, leaving one blank line after the </head> tag

• Compare what you typed to Figure 2–6. If you notice errors, use your mouse pointer or arrow keys to move the insertion point to the right of each error and use the BACKSPACE key to correct the error

• On line 11, type <body> and then press the ENTER key twice• Type </body> and then press the ENTER key• Type </html> as the end tag • Compare what you typed to Figure 2–7 and correct errors in your

typing if necessary

Dr. Chen, Management Information Systems - HTML <div> </div> block level structure or division


Defining the Web Page Structure Using HTML Tags


Note: We will learn <dl></dl> <dt></dt> in later chapter

List Formats


<ol style="font-style: italic"> … </ol>http://barney.gonzaga.edu/~chenta/html02/myhungerfight-ch02.html

http://barney.gonzaga.edu/~chenta/html02/myhungerfight-ch02.html





Applying a Style to a List


Working with Empty Elements

• To display a graphic, you insert an inline image into the page. An inline image displays a graphic image located in a separate file within the contents of a block-level element<img src=“file” alt=“text” />

• You can insert a horizontal line by using the one-sided tag <hr /> <hr style="color: red; background-color: red; height: 2; width:

100%" />• A pixel is a dot on your computer screen that measures about 1/72”

square• You might want to include a line break, <br />

The text will be displayed if the image file can’t be found

<IMG SRC="images/book.gif" HEIGHT=100 WIDTH=100 ALIGN=RIGHT>

Inline image means the image or graphic file is not part of the HTML file. Instead, the Web browser merges the separate graphic file into the Web page as it is displayed in the browser window. (p.38)


• Occasionally you will want to include special characters in your Web page that do not appear on your keyboard

• HTML supports the use of character symbols that are identified by a code number or name

₤ ®

Working with Special Characters

&#code;


Working with Special Characters(see Appendix F on APP#33; for complete list)


Using Style Sheets

• Although HTML allows Web developers to make changes to the structure, design, and content of a Web page, HTML is limited in its ability to define the appearance, or style, across one or more Web pages. As a result, style sheet were created.

• A style is a rule that defines the appearance of an element on a Web page.

• A style sheet is a series of rules that defines the style for a Web page or an entire Web site. With a style sheet, you can alter the appearance of a Web page or pages by changing characteristics such as font family, font size, margins, and link specifications.

Style Statement Format<h1 style=“font-family: Garamond; font-color: navy”>


Using Style Sheets (cont.)• CSS supports three types of style sheets:

– inline, – embedded, (chapter 3)– an external (or linked) (chapter 4)

• We will study more in chapters 3 and 4.

Inline Styles<p style=“font-style: italic; font-color: 8pt”>


Working withBlock-Level and Inline Elements

• In a Web page, most content is marked as either a block-level element or an inline element

• A block-level element contains content displayed in a separate section within the page, setting it off from other blocks

• An inline element [also known as character formatting elements] is part of the same block as its surrounding content—for example individual words or phrases within a paragraph


Web Page Images

So far, we are using .jpg files in the previous web assignments.


Image Attributes

<div><img src=“images/hungerfightlogo.jpg" width="763" height="210" alt="Hunger Fight logo" /></div>


YOUR TURN …

• Review and carefully examine the differences between the following two html files:



http://barney.gonzaga.edu/~chenta/html01/myhungerfight.html








<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Hunger Fight</title></head><body><h1 style="color: #3D60B1">Fight Against World Hunger</h1><div><img src=“images/hungerfightlogo.jpg" width="763" height="210" alt="Hunger Fight logo" /></div><p>Our school and schools around the world have recently joined forces to fight against world hunger. The office for the Fight Against World Hunger team is located next to the bookstore. You can drop off food and money donations there. We also have donation drop-off locations at participating grocery stores. See the list of stores as well as additional information on the bulletin board outside our team office.</p><hr /><h2 style="color: #6633ff">What you can do to help:</h2><ol style="font-style: italic">

<li>Join the school's Fight Against World Hunger team with a $10 donation</li><li>Buy requested food at participating grocery stores and leave at drop-off locations</li><li>Volunteer to collect money and donations around the community</li>

</ol><br><br><!-- the following is required for all assignments -><br/> <br /><i> This document was last updated on:<script type="text/javascript"> document.write(document.lastModified);</script> </i></body> </html>

Fig. 2-30 Create myhungerfight_ch02.html adding colors

What is difference?

Required for all html HWs

What else changed?


Adding Color to Web Page Headings

• Type style=“color: #3D60B1” as the color code for the Fight Against World Hunger heading

• Click after the “2” but before the closing bracket in <h2> on line 21 and then press the spacebar

• Type style=”color: red” as the color code for the What you can do to help: heading

• Please see p.68 and Appendix B – APP 12 for more information about “colors”.


Entering a Heading

• With the insertion point on line 12, press the ENTER key once, leaving a blank line after the <body> tag

• Type <h1>Fight Against World Hunger</h1> in the text area, and then press the ENTER key twice


Entering a Heading


Entering a Paragraph of Text

• With the insertion point on line 15, enter the HTML code, as shown in Table 2–3 on the previous page. Do not press ENTER at the end of each line when entering this text and use only one space after periods

• Press the ENTER key twice to position the insertion point on line 17


Entering a Paragraph of Text


Creating an Unordered List

• With the insertion point on line 17, enter the HTML code, as shown in Table 2–4. When you enter the text on lines 20, 21, and 22, make sure to press the TAB key at the start of the line, and then enter the text. Press ENTER at the end of each line

• Press the ENTER key after typing line 23, leaving a blank line on 24


Creating an Unordered List


Saving an HTML File

• With a USB flash drive connected to one of the computer’s USB ports, click File on the Notepad++ menu bar

• Click Save As on the File menu to display the Save As dialog box

• Type hungerfight.html in the File name text box to change the file name. Do not press ENTER after typing the file name

• Click Computer in the left side of the dialog box to display a list of available drives


Saving an HTML File(you may need to change the following based on “where”

and “what” computer you are using.

This is just a sample guideline, the right steps depends on “where” you are working with your computers.• If necessary, scroll until your USB flash drive, such as

UDISK 2.0 (G:), appears in the list of available drives • Double-click UDISK 2.0 (G:) (or your storage device)

in the Computer list to select the USB flash drive, drive G in this case, as the new save location

• If necessary, open the /datafiles/html02 folder • Click the Save button in the Save As dialog box to save

the file on the USB flash drive with the name hungerfight.html


Saving an HTML File


Starting a Browser

• Click the Firefox icon on the taskbar • If necessary, click the Maximize button to

maximize the browser window


Viewing a Web Page in a Browser

• Click the Address bar to select the URL on the Address bar

• Type (or simply double click the file name) g:\html02\hungerfight.html to display the new URL on the Address bar. The Web page is not displayed until you press the ENTER key, as shown in the next step

• Press the ENTER key to display the hungerfight.html page as if it were available on the Web


Viewing a Web Page in a Browser


Activating Notepad++

• Click the Notepad++ button on the taskbar to maximize Notepad++ and make it the active window


Adding an Image

• Click the blank line 14 and then press the ENTER key

• With the insertion point on line 15, enter the HTML code, as shown in Table 2–9. Press ENTER at the end of each line


Adding an Image




• Type style=“color: #3D60B1” as the color code for the Fight Against World Hunger heading


• Type style=”color: #3D60B1” as the color code for the What you can do to help: heading


Changing the Bulleted List Style

• Click after the “l” but before the closing bracket in <ul> on line 23 and then press the spacebar

• <ul> indicates un-ordered list• Type style=”font-style: italic” as

the code


Changing the Bulleted List Style


Adding a Horizontal Rule

• Click the blank line 20 and then press the ENTER key• Type <hr /> as the HTML tag and then press the

ENTER key• Click File on the menu bar and then click Save


Adding a Horizontal Rule


Refreshing the View in a Browser

• Click the Firefox(or Firefox) button on the taskbar to display the home page

• Click the Refresh button on the Address bar to display the modified Web page


Refreshing the View in a Browser


Validating HTML Code

• Click the Address bar on the browser to highlight the current URL

• Type validator.w3.org to replace the current entry, and then press the ENTER key

• If necessary, click OK if the browser asks to open a new window

• Click the Validate by File Upload tab


Saving, Validating, and Printing the HTML File

• If necessary, activate the Notepad++ window• Click File on the menu bar, and then Save on the File menu to

save the HTML file as greenhome.html• Open a new browser window and go to validator.w3.org• Click the Validate by File Upload tab, browse to the

gettinggreener.html or greenhome.html Web page, and then click Open

• See p. 73-76 and tutorial guide on the Bb for more details.• Click the Check button to determine if the Web page is valid.

If the file is not valid, make corrections, re-save, and revalidate• Click the Notepad++ button on the taskbar to display the

fooddrive.html code. Click File on the menu bar, click Print on the File menu, and then click the Print button in the Print dialog box to print the HTML code



• Click the Browse button• Locate the hungerfight.html file on your storage

device and then click the file name • Click the Open button on the Choose File to

Upload dialog box and the file path and name will be inserted into the File box

• Click the Check button. The resulting validation should be displayed

• Return to the Hunger Fight Web page, either by clicking the Back button on your browser or by clicking the Firefox button in the taskbar


Viewing HTML Source Code for a Web Page

• Click Page on the Command bar• IE: Click View Source to view the HTML

code in the default text editor• Firefox: Right click then select View Page

Source• Click the Close button on the text editor

title bar to close the active text editor window


Viewing HTML Source Code for a Web Page


Printing a Web Page and anHTML File

• Ready the printer according to the printer instructions• With the Fight Against World Hunger Web page open in

the browser window, click the Print icon on the Command bar

• When the Print dialog box appears, click the Print button• When the printer stops printing the Web page, retrieve the

printout • Click the Notepad++ button on the taskbar to activate the

Notepad++ window• Click File on the menu bar, click the Print command, and

then click the Print button to print a hard copy of the HTML code


Printing a Web

Page and an

HTML File


Quitting Notepad++ and a Browser

• In Notepad++, click the File menu, then Close All

• Click the Close button on the Notepad++ title bar

• Click the Close button on the Hunger Fight Firefox title bar


Chapter Summary

• Identify elements of a Web page• Start Notepad++ and describe the Notepad++

window• Enable word wrap in Notepad++• Enter HTML tags• Enter a centered heading and a paragraph of

text• Create an unordered, ordered, or definition list• Save an HTML file• Use a browser to view a Web page


Chapter Summary

• Activate Notepad++• Identify Web page image types and attributes• Add an image, change the color of headings

on a Web page, change bulleted list style, and add a horizontal rule using inline styles

• View the HTML source code in a browser• Print a Web page and an HTML file • Quit Notepad++ and a browser


HW – html#2Do Lab 1 (p. 84) and the result is shown below.Change the followings on p.84-85: a) step1: title, Lab 2-1 into Food Drive, b) steps 6,8: lab2-1 solution.html into fooddrive.html

required for all HTML hws


HW- HTML#2

HTML#2 assigned HW

(type the following URL)



Follow the steps stated on page 84-85 in the html text.

Please note that you need to change the file name from lab2-1solution.html to fooddrive.html (HTML 84)




H: [root directory] |

public_html [web folder]




html02 [folder for HTML#2]


fooddrivelogo.gif

fooddrive.html

For chapter02

What’s new here?How do you create it?

The following is the Directory Structure for HTML#2 assignment


<html><head><! fooddrive Web Page File name: fooddrive.html Author: Jason Chen Date: 5/28/2012 Text page: HTML, pp.84-85 (Figure 2-44 *** Note that there is an “images” folder (images) created in this version---->

<title> Food Drive </title></head>

<body>...

<hr /> <h2>The most needed nonperishable foods are:</h2><ul><li>Canned vegetables, fruit, meats, and fish</li><li>Pasta and tomato sauce</li><li>Cereal or oatmeal</li><li>Powdered milk</li></ul>

<hr /><h2 style="color: #3D60B1">What you can do to help:</h2>

...

...

</body> </html>

Modify and complete all missing HTML statements.


What is the next?

Changes should be made for HTML#2:

Change lab2-1 solution.html into fooddrive.html

• Create a new folder ‘html02’ under public_html• Create another new folder ‘images’ under html02• All HTML homework should be saved under an appropriate tutorial folder such as

html02 for HTML#2• All image files for HTML should be saved under this images (i.e.,

public_html/html02/images/), this is not the images right under public_html)• Copy/download all appropriate data files (e.g., fooddrivelogo.jpg) and save them under

html02 folder. Open it with Notepad and save it as fooddrive.html (note that you also need to change the file name from lab2-1solution.html to fooddrive.html as stated on p.85)

• The image file (fooddrivelogo.jpg) should be saved them under html02/images/ folder.• Modify/change your fooddrive.html exactly the same as shown on the handout.• You are strongly recommended to create same directory structure on your PC• From now on, employ all what you learned from HMTL tutorials and enhance your

personal web page (i.e., index.html)



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><! fooddrive Web Page File name: fooddrive.html Author: Jason Chen Date: 5/28/2012 Text page: HTML, p.13 *** Note that there is an “images” folder (images) created in this version ---->

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Food Drive</title></head><body>

…

</body> </html>

Fig. 2-44 Create fooddrive.html using Notepad

We will complete all these command lines

File name: fooddrive.html


<body style="background-color: #f9fc05">

<div><img src="images/fooddrivelogo.gif" width="601" height="170" alt="Food Drive logo" /></div>

<h1 style="text-align: center">Please Help!</h1><p>Our annual food drive takes place this month. This event is the largest one-day food drive in the metropolitan area and has helped feed those in need since 1991. We strive to provide the most nutritious food for individuals and families in our community. If you are unable to bring items to the foodbank at 2828 N. Central Avenue in Phoenix, please consider a cash donation. For every dollar that you donate, our food bank can buy $12 worth of food using wholesale discounts. Please mail donations to: Community Food Drive, 2828 N. Central Avenue, Phoenix, AZ 85000. Our success depends on the time and caring of our donors and volunteers so thank you all!</p><hr />

What is different from the text ?

The text will be displayed if the image file can’t be found

<h2>The most needed nonperishable foods are:</h2><ul>

<li>Canned vegetables, fruit, meats, and fish</li><li>Pasta and tomato sauce</li><li>Cereal or oatmeal</li><li>Powdered milk</li>

</ul>

<br><br>

<!-- the following is required for all assignments -><br/> <br /><i> This document was last updated on:<script type="text/javascript"> document.write(document.lastModified);</script> </i></body></html>

Required for ALL HW


H: [root directory] |public_htm [web folder]

|


hungerfightlogo.jpg

html01[folder for HTML#1]


images[images folder]


…

…


fooddrivelogo.gifAll other *.jpg image files

All other *.html files



All other *.jpg image files

All other *txt.htm files


For your personal Web Page

The following is the Directory Structure for All HTML Assignments

myhungerfight.html


Test the HTML and View the Source Code



http://barney.gonzaga.edu/~your_ID/html02/fooddrive.html

1. select “Slide Show” for this slide2. Click this “Link”3. The result will be displayed on the

browser4. Right click Windows and select

“View Page Source” to show the HTML codes

Use the same way for the rest of examples.






Your next homework: html#2File name: fooddrive.html (pp. 84 to 85):

A Sample Web Page (Fig. 2-44)

required for all HTML hws


What/How you should turn in for HTML#2

1. Download data files, hungerfightlogo.jpg and fooddrivelogo.jpg under html02/images

2. What/How you should turn in: email me with the following information (Fail to provide me with ALL information, you will lose major points)

3. Submit the HTML#1 via Blackboard.

Message :

Dr. Chen

This is my HMTL#2 Assignment

http://barney.gonzaga.edu/~your_userID/html02/fooddrive.html

<Your Full Name> : BMIS235-03 (or BMIS235-04/05)

so that your grade will be posted correctly.

Make the URL linkable

dr. chen, management information systems - html chapter 2: creating and editing a web page using...

Documents