XP 1 Developing a Basic Web Page Tutorial 1

XP 2 Introducing the World Wide Web Network - linking computers, sharing resources Network - linking computers, sharing resources host or node - access network host or node - access network Server - resources available to network Server - resources available to network Client-server network Client-server network

XP 3 Introducing the World Wide Web linked within a local area network (LAN) linked within a local area network (LAN) Metropolitan area network (MAN) Metropolitan area network (MAN) linked across a wide area network (WAN) linked across a wide area network (WAN) Personal area network (PAN) Personal area network (PAN) Wireless (WLAN) Wireless (WLAN)

XP 4 Introducing the World Wide Web Internet -global network - connects IP networks Internet -global network - connects IP networks IP - internet protocol - basic protocol IP - internet protocol - basic protocol WEB - internet-based distributed information system WEB - internet-based distributed information system Network is computer Network is computer

XP 5 Structure of the Internet

XP 6 The Development of the Word Wide Web WWW - grows rapidly - extent, capabilities, applications, global expansion WWW - grows rapidly - extent, capabilities, applications, global expansion Powerful tool - mass communication, e-business, e- commerce Powerful tool - mass communication, e-business, e- commerce Strength - openness, speed, low cost of entry Strength - openness, speed, low cost of entry Internet Internet Intranet Intranet Extranet Extranet Hyperlinks Hyperlinks Virtual office or store - always open, supported by workers from anywhere Virtual office or store - always open, supported by workers from anywhere

XP 7 Linear versus hypertext documents

XP 8 Hypertext Documents Enabling technologies Enabling technologies Networking protocols Networking protocols Data encoding formats Data encoding formats Clients (browsers) Clients (browsers) Servers Servers Markup and styling languages Markup and styling languages Client-side and server-side programming Client-side and server-side programming HTTP - hypertext transfer protocol HTTP - hypertext transfer protocol CSS CSS Javascript Javascript CGI - common gateway interface CGI - common gateway interface

XP 9 Hypertext Documents Web site Web site Web page Web page Web - consists of vast collection of documents located on computers throughout the world - in special formats and retrieved through server programs on each computer Web - consists of vast collection of documents located on computers throughout the world - in special formats and retrieved through server programs on each computer

XP 10 Web Servers and Web Browsers A Web page is stored on a Web server, which in turn makes it available to the network A Web page is stored on a Web server, which in turn makes it available to the network To view a Web page, a client runs a software program called a Web browser, which retrieves the page from the server and displays it To view a Web page, a client runs a software program called a Web browser, which retrieves the page from the server and displays it Text-based browser - Lynx Text-based browser - Lynx Graphical browser - opera, firefox, IE, Netscape, Safari Graphical browser - opera, firefox, IE, Netscape, Safari Sufficient understanding - master new communication medium Sufficient understanding - master new communication medium Artistic design Artistic design Visual communication Visual communication Information architecture Information architecture Color and graphics Color and graphics programming programming

XP 11 Using a browser to view a Web document from a Web server

XP 12 HTML: The Language of the Web Hypertext Markup Language Hypertext Markup Language A markup language - language that describes a document’s structure and content A markup language - language that describes a document’s structure and content HTML - not a programming language or a formatting language HTML - not a programming language or a formatting language Styles - format descriptions written in a separate language from HTML that tell browsers how to render each element. Styles - format descriptions written in a separate language from HTML that tell browsers how to render each element.

XP 13 The History of HTML The first version of HTML - Standard Generalized Markup Language (SGML) The first version of HTML - Standard Generalized Markup Language (SGML) Deprecated Deprecated XML - extensible markup language XML - extensible markup language XHTML - extensible hypertext markup language XHTML - extensible hypertext markup language

XP 14 Tools for Creating HTML Documents Basic text editor - Notepad Basic text editor - Notepad HTML Converter - converts formatted text into HTML code HTML Converter - converts formatted text into HTML code HTML Editor – create an HTML file by inserting HTML codes for you as you work HTML Editor – create an HTML file by inserting HTML codes for you as you work

XP 15 Creating an HTML Document Core - web site development Core - web site development Visual communication design Visual communication design Programming Programming Good web site Good web site Serve intended purpose Serve intended purpose Structure and organize content of site - effective and efficient deliver Structure and organize content of site - effective and efficient deliver Convenient Convenient Pleasing Pleasing Functional Functional Attractive Attractive

XP 16 Creating an HTML Document To achieve goals - expertly produced site - more cost effective than other mass communications To achieve goals - expertly produced site - more cost effective than other mass communications Information architecture Information architecture Visual communication design Visual communication design Color and graphics Color and graphics Fonts Fonts Layout Layout Visual hierarchy Visual hierarchy Symmetry Symmetry Balance Balance Unity Unity Variation Variation

XP 17 Creating an HTML Document

XP 18 Creating an HTML Document Element - distinct objectElement - distinct object DocumentDocument ParagraphParagraph HeadingHeading Page titlePage title

XP 19 Marking Elements with Tags The core building block of HTML - tag, which marks each element in a document The core building block of HTML - tag, which marks each element in a document A two-sided tag - A two-sided tag -<element>content</element> A two-sided tag’s opening tag ( ) and closing tag ( ) - completely enclose its content A two-sided tag’s opening tag ( ) and closing tag ( ) - completely enclose its content A one-sided tag contains no content; general syntax for a one-sided tag: A one-sided tag contains no content; general syntax for a one-sided tag: A third type of tag is the comment tag, which you can use to add notes to your HTML code A third type of tag is the comment tag, which you can use to add notes to your HTML code

