Slide 1

Slide 2

Project 2: Creating and Editing a Web Page 1 Chapter 2 Creating and Editing a Web Page

Slide 3

Project 2: Creating and Editing a Web Page 2 Project Objectives Identify elements of a Web page Start Notepad and describe the Notepad window Enable word wrap in Notepad Enter the HTML tags Enter headings and a paragraph of text

Slide 4

Project 2: Creating and Editing a Web Page 3 Project Objectives Create an unordered, ordered, or definition list Save an HTML file Use a browser to view a Web page Activate Notepad Identify Web page image types and attributes

Slide 5

Project 2: Creating and Editing a Web Page 4 Project Objectives Add an image, change the background color of a Web page, center a heading, and add a horizontal rule View the HTML source code in a browser Print a Web page and an HTML file Quit Notepad and a browser

Slide 6

Project 2: Creating and Editing a Web Page 5 Plan Ahead Complete Web page planning Analyze the need for the Web page Choose the content for the Web page Determine where to save the Web page Chapter 2: Creating and Editing a Web Page 5

Slide 7

Project 2: Creating and Editing a Web Page 6 Plan Ahead 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 Chapter 2: Creating and Editing a Web Page 6

Slide 8

Project 2: Creating and Editing a Web Page 7 Introduction HTML uses a set of special tags to define the structure, layout, and appearance of Web pageHTML Topics covered Notepad window Headings center Bulleted list Insert an image Change background color Add horizontal rule

Slide 9

Project 2: Creating and Editing a Web Page 8 Elements of a Web Page (Window Elements) title text appearing on the title bar of the browser Name assigned to page if user adds page to browsers list of favorites, or bookmarks Identify subject or purpose Concise, yet descriptive body contains main information displayed in the browser includes text, graphics, and other elements background solid color or picture against which other elements on page appear should not overpower image is tiled, repeats across and down page like Wallpaper on Windows desktop More on Web

Slide 10

Project 2: Creating and Editing a Web Page 9 Elements of a Web Page (Text Elements) Normal text default text format used for the main content of a Web page bold ( ) italic ( ) underlined ( ) list series of text items Headings used to set off different paragraphs of text or different sections of a page larger font then normal text often bold or italic or different color HTML has six different sizes or levels numbered 1-6, 1 being the largest use consistently, do not skip levels

Slide 11

Project 2: Creating and Editing a Web Page 10 Elements of a Web Page (Image Elements) inline image graphic used in a Web page graphic file not part of HTML file browser merges the separate graphic file into Web page as it is displayed in browser window contains tags tell browser which graphic file, where to insert it, and how to display it image map special type of inline image divided into sections or hotspots hotspots area of image that activates a function when selected animated include motion, can change in appearance

Slide 12

Project 2: Creating and Editing a Web Page 11 Elements of a Web Page (Hyperlink Elements) link text, an image, or another Web page element that you click to instruct the browser to go to a location in a file or to request a file from the server. More on Web

Slide 13

Project 2: Creating and Editing a Web Page 12 Elements of a Web Page title image text link headingimage links paragraph background heading

Slide 14

Project 2: Creating and Editing a Web Page 13 Chapter 2: Creating and Editing a Web Page 13 Starting Notepad Click the Start button on the Windows Vista 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 Accessories in the All Programs list Click Notepad in the Accessories list to display the Notepad window If the Notepad window is not maximized, click the Maximize button on the Notepad title bar to maximize it See next slide

Slide 15

Project 2: Creating and Editing a Web Page 14 Chapter 2: Creating and Editing a Web Page 14 Starting Notepad

Slide 16

Project 2: Creating and Editing a Web Page 15 Chapter 2: Creating and Editing a Web Page 15 Enabling 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 See next slide

Slide 17

Project 2: Creating and Editing a Web Page 16 Chapter 2: Creating and Editing a Web Page 16 Enabling Word Wrap in Notepad

Slide 18

Project 2: Creating and Editing a Web Page 17 The Notepad Window Title Bar appears at top of Notepad window Name of document opened in Notepad appears here (default name Untitled) Menu Bar appears just below title bar each menu name represents a menu menu provides a list of commands Text Area main part of Notepad window Scroll Bar appears on right side of window vertical scroll bar - used to view different portions of text area scroll box indicates current location in file

