HTML Tutorial -- Part 1

[geekygecko]

 

WHY USE HTML?

HTML (HyperText Markup Language) gives you better control over how your text will look, so you don't have to worry about those weird Rich Text formatting glitches, e.g.,

1. Your LJ-cut moving all over the place
2. Tag fragments cluttering up your post, like this:  username
3. Two consecutive links going to the same URL
4. Your formatting going to hell in the proverbial hand basket if you need to edit your entry a few times, etc.
5. And if you're copying and pasting a fic from a word processing program into LJ, you can cram a lot more text into a post in HTML since it strips out the hidden code that mostly just eats up a lot of space.  (We realize, of course, that you may want to keep some of those hidden formatting codes, e.g., to bold, italicize, or underline some text, and we'll show you how to do that in this part of the tutorial.)

Making the transition from Rich Text Format (RTF) to HTML might seem a little scary and overwhelming at first.  But once you get the hang of it, it's really pretty easy, and well worth the effort to learn.

So here are a few codes to get you started.



THE VERY BASICS

1. If you want to post an entry in HTML, make sure you're using the HTML tab.  Otherwise, it's just like typing regular text in a word processing program, and your codes won't work.


2. The basic codes will be provided in a blue box like this at the beginning of each section to make them easier to find, with more specific info re: how to use the codes listed below.
   
   sample text
   
   
3. HTML codes usually include an opening tag and a closing tag, like on and off switches.
   
   For example, if you want to underline a word like this:
   
   The quick brown fox jumps over the lazy dog.
   
   The code would look like this:
   
   The quick brown fox jumps over the lazy dog.
   
   
4. If you use an HTML code that requires a closing tag, the closing tag must include a forward slash (/).  If you forget to include the / in the closing tag, or forget the closing tag altogether, the formatting will keep going and going like an Energizer Bunny unless you tell it to stop.
   
   The quick brown fox jumps over the lazy dog.
   
   
5. You can use pretty much any combination of formatting and font tags.  You just have to remember to close them in reverse order.


6. It is possible to switch back and forth between the Rich Text and HTML tabs.  However, once you save an entry in Rich Text, it adds a bunch of extra code and scrunches it all together, making HTML look way more complicated and confusing than it really is.  So unless you need to make an emergency edit and you don't feel you have much of a choice, we strongly recommend that you try to stick with the HTML tab.


7. Some of these HTML tags are deprecated, which just means they're eventually going to be phased out and replaced by the newer Cascading Style Sheets (CSS) codes.  But since LJ still supports them, we're going to use them as long as we can.
   


8. Remember PIMF:  "Preview Is My Friend."
   
   No matter how awesome your mad HTML coding skillz are, it's always a good idea to click the Preview button to make sure everything looks exactly the way you want it to before you save your LJ entry.  Even the most experienced HTML users can goof up their code every now and then and seriously screw up their formatting. *whistles innocently*

 

FORMATTING TAGS

To format text, you just need to add an opening and closing tag around whatever you want to format, like little bookends.

text

For example, if you want to bold the word text, the code would look like this:

text

These are some of the more commonly used formatting tags:

Name
Opening and Closing Tags
Example

bold
,
bold

italic
,
italic

underline
,
underline

subscript
,
This is subscript

superscript
,
This is superscript

strike
,
strike

blink
,
blink

marquee
,
marquee


Using Multiple Formatting Tags

You can use as many formatting tags as you want.  You just need to "nest them," which simply means that you need to close them in reverse order.

Have you ever seen matryoshka dolls, where you open one up, and find another one nested inside, and then another, and so on?  Well, nested tags kinda work like that.

Let's say you want to bold, italicize, and underline the same word:

A sick or injured Wilson really makes us wibble in delight!

The code would look like this.  See how one set of tags fits inside another?

A sick or injured Wilson really makes us wibble in delight!

Now let's say you want to bold the entire sentence, and underline one word within that sentence:

A sick or injured Wilson really makes us wibble in delight!

The code would look like this.  Notice how the tags are still nested, just spread out a little.

A sick or injured Wilson really makes us wibble in delight!



