WiscWebCMS - Source Code & HTML

To most administrators, the text area is the simplest content class available on WiscWeb CMS. But, the implementation and options are much greater than some would think due to the fact that it utilizes HTML (if you are using an updated browser, HTML5 is the current standard). Here you will be shown just a few extra things you can do with the Text Area and HTML located in the "Source Code" tab of the Text Editor.

What is Source Code? How to get access?

Navigation:
How to edit via Source Code
HTML Tips for Text Area
What not to do/how to fix in Text Area

Source code is simply a text box that allows you to access the page's HTML, which is a standard code that can change the style of the text (not the design of the page; therefore, you cannot use Scripts, CSS, nor Javascript in WiscWeb CMS) that you input onto the Text Area content class.

Accessing Source Code requires that you are using the browsers FireFox, Safari or Internet Explorer (Not Google Chrome). Once you are using an updated browser of the 3, you will see the "Source Code" tab in the bottom left corner of the Text Area.

Note that all of these are only suggestions and recommendations that may help, and are not enforced. Learning to edit through Source code will powerfully enhance your understanding of HTML and text structuring, and it's strongly recommended that one gets used to using both the Design and Source Code editing options.


How to edit via Source Code, The Basics

Here are the first handful of codes you will need to memorize to understand the basic layout of editing through Source Code.

  • <p> --- Paragraph: This will create a single space above and below the content in this code to act as a paragraph.
  • <br> --- Break: Counts as a single line break, or a single line spacing (It's used in this paragraph right here). This code is automatically generated in the Design aspect of Text Area with the keys SHIFT + ENTER.
  • <h1> <h2>... through <h5> --- Header: This changes the size and adds bold to the specified characters. h1 is the largest size and goes to h5, which is the smallest.
  • <strong> --- Bold: Simply bolds the character.
  • <em> ---  Italics: Stands for emphasize, but italicizes the specified characters. NOTE that sometimes you will come across the code <span class="italic">Enter text content here</span> which might of worked for your old website to italicize, but will NOT WORK for WiscWebCMS.
  • <u> --- Underline: NOTE that sometimes you will come across the code <span style="text-decoration: underline;">Enter text content here</span> which might of worked for your old website to underline, but will NOT WORK for WiscWebCMS.
  • <a> --- Hyperlink: You'll constantly see this code along with href, id, name and once in a while target. It's used for linking purposes and will always include one of the aforementioned codes along with it (Example: <a href="insert link here">Target</a>). 
  • <p>&nbsp;</p> or &nbsp; --- Non-breaking Space: The one between the <p> code stands for a empty space paragraph break, whereas the code alone stands for a single empty space that acts like you bumped the space bar once.

Remember to always close your codes with the backslash / version of the code in brackets! <b>It's real important!</b>

Once you've memorized these 7 codes, for the most part you'll be able to fully utilize source code with the rest of the tips below. You'll memorize more codes as you go, but there's no need to rush!

Return to the TOP


Utilization of the Text Area, Tips and Tricks

Navigation:
1. Anchors - Page jumping explained further
2. Page Divider - Horizontal Line break between paragraphs
3. External Links - Opening links in new tabs
4. Mouse-over - Extra text pop up when you mouse over text, AKA: Tooltips
5. Customizing Tables - Neat things for Text Area's table
6. Facebook Feeds - Embedding pages from Facebook
7. Progress Bar - Embedding a bar that shows % completion
8. Highlighting Text - A 4th way to define your text
9. Expanding Picture - Opening up a picture on Text Area
10. CC Email linking - CC an email that you linked in Text Area
11. Linking Text Area - Have the same Text Area show elsewhere on website
12. Blockquotes - Indenting a paragraph, more ways to indent, font color issue
13. Positioning and Spacing - How to move/position images around without effecting the text content itself, and horizontally spacing an image that is too close to text.
14. Lists - How to change ordered list numbering, etc.
15. Color - How to further edit font and background colors

Return to the TOP


What not to do/how to fix in Text Area

Navigation:
1. External Images - Unreliable external images and size constraints
2. Unnecessary Code - What not to use and how to fix/clean up bad code
3. Extra Text Areas - If you're not linking, make it easier for editors

Return to the TOP


  1. Anchors - Linking parts of the same page, creating Navigation to specific parts of text
    • Anchors are like checkpoints on the page that you can jump to by linking the specific area of the page on the sidebar where you'll be able to instantly jump up and down between the anchors you've placed. Most administrators use this tagging feature to navigate a page with a lot of text, jumping to, returning back to the top, etc.

    • There are 2 HTML codes you would have to put in the Source Code to utilize this feature.
      1. a id= (or a name=) This code will act like the ID of the checkpoint on the page. This is how the code should look like. <a id="NameOfYourChoice">The word that you wish to have the anchor jump to when selected</a> Remember to include the name of the ID in quotations, and close the word you anchored with </a> for it to work.

        • How to not have your ID tagged area be highlighted: You may notice that the words between the code <a id="xxxx">words</a> get hyperlink highlighted when you preview the page. You can get this highlight to go away if you make the code look like this <a id="xxxx"></a>, which will still work when you want to jump to the area the ID code is in, but rather it doesn't surround any words; therefore, it does not highlight them. It might be useful for those who like to reduce the confusion for browsers who might think the ID tagged words link to something or somewhere.

      2. a href= This code will link to the ID of the checkpoint you desire to jump to. This is how the code should look like. <a href="#NameOfYourChoice">Jump to the section of the page where the ID is located when you click this</a> Remember to include the name of the ID in quotations and have a hashtag/pound sign before the name of the ID, and close the word you anchored with </a> for it to work.
    • Here is how the Anchor would work if you CLICK HERE you will be directed to the top where you read "How to edit via Source Code, The Basics" where I placed the ID "howtoedit". The code for it looks exactly like this <h3><a id="howtoedit"></a>How to edit via Source Code, The Basics</h3> and the code for the hyperlink is <a href="#howtoedit">CLICK HERE</a>.

    • IT IS IMPORTANT TO REMEMBER THAT ID TAGS ARE SPECIFIC . Your ID and HREF Tag must be the same. For example: <a href="example">Jump to example</a> will only jump to the ID <a id="example"></a>, but if your ID is <a id="Example"></a> with a capital E for example, then it will not jump to that section of the page. Make sure the ID in the quotations is exactly the same, and be wary of using capitals in your ID's. Sticking with lowercase might reduce confusion in the future!
  2. Return to the TOP

  3. Visual Page Divider
    • There is a code defined as a "thematic break" for HTML, or the "Horizontal Line" for Wiscweb CMS, but known as <hr> in code. It creates a vague line that cuts through your paragraphs as seen in the example below, which the first line is the default size.

      Below is a size 3, which in code is <hr size="3">


      Below is a size 5, which in code is <hr size="5">


    • You can also shorten the length of the line break when you edit the code to say hr width="50%". This code will make the line half of its stretch, so you can edit the line length by percentage as seen below.

      Below is 75%, which in code is <hr width="75%>


      Below is 25%, which in code is <hr width="25%>


    • You can align the line to the left [or right if you change it to "right"] side with the code align="left" which would look like <hr align="left">. As you can see, you can put all these codes together for this feature so that it'd come out the way you want it.

  4. Return to the TOP

  5. Opening up links in a new tab
    • The code you need to add is target="_blank" to your <a>Example</a> code bracket, so it will look like <a href="link" target="_blank">Displaying Text</a>. Note that your links will not open up in new tabs if you use WiscWeb CMS Preview to preview what your site will look like. You need to access the link through your test or production webpage for it to work.

  6. Return to the TOP

  7. Hovering your mouse over a link to display text before clicking
    • Also known as a Tooltip. Put your mouse pointer over THIS. You should see the display text box showing "Can you see me?" In order to use this feature you must go over to Source Code and use the code "title" that goes inside of the <a> code. Here is what the code for the example above looks like: <a title="Can you see me?" href="www.wisc.edu">THIS</a>. This links to the UW main page, but before you click on it it will prompt the message box.
    • You'll notice that you can enter in a Tooltip after clicking on "Insert or Edit Link" and having a Tooltip on an image can also be done through Alternative Text after clicking "Insert Image or Edit Image Properties".

  8. Return to the TOP

  9. Customizing a Table
    • There are many ways of using the Table from its organization of data and information; such as creating a calendar, creating a staff page, and so on. Here, we'll show you a couple things that will help you in organizing your table the way you might want it to look.
      1. Aligning text to the top of the box: Some CMS editors might not want their tables to have text floating in the center of the box of a table simply because it has fewer paragraph lines as seen in the picture below, which is the default formatting for a table.

        By using the code valign="top", one can have the text begin from the top rather than default at center. Below is a picture of how it looks in Source Code.

        ** valign="top" isn't restricted to a single box, but you can also specify whether you want a single row to have all of its content align to the top, or simply have it applied to the whole table so that you don't have to repeat the code. If you'd like this to apply to a single box, simply put valign="top" into the <td> code, so that it'd look like <td valign="top">. If you'd like this to apply to a single row, you put the code into <tr>. By now you should be able to deduct that if you put the code into <tbody> it will apply for the entire table. The picture below shows us how it looks applied to the entire table, <tbody> and looks like <tbody valign="top">.

      2. Applying more noticeable borders: The default table actually doesn't have borders as seen in the picture below.

        In order to add borders you must apply border="1" in the code line <table> found in the text area's source code, so in the end it would look like <table border="1">.

        Horizontal-border only or Vertical-border only in Table?? For a vertical border you can also use the straight slash | key, which is SHIFT + backward slash, to organize a table to have vertical-like borders. Unfortunately you cannot be selective and add only horizontal borders, but doing things like this is definitely an alternative.

      3. Adjusting the length of Table Columns
        • By default, the length of the boxes depends on which sentence is longer than the other. In order to change this, you will have to use the code <width> and implement it into the table codes <table> and <td>. It's important to remember that you only need to apply the width code for the boxes (td) in the first row (tr) for it to apply to the entire table.
        • In the picture below, adding the width code allows you to change the size by % or if you know the exact resolution of your webpage, you can adjust the length by pixels, which you then only need to enter a number between the quotations; for example, width="400" is 400 pixels.

        • The exact code above will adjust the width of all rows in the table (include the 2nd row that only says "test" in all the boxes) starting from the left to right as 50%, 15%, 15% and 20%.
  10. Return to the TOP

  11. Inserting a Facebook Feed (Similar to RSS Feed, but with Facebook Pages)
    • Here is an example of what the Feed looks like, it's highlighted in the red box. The content to the right is a regular RSS Feed.


    • There is a specific code that you have to enter into the source code of a Text Area found highlighted beneath:

      <iframe frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 230px; height: 590px;" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FUWMadison&amp;width=230&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=true&amp;show_border=true&amp;appId=72528326976"></iframe>

      Note: This code is a feed for UW Madison's Facebook Page. In the pictures below, you will be shown how to change the code to show the feed for the Facebook page that you want.

    • What to change: There is only one section of the code that you need to change in order to change the Facebook Feed to the page that you want (If you don't want the default UW Madison page showing). The picture below shows which section that is.

    • As you can see it's the line in the code towards the top between www.facebook.com%2F and &amp; This is called the Facebook Page Name and you can find it after the backslash of the Facebook Page you want to link to as seen in the picture below.


    • Changing Box Width and Height: You can adjust the height and width of the box by changing the 4 values found in both width: 230px; height: 590px;  along with width=230&amp;height=590&amp;. As you can see the width value is 230 and the height value is 590 from the original code.

    Return to the TOP

  12. Progress Bar

    • You can use this feature to keep track of any sort of progress such as a donation goal tracker, # of applications received, etc. In order to display the progress bar you must use the code <progress>. You can see an example of a 25% full progress bar below and its code looks like this <progress value="25" max="100"></progress>. Note that you can utilize the title code with this code to further its complexity and usage, thus the code using title will look like <progress value="25" max="100" title="Currently @ $1025"></progress>. You can also go one step further and wrap an a href code around the entire progress code in order to link a donation page to the bar!

    • $4000 Donation Goal:

    Note: You can't change the design of the progress bar. Also, any text between the 2 progress brackets will not be visible.

    Return to the TOP

  13. Highlighting Text

    • You might be looking for a 4th way to define the text instead of using the standard 3 such as bolding, italicizing or underlining. Luckily there's highlighting that works with the code <mark>. Here is an example of the code being used. Simply enter the code, while in html/Source Code, around the desired text. In this case it looks like <mark>code</mark>.

    Return to the TOP

  14. Expanding a picture in a new window/tab after clicking
    • You may notice that only the Image Gallery content class allows you to click on an image, which then opens up into a new page that allows you to view the images up close. Image with a caption and the Photo carousel don't offer this option. If you happen to prefer putting pictures on Text Area after uploading them, there is a way for you to open the image in another page to view large pictures in full resolution.
    • How to:
      1. Upload your picture onto the CMS Asset manager
      2. Place the photo in the text area via "Insert Image or Edit Image Properties"
      3. Use the "a href" tag via Source code with the image's ID to wrap around the initial image code or found in quotations after src=
      4. When you click the image on the webpage it will open up (default in the same window, use the target="_blank" code to open up the image in a separate window) to its maximum resolution, or original size.

        There is an example of the code below.

        <p><a href="[ioID]ABunchOfNumbers/image.jpg"><img alt="" src="[ioID]ABunchOfNumbers/image.jpg" /></a></p>

    Return to the TOP

  15. Extra Email linking options
    • There is a way to have email links in the text area also cc extra emails when the person browsing wishes to by modifying the "a href" code with the tag ?cc= along with mailto:. In order to cc an extra email, you simply put ?cc= in front of the original email address as seen in the example below.

      <a href="mailto:johndoe@wisc.edu?cc=johndoe2@wisc.edu">MAIL TO</a>

    • Note: When someone clicks on an external email link, it usually prompts their outlook (email software) to open. So, the individual can still take out the person you include to cc. 

    Return to the TOP

  16. Linking the Text Area
    • Instead of creating multiple Text Areas on different pages (with the same exact content, words and pictures), you can simply create 1 Text Area and link it across your webpage by using the "Connect Existing Page" option after clicking "Manage Sidebar/Main Content" button as seen in the red box below.

    • Note that Search is case sensitive!

    Return to the TOP

  17. Blockquotes, Indenting, etc.
    • On CMS, using the indent button will create a <blockquote> for the text that you selected. Doing this will change the default text color to a light-grey. Changing the color will simply require you highlight and select the indented section, click on the button "A" and select the font color you desire. Changing the color of text in Source Code will require the use of the span and style codes. Black font will have the exact code <span style="color: #000000;">Area of selected text between blockquotes</span>.
    • Alternative: There is another way to indent a paragraph so that you won't have to go through the collective trouble of doing the process above for blockquotes over and over, and that's with the unordered list code, or <ul> as seen in the picture below, which shows the Source Code version and the preview version.

      Indentation Size: Blockquotes may have the length of their indentation (distance away from the left end of the page) adjusted with the code style="margin: #px;" included within <Blockquote>. You can adjust the distance with a # before px ranging from 0 to infinity, with 20px being the default if you didn't have the style code.

    • Isn't the code <ul> going to create bullet points?

      The <ul> code will only create bullet points when you include the <li> code within it, but if you only have ul alone inside a paragraph or <p> code then it can act as an indent. The only thing is that you'll have to work through Source code rather than Design mode.

    Return to the TOP

  18. Image, Table, File positioning and spacing in Text Area
    • Unfortunately there's not much that can be done with the codes <br> and <p> since they only create vertical spacing. Some might wonder how to create margins horizontally in order to not use the &nbsp; code, and here's how!

      1. The code float and margin must be used together inside the code style within a parent code; for example, the codes <img>, <table>, etc.
      2. Style is the code that is required so that the other 2 codes will be able to function. Float will allow you to position an asset (image, table, etc.) without aligning the text paragraph, which would mess with text, in the direction you like (right, left, center, etc.). Margin will allow you to space an asset away from everything else by the amount of pixels you want.
      3. The main code will look like <img alt="" src="filenumber/image.jpg" /> and when you place an image at the front of a paragraph (Example: <p><img alt="" src="filenumber/image.jpg" />A short story is...</p>), it will look like the picture below.

      4. When you implement the style code with the float code, the main code will look like <img alt="" style="float: right;" src="filenumber/image.jpg" /> and looks like the picture below.

      5. If you feel that the image is too close to the text, you can implement the margin code inside the style code along with the float code, which will look like <img alt="" style="float: right; margin: 20px;" src="filenumber/image.jpg" /> and will appear like the picture below.

    • Note: Remember that style effects the properties, and that not everything in source code can have their properties changed!

    Return to the TOP

  19. How to edit Lists
  20. Some editors might wonder if you can do more than just have # lists and revert to alphabet or roman numerical lists. There is actually a way to do this, through Source Code.

    1. The code required to change the default # list (AKA: <ol>) is the type code. Make sure that the ordered list <ol> you're applying the type code to is the list you want changed.
    2. There are 4 other kinds of ordered lists you can have. A, a, I, or i. Depending on whether you want capital alphabetical, lower case alphabetical, roman numerical, or lower case roman numerical; you will enter the code <ol type="A">, <ol type="a">, and etc.
    3. Remember that this does not apply to unordered lists or the code <ul>.

    Return to the TOP

  21. Editing Font and Background Color
    1. In the Text Area, you might notice that the color palette and selection is quite limited. You can actually have any color font and background you want if you edit the colors through Source Code and the use of span and style
    2. With the use of an HTML Color Picker or Color Palette, after selecting your desired color it can give you a code starting with the # sign and 6 number and/or letters following, which will stand for that exact color.
    3. You then will put the span code around the desired text selection to implement your desired color. Example: This green text here has the code <span style="color: #008000;">This green text here</span>. If you want background color then you simply edit the code to include background-color in the quotations, so <span style="background-color: #008000;">.
    4. Some General Colors include:
      1. Black: #000000 - Example
      2. Yellow: #FFFF00 - Example
      3. Blue: #0000FF - Example
      4. Purple: #800080 - Example
      5. Orange: #FFA500 - Example
      6. Pink: #FFC0CB - Example

    Return to the TOP


Things suggested NOT to do/how to fix in the Text Area on CMS

There are a few things to remember that can cut frustration when it comes to editing and organizing text on CMS.

  1. Placing an image through an external link rather than uploading it through Asset.
    • If you upload an image as an asset, you can edit the image with CMS's built-in image editor. If you link an image through URL, not only are you unable to edit the image, but the image will become broken if the original location of the image is moved or deleted.
    • Remember that a smaller image file (in terms of width x height px and filesize) load much faster, and place less stress on the devices of the customers visiting your page.
    • So, remember that uploading an image (as well as a file) onto CMS is much better than linking external images and files.

    Return to the TOP

  2. Unnecessary Code
    • Most, if not all of the time, Source code will be filled with very unnecessary code that clutters up and makes organizing much much harder if Editors don't regularly check the Source Code tab.
    • Text Area is now able to detect whether you are pasting content copied from Word Document and will ask if you want the content cleaned, but if you copied content from a page on a web browser, sometimes Text Area is unable to detect messy code to automatically clean up.
    • If Text Area is unable to detect copied content from something outside of a simple text box like notepad, it could carry on over messy coding into your Source Code. For example the code "class" used in <p class="any word"> can't be fully utilized because css nor javascript cannot be modified by WiscWebCMS users, and will often find it's way into Source Code if you don't use the "Paste as text" option found in the toolbar.
    • How do you know what to clean (delete) up and what not to? (Remember in "The Basics" section at the top, there was also info about codes used for italics and underline that won't work on WiscWebCMS, and thus should be deleted and replaced with working code)

      • A lot of the time, bad code simply isn't doing anything and doesn't even effect the text area (or how your text is laid out). It simply is filling empty space, making it harder for you to locate certain paragraphs and sentences. For example this code <span style="font-size: 12pt; font-family: &quot;times new roman&quot;,serif;"></span> is actually doing absolutely nothing because the area between the span code is filled with no text. This is what you know you have to delete, along with code that you can't use because of css and javascript limitations such as <script>, <p class>, <form>, etc.
      • These codes are usually bunched up together and have multiple copies, so if you find one you will find many!

      • Note: One of the confusing things about codes within codes, for example the code class found inside of the code  p <p class="name">Paragraph sentence</p>, is that some editors might accidentally delete the entire code, when only one part of the code <class> was unnecessary, but the other code <p> was vital to the structure and organization of the text. It's important to remember codes for HTML such as <p> (stands for paragraph) because it acts as the code that forms the paragraph in the text area.
    • Can I just leave messy code behind? Won't the text area still work, and be visually fine?

      • Technically you could leave messy and unnecessary code alone and the webpage would function as it will, while ignoring the code clutter. But, it's strongly suggested not to leave it alone even if you don't think you'll be accessing/updating the specific text area for a very long time due to the fact that it might cause problems on newer/different browsers used on different devices. Some individuals, who don't have access to CMS might also want to copy the text on your webpage and might have to deal with extraneous issues when they edit the text in the future. So, in the end, it's best and strongly recommended for all administrators who have access to editing your text areas to clean up messy code when checking Source code.
    • Remember that just because it looks good on your screen, doesn't mean it will look good on other screens due to various browsers and installed software. So, it's best to keep your code as clean and simple as possible.

    Return to the TOP

  3. Extra Text Areas that you aren't linking
    • In conjunction with #11, "Linking Text Areas", if administrators don't intend on linking specific Text Areas with other pages on their website, they should use a single Text Area on the web page to reduce confusion and extraneous content classes on the website.
    • What if I want another content class (that's not an image) to be sandwiched between 2 Text Areas?

      • This is perfectly fine, and is seen on many webpages. It's recommended, when multiple text areas on top of one another, to simply use 1 text area and apply visual page dividers (#2 and the <hr> code) or the code &nsbp; (an invisible space buffer) in order to organize sections and paragraphs, in order to make it easier not only for editing, but also site management.

    Return to the TOP

See Also:




Keywords:text area editor editing how to html tips tricks source code link facebook image picture photo fix progress bar measure table anchor page jump faq standard template   Doc ID:51950
Owner:Ryan H.Group:WiscWeb CMS
Created:2015-06-04 13:41 CDTUpdated:2015-11-24 15:35 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  0   1