Useful HTML tags, from basic to not-so-basic. Includes FatWire-specific code examples. Collaborative effort between myself and my colleague, Thurston Hatcher. Feb 2010

1. Just Enough HTML for FatWire 6.3
Basic HTML Tags
Line Breaks
To make a line break, insert one <br>tag.
To create a blank linespace, use two <br> tags.
Examples:
HTML:
Jane Smith, PhD<br>
Armour Academic Building<br>
600 S. Paulina St.<br>
Ste. 440<br>
Chicago, IL 60612<br><br>
Renders:
Jane Smith, PhD
Armour Academic Building
600 S. Paulina St.
Ste. 440
Chicago, IL 60612
Bold
To bold a word or phrase, use the <b> and </b> tags. These tags must be paired. The <b>
tag opens the bolding and the </b> closes the bolding. For those of you who remember
WordPerfect, it is a similar concept. If you fail to add the close bold tag </b>, then
everything after the <b> tag will become bold.
Examples:
<b>Headings Like This</b>
<b>Phone</b>: (312) 942-5000
<b>E-mail</b>: some_body@rush.edu
Renders:
Headings Like This
Phone: (312) 942-5000
E-mail: some_body@rush.edu

2. For the Rush U Web site, news story date on news detail pages and headings are always
bold. Don’t overuse bolding, or else it will fail to bring attention to things you want to
emphasize.
Italics
To italicize a word or phrase, use the <i> tag to open the italics, and the </i> tag to close
it.
Examples:
<i>Subheadings Like This</i>
<i>U.S.News & World Report</i>
Renders:
Subheadings Like This
U.S.News & World Report
Intermediate HTML Tags
Hyperlinks
For hyperlinks to Web pages that are not in our FatWire 6.3 CMS, the HTML code will
generally look like this:
HTML:
<a href=“http://www.domainname.edu”>The Wording You Want to Show on the
Page</a>
Renders:
The Wording You Want to Show on the Page
E-mail Links
For e-mail links, the HTML code looks like this:
HTML:
<a href=“mailto:some_body@rush.edu”>some_body@rush.edu</a>

3. Renders:
some_body@rush.edu
Advanced HTML Techniques
Embedded Hyperlinks to Pages in FatWire 6.3
There are some specific steps required to create an embedded link to a page within the
FatWire system. By embedded link, I mean a link that is placed somewhere within the
text on a page, not using a FatWire link asset that goes in the “Related Content” box in
the right hand navigation on a Level 1, 2, 3, or 4 page.
To create an embedded link to a page that is already published on the live Web site in
FatWire 6.3, navigate to the page to which you want to link.
Copy the URL from the address field in the Web browser.
For example:
The Comparative Research Center Web page on the Research at Rush site is located at
this page address:
http://www.rushu.rush.edu/servlet/Satellite?c=RushUnivLevel2Page&cid=122990271302
8&pagename=Rush%2FRushUnivLevel2Page%2FLevel_2_Audience_Portal_Page&ren
dermode=preview
To create an embedded link to this page, follow these steps:
1. Remove the http://www.rushu.rush.edu
2. Remove the &rendermode=preview
3. Use the remaining URL, starting with /servlet. Thus,
/servlet/Satellite?c=RushUnivLevel2Page&cid=1229902713028&pagename=Rus
h%2FRushUnivLevel2Page%2FLevel_2_Audience_Portal_Page
4. Using the same format as a standard Web page hyperlink, as shown in the
previous example, but substituting this shortened version of our FatWire 6.3 page
URL, the hyperlink code would be: <a
href=“/servlet/Satellite?c=RushUnivLevel2Page&cid=1229902713028&pagenam
e=Rush%2FRushUnivLevel2Page%2FLevel_2_Audience_Portal_Page”>Words
You Want to Show on the Web Page</a>
5. This link would appear as Words You Want to Show on the Web Page
The purpose of removing the http://www.rushu.rush.edu is to make the link relative on all
three environments in FatWire 6.3, i.e., the editing environment, the staging environment,

