LuminousWebs:Tutorial

Jump Into LuminousWebs

LuminousWebs is an incredibly powerful publishing platform, merging the best features of HTML5 and MediaWiki, the same software that runs Wikipedia. It takes almost no time at all to typeset a basic book, article, or poem, and this very brief one-page tutorial shows you how.

If you're still stuck after reading this tutorial, or have any questions at all, be sure to visit the help board where you can get your questions answered in a snap.

Enabling the Editor

LuminousWebs is designed, first and foremost, to show off its content. That's why the first step to editing LuminousWebs is to enable the "Edit View." Move your cursor to the lower right-hand corner of the screen. A blue button will appear. Click "Switch To: Edit View" in the lower right-hand corner to enable the editing interface.

Starting a New Page

Now we're cooking! The editing interface brings up a host of new options, including a search box in the upper-right hand corner. There are two ways to create a new project on LuminousWebs. The first is by clicking on a red link, which is a link on an existing page to a page that has not yet been created. Another way to create a new page is to search for a page that does yet exist in the search box. LuminousWebs will tell you the page does not exist, and offer to let you make it.

Because LuminousWebs encourages a plethora of editions of every work, a search for a book's title will usually bring up a disambiguation page, which links to many of the editions of the book on LuminousWebs. Thus, to create your own edition of a book, think of a unique identifier to append to the end of the title, and then search for it. For instance, LuminousWebs Editions are always appended with the identifier "(LuminousWebs Edition)." Thus, you can access the LuminousWebs Edition of Paradise Lost by simply searching for Paradise Lost (LuminousWebs Edition).

To create your own edition of a book, simply follow the model. Type "Your Book Title (Your Edition Name)" into the search engine then click Create the page "Your Book Title (Your Edition)" on this wiki!

Go ahead an do this, and either open this tutorial in a new tab or come on back for more once you're comfortable getting a new page started. If you can't think of a name, you can always edit the Sandbox at LuminousWebs:Sandbox.

Setting Your Text

Alright, so you have a new page with a big blank textbox in front of you. The next step is to begin laying in content. This is the only technical bit of this tutorial, but Don't Panic. Once you understand these basic steps, you can typeset anything!

First, you will want to decide if you want to build your page from scratch or use a pre-set style. Building a page from scratch is the most powerful way to customize a page, but it requires knowledge of HTML and CSS (Cascading Style Sheets). Luckily, we can avoid most of this by simply using one of the pre-set styles to dive right into setting your text.

In the editor, you will want to first select your pre-set style. For purposes of this tutorial, let's select {{StyleBasicLuminousity.css}}. So the first thing that goes into the textbox will be this text.

Building on a Basic Stylesheet

Each basic style comes preloaded with fonts and styles for you to use. They also make available different fonts. {{StyleBasicLuminousity.css}} makes available Rochester, Kaffeesatz , and League-Gothic. To use these fonts, you simply use their name in a "tag" like so: <kaffeesatz>This is Kaffeesatz Font</kaffeesatz> creates the output This is Kaffeesatz Font on the page. You can change font sizes by using tags as well.

A Simple Example

The best way to show how markup is done is simply to see what a marked-up page creates. Consider the following:

The above produces the following output:

There's Plenty of Room at the Bottom

AN INVITATION TO ENTER A NEW FIELD OF PHYSICS

By Richard Feynman

Breaking apart what we did in the previous example. We used font tags to change fonts (like <rochester></rochester> and <kaffeesatz></kaffeesatz>) and we used size tags to change sizes (like <5em></5em> and <2.9em></2.9em>).

We also introduced another very powerful tag, called <span>. <span> does not change anything on its own, but it allows us to invoke powerful pre-made styles from our "Style Sheet" {{StyleBasicLuminousity.css}}. {{StyleBasicLuminousity.css}} has a premade style called "highlight" that changes the background color of text to yellow. Using the <span> tag we can take advantage of this preset by saying "between these two span tags, apply the 'highlight' style" which can change the font, the color, and the size of the text. Pretty Powerful stuff.

A More Complicated Example

In fact, the next example shows how powerful using the <span> tag can be. Consider the following:

The above produces the following output:

There's Plenty of Room at the Bottom

AN INVITATION TO ENTER A NEW FIELD OF PHYSICS

By Richard Feynman

So what we did in the previous example was use several <span> tags to invoke powerful pre-made styles from {{StyleBasicLuminousity.css}}. This can make the mark-up much easier to read and save a lot of time typing special formatting tags.

And if you want to see how this advanced markup works in action, visit the LuminousWebs Article There's Plenty of Room at the Bottom (LuminousWebs Edition).

The Best Way to Learn: Snoop!

Nearly every page on LuminousWebs can be edited. That means you can see how every single book, article, or text was formatted by its author. You can copy that text freely to begin an Article of your own. You can even see how the homepage of LuminousWebs was created. The best way to learn how to make gorgeous texts on LuminousWebs is to click the "edit" button and see how a text was laid out.

If you want to learn more about how to really make LuminousWebs your own, consider reading the Advanced Editing Tutorial.