Getting Started with S5
Getting Started with S5
2.Uncompress the zip file. (this tutorial considers s5 template. The same is true with the other two) The folder structure is as shown
1. Open s5-blank.html in a text editor, for example notepad. But it will be easier to use a source code editor, which colour highlights codes and syntax. Visit Crimson Editor's Homepage to know more about the editor, or just Download the freeware Crimson Editor, install it and open s5-blank.html. The beginning part of the file looks like this
2. Instructions and comments are encoded in <!-- --> tags and are green in colour in this editor.
2. Look for square brackets. These are in black. You need to replace these (along with any text inside) with the text of your presentation. Do not change anything else.
3. Use Save As option to save the file with a different file name. For example myshow.html. Remember to save in the same folder as s5-blank.html.
4. Open the file (myshow.html) in the browser or double click on the file to view the presentation.
5. If you want to copy the presentation onto a floppy or if you want to email it, you will have to copy the entire folder structure.For example if you have used the s5 template, copy the s5 folder and all its contents (except s5-blank.html). To email it or to submit your presentation to the course, zip the folder and upload the zip file. You can rename the zip file if you like.
Where to look for and what to edit?
The template has two parts. The first part is enclosed in the head tag
The second part is enclosed in the body tag.
Let us work with an example. It is a game where children read and then from memory write down what they read.
The title of the presentation is Read and Write
Each slide presents a set of phrases. The teacher decides how long she wants the children to see the slide. This example has only one slide which contains four phrases. To begin with only the first phrase is visible. With each subsequent mouse click, other phrases become visible. More such slides can be added to extend the game.
1. The first thing to look for is the <title> tag. This is found between the <head> tags. Look at the screen shot above to see it soon after the first instruction.
<title>[S5: An Introduction]</title>
2. Next scroll down the <body> tag, till you find
<h1>[location/date of presentation]</h1>
Delete the first line and replace the second as shown
<h1>[location/date of presentation]</h1> <this
line is deleted>
Scroll further to find
Modify or delete what is not needed. Please remember, tags come in pairs. If one of them gets deleted the slide show will not work. Notice <div class="presentation"> is closed by </div>
3.The template archive contains 4 slide templates: Unordered list ( bullet points); Ordered list (numbered list), paragraphs; image with text. In this example, we will need only the paragraph template. Delete the others and retain just the paragraph slide template. This is then modified as
<!-- Start of slide template
to create paragraphs. Replace the square brackets
Explanation. The slide title has been deleted. As no handouts are necessary, that part is also deleted. <p></p> are the paragraph tags. Text between these tags form a paragraph. In our example, we want the phrases to be centered. Hence we have introduced the <center></center> tags (Notice the spelling; do not use centre). Only the first phrase is to be visible. class="incremental" is attached to the <p> opening tag to make the next phrase appear only when the mouse is clicked.
These examples are included in the archives. Double click to view the presentation. Open the file in Crimson Editor to see the codes.
Finally, please note that when you save your presentation, it should have a html extension. If you use the Crimson Editor, type in the file name along with the html extension and select the Save as type to be HTML Files (...) as shown in the screen shot below.