Introduction to HTML

Introduction to this tutorial: You do not need an HTML editor to complete this tutorial. All lessons are designed to be completed using Notepad, which comes with all Windows PCs or an equivalent simple text editor (Mac users, try TextEdit). The reason we are using a simple text editor is that HTML is simple ASCII (plain) text, and editors like Notepad only save files as plain text. You can use any web browser for previewing your HTML pages. If you follow along with this tutorial, you'll be typing all the tags yourselves, as there is NO better way to learn HTML! And that, as they say, is that.

You will be building a page as you go through this tutorial. The content of my sample page is oriented toward a library, but don't let that discourage you! Feel free to change and adapt your page's text to better reflect your needs.

A little lingo before we start: There will be very little "techie" talk in this tutorial. One thing you'll learn very quickly is that this isn't rocket science! But it will help to know the following terms:

  • HTML (HyperText Markup Language): This is the programming language, or code, that provides the skeleton on which web pages hang.
  • Tags: HTML tags are what the web browsers need to see to display a web page correctly. As you proceed through the tutorial, you will hear this term used frequently.
  • Attribute: A characteristic of a tag that makes it do something special. Attributes contain values that tell the browser exactly what sort of attribute you are using.

A Little Background:

HTML stands for HyperText Markup Language. It is the basic programming language that is used on the web. HTML programming code uses tags to make web browsers see a web page correctly. Think of the human body: when we look at people we see skin, hair, arms, and legs. Underneath is the skeleton that holds us together and makes arms look like arms and legs look like legs. The web page we see in a browser is like the body, nicely laid out and pleasing to the eye. Underneath the web page is the skeleton -- the HTML tags -- holding it all together and making it look right.

Believe it or not, HTML is less than 20 years old (see: About the World Wide Web for more on the web's history) and it is constantly evolving as new versions of web browsers add new HTML tags. In fact now there are new programming languages like XML and XHTML that extend the power of basic HTML. For more on these developements, see: http://www.w3.org/MarkUp/. We will cover only basic HTML tags that work with all browsers in this tutorial.

Basic HTML Tags

The first tag in any HTML file is the <HTML> tag. This tells web browsers that the document is an HTML file.

The second tag is a <HEAD> tag. Information between the HEAD tags doesn't appear in the browser window, but is still important. It is called meta information. The most important meta information in the HEAD tag is the <TITLE> tag. All HTML documents must have a title. Generally, the title should reflect the contents of the page (like a book's title reflects the contents of the book), so you will be changing this title to better describe whatever sort of web page you are creating. The document title will appear in the title bar (the bar at the top of your browser window). Look up at the top of your browser window right now. It says "basic html tags". The title text doesn't show up in the main browser window (where the text you are now reading is located).

The true content of your web page starts after the HTML, HEAD and TITLE tags. It is contained inside the <BODY> </BODY> tags.

So the basic skeleton of every web page looks like this (the tags will always appear in this order) and you will have one only of each of these tags on your web page):

<HTML>
 
   <HEAD>
      <TITLE>
      </TITLE>
   </HEAD>
 
     <BODY>
     </BODY>
 
</HTML>

Notice that all the tags have these <  > around them? These brackets tell the browser that the text inside the brackets is to be read as an HTML command. Look at <HTML> and </HTML>. Do you see the difference? The first one, <HTML>, has no / (forward slash). It is the opening tag. The second one, </HTML>, has a / (this is called a forward slash). It is the closing tag. You need to be very careful about closing your HTML tags.

There are very few HTML tags that don't require a closing tag, so be sure you get into the habit of closing your tags.

Now we are ready to start creating the true content of the web page by putting information between the <BODY></BODY> tags. Generally, the first line of an HTML page will be a HEADING tag. If you think about a HEADING as part of an outline of a document, the first HEADING (<H1></H1>) tag is roman numeral one, a second level heading (<H2></H2>) would be roman numeral two, and so on. In most cases, the first heading on a web page will be the same as, or similar to, the document title to let people know right off what the page is about.

<H1> is the largest size heading, which you would normally use at the start of a document. <H6> is the smallest, with <H2> to <H5> of varying sizes in between them.

This text is an example of an H1 heading

here is the HTML for this: <H1>This text is an example of an H1 heading</H1>

This text is an example of an H6 heading

here is the HTML for this: <H6>This text is an example of an H6 heading</H6>

