Entry tags:

tools: html

We all know HTML can be a tricky beast, so now it's been broken down for you. Welcome to another resource of information. Hopefully you find it as lovable as we do. :)

I've found that when you need to learn something is when you learn it best. HTML is a quirky thing and sometimes the smallest of problems can cause your whole page to be off. But that's why we're here, setting you up with some of the simple things and a few great pages that can guide and direct you where we cannot. If you're the type of person that knows how to do most things in HTML, then this isn't a page you really need to be concerned with. If you're the type of person who has to run to the FAQ page (every day) to find how to make an Lj-cut, this is the page for you! YAY.

Firstly, HTML stands for HyperText Markup Language. It doesn't help you anywhere in life except for trivia and the odd text to know that. On IJ, LJ, Scribbld, etc, it's just plain old HTML.

Secondly, I'm going to challenge you to remember these codes for later use instead of bookmarking this page. Because it's so helpful to be able to scoot through a tag instead of spending five-ten extra minutes hopping through other pages for the codes. If I can do it (and I can), so can you. ;) I BELIEVE IN YOU.

Thirdly, I am done speaking with numbers ending in ly.

Here starts your list of mass HTML things that you'll use in every day life of role-playing, blogging, cdjing, etc.

Adjusting Text

<i>Your text here</i> This will make your text italicized so you can speak with emphasis.

<b>Your text here</b> This will make your text bolded so you can speak boldly or with sharp emphasis. It's fun to use with ALL CAPS because then it really looks LIKE YOU ARE YELLING AT SOMEONE WHICH IS LOTS OF FUN.

<u>Your text here</u> This will underline your text so that you can use it in reference to emphatic points of speech or book titles, song titles, character titles, your mom titles, any kind of whatever you'd like to underline. Spifftastic!

<s>Your text here</s> This will strikethrough your text so that people 'cannot see it'. It's harder to read on phones, apparently, but it's really mostly for sarcasm, crossing off lists, and in character comments. I once wrote a whole journal in strikethroughs and it increases interest because you've taken the time to strikethrough, so people will take the time to read what you've said. Oddly. I like to strikethrough everything I say. Ask my friends. They hate me too.

_{Your text here} This will make your text lower and smaller than your normal text. _{If you wanted to make creepy comments}Or whatever you'd be using it for, the code is simple and available.

^{Your text here} This will make your text higher and smaller than your normal text. ^{If you wanted to use this after a number}It could look like a power to the third degree. Or whatever you math nerds call it. 10³!!

<tt>Your text here</tt> This will apparently make your font look as though it's been tackled by a typewriter. It works on other sites, but I have yet to attempt it on Insanejournal, so we shall see. -evil cackle- Obviously, now that I have posted this, it works. Cool trick, homeslice!

<i><b><u>Your text here</i></b></u> This will combine three of the above codes so that your statements is SUPREMELY EMPHATIC in whatever you want to say.

Adjusting Font

There are many things you can do with your font. I have a friend who could use her character to write entirely in glittery letters if she felt so inclined. But for some of us, font is a tricky kind of thing. It is annoying when our fonts are boring and mundane. So now, I give you codes to solve the problem of mediocrity and similarity. BEHOLD: Font Codes!

<font color="your color here">Your Text Here</font> This will change your text to any color that it recognizes online. If you have an obscure color from Photoshop or something, sometimes it doesn't work. Fail. :/ If you want to use solid colors, you can type in the name of the color. Red, Green, Purple, Blue, etc. If you want to step outside of your box, go ahead and Google hex codes. I use all of my colors from extensive googling. If you want your fonts to match and be perfectly perfect with your pictures, here is a place that can keep you wonderfully organized.

As an added note, a hex code is a six digit number. It might look like 000000 which is the color black or FFFFFF which is the color white. It could also be a mixture of numbers and letters like 05CDA2, which could possibly be any color under the sun. I made that one up off the top of my head. If you're short a digit of the code, it will not show the color you picked. It might not show a color at all. Equally, if you do not add the # number symbol in front of your six digits and between the two "" quotations marks, it will not show the proper color.