4. and the live environment. That will make link testing more accurate across all three
environments, and when previewing pages in the editing environment, you will be
looking at linked pages that are also in the editing environment, instead of crossing from
edit to live during your preview process.
Embedded Links to Documents Not Yet Published to the Live Web Site in FatWire 6.3
To create a hyperlink to a document that exists in FatWire 6.3, but is not yet published to
the live site, use the following formulas to create your hyperlink. Again, this is the
process to use when you want to link to a document in the system from within a page
body, rather than adding the document assets under the third content block on a Level 1,
2, 3, or 4 page.
There are four types of documents currently supported in FatWire 6.3, and there is a
different formula for each document type. Note that in each formulat, the Asset ID
number is the long number I’ve bolded.
PDF Documents
/servlet/BlobServer?blobcol=urlfile&blobtable=document&blobkey=id&blobwhere=120
8179168765&blobheader=application%2Fpdf&blobnocache=true
Word Documents
/servlet/BlobServer?blobcol=urlfile&blobtable=document&blobkey=id&blobwhere=120
3346307257&blobheader=application%2Fmsword&blobnocache=true
Powerpoint Documemts
/servlet/BlobServer?blobcol=urlfile&blobtable=document&blobkey=id&blobwhere=121
3626380662&blobheader=application%2Fvnd.ms-powerpoint&blobnocache=true
Excel Documents
/servlet/Satellite?blobcol=urlfile&blobheader=application%2Fvnd.ms-
excel&blobkey=id&blobnocache=true&blobtable=document&blobwhere=123234328089
3&ssbinary=true
In order to create these embedded hyperlinks, go to the “inspect page” in the system for
the document to which you would like to link. Find the Asset ID number on the “inspect
page.” (Hint: Go to the “Rush Assets” tab, click on the “plus sign” for the “Documents”
node, and then double-click on the document asset name in order to open the “inspect
screen” for that document.)

5. See example of an inspect page and document Asset ID number below.
Next, copy the Asset ID number, and paste it into the formula for the appropriate
document type in place of the bolded Asset ID number that I have used in the examples
above. Then copy the entire URL and paste into the standard hyperlink HTML code.
Example:
HTML:
So, for the Excel document I’m using in this example (above), the HTML code would be:
<a href=“/servlet/Satellite?blobcol=urlfile&blobheader=application%2Fvnd.ms-
excel&blobkey=id&blobnocache=true&blobtable=document&blobwhere=123234328089
3&ssbinary=true”>Words That You Want to See in the Link on the Web Page</a>
Renders:
Words That You Want to See in the Link on the Web Page
Embedded Links to Documents That Are Already Published to the Live Web Site in
FatWire 6.3
Navigate to the document link on a Level 1, 2, 3, or 4 page, located under the third
content block. Click on the link name, and then copy the URL from the browser address

6. field. Then remove the http://www.rushu.rush.edu, and use just the part of the address
that starts with /servlet.
Example:
On the Library’s home page, they currently have a document located on their Level 1
home page called InfoLine Spring 2009. See below.
By clicking on the document link, the document, in this case a PDF file, will open. Copy
the URL from the address field in the browser.
In this example, the address is
http://www.rushu.rush.edu/servlet/Satellite?blobcol=urlfile&blobheader=application%2F
pdf&blobkey=id&blobnocache=true&blobtable=document&blobwhere=1236009018265
&ssbinary=true
To use this URL in an embedded document link on one of your pages, simply remove the
http://www.rushu.rush.edu and use the rest of the address, starting with /servelet.
The HTML would look like this:
<a href=“
/servlet/Satellite?blobcol=urlfile&blobheader=application%2Fpdf&blobkey=id&blobnoc
ache=true&blobtable=document&blobwhere=1236009018265&ssbinary=true”>Words
That You Want To Appear in the Link on Your Web Page</a>

