Let’s explore some of the core elements of HTML. This discussion will merely scratch the surface of HTML’s capabilities, but even so it will give you the ability to create fairly versatile and useful web pages.

Paragraph tags (<p> . . . </p>) enclose text that should be treated as a separate paragraph. A browser usually begins each paragraph on a new line, with some space separating it from preceding and following paragraphs.

The <hr /> tag inserts a horizontal rule (that is, a line) across the page. Horizontal rules are helpful in breaking a webpage into sections. The horizontal rule element doesn’t enclose content, so the start and end tag is combined into one, which is why the / is included at the end.

It is often useful to display a list of items. The ul element defines an unordered list, while the li element represents a single list item. In the Student Dynamics example, three list items are enclosed in the <ul> . . . </ul> tags. By default, the major browsers display an unordered list using bullets. If the ordered list element (ol) is used, the list items are numbered sequentially. Both unordered lists and ordered lists can be nested, creating a hierarchy of lists. Unordered nested lists use different bullet types for each level, and the numbering for each ordered list begins over again at each level.

Several elements are used to define headings in a document. HTML includes six predefined heading elements: h1, h2, h3, h4, h5, and h6. Text enclosed in <h3> . . . </h3> tags, for instance, is treated as a level 3 heading, which by default is displayed in a larger font than level 4 and a smaller font than level 2. Headings are also displayed in bold by default. Heading tags don’t have to specify text that introduces a section; they can be used anywhere you want to change the look.

The em element specifies text that should be emphasized. By default, browsers display emphasized text in italics. The strong element is similar, and by default is displayed in bold type.

Note that the manner in which browsers display a particular element by default may vary slightly from browser to browser. Therefore, the same web page may look different depending on which browser you use to view it. But the default styling of any element can be modified using CSS styles.

Many tags can contain attributes that indicate additional details about the information or describe how the enclosed information should be displayed. Attributes take the following form:

attribute-name=value

For example, the paragraph element just below the title image on the Student Dynamics page contains the attribute

style=”text-align:center”

which is a CSS style specification indicating that the text of the paragraph should be centered horizontally on the page.

An image can be incorporated into a web page using the img element, which takes an attribute that identifies the image file to display. The attribute name is src, meaning the source of the image. There is no separate closing tag for the img element, so the / is used at the end. For example,

<img src=”myPicture.gif” />

inserts the image stored in the file myPicture.gif into the HTML document.

In the Student Dynamics example, an image is used as a banner at the top of the page. In another location, a small image indicates which information on the website has been recently updated.

Finally, links are specified using the element a, which stands for anchor. An anchor tag contains an attribute called href that specifies the destination URL. For example,

<a href=”http://google.com/”>Google It!</a>

shows the text “Google It!” on the screen as a link. When the user clicks the link, the Google Home page is retrieved and displayed in the browser, replacing the current page.

By default, most browsers display a link in blue, underlined text. As with other elements, this default styling can be overridden with CSS style specifications. Let’s explore CSS in more detail.

We’ve seen how CSS styles can be specified as an attribute of an HTML element:

<p style=”text-align:center”>This text is centered!<p>

In this case, the style attribute indicates that the text of this paragraph should be centered instead of the default left alignment. But this style applies only to this single paragraph. What if we want to establish a style for all paragraphs on the page?

CSS styles can also be expressed in the head section of the HTML document. For example, we could put the following style tag (not an attribute this time, but a tag) between the <head> and </head> tags:

<style type=”text/css”>
    p {color:#00FF00;}
</style>

If we put this tag in the head of the document, it will apply to all paragraph tags in the document (unless it is overridden by a style attribute on a particular paragraph). In this case, the tag will cause all paragraph text to be colored green.

In the Student Dynamics example, the following style tag is used in the head section of the document:

<style type=”text/css”>
   img.banner {display:block; margin:auto;}
   a:link {color:#0000FF; text-decoration:none;}
   a:visited {color:#00FF00; text-decoration:none;}
   a:hover {color:#FF00FF; text-decoration:underline;}
</style>

The first style rule in this example applies to all img tags that have been designated with the class banner (using the class attribute). Element classes are used to specify a subset of elements. In the Student Dynamics example, the banner class is applied only to the image at the top of the page. By setting the margins to auto, we center the image horizontally on the page.

The other three style rules affect the various states of an anchor link. Recall that by default, a link is shown in blue underlined text. If we set text-decoration to none, the underline is removed. So, these rules establish that an unvisited link is shown in blue text with no underline, a visited link is shown in green with no underline, and when the mouse hovers over a link, the link text turns purple with an underline.

In addition to being able to specify styles at the element level and the document level, you can also put CSS style rules in a separate external file. That way, multiple pages, or even an entire website, can easily share a consistent set of style rules. And that’s where the word cascading comes from in Cascading Style Sheets: Styles can be specified at multiple levels and overridden at lower levels as needed.

The HTML5 standard streamlines many of the issues that were problematic in previous versions. It features many new tags to represent content, including:

• <section> - to define sections of pages

• <header> - to define the header of a page

• <footer> - to define the footer of a page

• <nav> - to define the navigation elements on a page

• <article> - to define an article or primary content of a page

• <aside> - to define secondary content that might appear in a sidebar

• <figure> - to define images that annotate an article

Another exciting aspect of HTML5 is its support of dynamic content— content that changes even if the user is not interacting with the page. Some dynamic techniques are discussed later in this chapter, though HTML5 may make some of them unnecessary over time.

One example of the support of dynamic content in HTML5 is the idea of a context menu for presenting drop-down menus as appropriate. There is also an additional attribute (async) that can be included in a tag to indicate content that should be loaded asynchronously, which helps increase page loading speed.

HTML5 also includes several new tags that support accepting input from a form, such as tags for time and dates, as well as fields for ranges, email addresses, and URLs.

Of course, this book can only provide a glimpse into the world of web page development using HTML and CSS. You are encouraged to use this as a starting point to explore this area of computing in more detail.