<font size="YourNumberHere">Your text here</font> It's always awkward when you come from literal text sizes to internet text sizes. Sometimes they'll accept a reasonable answer of 12 font size, double spaced, Times New Roman. Sometimes, it will mock you by showing you size fourteen text, though you've only listed the number 3. After testing my theory on Insanejournal with and without the quotation marks, I've found that using the quotation marks don't really affect things either way. They are purely for decoration with this code. For consistency's sake, I keep them in.

1 2 3 4 5 6 7

You can also get bigger or smaller fonts with the codes <small>Your text here</small> and <big>Your text here</big>. These are helpful for titles and small comments under bigger comments in journals. Like when a character is being sheepish about something and trying to be quiet about something they said. The small font code is effective there.

<font face="YourFontHere">Your text here</font> This code will allow you to change your font to anything internet approved. A few would be: Comic Sans, Georgia, Times New Roman, Arial, Verdana, and Courier New. A lot of Microsoft Word fonts are readily available online. It's just a bit of trial and error, really.

<font face="YourFontHere" size="YourSizeHere" color="YourColorHere">Your Text Here</font> This is how you combine everything. When you do this, it makes sure that you weren't individually marking each thing you say with another <font> code.

You can also use what is called a span code. I use them for my games now that I'm actually trying to make sure that everything looks right. <span style="font-size: Yournumberherepx; font-family: yourfonthere; color:yourcolorhere; line-height: yournumberherepx;">Your text here</span> The cool thing about spans are that they let you actually control your font size. If you want a 12 font, Times New Roman, double spaced--you have it. Because it runs off of numbers like Microsoft Word or Pages might. It's very helpful and the results are pretty. I can't take credit for this code because it was actually given to me by ~chaperoned when I received critique on one of my games awhile back. Now, I bequeath it unto you. Go forth and rejoice.

Quirky Text Things

<marquee>Your Text Here</marquee> This will make your text scroll endlessly and be absolutely obnoxious driving everyone you know and love insane. I put it here because I anticipate someone in the future wanting to know how to do it. Otherwise, I would leave it off the list.

<span style="background: yourcolorhere; color: yourcolorhere;">Your Text Here</span> This allows you to have a background for your text. So, if you wanted your font to be pink and the background to be green, you would Do it like this so that you can also annoy people with how obnoxious you want your text to be. It's nice, however, for highlight things in documents. It can be very useful when you want it to be.

<p align=direction>Your text here</p> This is a nifty code. This is very, very helpful when you want to put your stuff in a specific place and have it stay there. Instead of 'direction' you are going to put LEFT, RIGHT, or CENTER.

This makes your text stay to the left.

This makes your text perfectly center.

And this makes your text cling to the right side.

If you want to do it a different/easier way, you can use <center>Your text here.</center> for the centering codes. It's a lot easier than typing all of the align code. ;)

<p> One of the few things that doesn't need an end tag like you've seen throughout already. This is a large space. When you use it, it makes your stuff jump down quite a bit. Here is

how you use it.

<br> or <br /> This is another tag that doesn't need an ending. This is a smaller space, so when you use it, it's not as drastic as the above tag. It will make your stuff jump down a little bit. Here is
how you use it.

<span style="font-size: Yournumberherepx; font-family: yourfonthere; color:yourcolorhere; line-height: yournumberherepx; letter-spacing: yournumberherepx;">Your text here</span> This will allow you to add spacing between the letters. It takes a bit of trial and error to get it how you want it to be. This code is also what a lot of people use to overlap their lyrics in LJ-cuts.

YOUR LOVE IS A SYMPHONY ALL AROUND ME RUNNING THROUGH ME OH YOUR LOVE IS A MELODY UNDERNEATH ME RUNNING TO ME OH YOUR LOVE IS A SONG

The bigger the letters and the smaller the line-height, the more they overlap. If you're going to do this, you'd be better off to make sure that you use the letter-spacing so that the words are legible.

