?

Log in

Veronica Mars Fanfic Resource Journal
Articles on Writing
User's guide to HTML 
25th-Aug-2005 01:30 pm
veronica
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>
See how this text starts on the right side of the page?
Each line with the right alignment text will start on this side of the page, and that will probably look a bit backwards to the reader. After all, English is read from left to right, so the idea of the first letter in each line not starting at the same distance from the edge of the window can be confusing. Right-aligned text isn't often used in fanfiction, but there are always stylistic possibilities.
<div align="justify">justified alignment text</div>
Justified text is text in which each line is stretched from margin to margin. It can make paragraphs appear neater and more organized (which is really a matter of personal opinion, I suppose), but it isn't really necessary at all. Justified alignment is, after all, still left-aligned text, just stretched out from margin to margin. The final line just ends where it ends, typically.

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"> = Wallace+Veronica BFF = 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!

Comments 
26th-Aug-2005 05:14 pm (UTC)
HMTL Demystified! Thank you so much for this. I have often wondered how to use HTML and had no idea where to start and now I have no excuses.
26th-Aug-2005 07:12 pm (UTC)
Happy to help! If there's anything you can think of that I've missed, feel free to let me know, so I can edit it in. =)
29th-Aug-2005 11:46 am (UTC)
There are no words for how much I love this post. I am the biggest fool in the world when it come to HTML... and this actually makes sense to me!
15th-Sep-2005 05:36 am (UTC)
Glad to hear that you found this useful. If you have any other questions, don't be afraid to ask! :)
27th-Oct-2005 08:58 am (UTC)
Thank you for this guide. I'm new to LJ and to html and it's quite confusing and overwhelming. I even loose my way in the help-sites and tutorials! :)
Have bookmarked your site!
30th-Oct-2005 10:40 pm (UTC)
I'm happy to hear that you found it helpful. If you have any further questions, feel free to ask! =D
9th-Nov-2005 10:48 pm (UTC)
Could you maybe add fake cuts and lj communities to the instructions? Both would be helpful for me.
9th-Nov-2005 10:51 pm (UTC)
What do you mean? A fake cut is pretty much just a link with parentheses around it. And you link up LJ communities the same way you do usernames. :)

Was there something else that you were curious about?
9th-Nov-2005 11:22 pm (UTC)
I did not know that when people were saying "fake cut" they were just talking about the link with the parentheses. I just thought that other people might not know either.

The LJ community has the little dots in front: loveathons as opposed to the little person icon mastermia. Again, I thought that other people might like to know how to do them because I thought it was cool when I learned.
13th-Dec-2005 09:34 pm (UTC)
Consider both of those added! :)
31st-Jan-2006 05:33 pm (UTC)
Dude, you wrote that? I had no idea you knew so much about html. I thought you were linking me to a site guide written by someone else, or something. Way to go! I am trés impressed.
31st-Jan-2006 05:43 pm (UTC)
Yes, my HTML knowledge knows no bounds. Or, rather, it is within these limits anyhow. I know a fair amount about the basics of HTML, but there's still plenty that I don't know.
16th-Feb-2006 06:06 am (UTC)
Okay, Lizzy. This is the best resource EVER. Thank you for the link!
16th-Feb-2006 06:18 am (UTC)
Happy to help, Erin! I know plenty of HTML coding, so I figured it would be nice to share the wealth a little! :)
27th-Apr-2006 07:45 pm (UTC)
This has really helped me alot...thank you thank you.
27th-Apr-2006 07:54 pm (UTC)
Happy to help! You're welcome. :)
22nd-May-2006 04:25 am (UTC)
I needed some help and figured I'd ask you. Well, I was posting something and the HTML worked at first and then it didn't. The diffence between the two posts was the first one was written in the default box and the second in rich test. It wouldn't work under rich text and it wouldn't switch from rich text back to the default. I think the rich text is messing up my HTML...do you know how to change it from rich text?

Thanks!
22nd-May-2006 04:29 am (UTC)
I have no idea how to swith back and forth as I've never used the rich text option myself. I'd check out the LJ FAQ, probably, for help.

This was written before the rich text option was available, so I'll probably have to go in and edit this a bit at some point. But, yes, since rich text gives you buttons to play with to denote different HTML/LJ-code stuff, I don't think that typing in straight HTML will work. Sorry.
23rd-May-2006 06:53 pm (UTC)
I checked the FAQ and it said theres no way to change it back...which sucks. How do you use HTML coding with the rich text? Do you know...thanks for the help.
24th-May-2006 02:07 am (UTC)
To my knowledge, you can't. (granted, my experience with rich text is extremely limited) Isn't there a toolbar provided with the intent to allow you to "code HTML very easily" ? Of course, I personally think that's more trouble than it's worth, so I don't even try to work with that at all. :-\