FONT TAGS

Font tags require an opening and closing tag, just like formatting tags.

The opening tag will vary depending on what you want it to do, but the basic structure looks like this, where attribute = what you want to change, and x = what you want to change it to:

text

There are three things you can change with a font tag:

Attribute
Opening and Closing Tags
Example

Face (Typeface)
,
text

Size
,
text

Color
,
text


How to Change the Font Face

Whether you're using an off-the-rack LJ theme or a custom layout, there's some code somewhere that tells LJ to use a certain font as your default.  So if you want to temporarily override that for a particular section of text, that's where the tag comes in handy.

text

Let's say you want to change the font to Comic Sans MS:

Wilson slipped in a puddle of water and broke his tailbone.

The code would look like this:

Wilson slipped in a puddle of water and broke his tailbone.

The following fonts are compatible with most browsers and operating systems:

Name
Example

Arial
Arial

Arial Black
Arial Black

Book Antiqua
Book Antiqua

Comic Sans MS
Comic Sans MS

Courier New
Courier New

Georgia
Georgia

Helvetica
Helvetica

Impact
Impact

Lucida Console
Lucida Console

Palatino Linotype
Palatino Linotype

Times New Roman
Times New Roman

Trebuchet MS
Trebuchet MS

Verdana
Verdana

Now we know what you're probably thinking.  "Wouldn't it be awesome if Wilson got sick or hurt next season, and the story arc played out over several episodes while House nursed him back to health?"

Well, that, too. ;-)

But you might also be thinking that these fonts look kinda boring compared to some other ones that are available on the interwebs, and wonder why you can't use one you have installed on your computer instead, like this:



Technically you could, but it's not a very good idea to do it in HTML.  Why?  You might be able to see the text exactly the way you formatted it on your computer, but everybody else won't unless they have the same font installed on theirs.

Okay, then why did you guys just do it?

*smiles*

We didn't.  Look what happens when we add a border:



See?  That's really an image file.  We just formatted the text to look the way we wanted it to in Word, and cropped off what we didn't need in a photo editing program like PhotoFiltre.

So if you absolutely have your heart set on a particular font, and you only have a small amount of text you need to format, you might want to give this a try.


How to Change the Font Size

The basic code to change the font size looks like this:

text

And let's say you want to make the text a little larger:

Wilson slipped in a puddle of water and broke his tailbone.

The code would look like this:

Wilson slipped in a puddle of water and broke his tailbone.

There are seven size options in HTML:

Size
Example

1
font size 1

2
font size 2

3
font size 3

4
font size 4

5
font size 5

6
font size 6

7
font size 7

Can I make my font size even bigger?

You can, but not in HTML.

You know how sometimes we'll borrow a word or phrase from another language to describe exactly what we mean?  Well, if you really, really need a larger font, you can borrow some CSS code.

We've used a 100pt size for this example, but you can substitute any point size that works best for you.

Wow!

And your code would look like this:

Wow!


How to Change the Font Color

The basic code looks like this:

text

Now let's say you want to change the font color to blue:

Wilson slipped in a puddle of water and broke his tailbone.

Your code would look like this:

Wilson slipped in a puddle of water and broke his tailbone.

There are 16 standard color names (and a heck of a lot more non-standard ones!).  So you can use the name for that color, or the corresponding 6-digit hex color code, which includes the # as part of the code.

Color Name
Color
Hex Code

aqua

#00ffff

black

#000000

blue

#0000ff

fuchsia

#ff00ff

gray

#808080

green

#008000

lime

#00ff00

maroon

#800000

navy

#000080

olive

#808000

purple

#800080

red

#ff0000

silver

#c0c0c0

teal

#008080

white

#ffffff

yellow

#ffff00

So what's the difference?

Named colors might be easier to remember, but you don't have as many options.  And what might look like one shade in your browser, might look completely different in someone else's.

Hex colors are more likely to be consistent no matter which browser you use.  But until you've been doing this awhile, #0000ff isn't going to be quite as easy to remember as the word blue. :)

If you need a color that isn't listed above, you can Google "hex color codes," or try some of our favorite sites:

