Skip to content Skip to navigation

Sindecuse Museum

Museum Chop Shop

Anatomy of a webpage:

Webpages contain plain text content and html markup that tells web browsers how to display the content. Here are some basic elements of html markup: 

Tags

<tag>Plain text content.</tag>

<p>Plain text content.</p>

<div>Plain text content.</div>

An html tag is a reserved word, letter, or set of letters, enclosed in angled brackets. Most tags come in pairs, as in the example above. The start tag and end tag are similar, except the end tag begins with a backslash. These tags should be written in lowercase. Web browsers will still be able to read capitalized tags, but the W3C (an international consortium that develops web standards) requires lowercase tags.

Elements

<tag>Plain text content.</tag>

An html element is usually comprised of a start tag, the plain text content, and an end tag. You can find a complete list of html tags here

<br/>

Some elements are "empty" and do not contain any plain text content. These elements, such as the line break shown above, do not have a seperate end tag, so they are closed by placing a backslash within the start tag.

Attributes

<tag attribute="value">Plain text content.</tag>

<p class="lead">Plain text content.</p>

Some elements have attributes that contain additional information or further control how the element is rendered. All attributes are placed in the start tag, and come in name/value pairs. The attribute name (purple) is always followed by an equal sign, and the value (green) is always in quotation marks. Both are case-sensitive and should be written in lowercase. Attributes are placed in the opening tag of an element. The attribute you will use most often on our site is class.

Divs

This div is a span6 in a well. The code looks like this:

<div class="span6 well">CONTENT</div>

Div tags break the page into chunks/sections. You can add different attributes (see above for definition) that control how the given section acts and looks. For example, a class="spanX" attribute sets the width of the div (where X represents a number 1-12). A class="well" attribute will but a gray box around the entire div (see below for other well options). Here, the span and well are both values of the class attribute, and can be combined as in the example above (<div class="span6 well">). The contents of a div should include other html tags like paragraph/header/etc. as necessary. 

 

 

 

 

 

Page Elements:

 

Element

Code

Example


Container Div
<div class="container">
ENTIRETY OF PAGE CONTENT
</div>

Entire page content.

NOTE: The opening container div should be placed at the top of the editable content of your page. The closing tag should be placed at the very bottom and should be the very last tag on the page. See image below for further explanation.


Row-fluid Div
<div class="row-fluid>
ANY PAGE CONTENT THAT NEEDS TO BE SPLIT INTO DIFFERENT DIVS OF VARYING SPAN WIDTHS.
</div>
Image demonstrating how divs can break up a page

Click to view larger.

NOTE: Several of these can be used on a given page any time you would like to split a div into more divs. A row-fluid div is 12 columns wide.(Example, use the row-fluid when the main container div is split into two span6 divs. Then another row-fluid is used to split one of those into two smaller divs of span4 and span8). Image above illustrates how the row-fluid div can be used.


Div Span1-Span12

<div class="row-fluid">
<div class="span12 well"><p>CONTENT SPAN 12</p>
</div>
<div class="span6 well"><p>CONTENT SPAN 6</p>
</div>
<div class="span6 well"><p>CONTENT SPAN 6</p>
</div>
<div class="span4 well"><p>CONTENT SPAN 4</p>
</div>
<div class="span8 well"><p>CONTENT SPAN 8</p>
</div>
<div class="span2 well" style="margin-left: 0px;">
<p>Content of this div span 2.</p>
</div>
<div class="span10 well">
<p>Content of this div span 10.</p>
</div>
</div>

span12.

span6.

span6.

span4.

span8.

span2.

span10.

NOTE: See graphic above for practical example using several divs of various widths. See below for div trouble-shooting tips.


Paragraph
<p>CONTENT</p>

Standard paragraph. Most content will be placed inside paragraph tags. 

NOTE: Paragraphs are single spaced with a blank line between paragraphs.


Lead Paragraph
<p class="lead">CONTENT</p>

Lead paragraph content is larger than regular text.

NOTE: Usually placed at top of page under headers. Used to highlight specific information or provide additional information to draw the reader into the main conten.


