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

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)


• World Wide Web (www.)

– Hypertext Transfer Protocol (HTTP)

– File Transfer Protocol (FTP) – Labweb, for example

– Email Protocol (Mailto:)

– Other Protocols (we won’t use)• Telnet:, Gopher:, WAIS: (Wide Area Info. Server),

NNTP: (Network News Transfer Protocol)


• 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


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


• Web Browsers (internet client) – Internet Explorer

– Firefox/Mozilla

– Google Chrome

– Safari (Mac)

– Netscape

– Opera

– Linx (text-based)


• Web Browsers (cont.)

– Display Web Pages by interpreting code

– Uniform Resource Locator (URL)• http://www.webster.edu

– Hyperlinks

– DNS look-up


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


• HTML Versions– 0.9 ver. (1990)– HTML 4.01

– HTML5 (current version)

• World Wide Web Consortium (W3C)– www.w3.org

– HTML standards organization

• Deprecated Tags– Tags that are being phased out and are no longer

recommended for use. Asterisked (*) in Appendix A.


• HTML Elements

– HTML elements begin with a start/opening tag inside angles; <p>

– HTML elements finish with a end/closing tag inside angles preceded by a slash; </p>

• The element content is inserted between the start and end tags: <p>This is a paragraph of text.</p>

– Some HTML elements have empty content; <br /> or <hr />

• Empty “self-ending” elements are closed in the start tag; they use a space + /; <br /> or <hr /> or <img />

• Even these tags take attributes.


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


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


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


• 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 <DOCTYPE> statement:

<!DOCTYPE HTML>

<html>at the top of our web pages.


• Hypertext Markup Language (HTML) Page Structure

<html > <head> <title>HTML Template</title> </head> <body>

</body></html>

Intro. to XHTML: Chapter 1• Extensible Hypertext Markup Language

(XHTML)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XHTML Template</title> </head>

<body>

</body>

</html>

Intro. to XHTML: Chapter 1• Hypertext Markup Language (HTML5)

<!DOCTYPE HTML <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XHTML Template</title> </head><body> <header> <nav></nav> </header> <section> <aside></aside> <article>

</article> </section> <footer></footer></body></html>


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


• Web Development Life Cycle– Planning

– Analysis

– Design & Development

– Testing

– Implementation

– Maintenance


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


• 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 email confirmations, etc.?


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


• 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


• 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

Documents

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