XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML Documents Tutorial 8

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 2 Objectives Define HTML and understand how it works. Identify elements of a Web page. Examine the tools used to create HTML documents. Understand tags, attributes, and anchors. Describe phases in the Web Site Development Cycle. Create an HTML document.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 3 Understanding Markup Languages Hypertext Markup Language (HTML):  is a markup language that is used to create a HTML document.  A HTML document uses a Web browser to interprets and display the Web page. Markup language:  general term that indicates the separation of the formatting of a document and the content of a document.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 4 HTML document to Web Page HTML Document Web Browser INTERPRETS Web Page

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 5 Understanding Markup Languages The first version of HTML was developed in The World Wide Web Consortium (W3C) developed specifications, or sets of standards, that identify how a browser interprets the HTML code. The current specification for HTML is 4.01.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 6 Other Markup Languages Extensible Markup Language (XML):  began in 1998 to describe the format and structure of data. Extensible Hypertext Markup Language (XHTML) or XHTML 1.1:  the most recent markup language specification from the W3C

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 7 Web Page Elements A Web Page includes different elements  Headings  Paragraphs of text.  Bulleted Lists  Graphics, animated graphics  Hyperlinks  etc.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 8 HTML Document In a HTML Document  elements are indicated by codes (called Tags) that are attached to content. Example: every HTML document needs a title. Here’s how you do it. My first HTML document Opening tag Closing tag

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 9 Understanding Tags and Attributes Tags: codes that indicate different elements on a Web page such as titles, headings, paragraphs, and bulleted lists. Tags are either two-sided and require a a tag at the beginning and the end of the element, or they are one-sided. Once upon a time, there was a beautiful ….

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 10 Understanding Tags and Attributes Nested tags: tags that are included within other tags. The Lakeside Police Department is sponsoring a series of Self-Defense Classes for its female, elderly, disabled, and younger residents.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 11 Creating a HTML Document using a Text Editor To Create a Web Page  Use a text editor such as Notepad.  Type the content of the Web page and the tags that you need to format that content.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 12 Creating a HTML Document using a HTML Editor Programs such as Microsoft FrontPage or Macromedia Dreamweaver  provide a graphical user interface (GUI) in which you type the content of your Web page and use toolbar buttons and menus to format that content  and then the program creates all of the necessary tags to format the Web page.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 13 Planning an Effective Web Page Web Site Development Cycle  Planning Phase  Design Phase  Development Phase  Publishing Phase  Maintenance Phase

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 14 Web Site Development Cycle: Planning Phase Planning Phase  Gather information  Define goals  Determine intended audience  Determine technical requirements  Determine site organization

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 15 Web Site Development Cycle: Design Phase Design Phase  Create sample pages  Determine screen elements Fonts, colors, layout, navigation

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 16 Web-safe color palette Color is an element that depends on the user’s computer and browser to render it correctly. Web-safe color palette: a collection of 216 colors that all computers render in the same way.

Common Fonts New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 17 The fonts that are available on your computer are not always the same ones that are available on other computers. A good rule for beginning Web page developers is to use fonts that are considered to be common on all computers.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 18 Web Site Development Cycle: Development Phase Development Phase  Add content  Add interactivity  Add behaviors

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 19 Web Site Development Cycle: Publishing Phase Publishing Phase  Test site locally.  Upload to a web server.  Test remotely.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 20 Web Site Development Cycle: Maintenance Phase Maintenance Phase  Ensure that content is updated.

Planning an HTML Document A sketch of a final Web page New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 21

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 22 Creating an HTML Document Start Notepad. Save the document with the.html filename extension.  The filename extensions.htm and.html are associated with Web pages.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 23 Creating the HTML Document Structure Opening HTML tag – first item in a HTML document. Indicates that the file is an HTML document. Closing HTML tag – last item in a HTML document.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 24 Creating the HTML Document Structure Head section :  begins with the tag  includes general information, such as keywords that identify the document’s content, and comments about the document’s creator or the date the document was updated  includes the nested tag identifies the title of the Web page so the browser can display it in the title bar used to identify the content of the page appears as the default name when you use the browser to save the page as a bookmark or favorite The tag is a two-sided tag, so you must include the closing tag.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 25 Creating the HTML Document Structure Body section:  required in an HTML document after the head section  includes the content of the Web page along with the tags needed to format that content  the opening tag indicates the beginning of the body section  the closing tag indicates the end of the body section

Basic HTML Document Structure in Notepad New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 26

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 27 Adding a Comment to an HTML Document Comments identify the author, purpose, date created or last updated, and other information as required. Comment tag:  one-sided tag  the browser ignores it and does not display it in a Web page  is visible when you view the HTML document in a text editor  has the following syntax:  can appear anywhere in an HTML document

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 28 Inserting and Formatting Headings Identify headings with tags.  use the tag for a level-one heading  use the tag for a level-two heading  and so on down to the tag for a level six heading Example: Lakeside Police Department

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 29 Tag Attributes and Values Tag Attributes:  style attribute with the text-align: center value Example: Lakeside Police Dept

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 30 Tag Attributes and Values To change the color, add a color attribute to the heading tag. When using the style attribute, you can separate multiple values with a semicolon.  Example: Women’s Self

Headings Added to the Body Section New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 31

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 32 Inserting and Formatting a Paragraph To insert a paragraph in an HTML document:  type the opening paragraph tag  type the paragraph text  type the closing paragraph tag

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 33 Inserting and Formatting a Paragraph To change font style:  enclose the text in the appropriate tags  to change text to italics, use the italic tags and  to change text to bold, use the bold tags and

Paragraph Added to HTML Document New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 34