This document serves as an example for well "formed" documents throughout this website. Following these simple guidelines will help users to find information in a quick and simple fashion as well as help to optimize the site for search engines.
Dividing pages by using section headers helps to turn your content into easily digestible chucks. This page structure allows visitors to quickly scan a page for the information they are looking for.
Every page should include a Tagline, which is the h1 at the top that represents what the page is about; the should also match the page title which is defined in the "Page Title" field of page properties.
The Content field is the h2 for the page and should be a headline for the page.
The rest of the page should follow a descending structure of h2 through h3.
Additional styles and tags can also help to improve access to information across your site and break up the content into sections.
When creating links in your content it is important to give them as much context as possible. It is best for the link to contain words directly related to the page being linked to. For example saying, "Update your contact information through our profile update form," instead of, "To update your profile click here" for a page linking to a profile update form. To take that even a step further the words "profile", "update", and maybe even "form" would be included in both the page heading h1 and in the page display name under page properties for the page being linked to.
If a blockquote or indention to set off a section of text is needed, you may use either the "Align Indent" button which will use the tag BLOCKQUOTE with additional style to render text in such a manner. It indents the text by 40 pixels on the left and right and retained the other font styles of the normal text paragraphs. Other header styles may be used in conjunction with the blockquote to render headlines within the indent text, as demonstrated above. All spacing has been defined using the CSS, so no other styling are spacing should be applied manually.
Unordered lists are simply bulleted lists. All styles for bulleted list have been set using the CSS. Hit return once to create a new bulleted item and hit return twice to close the bulleted list and create a new paragraph below the list. You may insert a bulleted list inside of another list to create a secondary level and outline effect. All spacing has been defined using the CSS, so no other styling are spacing should be applied manually.
No br / tag is needed after a bulleted or unordered list to space properly. All spacing is defined by the CSS.
Ordered lists are numbered bulleted lists. All styles for the ordered list have been set using the CSS. You may use the HTML editor's numbered list button to create an ordered list. Hit return once to create a new numbered item and hit return twice to close the list and create a new paragraph below the list. Ordered lists are useful for creating directions. All spacing has been defined using the CSS, so no other styling are spacing should be applied manually.
List Title (strong)
There are several styles which can be applied to images to help format your pages.
In this example the image had a style of "float: left". This will float the image to the left so that text will wrap around it on the page. The image should be place in the text where you would like the top of the image to line up with vertically.
In this example the image had a style of "float: right". This will float the image to the right so that text will wrap around it on the page. The image should be place in the text where you would like the top of the image to line up with vertically.
All images on the page have a 15-pixel margin and 5-pixel radiused corners by default. You can turn these off by altering the HTML.
Turn off the round corners:
Alter the margins different ways. Here are some examples:
style="margin: 0px 0px 10px 0px;"
style="margin-top: 0px; margin-left: 0px;"
Add the style tag into the image tag like this to turn off the round corner and the right margin:
img alt="Sample image" src="/files/library/38c520c0a702cb08_t.jpg" style="border-radius:0px; float: right; margin-right: 0;" title="Sample image"
Using the button class in a link will turn it into a button. Just add the class like this to the source:
<a class="btn" href="#">Call to Action</a>
Looks like this:
The image to the left is a Large size image inserted in the Content 1 tab.
Use h4 for a Side Column subhead when needed. It's narrower horizontally than bolded paragraph text and may help fitting to the column.
Use a return before the h4, but not after.
Linked pdf documents should have an icon. This icon has the radius and margin altered.
Add the above class to the anchor link in HTML to make the PDF icon visible on the document link.
Stay connected to your health with the MyChart mobile app.
MultiCare Virtual Care gives you anytime access to a doctor through your computer, phone or our mobile app. Video, phone and e-visits available. It’s an affordable option for quality medical care.