Sorry, I wish I could be of more help.
4th-Sep-2006 05:57 am (UTC)
Hey Kayla, not sure if you've found an answer by now but I think you can switch it back here: http://www.livejournal.com/settings/?tag=editor
6th-Jul-2006 02:21 am (UTC)
It's a little annoying that when you try to preview it, it won't show the cut. I kept thinking I was doing something wrong...
Other than that it was very helpful! I didn't know anything about HTML before.
6th-Jul-2006 04:15 am (UTC)
Yeah, but that's on LJ, sorry. If you want to double-check where your LJ-cut is going to be, maybe put in some text in ALL CAPS (like "LJ CUT HERE") or something? But I suppose that won't let you know if it worked or not ...

I don't have a magic fix for that, sorry. Still, I'm happy to hear that you found this useful! :)
23rd-Jul-2006 10:12 pm (UTC)
This helped me a lot. I was having trouble with LJ Cuts lol!
24th-Jul-2006 01:49 am (UTC)
Happy to help! :)
20th-Aug-2006 05:02 am (UTC)
I can't do a LJ cut for the life of me. What exactly will it look like and yeah i'm just all confused
22nd-Oct-2006 08:14 pm (UTC) - Im so confused
I cant do an LJ cut either! i read the how too guide but looking at the
Insert text to be cut from the main page of the journal.
when it says 'Insert text to be cut from the main page of the journal' what does that mean exactly? i tried copying and pasting my fic in there and i got no LJ cut...just a really long post.

Am i being totally dumb here or am i missing something?

Someone help?
22nd-Oct-2006 08:19 pm (UTC)
When you preview your post, you don't see the LJ-cut. But, yes, the body of your fanfic should go in there, where it says to insert the text to be cut.

Hope that helps!
26th-Nov-2006 08:10 am (UTC)
Hi! I'm kind new to LJ, and I was pointed to this awesome page you've generously posted to help out us less-tech savy folks by miniglik.

I've used it so much and pointed it out to others and now, if it's ok with you I'd like to add it as a permanent link on my sidebar. It's such a fabulous tool - and I'd like people to know where I learnt how to do "stuff".

PLease let me know if this is ok. Cheers for the page again.
26th-Nov-2006 06:03 pm (UTC)
I'm so happy to hear that you've found this page helpful. And, certainly, please do link to this page as often as you'd like in whatever ways you find most convenient. It's here to be a resource, and I'm happy to hear that people still find it useful, even now. :)

Thanks so much for your kind words. Totally made my day. :) <3
26th-Nov-2006 06:29 pm (UTC)
More new comments. Heh.

I've been stumbling about this place for probably more than a year now, and I still don't now how to do anthing HTML-style, save user names and lj cuts. So this a GOD SPEND. I'm going to memory it for reasource purposes. Thank you, Lizzy. :P
26th-Nov-2006 09:29 pm (UTC)
Yay! =tosses confetti=

I actually had a website (with like content and stuff!) where I hosted my blog for a few years, before stumbling upon LJ. So I understand the learning curve associated with HTML, and I'm more than happy to try to help out as I can. :)

I'm happy to hear that you find this helpful. :-D
28th-Nov-2006 12:56 am (UTC)
Oooh! This will certainly come in handy. I don't have time to review today, but I'm saving it to my memories.

*prepares to be educated*

I'll comment again once I have everything figured out
28th-Nov-2006 01:04 am (UTC)
Yay! Enjoy and learn lots.

And if you're going to comment once you have everything figured out, I'll look for a comment in about a year or so. I mean, it took me about that long to learn a lot of the finer details of HTML. ;)

I'm always happy to help. <3
(Deleted comment)
20th-Mar-2010 03:00 pm (UTC)
Happy to hear it! Hopefully everything is working well for you. :)
20th-Dec-2010 05:16 pm (UTC) - The 12 Days - Day One, part two
User love_is_epic referenced to your post from The 12 Days - Day One, part two saying: [...] comment for how to phrase your rec(s). Make sure you link your rec in the comment. See this post [...]
19th-Jul-2011 05:40 am (UTC) - watches
Anonymous
This info is very useful for me, thank you!
This page was loaded Mar 26th 2017, 12:57 pm GMT.