Using Images

Crrreeeaaatttiiinnnggg aaa Weeebbb PPPaaagggeee::: PPPaaarrrttt 222 ––– Unnndddeeerrrssstttaaannndddiiinnnggg aaannnddd Usssiiinnnggg IIImaaagggeeesss
Now that you have created a basic web page, it is helpful to understand how to incorporate images. Here is an
example of an image used on the University Libraries home page:
This image is named “catalog.gif”. Sample HTML code for this image could read:
<img src="images/home/catalog.gif" alt="Catalog" border="0" width="127" height="18">
An image used on a Web page is a separate file on the Libraries’ server. All information about the image is put
inside the <img> tag. The <img> tag stands alone; it is not used in a pair. An important thing to remember is
that you have to include enough information within the <img> tag to enable the Web server to find your image.
Where is the image located? If the image is located in a different folder from your HTML file, you will need to
include that information in the URL. In the above example, the image is housed in the “home” subfolder of the
“images” folder.
In the above example, there will be no border around the image when it appears on a web page. The “ALT”
text is what appears when you “hover” over the image with your mouse in Internet Explorer, and also provides
important information for people with disabilities who use software designed to help them access the Web. It is
also what is displayed when you have a broken link to an image, or if you are using a text-only browser. The
text that goes with the alt attribute must be enclosed in quotation marks. Think of your users when you are
creating these alt attributes, and choose descriptive words or phrases.
Introduction to HTML – UM University Libraries 10
A Word About Images
The IMG tag may be used to link to a number of different types of images. Two common types of images you
might add to your web page are:
.GIF = A frequently-used graphics format, with small files which can be downloaded quickly.
.JPG or JPEG = Designed for compressing either full-color or gray-scale images of natural, real-world scenes.
JPEGs work well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple
cartoons, or line drawings.
An Important Note about Sizing Images
Images should have their dimensions stated in the <img> tag for quicker loading, but it is not good practice to
“force” a resize of an image in the <img> tag using the height and width attributes. It is better to make sure
the images you use are “optimized” for the web. This means the file size has been set in a graphics program
such as PhotoShop or Fireworks. Images for the Libraries web page, as specified in the templates,
(http://www.lib.umd.edu/itd/web/templates/) are already optimized. For assistance in optimizing graphics you
may wish to add to a library page, contact Web Services at webservices@itd.umd.edu.
For our “sample” web page, let’s add a simple graphic seen on the Learning Curriculum Pages:
On your page, after the “ordered list” <ol>, add a new paragraph
<p>
Then add the following coding to insert the graphic that is saved on the desktop of your computer
(lcpuzzle.jpg):
<img src="lcpuzzle.jpg" border=“0” height=“119” width=“121” alt=“Learning Curriculum Logo”>
</p>
Now, save your file and view it in Firefox. Do you see the Learning Curriculum logo, or do you see either of
these images instead: or this ?
Why do you think you cannot see the Learning Curriculum logo?
To fix this, minimize Firefox, and open the “My Computer” icon on your desktop. Select the “3½ floppy (A:)”
icon or the icon for your flash drive and drag the lcpuzzle.jpg image from the desktop to your disk or flash
drive to copy the image there.
Preview your file again in Firefox (using “Reload” if necessary), and your image should appear. This illustrates
an important point – files and images must either be in the same folder, or images must be “pointed to” via the
URL.


NOTE: When you are creating pages for the Library website, create an /image subfolder and place all images
within this folder. Point to this folder when you use the <img> tag.
Now that we have the image saved on disk with our HTML document, you can also align it in various places on
your page. Add another copy of the image aligned to the center of your page. To do this, insert this coding
after the first graphic:
<p><center><img src="lcpuzzle.jpg" border=“0” height=“119” width=“121” alt=“Learning Curriculum
Logo”></center></p>
Save your file and view it in Firefox.
In addition to making text “hyperlink” to other documents, you can also add a hypertext link to graphics on your
pages, which will allow you to “jump” to another page, or to another location within the same page. To do this,
select one of the two graphics you inserted into your page. Then, revise the coding so that it reads as follows:
<a href="http://www.lib.umd.edu/groups/learning/stafflearning.html"> <img src="lcpuzzle.jpg" border=“0”
height=“119” width=“121” alt=“Learning Curriculum: Learn More”></a>
Once again, save your file, and view it in Firefox. Although you will not see the change in the alt text when you
hover over the two images, a screen reader would distinguish between the two. (If you would like to see your
alt tags in action, you can preview your page in Internet Explorer.) You should be able to click on the image
you linked to, and go to the Learning Curriculum web page.

Read More

Saving Your Page

To

save your file

, go to “file” and “save” in Notepad, and save the file to your floppy disk [A:] (or flash drive).
Enter a filename, being sure it is all lowercase without spaces and ends in .html, and choose “save as type” –
All files (*.*).
Choose your own file name, or use the following sample:
myinitialspage.html (for example: mzspage.html)
NOTE: File names on the Web follow Unix conventions. This means they are case sensitive, and no spaces
are allowed. The file title and extension (.html) should be in lower-case, and file names should be as short as
possible. Be sure to save your file using the complete (.html) extension. Although you may see some pages
use .htm, the University Libraries pages all use .html.
For more information about naming files and directories, see the Libraries’ “Best Practices” at:
http://www.lib.umd.edu/itd/web/bestpractices/naming.html, and see page 12 of this handout packet.
Previewing Your Work
To preview your file in Mozilla Firefox:
Open the Firefox browser. Choose File 􀃆 Open File, and then from the drop-down menu that appears at the
top of the window labeled Look in: choose 3 ½ floppy [A:] or the name of your flash drive. Highlight the
name of the file you just saved (myinitialspage.html or the variation that you typed), and select Open.
After you have viewed your creation, go back to the lists you already created and choose one item from each
list to italicize. Add italics to one of your list items by typing the tags shown in bold type:
<li><em> list item </em> </li>
Note: When you are creating your home page, use italics sparingly for emphasis only! Bold (strong) text and
italics (em) lose their impact if they are used too frequently on a web page, and italicized text is difficult to read
on screen!
Choose one item from each list to emphasize with bold type. Add the <strong> tags to your existing list as
follows:
<li> <strong> list item </strong></li>
Save your changes in Notepad, and refresh your page in Firefox (using the reload button ) to see how
these changes would appear on the Web.
Introduction to HTML – UM University Libraries 9
Now, we can add a link to your e-mail address. Choose the line that reads
<p>Type “Authored by” and your name. </p> and change the coding as follows:
<p>Authored by <a href="mailto:[insert your e-mail address@umd.edu here]"> your name.</a> </p>
Be sure to save your changes and view your creation in Firefox.

Read More

Relative/Absolute Links

Relative/Absolute Links:

Now we will use the anchor tag <a> to add a link to your sample Web page. Links are also called hyperlinks,
hypertext, or hot links. You may link within a single document, as well as linking to other “outside” documents.
You may want to add links within a page if your document becomes lengthy. To do this, you will use the
anchor tag in two places.
First, add the following to the top of your page, before the <h1> tag: <a name=“top”></a> [Note: Do not
forget the quotation marks!]
Then, add the following to your page after the final </p> (the “authored by” statement):
<p>Go to the <a href=“#top”>top</a> of the page.</p>
Whenever you put a URL inside an anchor tag, you must enclose it within quotation marks. Also, don’t forget
that the URL is case-sensitive.
Insert the following sentence into your sample page below the numbered list (after the </ol>) to make a link to
the visitor’s page on the University of Maryland Libraries website. (You can use another site if you know the
URL.)
<p>More information can be found in the University of Maryland Libraries
<a href="http://www.lib.umd.edu/visitors.html">Information For Visitors</a> web
page.</p>
If you were to view your Web page in Netscape, Firefox, or Internet Explorer, this is what you would see:
More information can be found in the University of Maryland Libraries Information For Visitors web page.
When you click on the underlined text, you will go to the UM Libraries’ “visitors” home page.
A Word About Links
There are two ways to link to another document – using “relative” or “absolute” links. If you are making a link
from an HTML file to other files or resources on the same server, it is best to use relative path names. For
example, on the library home page (http://www.lib.umd.edu/index.html) there is a link to the Events calendar.
The link is coded as <a href=”/groups/pr/prcalendar.html”>Events Calendar</a>, and goes directly to the
events calendar in the PR folder. Clicking on this link will take you to the Library events calendar
(prcalendar.html). The coding indicates the calendar is in the “groups” folder and “pr” subfolder on the server.
Absolute links include the full URL address in the link. If the Events Calendar link had been coded as an
absolute link, it would have appeared as: <a href="http://www.lib.umd.edu/groups/pr/prcalendar.html">Events
Calendar</a>. Notice the difference in coding, and the length of the URL.
If you are linking from a page on the UM Libraries’ site to another page on the site, it is preferable to use
relative links.
Introduction to HTML – UM University Libraries 8
You are almost ready to view your new page in a web browser! First, be sure to include these important ending
tags at the bottom of your page. Type these tags before you try to display your page in Mozilla Firefox:
</body>
</html>

Read More

Creating a Web Page: Part 111 – The Basics

Follow the instructions that appear below to create a simple Web page on any topic that interests you. Type
all the HTML tags exactly as shown; they are displayed here in bold type. The directions in italics will give you
a general idea of your own text to type. In this example, the head of your Web page will contain only a title.
The body of your Web page will contain headings, a short paragraph, an unordered (bulleted) list, an ordered
(numbered) list, bold and italic type, and a link to the University of Maryland Libraries' home page.
Launch Notepad on your computer, by going to Start 􀃆 Programs 􀃆
Accessories 􀃆 Notepad. To make your efforts at coding a bit easier, go to
“Format” and be sure “Word Wrap” is checked.
VERY IMPORTANT NOTE: Although it is possible to create a web page using Microsoft WORD, do NOT use
WORD or WordPad to create files! (These programs generate non-standard HTML.)
Type the following:
<html>
<head>
<title>
Type the title of your web page here. For example: My First Web Page
</title> [Remember: Always close your tags!]
</head>
<body>
<h1>Type the title or main heading you want to be seen at the top of your Web page. For Example: My First
Web Page </h1>
<p>Type today's date here. </p>
<h2>Type a title for a list. For Example: My Grocery List</h2>
<p>Type a short introduction about the topic. </p>
<ul>
<li>Type your first list item. For example: Cake</li>
<li>Type your second list item. For example: Popcorn</li>
<li>Type your third list item. For example: Dove Bars</li>
<li>Type your fourth list item. For example: Tums</li></ul>
<h2>Type a title for a numbered list. For example: My Vacation Priorities </h2>
<p>Type a second short introduction. </p>
<ol>
<li>Type your first list item. For example: Disneyworld</li>
<Ii>Type your second list item. For example: Hollywood. </li>
Introduction to HTML – UM University Libraries 7
<li>Type your third list item. For example: Universal Studios. </li>
<li>Type your fourth list item. For example: Home. </li></ol>
<p>Type “Authored by” and your name. </p>

Read More

A Word About NESTING in HTML…

A Word About NESTING in HTML…
When you are coding your web page, keep in mind that HTML elements cannot overlap each other. So, the
following is invalid:
<strong><em>Incorrect nesting</strong></em>
Why? In this example, the strong element is intended to contain an em element. To be truly contained within
the strong element, the em element's end tag must occur before the strong element's end tag. To correct this
problem, you would need to change the coding to:
<strong><em>Correct nesting</em></strong>
For a visual explanation of nesting – visit “Nesting Tags” from Boston University, available at:
http://www.bu.edu/webcentral/learning/html/basics/syntax-nesting.html.
Now that we know some of the “basics”, let’s put these elements together to create a simple page…

Read More