• Safe Hexadecimal Color Codes
• Hexadecimal Color Code Chips Table (Hue at 10° of separation)
• HTML color codes and names
• Tangled Spider HTML Colors
• ColorZilla, a Firefox add-on that can help you find an exact color match.

And don't let the term "safe color codes" throw you.  It doesn't mean that other colors are unsafe. ;-)

It's just one of those things that made sense at the time when color monitors and the internet were still pretty new, and weren't capable of displaying all of the pretty colors we can see now.


Using Multiple Font Attributes

In its most basic form, the font tag looks like this:

text

Then you just add whatever attribute(s) you want.

The wonderful thing about the font tag is that you can use it to change up to three attributes at the same time.  You just need to leave a space between each one:

text

Let's say you want to change the font to Times New Roman:

Wilson's face was red from fever.

The code would look like this:

Wilson's face was red from fever.

Then if you also want to increase the font size to make it easier to read:

Wilson's face was red from fever.

You just add the size attribute to the same font tag:

size="4">Wilson's face was red from fever.

Notice how you only need one closing tag, even though you're defining two attributes in the same opening tag.

Now let's say you also want to change the font color to blue:

Wilson's face was red from fever.

You just add the color attribute to the same font tag:

color="blue">Wilson's face was red from fever.


Nesting Font Tags

Just for grins, let's say you want to change the color of the word red to...well, red.

Wilson's face was red from fever.

We're going to nest one set of font tags within another, just like you do for formatting tags:

Wilson's face was red from fever.



USING FORMATTING & FONT TAGS

There's really nothing mystical or magical about using more than one kind of tag to format your text.  It's mostly good old-fashioned common sense.

But as a general rule of thumb:

1. If you're using a combination of font and formatting tags to format the same text, put the font tags on the outside, like this:
   
   
2. If some parts of the text will be formatted differently, put the global tags on the outside, and the more specific ones inside.

Now let's try some examples.

Let's say you want a large font size, and want to bold this entire sentence:

We *heart* Sick!Wilson

Your code would look like this:

We *heart* Sick!Wilson

Now just for the heck of it, let's say you also want to change the color of *heart* to fuchsia:

We *heart* Sick!Wilson

Your code would look like this, with the global tags on the outside, and the more specific ones nested inside:

We *heart* Sick!Wilson

See, it's as easy as Wilson falling off a log. ;-)



SPECIAL CHARACTERS

Sometimes you may need to use some characters that aren't on your keyboard, or won't work in certain contexts, like the < and > signs when you're trying to explain how to do something in HTML.

That's where special characters like these come in.

You just substitute the named or numbered code for whatever symbol you need, which usually begins with an ampersand (&) and ends with a semi-colon (;).

For example, let's say you want your text to look like this, where you add an actual heart instead of typing out the word:

We ♥ Sick!Wilson

You just add the special character code for a heart, like this:

We ♥ Sick!Wilson

And if you really want to get creative, you can make the heart red, like this:

We ♥ Sick!Wilson

By adding a font tag to change the color attribute:

We ♥ Sick!Wilson


Non-Breaking Spaces

No matter how many times you hit the space bar, HTML will only give you credit for one space, or none if it's at the beginning of a line.

So if you need a certain number of blank spaces to align some text, or you're an old dinosaur like some of us who learned how to type on a typewriter, and you really, REALLY like having an extra space between sentences to make them easier for you to read, you just need to add what's called a non-breaking space:

Note:  If you hit the space bar immediately after a non-breaking space, HTML will give you credit for two spaces.

So if you want your text to look like this:

This is a test.  This is only a test.  If this had been an actual emergency, we'd be hiding under our desks and eating lots of chocolate.

Your code would look like this:

This is a test. This is only a test. If this had been an actual emergency, we'd be hiding under our desks and eating lots of chocolate.


Line Breaks

Like the space bar, sometimes HTML ignores how many times you hit the Enter key, usually at the beginning or end of an entry.

Fortunately, where there's a will, there's a way.  And we have a lot of will.  Well, that, and a code for a line break.

