HTML 101: Introduction To HTML: LC Notebook Tab VII
HTML 101: Introduction To HTML: LC Notebook Tab VII
Computer Skills
- - - - - - - - B R E A K (5 min.) - - - - - - - -
Creating a Page, Parts II and III: Images and Tables
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:
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."
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
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.)
http://www.lib.umd.edu/groups/learning/stafflearning.html
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.
(Remember – you will need to “Close” each of these tags! An example is provided for the first tag.)
The following tags are not used in pairs; only a beginning tag is used:
AA W
Woorrdd AAbboouutt NNEESSTTIINNGG iinn HHTTM
MLL…
…
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…
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.)
<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>
<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>
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.
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.
</body>
</html>
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 (*.*).
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.
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:
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:
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.
<p>Authored by <a href="mailto:[insert your e-mail [email protected] here]"> your name.</a> </p>
POP QUIZ!
The part of an HTML document that contains information about the Web page is the ________________.
CCrreeaattiinngg aa W
Weebb PPaaggee:: PPaarrtt 22 –– UUnnddeerrssttaannddiinngg aanndd UUssiinngg IIm
maaggeess
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:
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.
.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.
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):
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.
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:
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:
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.
CCrreeaattiinngg aa W
Weebb PPaaggee:: PPaarrtt 33 –– AAddddiinngg AA SSiim
mppllee TTaabbllee
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.
<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.
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!!!
TThhee UUM
M LLiibbrraarriieess’’ BBeesstt PPrraaccttiicceess aanndd W
Weebb AAuutthhoorr’’ss CChheecckklliisstt
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/
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:
¾ 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.
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.
UUM
M LLiibbrraarryy TTeem
mppllaatteess
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 Course Related Web Pages -- for pages created to support a specific class at UM.
¾ 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.
UUssiinngg W
WeebbSSppiinnnneerr
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.
¾ 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).
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 [email protected], for instructions on how to FTP files and
use the “Upload” feature in WebSpinner.
¾ Select the appropriate directory where you want to edit the file.
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
[email protected].
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.
¾ When you are in the /JUNK directory, scroll down until you see the
¾ 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 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.
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.
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.
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).
HHTTM
MLL VVAALLIIDDAATTIIOONN
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:
SSPPEECCIIAALL HHTTM
MLL CCHHAARRAACCTTEERRSS
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:
AADDDDIITTIIOONNAALL RREESSOOUURRCCEESS
A number of resources exist to assist you in learning more about HTML. One recommended source is:
Castro, Elizabeth. Creating a Web Page With HTML: Visual QuickProject Guide. Berkeley: Peachpit
Press, 2004.
There are also several books available for you to check out from the Learning Curriculum Resource Library:
¾ Castro, Elizabeth. HTML for the World Wide Web. 4th Ed. Berkeley: Peachpit Press, 2000.
¾ Niederst, Jennifer. HTML Pocket Reference. 2nd Edition. Sebastopol, CA: O’Reilly, 2000.
¾ Robbins, Jennifer Niederst. HTML and XHTML Pocket Reference. 3rd Edition. Sebastopol, CA: O'Reilly,
2006.
¾ Robbins, Jennifer Niederst. Web Design in a Nutshell. 3rd Edition. Sebastopol, CA: O'Reilly, 2006.
A complete listing of titles in the Learning Curriculum Resource Library is available at:
http://www.lib.umd.edu/groups/learning/lcrlibrary.html.
CREDITS:
Training session originally designed by Clare Sebok, Staff Training and Development, 1/2002. Revised and updated 7/2003,
11/2003, 9/2004, 9/2005, 3/2007 and 10/2007 by Maggie Saponaro, with assistance from Janet Evander and Gary Phillips, ITD.
4/4/08; Revised and updated by Dawn Borgardt, with assistance from Janet Evander and Julie Brophy 8/2008 .