Slide 19

Project 2: Creating and Editing a Web Page 18 Chapter 2: Creating and Editing a Web Page 18 HTML Tags and Their Functions

Slide 20

Project 2: Creating and Editing a Web Page 19 Entering HTML Tags and Text begin by inserting a tag four sets of tags 1., - start and end of HTML file 2., - contains Web page title and other document header information 3., - indicates title of Web page 4., - indicates boundaries of Web page tags define the overall structure of a standard Web page and divide the HTML file into its basic sections. always enter tags in lowercase except for tag More on Web

Slide 21

Project 2: Creating and Editing a Web Page 20 Entering HTML Tags to Define the Web Page Structure tag tells browser which HTML or XHTML version and type the document uses W3C supports 3 document types 1.strict prohibit use of deprecated tags deprecated tags W3C earmarked for eventual removal from their specifications replaced by newer more functional tags 2.transitional allows for use of deprecated tags 3.frameset supports frames on Web page, also allows for use of deprecated tags includes URL referencing a Document Type Definition found on W3C Web site Document Type Definition (DTD) file containing definitions of tags and how they should be used in a Web page More on Web

Slide 22

Project 2: Creating and Editing a Web Page 21 Chapter 2: Creating and Editing a Web Page 21 Defining the Web Page Structure Using HTML Tags Use the HTML template on the In-Chapter HTML Chapter 2 Web page to create the code listed hereHTML template

Slide 23

Project 2: Creating and Editing a Web Page 22 Creating a List unordered (bulleted list) uses bullets , tags start and end unordered list 3 different bullet options disc, square or circle default disc type bullet ordered (numbered list) uses numbers or letters , tags start and end ordered list can use numbers, letters, or Roman numerals default Arabic numbers definition offsets information in dictionary-like style , tags start and end definition list , tags indicates a term , tags identifies definition of term change default bullet or number type use type attribute, define an item on a list

Slide 24

Project 2: Creating and Editing a Web Page 23 Creating an Unordered List disc bullet list square bullet list circle bullet list

Slide 25

Project 2: Creating and Editing a Web Page 24 Creating an Ordered List type 1 list type A list type a list type I list type i list

Slide 26

Project 2: Creating and Editing a Web Page 25 Creating an Definition List definitions definition terms definition list start tag definition term start definition list end tag definitions More on Web

Slide 27

Project 2: Creating and Editing a Web Page 26 Chapter 2: Creating and Editing a Web Page 26 Saving an HTML File With a USB flash drive connected to one of the computers USB ports, click File on the Notepad menu bar Click Save As on the File menu to display the Save As dialog box If the Navigation pane is not displayed in the Save As dialog box, click the Browse Folders button to expand the dialog box If a Folders list is displayed below the Folders button, click the Folders button to remove the Folders list Type fooddrive.html in the File name text box to change the file name. Do not press ENTER after typing the file name If Computer is not displayed in the Favorite Links section, drag the top or bottom edge of the Save As dialog box until Computer is displayed

Slide 28

Project 2: Creating and Editing a Web Page 27 Chapter 2: Creating and Editing a Web Page 27 Saving an HTML File Click Computer in the Favorite Links section to display a list of available drives If necessary, scroll until UDISK 2.0 (G:) appears in the list of available drives Double-click UDISK 2.0 (G:) in the Computer list to select the USB flash drive, drive G in this case, as the new save location If necessary, open the HTML\ChapterFiles\Chapter02 folder ( see In-Chapter HTML Chapter 2 Web Page)In-Chapter HTML Chapter 2 Web Page Click the Save button in the Save As dialog box to save the file on the USB flash drive with the name fooddrive.html

Slide 29

Project 2: Creating and Editing a Web Page 28 Web Page Images enhance the look of Web page making it more interesting and colorful help organize a Web page clarify a point being made in the text serve as links to other Web pages used to break up the Web page sections directional elements used to navigate a Web site More on Web

Slide 30

