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

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

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

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

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

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

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

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 browser’s 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 Project 2: Creating and Editing a Web Page

Elements of a Web Page (Text Elements) Normal text – default text format used for the main content of a Web page bold (<strong>) italic (<em>) underlined (<u>) 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 Project 2: Creating and Editing a Web Page

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 <img> 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 Project 2: Creating and Editing a Web Page

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

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

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

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

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

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

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

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

Entering HTML Tags and Text begin by inserting a <!DOCTYPE> tag four sets of tags <html>, </html> - start and end of HTML file <head>, </head> - contains Web page title and other document header information <title>, </title> - indicates title of Web page <body>, </body> - 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 <!DOCTYPE> tag More on Web Project 2: Creating and Editing a Web Page

Entering HTML Tags to Define the Web Page Structure <!DOCTYPE> tag tells browser which HTML or XHTML version and type the document uses W3C supports 3 document types strict – prohibit use of deprecated tags deprecated tags W3C earmarked for eventual removal from their specifications replaced by newer more functional tags transitional – allows for use of deprecated tags 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 Project 2: Creating and Editing a Web Page

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 here Chapter 2: Creating and Editing a Web Page Project 2: Creating and Editing a Web Page 21 21

Creating a List unordered (bulleted list) – uses bullets <ul>, </ul> 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 <ol>, </ol> tags – start and end ordered list can use numbers, letters, or Roman numerals default Arabic numbers definition – offsets information in dictionary-like style <dl>, </dl> tags – start and end definition list <dt>, </dt> tags – indicates a term <dd>, </dd> tags – identifies definition of term change default bullet or number type use type attribute <li>, </li> define an item on a list Project 2: Creating and Editing a Web Page

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

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

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

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

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) Click the Save button in the Save As dialog box to save the file on the USB flash drive with the name fooddrive.html Chapter 2: Creating and Editing a Web Page Project 2: Creating and Editing a Web Page 27 27

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

3 Image Types 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) 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 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 Project 2: Creating and Editing a Web Page

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

Image Attributes Project 2: Creating and Editing a Web Page

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

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

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

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

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

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

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

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

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 If necessary, click OK if the browser asks to open a new window Click the Validate by File Upload tab Click the Browse button Project 2: Creating and Editing a Web Page Chapter 2: Creating and Editing a Web Page 40

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

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

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

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

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

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

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

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

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