Anyone listed in the ASU Directory is able to add custom content to their profile under the "Bio" and "Research Interests" sections, but the means of formatting the information that shows up there is not immediately apparent unless you happen to be a Web developer. The Directory development team is busy building a better system for users to customize their profiles, but, in the meantime, here are some tips for adding basic HTML to enhance the look of your Bio and Research Interests. Feel free to refer to my profile for examples of the formatting in action.

Headings

The largest and most bold heading you can add to either of these sections is an H3, an HTML element used to denote a third-level heading. The first and second-level headings are already on your profile in the form of your name (H1) and the section titles (Bio and Research Interests are H2s). In my profile, all the bold headings ("Some Context", "My Work" and "My Favorite Colleagues") are H3s. To make a big, bold heading, wrap some text in H3 tags, like this:

<h3>My Big Bold Heading</h3>

The next heading size down is an H4. It's smaller than the H3 and not bold, but it can still help separate information in your Bio and Research Interests by sitting on its own line and putting white space above and below itself. By default, there is no bolding, italics or underlining on the H4, but any of these styles can be added by writing some simple CSS into the H4 tag. In my Bio, for example, the "Current Projects" heading is an H4. I've underlined it by adding a grey border to the bottom, like this:

<h4 style="border-bottom:1px solid #ccc;">Current Projects</h4>

Paragraphs and Hard Returns

Creating paragraphs is very easy. You only need to wrap some text in "P" tags, like this:

<p>Here's some text for a paragraph</p>

To get a double line break between text, nothing is needed except to enclose both paragraphs in their own "P" tags, like this:

<p>Here's the first paragraph. This will be separated from the second paragraph automatically if the text below it is also an HTML paragraph.</p><p>Here's the second paragraph. There's a whole line of space between this block of text and the one above it.</p>

However, if you just want to kick some text in an existing paragraph down to a new line, you can put a line-break tag at the end of the preceding line, like this:

<p>Same paragraph, separate lines.<br />
I have my own line!<br />
So do I!</p>

Links

You can link to other Web pages or Directory profiles by putting the link text in between two "anchor" tags, like this:

<a href="http://www.google.com">This is a link to Google</a>

If you want the linked page to pop up in a new window, add a "target" to the "anchor" tag, like this:

<a href="https://sec.was.asu.edu/directory/person/66195" target="_blank">This is a link to President Crow's profile</a>

Bulleted Lists and Numbered Lists

Making both kinds of lists is done roughly the same way. A bulleted list is accomplished by wrapping the list items in "UL" tags, meaning that you intend for it to be an "Unordered List":

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

A numbered list follows the same structure, but it's wrapped in "OL" tags, meaning that you intend for it be an "Ordered List":

<ol>
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ol>

Advanced Styling Techniques

Your ASU Directory profile accepts most HTML tags and CSS rules. Those listed above are examples of the most common formatting options, but you can also change text color and background color, add borders and insert padding with a bit of clever CSS. For example, the opening paragraph in my profile is styled by wrapping several "P" tags in the HTML equivalent of a box - a "DIV":

<div style="background-color:#f9f9f9;padding:7px;border:1px solid #ccc;">

In the DIV tag above, everything after "style" is a series of CSS rules which work in tandem to give the box appropriate spacing (7 pixels on all sides), background color (in this case, a light grey) and a thin border (a slightly darker grey).

For reference, I've attached the source code for my Bio to this article. You may copy and paste pieces of it into your profile if you prefer to work from a template.