Article/
HTML Coding

No Programming Necessary. Well, almost.

In this day and age it surprises me how little people know about HTML coding or making a website. Creating one for a company is one thing; you need to understand HTML, CSS, JavaScript, PHP, UI/UX design, online branding, etc. very well and possibly some other languages. That I can understand. But what about for a simple personal website to showcase your talents, skills and visually portray something that defines you? It seems overwhelming, but it really not. Everything can be accomplished with some basic knowledge of HTML.

Some websites like Wix.com and Weebly.com are stupidly simple to set up a basic website for no cost. Granted you are limited in changing nitty-gritty details such as fully customized site layouts, fonts, animations for text or pictures, etc., but you can accomplish much in just the basic service they offer. I recommend reading Jeremy Wong’s two articles on the Wix/Weebly debate and look at the pros and cons of several platforms. It will give you a better understanding of their platforms.

So much of the material organizations write end up on some digital platform and while most writers and contributors have an expertise writing and editing, not many understand how to translate it to a digital format. At times there is a learning curve to understand a content management system (CMS) to upload content.

This article deals with times where complex sites and systems rely on some coding to update the most basic of items. It drives the company and their employees into frenzy when they can’t upload new images or literature because they can’t see the basics of where to change the content. It would be impossible for me to go write this article (which I am trying to keep brief and to the point) and give a complete overview of HTML. That’s something you will have to do should you decide to become a developer either to bolster your resume or follow that career path. I would start with CodeAcademy.com, where I am so impressed with their style of teaching multiple different languages for those that have ZERO coding experience.

My hope is that this article will help you reach past the rank of a beginner with HTML. If you like it, I strongly encourage you to continue to improve those coding skills, because they translate well into today’s job market. It will undoubtedly bolster your resume and provide value to your work.

The Body Tag

Let’s start with the bulk of the website. This will most likely be in the “body” of the page you are looking at. The “body” of the page starts with a <body> tag and ends with </body> tag. In HTML, you work with tags, which are identified with carrots. All HTML tags have an opener and a closer. The opener is <body> and the closer is </body>. The forward slash mark is the difference in an opener and closer.

The Paragraph Tag

In the body of the page will be several paragraphs. Most content for websites fall into paragraphs. To create a paragraph, use a <p> tag for the start of a new paragraph. There is a chance you won’t have to be deal with any of the fonts, size, and color because whoever set up the site, already established how it will look in the CSS coding or the CMS takes care of that for you. You also need to close the paragraph with a closing </p> tag. Once again, notice what determines an opening tag and a closing tag. It is the forward slash mark. Here’s an example to illustrate a paragraph using <p> tags:

<p>Thank you for visiting ItsMoose.com! I appreciate you taking the time to look through my website.</p> This is the first paragraph.

<p>If you have any concerns or suggestions, feel free to contact me!</p> This is the start of a new, second paragraph.

The Header Tag

Headers should never be overlooked because they play a crucial role on search engine optimization (SEO) for your company or personal website. They help visitors find content much easier. Search engines read header tags to determine the content on a page, the category it belongs in, the relevance to a visitor’s search, and ultimately, the search results. Typically titles of articles are labeled with an <h1> tag, stating the largest font size for that text. After and <h1> tag subheaders are usually <h2> and <h3> tags. They are smaller in font size. Still I would check with someone in the department that knows or look at the previous subheader code to determine what it is. Here’s an example to illustrate using header tags with paragraph tags:

<h1>Welcome to my website!</h1>

<p>Feel free to take look around.</p>

<h2>Hobbies</h2>

<p>I enjoy writing interesting online articles for people to read.</p>

<h3>Web Design</h3>

<p>This is one of the many hobbies I love to talk about.</p>

The Image Tag

I am willing to bet that most CMS systems allow you to insert images in particular places. But there will be times where you need to format it in order to place it correctly into the page. Some images may be too big or small, centered or right-aligned, too spaced out, etc. With the <img> tag, you can seamlessly add images among text on a page. You should note that the <img> tag is one of the rare tags that don’t require a closing tag. Here’s an example of how to implement the image <img> tag:

<img style="margin: 5px; float: right;" alt="SEO keywords" src="images/path/image-name.jpg" width="500" height="450" />

Just with that line of code above you’ve accomplished five things! The margin attribute allows for 5px (pixels) of space around the image so that text does not flow into it or “crowd” the image. The float attribute keeps the image aligned to the right. You can change that to “right” and “center” if you’d like.

The alt attribute is for SEO, so use keywords here that relate to and explain the image well within your site. The src attribute is where the image is actually stored on the machine or server. And width and height explain the size of the image you’d like to keep on that page. Remember once again there is no closer for an <img> tag.

Links, Hyperlinks and HREF tags

If there is a tag you want to master knowing, it’s the <href> tag. Can you imagine the Internet without links? It would be impossible to find relevant information without them or jump to any content we wanted to look for. We might as well move back to printed material like books and the Dewey Decimal System. Here is an example of the <href> tag:

<a href="http://www.itsmoose.com">Musanna Al-Muntasir</a>

Notice the first thing the <href> starts with is an “a”. This is important and must be there to open the tag. The website address or the URL between the quotations (http://www.itsmoose.com) is where you want visitors to eventually go to. The “Musanna Al-Muntasir” is what represents that link so when people click it, it will go to the URL. You can represent a URL however you’d like with any text, but keep it simple and relevant to where people want to go. There are search engine penalties for broken links and “false” links that take you to irrelevant site material. Don’t forget to close the link with the </a> tag or the rest of the page might turn into a link!

There is one more thing I’d like to mention about <href> tags. There are times where you are linking to an external site or piece of material that is not yours. You can code it to where it opens the link in a new window. This is ideal for external sites, but if it is something within your own website, I would not recommend doing this. You want to keep people at your own website for as long as possible. Here is an example of that link:

<a href=http://www.itsmoose.com target=”_blank”>Musanna Al-Muntasir</a>

The target attribute instructs the site to open that particular link in a new window. It must have an underscore line before “blank”.

The End?

Well there you have it. I have explained the very basics of HTML. I am sure many of you might think it’s too basic, but I try to look at it from an applicable business setting. When I left my previous position at my company, the Marketing team scrambled to figure out how to manage all the websites and what to do. Most of what they were asking dealt with basic tasks dealing with the tags I mentioned above. It would have been good to know just a little bit until they brought in a dedicated Web Developer to take over the duties and responsibilities of the position.

Even so, if you have additional coding questions, I encourage you to ask below via the Disqus discussion below. I will try my best to answer it. If you enjoyed it enough to continue improving your skills, I highly encourage it! There are a plethora of online books, print books, YouTube videos, and specialized websites like CodeAcademy that can help take you to the next level. Ask questions below and good luck!