Project 2: Creating and Editing a Web Page 29 3 Image Types 1.Graphics Interchange Format (GIF) saved using patented LZW compression Standard (noninterlaced) displayed one line at a time when loading Interlaced load all at once, becoming sharper as they load (good for large images) 2.Joint Photographic Experts Group (JPEG) saved using compression techniques can specify image quality balance between image quality and file size used for complex images (photos) supports more colors and resolutions 3.Portable Network Graphics (PNG) compressed file format supports multiple colors and resolutions WC3 developed PNG format as a graphics standard and patent- free alternative to GIF More on Web

Slide 31

Project 2: Creating and Editing a Web Page 30 Image Attributes Attributes define additional characteristics for the HTML tag enhance HTML tags by using attributes example use width and height attributes for all img tags browser knows size of image without having to calculate it src attribute used to define the URL of the image to load alt attribute is used to provide alternative text brief statement of purpose of image (50 characters or less) not a description of the image vision-impaired users

Slide 32

Project 2: Creating and Editing a Web Page 31 Image Attributes

Slide 33

Project 2: Creating and Editing a Web Page 32 Improving the Appearance of Your Web Page image horizontal rule centered heading background color

Slide 34

Project 2: Creating and Editing a Web Page 33 Adding Background Color More on Web

Slide 35

Project 2: Creating and Editing a Web Page 34 Viewing a Web Page in a Browser

Slide 36

Project 2: Creating and Editing a Web Page 35 Adding an Image image HTML code

Slide 37

Project 2: Creating and Editing a Web Page 36 Adding a Background Color background color HTML code

Slide 38

Project 2: Creating and Editing a Web Page 37 Centering a Heading center heading HTML code

Slide 39

Project 2: Creating and Editing a Web Page 38 Adding a Horizontal Rule Horizontal Rule HTML code

Slide 40

Project 2: Creating and Editing a Web Page 39 Refreshing the View in a Browser

Slide 41

Project 2: Creating and Editing a Web Page 40 Validating HTML Code Click the Address bar on the browser to highlight the current URL Type validator.w3.org to replace the current entry then press the ENTER key validator.w3.org If necessary, click OK if the browser asks to open a new window Click the Validate by File Upload tabValidate by File Upload Click the Browse button Chapter 2: Creating and Editing a Web Page 40

Slide 42

Project 2: Creating and Editing a Web Page 41 Validating HTML Code Locate the fooddrive.html file on your storage device and then click the file name Click the Open button on the Choose file dialog box and the file name will be inserted into the File box Click the Check button. The resulting validation should be displayed. see next slide Return to the Community Food Drive Web page, either by clicking the Back button on your browser or by clicking the Community Food Drive button in the task bar Chapter 2: Creating and Editing a Web Page 41

Slide 43

Project 2: Creating and Editing a Web Page 42 Validating HTML Code Chapter 2: Creating and Editing a Web Page 42

Slide 44

Project 2: Creating and Editing a Web Page 43 Viewing HTML Source Code for a Web Page

Slide 45

Project 2: Creating and Editing a Web Page 44 Printing a Web Page and an HTML File

Slide 46

Project 2: Creating and Editing a Web Page 45 Project Summary Identify elements of a Web page Start Notepad and describe the Notepad window Enable word wrap in Notepad Enter the HTML tags Enter headings and a paragraph of text

Slide 47

Project 2: Creating and Editing a Web Page 46 Project Summary Create an unordered, ordered, or definition list Save an HTML file Use a browser to view a Web page Activate Notepad Identify Web page image types and attributes

Slide 48

Project 2: Creating and Editing a Web Page 47 Project Summary Add an image, change the background color of a Web page, center a heading, and add a horizontal rule View the HTML source code in a browser Print a Web page and an HTML file Quit Notepad and a browser

Slide 49

Project 2: Creating and Editing a Web Page 48 Exercise # 1 In the Lab 3 page HTML 77HTML Composing a Personal Web Page See INF 186 Computer Assignment 3 Web page for details, hints, and requirements for the assignmentINF 186 Computer Assignment 3 Web page

Slide 50

Project 2: Creating and Editing a Web Page 49 Chapter 2 Complete Creating and Editing a Web Page