Jump to...
|
|
New to LiveJournal? Or have a need for HTML for the first time? Don't worry, it's really simple! When I first joined LJ to role-play a few years ago, I didn't have the slightest idea what HTML was. I couldn't even italicize, bold, strike, or center! And the phrase "lj-cut" might as well have been a word in a foreign language. I finally gave in and looked up how to italicize on LJ's FAQ. Even as someone with no coding experience, I was able to easily figure out how to go from there. For awhile I was happy, so very proud of myself for knowing the code to do simple things like italicize, modify lj-cut text, and center lj-cuts. It wasn't until later the next year that I began to realize that I barely touched the surface of the world of HTML. I started to experiment, eager to learn new little tricks. Now, as geeky as it may seem, coding is something I really enjoy. You might not fall in love with coding as much as I have, but guess what? If I could pick up coding, then so can you. It's not difficult to learn at all, and HTML is a very forgiving language. You'll also discover that there are usually at least two different ways to do whatever you want to do, so you can pick the method that works best for you.... like math! (And now the "math" reference has probably scared you off. Whoops.) Before we move onto the basic HTML functions, it would be beneficial (if you plan on eventually expanding your HTML/CSS knowledge) to go over a little vocabulary. If all you're wanting is an intro to basic coding, or a quick reference, you are free to skip this section. Don't get overwhelmed!
HTML: Hypertext Markup Language.
CSS: Cascading Style Sheet. CSS is nothing without HTML; therefore, CSS and HTML often overlap. CSS, quite simply, makes HTML look better and gives it a unique touch. You can do things in CSS that you can't do by just using HTML, so knowing a bit of CSS really gives you an edge. CSS can be incorporated into HTML via two tags: <div> and <span>. We'll cover some basic span and div properties later on in the tutorial, but HTML is the primary focus of this post; if you're into coding, further researching CSS would be a good idea.
ELEMENTS: You probably know these as "greater than" and "less than" signs from elementary school. In HTML, we call them elements. We use elements to enclose our attributes.
ATTRIBUTES: Attributes are what we use to refer to the properties of what we are defining within the elements. Confused? It's really not so bad; here's an example:
Say you want to create a table. You'd start off, of course, by enclosing "table" in elements (blue). In this case, "table" would be your attribute (red).
< table >
Of course you can add additional properties to the main attribute if you wish, but we'll get to that later. It's completely unnecessary at this point.
TAGS: The combination of the attribute and elements together is called the tag. The entire example you see above, both the red and the blue, forms an example tag.
No matter what you use LJ for, you'll more than likely need to italicize something at some point. Luckily, italics are about as basic as it gets. Simply place an i inside elements, followed by the text to italicize. Once you're done italicizing, close off the tag. You can close tags by placing / after the first element. Confused? Yeah, my explanation skills could probably use some improving. I'll show you an example.
BEFORE: I want to italicize the word <i>bee</i> in this sentence.
AFTER: I want to italicize the word bee in this sentence.
Remember what I said about there being at least two ways to do almost everything? Well, that applies here. If you so choose, <em> and </em> have the same effect as <i> and </i>. The <i> tag is definitely the most commonly used of the two, but some CSS experts advise people to use <em> to emphasize text. On LiveJournal (and LJ-related sites), both tags serve the same purpose. If you are ever designing something more complicated (like a web page), however, you might want to look into using the <em> tag.
Bolding is pretty much the same thing as italicizing, only you use a b instead of an i.
BEFORE: I want to bold the word <b>bee</b> in this sentence.
AFTER: I want to bold the word bee in this sentence.
To underline, simply place a "u" within elements.
BEFORE: I want to underline the word <u>bee</u> in this sentence.
AFTER: I want to underline the word bee in this sentence.
To strike, place an "s" within the elements.
BEFORE: I want to strike-through the word <s>bee</s> in this sentence.
AFTER: I want to strike-through the word bee in this sentence.
You can also strike by using the "del" tag or by even writing "delete" or "strike" within the elements instead. You can also write out "italicize" and "bold" if you remember it easier, although I'd really recommend the shorthand.
After italicizing and bolding, you'll probably use the aligning tags the most often. Whether you're making a table or simply wanting to center an lj-cut, you'll need to be familiar with aligning. Did I mention it's perhaps one of the easiest things you can do with HTML to make your entries look prettier?
CENTERING: We'll cover two ways to center. When we get to the "tables" tutorial, you'll see that there is a special way to center those (if you choose) as well.
BEFORE: <p align="center">This is the text you want to center.</p>
AFTER: This is the text you want to center.
LEFT-ALIGNING: You probably won't use this tag very often, as left-aligning is the default. If you're working with tables, however, you'll need to use this code for your text in order to ensure browser compatibility.
BEFORE: <p align="left">This is the text you want to left-align.</p>
AFTER: This is the text you want to left-align.
RIGHT-ALIGNING: If you can left-align, you can certainly right-align. You just - you guessed it - write "right" instead of "left." Total rocket science.
BEFORE: <p align="right">This is the text you want to right-align.</p>
AFTER: This is the text you want to right-align.
There are a few options that are somewhat specific to sites like LJ. (They can also be used on IJ, and other related sites.) The most well-known is the lj-cut.
WTF IS AN LJ-CUT? An lj-cut is probably best explained as a special type of link. The lj-cut will appear on your entry, and your friends/readers will click the cut to see the entire entry. You use lj-cuts under certain circumstances so that you don't annoy all your friends by taking up too much space on their friends page. Generally, it is common courtesy to use an lj-cut if your entry either: a.) is over 2-3 paragraphs (depending on paragraph length); b.) includes a video; c.) includes a large image. Several users on LJ view their friends page at work or at school, so it's just respectful to use an lj-cut.
You don't have to hide your entire entry behind an lj-cut. Several people will display a paragraph or so, then simply place the rest of the entry beneath the cut. You can also end your lj-cut at any time; you could have a paragraph, an lj-cut, and then another paragraph below the cut if you wanted. It's pretty simple.
CODE 1
If you use the following code, the text of your lj-cut will simply say "read more"...
<lj-cut>The part of the entry you want behind the cut goes here. It can be multiple paragraphs, a video, an image, whatever. It can be as long as you want.</lj-cut>
CODE 2
If you use the code below this, put the text you want to imply inside the quotes and then that text will appear as your lj-cut text...
<lj-cut text="your text here">This is the part of the entry you want behind the cut. It could be paragraphs, a video, an image, whatever. It can be as long as you want.</lj-cut>
LINKING TO OTHER USERS/COMMUNITIES: No matter how long you've been on LiveJournal or InsaneJournal (or a similar site), you have probably seen users link to other users and/or communities. The code for this is really simple, and it's somewhat similar to the lj-cut code. The code for linking to users and communities is actually the same, but has different results. See the example(s) below.
LINKING TO A USER
<lj user="lucida"> = ![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif) lucida
LINKING TO A COMMUNITY
<lj user="lovetheundone"> = ![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-community.gif) lovetheundone
LJ-EMBED: lj-embed is what you would use if you wanted to include a YouTube video, for example, in your entry. Simply place lj-embed within elements, then paste the embed code. You obtain the embed code from YouTube (or wherever your video is coming from), and it's usually very easy to locate.
EXAMPLE: BEFORE AND AFTER
gives you...
((You should really watch the video above, by the way. It's quite wonderful.))
LJ-RAW: lj-raw is a LiveJournal specific tags which allows the user(s) to disable auto-formatting for part of, or all of, a journal entry. It's ideal, for example, when you're using large amounts of code and want more control over the spacing of one aspect of your code, but would like the rest to be auto-formatted. If you want to disable auto-formatting completely, you can use the lj-raw tag at the beginning of your entry, and close it off at the very end - similar as to how you would use an lj-cut.
<lj-raw> and </lj-raw>
If you're wanting to disable auto-formatting completely, then checking the "disable auto-formatting" box on the HTML screen would have the same effect as incorporating the lj-raw tag. You can read more about disabled auto-formatting below.
RICH TEXT VS HTML: It is very important for all LJ users to understand that Rich Text is evil. More than likely, you probably started with Rich Text when you very first joined LJ, and if your HTML knowledge is limited, then maybe you're still using it. But here's my advice to you: STOP. Rich Text is notorious for screwing up posts, and - even worse - eating posts. I once spent hours on a character profile, but I was stupid and used Rich Text, and it disappeared.
Maybe you haven't had any personal problems with Rich Text, but why risk it? Honestly, HTML is even more convenient than Rich Text once you get the hang of it. It's not difficult at all! And, for example, italicizing something yourself by simply placing the text within the i tag is a lot quicker than going through and highlighting the text, then clicking on the italicize button every time.
DISABLED AUTO-FORMATTING: On the HTML screen, you'll notice that there's a "Disable Auto-Formatting" option. If you check that option, you must code absolutely everything by hand. The main difference between auto-formatting and disabled auto-formatting (I'm going to call it DAF for short) is that with DAF, you even have to code your spaces. If you'd like to use DAF, use the br tag to start a new line. Each br represents ONE space; therefore, you would need to use the br tag twice in order to form a space between paragraphs.
<br />
DISABLED CUSTOMIZED COMMENT PAGES: Technically, this isn't HTML... but I feel as if it would be useful to go over it here. When customizing your journal theme, there is an option to disable customized comment pages. What this means, is that when your friends click to either leave a comment, read the existing comments, or click one of your lj-cuts, they'll be viewing an unstyled page (like the page I am using now, with all the white space) instead of your journal theme.
Some people (including me) really like this option because it allows for more freedom with coding, and it's also generally cleaner and easier on the eyes.
JOURNAL THEMES: Again, this is not HTML either, so I'm not going to talk much about it. If you don't want to use one of LJ's preexisting journal themes, you can visit a layout community such as mintyapple to find layouts other users have created. The makers of the layouts usually include installing directions. If you know CSS, you can even create your own layout.
When specifying a color in HTML (whether it's a font color, a background color, whatever), you'll more than likely use hexadecimal color codes. Hexadecimal color codes are, as you might have guessed, made up of six letters and/or numbers. There are literally thousands of different color codes, so you're not expected to memorize them or anything, although you'll more than likely memorize the basics. Most people would probably agree that these are the three most common color codes:
#FFFFFF: White
#000000: Black
#CCCCCC: Gray
To find other hexadecimal color codes, you can visit this link or google "hexadecimal color codes" - there are several sites these codes are available on, and it's not difficult to find them at all. You can even use most graphic programs (Photoshop and GIMP, for example) to find codes.
When using hexadecimal codes, always include the # sign before typing (or, more likely, pasting) the code. For those codes that include letters, it doesn't matter if you capitalize them or not. Whatever floats your boat.
DO I HAVE TO USE HEXADECIMAL COLOR CODES? No, but using hexadecimal codes allows for more versatility. Say, for example, you wanted your text to appear in blue. If you specified the font color by simply typing "blue," you would get this. If you used a hexadecimal color code, you could get something like this, this, this, etc. There are hundreds of shades of blue available when you use the codes instead, and one of them might go better with your design. Why limit yourself?
APPLICATION: Now that you know what color codes are, we'll put them in use in the "font" section.
There are several ways to define font face/style, color, and size. In this tutorial, we are going to to talk about defining font with the "font" tag instead of the "span" tag. I'm going to keep this section somewhat brief because there is a wonderful, immensely details concerning more than you EVER wanted to know about fonts on rp_tutorials. Why spend hours explaining the many things you can do with fonts when someone else has already explained it beautifully?
However, what I'm going to explain is all most LJ users will ever have a use for, anyway. If you're interested in more, click the link above.
FONT FACE: Your font face is used to define the font you'd like to use. The most common fonts are generally Times New Roman, Georgia, Arial, Helvetica, Tahoma, and Courier New... but you can certainly branch out if you wish. LJ will more than likely support the font you want to use. However, remember this: It is fine if you want use a "different" font, but just because you can see it doesn't mean your friends can see it. If you download Buffy's font from a fansite and want to write in it, for example, your friends won't be able to see the font unless it is also installed on their computer. This doesn't mean your friends won't be able to read your entry; they will just see your entry in LJ's default font, as compared to the font you're trying to imply. If you want to use a really obscure font for a header or something, I'd just recommend making in image instead.
In the code below, we're going to write in Georgia.
CODE 1
gives you...
This text is all in Georgia.
FONT COLOR: You know what hexadecimal color codes are from the previous section. Here, I'll give you an example of one way you can put them into use. In the code below, we're going to write in purple. The code for the shade of purple we're going to write in is: #660099.
THE CODE
gives you...
This text is all in purple.
FONT SIZE: There are several ways to incorporate font size. I'll show you three different examples.
TO BE CONTINUED IN THE VERY NEAR FUTURE.
Chances are, you already know what links are, even if you don't know the code for links. If you don't know what links are, then there are probably a few things you need to learn before you attempt HTML.
Links are really easy. We'll start by going over the standard link code, then we'll start the customizations. (Technically, the type of links we're talking about in this section are called "absolute links.") Also: it is highly recommended for you to read the section on FONT PROPERTIES before looking at this section. In the codes below, only modify the colored text and do not remove any quotation marks!
BEFORE: <a href="http://lucida.livejournal.com">here</a>
AFTER: here
Well, there's your standardized link code. But isn't it ugly? If you want to "pretty it up," use the color codes and font properties explained above. Simply specify the font and color of the text of your link directly before that part of code. If you wanted your code to display in Georgia, for example, and show up in green? You would use the code below...
BEFORE: <a href="http://lucida.livejournal.com"><font color="#55AE3A" face="Georgia">here</a>
AFTER: here
Now, those are just the very basics. I'll get into more about how to specify font color/face/family etc when we get to the div and span properties. For now, I'm just going to expand a little bit. So, here are some additional HTML properties.
TITLE - When you hover over the link, the text you specify using the title property will be displayed.
ALT - Alternate text. This is predominately an accessibility feature. Screen readers---such as the ones used by blind people---access this information.
BEFORE: <a href="http://lucida.livejournal.com" title="text you want to imply" alt="brief description of image">here</a>
AFTER: here
^ hover over the link!
... and then, of course, you can further customize your links by using inline CSS!
As I keep saying, we'll go over inline CSS in more detail when I get to div and span properties. But I'm going to use this as an opportunity to go ahead and tell you how to decorate your links. Now. If you're creating CSS for your journal, you can modify the way your links look when you hover, when they're active, when they're visited, etc; but unfortunately, you can't do that for regular LJ entries. (Or profile codes, for that matter.) Why? Because some of LJ's customization options suck. In order to modify a:hover/a:active/a:visited, you need to use external or embedded styles. (Know how you can select the Custom CSS option when you're customizing your journal, and there is a "link to external stylesheet" option? Well, that's what that is for.) If you place CSS directly in the "custom CSS" box, you're using embedded CSS.
External and embedded styles basically make life 50x easier. But, alas! If we want to make our LJ entries pretty, and if you want to use more than basic HTML, then you have to use inline styles. Inline styles, as you've surely guessed by now, are a way of incorporating CSS into basic HTML. Inline styles can be tedious, though, because you have to define the style for every single freaking HTML tag that you want it to apply to. Then again... if you don't have much coding experience outside of HTML, you might be used to doing that anyway. There ARE benefits of using inline styles, though - namely, inline styles have the highest priority in the cascade. (Remember, CSS stands for Cascading Style Sheet. Staring to see why?) ... but this is a tutorial for another day.
SO. INLINE STYLES WITH LINKS!
When defining styles with your links in an LJ entry, know that you can only work with a:link---that is, the link at its most basic form. No cool effects when you hover (unless you think the title attribute is cool for whatever reason), or when it's active, or whatever else. Sad, right?
But what we can do is get rid of that awful default underline. If you're just using the default link settings -- that is, you're not customizing the color or anything -- then the underline looks fine, right? But if you change the color to say, green, and have this frickin' ugly underline that doesn't even match, then it is an entirely different story.
My advice? Make the underline disappear (if you bold the link, I think it's still pretty obvious that it is a link) or (this is my favorite of the 2 options) code the underline to be the same color as the text. Simple, right?
Set up your link like normal. Then, go through and add inline styles so that the text-decoration is set to 'none'. If you don't want the underline to show up, then you stop there. However, if you're wanting the underline to be the same color as your link text, then you have an additional step. Simply surround the text of your link in underline elements. There is one thing worth noting, though: you have to put your opening underline tag after your opening font tag. Otherwise, the underline won't be the same color because, well, you technically haven't specified the color yet. Make sense?
Here's an example -
BEFORE: <a href="http://lucida.livejournal.com" style="text-decoration:none;"><font color="#6A287E"><u>here</u></font></a>
AFTER: here
Notice how the text and the underline are both purple? Isn't' it much more aesthetically pleasing?
There are a few other properties that you can enter instead of 'underline' if you want (such as overline and line-through), but I don't recommend them unless you're using embedded or external CSS. Why? Because I think they look tacky and scream: "HEY LOOK I JUST FIGURED OUT HOW TO DO THIS. I'M SO SMART." But that's just my opinion. :P Mess around with them if you want! (But like I said, they are amazing for embedded/external styles. Hover effects. ♥)
If you've been on a site like LiveJournal or InsaneJournal for very long at all, then you probably didn't even need to look at the LINK PROPERTIES section. Really, how many people haven't done links? Even if you use Rich Text to post entries (which, again, is BAD), you probably know the HTML for links because you've had to link to things in comments.
So, here's the good news: Anchors are even easier than links.
How? Well, first, let me tell you this: anchors are, for all intents and purpose a special type of link. If you know the code to make links, you know 1/2 of the process of making anchors. While you usually have to look up sites and copy/paste long URLs for absolute links, however, none of that work is necessary when creating anchors. You decide what the "url" is.
Anytime you click a "return to top" link, you're using an anchor. If you used the "jump to..." list on this HTML guide, you've used an anchor. If you clicked the LINK PROPERTIES link I included earlier in this section, you've used an anchor.
- An anchor links to a specific section on a specific webpage. Typically, anchors link to a specific section that is on the same page as the link. Re: "return to top."
- However, anchors can also link to a specific section on another webpage. Unlike "traditional" anchors, this type would require both a URL and the name of your anchor. We'll cover an example of this in a little bit.
All anchors require two parts. First, you must place and name your anchor (yeah, they're called anchors for a reason). Second, you must link to your anchor (hint: you already know the code for this).
PLACING YOUR ANCHOR: Wherever you want your text to lead, is where you place the anchor. For example, place the anchor at the very beginning of your entry if you want a "return to top" link.
NAMING YOUR ANCHOR: It really doesn't matter what you choose to name your anchor, since the only place anyone (other than you) will see the name of the anchor is in the URL. For simplicity's sake, however, it is a good idea to keep anchor names: a.) short; and b.) relevant.
If you wish to "return to top," naming your anchor would probably look like this:
<a name="top">
Again, this is just half the process of creating an anchor.
LINKING TO YOUR ANCHOR: In the example below, all you need to do is replace the green and pink text with the name of your anchor and with the text that you wish to display, respectively. Note that this is the same code used for links, with one exception: there is a # sign. VERY IMPORTANT: Do not remove the # sign! The # sign is the difference between a link code and an anchor code.
<a href="#top">return to top</a>
The only time you will need to use a URL for anchors is when you are wishing to link to an anchor on another page. Say you wanted to link someone to the anchor section of my HTML guide, for example. All you would need to do is use a combination of the regular link code, and the anchor code. In short, you would link to this entry, and then include the # sign, followed by the appropriate anchor name. In this case, the coding would look like this:
<a href="http://lucida.livejournal.com#anchors">text</a>
You can do several things with images in HTML. Most of the time, you'll probably just insert images; however, you can also resize images and add image borders using HTML.
INSERTING IMAGES: Inserting images is easy. Just use img src and then link to your image. Your image is probably hosted on a site such as Photobucket or ImageShack, but you can also upload images to your LJ Scrapbook as long as you don't have a Basic account.
THE CODE
To show how this works, I'm going to be using a lovely image made by collapsingnight.
gives you...
RESIZING IMAGES: The code to resize images is similar to the code above, only you include "width" and "height" within the tag. The numbers you enter in width and height are in px by default. If I wanted to make this image 300 x 200, I would use the code below.
THE CODE
gives you...
ADDING IMAGE BORDERS: In the code below, I'm going to show you how to add solid, dotted, and dashed borders to the image using HTML. The borders are going to be a shade of blue (#6699CC) and 5px. If you want a different color or px size, simply replace those attributes with your own color code/px size.
SOLID IMAGE BORDER
gives you...
DOTTED IMAGE BORDER
gives you...
DASHED IMAGE BORDER
gives you...
There are 3 types of lists. All of them are pretty self-explanatory:
- Ordered Lists
- Ordered lists, well, put things in numerical order. Ordered lists require two tags: ol (ordered list) and li (list item).
- Unordered Lists
- Unordered lists bullet each item by default. You can also configure unordered lists to use squares, images, whatever. Unordered lists require two tags: ul (unordered list) and li (list item, same as above).
- Definition Lists
- I'm using a definition list to talk about the different types of lists. They are different from unordered and ordered lists in a few different ways. Besides the obvious (surely you see the aesthetic differences), they require at least three tags to configure: dl (definition list), dt (definition term), and dd (definition description). If you wish to bullet or number the definition terms, you can use a definition/ordered or definition/unordered list combination.
Have you ever seen users on LJ use symbols such as hearts, diamonds, clubs, spades, stars, etc? For most of the symbols, you have to use google to find the symbols and copy/paste. There are some symbols you can insert by simply using a code, though.
INSTRUCTIONS: Rather than using elements, start off with & and end the code with a semi-colon. Your code should look something like this:
&code;
Do not use elements! Enter in the format above or it will not work! Below, I'll list the symbols you can incorporate using code, and the text you will need to use.
HEARTS: ♥ ; hearts
DIAMONDS: ♦ ; diams
CLUBS: ♣ ; clubs
SPADES: ♠ ; spades
If you are wishing to use a different symbol (such as a star), you will need to copy/paste or look up an ALT code. If you're using a Mac, you'll use either OPTION or OPTION/SHIFT codes instead of ALT codes.
| | | | | | | | | | | | | | | | | | | |
|
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
no subject
no subject
no subject
I do have a question - I tried to use the hover text for a translation, but Dreamwidth seems to dislike if there's spaces in the title's string. Do you know if there's a reason for that, and if it's possible to fix it?