Just Enough HTML for Fatwire
1 like3,128 views
The document provides a comprehensive guide on using basic and advanced HTML tags within the Fatwire 6.3 content management system. It includes instructions on formatting text with bold and italics, creating hyperlinks, and embedding links to documents, as well as guidelines for tables and navigation links. Additionally, it offers sample code for various HTML elements to help users effectively design their web pages.
Just Enough HTML for Fatwire
- 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 the <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