BASIC TAGS: Formatting & Hyperlinks

Basic Parts of the HTML Document

All HTML documents begin with an <html> tag and close with a </html> tag.

The <head></head> portion of the document sets off information that isn't displayed on the Web page itself but establishes information about the page or sends information to the server.

The <body></body> establishes the visible portion of the document.

Basic header Tags

The <title></title> tags put the name of the document in the title bar. You want to be sure your that you use a meaningful name as this will be the title of the page if it is bookmarked.
Basic text Formatting

Text can be formatted in a variety of ways. It can be made strong, or emphasized. You can also use strike-through and teletype.

Text can be formatted in a variety of ways. It can be <strong>made strong</strong>, or <em>emphasized</em>. You can also use <strike>strike-through</strike> and <tt>teletype</tt>. The PRE tag allows you to create pre-formatted text. For example:
Basic line Breaks

text can be broken in a variety of ways. We can use both line and Paragraph Breaks to force text to end and begin on a new line.

line Breaks

This is a line. We insert a <br /> and our text begins on a new line.

Paragraph Breaks

This is a line. We insert a <p> and our text skips a line and begins on a new line. Wee close the paragraph break with a </p> As well, the paragraph tag can contain an "align" attribute which controls the alignment of the proceeding text.
For example:

This is a paragraph break that forces our text to be aligned to the left.

This is a paragraph break that forces our text to be aligned to the center.

This is a paragraph break that forces our text to be aligned to the right.

The above text looks like this:

<p align="left">This is a paragraph break that forces our text to be aligned to the left.</p> <p align="center">This is a paragraph break that forces our text to be aligned to the center.</p> <p align="right">This is a paragraph break that forces our text to be aligned to the right.</p>

This basically replaces the older <center> tag.
heading Tags

There are 6 basic "headings".

heading 1

heading 2

heading 3

heading 4

heading 5
heading 6
These can also include alignment attributes. For example:

heading 1 with a right alignment

heading 2 with a justified alignment

The above text looks like this:

<h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6> These can also include alignment attributes. For example: <h1 align="right">heading 1 with a right alignment</h1> <h2 align="justify">heading 2 with a justified alignment</h2>

Hyperlinks You can create a standard hyper link through an a href="url" tag. The link can be to another site (i.e. cnn.com) or to another page relatively located within your site (i.e. Back to Main Menu.) For example: <a href="http://www.cnn.com" />To cnn.com</a> <a href="index.html" />Back to the class menu</a> <a href="../index.html" />Back to my Main Course Syllabus Listing</a> You can also link to a target location within a document. For instance, we can go to the top of the page.

This is done as follows: The <a name="name" /> tag creates the target</a> The <a href="#name" /> links to that target </a> from elsewhere in the document. You can also launch a new window through the use of the target="_new" tag. This will launch many new windows. If you always want the the new window to launch within the same new window you can use a name within the target tag.

Go to Facebook in a New Window
Got to Facebook in a Window I have named
Go to Facebook in the same Window I have named

For Example: <a href="http://www.facebook.com" target="_blank">New Window</a> <a href="http://www.facebook.com" target="_mywindow">My Window</a>

Colors are typically referred to by their hexcodes, or their hexidemical equivelents to their RGB values. For example: "#FFFFFF" = "white", while "#000000" = "black".

WORKING WITH IMAGES

Images are typically stored as Compuserve GIF (.gif) files, JPEG (.jpeg or jpg) files, or PNG (.png) files.

GIF Files GIF is a common format for in-line images, and browsers have supported it for years. The GIF format is 8 bit or lower, and is most suitable for line art or other illustrations. The GIF format is "lossless." The compression algorithym used by the GIF formatlooks for pixels in the same row of the same color value. Because of this, GIF files will be smaller if the graphic used contains horizontal bands ofthe same color.

When exporting in Photoshop you can generate or constrain palettes to:

An interlaced GIF (gif87a) is a graphic file which displays as it downloads because the data has been encoded in multiple passes. First it appears blocky, and gradually refines in quality as data continues continues downloading to the browser.

JPEG Files The JPEG format uses either 16 or 32 bit color, and is most suitable for displaying photographic images. JPEG files can be saved in several levels of quality, with files saved as "low quality" having the smallest size, and files saved as "maximum quality" not yielding much savings at all.

A JPEG file saved in the "progressive" format is encoded with multiple passes so that the JPEG appears quickly in a blocky form, and gradual quality as the data continues to download. It works a lot like an interlaced GIF.

PNG Files PNG stands for "Portable Network Graphic" and it is a more recent image format. It is a lossless compression algorithym (same as GIF) in which files can be saved at a variety of bit depths, and it has a 10-30% better compression than GIF. For highest quality images, the fact that it is a lossless algorithm means that it offers superior quality to JPEG.

IMG Tag Images embedded in the page using the "img" tag.
Typical syntax would be <img src="gif/logo01.gif" />Its a good idea to enter the height and width specifications of the image within the img src tag,as well as including an ALT description for people with non-graphical and screenreaders browsers.

<img src="gif/logo01.gif" height="72" width="72" ALT="STEPS Logo" />

Image Transparency

Portions of gif images can be made transparent.

Image as links, borders, and alt tags Images can be used as links. You can simply use an [a href="link.htm"] tag prior to the img tag. However, you will notice that the image will have a border around it. You can modify the border by using the border tag within the img src tag.
i.e. <a href="index.html"/><img src="mrp1.gif" alt="logo" border=0 /></a> <a href="index.html"/><img src="mrp1.gif" alt="logo" border=2 /></a> <a href="index.html"/><img src="mrp1.gif" alt="logo" border=5 /></a>

Align Tags

You can align text around images by including the align tag within the img tag. I.e.

logoHere we we typed

<img src="logo01.gif" alt="logo" align="left" hspace="5" vspace="5" /> indicating that the image should be flushed to the left and the text to the right.
logoHere we we typed <img src="logo01.gif" alt="logo" align="right" hspace="5" vspace="5" /> indicating that the image should be flushed to the right and the text to the left.

If you're having trouble aligning images and text, you will want to tell the browser to "keep breaking" until the margin is clear of obstacles such as the image. See below:

<br clear=left> <br clear=right> <br clear=all>
Lists
Ordered Lists
  1. wake up
  2. brush teeth
  3. shower
  4. make breakfast
<ol> <li>wake up</li> <li>brush teeth</li> <li>shower</li> <li>make breakfast</li> </ol>
  1. wake up
  2. brush teeth
  3. shower
  4. make breakfast
<ol type="A"> <li>wake up</li> <li>brush teeth</li> <li>shower</li> <li>make breakfast</li> </ol> Unordered Lists
<ul> <li>apples</li> <li>oranges</li> <li>bananas</li> </ul> <ul type="square"> <li>apples</li> <li>oranges</li> <li>bananas</li> </ul>