Every webpage we see is basically a HTML file. HTML is short for Hypertext Markup Language. It’s the language that codes the basic elements of a webpage. By elements, we’re referring to things such as page title, headings, paragraphs, page divisions, links, tables, etc. A website is made up of many organized HTML files linking to each other.
If you are an aspiring web developer, HTML is always the starting point. But even if you use a CMS like WordPress to build your website, a basic understanding of this language can come handy from time to time. The good news is, the markup is so simple and therefore very easy to learn; you can get to grips with it in as little as a day or two!
The following is a basic introduction to HTML for the complete beginner, with a few practical examples. You can try out the examples yourself using notepad and saving the file with the .html extension, e.g. myfirstpage.html in a folder.
Introduction – HTML tags
Every HTML element is defined inside the tags < and >. Most tags have two parts – opening tags, <> and closing tags </>. Some elements use only the opening tags, with a slash in between the <> e.g <img/>. Browsers interpret the commands you type within these tags. For example, the <p> tag is used when you want to start a paragraph. At the end of the paragraph, you must add the closing tag </p> to indicate the end of the paragraph.
Let’s try working some of the tags with some real examples:
In HTML, you can define header text for up to six levels. If you want to make a line of text a heading or sub heading you can choose from <h1> to <h6>, with <h1> being the biggest and <h6> the smallest.
<h1> Heading 1, the largest </h1>
<h2> Heading 2, second largest </h2>
<h3> Heading 3, third largest </h3>
<h6> Heading 6, smallest </h6>
Adding a link
We use the <a> tag to link some text to another page.
<a href=“http://www.make-a-website.com/contact”> This text links to the contact page </a>
<a href=“http://www.cnn.com”> This text links to the CNN homepage </a>
Notice what’s happening:
“a” stands for anchor.
“href” is the attribute, defining the web address that the anchor text should link to.
The address, http://www.make-a-website.com/resources, should be within quotation marks – otherwise the browser will fail to interpret the code. You can link to any webpage, whether internal (within your website) or external (to a different website on the internet).
<p> This is a sample paragraph with text that spans multiple lines. You can <em> add emphasis to some text </em> or make some other text <strong> bold </strong> using those tags. To mark the end of the paragraph, you must add the following tag: </p>
Adding an image
To add an image to the page, we use the <img> tag, but no closing tag this time. The source i.e. the exact location on the hard drive or server folder of the image must be defined within this tag.
Example code for the following image would be something like:
<img src=”http://make-a-web-site.com/wp-content/uploads/2013/06/index1.jpg” width=”259″ height=”195″ alt=”some text” />
Source: empower network.com
Here are a few more HTML tags and their usage:
<html> Used at the beginning of every HTML document. The document must end with the tag </html>.
<title> </title> Page title – defining the title of the page. Used right after the <html> tag.
<br> – adding a line break. Use to add space before starting a new line of content on the page.
<hr> Horizontal line
<ul> Starting an unordered list. You must add the list items as follows:
- <li> List item 1 </li>
- <li> List item 2 </li>
- <li> List item 3 </li>
</ul> Ending the list
Your first HTML page
Every HTML page has a structure which you must adhere to when making your web pages. And now that you understand a few tags, you are ready to create your first web page using HTML. Don’t worry about learning all the tags at once, just make sure put the commands within the <> symbols and properly terminate them with </> (for those requiring a closing tag).
The following is the basic structure of a web page
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
<title>The Title of My Page</title>
<img src=”aniceimage.jpg” alt=”some text” width=400 height=200>
<h6> Heading 6, smallest </h6>
<p>This is how I’ll add another paragraph. <p>
You do not need understand or memorize the first part of the document, as it is standard for all pages – just copy and paste it for every document. Notice that the title must always be within the <head> </head> tags, while the rest of the page content must be within the <body> </body> tags.
As you can see from the above primer on HTML, the language is really easy to learn. We have by no means covered enough of it – but the whole point was to show you how easy it is to learn HTML. If you’re interested in learning everything about the language, check out the following list of online resources:
1. W3Schools.com – a step by step, simple guide to HTML
2. HTMLGoodies.com – learn everything you need to know about HTML
3. HTMLdog – a list of all HTML tags with examples on usage.