An Announcement that is one long paragraph is very hard to read! Here are some tips that will help you format your announcement:
- Break up those long paragraphs!
- Add bold, italic and even color!
- Make numbered and bulleted lists!
- Insert links and images!
Basic stuff about HTML
HTML ignores "whitespace" such as new lines, extra spaces, tabs, and so forth. Without formatting commands, it will display text as one long paragraph.
Text is formatted by adding "tags". To format a particular section of text you need a "beginning tag" such as <font color="red"> and and "end tag" such as </font>. The "beginning tag" has a name (such as "font") and "attributes" which are listed after the name. The "end tag" has the same name preceded by a "/" character.
These "tags" surround the text to be formatted, so if you want red text, then you type: <font color="red">This will be red.</font> This will appear as:
This will be red.
Some formatting "commands" only have one tag - these include commands to insert line breaks, images, etc.
Now that you have the basics - here are a few formatting commands that will let you make your Announcements more readable.
Break up those long paragraphs!
<p>
new paragraph. |
Inserting <p> will create a new paragraph. A blank line will be inserted before the new paragraph.
|
<br>
line break |
The <br> command starts a new line but without inserting a blank line. It can be useful within an itemized list - use two in a row <br><br> to start a new paragraph without creating a new item on the list!
|
| Note: These commands don't require an "end tag". |
Add bold, italic and even color!
<b> ... </b>
for bold |
Wrap a <b> (begin bold) and a </b> (end bold) around the text you want to be bold face.
So if you type:
This will <b>be bold</b> not plain.
then it will appear as:
This will be bold.
|
<i> ... </i>
for italic |
The same idea as bold:
If you type:
This will <i>be italic</i> not plain.
It will appear as:
This will be italic not plain.
|
<u> ... </u>
for underlined |
In general, don't underline for emphasis - it can be confused with a link. |
| <font color="red"> ... ... </font> |
You can add color by using hexidecimal codes - or simply by using any of over 100 color names. So if you guess at a common color name it is likely to be recognized by a browser.
So if you type:
This is <font color="red">red</font> but this is <font color="darkgreen">dark green </font> and this is <font color="chocolate">chocolate</font>
It will appear as:
This is red but this is dark green and this is chocolate.
Don't get too carried away!
|
| <font size="3"> ... ... </font> |
Change the font size by using a number from 1 (smallest) to 7 (largest). You can also use +1 or -1 to make it larger or smaller.
So if you type:
This is <font size="+2">larger</font>
It will appear as: This is larger
|
You can combine font attributes, for example by writing:
This is <font color="red" size="1">small and red</font>
This is small and red |
<sup> .. </sup>
for superscripts and
<sub> ... </sub>
for subscripts |
If you type:
Carbon Dioxide is CO<sub>2</sub>
It will appear as
Carbon Dioxide is CO2
and if you type:
The area of a circle is Pi * radius<sup>2</sub>
It will appear as
The area of a circle is Pi * radius2
|
Note: Combinations of tags can be "nested" - to work in all browsers they should be nested so that they combine in pairs when read from the inside out:
So you should write:
This is <b><i><font color="purple">bold and italic and purple</font></i></b>
where the bold tag is the first beginning tag and so the last end tag, etc.
And you will see:
This is bold and italic and purple
|
Make bulleted and numbered lists!
<ul>
<li> item
<li> item
<li> item
</ul>
unordered (bulleted) list |
A bulleted list is called an "unordered list". Start the list with a <ul> tag and end with </ul>. Each item is preceded by a <li>.
So if you type:
<ul>
<li> Item one
<li> Item two
<li> Item three
</ul>
You will see:
- Item one
- Item two
- Item three
|
<ol>
<li> item
<li> item
<li> item
</ol>
ordered (numbered) list |
A numbered list is called an "ordered list". The format is just the same as the bulleted list except that it begins with <ol> and ends with </ol>
So if you type:
<ol>
<li> Item one
<li> Item two
<li> Item three
</ol>
You will see:
- Item one
- Item two
- Item three
|
| You can "nest" lists to make sub-lists that will be indented. You can change the a list from numbered to lettered by typing <ol type="a"> or even to Roman numerals by typing <ol type="I"> |
Insert links and images!
Making a link :
<a href="http://www.uas.alaska.edu/sitka/Photo_gallery.html" target="_new">This is the link</a> |
You want to make some text into a link. In front of the text type the beginning tag <a href=" ...."> and after the text type the end tag </a> - where the link location (URL) is between the quotation marks.
So if you type:
<a href="http://www.uas.alaska.edu/sitka/idc/index.htm">The Instructional Design Center</a>
You will see:
The Instructional Design Center
Most common errors:
- Forgetting the http:// in front of the web address
- Forgetting to put both beginning and ending quotes around the web address
If you want the link to open in a new window, include target="_new" within you beginning tag (as shown above). This is optional.
|
Inserting an image:
<img src="http://www.uas.alaska.edu/sitka/uas_logoDropshadow.jpg"> |
There is only one tag for an image. The image file should be a "gif" or "jpg" and must be uploaded somewhere on the web, not on your own computer. You upload to the resource section of UAS online (and then use the link provided) or you can upload to your "uashome" web directory. If you upload to your uashome "web" directory then the URL (web address) of the image will be something like "http://uashome.alaska.edu/~tfxxx/filename.gif"
So if you type:
<img src="http://www.uas.alaska.edu/sitka/idc/images/tinylogo.gif">
You will see:
|
When you post announcement to UAS Online you will see a link to "HTML tips" in the lower right below the announcment text entry box - click there for a summary of HTML tags.
|