Caption paragraph
<p class="caption">CONTENT</p>

Caption provides both descriptive and credit information.

NOTE: Used to provide descriptive information and credit for photographs and images.


Link, Page
<p>PARAGRAPH THAT CONTAINS A <a href="ADDRESS OF TARGET PAGE">LINK</a> TO ANOTHER PAGE.</p>

This is a standard paragraph that also contains a link to another page.

Links can be a single word or a phrase. The href attribute contains the target of the link. Usually this is a URL to a webpage; see below for two other options.


Link, Email
<p>PARAGRAPH THAT CONTAINS AN EMAIL ADDRESS <a href="mailto:INSERT EMAIL ADDRESS">LINK</a> TO CONTACT.</p>

Contact us for more information.

This link will open the visitor's email and start a new message to the "mailto:" address, if they have their email client linked to their web browser. 


Link, Phone Number
<p>Phone: <a href="tel:+17347630767">734-763-0767</a></p>

Phone: 734-763-0767

If visitor is on a mobile device, they can click the link to call the phone number.


Headers

<h1>HEADER</h1>
<h2>HEADER</h2>
<h3>HEADER</h3>
<h4>HEADER</h4>
<h5>HEADER</h5>

Header One

Header Two

Header Three

Header Four

Header Five

NOTE: The h1 will not be used because it is reserved for the "Sindecuse Museum" title at the top of the page. The h2 will rarely be used, because that is used for the page title (such as "Museum Chop Shop") and is already on the page when dent.net creates it. Generally the biggest header used will be h3, and h4 and h5 will be used for subsections (see sample page below for examples). 


Well
<div class="span6 well">CONTENT</div>
CONTENT

NOTE: Used to highlight or separate content. A well with a span6 will be half of the width of the given area in which it is placed; adjust the span value to make the well wider or narrower. The content of the well should all be enclosed in standard tags (such as headers and paragraphs).


Well, White
<div class="span6 well well-blank">CONTENT</div>
CONTENT

NOTE:  Used to highlight or separate content. A well with a span6 will be half of the width of the given area in which it is placed; adjust the span value to make the well wider or narrower. The content of the well should all be enclosed in standard tags (such as headers and paragraphs).


Well, Blue
<div class="span6 well alert alert-info">CONTENT</div>
CONTENT

NOTE: Used in special circumstances to highlight content. A well with a span6 will be half of the width of the given area in which it is placed; adjust the span value to make the well wider or narrower. The content of the well should all be enclosed in standard tags (such as headers and paragraphs).


Well, Green
<div class="span6 well alert alert-success">CONTENT</div>
CONTENT

NOTE: Rarely used. A well with a span6 will be half of the width of the given area in which it is placed; adjust the span value to make the well wider or narrower. The content of the well should all be enclosed in standard tags (such as headers and paragraphs).


Well, Yellow
<div class="span6 well alert">CONTENT</div>
CONTENT

NOTE: Rarely used. A well with a span6 will be half of the width of the given area in which it is placed; adjust the span value to make the well wider or narrower. The content of the well should all be enclosed in standard tags (such as headers and paragraphs).


Well, Red
<div class="span6 well alert alert-error">CONTENT</div>
CONTENT

NOTE: Rarely used. A well with a span6 will be half of the width of the given area in which it is placed; adjust the span value to make the well wider or narrower. The content of the well should all be enclosed in standard tags (such as headers and paragraphs).


List, Unordered

<p>USUALLY A SENTENCE OR TWO IS USED TO LEAD INTO THE UNORDERED LIST:</p>

<ul>
<li>This is List Item 1</li>
<li>This is List Item 1</li>
<li>This is List Item 1</li>
</ul>

There are a wide variety of dental specializations, including:

  • Periodontics
  • Pedodontics
  • Radiology

NOTE: Use the bulleted list when the order of items is not critical to the list.


List, Ordered
<p>USUALLY A SENTENCE OR TWO IS USED TO LEAD INTO THE ORDERED LIST:</p>

<ol>
<li>FIRST THING</li>
<li>SECOND THING</li>
<li>THIRD THING</li>
</ol>

