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, <p> is the tag for a new paragraph, so you use </p> to end a paragraph.
This is a line break. It moves the text following it down to the next row of your document (in the image above, the <br> 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 <br> to the beginning of your code to create an empty space above your image. Using the <br> tag multiple times in a row will make your blank space bigger and bigger.
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:
<b> This makes font bold. </b>
<i> This makes font italic. </i>
<u> This underlines your text. </u>
Back in the day, the <a> stood for “anchor”. Now it indicates a link to another page. To create a link with HTML, use the <a> tag, paired with the web page you want it to link and what words you want to be shown.
Template: <a href=”url”>Link text goes here.</a>
Example: The HTML for Search for properties on Homes.com! Would look like this:
<a href=”http://www.homes.com/”>Search for properties on Homes.com!</a>
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).
Template: <iframe src=”url” width=”100%” height=”500px”></iframe>
Example: <iframe src=”http://connect.homes.com/” width=”100%” height=”500px”></iframe>
Images work a lot like iframes. You start with the basic <img> tag and add additional details within the tag. For example, <img src=”url”> 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 <img src=”url” alt=”description of photo”>
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: <img src=”url” alt=”description of photo” style=”width:200px;height:200px;”>
Do you need help making changes to your Homes.com website? Customer support is here for you seven days a week! Call us M-F from 8am-8pm ET or 11am-3pm ET weekends at 866-774-2947. Don’t have a Homes.com website yet? Call us at 866-697-3308 to get your beautiful, mobile responsive IDX website today!