Agape House UIC

h3 header: Please use header tags for all subtitles in content.

Header tags are available for use for all subtitles in the body content. The smaller the number indicates a higher priority & a larger font size. For use in the body content, header tags range from h2, which the title of the page utilizes, to h6. It is wise to begin with h3 within the body content, and work down from there maintaining consistent use throughout the page body content as well as the entire website. No additional CSS classes are necessary in the header tags to designate subtitle styling.

h4 header: Basic text formatting is rather easy with HTML code.

Bold and italic formatting is easy to indicate in HTML with beginning and ending tags. Cite should only be used for a title of a book, movie, art piece, or such work and it is displayed in italic.

h5 header: Full Blockquote Example

"You know the golden rule, don’t you boy? Those who have the gold make the rules."

— Crazy hunch-backed old guy in Aladdin

"Very simple yet often typical style blockquote use for special quotes set in the main body content area—with or without the author's reference below."

h4 header: CSS in HTML tags—just the basics.

HTML tags provide essential structure and basic formatting for web content. CSS code is always added inside HTML tags to assist with styling web content. A class is defined in a separate stylesheet and is used in an HTML tag as an easy way to style web content consistently. EX: class="fontsmaller" Adding an inline style both overrides class styling as well as provides additional styling to any web content. EX: style="font-size:0.9em;" These two code examples would do the same thing to text.

• class="blockitem" – Applies "display: block" and only 5px of padding to top & bottom of a DIV or IMG.
• class="alignleft" – This is the default for all images in the content area! However, you may use it on a DIV to "display: inline" and "float: left" along with applying 5px of padding to top & bottom and 20px bottom margin.
• class="alignright" – This does the same thing as "alignleft" but to the right. This too can be applied to a containing DIV element.
• class="indent" – Applies 20px of margin to the left of an element.
• The following class names may be applied to a UL element. – disc, circle, square, nobullets, decimal, flushleft
• The following class names may be applied to a OL element. – lower-roman, upper-roman, lower-alpha, upper-alpha, flushleft
• Please use HTML character codes for unusual or problematic characters like &, –, —, •, etc. (see HTML Symbol Entities Reference)

h6 header: Helpful link references directly related to the Agape House website content formatting needs.

• More information about text formats – Just a bit of basic helpful related info regarding content formatting contained in the Drupal CMS system.
• Display Uploaded Files – This shows a list of file paths you can use directly in any post, because they are already uploaded to the host server. Click on or view one of the images in a browser window to see the original image dimensions.

h5 header: Use lists to organize content that fit into a general or specific list format.

• Unordered List Item 1
• Unordered List Item 2
• Unordered List Item 3

1. Ordered List Item 1
2. Ordered List Item 2
3. Ordered List Item 3

• Unordered List Item 1 without bullets
• Unordered List Item 2 without bullets
• Unordered List Item 3 without bullets

Definition List Term 1

Definition 1 of Term 1

Definition 2 of Term 1

Definition List Term 2

Definition 1 of Term 2

Definition 2 of Term 2

h5 header: The maximum width for ALL content is 665px—which especially applies to images and videos! You will find a variety of examples of images & videos set with text below.

Photo Credit: Jane Doe

Morbi sem. Duis euismod aliquam libero. Praesent nec urna eget libero molestie dignissim. Curabitur libero. Fusce fringilla commodo purus. Nam ac turpis a pede tempus vestibulum. Sed suscipit. Mauris sapien nibh, interdum ut, blandit eget, tincidunt et, magna. Pellentesque non erat eget pede sagittis fringilla. Ut nunc odio, scelerisque eu, tempus sed, suscipit ac, sem. Nunc pretium.

Morbi quis eros. Morbi adipiscing volutpat elit. Suspendisse adipiscing pulvinar velit. In volutpat, ante vel tincidunt accumsan, magna sem laoreet felis, viverra mollis orci eros vitae lacus. Fusce posuere, ligula eget semper mattis, mi risus varius dui, vitae sollicitudin pede risus et mi. Sed diam. In auctor velit in augue fringilla ornare. Phasellus dictum lobortis quam. Fusce nisi. Suspendisse tincidunt.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header 5 tag example for a YouTube video.

