Download presentation
Presentation is loading. Please wait.
1
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 Administration Gonzaga University Spokane, WA 99258 chen@jepson.gonzaga.edu
2
Dr. Chen, Management Information Systems - HTML 2 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
3
Dr. Chen, Management Information Systems - HTML 3 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
4
Dr. Chen, Management Information Systems - HTML 4 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
5
Dr. Chen, Management Information Systems - HTML 5 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
6
Dr. Chen, Management Information Systems - HTML 6 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/fooddriv e.html http://barney.gonzaga.edu/~chenta/html02/fooddriv e.html
7
Dr. Chen, Management Information Systems - HTML H: [root directory] | public_html [web folder] index.html myself.pptx myresume.docx images [images folder] book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif html02 [folder for HTML#2] images [images folder] 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
8
Dr. Chen, Management Information Systems - HTML 8 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
9
Dr. Chen, Management Information Systems - HTML 9 Starting Notepad++
10
Dr. Chen, Management Information Systems - HTML 10 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
11
Dr. Chen, Management Information Systems - HTML 11 Enabling Word Wrap in Notepad++
12
Dr. Chen, Management Information Systems - HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Hunger Fight Fight Against World Hunger 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. What you can do to help: Join the school's Fight Against World Hunger team with a $10 donation Buy requested food at participating grocery stores and leave at drop-off locations Volunteer to collect money and donations around the community This document was last updated on: document.write(document.lastModified); Fig. 1-10 (b) Create myhungerfight.html using Notepad (final version) What is difference? Required for all html HWs
13
Dr. Chen, Management Information Systems - HTML 13 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 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 and then press the ENTER key twice Type and then press the ENTER key Type as the end tag Compare what you typed to Figure 2–7 and correct errors in your typing if necessary
14
Dr. Chen, Management Information Systems - HTML block level structure or division
15
Dr. Chen, Management Information Systems - HTML 15 Defining the Web Page Structure Using HTML Tags
16
Dr. Chen, Management Information Systems - HTML
17
Note: We will learn in later chapter List Formats
18
Dr. Chen, Management Information Systems - HTML
19
… http://barney.gonzaga.edu/~chenta/html02/myhungerfight-ch02.html http://barney.gonzaga.edu/~chenta/html02/myhungerfight-ch02.html
20
Dr. Chen, Management Information Systems - HTML 20 Applying a Style to a List
21
Dr. Chen, Management Information Systems - HTML 21 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 You can insert a horizontal line by using the one-sided tag A pixel is a dot on your computer screen that measures about 1/72” square You might want to include a line break, The text will be displayed if the image file can’t be found 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)
22
Dr. Chen, Management Information Systems - HTML 22 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;
23
Dr. Chen, Management Information Systems - HTML 23 Working with Special Characters (see Appendix F on APP#33; for complete list)
24
Dr. Chen, Management Information Systems - HTML 24 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
25
Dr. Chen, Management Information Systems - HTML 25 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
26
Dr. Chen, Management Information Systems - HTML 26 Working with Block-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
27
Dr. Chen, Management Information Systems - HTML Web Page Images So far, we are using.jpg files in the previous web assignments.
28
Dr. Chen, Management Information Systems - HTML Image Attributes
29
Dr. Chen, Management Information Systems - HTML 29 YOUR TURN … Review and carefully examine the differences between the following two html files: http://barney.gonzaga.edu/~chenta/html02/myhungerfight-ch02.html http://barney.gonzaga.edu/~chenta/html02/myhungerfight-ch02.html http://barney.gonzaga.edu/~chenta/html01/myhungerfight.html http://barney.gonzaga.edu/~chenta/html01/myhungerfight.html
30
Dr. Chen, Management Information Systems - HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Hunger Fight Fight Against World Hunger 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. What you can do to help: Join the school's Fight Against World Hunger team with a $10 donation Buy requested food at participating grocery stores and leave at drop-off locations Volunteer to collect money and donations around the community This document was last updated on: document.write(document.lastModified); Fig. 2-30 Create myhungerfight_ch02.html adding colors What is difference? Required for all html HWs What else changed?
31
Dr. Chen, Management Information Systems - HTML 31 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 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”.
32
Dr. Chen, Management Information Systems - HTML 32 Entering a Heading With the insertion point on line 12, press the ENTER key once, leaving a blank line after the tag Type Fight Against World Hunger in the text area, and then press the ENTER key twice
33
Dr. Chen, Management Information Systems - HTML 33 Entering a Heading
34
Dr. Chen, Management Information Systems - HTML 34 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
35
Dr. Chen, Management Information Systems - HTML 35 Entering a Paragraph of Text
36
Dr. Chen, Management Information Systems - HTML 36 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
37
Dr. Chen, Management Information Systems - HTML 37 Creating an Unordered List
38
Dr. Chen, Management Information Systems - HTML 38 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
39
Dr. Chen, Management Information Systems - HTML 39 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
40
Dr. Chen, Management Information Systems - HTML 40 Saving an HTML File
41
Dr. Chen, Management Information Systems - HTML 41 Starting a Browser Click the Firefox icon on the taskbar If necessary, click the Maximize button to maximize the browser window
42
Dr. Chen, Management Information Systems - HTML 42 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
43
Dr. Chen, Management Information Systems - HTML 43 Viewing a Web Page in a Browser
44
Dr. Chen, Management Information Systems - HTML 44 Activating Notepad++ Click the Notepad++ button on the taskbar to maximize Notepad++ and make it the active window
45
Dr. Chen, Management Information Systems - HTML 45 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
46
Dr. Chen, Management Information Systems - HTML 46 Adding an Image
47
Dr. Chen, Management Information Systems - HTML 47 Adding Color to Web Page Headings Click after the “1” but before the closing bracket in on line 13 and then press the spacebar 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 on line 21 and then press the spacebar Type style=”color: #3D60B1 ” as the color code for the What you can do to help: heading
48
Dr. Chen, Management Information Systems - HTML 48 Adding Color to Web Page Headings
49
Dr. Chen, Management Information Systems - HTML 49 Changing the Bulleted List Style Click after the “l” but before the closing bracket in on line 23 and then press the spacebar indicates un-ordered list Type style=”font-style: italic” as the code
50
Dr. Chen, Management Information Systems - HTML 50 Changing the Bulleted List Style
51
Dr. Chen, Management Information Systems - HTML 51 Adding a Horizontal Rule Click the blank line 20 and then press the ENTER key Type as the HTML tag and then press the ENTER key Click File on the menu bar and then click Save
52
Dr. Chen, Management Information Systems - HTML 52 Adding a Horizontal Rule
53
Dr. Chen, Management Information Systems - HTML 53 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
54
Dr. Chen, Management Information Systems - HTML 54 Refreshing the View in a Browser
55
Dr. Chen, Management Information Systems - HTML 55 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
56
Dr. Chen, Management Information Systems - HTML 56 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
57
Dr. Chen, Management Information Systems - HTML 57 Validating 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
58
Dr. Chen, Management Information Systems - HTML 58 Validating HTML Code
59
Dr. Chen, Management Information Systems - HTML 59 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
60
Dr. Chen, Management Information Systems - HTML 60 Viewing HTML Source Code for a Web Page
61
Dr. Chen, Management Information Systems - HTML 61 Printing a Web Page and an HTML 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
62
Dr. Chen, Management Information Systems - HTML 62 Printing a Web Page and an HTML File
63
Dr. Chen, Management Information Systems - HTML 63 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
64
Dr. Chen, Management Information Systems - HTML 64 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
65
Dr. Chen, Management Information Systems - HTML 65 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
66
Dr. Chen, Management Information Systems - HTML HW – html#2 Do 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
67
Dr. Chen, Management Information Systems - HTML 67 HW- HTML#2 HTML#2 assigned HW (type the following URL) http://barney.gonzaga.edu/~chenta/html02/fooddrive.html http://barney.gonzaga.edu/~chenta/html02/fooddrive.html 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)
68
Dr. Chen, Management Information Systems - HTML H: [root directory] | public_html [web folder] index.html myself.pptx myresume.docx images [images folder] book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif html02 [folder for HTML#2] images [images folder] 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
69
Dr. Chen, Management Information Systems - HTML <! 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 ----> Food Drive... The most needed nonperishable foods are: Canned vegetables, fruit, meats, and fish Pasta and tomato sauce Cereal or oatmeal Powdered milk What you can do to help:... Modify and complete all missing HTML statements.
70
Dr. Chen, Management Information Systems - HTML 70 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)
71
Dr. Chen, Management Information Systems - HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <! fooddrive Web Page File name: fooddrive.html Author: Jason Chen D ate: 5/28/2012 Text page: HTML, p.13 *** Note that there is an “images” folder (images) created in this version ----> Food Drive … Fig. 2-44 Create fooddrive.html using Notepad We will complete all these command lines File name: fooddrive.html
72
Dr. Chen, Management Information Systems - HTML Please Help! 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 food bank 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! What is different from the text ? The text will be displayed if the image file can’t be found
73
Dr. Chen, Management Information Systems - HTML The most needed nonperishable foods are: Canned vegetables, fruit, meats, and fish Pasta and tomato sauce Cereal or oatmeal Powdered milk This document was last updated on: document.write(document.lastModified); Required for ALL HW
74
Dr. Chen, Management Information Systems - HTML H: [root directory] | public_htm [web folder] | images [images folder] hungerfightlogo.jpg html01 [folder for HTML#1] index.html myself.pptx myresume.docx images [images folder] book.gif, events.gif gcan.gif, wall.gif mailbox.gif, worm.gif … … images [images folder] fooddrivelogo.gif All other *.jpg image files All other *.html files html02 [folder for HTML#2] images [images folder] All other *.jpg image files All other *txt.htm files html08 [folder for HTML#8] For your personal Web Page The following is the Directory Structure for All HTML Assignments myhungerfight.html
75
Dr. Chen, Management Information Systems - HTML 75 Test the HTML and View the Source Code http://barney.gonzaga.edu/~chenta/html02/fooddrive.html http://barney.gonzaga.edu/~chenta/html02/fooddrive.html http://barney.gonzaga.edu/~your_ID/html02/fooddrive.html 1.select “Slide Show” for this slide 2.Click this “Link” 3.The result will be displayed on the browser 4.Right click Windows and select “View Page Source” to show the HTML codes Use the same way for the rest of examples.
76
Dr. Chen, Management Information Systems - HTML Your next homework: html#2 File name: fooddrive.html (pp. 84 to 85): A Sample Web Page (Fig. 2-44) required for all HTML hws
77
Dr. Chen, Management Information Systems - HTML Your next homework: html#2 File name: fooddrive.html (pp. 84 to 85): A Sample Web Page (Fig. 2-44) required for all HTML hws
78
Dr. Chen, Management Information Systems - HTML 78 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 : BMIS235-03 (or BMIS235-04/05) so that your grade will be posted correctly. Make the URL linkable
Similar presentations