How to sign in and update the website:

  1. Open web browser and visit dent.umich.edu
  2. Click on "Login" near the bottom
  3. Sign in with Sindecuse Umich Friend Account, sindecuse@gmail.com

NOTE: Use the numbered list when the order of the items is important, such as step-by-step instructions.


Resources/
Links List

<h3 class="well lead alert alert-info">NAME OF SECTION OR "MORE INFORMATION"</h3>
<p>THIS IS A SENTENCE OR TWO THAT EXPLAINS THE LIST OF LINKS AND WHAT THE SECTION IS ABOUT. IDEALLY, IT WILL ALSO ENTICE THE READERS TO CLICK ON THE LINKS AND LEARN MORE:</p>
<ul>
<li><a href="ADDRESS OF LINK DESTINATION">LINK 1</a></li>
<li><a href="ADDRESS OF LINK DESTINATION">LINK 2</a></li>
<li><a href="ADDRESS OF LINK DESTINATION">LINK 3</a></li>
<li><a href="ADDRESS OF LINK DESTINATION">LINK 4</a></li>
<li><a href="ADDRESS OF LINK DESTINATION">LINK 5</a></li>
<li><a href="ADDRESS OF LINK DESTINATION">LINK 6</a></li>
</ul>

More Information

This is a sentence or two that explains what the list of links is, and ideally encourages the reader to click the links and learn more:

NOTE: Items in the list are often links, but they could also be downloadable pdf documents. Can include as few or as many links as necessary. 


Blockquote

<blockquote>
<p>QUOTE THAT IS NOT ATTRIBUTED TO A SPECIFIC INDIVIDUAL.</p>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

NOTES: This type of blockquote could be used for pulling out a brief, attention grabbing excerpt from the text (like a pulled-quote in a magazine). The well attribute can be changed to "well" for a gray well.


Blockquote with photo

<div class="well">
<div class="row-fluid">
<div class="span3"><img typeof="foaf:Image" src="LINK TO IMAGE, AUTOMATICALLY GENERATED WHEN IMAGE IS UPLOADED IN DRUPAL" alt="ADD THIS WHEN UPLOADING THE PHOTO" title="ADD THIS WHEN UPLOADING THE PHOTO"></div>
<div class="span9">
<blockquote>
<p>THIS IS THE QUOTE CONTENT. YOU WILL ALSO NEED TO REPLACE THE PHOTO USING THE "ADD MEDIA" BUTTON WHEN EDITING THE PAGE.</p>
<small>NAME OF QUOTED PERSON, <cite title="Source Title">SOURCE'S CREDENTIAL OR DATE OF QUOTE IF KNOWN. DON'T FORGET THE PHOTO CREDIT "PHOTO COURTESY OF ....".</cite></small></blockquote>
</div>
</div>
</div>

Clara MacNaughton, graduation photo, 1855.

THIS IS THE QUOTE CONTENT. YOU WILL ALSO NEED TO REPLACE THE PHOTO USING THE "ADD MEDIA" BUTTON WHEN EDITING THE PAGE.

NAME OF QUOTED PERSON, sOURCE'S CREDENTIAL OR DATE OF QUOTE IF KNOWN. DON'T FORGET THE PHOTO CREDIT "PHOTO COURTESY OF ....".

NOTES: A span can be added to the first div to specify a width for the well. The well attribute can be changed to "well well-blank" for a white well. The span3 and span9 could be changed to a span2 and span10 if this blockquote were taking up a wider area (See the difference between Vida and Geraldine). See Circular Photo Tutorial to cut out round portraits.


Button
<a class="btn btn-primary" href="ADDRESS OF LINK TARGET PAGE">Read more</a>

Read more

NOTE: Only used in special circumstances, such as on the main Exhibits page. Cory suggested using this when you are encouraging the visitor to take action ("Read more," "Click here").


Linebreak
<p>GENERAL CONTENT THAT SHOULD BE BROKEN<BR />
INTO MULTIPLE LINES WITHOUT SPACE BETWEEN.</p>

Sometimes you need a paragraph to
be broken into multiple lines

