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:

            &amp; or &#38; creates the ‘&' symbol.

            &copy; or &#169; creates the ‘©' symbol

            &reg; or &#174; 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!

 

8 Comments on HTML Primer for Dummies!

Dan - very useful information, not just for the newbies.

Thanks! 

03/06/2008 04:10 PM by Twin Cities Minnesota Real Estate - Marzena Melby (Counselor Realty, Inc.)


I have bookmarked.  I know I will need this.  Thanks.

03/06/2008 04:10 PM by Barbara S. Duncan ABR, CRS, GRI, e-PRO Searcy AR (RE/MAX Advantage)


WOW- How information overload! Great Article!- I think this might be the most bookmarked page in history of AR! Good Luck and Best Wishes

03/06/2008 04:12 PM by Scott Hutchinson- Lago Vista Real Estate (REAL ESTATE)


I am very good at this stuff, but I wanted to say, great post, very informative for people to understand.

03/06/2008 04:22 PM by Kim Kelley (Coldwell Banker Sky Ridge Realty)


<span style="font-size:10.0pt;font-family:Arial;color:black"> Good Post Dan! I know that many beginners and newbies are interested in this stuff. I know that knowing the basics of HTML and XHTMl is essential. I do a lot of posts in html however I do mine in an editor and copy paste in the code through the html setting on AR much easier.  </span></p>

03/06/2008 04:26 PM by Michael Thornton - Nashville, TN area Home Inspector (Complete Home Inspections, Inc.)


Marzena, Barbara, Scott, Kim & Michael: 

Wow....that's a whole lot of quick responses. Thanks for the great comments! I really enjoy programming websites...it's become my favorite little obsession!

03/06/2008 04:37 PM by Dan Kalleres, Realtor & Home Stager-NE Ohio! (Realty One - The N.E.O. Team!)


Yes, very usefull info---question:  when I view my blog the first few blogs are huge and off the screen, but as I view other pages---it is normal, how do I change my view to fit all on my screen?

I think it is because I wrote a blog and use html to change the font size and some how that changed all the other posts.

Do you know how to change it back so that all my blogs fit in one screen?

07/20/2008 07:44 PM by Aida Pinto REO Broker/Notary Public (ReoLicensedSpecialist.com)


I looked over your blogs and didn't see anything grossly out of proportion, so I'm not sure if there really is an issue there. Since each blog really is self-contained, one shouldn't affect the next (at least not as far as I know). You might want to check with some of the AR moderators for help...

07/21/2008 02:23 PM by Dan Kalleres, Realtor & Home Stager-NE Ohio! (Realty One - The N.E.O. Team!)


Leave a response…

Name:
Notify me of new comments:
Comment:
What does the graphic say?
 
Real Estate Agent: Dan Kalleres, Realtor & Home Stager-NE Ohio! (Realty One - The N.E.O. Team!)
Dan Kalleres, Realtor & Home Stager-NE Ohio!
Chesterland, OH
More about me…
Realty One - The N.E.O. Team!

Office Phone: (440) 729-3300
Cell Phone: (440) 525-4602
Email Me
Blogs about NE Ohio real estate, home staging, professional organizing, or anything else of interest that might come up!

Links

Tags (Tag Cloud)

Archives

RSS 2.0 Feed for this blog
ATOM 1.0 Feed for this blog

Find OH real estate agents and Chesterland real estate here on ActiveRain.
Disclaimer: ActiveRain Corp. does not necessarily endorse the real estate agents, loan officers and brokers listed on this site. These real estate profiles, blogs and blog entries are provided here as a courtesy to our visitors to help them make an informed decision when buying or selling a house. ActiveRain Corp. takes no responsibility for the content in these profiles, that are written by the members of this community.
© 2007 ActiveRain Corp. All Rights Reserved