7. Renders:
Words That You Want To Appear in the Link on Your Web Page
Tables
I encourage you to use eWebEdit Pro to insert new tables into your content detail pages
in the system. But there are many instances where it will be helpful to have a basic
understanding of the code behind the table. This is especially true when tables fail to
render correctly, and you are troubleshooting the problem.
The tags that open and close a table are the <table> and </table> tags. The <table> tag
opens the table, and the </table> tag closes the table. All the other tags that constitute the
table go between these two tags.
Each row in a table is delineated with the <tr> and </tr> tags. The <tr> tag opens the row,
and the </tr> tag closes the row.
Within each row of the table, there are individual table cells. The tags that create these
cells are the <td> and </td> tags. The <td> tag opens an individual cell, next comes
whatever characters appear in the cell, and then the cell is closed with a </td> tag.
A table has a certain width on the page. One of the easiest ways to set a table’s width is
by using a percent value. If you want a table to span the entire width of your page, then
you would set the width to 100%. The HTML tag that opens a table of 100% width is
<table width=“100%”>. If the goal is to create a slightly narrower table, a setting of 90%
might be desirable, or 80%, etc. Feel free to experiment with a width that fits the content
and the page. For most pages, 90% or 100% works best. The important thing is to be
consistent, so that the page has a cohesive appearance when it renders

8. Example:
Renders:
.
Anchor Links
Anchor links can make content-heavy pages easier to navigate, helping readers quickly
jump to the information they're looking for. They're particularly useful for FAQs and
event listings.

9. Sample code:
<A href="#dogs">All About Dogs</A><br>
<A href="#cats">All About Cats</A><BR>
<A href="#rabbits">All About Rabbits</A><BR>
<A href="#hamsters">All About Hamsters</A><BR>
<br><br>
<A name="dogs"><strong>All About Dogs</strong></A><br>
This will tell you everything you need to know about dogs.<br><br>
<A name="cats"><strong>All About Cats</strong></A><br>
This will tell you everything to know about cats.<br><br>
<A name="rabbits"><strong>All About Rabbits</strong></A><br>
This will tell you everything you need to know about rabbits.<br><br>
<A name="hamsters"><strong>All About Hamsters</strong></A><br>
This will tell you everything you need to know about hamsters.
Square Information Boxes
Sample code (adjust width, alignment, color, border as needed):
<table cellpadding="6" width="50%" align="center" bgcolor="#b8d4c4" border="1">

10. <tbody>
<tr>
<td>
<p><div align="center">Visit the <a href="/rumc/page-1108048100794.html">RUSH Generations</a>
site to learn more about this free health and aging membership program for older adults and people who
care for them.</div>
</tbody>
</table>
Information Box with Rounded Edges (adjust width, alignment as needed; color is fixed)
table width="50%" align="center" bgcolor="#b8d4c4" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="14"><img alt="..." src="http://www.rush.edu/Rush_Content_Images/topleft.gif" width="14"
border="0" height="14"></td>
<td width="480"></td>
<td width="14"><img alt="..." src="http://www.rush.edu/Rush_Content_Images/topright.gif" width="14"
border="0" height="14"></td>
</tr>
<tr>
<td></td>
<td align="middle">
<p><strong>Learn about&nbsp;the&nbsp;<a href="http://www.rush.edu/rumc/page-
1241037174053.html">Rush Outpatient Chest Pain Center</a>, which provides cardiac chest pain
evaluation and heart attack risk assessment in a single visit.</strong></p>
</td>
</tr>
<tr>
<td><img alt="..." src="http://www.rush.edu/Rush_Content_Images/bottomleft.gif" width="14"
border="0" height="14"></td>
<td></td>
<td><img alt="..." src="http://www.rush.edu/Rush_Content_Images/bottomright,0.gif" width="14"
border="0" height="14"></td>
</tr>
</tbody>
</table>
Embed an image
<img height="130" alt="Rush University Medical Center Chicago"
src="http://www.rush.edu/Rush_Content_Images/RushMedicalCenter180x130.gif" width="180"
align="right" border="0" />
Button HTML

11. <form action="http://www.rush.edu/rumc/page-1213718691287.html" method="link">
<p align="center"><b><input type="submit" value="Return to Resources" /></b></p>
</form>
HTML Resources and “Cheat Sheets”
Webmonkey
http://www.webmonkey.com/reference/HTML_Cheatsheet
KillerSites.com
http://www.killersites.com/HTML_CODES/index.jsp
TryIt Editor
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_test
HTML Test Bed
http://www.jmarshall.com/easy/html/testbed.html