How-To

-- Choose an Oracle Quick Link -- Welcome How-To Archives FAQs Workshops Templates Multimedia Resources Grad School DETS Contacts Grade Book Help Online How to Avoid Plagiarism Training Module WebTycho Login Page WebTycho Archive Server

Search

Hand-Code Simple HTML  Cheat Sheet for Use In WebTycho Text Boxes

Why use HTML in WebTycho? Hypertext Markup Language (HTML) is a means to present content in WebTycho text boxes so that is attractive, authoritative, and easily reusable (copyable). Hand-coding HTML is an efficient way to format short text entries for conferences, assignment comments, and announcements. In the Announcement area, you can combine pasted HTML for long announcements and hand-coded HTML for short ones. What kind of formatting do you want to apply?   Paragraphing/Alignment   Active ("hot") links (incl. email)   Text appearance   Embedded images   Bulleted or numbered lists   Special characters (HTML entities) Before you start Be sure the WebTycho Text Formatting Editor is disabled (via Options/Preferences).  Be sure to select HTML as the input type above the open WebTycho text box.  Keep in mind that although you can change your input type from one area to another in WebTycho, you may use only one input type within each individual text box.  HTML basics: HTML codes are typed in "tags" that usually come in pairs: an opening tag before the text to be formatted and a closing tag after, e.g., <B>bold text</B>. A tag is enclosed in angle brackets < >.  A closing tag includes a forward slash, e.g., </B>. HTML is not case-sensitive; tag contents may be either upper or lowercase.  In WebTycho, HTML formatting is evident only after submitting, but you may edit and submit multiple times. See Troubleshooting (below) if you have difficulties.  The tag examples shown below are displayed in bold face.

Paragraphing / alignment Note: Paragraphing codes do NOT require closing tags. Hard return The <br> "line break" code creates a hard return at the insertion point<BR> but no blank line after the return. Paragraph followed by line space <P>Typing the <p> tag at the beginning of a paragraph creates a unified paragraph of text followed by a hard return and blank line. It is helpful to add this tag to remove hard breaks that may appear in the middle of your plain text paragraphs. To efficiently add this tag to a number of paragraphs, copy it and then paste it wherever needed. Basic paragraph plus left/right justification (closing tags not needed) You may add left or right alignment commands to the <P> tag. Note in the tags below the single space after the "p" and the quotation marks around the left/right designations. <p align="left">Left-justification is the default alignment for HTML text; however, if necessary, you may define left-aligment using the <P ALIGN="LEFT"> code. <p align="right">Use the <P ALIGN="RIGHT"> code to right-justify paragraphs. Center (requires closing tag) <center>The <CENTER> tag-pair centers text (or images).</center> Indent (requires closing tag) <blockquote>Enclose text to be indented inside the <BLOCKQUOTE> tag-pair. This indents both the left and right margins approximately half an inch. </blockquote> becomes Enclose text to be indented inside the <BLOCKQUOTE> tag-pair. This indents both the left and right margins approximately half an inch. Top

Text appearance Bold <b>Bold Text</b> becomes Bold Text. Italics <i>Italicized Text</i> becomes Italicized Text. Underline <u>Underlined Text</u> becomes Underlined Text. Note: Underlining is normally reserved in HTML documents to indicate a link. Font face <font face="Arial">font face changes to Arial</font> (note quotation marks) becomes font face changes to Arial. <font face="Times New Roman">font face changes to Times New Roman </font> becomes font face changes to Times New Roman. Font size <font size="+1">font size becomes larger than the default</font> becomes font size becomes larger than the default. <font size="-1">font size becomes smaller than the default</font> becomes font size becomes smaller than the default. Font color Here is how to change the font color to <font color="red">red</font>.* OR Here is how to change the font color to <font color="#FF0000">red</font>.* becomes Here is how to change the font color to red.  (likewise, blue, green, etc.) See http://developer.netscape.com/docs/manuals/htmlguid/colortab.htm for a color chart in words.* See http://html-color-codes.com/ for a color chart in hexidecimal numbers.* *Professional webpage designers use hexidecimal coding and "websafe" colors that are universally recognized by all browsers. Still, amateur designers have generally good results using basic color words in HTML font codes. You can combine font formatting either by typing separate tags, then closing each one: <font face="Arial"><font color="darkviolet"><font size="+1">your text </font></font></font> OR You can combine font tags by typing more than one font code — separated by a single character space — inside one opening font tag, then closing the font tag just once: <font face="Arial" color="darkviolet" size="+1">your text </font>. Top

