User's guide to HTML
by herowlness

USER'S GUIDE TO HTML

What is HTML?
HTML (or hypertext markup language) is the language of the internet. No, it's not some foreign language that everyone online speaks. Rather, it's the language that codes the webpages you see. All HTML coding occurs within tags, which are enclosed within brackets. (< HTML code >)

Almost all HTML tags (particular those for formatting) have both an opening and a closing tag. The closing tag echoes that of the opening tag, but usually has a backslash at the beginning of the tag, to signal that it is a closing tag. (i.e. <b> and </b>)

When posting fanfics on message boards or LiveJournal, a knowledge of HTML isn't really necessary. However, sometimes having a basic knowledge of HTML can help to spice up the appearance of your fanfics and make them more visually striking.

LiveJournal Specific HTML tags
LiveJournal has a few tags that are specific to it's website that are formatted similar to HTML tags. Therefore, I'm including them in this handy guide as well.

LJ Usernames and Community names
Being able to make a hyperlink of LJ usernames is helpful, as it may be an easier way to list yourself as an author of a particular work, or to thank those who may have served as a beta on your work. This same code can also be used to link to LJ communities, if, for example, a piece was written because of a challenge at a different community.

<lj user="herowlness"> = herowlness
<lj user="vm_betas"> = vm_betas

