HTML Tutorial -- Part 2
Go back to Part 1
LINKS (continued)
LJ User/Community Names
To create a link for a personal LJ or a community, you use the same code:
name of individual or comm
So if you want your link to look like this:
username
Your code would look like this:
username
And if you want to create a link for a community:
sick_wilson
You'd use the same code, and LJ will figure out that it's a community and automatically include the community graphic thingy:
sick_wilson
Basic LJ-Cut
To hide text under a cut, you use this code:
text you want to hide
So if you want to hide all or part of your text so it looks like this when viewed from the main page or on someone's f-list:
( Read more... )
Your code would look like this:
Once upon a midnight dreary, while I pondered weak and weary,
Over many a quaint and curious volume of forgotten lore,
While I nodded, nearly napping, suddenly there came a tapping,
As of some one gently rapping, rapping at my chamber door.
"'Tis some visitor," I muttered, "tapping at my chamber door -
Only this, and nothing more."
And if you want to post a link that starts exactly where the cut starts, be sure to include the info that LJ adds at the end of the URL:
http://username.livejournal.com/123456.html#cutid1
Customizing Text for an LJ-Cut
If you want your LJ-cut to say something besides ( Read more... ) when viewed from the main page or someone's f-list, you just add text="x" to your opening lj-cut tag, where x = the text for your link as you want it to appear:
text="x">text you want to hide
So if you want your link to look like this:
( clicky-clicky )
Your code would look like this:
Once upon a midnight dreary, while I pondered weak and weary,
Over many a quaint and curious volume of forgotten lore,
While I nodded, nearly napping, suddenly there came a tapping,
As of some one gently rapping, rapping at my chamber door.
"'Tis some visitor," I muttered, "tapping at my chamber door -
Only this, and nothing more."
Multiple LJ-Cuts
There may be times when you want to hide multiple sections of text under their own LJ-cuts. For example, maybe you're posting some unrelated drabbles, and want them to look something like this from the main page or someone's f-list:
( Drabble Title #1 )
( Drabble Title #2 )
( Drabble Title #3 )
( Drabble Title #4 )
You'd just need to add lj-cut tags around each section of text like this:
Once upon a midnight dreary, while I pondered weak and weary,
Over many a quaint and curious volume of forgotten lore,
While I nodded, nearly napping, suddenly there came a tapping,
As of some one gently rapping, rapping at my chamber door.
"'Tis some visitor," I muttered, "tapping at my chamber door -
Only this, and nothing more."
Ah, distinctly I remember it was in the bleak December,
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow; - vainly I had sought to borrow
From my books surcease of sorrow - sorrow for the lost Lenore -
For the rare and radiant maiden whom the angels named Lenore -
Nameless here for evermore.
And the silken sad uncertain rustling of each purple curtain
Thrilled me - filled me with fantastic terrors never felt before;
So that now, to still the beating of my heart, I stood repeating
"'Tis some visitor entreating entrance at my chamber door -
Some late visitor entreating entrance at my chamber door; -
This it is, and nothing more,"
Presently my soul grew stronger; hesitating then no longer,
"Sir," said I, "or Madam, truly your forgiveness I implore;
But the fact is I was napping, and so gently you came rapping,
And so faintly you came tapping, tapping at my chamber door,
That I scarce was sure I heard you" - here I opened wide the door; -
Darkness there, and nothing more.
LJ will automatically assign a number at the end of each URL like this:
http://username.livejournal.com/123456.html#cutid1
http://username.livejournal.com/123456.html#cutid2
http://username.livejournal.com/123456.html#cutid3
http://username.livejournal.com/123456.html#cutid4
So what's the difference between hiding stuff under multiple LJ-cuts like this and using bookmark tags?
- Multiple LJ-cuts can be seen from the main page or someone's f-list, which may be exactly what you want sometimes.
- Bookmark tags allow you to hide everything you want to hide under a single LJ-cut, and you can give them specific names instead of letting LJ assign a number, e.g., #cutid1, #cutid2, etc.
Fake LJ-Cuts
If you've ever seen someone say something like "Fake cut to my LJ", that just means they've really posted the content to their personal journal, and are providing you with a basic link to get there.
The advantages of doing that are:
- If you need to go back and fix a typo or other boo-boo that slipped past you or your beta, you only have to fix it in one place. That can be very helpful if you cross-post to multiple communities.
- It helps to keep comments all in one place, since people are more likely to post them where the actual content is.
IMAGES
How to Add an Image
The basic code to add an image looks like this, and does not require a closing tag.
So if you want to add an image like this:
Your code would look like this:
BONUS TIP
If you're going to use an image from your LJ scrapbook, and it looks like this, where you see a bunch of navigation links and other stuff:
http://pics.livejournal.com/geekygecko/pic/004d405q/g172
Click anywhere on your image, and you should get a screen where all you see is the actual picture, like this:
http://pics.livejournal.com/geekygecko/pic/004d405q
That's the URL you want to use when you copy and paste it into your HTML code. Otherwise, your image won't show up.
UPDATE RE: NEW SCRAPBOOK
If your images have already migrated over to their new home as part of LJ's recent scrapbook overhaul, you'll need to click the Original option in the lower right hand corner under the picture to get the URL to copy and paste into your HTML code so everything will work like it's supposed to. :)
(click for full-sized version)
And you should get something that looks like this when you click the Original link:
http://ic.pics.livejournal.com/geekygecko/11821476/301989/original.png
How to Resize an Image
If the image is too large for your purposes, you can reduce the size by adding the width and height to your tag, where x and y = the number of pixels:
For example, the image used in the previous example is 500 pixels wide, and 375 pixels high.
And let's say you want it to be half that size. You just whip out your calculator and multiply both numbers by the same percentage, which in this case would be 50%.
500 x 0.5 = 250
375 x 0.5 = 187.50 (which you'd round up to 188)
So if you want your resized image to look like this:
Your code would look like this:
width="250" height="188">
BONUS TIP
If you don't know the percentage to help you determine a precise height and/or width, you can use a nifty online calculator like this to figure it out. :)
How to Use a Resized Preview Image to Link to Original
There may be times when you want to post a smaller version of an image as a preview, and link it to the full-sized version, e.g., so you don't have to hide it under an LJ-cut to comply with some community guidelines re: the maximum size allowed, or to get it to fit in a certain sized space, etc.
You're going to use pretty much the same code that you would for a basic link, except you're going to replace the usual text with the code for a resized image:
Or in non-techie speak...
This is the URL where the full-sized image is stored, and this is the same URL, but with some magic code sprinkled in to just make it look smaller than it really is, and you get to specify exactly how wide and how high you want it to look. :)
So let's say you want your preview pic to link to the original like this:
Your code would look like this, where the highlighted part is the code for the resized image:
How to Use an Image Instead of Text for a Link
If you want to use an image instead of some text like you would for a basic link, you just insert the code to add an image where your text would usually go:
So if you want your link to look like this, where it just happens to go to one of our favorite sites:
Your code would look like this:
How to Remove Line Around Image Links
Anytime you create a link, HTML automatically adds a line under text, and a line around an image. You just may not see them depending on your custom layout or LJ theme, which browser and/or version you're using, etc.
And in most cases, the line around an image link isn't that big of a deal. But if you're using a piece of clip art or something with a transparent background, sometimes it just looks downright tacky and distracting. :)
Fortunately, there's a very easy way to fix that. You just add border="0" to the end of your image code:
border="0">
So if you want your link to look like this:
Your code would look like this:
border="0">
Embedding Videos
The easiest way to embed a video is to just copy the code provided wherever the video is archived, and paste it into an entry or comment.
However, sometimes LJ does something screwy to the code, and the video won't display or work properly. :(
But fear not! LJ has its own special code for embedding videos:
So if you want to embed this video:
Your code would look like this:
CREATING TABLES - THE BASICS
Before You Get Started...
Don't let all of the technical gobbledegook in this section scare you off. It's mostly just a bunch of FYI stuff to help you understand what each component can do, and will make a lot more sense once you've rolled up your sleeves and given this a try. :)
Creating tables in HTML is actually pretty easy. You just have to pay attention to what you're doing.
But depending on how large and/or complex your table is, there can be lots of individual components, which means there's more room for human error.
So we strongly recommend that you:
- Create your "skeleton" (basic table structure) on your personal LJ, and save it using the Just Me (Private) option.
- Then go back and flesh out your "skeleton" by adding attributes and the contents of your table a little bit at the time, previewing and saving your changes for each step along the way.
That way if you accidentally screw up your code and can't figure out where you went wrong, you can back out without saving your changes and try that step again, and won't have to recreate your entire table from scratch. - When everything looks exactly the way you want it to, you can add the text for the rest of your post and unlock your entry, or copy and paste the code to wherever you want to post. :)
Basic Table Structure
In its most basic form, a table only requires three kinds of tags, is arranged like a spreadsheet, and uses some of the same terminology, e.g., rows, columns, cells, etc.
- The tags create the table itself.
- The tags are used to create a table row.
- And the tags are used to create individual columns (table data cells) within a row.
For example:
THIS CODE
=
THIS TABLE
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Now you've probably noticed that this table doesn't look much like a table right now, and the text is kinda squished together. But we're going to show you how to fix that. :)
And it doesn't matter how many spaces and/or blank lines you leave between rows and cells. Your browser will ignore them anyway. So if adding some extra space makes it easier to see what you're doing, go for it. If you want, you can always go back and delete them later when you get everything exactly like you want.
Table Tag
You can add several attributes to the same table tag, but these are the ones you're more likely to need, where x = how many pixels wide you want to make something:
However, "1" works quite nicely most of the time for the last three attributes:
Table Width
There are two ways to define width:
- percentages
- pixels
So for the purposes of this tutorial, we're only going to use pixels.
So let's say you want to display some prompts in a tic-tac-toe configuration, and you want it to be 300 pixels wide. We've added a background here just for contrast so you can see what the actual table looks like at this point.
smoke alarm
litter box
picture frame
remote control
shaving cream
frozen fish sticks
cactus
fitted sheet
jigsaw puzzle
Your code would look like this:
smoke alarm
litter box
picture frame
remote control
shaving cream
frozen fish sticks
cactus
fitted sheet
jigsaw puzzle
Cellspacing
Cellspacing is just what it sounds like. It's the amount of space between each cell.
cellspacing="1"
A
B
C
D
E
F
G
H
cellspacing="5"
A
B
C
D
E
F
G
H
cellspacing="10"
A
B
C
D
E
F
G
H
If you don't want any space between cells, you just set the cellspacing to 0.
Cellpadding
Cellpadding is the amount of space around the contents within each cell.
cellpadding="1"
A
B
C
D
E
F
G
H
cellpadding="5"
A
B
C
D
E
F
G
H
cellpadding="10"
A
B
C
D
E
F
G
H
If you don't want any space around your content, you just set the cellpadding to 0.
Borders
When you add a border to a table, the HTML code also adds grid lines between each cell.
However, no matter how wide the border is around your table, the grid lines will remain 1 pixel wide.
border="1"
A
B
C
D
E
F
G
H
border="5"
A
B
C
D
E
F
G
H
border="10"
A
B
C
D
E
F
G
H
You can even change the color of your border by adding bordercolor="x" to your tag.
bordercolor="red"
A
B
C
D
E
F
G
H
bordercolor="blue"
A
B
C
D
E
F
G
H
bordercolor="fuchsia"
A
B
C
D
E
F
G
H
If you don't want a border and grid lines to appear in your table, just set the border to 0.
Now let's go back and add a border 1 pixel wide to your tic-tac-toe grid, as well as the cellspacing and cellpadding attributes while you're at it. Quite a difference, huh? :)
smoke alarm
litter box
picture frame
remote control
shaving cream
frozen fish sticks
cactus
fitted sheet
jigsaw puzzle
Your code would look like this:
border="1">
smoke alarm
litter box
picture frame
remote control
shaving cream
frozen fish sticks
cactus
fitted sheet
jigsaw puzzle
IF YOU CAN'T SEE YOUR BORDERS...
Depending on which custom layout or LJ theme you're using, your borders and grid lines may not show up, at least if you haven't disabled the custom comment pages.
So if you really want to see what your table structure will look like before you post, you have a couple of options.
Previewing Your Table in Word
- Copy and paste the code for your table into Word, and save your document as a .txt file.
- You should get a message that says something like "(Filename) may contain features that are not compatible with Text Only Format. Do you want to save the document in this format?"
Click Yes. - Close your document.
- Now open the file you just saved.
You should now be able to see the actual table instead of the HTML code.
Using Your Browser to Preview Your Table
If you pressed the Enter key at the end of each line instead of using a line break code (
), or used the space bar instead of non-breaking spaces ( ) to align some text, the contents of your cells may look a little funky and run together when you preview it in your browser. But you should still be able to at least get an idea what your basic table structure looks like.
- Copy and paste the code for your table into a simple text editing program, e.g., Notepad or WordPad.
- You're going to add a couple of tags to let your browser know that this is going to be an html document.
(table code copied and pasted here)
- Select File from your text editing program's toolbar, then Save As
- Give your document a name, and change the default extension from .txt to .htm
- Click the Save button
- Now go to your browser and select File, then Open File
OPTIONAL TABLE FEATURES
Cell Width
HTML will automatically set the width of your columns based on the contents of your cells, sort of like how the AutoFit option adjusts columns in Word, which may work out just fine for you.
But let's say you want each column to be a certain width, and don't want to leave it up to HTML to use its best guess. You just add width="x" to your tag like this, where x = the number of pixels wide.
And if you have several rows, you only need to define the cell width for one row, and the rest will automatically figure out what to do. :)
So if you want each column of your tic-tac-toe grid to be 100 pixels wide like this:
smoke alarm
litter box
picture frame
remote control
shaving cream
frozen fish sticks
cactus
fitted sheet
jigsaw puzzle
Your code would look like this:
width="100">smoke alarm
width="100">litter box
width="100">picture frame
remote control
shaving cream
frozen fish sticks
cactus
fitted sheet
jigsaw puzzle
Row Height
HTML will automatically set the height of your rows based on the contents of your cells, and for the most part, that works out quite nicely. :)
But sometimes you may want one or more rows in your table to be a specific height. You just add height="x" to your tag like this, where x = the number of pixels high.
So if you want the height of your cells to be the same as the width, so each cell is a perfect little square like this:
smoke alarm
litter box
picture frame
remote control
shaving cream
frozen fish sticks
cactus
fitted sheet
jigsaw puzzle
Your code would look like this:
height="100">
smoke alarm
litter box
picture frame
height="100">
remote control
shaving cream
frozen fish sticks
height="100">
cactus
fitted sheet
jigsaw puzzle
Alignment
Unless you specify otherwise, HTML will automatically left-align everything, and vertically center the contents of each cell.
But you can override that by adding alignment attributes to your code.
If you want to horizontally align a table, or align the contents within a cell, you just add this code to the appropriate tag, where x = left, right, or center.
align="x"
And if you want to vertically align a table, or the contents within a cell, you just add a "v" for vertical, where x = top, bottom, or middle (instead of center):
valign="x"
However, if you add a valign attribute to a tag, you'll probably need to add an align attribute as well, even if you want to left-align your table and/or contents of each cell like it would normally default to. Otherwise HTML seems to get confused as to what it's supposed to do. :)
So let's say you want to horizontally center your tic-tac-toe grid on the page, and horizontally and vertically center the contents of each cell:
smoke alarm
litter box
picture frame
remote control
shaving cream
frozen fish sticks
cactus
fitted sheet
jigsaw puzzle
Your code would look like this:
align="center" cellspacing="1" cellpadding="1" border="1">
align="center" valign="middle">smoke alarm
align="center" valign="middle">litter box
align="center" valign="middle">picture frame
align="center" valign="middle">remote control
align="center" valign="middle">shaving cream
align="center" valign="middle">frozen fish sticks
align="center" valign="middle">cactus
align="center" valign="middle">fitted sheet
align="center" valign="middle">jigsaw puzzle
And if you think it might look more aesthetically pleasing if each word is on a separate line, like this:
smoke
alarm
litter
box
picture
frame
remote
control
shaving
cream
frozen
fish
sticks
cactus
fitted
sheet
jigsaw
puzzle
You can just hit the Enter key after each word, or add some line breaks using the
code:
smoke
alarm
litter
box
picture
frame
remote
control
shaving
cream
frozen
fish
sticks
cactus
fitted
sheet
jigsaw
puzzle
Adding Background Colors
You can add a background color to an entire table, a row, or specific cells by adding this attribute code to the appropriate tag, where x = the named color or hex code number.
bgcolor="x"
And to try to keep this section from looking too cluttered, we're just going to show you the code for one generic table, and color code each attribute so you can see where it would go.
Entire Table
1
2
3
4
5
6
7
8
9
Row
1
2
3
4
5
6
7
8
9
Individual Cells
1
2
3
4
5
6
7
8
9
bgcolor="#e8c6ff" align="center" cellspacing="1" cellpadding="1" border="1">
bgcolor="#e8c6ff">
bgcolor="#e8c6ff">1
2
3
4
bgcolor="#e8c6ff">5
6
7
8
bgcolor="#e8c6ff">9
Adding a Background Image
You can add a background image to an entire table, a row, or specific cells by adding this code to the appropriate tag, where x = the URL where you uploaded the image:
background="x"
And to try to keep this section from looking too cluttered, we're just going to show you the code for one generic table, and color code each attribute so you can see where it would go.
Entire Table
1
2
3
4
5
6
7
8
9
Row
1
2
3
4
5
6
7
8
9
Individual Cells
1
2
3
4
5
6
7
8
9
background="http://pics.livejournal.com/geekygecko/pic/004ek1yw" cellspacing="1" cellpadding="1" border="1">
background="http://pics0livejournal0com/geekygecko/pic/004ek1yw">
background="http://pics0livejournal0com/geekygecko/pic/004ek1yw">1
2
3
4
background="http://pics0livejournal0com/geekygecko/pic/004ek1yw">5
6
7
8
background="http://pics0livejournal0com/geekygecko/pic/004ek1yw">9
However, adding a background image is a little trickier than just adding a background color.
If the size of your background image is greater than or equal to the size of wherever you want to add it, you should be okay. You'll be able to see all or part of the design just fine.
The problem is when you want to use a background image that's smaller. You'll need to make sure it's a seamless tile. That just means that it was designed to keep repeating to fill up all of the available space, without being able to see where one tile stops and another one begins.
So how can you tell the difference between a tile that's seamless and one that isn't?
Well, unless the site where you found it specifically said it was seamless, sometimes it's kinda hard to tell until you actually try it out.
Seamless Tile
Non-Seamless Tile
Now look what happens when we add the background images to these two tables. In the one on the right, see how you can tell where the same tile was copied over and over, like it's a clumsy cut and paste job?
But if you just have your heart set on a non-seamless image, and it doesn't look all fuzzy and pixely if you make it bigger, you might try resizing it in a photo editing program to equal the dimensions of wherever you want to add it.
For example, if you want to add the non-seamless tile above to this 300x300 table, you can change the size of the tile to 300x300, so you wind up with this.
Tutorial Continued in Part 3