InsaneJournal

Tweak says, "Baby, baby, look at the baby!"

jadis is the embodiment of all evil (embodimentof) wrote in rp_tutorials,
@ 2011-04-06 01:47:00

Entry tags:

resources: tutorials, tools: html

Basic HTML Tutorial

This is a quick basic tutorial that I put together for a friend who just recently joined IJ. It just covers a few things like editing font size, color, family, letter spacing, line height, linking, etc. Just some really basic things and nothing all that fancy.

IJ HTML TUTORIAL

SECTION ONE: EDITING FONTS

• • • CHANGING FONT SIZE
The font size rule sets the size of the fonts in the element. Basically all you're doing for this is place font size inside of the tag elements and setting it equal to the font size in numbers. For example:

Your code will look like this when you type it: HELLO and produces HELLO.

You can also go smaller: Hi there will look like Hi there.

• • • CHANGING FONT COLOR
The font color rule works almost exactly the same way that font size does. Instead of numbers, you'll have to set the value equal to the hex code for the color you want the text to appear as.

Your code will look like this when you type it: HELLO and produces HELLO.

#660066 is the hex-code for that particular shade of purple. There are tons of sites that have hex code color pallets. Like this one.

• • • CHANGING FONT FACE
The font face rule changes the font family of your text. The default for IJ is Verdana, but some of the fonts you can change it to include Georgia, Times New Roman, Helvetica, Courier New, Century Gothic, Arial, and Arial Black.

Your code should look like this when you type it: HELLO and produces HELLO.

Another example with courier new font: HELLO produces HELLO.

• • • COMBINATIONS
You can also combine these elements into one entire tag. For example, if you wanted to change the font face and font size of your text:

Your code should look like this when you type it: HELLO and produces HELLO.

Or an example of changing font face, size, and color: HELLO becomes HELLO.

• • • EXTRA NOTES
Make sure to always close your tags after the font you want effect. By 'closing a tag' I mean adding at the end of the text you want to change.

IJ HTML TUTORIAL

SECTION ONE 1/2: EDITING FONTS--GETTIN TRICKY WITH IT

The previous mentioned tutorial was for the most basic of font editing. You can also get more complex with it by using a slightly different code. That's Text Text Text

Using font style allows you to exercise a more diverse range of manipulations on your text such as:

letter-spacing: how far apart the letters of each word are
line-height: the space between lines of text
text-transform: rendering the text in ALL CAPS or all lowercase

among others. Here are some codes and examples:

• • • LETTER SPACING
Text Text Text becomes Text Text Text

Note that the size of the spaces are defined by 'px'. You can make it bigger or smaller by increasing or decreasing the pix size. You can also use negative numbers. For example:

Text Text Text becomes Text Text Text

• • • LINE HEIGHT
Gouda is a yellow cheese made from cow's milk. The cheese is named after the city of Gouda in the Netherlands, but its name is not protected. However, the European Commission has confirmed that Gouda Holland is to be protected (although Gouda will not). Cheese under the name of Gouda is currently made and sold all around the world.

becomes

Gouda is a yellow cheese made from cow's milk. The cheese is named after the city of Gouda in the Netherlands, but its name is not protected. However, the European Commission has confirmed that Gouda Holland is to be protected (although Gouda will not). Cheese under the name of Gouda is currently made and sold all around the world.

Just like with letter-spacing, the size is defined by 'px'. The greater the number of px the larger the space between the lines of text. The smaller the number, the smaller the space between the lines. For example:

Gouda is a yellow cheese made from cow's milk. The cheese is named after the city of Gouda in the Netherlands, but its name is not protected. However, the European Commission has confirmed that Gouda Holland is to be protected (although Gouda will not). Cheese under the name of Gouda is currently made and sold all around the world.

becomes

Gouda is a yellow cheese made from cow's milk. The cheese is named after the city of Gouda in the Netherlands, but its name is not protected. However, the European Commission has confirmed that Gouda Holland is to be protected (although Gouda will not). Cheese under the name of Gouda is currently made and sold all around the world.

• • • TEXT TRANSFORM
Text Text Text becomes Text Text Text

You can also substitute 'uppercase' for 'lowercase' to make the font all lower letters. For example:

TExT tEXt TEXt becomes TExT tEXt TEXt

