Opera Show - Web presentations as HTML

Turn your browser into an advanced presentation tool using Opera Show, an impressive feature of the Opera browser. Learn to master Opera Show and save work and hassle when giving presentations from your computer!

Compared to other popular presentation tools (such as Microsoft PowerPoint), Opera Show has several advantages:

• It is a standard feature of a small and fast Web browser
• It uses HTML as the document format, which makes the files lightweight compared to proprietary formats used by other tools
• It makes publishing your presentation on the Web a breeze
• Compared to other presentation tools, Opera is inexpensive
• It will not annoy your audience with tacky animations

Presentation tools help presenters convey their message to an audience. Presenting a set of slides containing text and images can enliven the talk and gently keep the speaker on track. Printing out the slides or publishing them on the Web allows your audience to easily review the presentation later.

This tutorial is written to help you get started with Opera Show and will explain both the use and authoring of Opera Show documents. If you have some experience with other presentation tools as well as basic knowledge of HTML, you have an excellent starting point for using the tutorial.

To make Opera Show presentations without coding — go to our Opera Show Center and try out the on-line Opera Show Generator.

Launching Opera Show

Using Opera as a presentation tool is very easy. When you press the key F11, Opera goes into full-screen mode - you will see no scrollbars, no menus, only the document itself. Depending on the document's style sheet, Opera will perform three more actions:

• The current document is split into pages or "slides"
• The content may change - certain parts may be hidden or shown
• Fonts and colors suitable for a presentation are applied - typically, fonts are larger

Assuming you are already browsing with Opera, try pressing F11 right now. (If you are not yet using the Opera browser, you can easily download it.) The browser will go into full-screen mode and you will be shown slides suitable for projection. Unless you already were in full-screen mode, in which case Opera will go back to the normal screen mode suitable for Web browsing. In other words F11 toggles between full screen and normal screen.

When you are in full-screen mode, you can still scroll by using the arrow keys, and you can move between pages in the document using the PgUp and PgDn keys.

Any document can be viewed in full-screen mode. However, most documents will look almost the same as in a regular browser window; they will have the same content and the same layout, but shown on a larger canvas. The easiest solution for Web sites not tailored for projection presentations, is of course to combine Opera's zoom function with full-screen mode - scale up the size of the document before pressing F11. Also, when viewing image files in Opera, you can press F11 to see them presented on a black background in full-screen mode.

If you are not using the Opera browser, you will only be able to read about Opera Show, not experience it yourself. However, documents authored for Opera Show are of course browsable as ordinary web documents with any standards-compliant browser.

So what makes some documents - for example the one you are reading now - look significantly different when the Show key is pressed? That is the topic of the next section.

Style Sheets in Control

In order for documents to become Opera Show presentations, Opera must be told how to turn the HTML document into a presentation. This is done by adding a CSS2 style sheet in the document head. If you have written documents for the Web, you may be familiar with the concept of style sheets. Style sheets can be linked to or integrated into the HTML document, and they allow authors to describe how documents should be presented on the Web.

The first generation of Cascading Style Sheets is now known as CSS1. With CSS2 a number of features were added, among them the ability to write style sheets for different media types. Examples of media types are screen (intended for an ordinary color computer screen), handheld, braille (for braille tactile feedback devices), and projection. Opera Show uses the latter, so when you press the F11 key, the Opera browser looks for style sheets written specifically for projections. If found, these style sheets will be applied, and the presentation will change accordingly.

Authoring Opera Show Presentations

For those who do not want to write their own HTML, there is, in addition to Opera Software's on-line Opera Show presentation generator, also third-party software available, as programmer Phil Burns has made Quickshow, a shareware tool for authoring Opera Show documents.

The rest of this tutorial is mainly for those wishing to make or adapt their own Opera Show presentations, which is quite simple provided you know a little about HTML and CSS. For example, the HTML document you are reading now links to a style sheet containing this section:

@media projection {

.screen {
	display:none;
	}

.projection {
	display: block; 
	padding:65px 200px 0px 24px;
	page-break-after: always;
	}

body    {
	background:#47557b url(operashowbg.jpg) fixed;
	padding:0;
	margin:0;
	font-family:'trebuchet ms',arial,sans-serif;
	font-size:150%;
	color:#fff;
	}
}

The first line says that the style is meant for the projection media type. This is the kind of style sheet Opera will look for when you press F11. The lines beginning with ".screen" and ".projection" are for hiding and showing page content - this is a more sophisticated use of CSS that we will get back to later in the tutorial. Following these lines come the setting of fonts and colors as well as page breaks. If you find the lines above to be completely incomprehensible, you may want to read up on HTML and CSS before continuing. See the end of this document for a list of suggested reading.

Setting Fonts and Colors

Changing fonts and colors are some of the most common tasks style sheets are used for. The font size is here set to 150% of the normal font size. Also, the font family is set to "Trebuchet MS", with the generic font "sans-serif" as a replacement should "Trebuchet MS" not exist on the user's computer.

A background image is applied in the first line, and color sets the text color to white. All properties are set on the body element, from which all other visible HTML elements inherit. Therefore, the color of all text in the document will be white unless otherwise specified.

Breaking Pages

When you give a presentation, you move from one page (or "slide") to the other. Normally, browsers show documents with a scrollbar on the right side to move down and up in the text. When you press the Show key, Opera goes into full-screen mode and tries to split the document into pages. The style sheet declares where page breaks should occur -- in our example the style sheet states that page breaks should come after every occurence of the class "projection". Thus, the next section will always appear on the top of a new page.

.projection {
	display: block; 
	padding:65px 200px 0px 24px;
	page-break-after: always;
	}

Instead of using the scrollbar to move up and down in the document, the arrow keys and PgDn and PgUp are used for navigation in full-screen mode.

Heading elements, like h1 and h2, should always be used in HTML. Some authors create headings by using the font tag and a size attribute, but this is not recommended, as the font element says nothing about the structure of the document.

Hiding and Showing Content

You may have noticed that when you press F11 in this document, not only does the appearance of the document (fonts, colors, pagination) change, but also the content of the document. This is one of the more advanced features of CSS, and most authors will not need to make this kind of document. However, if you want to impress your audience with technology that is indistinguishable from magic, this one is for you.

CSS can do simple transformations in the document - style sheets can, for example, hide text which would otherwise appear. Here are the rules used in this document:

.screen {
	display:none;
	}

.projection {
	display: block; 
	}

These lines make one class of div elements (those with a "class name" "projection") visible, and hide another class of elements (those with class names of "screen"). When Opera reverts back to normal screen mode, the opposite set of rules is applied:

@media screen {
	div.projection { display : none }
	div.screen { display : block }
}

In other words, the document you are reading is actually two documents in one. When you toggle between full screen and normal mode, Opera switches from one document to the other. Only the headings remain identical and stay visible at all times.

Feel free to reuse this document and its style sheet as templates for your own presentations. A simpler version with integrated CSS, and without the general opera.com style sheets, is available.

May your projector always shine!

Suggested Reading on Opera Show, CSS and HTML

• Day Thirty: OperaShow (from 30 Days to becoming an Opera Lover).
• W3C's HTML Home Page
• W3C's introduction to CSS2
• W3C's introduction to media types in CSS2
• W3C on using CSS2 for page breaks

Other helpful links for creating your presentation

• Opera Show Generator
• QuickShow is a shareware authoring tool for Opera Show created by Phil Burns
• W3C's MarkUp Validation Service helps you make sure your style sheets and HTML files validate
• ColorMatch helps you pick colors that go together and supplies their hexadecimal codes