Bulleted (unordered) or numbered (ordered) lists   <UL><LI>example  <LI> example  <LI> example</UL> becomes example  example  example <OL><LI>point 1  <LI>point 2  <LI>point 3</OL> becomes point 1 point 2 point 3   1. The HTML list format does NOT create spaces between the list items, and it adds a blank line after the list is closed. (How to adjust list spacing is not covered here.) 2. Although it isn't necessary to close the <LI> tag for each line of the list, it IS necessary to close the <UL> or <OL> list command for the list as a whole. Top

Active ("hot") links The basic format for inserting links is <A HREF="URL">link text</A>. Make the URL the active link (preferable for documents that are likely to be printed, so that the URL is visible) I found interesting information at <A HREF="http://www.cnn.com">http://www.cnn.com</A>. becomes  I found interesting information at http://www.cnn.com. Make the site name or another word the active link and hide the actual URL (may be preferable if the URL's visibility in print is not an issue, or if the URL is very long) I found interesting information at the <A HREF="http://www.cnn.com">CNN homepage</A> becomes  I found interesting information at the CNN homepage. Look <a href ="http://devedge.netscape.com/library/manuals/1998/htmlguide/alphlist.html">here </a> for an alphabetical list of HTML tags becomes Look here for an alphabetical list of HTML tags.   Rather than type a URL, copy/paste it to ensure accuracy. Visit the website so that it is onscreen in your browser; right-click once inside the URL (in the address/location window) so that the URL is highlighted in blue; select the copy option; return to your HTML document and paste the URL into the link tag and add the ""s.  Make an email address a link that opens a preaddressed email window The instant "mail-to" window works only if the person who clicks on the link has his/her default mail program set up properly. Email your questions to <a href="mailto:pjohnson@umuc.edu">pjohnson@umuc.edu</a> becomes  Email your questions to pjohnson@umuc.edu. Top

Embedded .jpg or .gif image files An image file must first be in digital form (.jpg or .gif) and "published" (uploaded or submitted) to a Web server such as WebTycho, Polaris, Europa, or GeoCities. Then you may link to the URL of the published image in this format: <IMG SRC="URL">. For example, <center><img src="http://polaris.umuc.edu/~pjohnso5/grad999/help/pathway1.jpg"></center> displays this image centered in the text area: This applies to linking to single images from within WebTycho. Image paths are handled a little differently when publishing an entire webpage.   One way to publish and link to an image is to upload it as an attachment in a WebTycho text area. Afterwards, find and copy the (very long) URL of the image as "published" on the WebTycho server and then paste that into the <img src=""> code. If using the Netscape Navigator browser, right-click on the image attachment icon in WebTycho and select to "Copy link location." If using the Internet Explorer browser, right click on the image attachment icon in WebTycho, select "Properties", and highlight/copy the URL (be sure to copy the entire URL) of the image as shown. Select to Edit the original text submission in WebTycho. Be sure HTML is selected as the input type, type the basic code for the image path, and paste in the image URL between the quotation marks. Resubmit. Top

Special characters ("HTML entities") Many frequently used characters and symbols are not part of the standard "ASCII" character set and thus are not recognized in an HTML environment. There are, however, "HTML entities" ("escape sequences" or "decimal references") that will reproduce those symbols. Type the appropriate code, without brackets, in the location where you want the symbol to appear. Here are some examples (the semicolon is part of the code): ² superscript 2 (²) (also ³)   nonbreaking / hard space  ° degree symbol ° — em dash — ± plus or minus symbol ± © copyright symbol © See the Advanced HTML page of the World Wide Web (W3) Consortium HTML Tutorial for charts of special characters. You may use either the HTML entities or the decimal references shown in the charts for the special characters. Top

Troubleshooting If any part of the HTML doesn't work after you submit in WebTycho, reopen the text box in edit mode and check that HTML is selected as your input type above the WebTycho text box there are a pair of tags: an opening tag preceeding the text to be formatted and a closing tag following the text to be formatted (exceptions are paragraphing, image source, and entities codes) the closing tag has a forward slash, e.g., </B> each tag-pair has both an opening and closing angle bracket <B>,</B> there are no spaces just inside the opening angle brackets <B> not < B> both the open and close quotation " " marks are in the tags that require them.   As a learning tool, you can look at the source document of any webpage and study how the HTML codes are used there. With the webpage (HTML document) on-screen in your browser, select View / (Page) Source.    If you want to paste HTML into WebTycho from a webpage or from a document you have saved as HTML, please refer to the page How to Copy/Paste HTML into WebTycho. (This option is useful if you need to format a lot of text or if you need to format text into columns, via placement inside a table, since tables can be confusing to hand-code.) Please do not use any javascript in WebTycho. Top

Back to DE Oracle Welcome Page  Back to How-To Page  DE Oracle Guidelines for Contributors   Graduate School Home Page  WebTycho Login Academic Departments Directory Administration Directory Faculty Services  Library Services  Created and Maintained by the Graduate School's Distance Education Coordinators © University of Maryland University College.