1 / 49

Chapter 2

Chapter 2. Creating and Editing a Web Page. 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 Objectives.

ailis
Download Presentation

Chapter 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  6. Plan Ahead Project 2: Creating and Editing a Web Page Identify how to format various elements of the Web page Find appropriate graphical images Establish where to position and how to format the graphicalimages Test the Web page for XHTMLcompliance Chapter 2: Creating and Editing a Web Page 6

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

  8. Elements of a Web Page(Window Elements) More on Web • 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 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 (<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

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

  11. Elements of a Web Page(Hyperlink Elements) More on Web • 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. Project 2: Creating and Editing a Web Page

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

  13. Starting Notepad Click the Start button on the Windows Vista taskbar to display the Startmenu ClickAllPrograms at the bottom of the left pane on the Start menu to display the All Programs list ClickAccessories in the All Programs list ClickNotepad in the Accessories list to display the Notepadwindow If the Notepad window is notmaximized, click the Maximizebutton on the Notepadtitlebar to maximize it See next slide Project 2: Creating and Editing a Web Page Chapter 2: Creating and Editing a Web Page 13

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

  15. Enabling Word Wrap in Notepad ClickFormat on the menubar If the WordWrap command does not have a checkmark next to it, clickWordWrap See next slide Project 2: Creating and Editing a Web Page Chapter 2: Creating and Editing a Web Page 15

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

  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 scrollbar - used to view different portions of text area • scroll box – indicates current location in file Project 2: Creating and Editing a Web Page

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

  19. Entering HTML Tags and Text More on Web • 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 Project 2: Creating and Editing a Web Page

  20. Entering HTML Tags to Define the Web Page Structure More on Web • <!DOCTYPE> tag tells browser which HTML or XHTMLversion 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 Project 2: Creating and Editing a Web Page

  21. Defining the Web Page Structure Using HTML Tags Use the HTML templateon the In-Chapter HTMLChapter 2 Web pageto create the codelisted here Project 2: Creating and Editing a Web Page Chapter 2: Creating and Editing a Web Page 21

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

  23. Creating an Unordered List discbullet list squarebullet list circlebullet list 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 Project 2: Creating and Editing a Web Page

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

  26. Saving an HTML File With a USB flash drive connected to one of the computer’s USBports, clickFile on the Notepad menu bar ClickSave As on the File menu to display the Save As dialog box If the Navigationpane is not displayed in the Save As dialog box, click the BrowseFoldersbutton to expand the dialog box If a Folders list is displayed below the Folders button, click the Foldersbutton to remove the Folders list Typefooddrive.html in the File name text box to change the file name. Do notpressENTER after typing the filename If Computer is notdisplayed in the FavoriteLinks section, drag the top or bottomedge of the Save As dialog box until Computer is displayed Project 2: Creating and Editing a Web Page Chapter 2: Creating and Editing a Web Page 26

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

  28. Web Page Images More on Web • 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 Project 2: Creating and Editing a Web Page

  29. 3 Image Types More on Web • 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 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 Project 2: Creating and Editing a Web Page

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

  32. Improving the Appearance of Your Web Page image centeredheading horizontalrule backgroundcolor Project 2: Creating and Editing a Web Page

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

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

  35. Adding an Image imageHTML code Project 2: Creating and Editing a Web Page

  36. Adding a Background Color backgroundcolor HTML code Project 2: Creating and Editing a Web Page

  37. Centering a Heading center headingHTML code Project 2: Creating and Editing a Web Page

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

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

  40. Validating HTML Code Project 2: Creating and Editing a Web Page Click the Address bar on the browser to highlight the currentURL Typevalidator.w3.org to replace the currententry then press the ENTER key If necessary, clickOK if the browser asks to open a newwindow Click the Validate by File Upload tab Click the Browsebutton Chapter 2: Creating and Editing a Web Page 40

  41. Validating HTML Code Project 2: Creating and Editing a Web Page Locate the fooddrive.html file on yourstoragedevice and then click the filename Click the Openbutton on the Choose file dialog box and the filename will be inserted into the File box Click the Checkbutton. The resultingvalidation should be displayed. –see next slide Return to the Community Food Drive Web page, either by clicking the Backbutton on your browser or by clicking the Community Food Drive button in the taskbar Chapter 2: Creating and Editing a Web Page 41

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

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

  44. Printing a Web Page and an HTML File 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 HTMLtags • Enter headings and a paragraph of text Project 2: Creating and Editing a Web Page

  46. Project Summary • Create an unordered, ordered, or definitionlist • Save an HTML file • Use a browser to view a Web page • Activate Notepad • Identify Web page imagetypes and attributes Project 2: Creating and Editing a Web Page

  47. Project Summary • Add an image, change the backgroundcolor of a Web page, center a heading, and add a horizontalrule • View the HTML sourcecode in a browser • Print a Web page and an HTML file • Quit Notepad and a browser Project 2: Creating and Editing a Web Page

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

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

More Related