Introduction to html

Welcome to HTML...

This is Primer #1 in a series of seven that will calmly introduce you to the very basics of HyperText Mark-up Language. I suggest you take the Primers one at a time over seven days. By the end of the week, you'll easily know enough to create your own HTML home page. No really. You will.

I say that because many people scoff at the notion that they can actually learn this new Internet format. I'm still amazed that the best-selling line of computer books calls its readers "Dummies." And people seem to revel in that title. Some of the smartest people I know love to proclaim themselves "Dummies" regarding every aspect of computers. Strange. I think you'll do a whole lot better at your next cocktail party by handing out your home page address rather than laughing about how dumb you are about the Internet.

You Can Do This!

---

Let's Get Started

I am assuming at the beginning of this tutorial that you know nothing about HTML. I am assuming, however, some computer knowledge. You wouldn't be looking at this page without having some knowledge. To continue with these Primers, you will need...

1. A computer (obviously)

2. A browser like Mozilla Firefox, Netscape Navigator, Microsoft Internet Explorer, or Opera. If you're looking at this page, you already have one. If you look up at the title bar at the very top of your screen it will probably say the page title ("Basic HTML: Introduction") and then your browser's name.

3. A word processor. If you have access to Windows "Notepad" or "WordPad" programs or the MAC "Simple Text" program, use that to get started.

If you have those three things, you can write HTML with the best of them. Now here are a few questions you probably have:

Q. I have a MAC (or PC) -- will this work on my computer?
A. Yes. HTML does not use any specific platform. It works with simple text. More on that in a moment...

Q. Must I be logged onto the Internet to do this? More specifically, will learning this throw my cost for on-line way up?
A. Neither. You will write off-line.

Q. Do I need some sort of expensive program to help me write this?
A. No. You will write using just what I outlined above. You can buy those programs if you'd like, but they're not needed. I've never used one.

Q. Is this going to require I learn a whole new computer language like Basic or Fortran or some other cryptic, God-awful, silly-lookin', gothic extreme gobbledygook?
A. Touchy-touchy, aren't we? "No" is the answer. HTML is not a computer language. Allow me to repeat that in bold... HTML is not a computer language!

---

What is HTML?