Of course, you would likely need to change the username or community name for each situation. [although if my username starts popping up all over fandom, I'll certainly feel special!]

LJ Cuts
The basic LJ cut is very simple and straightforward.

<lj-cut>Insert text to be cut from the main page of the journal.</lj-cut>

This then appears on the main page of the journal (and on the Flists of those who have the journal friended) like this --

( Read more... )

The text in blue underline is, when actually used, a hyperlink to the LJ-cut text.

The LJ cut can be altered slightly, to change the "Read more …" section to something more personalized and specific. This is done by using the following tag –

<lj-cut text="LJ cut text">Insert text to be cut from the main page of the journal.</lj-cut>

For example, with the cut text of "Part One," the link on the main page of the journal would appear like this –

( Part One )

LJ cuts are very important when writing and posting fanfiction on LJ, as the vast majority of Veronica Mars fanfiction communities require LJ cuts for all fanfiction postings. In general, most users do not appreciate it when their Flists are filled up with long, long entries – perhaps containing spoilers or content that they aren't interested in. Learn to love the LJ cut, as it could come in quite handy.

For details on how to make a fake LJ-cut head down the the hyperlink section of this resource.

General HTML Formatting Tags
I'd like to preface this section by saying that all of the following codes work on LiveJournal, but they may not work on other message boards. Some forums use a different code, rather than HTML, for posting entries. I'd suggest reading the FAQ or About section of whatever boards you also frequent and see what sort of code that they use. Many codes are similar to HTML, but may use something other than the same brackets.

Bold

<b>boldface text</b> = boldface text

Italics

<i>italic text</i> = italic text

Underline

<u>underlined text</u> = underlined text

Strikethrough

<s>strikethrough text</s> = strikethrough text

Paragraph Alignment
The default alignment online (for most websites, including LJ) is a left-side paragraph alignment. That's why the lines that you read typically start from the same distance from the left-side of the window. However, with HTML code, it is possible to change the alignment of the text.

Center Alignment
This one is doable with a simple one-word code. The other alignments are not quite so simple.

<center>centered alignment text</center>

As you can see, this text is now centered. Each line is centered. While each line does follow the same margins, the beginning and end of each line do not fall in the same place for each row.
This sort of text is often helpful for titles or transitional phrases or punctuation between scenes.

Right and Justified Alignment
Both of these require a div tag (<div>) to make the text be aligned in such a way.

<div align="right">right alignment text</div>

<div align="justify">justified alignment text</div>

Centered alignment can also be coded in this way –

<div align="center">centered alignment text</div>

Font Alterations
With font tags, it is possible to change the size, color, and even the font itself to something different.

Font Size
Font size can be changed by simply specifying a particular digit as the "size" within the font tag. The bigger the number, the bigger the font. (and vice versa, of course)

<font size="1">teeny font</font> = teeny font
<font size="7">biiiiig font</font> = biiiiig font

LJ allows for different font sizes from 1-7. Anything above 7 is the same size as seven.

1 2 3 4 5 6 7

Font color
With HTML, each color has what is called a hexadecimal color number – or a six digit combination of letters (A-F) and numbers (0-9) that when put together, cause a particular color to appear on the screen.

<font color="#006600">Green</font> = Green

As you can clearly see, you need a pound sign (#) before you enter the hexadecimal color number.

You can also denote a particular font by just naming the color. However, this method does not work in all browsers and may even denote a different color than the one you input. This uses the same code as above, just without the pound sign (#).

<font color="red">Red</font> = Red

There are a number of different webpages that have helpful color codes for you to pick from, so you can be certain that you're selecting the color you want.

Hexadecimal codes only - Lissa Explains It All, VisiBone, Webmonkey
Hexadecimal codes and Color names - Annabella's HTML Help, HTML Goodies

Font Type
Clearly, there are a vast number of fonts out there – sometimes way too many to choose from, if you're into doing graphics work. Sometimes, to give parts of your story a particular feel (for example, letters or newspaper headlines, etc.) you may want to designate that a particular font type be used for a particular section.

<font face="georgia">Georgia</font> = Georgia

The one thing to be careful with when changing the font of some of your text, is that you want to be certain that it's a common font that most people have. Otherwise, you're likely to end up with either the default font (which isn't so bad, since then no one can tell that you've changed the font to begin with) or something totally random and wonky that the user's browser thinks you said.

General Font Notes
All of these tags can be incorporated together into one big font tag. (Meaning that you don't have to have 3 separate tags if you want to change your font's color, size, and type.)

<font size="4" color="#33CC99" face="courier">different font style</font> = different font style

Of course, not all of the inside tags need to be included (example, you can choose to change the size and the color, but not the face), and the order isn't especially important. However, you should be certain that you mimic the tags listed above (separately), just changing the bit in quotation marks to fit your desired font appearance. Otherwise, the browsers will just skip over your tag as if it wasn't even included in the first place.

Hyperlinks
Hyperlinks can be helpful in fanfic-posting, should you wish to link to a prequel/sequel, other chapters, your other pieces, or even just link to a master post from a community journal.

<a href="http://mywebpage.com">My Fanfics Rock!</a> = My Fanfics Rock!

And, of course, you would/should insert the url you want to link to where I typed in http://mywebpage.com.

That hyperlink causes the new page to open up in the same window in which the user clicked on the link. Sometimes, it can be helpful (or important) to specify that the link should open in a new window. (Specifying a target for the new url is not required, but it can be useful sometimes.)

<a href="http://mywebpage.com" target="_blank">My Fanfics Rock!</a> = My Fanfics Rock!

While the url can (and should) still be altered for your particular link, make sure that you leave the target="_blank" portion intact. While there are other places that links can be targeted, I'd recommend either using the new window target, or not using it at all, until you are more experienced with HTML.

Fake LJ-Cuts
Some people like to link to their own journal while making the formatting of the link appear to be nothing more than a simple LJ-cut. Putting parentheses around a link is simple enough to do, but if you want the formatting to look just like that of an LJ-cut, it takes a little bit more work. For one, the entire text is bolded, and there are spaces between the parentheses and the link.

<b>( <a href="http://mywebpage.com" target="_blank">Read my newest fanfic!</a> )</b> = ( Read my newest fanfic! )

Obviously, change the link and the link text to whatever you want it to be, but otherwise you should be good to go!

Email Hyperlinks
If you'd like to give people the option of sending you email feedback, you might want to include a hyperlink with your email address.

<a href="mailto:myfanficsrock@me.com">Email me feedback!</a> = Email me feedback!

Of course, you would edit the email address portion (that after the mailto:) to your email address, as well as the bit between the two link tags. Be careful of typos here, as mistyping your email address can lead to lost emails.

Additionally, you have the option of specifying a default email address for the link. Users can always edit the subject line themselves, should they wish, but you can designate a subject if you'd like.

<a href="mailto:myfanficsrock@me.com?subject=Title of Fanfic">Email me feedback!</a> = Email me feedback!

The bit in bold is the part that would need to be included – and of course, the portion after ?subject= can be changed to whatever you'd like the subject heading to be.

In general, you want to avoid leaving spaces inside of quotation marks in HTML tags, but inside the subject designation, using a space is certainly okay.

Images
Sometimes we all want to show off a banner that we won, or maybe the cover page that we designed for our fanfic. In that case, knowing how to code for images can come in handy.

<img src="http://www.livejournal.com/userpic/34054725/1505121"> =

Unlike most of the other tags, the image tag does not have a closing tag that you use to "end" the picture. However, like the hyperlink tags, there are a few other specifications you can make, if you'd like.

Dimensions
If you feel a need to shrink or expand your image, or even if you'd just prefer for the page to load with a perfectly sized space saved for your image once it loads, you may want to specify dimensions.

<img src="http://www.livejournal.com/userpic/34054725/1505121" height="50" width="50"> =

The bits in bold are the new parts that you would need to include. The height and the width are both measured in pixels and can usually be found by using your image program, or even Windows explorer.

Clearly that picture has been shrunk (by half), which may not be the smartest plan. Still, I just wanted to demonstrate how the size of an image can be altered by changing the digits in those particular tags.

Borders
As you can intermix hyperlinks with images (use an image as a link), you may want to be able to make sure that you have no border on your image. Otherwise, you will likely find a "pretty" thick hyperlink line around your image – and that might not be so appealing.

<a href="http://mywebsite.com"><img src="http://www.livejournal.com/userpic/34054725/1505121" border="0"></a> =

versus <a href="http://mywebsite.com"><img src="http://www.livejournal.com/userpic/34054725/1505121"></a> =

Isn't the first picture a bit prettier? (Again, the text in bold is the specific coding that you would need to include in this case.)

Alternative Text
The alternative text (or alt text) is what shows before the image loads, or what shows should a user have image-loading turned off for whatever reason. If you have an image that is essential to your story, you may want to use an alt tag, if only so these people can continue on with the story and not miss some important plot point (for example).

<img src="http://www.livejournal.com/userpic/34054725/1505121" alt="Wallace+Veronica BFF"> = =

If for some reason, your image doesn't load, as is the case with the second "image" (the server is down, you mistyped the url, etc.) then users will still get the basic idea behind the image you were trying to show them. (And, again, the text in bold is the specific coding that you would need to include.)

Additionally, in some browsers (IE, for example) the alt text can also be read by hovering over an image. However, I would recommend against using the alt text to leave some sort of "secret message" to your users as some browsers (Mozilla, for example) do not show the alt text unless the image doesn't load.

As a note, the above image was created by louloucn.

Blockquote
You may have been examining this page and wondering how I got some of the text (particularly the examples) to indent in a bit here and there. That was accomplished using the blockquote feature. This is very helpful if you're having Veronica, for example, read a newspaper article, as it sets the text apart from the rest of the story (by the indentations) and makes it clear that this isn't her expositing or talking.

<blockquote>blockquoted text</blockquote>

Blockquoted text tags tend to automatically assume that you have at least one carriage return before and after them, so I would recommend previewing your post before actually making it, to be certain that you have everything as you want it. Further, should you have a need, you always have the option to

have blockquotes within blockquotes, and so on and so forth.

Just make sure that you close each blockquote tag that you make, so that the rest of your post doesn't end up being blockquoted as well. Eeep!

Final Notes
If something doesn't work the first time you try it, make sure that you double-check your typing. Using copy/paste is the easiest way to make sure that you have everything right. And then, from there, go on to edit the relevant portions to personalize the tags for your usage.

Also, if you're typing up your tags directly into your fic in Microsoft Word (for example), be certain that the word processor isn't making your quotation marks into Smart Quotes. Many browsers don't recognize Smart Quotes as quotation marks, so that could also be the cause of your problems.

Other Questions?
Feel free to post them here, and I'll try to do what I can to reply to them. Otherwise, do a Google search for whatever code you're trying to find, or else check out this site and see if that can't help you. (The linked site is Lissa Explains It All, and I still find that it can be a great tool if there's a code I'm looking for that I haven't used in awhile.)

Happy HTML'ing!