HTML coding for beginners
A number of people I know are new to lj and have expressed interest in using HTML code in their journals/comments. So! Here is dawnglider's guide to HTML coding for beginners - all the code you need to get started with. (I know, this entire post should be cut tagged for length, but that would hinder my explanation of cut tags. Sorry.)
The Utter Basics
The basic idea of coding is that you surround the text you want to alter in two commands, one starting the effect and one finishing it. These commands are in the crocodile bracket things, like so: < >. To start the command you use the two plain brackets, to end it, you add in a forward slash, like so: .
So, if the effect you wanted had the code 'x' and you wanted to apply it to some text, you'd do it like this: some text.
Using the utter basics
'Yes, yes,' you mutter, 'get to the point.'
-If you want to italise your text, insert 'i' in the brackets, like this: .
-If you want to bold your text, insert 'b' in the brackets, like this: .
-If you want to underline your text, insert 'u' in the brackets, like this: .
-Went you want to end the effect, repeat your code but with a forward slash just after the opening bracket: .
Simple, no?
Some other simple code which you may enjoy
-To get those nifty links to someone's lj (like this: dawnglider), use this code:
username goes here. eg. For me, you would use dawnglider. (Make sure you leave the space between 'lj' and 'username' in.)
-Etiquette on LJ generally holds that you 'cut tag' any large posts, large pictures, or content that may disturb people. (A cut tag is a way to hide part of your post, like this:
This sentence was hidden until you clicked on the cut tag. I know, this entire post should be cut tagged, but that would hinder my explanation of cut tags.)
(If you came here via a link or via the memories function, click here to see the post with the cut tags.)
To make a cut tag, use this code: .
If you want to change what the cut tag says, (like this:
Sorry, nothing exciting under here.) use this code: . Note that to end it, just use - you don't need to add in 'text=""'.
As you may have noticed, once you've clicked on a cut tag, the text that was there cannot be seen in the expanded post, so you may want to retype it within the cut tag.
-To make your text small, use the code 'small', like this: .
-To make your text have a strikethrough, use the code 'strike', like this:
Strike is often used in the following way: and I jumped into the air shrieking like a bansheewas a bit startled.
-To centre your text (for a heading, perhaps), use the code 'center', like this: . Note that you must put text and code onto a new line.
Look! Centered text!
More advanced coding
Images
-To put images into your text, do it like this:
,
eg. to insert the lj picture:
,
which gives
.
(To get the image URL, right-click on the image and go down the bottom of the menu that pops up, then click on 'properties'. The URL will appear under 'address' - it's very easy to spot.)
-To add text that will appear when you hover your mouse over it, add 'alt="title or description"' into the code, like this:
-To resize your pictures if they're too big, add 'height="y" width="x"' to the code, like so
.
eg.
(Done with this code:
Note that you can only give size via pixels. It's a good idea to keep the picture in proportion, too. You can see the original pixel size when you get a picture's properties.
Note too that there are rules about 'direct linking' pictures like this.
Every picture on the net is 'hosted' by a server. Whenever you click to view a picture, your computer sends a message to that server and requests it to be sent to you, and the server sends the picture to you. Everytime the server sends a user the picture, it uses bandwidth. This is important because bandwidth does not come free. Too many viewings of the picture can cause a website to run out of bandwidth and crash, or can saddle the owner of a website with a large bill. When you use the 'img src' tag, this counts as a viewing, and is known as 'hotlinking'. It is, in a way, stealing. Therefore, you should only link to images you yourself are hosting.
If you don't have a website yourself, there are a number of free picture hosting services available for free online, such as Photobucket. If you have a paid LJ account, you get photohosting as part of the service.
Lastly, you should cut tag large pictures, or it will make your friends' friends pages very hard to read.
Hyperlinks
-To create hyperlinks to other places, such as Google, use this code: write the text of the link here< /a>. (eg Google.)
Note that that gap between the 'a' and the 'href' should be there.
Warnings
-Make sure that you close your brackets! If you only do the opening code, it will apply that code to your entire post/comment. This can be see in comments that are entirely italised (I'll do one to this post as an example) or other annoying mistakes. Also, it can cause all the posts on your page and your friends' friends pages to display incorrectly. Check to make sure you have closing brackets.
-You can do two effects at once, as in bold italics, but make sure you close the brackets the opposite way to how you opened them, as in: bold italics, not bold italics.
-Cut tag large pictures.
-Do not post pictures you are not hosting in your livejournal (or anywhere else on the net, for that matter).
Troubleshooting
-Are there any spaces in your brackets?
-Make sure you've spelt your code correctly.
-In code with " ", make sure you include the final " (this is especially important in hyperlinks). Otherwise none of the code in your post/comment will work.
-If you've copied the links, make sure you quotation marks are in plain code ("), not curly.
-To make sure that your code is working, hit 'preview'. Sure, you can edit your posts, but that's annoying, and you can't edit comments. (For previewing commments, tick the 'check spelling and preview' box and then hit 'post comment'. Once there, scroll down and hit the 'preview' button and your comment will show with your code. Note that you cannot see the post/comment you are replying to and you cannot change your userpicture while previewing, and you cannot go back, so make sure you have written your comment entirely.)
I think that's all for now. I'll post an 'advanced' session later. Hope you've enjoyed this/found it useful. Those who can't wait/are confused should go to lj's FAQ section, where there is much helpfulness.
The Utter Basics
The basic idea of coding is that you surround the text you want to alter in two commands, one starting the effect and one finishing it. These commands are in the crocodile bracket things, like so: < >. To start the command you use the two plain brackets, to end it, you add in a forward slash, like so: .
So, if the effect you wanted had the code 'x' and you wanted to apply it to some text, you'd do it like this: some text.
Using the utter basics
'Yes, yes,' you mutter, 'get to the point.'
-If you want to italise your text, insert 'i' in the brackets, like this: .
-If you want to bold your text, insert 'b' in the brackets, like this: .
-If you want to underline your text, insert 'u' in the brackets, like this: .
-Went you want to end the effect, repeat your code but with a forward slash just after the opening bracket: .
Simple, no?
Some other simple code which you may enjoy
-To get those nifty links to someone's lj (like this: dawnglider), use this code:
username goes here. eg. For me, you would use dawnglider. (Make sure you leave the space between 'lj' and 'username' in.)
-Etiquette on LJ generally holds that you 'cut tag' any large posts, large pictures, or content that may disturb people. (A cut tag is a way to hide part of your post, like this:
This sentence was hidden until you clicked on the cut tag. I know, this entire post should be cut tagged, but that would hinder my explanation of cut tags.)
(If you came here via a link or via the memories function, click here to see the post with the cut tags.)
To make a cut tag, use this code: .
If you want to change what the cut tag says, (like this:
Sorry, nothing exciting under here.) use this code: . Note that to end it, just use - you don't need to add in 'text=""'.
As you may have noticed, once you've clicked on a cut tag, the text that was there cannot be seen in the expanded post, so you may want to retype it within the cut tag.
-To make your text small, use the code 'small', like this: .
-To make your text have a strikethrough, use the code 'strike', like this:
Strike is often used in the following way: and I jumped into the air shrieking like a bansheewas a bit startled.
-To centre your text (for a heading, perhaps), use the code 'center', like this: . Note that you must put text and code onto a new line.
Look! Centered text!
More advanced coding
Images
-To put images into your text, do it like this:
,
eg. to insert the lj picture:
,
which gives
.
(To get the image URL, right-click on the image and go down the bottom of the menu that pops up, then click on 'properties'. The URL will appear under 'address' - it's very easy to spot.)
-To add text that will appear when you hover your mouse over it, add 'alt="title or description"' into the code, like this:
-To resize your pictures if they're too big, add 'height="y" width="x"' to the code, like so
.
eg.
(Done with this code:
Note that you can only give size via pixels. It's a good idea to keep the picture in proportion, too. You can see the original pixel size when you get a picture's properties.
Note too that there are rules about 'direct linking' pictures like this.
Every picture on the net is 'hosted' by a server. Whenever you click to view a picture, your computer sends a message to that server and requests it to be sent to you, and the server sends the picture to you. Everytime the server sends a user the picture, it uses bandwidth. This is important because bandwidth does not come free. Too many viewings of the picture can cause a website to run out of bandwidth and crash, or can saddle the owner of a website with a large bill. When you use the 'img src' tag, this counts as a viewing, and is known as 'hotlinking'. It is, in a way, stealing. Therefore, you should only link to images you yourself are hosting.
If you don't have a website yourself, there are a number of free picture hosting services available for free online, such as Photobucket. If you have a paid LJ account, you get photohosting as part of the service.
Lastly, you should cut tag large pictures, or it will make your friends' friends pages very hard to read.
Hyperlinks
-To create hyperlinks to other places, such as Google, use this code: write the text of the link here< /a>. (eg Google.)
Note that that gap between the 'a' and the 'href' should be there.
Warnings
-Make sure that you close your brackets! If you only do the opening code, it will apply that code to your entire post/comment. This can be see in comments that are entirely italised (I'll do one to this post as an example) or other annoying mistakes. Also, it can cause all the posts on your page and your friends' friends pages to display incorrectly. Check to make sure you have closing brackets.
-You can do two effects at once, as in bold italics, but make sure you close the brackets the opposite way to how you opened them, as in: bold italics, not bold italics.
-Cut tag large pictures.
-Do not post pictures you are not hosting in your livejournal (or anywhere else on the net, for that matter).
Troubleshooting
-Are there any spaces in your brackets?
-Make sure you've spelt your code correctly.
-In code with " ", make sure you include the final " (this is especially important in hyperlinks). Otherwise none of the code in your post/comment will work.
-If you've copied the links, make sure you quotation marks are in plain code ("), not curly.
-To make sure that your code is working, hit 'preview'. Sure, you can edit your posts, but that's annoying, and you can't edit comments. (For previewing commments, tick the 'check spelling and preview' box and then hit 'post comment'. Once there, scroll down and hit the 'preview' button and your comment will show with your code. Note that you cannot see the post/comment you are replying to and you cannot change your userpicture while previewing, and you cannot go back, so make sure you have written your comment entirely.)
I think that's all for now. I'll post an 'advanced' session later. Hope you've enjoyed this/found it useful. Those who can't wait/are confused should go to lj's FAQ section, where there is much helpfulness.