NOTE: This is used to break a line without creating a new paragraph (as opposed to using multiple paragraphs, which have space between)


Non-breaking Space

&nbsp;

<p>&nbsp;</p>

Here is a simple paragraph with general information. We want to leave some space after it for some reason.

 

 

Here is another paragraph. There are two sets of <p>&nbsp;</p> between these paragraphs to add extra space between them.

NOTE: Sometimes the content management will add non-breaking space characters into your code; usually this is fine. Use them when you need another single space between words or letters. More commonly, they are used by themselves between an opening and closing set of paragraph tags.


Em-Dash

<p>SOMETIMES WE REQUIRE AN EM-DASH&#8212;THIS IS HOW TO CREATE ONE IN HTML.</p>

NOTE: These are fairly rare, but an em-dash is used in "Dental Hygiene—A Century of Progress", and they are occasionally used elsewhere in exhibit scripts.


Horizontal Rule

<hr />

<div class="span4"><hr /></div>



Note: Horizontal rules can be used to separate or define an element. Used in some templates, and on Women Dentists main page. The horizontal rule will span the width of the entire area. To make the rule shorter, place it inside a div of the appropriate length.


Navigation Footer

<hr />
<div class="row-fluid">
><div class="span6" style="margin-top: -10px; margin-bottom: -10px;">
<p><a  href="ADDRESS HERE">&lt;&lt; PREVIOUS: TEXT HERE</a></p>

</div>
<div class="span6" style="margin-top: -10px; margin-bottom: -10px;">
<p style="text-align: right;"><a href="ADDRESS HERE">NEXT: TEXT HERE &gt;&gt;</a></p>
</div>
</div>
<hr /></div>

NOTE: This navigation style WAS used on pages in the Women Dentists section. It is helpful in large sections with several pages.


Navigation Footer, Breadcrumbs

<hr />
<div class="span12" style="margin-left: 0px;">
<p><a href="http://dent.umich.edu/about-school/sindecuse-museum/sindecuse-museum-den... Museum of Dentistry</a>&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;<a href="http://dent.umich.edu/about-school/sindecuse-museum/exhibits">Exhibits</a>&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;<a href="http://dent.umich.edu/about-school/sindecuse-museum/women-dentists-chang... Dentists: Changing the Face of Dentistry</a>&nbsp;&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;<strong>Clara Walworth MacNaughton</strong></p>

</div>
<hr />



Sindecuse Museum of Dentistry  >>  Exhibits  >>  Women Dentists: Changing the Face of Dentistry



NOTE: This navigation style is used on pages in the Women Dentists section. It is helpful in large sections with several pages. It shows the user how they got to the page they are currently viewing. With a span12, it will span the entire width of the page, or whatever div you put it inside. Additional subpages may be added (the current page should be in bold, see Women Dentists exhibit subpages for examples). 


Icons

<i class="icon-envelope-alt icon-2x">&nbsp;</i>

<a href="LINK ADDRESS" style="text-decoration:none;"><i class="icon-envelope-alt icon-2x">&nbsp;</i></a>

 

 

NOTE:A wide variety of icons are available at Font Awesome. Simply replace the "icon-envelope-alt" value with the appropriate icon value. The "icon-2x" value renders the icon at twice its normal size (remove this value to use the standard sized small icon). The non-breaking space character ("&nbsp;") must be placed between the opening and closing icon tags, or else Drupal will delete the icon. In order to make the icon into a link, simply place it inside a normal set of link tags (can link to an email address, as in this example, or an outside webpage, such as Facebook or Flickr). Typically link text is underlined; to ensure an icon link is not underlined, simply place the style attribute (style="text-decoration: none;") within the opening link tag, as in the example provided. 


Images

[Do not need to code this by hand. See Note.] 

i-CAT image of skull created with CBTB technology.

NOTE: To upload regular images (not in sidebar), use "Add Media" button on toolbar above to upload an image file, and it will automatically generate the appropriate code. Enter Alt Value (a description for visitors using a screen reader) and Title (displays when visitor hovers cursor). Do not enter a caption here (there are problems with this function; if you do enter a caption, you cannot change or delete it and will need to completely re-upload the image without a caption), instead use a <p class="caption"></p> paragraph that includes description and attribution. For images that display larger when clicked (either in the main content or in the image sidebar), it is helpful to add "Click to view larger." at the end of the caption to ensure visitors know they have this option. See tutorial below for more information. 