<dl><dd>Your Intended Indented Text Here</dl>

This is especially helpful when you realize that pressing 'enter' a hundred times isn't helping you out at all. Instead of worrying about how to make a space & n b s p ; [without the spaces in between] several times over, this code will ensure that want you want to be indented will stay that way without the hassle!

Images and Linking Things

<img src="YourURLHere"> Here is the code for putting up a picture. This will directly post a picture wherever you use the code.

<a href="YourURLHere"><img src="YourPictureURLHere"></a> This is the code that will let you have a picture act as your link. So instead of having a quote that you don't care about, you can use a gif of a puppy licking ice cream off of a kitten to direct people to your CDJ. Surprise!

<a href="YourURLHere"><img src="YourURLhere" height= width=></a> If you have gone one a site, clicked a smaller picture (called a thumbnail) and had it open into a larger window with the larger picture, then you know what I'm talking about. If not, then you're learning more than you expected to! This image has been shrunk to fit here, but when you click on it, it expands to its correct size.

[No Code Necessary] A lot of people will do that 'I DON'T KNOW, PLEASE HELP ME NAO' dance because they do not know how to put images next to each other. If there is not text underneath them, just let the code run into itself. <img src="YourURLHere"><img src="YourURLHere"> Eventually, however, the images will drop to the next line or space out your page, depending. If you want text beneath them, you need to put the pictures into a table of which I am not a specialist and you can run off and bug ~rp_tutorials in the tag section.

<lj-cut text="Your Text Here">Your text here</lj-cut> This is an LJ Cut. It is your friend. It will let you do many magical things like hide your words in your document so that people have to click on the cut tag to get into what you have to say. It also makes sure that if your stuff is too long, people don't yell at you for not putting up a cut tag. Also, if you do not put your pictures/movies/etc behind a cut, a lot of people will maul you in communities. It's just common courtesy .

<a href="YourURLHere">Your Link Text Here</a> Links are not a complicated thing. They are simple and easy. They are not complicated unless you mess up the code. Henceforth, if you feel like making every word of your latest entry a link of its own, you can do it. It will be obnoxious and terrifying, but possible.

<STYLE type="text/css"><!--
A:link{color:COLOR;text-decoration:none}
A:visited{color:COLOR;text-decoration:none}
A:active{color:COLOR;text-decoration:none}
A:hover{color:COLOR;text-decoration:none}
--></STYLE> I stole this off of Funky Chickens because it's a cool code and I like to use it when I can. Instead of having silly colored links, you can have all of your links be the same color of your choosing. Woot!

<textarea>Your text here</textarea> Sometimes I like to use textareas for giving other people html code for their own websites and what not. It's helpful. It's also something you could use to make sure someone has the right info to credit you for icons or ~whatever you might want credit for. You can also use it to spread code for easy copying and pasting with advertisements. Helpful!

<li> This code will let you make bullet points for a list. It's a cool code because it's fairly easy to remember. If you want to use symbols instead of this code, you need to Google for yourself. Unless someone supplies them and then I will happily link for you. The symbols I tend to use are ASCII characters.



Other Helpful Sites
There are many sites that automatically have things listed for you to go over. It's just a matter of clicking through to what you want to find. If you could locate Insanejournal, you can locate code that a site supplied for you might have lying around.

Funky Chickens -- Dudes. This is one of the best sites EVER. They have all of your basic code and all of the harder code that I might not have listed. It's pretty much labeled, so just click around until you find what you're after.

Lissa Explains it All HTML of the best kind. Lissa is a brilliant woman that knows her html. She'll guide you on the right path to make sure your code is clean and proper!

W3sSchools.com This appears to be a site that will help you learn how to use HTML and make your own product from it. Again, LEARN this stuff! If you can recite an image code, a cut-tag, and a link code, you can go far, young grasshoppers!


In Conclusion

If you have questions concerning code or problems getting yours to work, feel free to drop a comment below and someone will get back to you as soon as possible. :) Good luck coding!!