Section 9: HTML and the Accordion Menu

To learn more about HTML basics visit: http://www.w3schools.com/html/default.asp

Section 9.1: Common HTML tags used.

Here is a list of HTML tags which are commonly found throughout each webpage. A description of what the tag does is found underneath it in blue.

***Note: Anything written between the start and end tags (in CAPITAL LETTERS) is a description of what the tag does.

 
Figure 9.1 – close-up of the “HTML” tool

***Note: Many of these tags do not need to be typed in HTML mode; they can (and should) be created using buttons and dropdown menus on the Kupu Visual Editor Toolbar.

<h1>HEADER 1</h1>

Large Header, Maroon Font - Underlined

<h3>HEADER 3</h3>

Smaller Header, Bold Black Font.

<hr />

Draws a grey horizontal line across the page. Used to separate two areas from each other.

<div></div>

Creates a block around many content items and is used to modify them. They should only be used in the Plone CMS to make page layout changes, and the creation of accordion menus.

<table>

<tbody>

<tr>

<td>THE FIRST COLUMN IN A TABLE

</td>

<td>THE SECOND COLUMN IN A TABLE

</td>

</tr>

<tbody>

</table>

<table> - designates that a table is to be created.

<tbody> - designates that the body of a table is to be filled

<tr> - designates a row.

<td> - designates a column (this must be placed within the <tr> tag)

Section 9.2: The Accordion Menus

On many pages the content is divided up into easier to read, less intimidating accordion menus. An example can be seen on:

https://socserv.socsci.mcmaster.ca/cms/socsci/socsci-1/first-year-students/faqs

The HTML tags in the accordion are specialized by adding different class=”” attributes to them. This allows the browser to specialize the tags and give them different functions.

The structure of the accordion follows a specified pattern:

<div class=”pbaccordion”>

<h3 class=”pbtab”>FIRST CLICKABLE HEADER</h3>

<div class=”pbpane”>MAIN CONTENT – HIDDEN</div>

<div style="width: 100%; height: 5px; background-color: rgb(153, 0, 51);">&nbsp;</div>

<h3 class=”pbtab”>SECOND CLICKABLE HEADER</h3>

<div class=”pbpane”>MAIN CONTENT – HIDDEN</div>

<div style="width: 100%; height: 5px; background-color: rgb(153, 0, 51);">&nbsp;</div>

</div>

<div class=”pbaccordion”> designates the beginning and end of the accordion

<h3 class=”pbtab”> creates a header identical in look to the normal <h3>, but adds the functionality of a tab to it.

<div class=”pbpane”> creates a block around the main content. At first this is hidden, then when the user wished to view it, they click on the header above it to view it.

***Note: An accordion menu can have any number of areas; however, they must follow a pattern of a <h3 class=“pbtab”> followed by a <div class=”pbpane”> then repeated any number of times desired.