Website Basics
All HTML commands have a beginning and an end.
•- For Example: The FONT command is for changing font information. To use it, there must be a beginning command <font>, some text that falls inside the command, and an ending command </font>. The ‘/font' literally means "end font" to the computer.
Commands are not case sensitive.
•- Any command can be all capitals or lower case. They work either way. Some people like to use capitals to help the command stand out. It's your choice. <marquee> is the same as <MARQUEE>.
Many commands have subcommands that let you make specific alterations.
•- Any command that has subcommands follows the same format: <command subcommand></command>. For example: <font color="blue">TEXT</font> would make the word TEXT appear blue.
•- Note: after the command, there is always a single space, the subcommand name, an "=" sign and a choice in quotes "". If you type it incorrectly, it won't work!
Here are some of the most common commands you can use in editing your websites!
<h> This is the HEADER command. It creates text headers. The format for this command is this: <h#>TEXT</h#>, where # is a number such as 1,2 or 3, etc. and the higher the number, the smaller the heading text will appear.
•- The subcommand "align" lets you align the text to the left, right or center. For example, <h1 align="center">Welcome to my newsletter</h1> would center the phrase "Welcome to my newsletter" and the font would be the largest choice available for this command.
<p> This is the PARAGRAPH command. It creates a new paragraph. The format for this command is this: <p>TEXT PARAGRAPH</p>. Like the <h> command, you can use the subcommand "align" to shift everything to the left, right or center.
<br> This is the BREAK command. It forces whatever follows to start at the next line down. Multiple <br> commands are like pressing the ENTER key several times when writing a WORD document. This command doesn't require an end command. The format for this command is this: TEXT<br>TEXT to create a single space between text or TEXT<br><br>TEXT to create a double-space, etc..
<center> This is the CENTER command. It is used to center anything (text, graphics, etc.) that falls between the command. The form is this: <center>TEXT or GRAPHIC, etc.</center>.
<font> This is the FONT command. It is used to alter the way you see your text and is used with any combination of the following subcommands:
•- size, color, face
•- The "size" subcommand changes the font size (e.g., <font size="+2"> or <"font size="14px">. You can use a + or - to increase or decrease the size or refer to the size in terms of its pixel size (like you see in WORD).
•- The "color" subcommand changes the font color (e.g., <font color="blue">)
•- The "face" subcommand changes the font type (e.g., <font face="arial"> or <font face="tahoma">)
•- You can use any or all of the subcommands and they can be put in any order, such as <font color="navy" size="12px" face="lucinda">TEXT</font> or <font face="lucinda" color="navy" size="12px">TEXT</font>. These are exactly the same!
<marquee> This is the MARQUEE command. It is used to move text across the screen like a marquee banner. Use it with any or all of the following subcommands:
•- direction, loop, behavior
•- direction, followed by left or right tells the command which direction to scroll your text, (e.g., <marquee direction="left">TEXT</marquee> means the text will scroll from the left to the right)
•- loop, followed by a number tells the command how many times you want the text to scroll, (e.g., <marquee loop="1">TEXT</marquee> means the text will scroll across the screen only once - the default is "infinite". You don't have to use this subcommand if you want it to run continuously.)
•- behavior, followed by scroll, slide, or alternate tells the command how you want the text to move (scroll - to move text across and completely off the screen at the other side, slide - to move text across the screen and stop at the other side, or alternate - to bounce text back and forth, (e.g., <marquee behavior="slide">TEXT</marquee> - scroll is the default, so if you want it to scroll, you don't need to use the behavior subcommand)).
<li> This is the LIST command. It is used to indent information that you want to look like an outline or a checklist. The format for this command is: <li>TEXT</li>. You can have two types of lists, ordered and unordered. You use the following commands to create them.
<ol> and <ul> These are the ORDERED LIST and UNORDERED LIST commands. They create bullet points in either an ordered or unordered fashion, respectively. The format for these commands is this: <ol><li>TEXT</li><li>TEXT2</li></ol>. The example would create an ordered list that looks something like:
•1. TEXT
•2. TEXT2
<b> This is the BOLD command. Use it to bold any text that falls between the commands. For example, if I wanted to say "This home makes a bold statement", I would type it as - This home make a <b>bold</b> statement. Remember to watch your spacing when working with this and the <i> or <u> commands! It's easy to scrunch words together accidentally...
<i> This is the ITALICS command. It works just like the BOLD command.
<u> This is the UNDERLINE command. It works just like the BOLD or ITALICS commands.
<a> This is the LINK command. You can use it to make a link to another web page or website with anything (text or graphics) that falls between the command. Use the subcommands to help define how the link should work.
•- href="http://www.sitename.com" is the subcommand that determines where the visitor will go when they click the link. The LINK command is ALWAYS followed by href="location". For example: <a href=http://www.neohiorealtor.com>Click here to visit my site!</a> would make the entire phrase ‘Click here to visit my site!' a link to the http://www.neohiorealtor.com/ website.
•- target="_blank" or target="_new" would open a blank page or a new page, respectively. If you don't want your site to disappear when they click on the link, use the target="new" subcommand. For example, <a href=http://www.neohiorealtor.com target="_new">Click here to visit my site!</a> would send the visitor to http://www.neohiorealtor.com/, but would open up a new window, so your website would still be up and running when they close it out. You don't want people to leave your website, do you???
•- mailto:name@site.com sends the visitor to their email program and puts your email address in the "TO:" category so they can send you an email. For example, <a href="mailto:dan@neohiorealtor.com>Dan's Email</a> would open a link to the email address ‘dan@neohiorealtor.com'.
Special characters:
& or & creates the ‘&' symbol.
© or © creates the ‘©' symbol
® or ® creates the ‘®' symbol (very useful for REALTOR®)
Sixteen Pre-defined Colors:
When using the FONT command with the COLOR subcommand, you have 16 colors you can choose from by name:
•- Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua
•o For example: <font color="red">I WANT THIS TEXT RED</font> would look like this - I WANT THIS TEXT RED
•- If you want a different color, you have to use the hexadecimal code for the color and you have to have a hexadecimal color code chart to do it, so don't ask!
I hope this helps you to add some flair to your posts, newsletters or websites! While using HTML may seem daunting, it is really simple with just a little practice! If you have any questions, feel free to ask any time! Admittedly, I have an unfair advantage in that I used to design websites in a former life...but you should also know that I'm self-taught. I just picked up an HTML book one day because I wanted to learn it! Anyone can do it! Enjoy!
-Dan
P.S. - I would have spiced up this particular blog, but with all the commands embedded in the text, that makes it a little difficult!
Dan - very useful information, not just for the newbies.
Thanks!