Web Design on the Go: Simple Code & Handy Tips for the HTML Illiterate

By | Nov 19, 2012

Several years ago technical colleges and universities around the world began offering curricula in web design to meet the expanding demand for website creation. Hence the rise of the Web Designer, the token art school graduate that can be found in most every office in America. In fact, according to the Dept. of Labor, demand for web designers is predicted to grow by 22% until 2020.

402876668 06ccb9b727 Web Design on the Go: Simple Code & Handy Tips for the HTML Illiterate
Still, many people are finding it easier and more affordable to do web design themselves. Many HTML editors, software that allows you to edit the site code, have emerged in the market for that very reason. The best known is Adobe’s Dreamweaver.  Dreamweaver is expensive and involved and best left to those with experience. For the rest of us, there are free online alternatives such as Wix, Weebly and WordPress. These online editors are free, robust and easily learned. If you don’t really know HTML code, your best bet is to (Tip #1) use these editors!! They take all the heavy lifting out of web design and make building your site a simple task.

3935342049 d8cca5a6a0 Web Design on the Go: Simple Code & Handy Tips for the HTML IlliterateAt times, though, you’ll need to be able to adjust the HTML code on your own in order to make minor (or sometimes major!) tweaks to the site. It’s best to (Tip #2) keep a cheat sheet of code commands handy for when you need to make these adjustments.  Here’s a great one from the guys at webmonkey.com. You’ll see that there’s a code for just about anything you’d ever want to do with your site.

The trick to coding is tags. Different tags perform different functions, as you will see on the cheat sheet. The most important thing to remember when hand-coding is to (Tip #3) close the tag! All tags begin with the command inside brackets. For instance:

This makes the text following the tag appear bold… UNLESS you don’t close the tag! Remember, all tags end with a backslash adjustment to the opening tag. So always start with the tag above, type what you want to appear in bold and then end with this:

This is how the computer knows to turn off the bold function. If the bracket is not closed, the computer doesn’t know what to do; therefore, it does nothing. If you’ve made an adjustment that isn’t appearing on the screen, this is the first thing you should double check.

To get the most out of your site, it needs to be interactive with the rest of the Internet, so linking your site to other websites it crucial. You can do this with (Tip #4) Hypertext “Links.” Often, they’re broken, so when fixing a site by hand, you need to know how they work. Hypertext links should look like this:

this is a hyperlink

If the code to your link doesn’t have the URL of the site to which you are linking inside the quotation marks of the opening tag, and if it doesn’t have the tags bookending the text that will be clickable on your site, known as “anchor text,” then you have yourself a broken link. If you change it to look just like this one, it will work fine – assuming you spelled the URL right!

http://www.bls.gov/ooh/computer-and-information-technology/information-security-analysts-web-developers-and-computer-network-architects.htm

Attached Images:

James Cofflin works for Arcisphere Technologies, an IBM software consulting and support company in NYC. Learn more: SoftwareLifeCyclePros.com

Leave a Reply

Your email address will not be published. Required fields are marked *

20 + = 21