Always remember to CLOSE your HTML tags!

Style Elements:

When we talk about style elements in HTML, we mean tags that affect the appearance of the text on a page. That can mean how the text is spaced, and also how the text looks.

Page formatting tags:

These tags affect how the text is spaced on a page:

<P> </P> - Paragraph. Inserts an empty line (it's like double-spacing in word processing).

The spaces between this line and the line above and below are examples of paragraph tags.

<HR> - Horizontal line. Useful for breaking up sections of your page. Creates a shadowed line across the page. The shadowed line you see below this text is an example of the <HR> tag. The <HR> tag is one of those exceptions I mentioned, and doesn't need a closing tag.

<BR> - Line break. Doesn't insert a space between lines, just forces a break between lines of text. TIP: if you want to create blank lines on your page, use multiple <BR> tags, not the <P> tag as the browser only sees the first <P> tag and ignores the others but sees and creates a line break for all <BR> tags.
The space (or lack of it, actually) between this line and the line above it is an example of a line break. The <BR> tag doesn't need a closing tag.

Text style tags:

Text style tags affect the appearance of text on a page. You already know about text style tags as you use them all the time in word processors like MS Word. When you select text and click on the B button in MS Word your text turns bold, right? HTML works the same way, but we need to use HTML tags to tell the browser what text style to use.

The two most useful text style tags are:

<B> ... </B> - Bold
<B>Example of bold text tag.</B>
<I> ... </I> - Italics
<I>Example of italicized text tag at work.</I>

Remember: you have to CLOSE the text style tags just like you have to close heading tags.

Now let's start the actual building of a web page.

To begin your page:

  1. Open Notepad (it is usually found from the Start button, under Programs in the Accessories folder). Mac users: open TextEdit or SimpleText.
  2. Create your "template" (basic page) which must contain the tags we discussed at the beginning of this section by typing the following HTML tags that make up the structure of every web page.
<HTML>
<HEAD>
<TITLE> XYZ Library </TITLE>
</HEAD>
<BODY>
<H1>XYZ Library</H1>
The actual content of your page will go between the opening and closing BODY tags. Everything before the <BODY> is information that describes your document to web browser and server software. It doesn't appear in the browser window.
</BODY>
</HTML>

TIP: If you are comfortable copying and pasting, you can copy and paste the tags into Notepad. To copy and paste on a PC:

  1. Take your mouse and place your cursor at the beginning of the text, click the left mouse button then pull your mouse over the text. This highlights the text.
  2. Release the left mouse button.
  3. With the cursor over the highlighted text, right click the mouse for options, and select Copy or use the keyboard shortcut CTRL+C to copy the selected text.
  4. Go to your open Notepad window and make sure your cursor is in the Notepad window.
  5. Right-click your mouse again and select Paste or use the keyboard shortcut CTRL+V to paste the copied text.
  6. The text you copied will be pasted into the Notepad window.

To copy and paste on a Mac:

  1. Take your mouse and place your cursor at the beginning of the text, click and hold the mouse button then pull your mouse over the text. This highlights the text.
  2. With the cursor over the highlighted text, press the Control key and click and hold the mouse down on the highlighted text and select Copy from the menu or use the keyboard shortcut Apple+C to copy the selected text.
  3. Go to your TextEdit or SimpleText window and click inside it so your cursor is in the right place.
  4. Control-click your mouse again and select Paste or use the keyboard shortcut Apple+V to paste the copied text.

Note on using TextEdit (Mac OS X users): Before you start creating your HTML page using TextEdit, change the preferences by going to the TextEdit menu and selecting Preferences. Under New Document Attributes, check Make Plain Text and Wrap Text. Under Saving, uncheck the Append ".txt" extension to plain text files button. Then click the red button in the upper left corner of the Preferences window to save these changes. If you don't do this it will make your page RTF (Rich Text Format) which will destroy all your HTML coding.

A note about copying and pasting: the tags may not be aligned to the left of the Notepad window after you paste them in. While this won't affect the HTML, it may be confusing for you visually, so feel free to clean up the tags and line them up to the left in your Notepad window.

Next: Saving Your Work

Saving Your Work

An HTML file is nothing more than plain ASCII text, but all HTML files must have a special file extension for web browsers to recognize them. This extension is either .htm OR .html. The reason why there are two possible extensions goes back to the early days of the web. People were still using Windows 3.1 and DOS then, and Windows 3.1 and DOS file extensions could only be 3 letters long, hence .htm. Now .html is the more commonly accepted extension. For this course, we will be using the .html extension.

As you create web pages, it is important to keep them all together. This makes them easier to find on your computer, and makes it easier when you are ready to make your website go "live" on the Internet. So before we start saving files, let's create a folder where they will go.

  1. Open Windows Explorer (you can usually find Windows Explorer by right-clicking the Start button and selecting Explore).
  2. Left-click once on the C: drive (or whatever drive you will save your files to), then go to the File menu of Windows Explorer and select New/Folder. In the File Name box, type a name for this new directory. I am calling my folder xyzlibrary.

Now you are ready to save the file:

  1. Be sure you are in your Notepad window and that the skeleton web page you created is visible.
  2. Go to the File menu in Notepad and select Save.
  3. In the dialog box that pops up, make sure the Look in: box is pointing to the folder you created in the previous step.
  4. Type the file name in the File Name box. The first page of a website should always be called index.html, so that is what we will call this first file.
  5. After you check to see that the location for saving is correct and you have typed index.html in as the file name, click the Save button to complete the process.

You should always check your web page in a browser to make sure it looks okay.

To Preview Your File in Internet Explorer:

  1. Click the File menu, choose Open.
  2. Click the Browse button in the Open dialog box that pops up and navigate to the directory where you saved your index.html file.
  3. Double-click on the index.html file, then click the OK button in the Open dialog box.
  4. Your index.html file is now displayed in Internet Explorer.

(Most browsers use similar commands to open a file - start with the File menu and look for "Open Page" or "Open File".)

Note: As you work on your web page, you should keep your web browser and Notepad open. If you keep your index.html file open in your web browser, all you need to do after saving any changes you make to the file in Notepad is click the Reload or Refresh button in your browser window to see the changed index.html file. This means that you should have two windows open:

  • One web browser for previewing your web page.
  • One Notepad window, for editing your HTML code.

Next: Adding Lists

Adding Lists

There are three basic list types in HTML:

  1. The unordered list: This list has bullets (usually round) before each item in the list.
  2. The ordered list: This list has numbers before each item in the list.
  3. The definition list: This list has nothing before each item in the list.

The Unordered List:

The opening and closing tags for an unordered list are <UL> ...</UL>

Each item inside the list must also have a tag. This tag is the line item tag and it looks like this: <LI>

Here is a sample unordered list in HTML:

<UL>
<LI>apples
<LI>oranges
<LI>bananas
</UL>

Here is what that HTML looks like in a web browser:

  • apples
  • oranges
  • bananas

Notice that you must close the list with the </UL> tag, but you don't have to close the list item tags. Not too tough, huh? You can make the bullets into squares by adding an attribute to the opening <UL> tag. An attribute is something that is added to a tag to make it do something different, and you add a value to the attribute to tell the browser exactly what sort of attribute you want. To make squares, your HTML code will look like this:

<UL type="square">
<LI>apples
<LI>oranges
<LI>bananas
</UL>

Here is what that HTML looks like in a web browser:

  • apples
  • oranges
  • bananas

So the attribute type="square" (the value in this tag is "square") turns the round bullets into squares. Sorry, there are no values for triangles or polygons!

Notice that I typed the tag <UL> in uppercase and the attribute and its value type="square" in lowercase. This is so that I can immediately tell the tag from the attribute when I am looking at my HTML code.

The Ordered List:

The ordered list is a sequential list, using either numbers or letters. The opening and closing tags for an ordered list are <OL> ...</OL> (that's the letter O, not the number zero).

Like the unordered list, each item in the ordered list must also have a line item tag before each item.

Here is a sample ordered list in HTML:

<OL>
<LI>apples
<LI>oranges
<LI>bananas
</OL>

Here is what that HTML looks like in a web browser:

  1. apples
  2. oranges
  3. bananas

There are some attributes you can add to the opening <OL> tag. To make roman numerals, your HTML code will look like this:

<OL type="I">
<LI>apples
<LI>oranges
<LI>bananas
</OL>

Here is what that HTML looks like in a web browser:

  1. apples
  2. oranges
  3. bananas

So the attribute type="I" (that's a capital "I" for the value) turns the regular numbers into roman numerals.

Another attribute for the <OL> list is type="A". This turns the numbers in an ordered list into capital letters. Your code will look like this:

<OL type="A">
<LI>apples
<LI>oranges
<LI>bananas
</OL>

Here is what that HTML looks like in a web browser:

  1. apples
  2. oranges
  3. bananas

Remember, as with the unordered list you must close the list with the </OL> tag, but you don't need to close the list item tags.

The Definition List:

The definition list is a little different. It starts with this tag: <DL>, and the closing tag looks like this: </DL>. There are two item tags in a definition list; one indents the items and the other doesn't. They look like this:

<DT> - doesn't indent item
<DD> - indents items

So the HTML code for a definition list will look like this:

<DL>
<DT>apples
<DT>oranges
<DD>bananas
</DL>

And the list will look like this in a web browser:

apples
oranges
bananas

See how the word "bananas" is indented? That is what the <DD> item tag does.

Remember, as with the ordered and unordered lists you must close the list with the </DL> tag, but you don't need to close the item tags.

Okay, you are now ready to add some more HTML code to your web page. I am going to create a list of items that you would find on a library page. But you can substitute whatever items you feel belong on the page you are creating.

The following code will go between the <BODY>...</BODY> tags of your index.html file (so you need to make sure that Notepad is open and you can see your index.html file).

<UL>
<LI>Google
<LI>Librarians' Index to the Internet
<LI>Yahoo!
</UL>

After you have typed (or pasted) this code into your index.html file, be sure to SAVE your work in Notepad, then preview your index.html file in your web browser.

If you do not see the changes you made to your index.html file, go back to Notepad and be sure to Save. Once you are sure you saved your changes, come back to the browser and open or reload the index.html page.

Try changing the list in your index.html to an ordered list, then try a definition list. Here are variations of my index.html file using both types of lists:

Adding Links

The web wouldn't be the web if you couldn't go from one page to another. You do that via hypertext links. A web browser highlights text or images with color and/or underlines to indicate that it is a hypertext link (often shortened to hyperlink or just link).

The HTML tag for a hypertext link is <A>, which stands for anchor. The anchor tag is useless without the href attribute that tells the browser where to actually go to find the link. To create a hypertext link in your document:

Let's say you wanted to create a hypertext link to the search engine Google. You would type this in your index.html file:

<A href="http://www.google.com/">Google</A>

All you would see on the web page is the word Google and it would be in blue and underlined to signify that it is a link. What makes the word Google a link is the <A> tag with the href attribute that tells the link where to go.

So to create a hypertext link you do the following:

  1. Start the anchor with <A (you must include a space after the A).
  2. Specify the document you're linking to by entering the attribute href="filename" followed by a closing bracket: > (note that whatever follows the href= has to be in quotes: "..." as href is an attribute and needs a value).
  3. Enter the text or information that will serve as the hypertext link in the current document (this text will be in regular language usually, like my home page or Yahoo!.
  4. Enter the closing anchor tag: </A> (notice that you DON'T repeat the href portion of the opening tag in the closing </A> tag).

Okay, now let's add some hypertext links to the list we created in the previous session. On my page, I will have three links. Here is what the HTML code for the links will look like (I am retyping the list HTML code as well -- in my index.html file I will replace the current unlinked list with this new, hypertext linked list):

<UL>
<LI><A href="http://www.google.com/">Google</A>
<LI><A href="http://www.worldcat.org/">WorldCat</A>
<LI><A href="http://www.yahoo.com/">Yahoo!</A>
</UL>

The HTML code will look like this in a web browser:

Save your file in Notepad and preview it in a web browser. Not bad, huh? 

Relative Paths Versus Absolute Paths

You don't always have to type http://www.address.com/blahblahblah when creating a hypertext link. If you are linking to a file that is part of your own website, you can specify the relative path from the current document to the linked document.

This may seem like an abstract concept. But think about a local phone call and a long distance phone call. To make a local call, you simply punch in seven numbers, and that's it. For long distance, you need to punch in a 1, then an area code, then the seven digit phone number. A relative link is like the local phone number; you're dialing a local number, so the address is shorter. The absolute link is further away, so like a long distance call, it needs more information to make the connection.

Here's an example: a link to a file anaheim_branch.html located in a folder called branches inside my xyzlibrary folder on my computer would look like this:

<A href="branches/anaheim_branch.html">Anaheim Public Library</A>

This is a relative link because you are specifying the path to the linked file relative to the location of the current file. You can also use the absolute pathname (the complete URL) of the local file, but relative links are more efficient in accessing a server. They also have the advantage of making your documents more "portable" -- for instance, we are creating all the web pages for this course in one folder on our computers (remember mine? it's called xyzlibrary) -- using relative links to hyperlink one page to another, and then upload the entire folder of web pages to your server.

In general, you should use relative links whenever possible because:

  1. It's easier to move a group of documents to another location (because the relative path names will still be valid)
  2. It's more efficient connecting to the server
  3. There is less to type

A website is made up of many pages, and we are creating the first page (sometimes called a "home page") for a website. You will probably have additional HTML files for other information, maybe a page with directions, or a page about services that your library provides. Those would be relative links - local phone calls versus long distance.

File and Folder Namimg

This is a good time to talk about file and folder names. Most servers (where your files will ultimately be kept) are case-sensitive where filenames are concerned, so you must be consistent when you use uppercase and lowercase file and folder names. Try to always use lowercase names for files and directories--it's easier to type! And don't put spaces in the file names:

  • myfirstfile.html is correct
  • my first file.html is incorrect

Servers don't like spaces in file names and will ignore them. This can cause you much annoyance, so get into the habit now of never putting spaces in your web file and folder names.

A Shortcut for Creating New HTML Pages

Let's create some new pages for those relative links you want to add to your website. Here's a shortcut to creating new pages from scratch:

  1. Open your index.html page in Notepad.
  2. Open the File menu and select Save As.
  3. In the Save dialog box, make sure that you are saving the file in the same directory that contains your index.html file.
  4. Give the file a new name. 
  5. Click the Save button to save the new file.

BE SURE to give the file a new name when using this procedure! If you forget, you may accidentally overwrite your index.html file!

Adding Colors & Fonts

To change the background color, you need to add an attribute and a color value to the opening BODY tag (you never add an attribute to a closing tag!). Here is what the attribute looks like:

bgcolor="#ffffff"

Here is what it looks like in the BODY tag:

<BODY bgcolor="#ffffff">

The "#ffffff" value is a hex code. There are literally hundreds of possible hex codes you can apply to a background. Click here to see some of the possibilities. "#ffffff" is the code for white, and you need to always use the "#" and enclose the hex code in quotations (it's a value of an attribute, remember).

This is a good time to put in a word about color choices. Subtle is good. You don't want to overwhelm people with your color choices, so bright yellow is probably not a good background color. Always preview your choices in a web browser!

There are more attributes we can put in the BODY tag that will affect the color of text and links on a web page. These attributes are:

text="#000000"
link="#0033cc"
vlink="#ff0000"

The text attribute affects the color of regular text (text that is not linked) on a page. The link attribute affects the color of the linked text on a page (the default color for links is blue). The vlink attribute affects the color of links that have been visited on a web page (the default color for visited links is purple).

If I add these attributes to the BODY tag, it will look like this:

 

<BODY bgcolor="#ffffff" text="#000000" link="#0033cc" vlink="#ff0000">

The background for the page will be white (the bgcolor attribute, "#ffffff" is the hex code for white), the text (the text value, "#000000", is the hex code for black) will be black, links (the link attribute) will be blue, and visited links (the vlink attribute) will be red.

Let's go ahead and add attributes to the BODY tag of our index.html file.

  1. Open the index.html file in Notepad.
  2. Replace the opening <BODY> tag with this tag:
    <BODY bgcolor="#ffffff" text="#000000" link="#0033cc" vlink="#ff0000">
  3. Save the file in Notepad then preview it with a web browser.

Not too tough, huh? But these BODY attributes affect all the text on a web page. What if you wanted control over the colors of specific pieces of text on your page? For that you need to learn about the FONT tag.

Introduction to Fonts

All text on a web page is in a font. A font is basically a text style. You know font faces by name: Arial, Courier, Times. Fonts also have sizes and colors. Your browser uses some default font settings: the default face is usually Times and the default size is 3, and the default color is black.

But the FONT tag allows you to override those defaults, and display text in special ways.

Here's an example from Webmonkey (an excellent HTML tutorial website from Wired magazine). Take the word:

TECHNICOLOR

If I do nothing to it, it is just plain black text, size 3. But if I add a FONT tag to it, and add the attributes color (use bgcolor only in the BODY tag) and size I can change the look of the word:

<FONT color="#ff0000" size="5">TECHNICOLOR</FONT>

which looks like this in a web browser:

TECHNICOLOR

You notice that adding the size="5" attribute with value 5 made the text larger? Font sizes range from 1 to 6:

<FONT size="6"> is large
<FONT size="1"> is tiny

The face attribute is trickier; you should only use font faces that everybody has on their computers. Arial is a safe font face to use, and is very readable which makes it very popular. Courier and Times are also safe choices. You should stick with these font faces for now.

Here is an example of the FONT attributes color, size, and face in action:

<FONT color="#ff0000" size="3" face="Courier">TECHNICOLOR</FONT>

which looks like this in a web browser (notice that I reduced the size of the font, and changed the face to a typewriter-like font face called Courier):

TECHNICOLOR

You could even make each letter in a word a distinct color:

<FONT color="#ff0000">T</FONT>
<FONT color="#ff7f00">E</FONT>
<FONT color="#ffff00">C</FONT>
<FONT color="#00ff00">H</FONT>

<FONT color="#0000ff">N</FONT>
<FONT color="#6b238e">I</FONT>
<FONT color="#9932cd">C</FONT>
<FONT color="#ff0000">O</FONT>
<FONT color="#ff7f00">L</FONT>

<FONT color="#ffff00">O</FONT>
<FONT color="#00ff00">R</FONT> 

which looks like this in a web browser:

T E C H N I C O L O R

If you use the FONT tag to assign colors, those colors will override any colors you assigned in the BODY tag.

Now let's add some font colors to the index.html page.

  1. Open the index.html file in Notepad (if it isn't already open!).
  2. Let's add some contact information to the page. Since this page is for a library, I'm going to add the street address and phone number and I want it to be dark green (hex code is #006633):
    <DL>
    <DD><FONT color="#006633">123 Main Street</FONT>
    <DD><FONT color="#006633">Los Angeles, CA</FONT>
    <DD><FONT color="#006633">ph: 213-555-1122</FONT>
    </DL>

    Here is what it will look like in a web browser:

    123 Main Street
    Los Angeles, CA
    ph: 213-555-1122

After you have added these tags, be sure to save your file then preview it in a web browser. It looks like a real web page! 

Adding Images

A web page without an image or two is liable to seem pretty dry and dull. Now that you have mastered lists and links, you are ready to dress your page up a bit. But before we move on to the HTML tags for adding images to web pages, we will need some images to work with, so first let's cover downloading and saving images from web pages.

The good news is that almost any image on the web can be saved to your hard drive. The bad news is that you need to be careful, as many images on the web are the property of the web page designers and they may get very upset if people start stealing their images willy-nilly. There are plenty of free web image libraries on the web. On these sorts of sites, it is perfectly okay to download the images. All of the images I have provided in this tutorial are freely available for use by everyone.

Before we get down to saving some images, let's create a folder to put them in. Since the images are going to be used with my index.html file, I want the images folder to be near the index.html file on my computer. So I am going to create a folder inside my xyzlibrary folder called images. To do this:

  1. Right-click once on the Start button and select Explore.
  2. In the Explorer window's left hand pane, find the web page folder you created in the earlier section, Saving Your Work. Left-click once on the folder in the left hand pane of Explorer.
  3. Right-click once in the right hand pane of Explorer (where you see your index.html file) and select New Folder in the pop-up menu.
  4. Change New Folder's name to images (make it lowercase) and hit the Enter key to save the folder name.
  5. Close the Explorer window.

Mac users: You can do the same thing, just use the Control key rather than the right mouse button.

Now we are ready to get down to business. To save an image, just right-click on it:

reads

When you right-click on this image, a menu of choices will pop up (Mac users: just click and hold on an image to see the menu of choices). To save the image to your computer, select Save Image As. In the Save dialog box, point to the images directory that you created in the previous section. You can keep the image name, or change it in the File Name box then click the Save button.

If you change the file name, be sure to keep the same file extension that it had on the web. All images for use on the web will be in one of two formats: .gif or .jpg (sometimes you will see .jpeg - it's the same kind of file, it just has a slightly different extension). These formats (.gif and .jpg) are not interchangeable. If a file started life as a GIF file, it has to stay a GIF file. Image formats like .bmp will NOT work on the web.

Here are a few more images for you to practice saving to your computer:

need a librarian volunteer angel
kids imagine
cyberlibrary green drop

Okay, now we have some images! Let's move on to placing an image in a web page.

To add an image to a web page, you need to know the following tag:

<IMG src="file.gif">

IMG is the tag and src is an attribute, but src must always be used with the IMG tag. As is usual with tags and attributes, there must always be a space between IMG and src, and the image file name must be in quotations as it is a value. There are some important additional attributes for the IMG tag:

align="left" OR align="right" OR align="center"

The align attribute tells the web page where to put the image in relation to the text it is near, based on the value you specify. So:

<IMG src="images/imagine.gif" align="left">Once upon a time in a galaxy far, far away there were three bears.

would look like this on a web page:

imagine Once upon a time in a galaxy far, far away there were three bears.

 

 

 

 

Note that the image is to the left of the text.

If you type:

<IMG src="images/imagine.gif" align="right">Once upon a time in a galaxy far, far away there were three bears.

it would look like this:

imagine Once upon a time in a galaxy far, far away there were three bears.

 

 

 

 

Note that the image is now located to the right of the text.

If you type:

<IMG src="images/imagine.gif" align="middle">Once upon a time in a galaxy far, far away there were three bears.

it would look like this:

imagine Once upon a time in a galaxy far, far away there were three bears.

 

Now the image is centered vertically with the text.

The ALT Attribute

The last attribute is alt and it is in many ways the most important attribute. ALT stands for alternate text, and you use it to describe your images for people who can't see them. So when, say, a blind person reaches your web page, and the text of the page is read to them by a screen reader, the alt text you provide will describe the image that they can't see to them. You should always provide alt text for your images. If we add alt text to the example above, it would look like this:

<IMG src="images/imagine.gif" align="left" alt="imagine at the library">

The alt text should be brief and descriptive. The alt attribute has no effect on the physical appearance of the image. If you are using a graphic as spacing or decoration only (it has no real meaning on the page) you should use the alt attribute with what is called a null value: alt="". Screen readers skip over these tags altogether, which makes it much easier for the user listening to the screen reader.

Now let's put this new knowledge to work on your index.html file. For the following example code, I am going to put an image called reads.gif that is located in the folder images in my index.html file.

  1. Open your index.html file in Notepad.
  2. Add the following code below the <P> tag):
    <IMG src="images/reads.gif">
    Remember: I am using the image I saved earlier, and that I placed in the folder called images. You can use any image you want in your index.html file -- as long as you actually saved the image!

    My HTML code now looks like this:

    <HTML>
    <HEAD>
    <TITLE> XYZ Library </TITLE>
    </HEAD>
    <BODY>
    <H1>XYZ Library</H1>
    <P>
    <IMG src="images/reads.gif" alt="read at the library">
    <UL>
    <LI><A href="https://www.google.com/">Google</A>
    <LI><A href="https://www.yahoo.com/">Yahoo!</A>
    </UL>
    </P>
    </BODY>
    </HTML>

    When previewed in a web browser my page now looks like this:

    XYZ Library

    read at the library

    • Google
    • Librarians' Index to the Internet
    • Yahoo!
       
  3. After typing or pasting the HTML code into your index.html file, remember to save the file and preview it in your web browser.

Now try changing the alignment of the image. Use align="left" then save and preview the file in your web browser.

It should look like this:

read at the library

  • Google
  • Yahoo!

 
 

Using an Image as a Hypertext Link

An image can be a hypertext link just like text can.

Let's add a hypertext link to the Library of Congress to the America Reads at the Library image by adding the following example code:

<a href="https://www.loc.gov/"><IMG src="images/reads.gif" alt="read at the library"></A>

This code will look like this in a web browser:

read at the library

Notice that the image is now a link (put your mouse on the image and watch it turn into a hand). The HTML code for a hypertext link is the same whether you use text or an image as the link.

Alignment

You can align text left, right, or center. To do this, you use the attribute align. This attribute can be applied to HEADING tags, PARAGRAPH tags, or DIV tags. The DIV tag makes parts of a page look a certain way, but doesn't change spacing like the <P> tag. Use the <DIV align="center"></DIV> tag in place of the <CENTER></CENTER> tag.

Here are possible combinations for the <P> tag:

<P align="left"> aligns a paragraph to the left
<P align="right"> aligns a paragraph to the right
<P align="center"> centers a paragraph

Here are possible combinations for a heading:

<H1 align="left"> aligns a heading to the left
<H1 align="right"> aligns a heading to the right
<H1 align="center"> centers a heading

Here are possible combinations for the <DIV> tag:

<DIV align="left"> aligns a DIV area to the left
<DIV align="right"> aligns a DIV area to the right
<DIV align="center"> centers a DIV area

Use the DIV tag as you would the CENTER tag (it is the more accepted method).

This paragraph is an example of align="right".

This paragraph is an example of align="center".

Okay, let's go back to the index.html file and center the <H1> tag (and adjust the alignment of any other text you like).

  1. Open the index.html file in your text editor.
  2. After the H1 in the <H1>tag type or paste this attribute:
    align="center"

    Now your opening <H1> tag should look like this: <H1 align="center">

  3. Save the file and preview it in your web browser.

HTML Design Tips

There are a few things that you should put on your main (home) page regardless:

  • Navigation links (and be sure to provide navigation links on the second and third level pages as well! Think of them as a bread crumb trail for visitors)
  • Contact information (address, phone, email in an obvious location)

Here's a list of things to avoid:

  1. Huge graphics! Your web page should load quickly--if it takes too long, nobody will ever visit it. The content should be what matters--don't let a big graphic take space away from the important information on your web page.
  2. Flashy tricks like blinking or scrolling text or too many animated GIFs. A little bit goes a long way with this sort of stuff and after the first few seconds this sort of stuff just annoys people. Basic rule: keep it simple!
  3. Weird background or text colors. You want people to be able to actually read the contents of your page. If the background is too loud or the text too light, you will not get many repeat visitors.
  4. Too many font faces. While it may be fun to changes font faces a lot, it is very distracting when trying to read a page. So keep the font changes to about two per page--and it is also good, if you're going to use a font, to keep the them going throughout your site's pages.
  5. Long pages. If people have to scroll very far to read your page studies have shown that they often give up and click off--go to another website. For instance: if, say, you have a library web page and the first page has all sorts of textual information about the history of the library, library services, and library circulation policies all on one long, wordy page, it is too long. it would make more sense to have four pages:This will keep people from being inundated with text right off the bat.
    1. The main page with hypertext links to the other pages
    2. A page about the history of the library
    3. A page about library services
    4. A page about circulation policies
  6. View the source of web pages you like. Imitation is, after all, the sincerest form of flattery. And viewing HTML source code is the best way I know of to pick up new ideas and learn new HTML tricks. We've done it several times in this tutorial, but as a refresher: With your web browser displaying the page you like, open the View menu, then select Source. Voila! You will see the source code.

HTML Validators

We need to add one last bit of coding to our web pages. This is the DOCTYPE tag, and tells web browsers what sort of web page you have created. Here's a common one for basic HTML pages:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

What this says to web browsers is that this is a World Wide Web Consortium-okay document that is using HTML 4.01 transitional coding. You can copy and paste this into your index.html, as well as any other pages you may have created. It goes at the very top of your file, above the opening HTML tag. 

As you write HTML code, you will make mistakes -- everybody does. That is why there are HTML Validators (or checkers). They look at your HTML code and find errors like missing or misplaced tags.

To check your index.html file, you will use W3C HTML Validation Service because it will check the HTML code for files that are on your local computer.

  1. Click on this link (it will open in a new window): W3C HTML Validation Service
  2. In the W3C HTML Validation Service browser window, click the upload files link below the Validate this page button.
  3. Click the Browse button next to the Local File: box to find the index.html file you have been building on your computer.
  4. Doubleclick index.html
  5. Click the Validate File button on the W3C HTML Validation Service page.
  6. The W3C HTML Validation Service will display a page listing any potential problems in your HTML.
  7. If there are errors, open the index.html file in Notepad and fix them.
  8. Resubmit the page to the W3C HTML Validation Service following steps 2-5.
  9. Preview the corrected page in your web browser.

Congratulations! You now have an error free web page!

Checking for Accessibility

Another issue to think about when you build web pages is accessibility. Special needs users may not be able to see pictures on your pages, or may use special web browsers that don't display code the way most web browsers do. You should be designing pages that can be used by everybody.

To read more about current standards and how to make your pages accessible, check out the Usability.gov website. You will find useful links to design guidelines, checklists, and advice on what you can do to your pages to make them more accessible.

You have now reached the end of this tutorial. Congratulations!