Upload
meryl-howard
View
222
Download
0
Embed Size (px)
Citation preview
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 (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)
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)• http://www.webster.edu
– 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)– 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.
Intro. to XHTML: Chapter 1
• 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.
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 <DOCTYPE> statement:
<!DOCTYPE HTML>
<html>at the top of our web pages.
Intro. to XHTML: Chapter 1
• 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>
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 email 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