[tips] Handy HTML Cheat Sheet
The things I do when procrastinating on a term paper.
Table of Contents
Livejournal Specific Code
Basic HTML
Symbols
Fonts
Lists
Tables
Links
LJ SPECIFIC CODE
Name
Code
LJ Specific Code
Livejournal Cut
[CONTENT]
Livejournal Username (laronmi as an example)
<b>username</b>
Livejournal Username (laronmi as an example)
<b>username</b>
Embedding Flash videos
EMBED CODE HERE
Back to top
BASIC HTML
Code
Result
Basic HTML
TEXT YOU WANT BOLDED
TEXT YOU WANT BOLDED
TEXT YOU WANT BOLDED
TEXT YOU WANT BOLDED
TEXT YOU WANT ITALICIZED
TEXT YOU WANT ITALICIZED
TEXT YOU WANT ITALICIZED
TEXT YOU WANT ITALICIZED
TEXT YOU WANT UNDERLINED
TEXT YOU WANT UNDERLINED
TEXT YOU WANT BLINKING
TEXT YOU WANT BLINKING (Will not work in all browsers)
TEXT YOU WANT STRIKETHROUGHED
TEXT YOU WANT STRIKETHROUGHED
TEXT YOU WANT STRIKETHROUGHED
TEXT YOU WANT STRIKETHROUGHED
small text
small text
That will display an image
Back to top
SYMBOLS
NOTE: Not all symbols will display on all browsers. If you can't see a symbol, then it won't work on your browser.
Code
Result
Symbols
NOTE: YOU WILL NOT SEE ANYTHING ABOVE. That code is for a nonbreaking space. Like what happens when you push the spacebar. This is useful for cheating the Livejournal interests in that you can replace spacebar spaces with this code, and fool LJ into thinking it's only one word instead of two. Oh ho ho! So tricky.
<
<
>
>
&
&
♪
♪
♫
♫
❤
❤
♥
♥
♦
♦
♣
♣
♠
♠
«
«
»
»
←
←
→
→
↑
↑
↓
↓
¬
¬
»
»
™
™
©
©
®
®
•
•
≈
≈
Back to top
FONTS
Code
Examples
Notes
Fonts
I AM TEXT
I am set to size 4
0 will give you small font. 6 will give you very large font.
I AM TEXT
I am light pink text.
Get a list of hexadecimal color values here.
Note that the tag is considered deprecated. While it may be useful for one-time edits and adjustments, styling an entire entry/layout with it is not recommended.
Back to top
LISTS
Code
Result
Unordered List - Default
Unordered List - Circle Bullets
Unordered List - Square Bullets
Ordered List - Default
Ordered List - Roman Numerals (Lowercase)
Ordered List - Roman Numerals (Uppercase)
Ordered List - Letters
Back to top
TABLES (Oh, Lord)
CODE
EXPLANATION
BASICS
Creates a table
Creates a table row
Creates a data cell.
Creates a table header.
TABLE MODIFICATION
bgcolor="#[hexadecimal color code]"
Specifies the background color.
Inserted into , it causes the entire table to have the background color.
Inserted into , it causes the entire row to have the background color.
Inserted into , it causes only that particular data cell to have the specified background color.
border="[numerical value]"
Creates a border around the table. Set to 0 for no border. Default is no border.
cellspacing="[numerical value]"
Specifies the spacing (in pixels) between each table cell. That is, it specifies how far apart each cell is from another.
cellpadding="[numerical value]"
Specifies the amount of space (in pixels) between the contents of a cell and the cell walls. That is, it specifies how far away the text/images/etc. are from the each side of the cell itself. (Padding the cell with space)
align="[left, right, or center]"
Specifies whether the contents should be aligned to the right side of the cell, the left side of the cell, or the center of the cell. Horizontal alignment only.
valign="[bottom, top, or middle]"
Specifies whether or not the contents of the cell should be aligned to the top of the cell, to the bottom of the cell, or in the middle of the cell. Vertical alignment only.
width"#[percentage or numerical value]"
Specifies the width of the table in a percentage or in pixels.
colspan="[numerical value]"
Used for when you want a table cell to span across a certain number of columns. For example, the green table cells in this table spans across two columns, therefore the numerical value would be two. The numerical value designates how many columns you want the table cell to span across.
Used to create table cells that stretch horizontally.
rowspan="[numerical value]"
Used for when you want a table cell to span across a certain number of rows. Same as colspan, except the table cell stretches vertically. The numerical value designates how many rows you want the table cell to span across.
Note: rowspan must inserted at the first row where it begins to span. For example, if you want the cell to span through rows 3 to 5, then insert rowspan in a table cell in row 3, not five.
Note: In rows where you have a rowspan cell spanning across, remove one for every rowspan cell there is. For example, if you have a table with four cells in a row, and there is a rowspan cell spanning in row four, then row four should only have three table cells. The spanned cell takes the place of the missing one.
style="[css elements]"
Specifies CSS elements for a table, row, or cell. Examples include:
background:url(address of image); - Sets a background image for a table, row, or cell.
color:#[hexadecimal color code]; - Sets the font color for a table, row, or cell. An alternative to
A sample table:
ONE
TWO
COLSPAN
CONTENT. LOREM IPSUM, ETC.
ROWSPAN
Yet even more content.
Blah blah blah.
...And the HTML for said table. (Help)
ONE
TWO
COLSPAN
CONTENT. LOREM IPSUM, ETC.
ROWSPAN
Yet even more content.
Blah blah blah.
Back to top
Linking
Code
Result
Notes
Making a Link
[Link Text]
Google
None
Making an E-mail Link
[Link Text]
E-mail me
Spambots love these. This is one way they pick up e-mail addresses.
Naming an Anchor
[Text]
Example
Used in cojunction with linking to anchors.
Linking to an Anchor
[Link Text]
Back to Tables
It works like this. Defining an anchor (With ) allows you to link to an anchor (with ). The pound (#) sign before the anchor name tells the browser to look for an anchor instead of an url. As such, both the anchor name and the anchor link need to be the same.
This is useful for navigating within a single page, such as this one.
Back to top
More when I'm feeling up to it.
Table of Contents
Livejournal Specific Code
Basic HTML
Symbols
Fonts
Lists
Tables
Links
LJ SPECIFIC CODE
Name
Code
LJ Specific Code
Livejournal Cut
[CONTENT]
Livejournal Username (laronmi as an example)
<b>username</b>
Livejournal Username (laronmi as an example)
<b>username</b>
Embedding Flash videos
EMBED CODE HERE
Back to top
BASIC HTML
Code
Result
Basic HTML
TEXT YOU WANT BOLDED
TEXT YOU WANT BOLDED
TEXT YOU WANT BOLDED
TEXT YOU WANT BOLDED
TEXT YOU WANT ITALICIZED
TEXT YOU WANT ITALICIZED
TEXT YOU WANT ITALICIZED
TEXT YOU WANT ITALICIZED
TEXT YOU WANT UNDERLINED
TEXT YOU WANT UNDERLINED
TEXT YOU WANT BLINKING
TEXT YOU WANT BLINKING (Will not work in all browsers)
TEXT YOU WANT STRIKETHROUGHED
TEXT YOU WANT STRIKETHROUGHED
TEXT YOU WANT STRIKETHROUGHED
TEXT YOU WANT STRIKETHROUGHED
small text
small text
That will display an image
Back to top
SYMBOLS
NOTE: Not all symbols will display on all browsers. If you can't see a symbol, then it won't work on your browser.
Code
Result
Symbols
NOTE: YOU WILL NOT SEE ANYTHING ABOVE. That code is for a nonbreaking space. Like what happens when you push the spacebar. This is useful for cheating the Livejournal interests in that you can replace spacebar spaces with this code, and fool LJ into thinking it's only one word instead of two. Oh ho ho! So tricky.
<
<
>
>
&
&
♪
♪
♫
♫
❤
❤
♥
♥
♦
♦
♣
♣
♠
♠
«
«
»
»
←
←
→
→
↑
↑
↓
↓
¬
¬
»
»
™
™
©
©
®
®
•
•
≈
≈
Back to top
FONTS
Code
Examples
Notes
Fonts
I AM TEXT
I am set to size 4
0 will give you small font. 6 will give you very large font.
I AM TEXT
I am light pink text.
Get a list of hexadecimal color values here.
Note that the tag is considered deprecated. While it may be useful for one-time edits and adjustments, styling an entire entry/layout with it is not recommended.
Back to top
LISTS
Code
Result
Unordered List - Default
- Unordered List Item One
- Unordered List Item Two
- Unordered List Item Three
- Unordered List Item One
- Unordered List Item Two
- Unordered List Item Three
Unordered List - Circle Bullets
- Unordered List Item One
- Unordered List Item Two
- Unordered List Item Three
- Unordered List Item One
- Unordered List Item Two
- Unordered List Item Three
Unordered List - Square Bullets
- Unordered List Item One
- Unordered List Item Two
- Unordered List Item Three
- Unordered List Item One
- Unordered List Item Two
- Unordered List Item Three
Ordered List - Default
- Ordered List Item One
- Ordered List Item Two
- Ordered List Item Three
- Ordered List Item One
- Ordered List Item Two
- Ordered List Item Three
Ordered List - Roman Numerals (Lowercase)
- Ordered List Item One
- Ordered List Item Two
- Ordered List Item Three
- Ordered List Item One
- Ordered List Item Two
- Ordered List Item Three
Ordered List - Roman Numerals (Uppercase)
- Ordered List Item One
- Ordered List Item Two
- Ordered List Item Three
- Ordered List Item One
- Ordered List Item Two
- Ordered List Item Three
Ordered List - Letters
- Ordered List Item One
- Ordered List Item Two
- Ordered List Item Three
- Ordered List Item One
- Ordered List Item Two
- Ordered List Item Three
Back to top
TABLES (Oh, Lord)
CODE
EXPLANATION
BASICS
Creates a table
Creates a table row
Creates a data cell.
Creates a table header.
TABLE MODIFICATION
bgcolor="#[hexadecimal color code]"
Specifies the background color.
Inserted into , it causes the entire table to have the background color.
Inserted into , it causes the entire row to have the background color.
Inserted into , it causes only that particular data cell to have the specified background color.
border="[numerical value]"
Creates a border around the table. Set to 0 for no border. Default is no border.
cellspacing="[numerical value]"
Specifies the spacing (in pixels) between each table cell. That is, it specifies how far apart each cell is from another.
cellpadding="[numerical value]"
Specifies the amount of space (in pixels) between the contents of a cell and the cell walls. That is, it specifies how far away the text/images/etc. are from the each side of the cell itself. (Padding the cell with space)
align="[left, right, or center]"
Specifies whether the contents should be aligned to the right side of the cell, the left side of the cell, or the center of the cell. Horizontal alignment only.
valign="[bottom, top, or middle]"
Specifies whether or not the contents of the cell should be aligned to the top of the cell, to the bottom of the cell, or in the middle of the cell. Vertical alignment only.
width"#[percentage or numerical value]"
Specifies the width of the table in a percentage or in pixels.
colspan="[numerical value]"
Used for when you want a table cell to span across a certain number of columns. For example, the green table cells in this table spans across two columns, therefore the numerical value would be two. The numerical value designates how many columns you want the table cell to span across.
Used to create table cells that stretch horizontally.
rowspan="[numerical value]"
Used for when you want a table cell to span across a certain number of rows. Same as colspan, except the table cell stretches vertically. The numerical value designates how many rows you want the table cell to span across.
Note: rowspan must inserted at the first row where it begins to span. For example, if you want the cell to span through rows 3 to 5, then insert rowspan in a table cell in row 3, not five.
Note: In rows where you have a rowspan cell spanning across, remove one for every rowspan cell there is. For example, if you have a table with four cells in a row, and there is a rowspan cell spanning in row four, then row four should only have three table cells. The spanned cell takes the place of the missing one.
style="[css elements]"
Specifies CSS elements for a table, row, or cell. Examples include:
background:url(address of image); - Sets a background image for a table, row, or cell.
color:#[hexadecimal color code]; - Sets the font color for a table, row, or cell. An alternative to
A sample table:
ONE
TWO
COLSPAN
CONTENT. LOREM IPSUM, ETC.
ROWSPAN
Yet even more content.
Blah blah blah.
...And the HTML for said table. (Help)
ONE
TWO
COLSPAN
CONTENT. LOREM IPSUM, ETC.
ROWSPAN
Yet even more content.
Blah blah blah.
Back to top
Linking
Code
Result
Notes
Making a Link
[Link Text]
None
Making an E-mail Link
[Link Text]
E-mail me
Spambots love these. This is one way they pick up e-mail addresses.
Naming an Anchor
[Text]
Example
Used in cojunction with linking to anchors.
Linking to an Anchor
[Link Text]
Back to Tables
It works like this. Defining an anchor (With ) allows you to link to an anchor (with ). The pound (#) sign before the anchor name tells the browser to look for an anchor instead of an url. As such, both the anchor name and the anchor link need to be the same.
This is useful for navigating within a single page, such as this one.
Back to top
More when I'm feeling up to it.