Hand-Code Simple HTML

CSI Staff: Staff Writer; Center for Support of Instruction; Category: » Tech-skills-software » 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.
In WebTycho, HTML formatting is evident only after submitting, but you may edit and submit multiple times. See Troubleshooting (below) if you have difficulties.

HTML Basics:

HTML codes are typed in "tags".
Each tag come in pairs: an opening tag before the text to be formatted and a closing tag after, e.g., bold text. A tag is enclosed in angle brackets < >.
A closing tag includes a forward slash, e.g., . HTML is not case-sensitive; tag contents may be either upper or lowercase.

Paragraphing / alignment

Hard return

The "line break" code creates a hard return at the insertion point but no blank line after the return.

Example

Each tag come in pairs: an opening tag before
the
text to be formatted and a
closing tag.

Paragraph

Typing the tag at the beginning of each 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.

Basic paragraph plus left/right justification

You may add left, right or center alignment commands to the tag. Note in the tags below the single space after the "p" and the quotation marks around the left/right designations.

 - Left-justification is the default alignment for HTML text; however, if necessary, you may define left-aligment using the code.

 - Use the code to right-justify paragraphs.

 - Use the code to center text

Example

Left Justified Text

Right Justfied Text

Centered Text

Indent

Enclose text to be indented inside the <blockquote> </blockquote> tag-pair. This indents both the left and right margins approximately half an inch.

Example

Enclose text to be indented inside the blockquote tag-pair. This indents both the left and right margins approximately half an inch.

Enclose text to be indented inside the blockquote tag-pair. This indents both the left and right margins approximately half an inch.

Enclose text to be indented inside the blockquote tag-pair. This indents both the left and right margins approximately half an inch.

Text appearance

Bold - Bold Text becomes Bold Text.

Italics - Italicized Text becomes Italicized Text.

Underline - Underlined Text becomes Underlined Text.

Underlining is normally reserved in HTML documents to indicate a link.

Font Face (note quotation marks)

<font face="Arial">text changes to Arial</font>
becomes text changes to Arial.

<font face="Times New Roman">text changes to Times New Roman </font>
becomes text changes to Times New Roman.

Font size

<font size="+1">makes the font size larger than the default</font>
becomes makes the font size larger than the default.

<font size="-1">makes the font size smaller than the default</font>
becomes makes the font size smaller than the default.

Font color

To change the font color you need to use the hexidecimal format: <font color="#FF0000">red</font> becomes Here is how to change the font color to red. (likewise, blue, green, etc.)

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.

See http://www.webmonkey.com/reference/color_codes/ for a color chart.

Combining Font Tags

You can combine font formatting 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="#9900FF" size="+1">your text </font>.

Bulleted (unordered) or numbered (ordered) lists

<UL> <LI>example</LI> <LI>example</LI> <LI>example</LI> </UL>	becomes	example example example
<OL> <LI>point 1</LI> <LI>point 2</LI> <LI>point 3</LI> </OL>	becomes	point 1 point 2 point 3

The HTML list format does NOT create spaces between the list items, and it adds a blank line after the list is closed. To add a line break you can use the tag after the </LI> tag.

Active ("hot") links

The basic format for inserting links is <A href="Add the URL here ">link text</A>.

Make the URL the active link (preferable for documents that are likely to be printed, so that the URL is visible)

Example

I found interesting information at <A href="http://www.cnn.com">http://www.cnn.com</A>. becomesI 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)

Example

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://www.cnn.com">here </a> for an insteresting website.
becomes Look here for an interesting website.

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

Email your questions to <a href="mailto:jdoe@umuc.edu">jdoe@umuc.edu</a>
becomes Email your questions to jdoe@umuc.edu.

The instant "mail-to" window works only if the person who clicks on the link has his/her default mail program set up properly.

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 of your image ">.

For example:

<img src="http://deoracle.org/assets/how-to/html-pages/pathway1.jpg"> displays the image.

Sample Picture

Special characters ("HTML entities")

Many frequently use characters and symbols that 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 (²)		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.

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 (exception )
the closing tag has a forward slash, e.g.,
each tag-pair has both an opening and closing angle bracket ,
there are no spaces just inside the opening angle brackets not
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 hand-coding tables can be confusing.) Please do not use any javascript in WebTycho.

References

Rating: Not yet rated

Comments

No comments posted.

DE Oracle @ UMUC

An Online Learning Magazine for UMUC Faculty

Center for Support of Instruction