H-T-M-L are initials that stand for HyperText Markup Language (computer people love initials and acronyms -- you'll be talking acronyms ASAP). Let me break it down for you:

Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want.

Text is what you will use. Real, honest to goodness English letters.

Mark up is what you will do. You will write in plain English and then mark up what you wrote. More to come on that in the next Primer.

Language because they needed something that started with "L" to finish HTML and Hypertext Markup Louie didn't flow correctly. Because it's a language, really -- but the language is plain English.

---

Beginning to Write

You will actually begin to write HTML starting with Primer #2. That's tomorrow if you follow the seven-day plan this was written for. Here, I want to tell you how you will go about the process.

You will write the HTML document on the word processor, or Notepad, WordPad, or Simple Text. When you are finished creating the HTML document, you'll then open the document in a browser, like Netscape Navigator. The browser will interpret the HTML commands for you and display the Web page.

Now, some people who are already schooled in HTML are going to jump up and down and yell that you should be using an HTML assistant program because it makes it easier. That's true, but it also makes it harder to learn as the program does half the work for you. Take my word for it, use the word processor for a week, then go to the assistant if you still want to use one. You'll be far better off for the effort. I have been writing HTML for six years and I still use Notepad for the bulk of my writing.

---

Let's get into the programs you will use to write your HTML document. Keep this in mind: HTML documents must be text only. When you save an HTML document, you must save only the text, nothing else.

The reason I am pushing NotePad, WordPad, and Simple Text is that they save in text-only format without your doing any additional work. They just do it. But, if you're like me, then you will want to start writing on a word processor, like WORD, or WordPerfect. Maybe you're just more comfortable on it. If so, read this next part carefully.

The Word Processor

When you write to the word processor you will need to follow a few steps:

1. Write the page as you would any other document.

2. When you go to save the document (Here's the trick), ALWAYS chooseSAVE AS.

3. When the SAVE AS box pops up, you will need to save the page in a specific format. Look at the SAVE AS dialogue box when it pops up: Usually at the bottom, you find where you will be able to change the file format.

4. If you have a PC, save your document as ASCII TEXT DOS or just TEXT. Either one will work.

5. If you have a MAC, save your document as TEXT.

6. When I started writing HTML, I saved pages by assigning every Web page its own floppy disc. It just helped me keep it all straight, but if you want to save right to your hard drive, do it. I only offer the floppy disc premise as a suggestion.

Please remember: It is very important to choose SAVE AS EVERY time you save your document. If you don't, the program won't save as TEXT, but rather in its default format. In layman's terms -- use SAVE AS or screw up your document.

You see, when you save your document in WORD, or some other word processor format other than text, you are saving much more than just the letters on the page. You're saving the margin settings, the tab settings, specific fonts, and a whole lot of other settings the page needs to be displayed correctly. You don't want all of that. You just want the text.

NotePad, WordPad, and SimpleText already save in text-only format so if you use one of them as your word processor, you'll get the correct format simply by saving your document.

---

How To Name Your Document

What you name your document is very important. You must first give your document a name and then add a suffix to it. That's the way everything works in HTML. You give a name and then a suffix.

Follow this format to name your document:

1. Choose a name. Anything. If you have a PC not running Windows 95, you are limited to eight letters, however.

2. Add a suffix. For all HTML documents, you will add either ".htm" or ".html".

(".htm" for PCs running Windows 3.x and ".html" for MAC and Windows 95/98 Machines)

Example:
I am looking to name a document I just wrote on a PC running Windows 3.11 for workgroups. I want to name the document "fred". Thus the document must be named "fred.htm". If it was MAC or Windows 95/98 I would name it "fred.html". Please notice the dot (period) before .htm and .html. And no quotation marks, I just put them in here to set the name apart.

Uhhhhhh.... Why Do I Do That?

Glad you asked. It's a thing called "association." It's how computers tell different file types apart. ".html" tells the computer that this file is an HTML document. When we get into graphics, you'll see a different suffix. All files used on the Web will follow the format of "name.suffix." Always.

Okay, why .htm for PCs running Windows 3.x and .html for MAC and Windows 95/98?

Because that's the way the operating systems are made (Windows 3.x, Windows 95/98, and MAC OS are all technically called operating systems). Windows 3.x only allows three letters after the dot. MAC OS and Windows 95/98 allow four, or more. Your browser allows for both suffixes. It acts upon .html and .htm in the same fashion.

---

Why do you keep harping on the fact that I must save in TEXT only?

You're just full of questions! You see, HTML browsers can only read text. Look at your keyboard. See the letters and numbers and little signs like % and @ and *? There are 128 in all (read upper- and lowercase letters as two). That's text. That's what the browser reads. It simply doesn't understand anything else.

If you'd like to test this theory, then go ahead and create an HTML document and save it in WORD. Then try and open it in your browser. Nothing will happen. Go ahead and try it. You won't hurt anything.

Remember that if you are using Notepad, Wordpad, or Simple Text, the document will be saved as text with no extra prompting. Just choose SAVE.

---

Opening the Document in the Browser

Once you have your HTML document on the floppy disc or your hard drive, you'll need to open it up in the browser. It's easy enough. Since you're using a browser to look at this Primer, follow along.

1. Under the FILE menu at the very top left of this screen, you'll find OPEN, OPEN FILE, OPEN DOCUMENT, or words to that effect.

2. Click on it. Some browsers give you the dialogue box that allows you to find your document right away. Internet Explorer, and later versions of Netscape Navigator, require you to click on a BROWSE button or OPEN FILE button to get the dialogue box. When the dialogue box opens up, switch to the A:\ drive (or the floppy disc for MAC users) and open your document. If you saved the file to your hard drive, get it from there.

3. You might have to then click an OK button. The browser will do the rest.

---

One More Thing

You easily have enough to keep you occupied for the first day. Don't worry, the Primers get less wordy after this.

If you are going to start writing HTML, I suggest you make a point of learning to look at other authors' HTML pages. You say you're already doing that, right? Maybe. What I mean is for you to look at the HTML document a person wrote to present the page you are looking at. Don't look at the pretty page, look behind it at the HTML document.

Why Would I Do That?

Because you can... but seriously, folks. Let's say you run into a page that has a really neat layout, or a fancy text pattern, or a strange grouping of pictures. You'd like to know how to do it.

Well, look, I'm not telling you to steal anything, but let's be honest, if you see some landscaping you like, you're going to use the idea. If you see a room layout you like, you will use the idea to help yourself. That's the point of looking at another page's HTML document. I think it's also the best way to learn HTML. In fact, I am self-taught in HTML simply by looking at others' documents. It was the long way around, believe me. You're going to have a much easier time of it with these Primers.

Here's how you look at an HTML document (known as the "source code"):

1. When you find a page you like, click on VIEW at the top of the screen.

2. Choose DOCUMENT SOURCE from the menu. Sometimes it only reads SOURCE.

3. The HTML document will appear on the screen.

4. Go ahead. Try it with this page. Click on VIEW and then choose the SOURCE.

It's going to look like chicken-scratch right now, but by the end of the week, it'll be readable and you'll be able to find exactly how a certain HTML presentation was performed.

It's A Little Different On AOL

Those of you who use AOL can also see the source. You can do it by placing your pointer on the page, off of an image, and clicking the right mouse button. MAC users should click and hold. A small menu should pop up. One of the items will allow you the ability to view the source.

That's the Primer for today. Print it out if you'd like and get ready to delve in and write your first HTML document. See you tomorrow.

Read More

SPECIAL HTML CHARACTERS

SPECIAL HTML CHARACTERS
In order to include a copyright symbol, certain math equations, and other non-standard characters on your
Web page, you will need to include special characters in your HTML coding. To do this, you will use a table of
characters called the ISO-8859-1 Latin-1 Table (http://www.htmlhelp.com/reference/charset/). You can
include the Latin-1 characters in your coding by either typing in a numeric character reference (") or an
entity reference (") when you write your HTML code.
For instance, a standard double quotation mark ( “ ) is defined as either " using numeric characters or
" using an entity reference. Either way, your visitors see a plain quotation mark.
Other handy special characters include:
•  Registered trademark: ® or ®
Introduction to HTML – UM University Libraries 18
•  Copyright symbol: © or ©
• & Ampersand: & or &
• ° Degree sign: ° or °
• Non-breaking space:   or  
From: http://www.netmechanic.com/news/vol5/html_no11.htm - HTML Tip: Learn To Speak Latin

Read More

HTML VALIDATION

HTML VALIDATION
Once you have finished a page, make sure your coding is valid by checking your documents against the
W3C’s HTML validator at:
http://validator.w3.org/
This program will pick out all HTML errors, and it is a good idea to perform this step even if your document is
displaying perfectly.
NOTE: All pages using the Libraries’ templates have coding included within them that facilitate the use of the
HTML validator. If you want to use the HTML validator on your own page (or you are editing an older page on
the Library server), type this at the very beginning of your document, before the <HTML> tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Then use the HTML validator to check your coding.

Read More

Troubleshooting and Helpful Hints

Troubleshooting and Helpful Hints
If your code doesn't display as you think it should, there are several things you can do:
1. Press the “Reload” button. The browser you are using to preview your web page may be displaying the
previous version of your document.
2. Ask someone who is more experienced to look over your document, and be sure to preview your document
in Netscape, Firefox, and Internet Explorer as you are developing it. Page elements may appear differently in
each of these browsers, and you need to be aware of this as you are creating your page.
3. Be sure you have used an ending tag wherever required. Omitting the ending tag (or forgetting the slash
within it) is a common error.
4. If a link is not working, make sure you typed quotation marks before and after the URL. Make sure you
have the entire URL, including http://. Check to see whether you've made any capitalization or spelling errors
within the URL.
Introduction to HTML – UM University Libraries 17
5. With your page displayed in Netscape or Firefox, click on “View”, then “Page Source”. This will show your
HTML document with tags and attributes in a different color from the text. This format makes it easier to see
your tags and figure out what is wrong.
6. Break up the information you have on your site into coherent "chunks" rather than placing unrelated
information all together on one long page. These smaller chunks make it easier for people to link to the specific
information that interests them at your site.
7. Visit the Information Technology Division’s “Web Author Resources” page for more suggestions, tips, and
hints: http://www.lib.umd.edu/itd/web/resources.html/.
8. Use the World Wide Web Consortium’s (W3C) HTML validator service (described below).

Read More

Using WebSpinner

Using WebSpinner
WebSpinner is the way in which files are loaded onto the Library server. To use WebSpinner, log in at:
http://www.lib.umd.edu/cgi-bin/WebSpinner and choose the appropriate directory from the welcome screen.
To Create A New File:
􀂾 Select the appropriate directory where you want to load your file.
􀂾 Select New File , and enter the File Name (which must end in one of the following: .pdf if a PDF,
.html if an HTML file, .jpg if a JPEG, .gif if a GIF).
􀂾 Click on Browse to upload the local file to the server.
􀂾 Click on Create File . Your file should appear in the file list box. You may then launch a
second browser and type in the URL of your file to view it. Make changes as needed.
NOTE: You would follow this process to upload any type of file to the server (.pdf, .jpg, .gif, .html). To upload
multiple files – contact Web Services at webservices@itd.umd.edu, for instructions on how to FTP files and
use the “Upload” feature in WebSpinner.
To Update An Existing File:
􀂾 Select the appropriate directory where you want to edit the file.
􀂾 Highlight the file name, and press .
􀂾 Either edit the file as needed and press Update File when you are finished, or copy and
paste the entire text to notepad, edit the file as needed, and then use the Browse and Update File
buttons to upload your local copy.
Introduction to HTML – UM University Libraries 15
NOTE: Do NOT save a file from the website through your browser and then upload it to the site. This will
“break” several features of our web pages, such as included files (the header image, etc.).
If you need to change directories when working on pages, choose the button.
To delete a file from the server, select the file name from the list, and choose the button. At the
“Delete Confirmation” screen, select . (If you change your mind, use your browser's "Back" button to
cancel the deletion.)
NOTE: If you rename, move, or delete a file – first check to see who is linking to it at Link Checking
(http://www.lib.umd.edu/itd/web/link/all/ALL.html), and notify the information providers.
When you have finished editing your pages in WebSpinner, select the button.
REMINDER: If you have questions or problems with WebSpinner, contact Web Services at
webservices@itd.umd.edu.
Let’s use WebSpinner to load our file into the “Junk” directory. Go to WebSpinner (using the URL above, or by
going to the Library Home Page – http://www.lib.umd.edu, and choosing Web Credits and Maintenance 􀃆
Web Author Resources 􀃆 WebSpinner). Follow the steps below to preview your page on the web server.
􀂾 At the WebSpinner welcome screen, choose the /JUNK directory,
and click “Go to directory”.
􀂾 When you are in the /JUNK directory, scroll down until you see the
html101/ subdirectory, and select Open
􀂾 Select New File , and enter the File Name of the file you had saved on your A: drive (remembering
it must end in .html).
􀂾 Click on Browse to upload the local file to the server.
Introduction to HTML – UM University Libraries 16
􀂾 As the “Create File” screen indicates, any file uploads will override existing document text
􀂾 Click on Create File . Your file will be added to the /JUNK/html101 directory.
􀂾 To view your file, open a new browser window, and type in the URL (for example:
http://www.lib.umd.edu/JUNK/html101/myinitialspage.html).
􀂾 After viewing, delete your file from the /JUNK/html101 directory by locating the file name in WebSpinner,
highlighting the name, and choosing Delete . At the “Delete Confirmation” screen, select
.
􀂾 Once you are finished in WebSpinner, log off by choosing the button.
UMD WebSpinner Tutorial – available online at: http://www.webhosting.umd.edu/howto/wsthost/
NOTE: This tutorial was created by OIT, when WebSpinner was “launched” in 2000. The Libraries revised
WebSpinner for internal use, so some items covered in the tutorial (such as the TEXT->HTML, Security, Style
Template, Showpics and Prefs buttons) are not applicable to us.

Read More

UM Library Templates

UM Library Templates
All Web pages on the UM Libraries' site should follow the consistent look and feel designed for the site. To
facilitate this, there are several different templates available for you to use. The templates are found at:
http://www.lib.umd.edu/itd/web/templates/
Generic Templates
o Basic template -- May be used for pages that are best suited for using paragraph tags as the major
text divisions. (For example: http://www.lib.umd.edu/ASD/LPO/AdminMemos/memo5.html -
“Administrative Memo #5: Issuing of Keys.”)
o Left column template – Used for pages that have menu items or quick links in the left column. (For
example: http://www.lib.umd.edu/PUB/staffhome.html- The “Staff and Organization” page.)
Specialized Templates
o Professional profile (no image) -- may be used for your "Professional" page.
o Professional profile (w/image) -- may be used for your "Professional" page with an image.
o Minutes template
o Guides to Information Resources template -- for use by subject specialists.
o Course Related Web Pages -- for pages created to support a specific class at UM.
There are also templates for usability testing and forms.
In order to use the templates, do the following:
􀂾 Open a template. Based on the examples provided, choose the layout which best suits your needs.
􀂾 Copy the template code. Click on the link that takes you to the source code for the template you
want to use. With the template mark-up visible in your browser, go to Edit 􀃆 Select All. Copy the
highlighted selection by choosing Edit 􀃆 Copy. NOTE: Be sure to use Select All so that the entire
template is copied.
􀂾 Open a new document in Notepad.
􀂾 Paste the template code into the Notepad document. In the Notepad document, choose Edit 􀃆 Paste.
The complete code you copied from the template will appear.
Introduction to HTML – UM University Libraries 14
􀂾 Name your document and save it as a web page. Use lowercase letters, with no spaces. Make sure
that you include the file extension .html at the end.
􀂾 Edit the code and add the content. Follow the editing instructions embedded within the template
carefully. Replace all bracketed text with your own information, deleting the brackets. Pay attention to
comment tags (e.g. <! - - Stock Meta Tags DO NOT EDIT - ->) for instructions.
NOTE: Refer to the “Using the Libraries Templates” page
(http://www.lib.umd.edu/itd/web/bestpractices/using_templates.html) for additional information regarding
the use of the templates.
To publish your page to the server, use WebSpinner (instructions follow).

Read More

The UM Libraries’ Best Practices and Web Author’s Checklist

The UM Libraries’ Best Practices and Web Author’s Checklist
The Web Administration Committee (WAC) developed a series of “Web Best Practices” to guide development
of pages placed on the Library server. These guidelines are available at:
http://www.lib.umd.edu/itd/web/bestpractices/
The Best Practices cover topics such as:
o Using the Libraries Templates o Know Your User o Writing for the Web
o Writing HTML o Page Design o Accessibility
o Linking and Navigation o Graphics o Ongoing Maintenance
o Naming Directories, Files and Links o Validating Your HTML
Although you will want to become familiar with all of the “Best Practices”, of particular note are the following:
From “Naming Directories, Files and Links” – (http://www.lib.umd.edu/itd/web/bestpractices/naming.html) --
􀂾 Use lowercase for directory names.
􀂾 Use brief, logical and meaningful file names.
􀂾 Give meaningful names to links (avoid "click here"). Remember that some people scan pages for links;
make the content of your links jump out at those people.
􀂾 When linking off the UM web site, be sure to let users know.
From “Page Design” – (http://www.lib.umd.edu/itd/web/bestpractices/page_design.html) --
􀂾 Left-justify your headings and text to compliment the design of the templates. (See page 13 for a
discussion of the templates.)
􀂾 Consider content “above the fold” – keep highest priority information at the top of the page so users do
not have to scroll down to find it.
􀂾 Maintain a professional appearance – avoid blinking text and animation.
Introduction to HTML – UM University Libraries 13
􀂾 The shade of gold used in the template footer and header should not be used elsewhere in your page
(except if you use gold arrows).
The Web Administration Committee has created a brief, easy-to-read reminder of the elements that make a
Web site usable and accessible to a large, diverse audience. Called the "Web Author's Checklist", this guide
simply references the existing “Best Practices” in writing. The complete Checklist is available online at
http://www.lib.umd.edu/itd/web/checklist.html or in a more concise, printable form, at
http://www.lib.umd.edu/itd/web/checklist.pdf.

Read More

Adding A Simple Table

Creating a Web Page: Part 3 – Adding A Simple Table
Tables may look complicated at first, but they will be easier to understand if you remember that a table in
HTML is created row by row. Type the tags as shown, and follow the directions in italic type. Use any spacing
or indentation that makes sense to you, but do not change the order of any of the tags. Be sure to insert this
table before the closing body and html tags on your page.
<table>
<tr>
<th> Heading for 1st column . For example: Name</th> <th> Heading for 2nd column. For example: Phone
Number</th></tr>
<tr>
<td> Words in the first row, first column. For example: Coach Ralph Friedgen</td><td> Words in the first row,
second column. For example: X4-7096 </td></tr>
<tr>
<td> Words in the second row, first column. For example: Coach Gary Williams</td> <td> Words in the
second row, second column. For example: X4-7029</td>
</tr>
</table>
Save your document, and preview it in Firefox.


Next, we'll spread out the table by adding space in the cells. This is done by specifying a number, which the
browser interprets as a number of pixels between the text and the cell border. The HTML command for this is
cellpadding. Edit your table to read:
<table cellpadding="5">
You can also change the amount of space between table cells – which is called cellspacing in HTML. Both
cellpadding and cellspacing commands can be used at the same time.
<table cellspacing="5" cellpadding="5">
Once you have made this change, save your file and preview it in Firefox.
Congratulations! You have now created a simple web page with graphics, links, and a table!!!

Read More

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

Getting Started

Getting Started

HTML files are nothing more than simple text files, so to start writing in HTML, you need nothingmore than a simple text editor.

Notepad is a common text editor (on Windows this is usually found under the Programs > Accessories menu).
Type this in to your text editor:

This is my first web page

Now create a folder called 'html' in your C drive (or anywhere else you 
fancy) and save the file as "myfirstpage.html". It is important that the 
extension ".html" is specified - some text editors, such as Notepad, will 
automatically save it as ".txt" otherwise.


To look at HTML files, they don't even need to be on the web. Open a web 
browser such as Firefox or Internet Explorer 
and in the address bar, where you usually type web addresses, type in the 
location of the file you just saved (for example, "c:\html\myfirstpage.html") 
and hit return. Alternatively, go to the File menu of the browser, select Open, 
and browse for the file.


Pow. There it is. Your first web page. How exciting. And all 
it took was a few typed words.




We've said here to use a basic text-editor, such as Notepad, but you may be 
tempted to use a dedicated software program such as Macromedia 
Dreamweaver or Microsoft Frontpage.

You should be very careful when using these programs, especially if you are a 
beginner, because they often throw in unnecessary or non-standard code to "help" 
you.

If you're serious about learning HTML, you should read through a tutorial 
such as this first, so that you at least have a basic understanding of what is 
going on.

Software programs such as these will never give you the same control over a 
web page as coding by hand.

Read More

Definations and Backgroung

Definations and Backgroung
HTML stands for hypertext markup language. A markup language is a set of commands that tell a computer
how to format your document. HTML tags tell a browser such as Netscape, Firefox, or Internet Explorer how to
structure your Web page.
Tags are the individual commands in HTML. Tags are always enclosed in angle brackets. Here is an example
of a tag:
<html>
Most tags work in pairs; in most cases, both beginning and ending tags are needed. An ending tag contains
the same word as the beginning tag, but it includes a slash before the word. For example, <strong> is the
beginning tag and </strong> is the ending tag for text given a strong emphasis (most browsers display this as
bold text). Although there are a few exceptions that do not need ending tags (such as <br> for line break),
most tags need to be closed.
A pair of tags governs all the text that is between them. For instance, in the following example, only the word
"not" will be bold when viewed through a web browser:
Creating a simple Web page is <strong> not </strong> difficult.
If you forget to include </strong>, the rest of your document will appear to be in bold! This is why it is crucial
to be sure to preview your document (in Netscape Navigator, Firefox, and Internet Explorer) as you are
creating it – to catch these errors before your page is posted on the server.
Tags can be nested inside other tags. In the following example, the <h1> tag (main heading) controls the
entire sentence, and the <em> tag just controls the word "Simple."
<h1> Creating <em>Simple</em>Web Pages </h1>
Each document has two parts: a head and a body.
The head contains information about the Web page that does not appear in the browser window. One such
head element is the Title. Netscape, Firefox, and Internet Explorer will display the title that you put in the head
of your document in the bar at the top of the browser window. This is also the title used in bookmarks, and the
words you choose for your title are normally the same words you use for your main heading. (For example, if
your page title is “Staff Learning and Development, UM Libraries”, your page header should be “Staff Learning
and Development”.) A title is an essential element of an HTML document, and should not be confused with the
file name.
The head may also contain information to help search engines find your page – through the use of metatags.
It may also contain a link to a separate file that defines the style of your page – called a style sheet. The
Introduction to HTML – UM University Libraries 3
University Libraries use a series of templates to define what elements should be included in a web page.
These templates are available at: http://www.lib.umd.edu/itd/web/templates/. (NOTE: Templates are further
discussed on page 13.)
Metatags included in the head section of the Library templates that you need to edit are:
􀂪 DC.Creator –Your name, as creator of the web page. This element does not need a closing tag.
􀂪 DC.Subject – Keywords separated by commas that describe the content of your web page, such
as “Information Technology Division, ITD”.
􀂪 DC.Description – A sentence or phrase describing the content or purpose of your web page,
such as “Staff, Administration & Publications of University of Maryland Libraries”
􀂪 DC.Date.Created – The date in which you first created your page.
For examples of how to code each of these elements on your web page, visit “Guidelines for DC meta tags”
page at: http://www.lib.umd.edu/itd/web/bestpractices/dc_guidelines.html
The body of the document includes the text and images that viewers will see and the HTML tags that
determine how they are structured. The body also contains the footer of your document, which normally
includes information such as last revised dates or e-mail links to content providers. (NOTE: The use of footers
in Library web pages is covered in the Library Web Templates session.)
When you start using HTML, you are departing from the "what-you-see-is-what-you-get" (WYSIWYG)
environment. What you see on your screen as you create an HTML file looks very different from what you will
see when you display your file in your browser.
Although spaces between words or lines on your screen do not determine the format of the Web page you are
creating, it is best to leave as little space as possible between items or sections of your web page.
So, although this:<strong> HELLO </strong> would be displayed in exactly the same way
as this:
<strong>HELLO</strong> or this:
<strong>
HELLO
</strong>
it is recommended that you leave as little “extra space” as possible when coding your pages.
IMPORTANT POINTS:
􀂪 HTML tags are not case-sensitive. People sometimes type the tags in capital letters to
make them easier to distinguish from the surrounding text, but it is best to use lower
case for your tags – as it is required by XML.
􀂪 Although the tags and attributes themselves are not case-sensitive, certain values, such
as a Uniform Resource Locator (URL) in an anchor tag or a link, are case-sensitive.
􀂪 All file names you create should be lower-case. (See the discussion of “Best
Practices” on page 12.)
Introduction to HTML – UM University Libraries 4
To see whether you understand the principle, tell which variation is wrong if the URL is the following:
http://www.lib.umd.edu/groups/learning/stafflearning.html
1. <A HREF=" http://www.lib.umd.edu/groups/learning/stafflearning.html">
2. <a href=" http://www.lib.umd.edu/groups/learning/stafflearning.html">
3. <A href=" http://www.lib.umd.edu/groups/learning/STAFFLEARNING.HTM">
Answer: The third example is wrong and would not work because the case of the value (the part within
quotation marks) has been changed from the original. (IMPORTANT NOTE: Although number 1 would
technically work, it is better to use lower-case for your HTML tags – so number 2 is the “best” answer.)
Why should you learn to use HTML code instead of just creating a Web page with Netscape Composer or
another web editor? There are several reasons:
􀂪 Some HTML editor programs use HTML code that is not standard. As a result, all browsers may
not display your document properly. Have you ever read a Web page that has question marks
wherever apostrophes should be? Programs that do not generate standard HTML cause this
problem. Not only do they display oddly, but also they are not valid code. (Note: In order to
include special characters, such as &, ©, or ™, see “Special HTML Characters” on page 17.)
􀂪 Some WYSIWYG programs (such as Microsoft Word) include so much extra code that pages load
slowly and are hard to debug.
􀂪 You may need to make changes or updates to a page that someone else has created. If you
know some basic HTML, you can easily do this.
􀂪 If a Web page you are responsible for is not working properly, you are better able to figure out why
if you understand the code.
􀂪 A web-authoring program may not always do what you want; you have more control when using
HTML tags.


A HTML ANALOGY…
Think of using an HTML editor vs. knowing HTML coding in this way: when visiting a foreign country, you can
either use a translator, or you can learn the language yourself and use it to communicate directly with the
natives. A HTML editor can do the work for you, but to understand what is truly happening with your web page,
it is helpful to understand HTML.

Read More