HTML and CSS basics

Objectives

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

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

Basic web page template (HTML5)

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.

<!DOCTYPE html> <html lang="en"> <head> <title>Title of page</title> <meta charset="utf-8"> <link rel="stylesheet" href="style1.css"> <style> /* style rules go here */ </style> <script src="js1.js"></script> </head> <body> This is where the displayable content goes. </body> </html>

Structure of a tag

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">

HTML comments

Making Internet Explorer work better

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.

Reset CSS

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.

Very brief review of CSS

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)

How it all fits together

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

Completed template

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 theor own directories.

<!DOCTYPE html> <html lang="en"> <head> <title>Title of page</title> <meta charset="utf-8">   <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style1.css"> </head> <body> <div>Content of template document.</div> <script src="scripts/js1.js"></script> </body> </html>