So let's say you want to leave some space between the last part of your text that's visible from the main page or someone's f-list, and your tags.  You just add a couple of line breaks or so after the last character, like this:

The End

And if LJ wants to be ornery and not give you credit for all of your line breaks, you can add a non-breaking space between them to force the issue. :)

The End

OTHER FORMATTING


Highlighting Text

If you want your text to look like you've marked it with a highlighter, you can borrow some CSS code, where x = the color you want to use.

text

Let's say you want to highlight this text:

Everybody lies.

Your code would look like this:

Everybody lies.


Spoiler Bars

Hiding text under spoiler bars is very similar to highlighting text.  You just need to add a little extra code to make the color of your text the same color as your background.

spoilers

So if you want to hide your text under spoiler bars:

spoilers

Your code would look like this:

spoilers

If you feel that black looks too dark and severe, you can use any color your sick!Wilson heart desires.  You just need to remember to use the same color for both the style (font) AND the background:

Examples:

spoilers

spoilers

spoilers

And if you think your text looks a little too anemic when you scroll over the spoiler bars, and you want to bold it to make it easier to read, like this:

spoilers

You just need to add font-weight: bold; to your code, like this:

font-weight: bold; background-color: #000000;">spoilers


LJ Spoiler Tags

You can also hide text using Livejournal's new spoiler tags.

[Spoiler (click to open)]super-sekrit text

So if you want to hide your text like this:

[Spoiler (click to open)]super-sekrit text

Your code would look like this:

[Spoiler (click to open)]super-sekrit text

And if you want to customize your text, e.g., something like this:

[Pssst! Looky here!]super-sekrit text

Your code would look like this:

[Pssst! Looky here!]super-sekrit text

LISTS


Ordered and Unordered Lists

There are two types of lists in HTML:  ordered (numbered), and unordered (bullet points).

The basic code structure is pretty much the same.  The only difference is that you use an

for ordered lists, and a
for unordered lists.

ORDERED LIST


 
1. list item 1
 
2. list item 2
 
3. list item 3

or
UNORDERED LIST


 
• list item 1
 
• list item 2
 
• list item 3


So if you want to create an ordered list like this:


1. Milk Chocolate
2. Semi-Sweet Chocolate
3. Dark Chocolate


Your code would look like this:


 
1. Milk Chocolate
 
2. Semi-Sweet Chocolate
 
3. Dark Chocolate


Now let's say you want to tighten things up a bit, and get rid of the space at the top and the bottom, as well as between the lines:


1. Milk Chocolate
2. Semi-Sweet Chocolate
3. Dark Chocolate


You just delete the carriage returns at the end of each line and extra spaces like this:


1. Milk Chocolate
2. Semi-Sweet Chocolate
3. Dark Chocolate



Nesting Lists

Sometimes you may want to nest a list within a list.

Using the example in the previous section, let's say you want to list some specific kinds of milk chocolate candy.

To make it easier to see what you're doing, move the closing list item tag () down a bit by pressing the Enter key several times.  That way, you don't accidentally delete any part of the original list and screw up your formatting.


 
1. Milk Chocolate
   
   



2. Semi-Sweet Chocolate
 
3. Dark Chocolate


Now add the code for the new list:


 
1. Milk Chocolate
   
   
      
   • with peanuts
      
   • with Rice Crispies
      
   • with raisins
    
   
   
   



2. Semi-Sweet Chocolate
 
3. Dark Chocolate


See how the unordered list fits inside the two list item tags for the Milk Chocolate part of your ordered list?

Once you're satisfied you have your text exactly like you want it, you can delete any extra spaces you don't need.  That's basically just a process of trial and error, and using the Preview button a lot until you get the hang of this. ;-)

So let's say this is what you want your new and improved list to look like, where there aren't any blank spaces between the bulleted items, but there are between the numbered ones.


1. Milk Chocolate
   
   • with peanuts
   • with Rice Crispies
   • with raisins
2. Semi-Sweet Chocolate
3. Dark Chocolate


Your code might look something like this:


1. Milk Chocolate
   
   • with peanuts
   • with Rice Crispies
   • with raisins


