Contents

Overview

This page will cover some basics about the parts of a web page and the tags that are used to mark up text. First, HTML is the language used for web pages. It stands for Hyper-Text Markup Language. As its name suggests, it is not a programming language, but rather a markup language.

(Back to top)

Parts of a web page

A web page has several parts. The main ones are:

The header is where we can provide the title for our page (which shows up at the top of a browser window) and is also where we can define styles (using Cascading Style Sheets, or CSS) and scripts (JavaScript).

Web pages consist of a collection of tags organized hierarchically. Most tags come in pairs: there is an opening tag and a closing tag. Tags are enclosed in angled brackets. For example, one tag is the HTML tag, which sits at the top of the hierarchy and envelopes the entire page. Its opening tag looks like <html> and it's closing tag looks like </html> (notice the forward slash after the first angled bracket).

A very basic web page will consist of a few additional tags: a head tag and a body tag:

Anatomy of a tag

Tags have different parts. The first is the name, which we've already seen. The other parts are called attribute-value pairs. Generally speaking, we have the following:

E.g.,

Different tags have different attributes available to them. All tags can make use of the class attribute, which allows us to apply a pre-defined style (font color, size, etc.) to the text enveloped by the tag.

(Back to top)

Common tags

title — Used to specify the title for a page; this can only be used within the <head> tag. E.g.:

h1 — Used for header text.

h2 — Like h1, but a little smaller. 

h3 — Like h2, but a little smaller.

h4 — Like h3, but a little smaller.

a — A link to another page. Requires an href attribute with the URL as the value. E.g.:

This would create a link that is displayed as "Go to Google", and when clicked will navigate the user to http://www.google.com. 

p — A paragraph. Surround each paragraph of text with a paragraph tag to get reasonable spacing before and after.

ul — An unordered list. Each item is preceeded with a bullet.

ol — An ordered list. Each item is preceeded with a number.

li — An item. Must be within a <ul> or <ol> tag. E.g.,

u — Underline text.

strong — Bold text.

em — Emphasize, or italicize text.

br — Adds a blank line. The opening and closing tags are combined: <br/>

span — Use this to apply a style to a span of text. You'll need to use the class attribute to specify what style to apply.

(Back to top)

Styles

You can defined styles for tags and classes in the header of your web page, or in another file and then import that file. For the former, the definitions are enclosed within style tags. The way they work are, you first specify the tag or class you want to define the style for, then add opening and closing curly braces. With in the curly braces, you can define the style. The aspects you specify must be separated with semi colons. Also, style classes are indicated by a leading '.'. E.g.:

This defines the style for the paragraph tag, which means all text within a paragraph tag will be colored orange and will have a 15pt font size. We also defined a style class called mystyle, which colors text blue and uses a San-Serif font. We can use this class by including it as the value in the class attribute of tags. E.g.,

There are many useful style options. here are some of the more common ones and their values:

StyleValuesDescription
color red, green, blue, yellow, orange, black, white, any hex color (see Color Hexa) Specifies the text color.
background-color (same choices as above) Specifies the background color.
font-size any number with a pt (point), px (pixels), or % suffix. Specifies the size of the text.
font-family serif, sans-serif, monospace, specific fonts (see this page for more options) Specifies the font of the text.
(Back to top)

CSS files

CSS stands for cascading style sheets. CSS files are just style definitions (like we went over in the previous section). You can include them in an HTML document by adding an import tag at the top. The code below will import the styles defined in the style sheet named "myStyles.css".

The "cascading" part refers to the order that style sheets are applied. CSS files included later (and in fact, style definitions within a single CSS file that occur later in the file) overrule earlier definitions for the same element. There's a lot of information out there about CSS. Here are some useful resources:

(Back to top)

JavaScript

JavaScript can be used to interact with HTML, CSS, the user, and servers. E.g., JavaScript can be used to upload and download data, modify the page layout and content, and check forms. JavaScript has access to the Document Object Model (DOM) (e.g., the web page HTML) via a global object called document. The document object has several functions available. I'll let you look them up. Besides the DOM, there are also many of objects built in, though they are not available in every browser, and different browser implement or refer to them differently. All objects, including document, are stored under the window object. However, most browsers let you refer to them directly (e.g., technically you should say window.document instead of document, but most browsers are fine with the latter).

Here are some helpful websites for learning more about JavaScript:

(Back to top)