Basic HTML
.
I have a couple of mental quirks -- I find poetry or song lyrics incredibly easy to learn, and I'm drawn to find or make patterns in random elements. (Maybe those are connected; I dunno.) Consequently, learning the basics of HTML was easy for me -- to the point where I sometimes find myself typing in Word, instead of hitting 'Ctrl-I' when I want to italicize.
But -- ::StarWatcher slaps herself on the forehead:: -- I've been reminded that not everyone finds this stuff as easy to remember as I do. (Thanks for the heads-up, roslynsmuse!) Therefore, I've taken the basics of HTML coding -- italics, cuts, links, etc -- out of this longer post, and copied it to this shorter post, for easier access and reference if you need it.
As always, feel free to share with any person or community.
When posting on the 'Net, if you want anything other than plain text, you need special 'codes' to tell the browser (the program that reads and displays HTML pages) exactly what you want to do -- italics, bold, underline, center, paragraph breaks, etc. Most websites will not automatically supply the code, which is why many archived stories simply use * or CAPS for emphasis, instead of underline, bold, or italics. (I'll refer to these as 'visual emphases'.) However, if you want more control over the 'look' of your post or story, the most basic form of HTML is not difficult to do; it just takes a little extra typing.
NOTE: LJ will now code your post for you. If you have typed with visual emphasis in Microsoft Word, for example, you can click on 'Rich Text' on your 'Post an Entry' page. Then paste your copied text, and LJ will show it as it was on your document. However, the resultant code is 'messy' -- uses more characters than necessary -- so that you can't fit as many words in one post. Besides, LJ is a good practice arena for the time when/if you decide to develop your own website. I recommend that you try to master these basics; they're really very simple. /NOTE
The most important thing to remember is that you must have a matching 'code-pair' at each end of the emphasized word or section. Think of a pair of bookends. With only one bookend (on the left), the books at the right end of the row will fall and scatter. If you write the code to start italics (on the left), but don't tell the computer when to stop italics, the entire rest of your document will be in italics.
NOTE: Usually < and > around a string of symbols will not show in LJ; this post is full of them. However, they're showing because I've learned that < makes < show up, and > makes > show up. So, I can give you the exact code, and you can copy the code, save it in Word or Text, then insert your own information in the necessary places. Copy back to LJ, and your coding is easier. You'll soon learn to do it automatically, but this can help get you through the learning phase. /NOTE
Now to the nitty-gritty --
HOW TO MAKE ITALICS, BOLD, and OTHER EFFECTS
HTML code always starts with <*> (open the code) and ends with (close the code). These are known as 'tags'. What you put in between the tag-symbols (where the asterisk is) tells the computer what to do. The insert may be a single letter, or a string of characters. LJ will not print the tags, but it will make changes to the word or phrase that's between the tags. The most commonly-used tags are:
Italics
Underline
Bold
Strike Through
Center (I didn't center this because it messes up my neat formatting. But it's useful for story titles, large exclamatory messages, etc. - like the headings in this post.)
Temporarily decreases size of font; often used in posts or comments to convey a whisper, or embarrassment, or furtive side-glances. (Whatever emotion is appropriate.) It seems to be relative to the font size currently in use, and is approximately one font-size smaller, but is easier/quicker to type. Thanks to beachkid for the tip.
Temporarily increases size of font; apparently relative to the font size currently in use, and approximately one font-size larger. Again, my thanks to beachkid.
Notice that the initial or the word is usually the code -- we need all the 'memory cues' we can get. LJ and HTML don't care if the tags are caps or small letters; either one works.
When typing, you will put the relevant code around the word or phrase without any extra spacing. It looks messy; you'll have to pretend it's not there and read 'between the tags'. Remember -- using "Preview" will help you be sure that you got it right.
It's possible to combine the codes. Just put the tags next to each other, and reverse the order when you use the close-tags. Eg. Bold Italics
TIP: While writing the main part of a post (or story, for you authors), most people use only one style of emphasis -- say, italics. Type both tags next to each other -- -- and copy (Ctrl-C) them. Then, when you come to a word or phrase that you want to italicize, use a quick Ctrl-V to paste the tags. Move your cursor to the middle of the code and type your word or phrase, then move to the end of the code and continue typing the sentence or story. This works more quickly than it sounds, and you will be certain that you always have both tags in place and correctly typed.
SPECIAL NOTE:
LJ does not require codes for new lines or paragraphs; using 'Enter' moves you to the next line, and using 'Enter' twice gives you the new paragraph.
BUT -- if you code for a website, you will need
(new paragraph) at the beginning of each paragraph. (Or place it in the blank line between paragraphs when you hit 'enter'; it makes your text easier to read.) It is not usually necessary to use
at the end of your paragraph, because opening a new paragraph automatically closes the previous one, but it won't hurt if it makes you more comfortable.
If you want to go to the next line without a space, you need a 'break' --
forces text to the next line. This is a tag that does not need to be closed. uniquewonders tells us that, to keep the HTML neat and compliant, it is more properly written as
although the / is usually not necessary. But I've learned that those 'usually's can trip us up. When in doubt, it won't hurt to add it. /SPECIAL NOTE
HOW TO MAKE LINKS
NOTE: for all links, once you get to the = symbol, there are NO spaces. There may or may not be spaces before you get to =. Also, curly quotes won't work; if you're typing in Word, save to text, then copy that into the LJ interface. /NOTE
NOTE 2: Some of the links you see in this section will not work because they're not really coded; I'm using HTML magic to fake it. In other words, if you see < and >, the link is not "live"./NOTE
NOTE 3: I now know that links will show differently in different styles of LJs or web-pages. Basically, any text-change you see -- different color, bolded, underlined, different size (or any combination of those) -- will indicate a link to another page or site. But I'm used to bold-underline, so that's what I'll demonstrate. /NOTE
= = = = =
LJ uses codes to produce links. It used to have different codes for people, communities, and RS feeds. But, thanks to uniquewonders, I learn that the basic 'user' code -- Example, starwatcher307 or sentinel_thurs -- will now work for all the different types; the LJ system assigns the correct icon for the link. When you use this, the reader will not see the code, but the name will be bolded and linked, with an LJ-icon in front. starwatcher307 or sentinel_thurs Readers will be able to click and go to the linked LJ.
= = = = =
If you're making a very long post, it is considered polite to use a cut-tag, especially if you include pictures. People will read your introductory thoughts, then click to read the full post --
Introductory thoughts, explanation, or "teaser" for the post.
Your complete post
Final thoughts if you want to add them, which will show on the "front page".
= = = = =
If you intend your entire post (after the introduction) to be under the cut, and you don't want a fancy title, you can simply use as the code. LJ will automatically insert a link that looks like (Read more).
= = = = =
If you wish to link a particular story, page, or site, there are two ways.
1) Simply copy the URL (highlight, hit Ctrl-C to copy) when you're at the site, and put it in your post (hit Ctrl-V to paste). Eg --
You can find Cascade Library here -- http://tslibrary.skeeter63.org/newarrivals.htm
2) Or, you can make a linked title that will take you to the same place with this code -- Word or sentence you want to be linked
Eg -- Here's 852 Prospect, the Sentinel slash archive.
FONT SIZES AND COLORS
With the proper tags, you can manipulate size and color of font. The change can be temporary (for a heading, or a section), or sustained for an entire post.
Fonts range in size from minus 2 to plus 4. The code is and . So, looks like this, and looks like this. The close-tag does not use the entire code, just . Again, use preview to ensure that you have it correct.
A few selected colors will show up with just the given color-name. The code is and . Usable colors are: red pink magenta dark magenta violet dark violet purple blue dark blue light blue teal cyan dark cyan turquoise green dark green light green yellow gold orange dark orange tan brown silver dark gray gray
Remember the "no spaces after =" rule. Dark blue is coded 'darkblue', light green is coded "lightgreen", etc.
And that's it for this post. I have other tips on making LJ work for you in THESE POSTS.
.
I have a couple of mental quirks -- I find poetry or song lyrics incredibly easy to learn, and I'm drawn to find or make patterns in random elements. (Maybe those are connected; I dunno.) Consequently, learning the basics of HTML was easy for me -- to the point where I sometimes find myself typing in Word, instead of hitting 'Ctrl-I' when I want to italicize.
But -- ::StarWatcher slaps herself on the forehead:: -- I've been reminded that not everyone finds this stuff as easy to remember as I do. (Thanks for the heads-up, roslynsmuse!) Therefore, I've taken the basics of HTML coding -- italics, cuts, links, etc -- out of this longer post, and copied it to this shorter post, for easier access and reference if you need it.
As always, feel free to share with any person or community.
When posting on the 'Net, if you want anything other than plain text, you need special 'codes' to tell the browser (the program that reads and displays HTML pages) exactly what you want to do -- italics, bold, underline, center, paragraph breaks, etc. Most websites will not automatically supply the code, which is why many archived stories simply use * or CAPS for emphasis, instead of underline, bold, or italics. (I'll refer to these as 'visual emphases'.) However, if you want more control over the 'look' of your post or story, the most basic form of HTML is not difficult to do; it just takes a little extra typing.
NOTE: LJ will now code your post for you. If you have typed with visual emphasis in Microsoft Word, for example, you can click on 'Rich Text' on your 'Post an Entry' page. Then paste your copied text, and LJ will show it as it was on your document. However, the resultant code is 'messy' -- uses more characters than necessary -- so that you can't fit as many words in one post. Besides, LJ is a good practice arena for the time when/if you decide to develop your own website. I recommend that you try to master these basics; they're really very simple. /NOTE
The most important thing to remember is that you must have a matching 'code-pair' at each end of the emphasized word or section. Think of a pair of bookends. With only one bookend (on the left), the books at the right end of the row will fall and scatter. If you write the code to start italics (on the left), but don't tell the computer when to stop italics, the entire rest of your document will be in italics.
NOTE: Usually < and > around a string of symbols will not show in LJ; this post is full of them. However, they're showing because I've learned that < makes < show up, and > makes > show up. So, I can give you the exact code, and you can copy the code, save it in Word or Text, then insert your own information in the necessary places. Copy back to LJ, and your coding is easier. You'll soon learn to do it automatically, but this can help get you through the learning phase. /NOTE
Now to the nitty-gritty --
HOW TO MAKE ITALICS, BOLD, and OTHER EFFECTS
HTML code always starts with <*> (open the code) and ends with (close the code). These are known as 'tags'. What you put in between the tag-symbols (where the asterisk is) tells the computer what to do. The insert may be a single letter, or a string of characters. LJ will not print the tags, but it will make changes to the word or phrase that's between the tags. The most commonly-used tags are:
Italics
Underline
Bold
Strike Through
Center (I didn't center this because it messes up my neat formatting. But it's useful for story titles, large exclamatory messages, etc. - like the headings in this post.)
Temporarily decreases size of font; often used in posts or comments to convey a whisper, or embarrassment, or furtive side-glances. (Whatever emotion is appropriate.) It seems to be relative to the font size currently in use, and is approximately one font-size smaller, but is easier/quicker to type. Thanks to beachkid for the tip.
Temporarily increases size of font; apparently relative to the font size currently in use, and approximately one font-size larger. Again, my thanks to beachkid.
Notice that the initial or the word is usually the code -- we need all the 'memory cues' we can get. LJ and HTML don't care if the tags are caps or small letters; either one works.
When typing, you will put the relevant code around the word or phrase without any extra spacing. It looks messy; you'll have to pretend it's not there and read 'between the tags'. Remember -- using "Preview" will help you be sure that you got it right.
It's possible to combine the codes. Just put the tags next to each other, and reverse the order when you use the close-tags. Eg. Bold Italics
TIP: While writing the main part of a post (or story, for you authors), most people use only one style of emphasis -- say, italics. Type both tags next to each other -- -- and copy (Ctrl-C) them. Then, when you come to a word or phrase that you want to italicize, use a quick Ctrl-V to paste the tags. Move your cursor to the middle of the code and type your word or phrase, then move to the end of the code and continue typing the sentence or story. This works more quickly than it sounds, and you will be certain that you always have both tags in place and correctly typed.
SPECIAL NOTE:
LJ does not require codes for new lines or paragraphs; using 'Enter' moves you to the next line, and using 'Enter' twice gives you the new paragraph.
BUT -- if you code for a website, you will need
(new paragraph) at the beginning of each paragraph. (Or place it in the blank line between paragraphs when you hit 'enter'; it makes your text easier to read.) It is not usually necessary to use
at the end of your paragraph, because opening a new paragraph automatically closes the previous one, but it won't hurt if it makes you more comfortable.
If you want to go to the next line without a space, you need a 'break' --
forces text to the next line. This is a tag that does not need to be closed. uniquewonders tells us that, to keep the HTML neat and compliant, it is more properly written as
although the / is usually not necessary. But I've learned that those 'usually's can trip us up. When in doubt, it won't hurt to add it. /SPECIAL NOTE
HOW TO MAKE LINKS
NOTE: for all links, once you get to the = symbol, there are NO spaces. There may or may not be spaces before you get to =. Also, curly quotes won't work; if you're typing in Word, save to text, then copy that into the LJ interface. /NOTE
NOTE 2: Some of the links you see in this section will not work because they're not really coded; I'm using HTML magic to fake it. In other words, if you see < and >, the link is not "live"./NOTE
NOTE 3: I now know that links will show differently in different styles of LJs or web-pages. Basically, any text-change you see -- different color, bolded, underlined, different size (or any combination of those) -- will indicate a link to another page or site. But I'm used to bold-underline, so that's what I'll demonstrate. /NOTE
= = = = =
LJ uses codes to produce links. It used to have different codes for people, communities, and RS feeds. But, thanks to uniquewonders, I learn that the basic 'user' code -- Example, starwatcher307 or sentinel_thurs -- will now work for all the different types; the LJ system assigns the correct icon for the link. When you use this, the reader will not see the code, but the name will be bolded and linked, with an LJ-icon in front. starwatcher307 or sentinel_thurs Readers will be able to click and go to the linked LJ.
= = = = =
If you're making a very long post, it is considered polite to use a cut-tag, especially if you include pictures. People will read your introductory thoughts, then click to read the full post --
Introductory thoughts, explanation, or "teaser" for the post.
Your complete post
Final thoughts if you want to add them, which will show on the "front page".
= = = = =
If you intend your entire post (after the introduction) to be under the cut, and you don't want a fancy title, you can simply use as the code. LJ will automatically insert a link that looks like (Read more).
= = = = =
If you wish to link a particular story, page, or site, there are two ways.
1) Simply copy the URL (highlight, hit Ctrl-C to copy) when you're at the site, and put it in your post (hit Ctrl-V to paste). Eg --
You can find Cascade Library here -- http://tslibrary.skeeter63.org/newarrivals.htm
2) Or, you can make a linked title that will take you to the same place with this code -- Word or sentence you want to be linked
Eg -- Here's 852 Prospect, the Sentinel slash archive.
FONT SIZES AND COLORS
With the proper tags, you can manipulate size and color of font. The change can be temporary (for a heading, or a section), or sustained for an entire post.
Fonts range in size from minus 2 to plus 4. The code is and . So, looks like this, and looks like this. The close-tag does not use the entire code, just . Again, use preview to ensure that you have it correct.
A few selected colors will show up with just the given color-name. The code is and . Usable colors are: red pink magenta dark magenta violet dark violet purple blue dark blue light blue teal cyan dark cyan turquoise green dark green light green yellow gold orange dark orange tan brown silver dark gray gray
Remember the "no spaces after =" rule. Dark blue is coded 'darkblue', light green is coded "lightgreen", etc.
And that's it for this post. I have other tips on making LJ work for you in THESE POSTS.
.