2. Semi-Sweet Chocolate
3. Dark Chocolate



Fake Unordered Lists

If you don't like the way an unordered list indents your text, and adds a blank line at the top and the bottom, like this:


• Item 1
• Item 2
• Item 3


You can make your text look like this, where it lines up nicely against the margin:

• Item 1
• Item 2
• Item 3

By adding the special character code for a bullet point (•) in front of each item, instead of using the real, honest to goodness code for an unordered list.

• Item 1
• Item 2
• Item 3

The only downside to doing it this way is that your text won't automatically line up like a hanging indent if it spills onto the next line like it would if you were using the actual code for an unordered list.  So you might need to add some line breaks and non-breaking spaces to align any text that gets bumped to the next line.

PARAGRAPHS


Centering Text

The easiest way to center text is to use this code:

text

So if you want to center your text like this:

Give us the coffee pot, and no one gets hurt.

Your code would look like this:

Give us the coffee pot, and no one gets hurt.


Right-Aligning or Justifying Text

If you ever need to align some text, the basic code looks like this, where x = left, right, center, or justify.

However, your text probably left aligns in LJ without you having to tell it to do so, and the tag is usually used to center text.  So for all practical purposes, you'd probably only need to use this code to right align or justify text:

text
or
text

What's the difference between a
tag and tag?

Well, for the limited scope of this tutorial, not a whole lot. :)

The
tag is usually used for larger chunks of text, and the tag for smaller chunks.

Wanna try an actual example?  Great!

If you want to right align your text like this:

TRUE! nervous, very, very dreadfully nervous I had been and am; but why WILL you say that I am mad? The disease had sharpened my senses, not destroyed, not dulled them. Above all was the sense of hearing acute. I heard all things in the heaven and in the earth. I heard many things in hell. How then am I mad? Hearken! and observe how healthily, how calmly, I can tell you the whole story.

Your code would look like this:

TRUE! nervous, very, very dreadfully nervous I had been and am; but why WILL you say that I am mad? The disease had sharpened my senses, not destroyed, not dulled them. Above all was the sense of hearing acute. I heard all things in the heaven and in the earth. I heard many things in hell. How then am I mad? Hearken! and observe how healthily, how calmly, I can tell you the whole story.


Blockquote

If you want to indent a section of text, e.g., a fairly lengthy quote, or you just want to set it apart a little to draw attention to something, the basic code looks like this:

text

So if you want your text to look like this:

Marley was dead, to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner. Scrooge signed it. And Scrooge's name was good upon 'Change for anything he chose to put his hand to. Old Marley was as dead as a doornail.

Your code would look like this:

Marley was dead, to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner. Scrooge signed it. And Scrooge's name was good upon 'Change for anything he chose to put his hand to. Old Marley was as dead as a doornail.


Text Boxes

Every once in awhile, you may want to put some info in a text box.  For example, let's say you've created a shiny new prompts table, and you want to make the code available to all of your bestest buds so they can copy and paste it to their LJs.  But you'd like to do so in a way that doesn't look quite so messy and cluttered.

The basic code looks like this, where x = the number of columns (characters that can be displayed lengthwise), and y = the number of rows that are visible without having to scroll down:

text

So if you want your text to look like this:

It was a dark and stormy night; the rain fell in torrents--except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.

Your code would look like this:

It was a dark and stormy night; the rain fell in torrents--except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.

CAVEAT:  If you use Firefox as your browser, it does something screwy, and adds a few extra columns and an extra row to the text box window than what you specified.

So if you absolutely, positively need the display to be a certain number of columns and rows, you might have to adjust your code through a bit of trial and error to offset that little quirk.


Horizontal Lines

This is one of the few HTML codes that doesn't require a closing tag.

If you want to add a horizontal line (rule) to separate some text, you just use the following code.

For example, if you want to add a line between two sections of text like this:

Out of the night that covers me,
Black as the Pit from pole to pole,
I thank whatever gods may be
For my unconquerable soul.

In the fell clutch of circumstance
I have not winced nor cried aloud.
Under the bludgeonings of chance
My head is bloody, but unbowed.