Another example of a caption for a video or image. Agape House joined with the Hillel Levine Center and the Gender and Sexuality Center at UIC to create a Make It Better/It Gets Better video. The YouTube video above is the unedited version of Kurt's statement.

Praesent quam enim, pellentesque porta, dictum sed, dignissim in, eros. Aliquam lectus. Nam lobortis. Integer nec velit vitae ante ornare ultrices. Nullam sit amet felis nec magna laoreet mattis. Praesent dapibus nulla eu neque. Nullam egestas magna in eros porttitor facilisis. Suspendisse sem arcu, eleifend ut, rhoncus nec, mollis quis, arcu. Suspendisse in purus. Vestibulum condimentum, sapien eu tincidunt placerat, lorem augue sodales risus, non viverra elit augue ut neque. Sed ut nulla. Integer eros nisi, imperdiet sed, venenatis non, cursus vitae, ante. Duis convallis sapien eu turpis. Sed euismod, est ac pellentesque viverra, dui nulla laoreet enim, id vulputate purus lacus vel nisi. Duis enim.

Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas quis nunc nec sem blandit eleifend. Duis dapibus urna non massa. Proin sit amet eros et nisl pellentesque viverra. Quisque libero ipsum, mollis et, lacinia ac, pharetra in, sapien. Cras dolor. Sed luctus blandit turpis. Morbi erat. Suspendisse turpis lacus, elementum luctus, elementum ut, consectetuer eget, libero. In lacinia. Mauris vestibulum. Vivamus hendrerit sem a ipsum. Ut rhoncus aliquet arcu. Duis nibh sapien, scelerisque vitae, laoreet et, porttitor a, risus. Nulla dui neque, convallis sit amet, egestas at, tempor non, risus. Nunc gravida suscipit tellus. Morbi adipiscing volutpat elit. Suspendisse adipiscing pulvinar velit. In volutpat, ante vel tincidunt accumsan, magna sem laoreet felis, viverra mollis orci eros vitae lacus. Fusce posuere, ligula eget semper mattis, mi risus varius dui, vitae sollicitudin pede risus et mi. Sed diam. In auctor velit in augue fringilla ornare.

h5 header: Additional content after a dashed rule separator for content.

Pellentesque congue pharetra mattis. Integer vitae tellus nec justo congue volutpat. Vivamus vitae quam dui. Ut cursus justo eget quam pellentesque auctor. Morbi sed turpis augue. Nunc rutrum, est sit amet venenatis pretium, enim erat adipiscing ante, vitae sodales sem turpis non massa. Maecenas massa odio, rutrum ut porttitor vitae, luctus in nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ornare, felis eget congue rutrum, enim lectus venenatis mauris, sit amet interdum ante sem id eros. Sed posuere posuere risus ac pellentesque.

Sed nec nisi non augue varius lacinia. Integer imperdiet, ipsum et fermentum sollicitudin, urna nunc placerat sem, vel viverra quam magna vitae arcu. Aliquam dolor dolor, auctor vel blandit ut, scelerisque vulputate massa. Morbi faucibus, mi ut cursus faucibus, mi diam fringilla risus, quis dignissim odio quam quis lorem. In egestas, sapien ut eleifend blandit, neque elit rutrum risus, eu aliquam leo metus et enim. Sed enim dolor, malesuada vitae fermentum eget, semper vitae magna. Quisque congue bibendum lacus, eget ornare ante pulvinar vel. Mauris fermentum, lorem eu rutrum congue, ante elit laoreet diam, sed suscipit est magna in ante. Nulla at metus at dui pretium bibendum non lacinia ante. Nullam tincidunt, sem vel rhoncus commodo, justo tellus gravida sem, et pulvinar mi tellus ac mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam ultricies hendrerit faucibus. In hac habitasse platea dictumst. Sed vehicula fermentum lacinia. Curabitur lacinia aliquam convallis.