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.
0 comments:
Post a Comment
Thank you for your valuable comments..