Image Sidebar

[Do not need to code this by hand. Use "Attached Images" function below the WYSIWYG.] 

See example.

NOTE: To create an images sidebar, use "Attached Images" function below WYSIWYG. To upload an image, click "Select." The process is similar to uploading a regular image, but DO enter a descriptive caption (including image credit), and do not worry about image type (the sidebar will automatically make the images larger when clicked).The image sidebar will automatically take up 1/4 of the page (span3), so it is best to put the entire main body content in a span9. The page source will look like this:
<div class="container">
<div class="row-fluid">
<div class="span9"
ENTIRE PAGE CONTENT
</div>
</div>
</div>


PDFs

[Do not need to code this by hand. Use "Add Media" function, same as uploading images to the main body.] 

PDF icon Number of Women Graduates University of Michigan School of Dentistry 1880-2012.pdf
Number of Women Graduates, University of Michigan School of Dentistry 1880-2012

Note: Use "Add Media" button on toolbar above to upload an .pdf file, and it will automatically generate the appropriate code. The upload process is similar to uploading a photo. The link to download the file will be the same as the file name on the server, so it is best to use a descriptive title (such as "Number of Women Graduates, University of Michigan School of Dentistry 1880-2012") rather than something generic like "trends_v2."


PDF Download box

<div class="span3">
<h5>Download</h5>
<p>Click to download a pdf with a high resolution version of this graphic:</p>
<p>INSERT PDF USING MEDIA BUTTON.</p>
</div>

Download

Click to download a pdf with a high resolution version of this graphic:

Number of Women Graduates University of Michigan School of Dentistry 1880-2012.pdf
Number of Women Graduates, University of Michigan School of Dentistry 1880-2012

Note: Used to highlight files that visitors can download. See examples at the bottom of Women Dentists page and on Trend pages.


Podcasts

[Do not need to code this by hand.] 

 

Use "Add Media" button on toolbar above to upload an audio file, and it will automatically generate the appropriate code and insert the audio player. Best to transcribe podcast and make available to viewers with hearing imparements (example).


Videos

[Do not need to code this by hand. Upload video to YouTube then copy and paste link to embed.]

To add video content, upload file to YouTube (YouTube is owned by Google, so the login credentials for the YouTube account are the same as the Sindecuse gmail). Once it has been uploaded to YouTube, click "Share" then "Embed" and copy and paste code. See tutorial below.


 

 

 

Tutorials

Save Photos For Web

Use Photoshop to edit images and set appropriate size and resolution for fast web display. (Instructions can be used for photos or other graphics).

Create Circular Photos

Make circular photos in Photoshop. (Circular photos were used in the Women Dentists exhibit, and were incorporated into the online exhibit). 

Upload Photos to Website

Upload photos to the website using the online content management system. (PDFs are uploaded in a similar fashion, with fewer steps). 

Upload Video to Website

Instructions for embedding videos on the Sindecuse website once they have been uploaded to the Sindecuse Museum YouTube account.   

 

 

 

 

Trouble-shooting

Sometimes a div likes to float a little bit over to the right, like this:
This div is floating over to the right, as a result of how the divs were nested.
Here is a quick fix using inline CSS:

Just copy and paste the style="margin-left: 0px;" into the div opening tag.The div will look like this:
<div class="span6 well well-blank" style="margin-left: 0px;"></div>.

This div has been fixed and now it lines up over on the left side.

 

 

 

In the following example, there are 4 divs (a span3, a span9, and two span6) that should display in two rows of two divs each. However, because the divs are not the same height, they stack in way that is not ideal:

 

 

 

 

 

 

 

 

 

 

 

Here each row has been placed in a span12:

<div class="span12">
          <div class="row-fluid">
                     <div class="span3 well">
                     </div>
                     <div class="span9 well">
                     </div>
          </div>
