Sajasma Lee kindly wrote an introduction to HTML for beginners. Hopefully, this guide will help you get started with your personal fanfiction archives. If you have any suggestions for expanding this brand-new section of our site, email light.

‡ A general overview and guide on HTML for beginners ‡

By Sajasma Lee

Introduction

Large archive sites are an excellent way for authors to expose their work, be it fan fiction or art, to a large number of people within any given fandom.  Generally, the rule of thumb is that the more archives one submits his or her work to, the greater exposure that work receives.  However, this can quickly become a very complex system to keep track of for individual authors, especially given the sheer amount of large-volume archives there are on the internet, many times further specified by character, audience age, and/or fictional pairing.

This is why many authors often have a personal fan fiction/art archive – a little niche carved out of the huge entity that is the internet not just for organization, but also for personal expression.  The only problem this poses is that authors now need to have a basic knowledge of Hyper-Text Markup Language (HTML) to actually create and put up a decent-looking site on the world wide web when they just barely got the hang of using Microsoft Word.

This article will serve as a light introduction to HTML and a general guide to publishing your stories on the web in a simple, easy-to-read fashion.  Topics such as website design and creativity will not be covered here, as this article will solely focus on the functional qualities of website design.  Remember: the purpose of your site is to present your work to the world, first and foremost.  The harder it is for readers to physically read your stories or navigate your site, the less likely those readers are going to stick around.

Teach Yourself HTML Right Now

I can never stress this enough: if you want to have a personal website, have a working knowledge of HTML.  Do not depend on Dreamweaver, Adobe GoLive, Frontpage, or any other website-designing program to do all the work for you.  HTML is an extremely precise language, one typo or one missing symbol could result in your entire webpage royally screwing up.  A basic knowledge of HTML will guarantee that should problems arise, you will be well-equipped to not only spot any errors in your coding, but able to rectify them as well.  In the end, learning HTML will save you time and stress, because if there is one certainty in this day and age, it is that anything having to do with technology is never 100% dependable.

Of course, if you ever take time to view the source on a website, your eyes may boggle with the seeming jibberish that HTML, at first glance, looks like, but don’t despair! There is a very systematic and logical method to HTML that once you get the hang of, will make HTML very easy to use and understand.  Hey, if I can learn HTML, then anybody — anybody — can.

With this in mind, I have sorted through the millions of websites out there on the net dedicated to teaching young, naïve website creators HTML.  To be blunt, most of these sites are crap and will only serve to confuse you more.  The list of links below are sites that I, as a self-taught website designer, think are the most useful, the most helpful, and the most understandable in terms of teaching newbies the basics of HTML and even, if you’re feeling brave, some more advanced options.

:: HTML Goodies

I admit that this is a biased recommendation — this is the site that I learned most of my HTML from.  This site offers you a thorough array of everything from basic HTML primers to advanced tutorials on CSS and JavaScript.  It also contains some very helpful tools for more advanced website designers, such as an easy-to-access list of HTML tags and a sheet of non-dithering color codes (to ensure that your red webpage background will stay red across different web browsers like Netscape or Internet Explorer).  This website is a friendly information source that is also continuously updated.

:: Webmonkey

Webmonkey, from Lycos, offers website designers a variety lessons in HTML basics and design.  Like HTML Goodies, Webmonkey presents its information in a clear and friendly fashion.  Webmonkey is easy to navigate, and it’s a good resource with tons of information.

:: Project Cool

I picked this one because it gives you a step-by-step tutorial for creating a very basic webpage, which will be very helpful for the poor author who just learned yesterday that their CD tray is not a drink holder.  I also enjoy this site because it gives you a nice little overview of the basic guidelines that you should keep in mind when designing a web page — from esthetic appearance to user functionality.  Unfortunately, this site takes some time to load, but you can find the list of website resources about midway down the page.

:: Web Diner

I suppose the creators of Web Diner are trying to put a little fun in learning HTML as they have entitled their site, “Web Adventure! Thrills! Chills! Excitement!” However, despite the cheese, this is an excellent resource, giving users a list of beginner, intermediate, and advanced tutorials in coding, graphics, and links to other helpful resources.

:: NCSA

This site rocks.  They offer not only an extremely in-depth, easy-to-digest tutorial to basic HTML, but they even offer a print-friendly version so you don’t have to keep switching between windows while you make your first webpage.  This site is very organized and very easy to navigate.

:: Writing HTML

This website if very helpful for users looking to become very proficient in HTML.  The lessons can also be downloaded for easier reference.  There is a long overview on the front page, but you can start the HTML lessons by scrolling to the bottom and choosing the link that will take you to them.

I think that these should do it.  Armed with these website resources, go forth and create! (But first finish this article.)

What Your Website Generally Should (and Shouldn’t) Do

Too many fandom authors make god-awful personal websites, and I’m not just talking about design.  While it takes skill to create an artistically stunning site, most of us can get away with creating sites that house our works, which means simplicity, easy navigability, and effortless readability.  Let us begin.

