Translate

Pages

Tuesday, 27 March 2012

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.

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).

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.

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).

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.

 
Twitter Bird Gadget