• • • COMBINATIONS
When combining elements using the font style tag, it's slightly different then using the basic text alteration tag described in the first part of this tutorial. When using Text Text Text, each separate element must be separated by ;.

For example, lets say you wanted to use both text transform and letter spacing.

The code would look like: Text Text Text and becomes Text Text Text

IJ HTML TUTORIAL

SECTION TWO: LINKS & LINKING

• • • LINKING TO OTHER PAGES
The code for making links is <a href="link url here">Link Text Here</a>. a stands for anchor, and the href="" is asking for a location to link to. The </a> is the closing tag. The text between the tags is what will show up on your Web page as a link. So, if you would like to link to a site, you would place the url inside the quote marks. Your code would look like:

<a href="http://asylums.insanejournal.com/rp_tutorials/162431.html">HTML TUTORIAL</a>

It will show up like this: HTML TUTORIAL

Another example: <a href="http://insanejournal.com/">Awesome Site</a> becomes Awesome Site

• • • TURNING IMAGES INTO LINKS
You can also make images into links. For example, try clicking on:

The concept is almost identical to the previous linking code. Instead of text between the tags, however, you put <img src="link to image here"> . Your code would look like:

<a href="http://embodimentof.insanejournal.com/"><img src="http://img138.imageshack.us/img138/2619/1155685.png"></a>

It will show up like this:

• • • IJ USER LINKING
IJ has a specific code which allows you to create a IJ site specific link to other journals or asylums. It looks like this:

embodimentof. Clicking on the icon takes you to the user profile page and clicking on the name takes you to the most recent entries page. It also works for asylums:

rp_tutorials

The code for this looks like: <lj user="embodimentof"> and will show up as

embodimentof

The code is exactly the same for asylums. For example: <lj user="asylum_promo"> will show up as

asylum_promo

IJ HTML TUTORIAL

SECTION THREE: OTHER FUN THINGS

• • • MARQUEE
You can create a scrolling marquee font with the <marquee> tag. For example:

<marquee>This Is Your Scrolling Text</marquee> becomes
This Is Your Scrolling Text

• • • BLOCKQUOTE
Blockquote indents the text within the tags. For example:

Gouda is a yellow cheese made from cow's milk. The cheese is named after the city of Gouda in the Netherlands, but its name is not protected.
<blockquote>However, the European Commission has confirmed that Gouda Holland is to be protected (although Gouda will not). Cheese under the name of Gouda is currently made and sold all around the world.</blockquote>

becomes

Gouda is a yellow cheese made from cow's milk. The cheese is named after the city of Gouda in the Netherlands, but its name is not protected.

However, the European Commission has confirmed that Gouda Holland is to be protected (although Gouda will not). Cheese under the name of Gouda is currently made and sold all around the world.

• • • DIV ALIGN
The div tag is used when you want to left-align, right-align, or justify your text. Your code will look like:

<div align="right">This Is Your Right Aligned Text</div> becomes

This Is Your Right Aligned Text

<div align="left">This Is Your Right Aligned Text</div> becomes

This Is Your Left Aligned Text

<div align="justify">Gouda is a yellow cheese made from cow's milk. The cheese is named after the city of Gouda in the Netherlands, but its name is not protected. However, the European Commission has confirmed that Gouda Holland is to be protected (although Gouda will not). Cheese under the name of Gouda is currently made and sold all around the world.</div>

becomes

Gouda is a yellow cheese made from cow's milk. The cheese is named after the city of Gouda in the Netherlands, but its name is not protected. However, the European Commission has confirmed that Gouda Holland is to be protected (although Gouda will not). Cheese under the name of Gouda is currently made and sold all around the world.

IJ HTML TUTORIAL

SECTION FOUR: HANDY LINKS

• • • RP TUTORIALS

rp_tutorials is an extremely handy site. It has tutorials on codes, premade journal layouts, premade tables, and is also a place where you can ask questions or get help.

• • • HEX CODE COLOR GENERATOR
Hex Code Color Generator is another good tool for getting hex codes for colors.

• • • IMAGE HOSTING
TinyPic & Imageshack are both two good free image hosting sites.

	o hai hammertech 2011-04-06 05:57 am UTC (link)
	(Reply to this)

	advertisemyrp 2011-04-06 11:09 am UTC (link)
	This is incredibly helpful for newbies and even some veterans. Thank you for posting. Note though: your link to the hex code site doesn't work. (Reply to this)