The index page (or the very first page that we see when we type in your website address) to your site should present your visitors with all the general information that your site contains.  This should be clearly communicated in simple, easy-to-read text against a non-distracting background.  Readers shouldn’t have to squint or shield their eyes from looking at your site.  They shouldn’t have to highlight the text in order to even read it.  They shouldn’t have to side scroll because the text goes just an inch or two off to the side.  They shouldn’t have to sit and wait for a huge 500k HTML file to download.  They shouldn’t have to hold the scroll downward button for a full ten seconds and still not reach the end of your index page.  All these transgressions will guarantee that your visitor will hit the back button faster than you can say “bad design.”

Readers shouldn’t be confused as to where your stories are on your site, or where anything is, for that matter.  Your site is not a maze.  It’s not suppose to be a challenge.  I doubt readers will feel rewarded with unearthing your stories after navigating through a dozen or so pages to find them unless you are a really, really good writer.  Your site should have a site menu, within the first two screens of your index page (which means, not having to scroll and scroll and scroll…) clearly pointing to each section of your site.  Do not compromise on this.

Speaking of site menus, let me give you a horrible scenario: say that you’re an edgy/gothic type of person who thinks, “Hey, my site will have a theme! On my menu, each section of my site will correspond with a mood-invoking ‘word’ because that will be cool!”  Well, not many people are going to associate “Eternal Night Sky” with “fiction” by their own deductive reasoning.  And personally, without an explanation up front as to what “Eternal Night Sky” is, I would never, ever click on a link that said that and only that.  Your site menu should be clearly labeled, with “Fiction” pointing to your stories, “Links” pointing to your links, and so on.  Sure, you can do the artsy word association thing — just make sure you explain what those words mean within the same page.

Let’s move on to the meat of your site: your stories (or art, but for now, I’m just going to say stories, though art is certainly applicable here too).  This is what will attract your visitors and is the main purpose for why your site exists in the first place.  Nothing, and I mean nothing, should drawn readers’ attention away from your stories while they are reading them.  Not only does the above mentioned areas of text, color, and background affect reader attention, but so does clutter.  If you have a million or so images side-by-side with the content of your story, it’s going to pull the reader out of the narrative.  This is especially bad if your piece is going for an emotional effect that relies on the reader becoming completely wrapped up in it.  Similarly, if your story is in a tiny window frame within a window frame, it will break the narrative hold of the story and your reader will subsequently be distracted.  Just don’t do it.  Give your stories the utmost attention they deserve — let them take up most of the screen, let them overshadow everything else on the page.  Give them the spotlight, and your reader will too.

Let’s talk about organizing your stories on your story index page, specifically, what kind of information your story index should include.  It’s the same basic elements for large fiction archives and mailing lists everywhere: Title, Rating, Fandom (if you have multiple fandoms), Category, Summary, and optionally, Warnings.  Let me emphasize summaries — always, always have them.  I am so sick of reading a story index that will only give me the title to a story and no clue as to what the story is about.  Frankly, when that happens, I won’t even bother.  Website visitors are lazy — they want their information up front and in-depth.  If you don’t have it, they won’t stay.

I shouldn’t even have to tell you this, but since I’ve stumbled across so many personal author sites that don’t do this, I will include it here: format your stories correctly.  This means paragraphs, separate lines for dialogue, left-side alignment, correct punctuation, etc.  It has been scientifically proven that if a paragraph is over half a page long, single spaced, the human eye will wander.  If your story reads as one big large chunk of text with no psychological breathing space, no one is going to strain his or her eyes and brain to read your story.  It won’t be worth the effort.

Now lets discuss one-shot and multi-chapter stories and how you should format them.  Remember my rule about holding down the scroll button for ten seconds and still not reaching the end of a webpage? Different standards here, but the principle is the same, especially when dealing with multi-chapter stories.  There are no set standards for how long is too long and there is no defining gage that tells authors when they need to continue their story onto another HTML page.  It’s a matter of reader preference, but you can follow these general guidelines: A one-shot should begin and end on the same webpage.  Short chapters of a story can be grouped together on a single page.  Long chapters should each have their own page.

How long is too long? Look at the size of your scrollbar to the right side of the screen — you know, that rectangular thingy that lets you scroll a webpage when you click on it and drag it up and down.  The lesser amount of text you have on a single page, the longer that scrollbar is going to be and the lesser amount of space you can move it.  Inversely, the more text you have, the shorter that scrollbar will be, the more room you have to drag it up and down.  If your webpage results in a tiny little sliver of a scrollbar, then rest assured, your page is too long.

Conclusion

A personal website can feel like a cozy little home on the net, a piece of land that we have personally staked, us being such territorial little creatures that we are.  The funny thing is, we want as many people to come to our sites as possible (except, uh, corporate lawyers from the WB or representatives of Anne Rice…).  The goal, then, is to make your website as easy to use and interact with as possible.  Cater to the lowest denominator (the lowest being the extremely lazy web surfer with a short attention span and a tendency to use their sleeves as napkin substitutes) and make sure your information is easy and immediately available to access. 

Learn HTML — you’ll have more control over the appearance and content of your site, you’ll have a better idea as to how your website works, and you’ll feel that much more proud over the efforts that you expended.  As a bonus, the more you learn about HTML, the more things you can do with your site, thus resulting in a prettier, more interesting user experience.

And as always, just keep this mind when you first begin to code your web pages: as fun as it sounds, don’t make your readers work for it.

:: Back to top ::