The HTML Guide for Real Estate Agents Over 40

One of my favorite classes back in college was on HTML (hypertext markup language); it was sort of a mashup of an art class and a writing class. I also liked it because it was one of very few classes that didn't require me to purchase a $300 textbook. Everything we covered was (and still is) available for free on w3schools.com. So if you want to master HTML, go check that out. Here, we're just covering the basics that will give you more control over your content.

Finding the HTML box:

Most websites and blogs will have a button in your edit window that will let you switch to HTML. This button will usually be in one of the corners of your editor. If you have a Homes.com website, your HTML button is on the bottom left.

Here's what you need to know:

The greater than and less than symbols (also called angle brackets) should enclose your HTML. Without them, your code will show up as text on your website instead of editing your site. Inside the brackets, you put the "tag" for what you want to accomplish.

Most of the time, you only need special HTML tags like bold or italics in part of your code rather than on your whole page. To indicate where you want your formatting to end, for most HTML tags you just add a / in front of the tag. For example, this:

is the tag for a new paragraph, so you use the following to end a paragraph:

Example:

This is a line break. It moves the text following it down to the next row of your document (in the image above, this tag at the end of the first line of code moves everything after "What's a home inspection?" to the next row). It can also be used to add extra space between your content.

Example: If you have an image or table at the top of your textbox and can't get the cursor in front of to add text, switch to HTML view and add the line break tag to the beginning of your code to create an empty space above your image. Using the line break tag multiple times in a row will make your blank space bigger and bigger.

Font Formats:

HTML is a very user friendly language. The tags are pretty intuitive. These common font format tags should give you an idea of how simple HTML is meant to be:

Back in the day, the "a" in the tag above stood for "anchor." Now it indicates a link to another page. To create a link with HTML, pair this tag with the web page you want it to link and what words you want to be shown.

Example: The HTML for Search for properties on Homes.com! Would look like this:

This tag is particularly useful because most editors don't have an option to add an iframe through the text editor. The iframe tag lets you create a window in your site that will show different pages or websites within your page. Example: there are some MLS groups that don't allow agents to connect directly to their listing feed, but will allow you to frame the listings so your visitors can still do searches.

The basic iframe tag has to be customized to specify what you want to show up in your window (src = source) and how big you want the window to be (width and height). These additions to the basic tag are called attributes.

Here's an example of an iframe with size restraints (note: you would replace the word "url" with the website you want to show, but keep the quotation marks).

Images work a lot like iframes. You start with the basic img tag and add additional details within the tag. For example, the following is the basic image tag, plus the url of the actual image:

You can also add alternative text to your tag (in case the picture doesn't load on the visitor's device) by changing your tag to:

You can also manipulate the size of your image with HTML (just be careful to keep image proportions in mind to avoid stretching your image) To change the size, add a style to the tag like this:

To view the original article, visit the Homes.com blog.