Step 3: Creating Your Shrine Using HTML

Q. How do I create my shrine?

A. First download the RPGC layout templates to your computer. You have two options available to you: use Notepad or WordPad (or another plain-text editor, for instance Notepad ++ ) and hand-code your HTML; or use a program called KompoZer, which does the coding for you. (FrontPage, Dreamweaver and the ilk are unacceptable to make shrines with. See this question as to why.)

The files are HTML files. They should be saved in plain text format if you're using a plain-text editor, and each file should end in ".php".

Once you've finished doing this, the first thing you should do is upload index.php and toc.txt to your account. See the next section for more information on that.

Q. Oh, right, HTML! Er... what's HTML?

A. It stands for HyperText Markup Language. It's basically a way to format text so that Internet browsers can read it nicely. If you want to learn it, it's not that difficult. In fact, RPGC has a beginner's HTML Walkthrough just for you! However, you do not need to know HTML; as I said before, Mozilla Composer can do the code for you if you like. However, you can't just use Composer willy-nilly; please consult the Composer walkthrough for info on how to use it properly and how to set it up for RPGClassics.

Q. What's KompoZer?

A. It's an editor that works basically like Microsoft Word or other word processors, which allows you to create yout HTML files easily and quickly. It also outputs fairly clean code.

Q. Can I use another HTML editor like FrontPage or Dreamweaver?

A. We won't accept a shrine in one of these editors; they usually end up making code completely unreadable. They also tend to make code that only applies to your own settings (e.g. if you write your page on a computer with a 1024x768 resolution, all the pages will look too wide for people in an 800x600 resolution). We recommend using KompoZer if you don't want to learn HTML, as its code output is far nicer. You may also use programs like Notepad ++. Those programs do not actually write the code themselves, but they do allow for shortcuts; they also color-code your HTML while you write it, to make errors easier to catch.

Using The Templates

Q. What's CSS?

A. Wikipedia defines it as

In web development, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

Q. What's this "toc.txt" thing inside the templates?

A. That's your table of contents. It's automatically "included" inside all your shrine pages when you use the templates. You'll have to edit it a bit, using Notepad or another plain-text editor. Right now there are three links, pointing to "page1", "page2", and "page3". Change the links to real pages, and add more links as needed. Also change the "shrine maintainer" e-mail to your own. Very simple HTML is all that's needed to do so. Don't change the filename or it won't work!

More specifically: toc.txt will have lines that look like this:

The last entry must look like this:

Q. What's this "license.txt" thing inside the templates?

A. That's your license. It's automatically "included" inside all your shrine pages when you use the templates. You'll have to edit it a bit, using Notepad or another plain-text editor. By default it uses a creative commons license, but you're free to use whatever license you like, for instance, simply © Name Year

Q. Do I have to use the templates? I am a 1337 HTML wizard!

A. Yes. I'm also an HTML wizard, and I use them. It's just the easiest way. There's no reason not to, and it makes your code nice and clean. You just have to edit the title of the page and the actual content, leaving the framework there. You can do whatever you want in the body as long as the framework is still there at the beginning and end. In other words, if you're hand-coding, you can just copy and paste the beginning and end code from the template file into your HTML page, and write whatever you want in the middle. Another way is to open a file and leave the includes (the top and bottom) there and just edit the title and content. Both ways work fine.

Q. Can I just view the source code from a page on RPGC and then copy/paste that?

A. NO. Because of PHP, the code you see when you do that isn't the same as the code that belongs on the server. Trust me on this one. 8-)

Q. How come the background looks white on my computer, and the fonts are different?

A. That's the PHP. The layout is stored on RPGC's server. So you can't view it properly on your home computer using most programs. However, you can store your shrine on RPGC's server using FTP (see Step 4), so that you can indeed see how it looks properly. Once your page is on RPGC's server, you can go to it on your browser.

Q. I did upload it and it's still black text on white background!

Q. When I try accessing my stuff I get a directory listing!

A. You have to have a file named "index.php" in your directory. Note that this is NOT "Index.php". Capitalization matters.

Q. Hey, I uploaded my stuff but it's not showing up; I'm getting a 404 Error!

A. Make sure your files are all in lowercase. There is a difference between "index.php" and "Index.php". You want everything to be in lowercase.

Q. Can I make music play on my shrine?

A. You can, I guess, though a lot of people would rather that you didn't, since we like to have our own music play while we browse. 8-) Please don't do this unless you have a really good reason.

Q. Can I have JavaScript on my shrine? Java? Flash? DHTML?

A. Technically yes. Two problems, though. 1) the entire <HEAD> tag isn't in your file; you'll have to put the script before the <?php include("new-header.php") ?> line. 2) Shrines should be accessible by as many people as possible. Don't make code that would mean that people with older browsers can't view your page.

Q. Got any tips about layout or some such?

A. In my opinion, you should use anchors as extensively as possible (see the HTML Tutorial above). They allow people who like scrolling to scroll, and people who like clicking links can click links. You should also put things in a specific order (preferably alphabetical, but if that doesn't make sense you can use location or strength of items). Also, if you use pictures on your site, be sure to have a version of the page without pictures for those of us with slow modems.

In a more technical aspect, your file names should be all lowercase whenever possible, and should contain NO SPACES. Use underscores if you must, but generally you want to keep the filenames as small as possible (preferably a single word, with just letters and numbers). It's just easier that way.