- Chapter 1
- Chapter 2
- Topic 2.1
- Topic 2.2
- Chapter 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Table of Content
Table of content is very important, it does not only provide a preview of the entire structure of a book, it also serves the purpose of indexing for chapters and sub-chapters by page numbering. Very often, this is the first part of a book that people will look at, before going into other details. It has a hierarchy nature, which carries information of the logic flow.
On web pages, pages relates to each others through links. A table of content consisting of topics and links is actually a menu structure. If we group a lot of pages with related topics together like the conventional concept of a book, we use menu structure to be the table of content.
In fact, when we convert a book into PDF format, it is the same. Links are embedded in the format too.
Menu, whether it be horizontal or vertical, is a tool of navigation for users to browse around the web site to all pages. There are different forms of menu structure:
- Horizontal or vertical
- Single level, or hierarchical
- Static or pull-down
- Mega menu
One factor to determine which type to use is where on the screen it is placed. It is part of the overall structure, but screen space is limited.
Unlike normal site navigations, when it is applied as a table of content, it need to fulfill the following:
- Hierarchical structure - multi-level
- Capable of fitting into the screen even with large structure
It is part of the reason why in-page and site structures are important. In particular, wiki is one of the structure for web-based books, and it is also available and included. In Drupal it is called the Book module. It is hierarchical, and the table of content (here called book navigation) is available built-in.
In some cases, we might want to deal with pages not using this book/wiki feature. In such cases, menus either has to be manually managed, or some means of automatic mechanism be built, like this website in the How Section
Chapters
On web structures, the concept of chapters, if available, is only characterized by its position in the table of content. After all, each web page is a separate and independent page.
Pages & Titles
A web page normally carries a page title placed on the top of the page, and associated with a unique link. Web pages are normally considered separate and independent, unless a table of content type menu is available.
Sections
Sections is kind of difficult to define. On web sites, sections should refer to different parts on the same page, because it is meaningless to have sections on different pages. Sections can be characterized by use of different size of headings. The heading attributes <h1> to <h6> can be applied properly, which will result in different sizes in text to characterize the hierarchy of the section.
Paragraphs
Paragraphs is available on web pages too, separate from each others by increased space separation from each others.
- Ordered lists and un-ordered lists, nested lists
- Hierarchical
- Level 1
- Level 2
- Level 2.1
- Level 2.2
- Indentation
- Level A
- Level B
- Bullet Symbol
- This is circle
- This is square
Description List is also possible even though it is less frequently used:
- Coffee
- - black hot drink
- Milk
- - white cold drink
Lists
Lists is easy on web pages. Note the following attributes, some might require additional efforts and short coding:
Tables
Table is good to present tabulation of data or information in a structured manner.
Tables can be configured with some attributes:
- Stripped - zebra stripes on even & odd rows
- Border - outline around entire table
- Row border - horizontal line across each row
- Hoverable - change color on mouse-over
| Name | Gendar | Age |
|---|---|---|
| Peter | Male | 25 |
| Mary | Female | 21 |
| Paul | Male | 23 |
Quotes
- Blockquote - refer to In-Page Styling for the sample appearance.
- Inline Quote
Figures
- pictures, images, photos, illustrations
- Animated pictures
- Videos
Wiki
- Book structure with hierarchy up to 6 levels
- Available as a standard feature but cannot be shown on this a single page
Headers & Sub-Headers
- Every page has a title
- Additional headers or sub-headers can be added using different styles available, which are easy to add
-
This is a header, using <h1> - <h6>
-
This can be a header too
-
and this can be a sub-header
Block Text
This is text in a block
created either with w3-panel or w3-container
highlighted with background color
optionally a bar on the left or other sides
Panels
Title
Details
Embeds
This is to embed data, content, images, videos or forms from a different website, and appears embedded into the web page. It will follow if change occur from the source.
Video embed, for example, is a very popular application. This way storage of video is not on the server, but it appears from your site.
Another popular application is to embed a form into the site. Form operation will be done on the source which allows a more flexible way of delivering service.
Fieldset
Fieldsets features:
- A border enclosing the text
- A label text on the top left hand corner recognized as title
- Forms a structure for small paragraphs in a nice looking manner
In this example, additional features are applied in addition fieldset:
- White background
- Enlarged font to the title label
Accordions
- What is Lorem Ipsum
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
- Why do we use it?
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
- Where can I get some?
-
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Cards
This is a Card
Unleash the combined power of Drupal & W3.CSS
Combining W3.CSS with Drupal by using the W3.CSS theme, it empowers content editors to create rich content by taking advantage of the advantage of both.
Modals & Popups
W3.CSS Modal
A modal is a popup showing another screen
on top of the original one.
Modal with a Picture
An image can be applied too.
Messages
Attention!
This is a message to draw attention of the users.
Content Types & Sites
Last but not least, we also need to mention content types. We build structure for a single content type, but not all content can fit in. We use different content types to handle content different categories, different structures, or different purposes. This is structure outside the page level.
To go another step forward, we can also use different site for different purpose, for different people. We can also apply sub-domain so that they are different sites, but linked to the same domain. We can also apply group concepts in a single site, where each group has its private and different area. We can have different templates on the same site but for different business units or focus, like this site. All these will go to the Site Structure separately.
References
- Web Accessibility Tutorials - Content Structure