Your code would look like this:

Out of the night that covers me,
Black as the Pit from pole to pole,
I thank whatever gods may be
For my unconquerable soul.

In the fell clutch of circumstance
I have not winced nor cried aloud.
Under the bludgeonings of chance
My head is bloody, but unbowed.

That's all there is to it.

LINKS


Basic Link

To create a link, you just use this code, where x = the URL you want to link to:

text as you want it to appear

So if you want your link to look like this:

I Can Has Cheezburger?

Your code would look like this:

I Can Has Cheezburger?


Formatting a Link

You can combine your link tags with other HTML tags to change the appearance of your text.

For example, if you want to make it easier for people to find a link at the end of an entry to advance to the next chapter of a multi-part fic, you could increase the font size a bit, and/or bold your text:

Chapter 2

You just nest your formatting and/or font tags inside your link tags:

Chapter 2

And if you want to center your link it to make it stand out a little more:

Chapter 2

You add your alignment tags on the outside of your link tags:

Chapter 2


Don't Want Your Link Underlined?

Some custom layouts and LJ themes don't display a line under links.  But if yours does, and you want to get rid of it, like this:

I Can Has Cheezburger?

You just add style="text-decoration: none" to your opening link tag:

style="text-decoration: none">I Can Has Cheezburger?


Bookmarks

If you've ever clicked on a diagnosis tag in the sick_wilson sidebar under PICK YOUR POISON and wound up at that exact spot in our sick!fic archives instead of having to scroll all over the place to find it, you got there via a bookmark.

Bookmarks are an easy way to make it possible to go to a particular place on a web page.  You don't have to pass Go, or collect $200 (although that last part would be kinda nice *g*).

You just need to add this code around the text you want to provide a shortcut to, where "x" = the name you want to give your tag, preferably something short, and that's easy to remember:

text

For example, let's say you want to add a bookmark so you can zip straight to the amnesia fics on this page.


1. First you need to add the opening and closing tags around your text you want to zip to, which in this case would be the diagnosis heading:
   
   Amnesia
   
   Note:  You don't have to include a hard carriage return between the and tags like we did here.  It just adds a blank line so your text stands out a little better. :)
   
   


2. When you preview your changes, you won't actually see the bookmark you just added.  Be not afraid.  You're not supposed to see it, not there anyway.


3. Save your changes.


4. Go to the browser window at the top of your screen where the URL is, which for this example would look like this:
   
   http://sick-wilson.livejournal.com/159988.html
   


5. Now go to the end of the URL and add
   
   • a # sign; and
   • the name you just gave your bookmark
   
   
   http://sick-wilson.livejournal.com/159988.html#amnesia
   
   


6. Go to the end of the new URL (if you're not already there) and press the Enter key.  That should take you directly to where you bookmarked your text. :)


7. Now that you have a direct URL, you can create a link to zip right there:
   
   Amnesia
   
   


8. And look what happens when you click your brand new link.
   
   Amnesia
   
   
Pretty cool, huh?

BONUS TIP:

If you have a rather large block of text you want to zip to, and aren't sure where to put the closing tag for your bookmark, you can add it after the first phrase or sentence, like this:

In the bosom of one of those spacious coves which indent the eastern shore of the Hudson, at that broad expansion of the river denominated by the ancient Dutch navigators the Tappan Zee, and where they always prudently shortened sail and implored the protection of St. Nicholas when they crossed, there lies a small market town or rural port, which by some is called Greensburgh, but which is more generally and properly known by the name of Tarry Town. This name was given, we are told, in former days, by the good housewives of the adjacent country, from the inveterate propensity of their husbands to linger about the village tavern on market days. Be that as it may, I do not vouch for the fact, but merely advert to it, for the sake of being precise and authentic. Not far from this village, perhaps about two miles, there is a little valley or rather lap of land among high hills, which is one of the quietest places in the whole world. A small brook glides through it, with just murmur enough to lull one to repose; and the occasional whistle of a quail or tapping of a woodpecker is almost the only sound that ever breaks in upon the uniform tranquillity.

Tutorial Continued in Part 2