Deconstructing a Web Page
Sharaf Atakhanov
The Internet, the Web and HTML
- Internet — a
network of millions of interconnected computers
- WWW — collection
of millions of different documents
- W3C — World
Wide Web Consortium, the U.N. of the web
- HTML — Hypertext
Markup Language
- Browser — a
program to view HTML files
- Web Standards — technologies
for creating and interpreting web-based content that benefits the greatest
number of web users (XHTML, XML, CSS, DOM, ECMAScript)
A Typical Web Page
www.chevy.com
Behind the Scenes
www.chevy.com
How a web page is constructed...
HTML & XML
- Tag based coding language for web pages
- HTML Versions
- HTML 1.0 - Tim Berners Lee's baby
- HTML 3.0 - Updated Edition
- HTML 3.2 - Standardized Edition by W3C
- HTML 4.0 - Better then 3.2 but still limited in features
- XML - custom markup language that can describe the data it contains
- HTML 4.0 + XML = XHTML 1.0
XHTML 1.0
- Uses XML's basic rules and syntax
- Created a foundation for CSS
- Flavors:
- Frameset — Uses
frames & uses depreciated HTML tags
- Accessibility and Usability issues
- Printing problems
- Transitional — Valid XHTML, CSS for formatting,
light use of tables for layout, accessibility attributes
- For sites visited by 4.0 browsers and up
- Forward and Backward compatibility
- Paves the way for pure CSS layout without tables
- Strict — Full
separation of structure from presentation and behavior, CSS for layout,
accessibility attributes
- Forward Compatibility
- Reaches more users, less code forking and versioning
- Easier to incorporate into Content Management Systems and template
driven sites
- Site will continue to work on future browsers and devices
CSS = Cascading Style Sheets
- Used to format a web page or a collection of web pages
- Define font, margin, color, typography and much more
- Create multiple style sheets for screen, print, pda, and even projection.
- Results in cleaner XHTML code
- Reduces download time
- Control global elements of a web page
- To apply CSS attributes XHTML Pages can
- Link to an external CSS file
- Embed the CSS properties within the page
CSS in Action
www.chevy.com
HTML Basics
- Head & Body
- Doctype
- Markup Elements, Attributes, and Values
- Block vs. Inline
- Parents and Children
- File Names
- URLs: Absolute URLs and Relative URLs
Tags, Linking and More...
- <h1></h1>
- <p></p>
- <img src="deconstruct/css-sample.gif" alt="CSS
behind chevy.com" width="606" height="396">
- <a href="url.html">Your Link</a>