HTML and CSS basics

• Discuss what Ajax is and why it is useful
• Review very basic XHTML and HTML5 concepts
• Review very basic CSS concepts
• Explain how XHTML/HTML5, CSS, and JavaScript are used together
• Demonstrate how to make browsers more compatible (html5shiv, Reset CSS)
• Develop a template to base most web pages on

• Ajax was originally an acronym for Asynchronous JavaScript and XML.
• Ajax usually uses a combination of XHTML/HTML5, CSS, and JavaScript.
• Ajax allows a web page to change content using data from the server and update a web page without having to reload the page.
• Ajax relies on something called an XMLHttpRequest to communicate between client and server
• Data is usually transferred between the client and server using either plain text, HTML, XML or JSON data formats.
• Many uses of Ajax rely upon knowing how to manipulate/navigate the DOM (Document Object Model).

For this course, we will use HTML 5 as our standard. A lot of the new features are not implemented across all the browsers yet, but we can get started by using the HTML 5 template and using some of the more commonly implemented new features. Since the head element is processed before the body element, it is common to move the script tags to the bottom of the document so they come just before the closing body tag. This can help make a page appear to load faster since content starts appearing sooner.

We will review whatever HTML tags we need as they are encountered in class. The basic structure tags for elements with and without content is given below:

• <tagname attribute1="value1" attribute2="value2">content of element</tagname>
• <tagname attribute1="value1" attribute2="value2">

Add the following in the "head" element to help versions of Internet Explorer prior to version 9 work better by adding in some standard elements and styling.

<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]-->

Other useful compatibility tools:

• HTML5 shiv: provides HTML5 for IE before version 9
• normalize.css: selectively sets styles to same across browsers
• Eric Meyer's Reset CSS tool: removes all styling
• shim.js contains ES5 features that can be implemented using ES3
• sham.js contains ES5 features that can't be implemented using ES3 (needs shim.js)

Browsers may have some inconsistencies in the way they display certain elements. Those inconsistencies can be reduced by including a set of CSS rules that resets everything to a base standard. These rules must be placed before all other CSS rules in your document. Eric Meyer has written a great CSS reset tool which he has posted on his website meyerweb.com. One technique you can use is to store Eric Meyer's Reset CSS tool locally and then included it as the first set of CSS rules as a link in your web page template.

• CSS controls the appearance of X/HTML elements
• CSS can be included inline as a value of the style attribute of an XHTML tag
• CSS can be embedded by placing it in a style element in the head of a web document
• an external CSS file (usually with a .css extension) can be added to a web page using a link tag in the head of a web document
• div tags are often used for specifying block-level elements without having to use the formatting the automatically comes with p, h1, h2, h3, etc. tags
• HTML5 has a number of new elements such as article, section, aside, nav, details, summary, figure, header, footer, etc.
• span tags are often used for specifying inline elements so that styles can be applied to them
• class names are used to specify styles for potentially many elements that have the same class name; specified using a . (period)
• id names are used to specify styles for a single element that has that unique id; specified using a # (octothorpe, pound sign, hash mark, sharp)

• XHTML (eXtensible HyperText Markup Language) or HTML5 is used to provide the structure and content of a web page
• CSS (Cascading Style Sheets) is used for presentation, specifying the page's appearance
• JavaScript controls the behavior of the web page

The completed template with the html5shiv link and Eric Meyer's reset (stored locally) is shown below. This template assumes all JavaScript and CSS will be stored in separate files. The template also assumes that the CSS and JavaScript files will be stored in their own directories.

Note: The html5shiv.js code is no longer required in this course.