XP 20 White Space and HTML HTML file documents - composed of text characters and white space HTML file documents - composed of text characters and white space White space - blank space, tabs, and line breaks within the file White space - blank space, tabs, and line breaks within the file HTML treats each occurrence of white space as a single blank space HTML treats each occurrence of white space as a single blank space Use white space - document more readable Use white space - document more readable

XP 21 Element Attributes Many tags contain attributes that control the behavior, and in some cases the appearance, of elements in the page Many tags contain attributes that control the behavior, and in some cases the appearance, of elements in the page Attributes are inserted within the tag brackets Attributes are inserted within the tag brackets for one-side tags for one-side tags content for two-sided tags content for two-sided tags

XP 22 The Structure of an HTML File - - Anything between these two tags makes up the content of the document, including all other elements, text, and comments Anything between these two tags makes up the content of the document, including all other elements, text, and comments Head element - information about document Head element - information about document Title element Title element Body element - contains all content of web page Body element - contains all content of web page Nesting Nesting Block level elements - separate section Block level elements - separate section Inline elements Inline elements

XP 23 Initial HTML code in chem.htm

XP 24 Initial Web page viewed in Internet Explorer

XP 25 Creating Headings HTML supports six heading elements HTML supports six heading elements

XP 26Styles Inline styles Inline styles Text-align style - horizontally align Text-align style - horizontally align Presentational attributes specify exactly how the browser should render an element Presentational attributes specify exactly how the browser should render an element Creating paragraphs - start a new line Creating paragraphs - start a new line

XP 27 Creating Lists HTML supports three kinds of lists: ordered, unordered, and definition HTML supports three kinds of lists: ordered, unordered, and definition Ordered list - appear in a particular sequential order Ordered list - appear in a particular sequential order Unordered list - do not need to occur in any special order Unordered list - do not need to occur in any special order One list can contain another list; this is called a nested list One list can contain another list; this is called a nested list

XP 28 Applying a Style to a List

XP 29 Creating a Definition List The definition list contains a list of definition terms, each followed by a definition description The definition list contains a list of definition terms, each followed by a definition description Web browsers typically display the definition description below the definition term and slightly indented Web browsers typically display the definition description below the definition term and slightly indented Chemistry I An introductory course requiring solid algebra skills

XP 30 Working with Inline Elements Character formatting elements - format text characters Character formatting elements - format text characters A logical element describes the nature of the enclosed content, but not necessarily how that content should appear A logical element describes the nature of the enclosed content, but not necessarily how that content should appear A physical element describes how content should appear, but doesn’t indicate the content’s nature A physical element describes how content should appear, but doesn’t indicate the content’s nature You should use a logical element that accurately describes the enclosed content whenever possible, and use physical elements only for general content You should use a logical element that accurately describes the enclosed content whenever possible, and use physical elements only for general content

XP 31 Working with Empty Elements To display a graphic - inline image - displays a graphic image located in a separate file within the contents of a block-level element To display a graphic - inline image - displays a graphic image located in a separate file within the contents of a block-level element Horizontal line - the one-sided tag Horizontal line - the one-sided tag A pixel - dot on your computer screen that measures about 1/72” square A pixel - dot on your computer screen that measures about 1/72” square Other empty elements - line breaks and meta elements Other empty elements - line breaks and meta elements Meta elements are placed in the document’s head and contain information about the document that may be of use to programs that run on Web servers Meta elements are placed in the document’s head and contain information about the document that may be of use to programs that run on Web servers

XP 32 Occasionally you will want to include special characters in your Web page that do not appear on your keyboard 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 HTML supports the use of character symbols that are identified by a code number or name ₤ ® Working with Special Characters &code

XP 33 Working with Special Characters

XP 34 Summary: Tips for Good HTML Code Use line breaks and indented text to make your HTML file easier to read Use line breaks and indented text to make your HTML file easier to read Insert comments into your HTML file to document your work Insert comments into your HTML file to document your work Enter all tag and attribute names in lowercase Enter all tag and attribute names in lowercase Place all attribute values in quotes Place all attribute values in quotes Close all two-sided tags Close all two-sided tags

XP 35 Summary: Tips for Good HTML Code Make sure that nested elements do not cross Make sure that nested elements do not cross Use styles in place of presentational elements whenever possible Use styles in place of presentational elements whenever possible Use logical elements to describe an element’s content Use logical elements to describe an element’s content Use physical elements to describe the element’s appearance Use physical elements to describe the element’s appearance

XP 36 Summary: Tips for Good HTML Code Include the alt attribute for any inline image to specify alternative text for non-graphical browsers Include the alt attribute for any inline image to specify alternative text for non-graphical browsers Know your market and the types of browsers that your audience will use to view your Web page Know your market and the types of browsers that your audience will use to view your Web page Test your Web page on all relevant browsers Test your Web page on all relevant browsers

XP 37 Assign #1 - Chapter 1, Tutorial 1, print html code only (due 9/26/06). Assign #1 - Chapter 1, Tutorial 1, print html code only (due 9/26/06). Assign #2 - Case Problem #1, pg , Case Problem #2, pg , print HTML code only (due 10/3/06). Assign #2 - Case Problem #1, pg , Case Problem #2, pg , print HTML code only (due 10/3/06).