Research Resources : HTML: Extended Guide

In the HTML: Basic Guide you learned some common tags that will help you embed images and videos in your web page. This guide covers some additional HTML tags and HTML attributes that will give you greater control over the appearance of your page.

Table Tags

Table tags define rows and columns of tables. You should only use tables when the content type calls for them. For example, images will be embedded in tables and some of your data may need to be displayed in a table. Here is the HTML code for the table in the image (html tags appear in bold):

Horizontal Rule Tag

Unlike the other tags, this tag does not have a start tag. The <hr />, or horizontal rule, tag inserts a horizontal line that spans the width of a page.

Input: <hr />

Output:

Bold and Italics Tags

These tags surround individual words or phrases within paragraphs or headings. The <strong> tag tells the browser to display text in bold and the <em> tag tells it to display text in italics.

HTML CODE	OUTPUT
<p>This is a paragraph formatted with <strong>Normal</strong>, or paragraph, text.</p>	This is a paragraph formatted with Normal, or paragraph, text.
<h3>This heading contains a phrase that <em>appears in italics</em>. </h3>	*This heading contains a phrase that appears in* italics.**

Bulleted and Numbered Lists

The <ul>, or unordered list, tag tells the browser to display list items as a bulleted list. The <ol>, or ordered list, tag tells it to display list items as a numbered list.

HTML CODE

OUTPUT

<ul>

<li>Bullet one</li>

<li>Bullet two</li>

<li>Bullet three</li>

</ul>

• Bullet one

• Bullet two

• Bullet three

<ol>

<li>Number one</li>

<li>Number two</li>

<li>Number three </li>

</ol>

1. Number one

2. Number two

3. Number three

HTML Attributes

What are attributes?

Attributes are used to provide additional information about HTML tags. They are defined in the start tag and must be entered in the format Attributes are used to provide additional information about HTML tags. They are defined in the start tag and must be entered in the format Attributes are used to provide additional information about HTML tags. They are defined in the start tag and must be entered in the format.

Src Attribute

The source (src) attribute is used to define the location of images, videos, and hyperlinks. The following source attribute defines the location of an image that is hosted on Picasa Web Albums.

Note: The image (img) tag does not have an end tag. Instead, the tag is closed by placing a space followed by a back slash before the closing angle bracket.

Alt Attribute

The alt attribute provides alternate information for an image. For instance, the alternate text is displayed in place of the image in cases where a slow connection prevents an image from loading. Screen readers use the alternate text to provide a description of the image to visually impaired users.

Width and Height Attributes

Width and height attributes define dimensions for content like images and videos. The following video will be sized at 480 pixels by 360 pixels.

Href and Target Attributes

The href attribute specifies a URL for a web address. The target attribute specifies how a web page is opened. The value "_blank" tells the web page to open in a new window or new tab.

<a href="http://www.spatialsci.com/goowi/"target="_blank">GooWi Explorers Website</a>

Note: The text between the <a> tags will appear as the link text: GooWi Explorers Website.

Style Attribute

The style attribute allows you to define inline style for an element. The following example defines the style for the text enclosed in the paragraph tags.

<p style="font-family: Arial; font-size: 150%; color: #333333;">This is a paragraph.</p>

You will learn more about the style attribute in the CSS: Extended Guide.