My [quick&dirty] guide to HTML in LJ
I was talking to mrsquizzical a while ago and she mentioned that she didn't know how to put images in the comments, because she uses rich text for entries. FOR SHAME! ;D
Anyway, it prompted me to do something about it, and so, here:
complications_g's [quick&dirty] guide to HTML in LJ
HTML stands for Hyper Text Markup Language, if you wanted to know. Tags are the things between the angle brackets < > and attributes are the things you can use to be more specific with the tags. And that's about as technical as I'm gonna get here. ;) If you want to know more, there are a bunch of great tutorials around the web, but I like this one and this one. Also, HTML uses American spellings and will not work if it is spelled with British English. So don't go adding 'u' to 'color', because it won't recognise it as HTML, and will create errors. Also, I'm pretty sure it doesn't matter if you use uppercase or lowercase letters but lowercase is the norm [and looks nicer], I've found.
I think HTML is pretty easy to learn because the tags are pretty obvious.
Here's a table of a few things I think might be useful for livejournal.
ps. Please excuse my shameless pimping. ;D
DESCRIPTIONHTMLEXAMPLENOTES
link to an lj userUSERNAMEcomplications_g
link to an lj commCOMM NAMEmintyhelpYou can also just use the username code for communities too, but I like to be specific, just in case.
italic textTEXTThis is italicised text.
bold textTEXTThis is bolded text.
underlined textTEXTThis is underlined text.It's also bold here because of code I have in my stylesheet, it won't be usually.
strikethrough textTEXTThis is struckthrough
create a link LINK TEXTThis is a link!
show an image
show a linked image
The border="0" gets rid of the border that will otherwise show around linked images.
heart symbol♥♥There are a bunch more of little symbols you can use, and there's a cool list of some here.
scrolling textTEXTThis is scrolling text!Btw, these three can get very annoying, depending on how, and how often you use them.
flashing textTEXTThis is flashing text!
sparkle textTEXTThis is sparkly text.create a textboxTEXTThis is text! In a textbox! This is text! In a textbox! This is text! In a textbox! This is text! In a textbox!Extremely basic. See below for more.
These are just the basic versions, but you can combine all sort of HTML. But, be careful when merging HTML because you have to have the opening and closing tags in the right order for it to work. The ordering is; basically each new tag has to wrap around the previous tag fully. My descriptions sucks, I know, here:
GoodBad
This will successfully bold and italicise the text.This will create an error.
For example, for text with the font tag, you can change the colour, change the font, make it bigger and smaller, give it hover text or a background [like the sparkle text above], and probably more I can't remember right now. ;)
To change the colour of the text:
TEXT = This text is red! or, if you don't want to use hex codes, there is a list of standard recognised colour names you can use instead.
TEXT = This text is also red!
The standard colours are: Black, Gray, Silver, White, Navy, Blue, Teal, Aqua, Purple, Maroon, Red, Fuchsia, Green, Lime, Olive and Yellow. And there's a brilliant list here, at COLOURlovers, of HTML colour hex codes.
To change the font:
This font is Times New Roman. = This font is Times New Roman.
A really great website for fonts is Typetester. It has three columns and you can preview the look of separate fonts [in different styles] and compare. It also shows the fonts in categories: safe list, Win defaults, Mac defaults, Vista defaults and then all the fonts you have installed on your computer. It's a brilliant site, fun to play around with.
To change the size of the text:
There are actually a few ways to do this. You can either just define a number or increase or decrease the default size, or just use big and small.
Font size 1 = Font size 1
Font size 2 = Font size 2
Font size 3 = Font size 3
Font size +1 = Font size +1
Font size +2 = Font size +2
Font size -1 = Font size -1
Font size -2 = Font size -2
This text is big! = This text is big!
This text is small! = This text is small!
To add hover text to something [a link, an image, regular text]:
A link:
LINK TEXT = Google
An image:
=
Regular text:
TEXT = Text
Merging is simple:
TEXT = This is ugly, please don't ever do this.
Textboxes
You can specify how big you want you want your textbox with 'cols' and 'rows'. Cols is width, rows is height.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec lacus non metus condimentum blandit. Phasellus vehicula porta ipsum. Morbi sed purus vitae est mollis vulputate. Nunc ac massa quis quam blandit adipiscing. Cras at elit vel nunc hendrerit vehicula. Duis vel neque vitae nisi dapibus tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec lacus non metus condimentum blandit. Phasellus vehicula porta ipsum. Morbi sed purus vitae est mollis vulputate. Nunc ac massa quis quam blandit adipiscing. Cras at elit vel nunc hendrerit vehicula. Duis vel neque vitae nisi dapibus tempus.
LJ-cuts
TEXT TO BE HIDDEN
And you can't actually preview lj-cuts because entries don't show them, but I'm sure you all know what they look like. ;)
CSS in HTML
Sometimes it's just easier to achieve something with CSS, so using the 'style' attribute you can put CSS into your HMTL. And the font tag isn't actually used anymore, [except on lj and probs other blogging sites and such] it's been deprecated and replaced with style. In fact there are a few tags that have been deprecated and replaced with style. To me it's like, anything you can do with HTML, you can do with CSS, and probably better. ;)
The sparkle text above uses the style attribute.
Another example; how to use the div tag with the style attribute to create hidden spoilers:
Highlight to read:
SPOILER TEXT = Highlight to read:
Hidden for a reason! Spoiler!
Basically, CSS IS REALLY AWESOME, YO. ;D
Bonus cool thing:
Link to users on other journaling sites from lj! Just c&p from the textboxes.
Dreamwidth
alexandra
mintyapple
alexandra
mintyapplehttp://USERNAME.dreamwidth.org/profile">
http://s.dreamwidth.org/img/silk/identity/user.png" border="0" style="vertical-align: bottom;">http://www.USERNAME.dreamwidth.org/">USERNAME
http://COMMNAME.dreamwidth.org/profile">http://s.dreamwidth.org/img/silk/identity/community.png" border="0" style="vertical-align: bottom;">http://www.COMMNAME.dreamwidth.org/">COMMNAME
InsaneJournal
complications_g
the_lj_refuge
complications_g
the_lj_refugehttp://www.insanejournal.com/USERNAME/profile">http://www.insanejournal.com/img/userinfo.gif" border="0" style="vertical-align: bottom;">http://www.insanejournal.com/USERNAME/">USERNAME
http://asylums.insanejournal.com/COMMNAME/profile">http://www.insanejournal.com/img/community.gif" border="0" style="vertical-align: bottom;">http://asylums.insanejournal.com/COMMNAME/">COMMNAME
Ok, so, I hope someone finds this useful! ;) If anyone has any questions or anything, ask them! And, if there's anything you want to know how to do, with HTML or CSS, feel free to ask me! And finally, if you see any mistakes in this post, please point them out. I'm only human and this post has a lot of [repeated] code. ;)
Part 2: Lists
Anyway, it prompted me to do something about it, and so, here:
complications_g's [quick&dirty] guide to HTML in LJ
HTML stands for Hyper Text Markup Language, if you wanted to know. Tags are the things between the angle brackets < > and attributes are the things you can use to be more specific with the tags. And that's about as technical as I'm gonna get here. ;) If you want to know more, there are a bunch of great tutorials around the web, but I like this one and this one. Also, HTML uses American spellings and will not work if it is spelled with British English. So don't go adding 'u' to 'color', because it won't recognise it as HTML, and will create errors. Also, I'm pretty sure it doesn't matter if you use uppercase or lowercase letters but lowercase is the norm [and looks nicer], I've found.
I think HTML is pretty easy to learn because the tags are pretty obvious.
Here's a table of a few things I think might be useful for livejournal.
ps. Please excuse my shameless pimping. ;D
DESCRIPTIONHTMLEXAMPLENOTES
link to an lj userUSERNAMEcomplications_g
link to an lj commCOMM NAMEmintyhelpYou can also just use the username code for communities too, but I like to be specific, just in case.
italic textTEXTThis is italicised text.
bold textTEXTThis is bolded text.
underlined textTEXTThis is underlined text.It's also bold here because of code I have in my stylesheet, it won't be usually.
strikethrough textTEXTThis is struckthrough
create a link LINK TEXTThis is a link!
show an image
show a linked image
The border="0" gets rid of the border that will otherwise show around linked images.
heart symbol♥♥There are a bunch more of little symbols you can use, and there's a cool list of some here.
scrolling textTEXTThis is scrolling text!Btw, these three can get very annoying, depending on how, and how often you use them.
flashing textTEXTThis is flashing text!
sparkle textTEXTThis is sparkly text.create a textboxTEXTThis is text! In a textbox! This is text! In a textbox! This is text! In a textbox! This is text! In a textbox!Extremely basic. See below for more.
These are just the basic versions, but you can combine all sort of HTML. But, be careful when merging HTML because you have to have the opening and closing tags in the right order for it to work. The ordering is; basically each new tag has to wrap around the previous tag fully. My descriptions sucks, I know, here:
GoodBad
This will successfully bold and italicise the text.This will create an error.
For example, for text with the font tag, you can change the colour, change the font, make it bigger and smaller, give it hover text or a background [like the sparkle text above], and probably more I can't remember right now. ;)
To change the colour of the text:
TEXT = This text is red! or, if you don't want to use hex codes, there is a list of standard recognised colour names you can use instead.
TEXT = This text is also red!
The standard colours are: Black, Gray, Silver, White, Navy, Blue, Teal, Aqua, Purple, Maroon, Red, Fuchsia, Green, Lime, Olive and Yellow. And there's a brilliant list here, at COLOURlovers, of HTML colour hex codes.
To change the font:
This font is Times New Roman. = This font is Times New Roman.
A really great website for fonts is Typetester. It has three columns and you can preview the look of separate fonts [in different styles] and compare. It also shows the fonts in categories: safe list, Win defaults, Mac defaults, Vista defaults and then all the fonts you have installed on your computer. It's a brilliant site, fun to play around with.
To change the size of the text:
There are actually a few ways to do this. You can either just define a number or increase or decrease the default size, or just use big and small.
Font size 1 = Font size 1
Font size 2 = Font size 2
Font size 3 = Font size 3
Font size +1 = Font size +1
Font size +2 = Font size +2
Font size -1 = Font size -1
Font size -2 = Font size -2
This text is big! = This text is big!
This text is small! = This text is small!
To add hover text to something [a link, an image, regular text]:
A link:
LINK TEXT = Google
An image:
=
Regular text:
TEXT = Text
Merging is simple:
TEXT = This is ugly, please don't ever do this.
Textboxes
You can specify how big you want you want your textbox with 'cols' and 'rows'. Cols is width, rows is height.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec lacus non metus condimentum blandit. Phasellus vehicula porta ipsum. Morbi sed purus vitae est mollis vulputate. Nunc ac massa quis quam blandit adipiscing. Cras at elit vel nunc hendrerit vehicula. Duis vel neque vitae nisi dapibus tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec lacus non metus condimentum blandit. Phasellus vehicula porta ipsum. Morbi sed purus vitae est mollis vulputate. Nunc ac massa quis quam blandit adipiscing. Cras at elit vel nunc hendrerit vehicula. Duis vel neque vitae nisi dapibus tempus.
LJ-cuts
TEXT TO BE HIDDEN
And you can't actually preview lj-cuts because entries don't show them, but I'm sure you all know what they look like. ;)
CSS in HTML
Sometimes it's just easier to achieve something with CSS, so using the 'style' attribute you can put CSS into your HMTL. And the font tag isn't actually used anymore, [except on lj and probs other blogging sites and such] it's been deprecated and replaced with style. In fact there are a few tags that have been deprecated and replaced with style. To me it's like, anything you can do with HTML, you can do with CSS, and probably better. ;)
The sparkle text above uses the style attribute.
Another example; how to use the div tag with the style attribute to create hidden spoilers:
Highlight to read:
SPOILER TEXT = Highlight to read:
Hidden for a reason! Spoiler!
Basically, CSS IS REALLY AWESOME, YO. ;D
Bonus cool thing:
Link to users on other journaling sites from lj! Just c&p from the textboxes.
Dreamwidth
alexandra
mintyapple
alexandra
mintyapplehttp://USERNAME.dreamwidth.org/profile">
http://COMMNAME.dreamwidth.org/profile">
InsaneJournal
complications_g
the_lj_refuge
complications_g
the_lj_refugehttp://www.insanejournal.com/USERNAME/profile">
http://asylums.insanejournal.com/COMMNAME/profile">
Ok, so, I hope someone finds this useful! ;) If anyone has any questions or anything, ask them! And, if there's anything you want to know how to do, with HTML or CSS, feel free to ask me! And finally, if you see any mistakes in this post, please point them out. I'm only human and this post has a lot of [repeated] code. ;)
Part 2: Lists