</div>
<div class="span12">
          <div class="row-fluid">
                     <div class="span6 well">
                     </div>
                     <div class="span6 well">
                     </div>
          </div>
</div>
 

 

 

 

 

 

 

 

 

 

 

 

 

 

Sometimes if you copy and paste something from Microsoft Word or another website into the WYSIWYG view, it will bring a bunch of formatting with it (notice incorrect typeface, size and background color):

Text copied and pasted, external formatting retained.

The content management system will automatically generate the code for you, and it will look something like this:

<p><span style="color: rgb(64, 64, 64); font-family: serif; font-size: 20px; line-height: 25px; background-color: rgb(241, 241, 241);">Text copied and pasted, external formatting retained.</span></p>

Simply go to the code view and delete the opening and closing <span> tags:

<p><span style="color: rgb(64, 64, 64); serif; font-size: 20px; line-height: 25px; background-color: rgb(241, 241, 241);">Text copied and pasted, external formatting retained.</span></p>

 

 

Sample Page:

 

<h2>Heading for the page, normally not needed, see the note below*</h2>

*Normally you would not need to include an H2 on your page, because the H2 is the header right above the navigation bar, which is created when dent.net creates the page.

Bessie Hutchinson, front row, in class at the University of Michigan College of Dental Surgery, 1897. SMD 652.126a.

<p class="caption">This is the caption paragraph for this photo. It should describe what is happening in the photo, as well as indicate the source. For example: Photo courtesy of An Institution, Their City, MI. OR Photo from the collection of the Sindecuse Museum, SMD XXX.XXX.</p>

Clara MacNaughton, graduation photo, 1855.

<blockquote><p>This is a blockquote that is important or attention-grabbing, said by someone featured on this page. It should be interesting or informative in some way.</p>

<small>Name of the quoted,<cite title="Source Title"> date or source of quote if known. If you use an image, be sure to include the source here. Photo courtesy of Whereever.</cite></small></blockquote>

<h3>More specific or detailed headline than the H2</h3>

Lead paragraph can be used to add more detail or pique reader interest (see Jane Slocum Hayward for an example). Not required on all pages.

<h4>Section Title</h4>

<p>This is a paragraph with general content. This is just a general paragraph with standard text. Here is some more information. This is just a general paragraph with standard text.</p>

<p>Here is some more information about this subsection. This is is just a regular paragraph of text that provides information about the topic of this page. Here is some more information. This is just a general paragraph with standard text.</p>

<h4>A Second Section</h4>

<p>This is a paragraph with general content. This is just a general paragraph with standard text. This is a paragraph with general content. This is just a general paragraph with standard text.</p>

<h4>Third Section Here</h4>

<p>This is a paragraph with general content. This is just a general paragraph with standard text. This is a paragraph with general content. This is just a general paragraph with standard text.</p>

 

<h3 class="well lead alert alert-info">More Info</h3>

<p>This should be a very short paragraph that describes what this list is about. It should be about two sentences that contain interesting information:</p>

i-CAT image of skull created with CBTB technology.

<p class="caption">This image is actually larger than this area, but it is scaled down to the size of the div.</p>

<h4>Header for subsection</h4>

<h5>Subheader</h5>

<p>This is a subsection or a related smaller section of the main topic of this page. Maybe a related person or event, or additional information.</p>

<p>A similar box might contain a link to a podcast or a downloadable pdf. This could be copied from an existing page and pasted where needed. This is a subsection or a related smaller section of the main topic of this page. Maybe a related person or event, or additional information.</p>

<h5>Subheader</h5>

<p>This is a subsection or a related smaller section of the main topic of this page. Maybe a related person or event, or additional information.</p>

<p>This is a subsection or a related smaller section of the main topic of this page. Maybe a related person or event, or additional information. This is a subsection or a related smaller section of the main topic of this page. Maybe a related person or event, or additional information.</p>



Sample Page Color-coded Illustration

Download

View a pdf containing an illustration of this sample page, including color coded divs and correspondingly colored code. Image works best if downloaded and viewed on a large monitor.

Color coded illustration of this sample page and corresponding code