COAP 2000: Intro. to (X)HTML Chapter 1

Intro. to XHTML: Chapter 1 The Internet –It’s a Network. –Internet Backbone (T1, T3) –Internet Service Provider (DSL, Cable, ISDN)

Intro. to XHTML: Chapter 1 World Wide Web ( –Hypertext Transfer Protocol (HTTP) –File Transfer Protocol (FTP) – Labweb, for example – Protocol (Mailto:) –Other Protocols (we won’t use) Telnet:, Gopher:, WAIS: (Wide Area Info. Server), NNTP: (Network News Transfer Protocol)

Intro. to XHTML: Chapter 1 World Wide Web (www) (cont.) –Web Server (Web Site Hosting Server) We “publish” to it. –Web Sites Home Page, internal web pages, scripts, etc. –Web Pages Hyperlinks connect pages together Within the same site or to other web sites

Intro. to XHTML: Chapter 1 Types of Web Sites –Internet Static –Each page built and uploaded individually Dynamic –Each page built “on the fly” using databases. E-commerce, etc. –Intranet (an internal web site for an organization, usually for employees; at a university, faculty and students) –Extranet (a site set up for a company’s external audiences, such as suppliers, investors, key customers, etc.) )

Intro. to XHTML: Chapter 1 Web Browsers (internet client) –Internet Explorer –Firefox/Mozilla –Google Chrome –Safari (Mac) –Netscape –Opera –Linx (text-based)

Intro. to XHTML: Chapter 1 Web Browsers (cont.) –Display Web Pages by interpreting code –Uniform Resource Locator (URL) –Hyperlinks –DNS look-up

Intro. to XHTML: Chapter 1 Hypertext Markup Language (HTML) –Tags or Markup Define the structure and layout of a web document and how the page is displayed when viewed in a browser. –Attributes Define additional tag characteristics such as font style or border widths. Most HTML elements (tags) take attributes. –Platform-Independent You can create or code a web page on one type of computer but view it through a browser on another type of computer and it will look the same.

Intro. to XHTML: Chapter 1 HTML Versions –0.9 ver. (1990) –HTML 4.01 –HTML5 (current version) World Wide Web Consortium (W3C) – –HTML standards organization Deprecated Tags –Tags that are being phased out and are no longer recommended for use. Asterisked (*) in Appendix A.

Intro. to XHTML: Chapter 1 HTML Elements –HTML elements begin with a start/opening tag inside angles; –HTML elements finish with a end/closing tag inside angles preceded by a slash; The element content is inserted between the start and end tags: This is a paragraph of text. –Some HTML elements have empty content; or Empty “self-ending” elements are closed in the start tag; they use a space + /; or or Even these tags take attributes.

Intro. to XHTML: Chapter 1 Cascading Style Sheets (CSS) –Allow you to specify styles for various web page elements. –A Style is a rule that determines the appearance of a web page element. This can be an inline style, or a style in an embedded or an external style sheet. An inline style specifies a particular style that is unique to one usage in a particular line of code. It is coded as an attribute. –A Style Sheet is a series of rules that defines the style for a web page or an entire web site. An embedded style sheet specifies styles for one page. An external style sheet specifies styles for a web site.

Intro. to XHTML: Chapter 1 DOM (Document Object Model) –Describes a combination of HTML tags, CSS, and a scripting language (JavaScript) –DOM allows scripting languages of the underlying document to create interactive, animated web pages. The web page contains objects (elements, links, etc.) that can be manipulated. These enhanced web pages are more responsive to visitor interaction than a basic web page.

Intro. to XHTML: Chapter 1 Extensible Markup Language (XML) –Designed to transport and store data through a DTD (Document Type Definition). –A DTD defines the legal building blocks of XML document structure. XML doesn’t DO anything! XML was designed to carry data, not to display data. XML tags are not predefined. You must define your own tags. XML is designed to be self-descriptive. XML is a W3C Recommendation as of 1998.

Intro. to XHTML: Chapter 1 Extensible Hypertext Markup Language (XHTML) / HTML5 –A reformulation of HTML formatting so it conforms to XML structure and content rules. –By combining HTML and XML, XHTML combines the display features of HTML and the stricter coding standards of XML. –Our text and this course utilize the standards of XHTML with the newer HTML5 tags and attributes. To allow this, we will use the HTML5 statement: at the top of our web pages.

Intro. to XHTML: Chapter 1 Hypertext Markup Language (HTML) Page Structure HTML Template

Intro. to XHTML: Chapter 1 Extensible Hypertext Markup Language (XHTML) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " XHTML Template

Intro. to XHTML: Chapter 1 Hypertext Markup Language (HTML5) <!DOCTYPE HTML XHTML Template

Intro. to XHTML: Chapter 1 Web Page Creation –Text Editor for coding: Notepad, Notepad ++, BBedit (Macintosh) –“Save As…” for display as HTML pages HTML pages can be inserted into other programs: (Word, PPT, Excel, Access, Adobe Acrobat) –WYSIWYG Editors (What you see is what you get) Dreamweaver Front Page Amaya SiteSpinner Web Studio, etc.

Intro. to XHTML: Chapter 1 Web Development Life Cycle –Planning –Analysis –Design & Development –Testing –Implementation –Maintenance

Intro. to XHTML: Chapter 1 Web Site Planning –Who will use the site? Target Audience: users, computing environments Age, gender, general demographic background level of computer literacy –Content, owners, and authors Who owns and authors the information? Who decides if/where the information goes on the site?

Intro. to XHTML: Chapter 1 Web Site Analysis –Decisions about content and functionality –Identify tasks users need to perform This determines content that will be needed to be developed. –Processes to support web site features e.g.: E-commerce; use of scripts, forms, etc. –What information will be required? –What “back-end” functions will be needed to process? –Will users receive confirmations, etc.?

Intro. to XHTML: Chapter 1 Web Site Design & Development –Design: Graphic look, colors, fonts used, structure of site Structure: –Linear: web pages connect in a straight line –Hierarchical: web pages connect in tree-like structure –Webbed: navigation to any page desired –Broad: pages linked individually to the home page –Deep: requires users to follow a set path Appropriateness of multimedia and developing it Accessibility and internationalization

Intro. to XHTML: Chapter 1 Web Site Testing –Usability Testing Proof-reading pages, testing forms, link checking Testing loading speed, optimizing graphics Check the printing of pages to be printed –Compatibility Testing Browser checking Monitor size and resolution Platform checking (PC, Mac, Unix) –Stress testing Server testing, CGI Scripts, etc. (especially for E-commerce)

Intro. to XHTML: Chapter 1 Web Site Implementation & Maintenance –Implementation Publishing the site Content update schedules Broken link checking –Who’s responsible for maintenance? Updating responsibility Informing users of changes, maintenance alerts, etc. Monitoring logs: web statistics and metrics

Intro. to XHTML: Chapter 1 Be an Observant Web User –Observe functionality and design –Bookmark pages you think are effective –Be aware of new trends –Become a more effective web developer