Writing Code – The Basics

Writing code with HTML tags tutorial

Learn How to Write HTML Code for Websites with these Tags.

Some clients have got excited about their website, wanting to be more hands-on and have asked me to teach them how to write articles in code, so they can do it themselves.

Writing basic code for websites is not difficult, but first you need to learn some web site terminology, before you learn how to use some of the basic tags.

HTML is an acronym for ‘Hyper Text Markup Language’. This is the base language that is used for creating websites and web pages within them. A website created in pure html is also referred to as a static website. In other words, it does not interact with the visitor other than in the most basic way. It stores no data and can not return data other than what is consistently on the page itself. just about every website designed by Thinking IT is a dynamic website which used DHTML and PHP languages, giving it more functionality.

TAG is a set of markup characters that are used around an element to indicate its start and end. Tags can also include HTML or other code to specify how that element should look or behave on the page, and when linked to a style.css file, become quite powerful.

CSS is an acronym for Cascading Style Sheet and are used to define the look and feel of a web site outside of the actual HTML file(s) of the website. CSS makes formatting and styling for web pages easy because you can change the style of a tag throughout the entire website; all of its pages by changing just one file, without having to make changes to the content.

Important Note: When writing the code, instead of using Microsoft Word® open notepad instead, as this allows you to write exactly what is required without all the mark-up language created by Word For Windows®.

So What are the Basic HTML Tags I need to know?

There are many tags that make the words and images look and appear different on your web page, but for this tutorial we are going to look at some of the basic ones required to enable you to easily write some articles using html code.

A tag uses < and > at the beginning and a < with a / and > at the end of the text or image you wish to style.

Heading Tags <h1> to <h6>:

If your website has been designed by Thinking IT, your style.css file includes the styling of six different headings, h1,h2,h3,h4,h5 and h6.

For those clients that have a content management system for their website, uploading articles written in code is easy and you will have a tab (html) when creating your article to add your freshly written code.

When adding your title the h1 tag, <h1> will automatically be the name or title of the article, so you never have to worry about that one.

Some times you may wish to include a h2 tag, <h2> to give a more descriptive name to your article, commonly under an image at the top of the article you are writing and if you are writing an article that has several different points you wish to make a h3 tag. <h3> is often used.

With this tutorial article, I wrote a h2 tag at the top under the image like this:

<h2>HTML Tags used for writing articles in code.</h2>

You will also see a h3 tag used above that I wrote like this:

<h3>So What are the Basic HTML Tags I need to know?</h3>

The text is ‘wrapped’ around opening < > and closing < / > h1 and h3 tags respectively.

Paragraph Tag <p>.

When you are writing sentences within your article you will have a number of paragraphs. Each paragraph is opened <p> and closed </p> with a p tag.

This text is in a paragraph tag and written in code looks like this:

<p>This text is in a paragraph tag</p>

To ‘centre’ the text in a paragraph use:

<p style="text-align:center">This text is centred on the page</p>

DO NOT USE: <p align="center"> As this has been depreciated and will not be supported by browsers in the future.
Important: note the spellings of ‘centre’ for some countries in English and the code version ‘center’.

You may want to start a new sentence on a new line without creating a new paragraph however, and this is achieved with a line break tag that looks like this: <br />.
As you can see I have started this sentence on a new line without creating a new paragraph by placing <br /> at the end of the last sentence.

Adding emphasis to words using Tags.

Sometimes while writing a paragraph there are words that you may like to emphasise, making them stand out to the reader. There are tags that do this for you, making words appear more bold, or in italics for example is quite easy if you wrap the word around the appropriate tag.

To make words more bold use the strong tag <strong> not the <b> tag as this is redundant!
To make the text look italic use <em>.

This text is bold in code looks like this:

<strong>This text is bold</strong>

and This text is italic written in code looks like this:

<em>This text is italic</em>

Blockquote Tag <blockquote>.

The blockquote tag is used when you are adding a quote or words used by someone else; not your own.

Matt, one of my clients, asked me:

Can you show me how to write code?

Note that there is a “ enlarged; which is actually an image, and the text looks different to the normal text within this article plus it has been indented, with a space at the top and bottom. This ‘styling’ (which I will cover in another tutorial) has been added to the style.css file to make the blockquote tag look like this every time it is used, giving some emphasis to the words.

The code for the blockquote written above looked like this:

<blockquote>Can you show me how to write code?</blockquote>.

List Tag <li>.

Often when writing an article, you want to add a list. There are two tags that will do that for you, and will look different depending on whether you just want a basic unordered list, or whether you want to number the list of items.

Unordered List Tag <ul>.

With an unordered list of items, a bullet point is often the default used but you could use ticks, in fact any small graphic you like (which will be styled in your website’s style.css file).

Tags can be:

  • Unordered
  • Ordered

The code for the list above looks like this:

<ul>
<li>Unordered</li>
<li>Ordered</li>
</ul>

Ordered List Tag <ol>.

With an ordered list of items they will have a number before each item in the list, starting at one and ending with the total number in your list.

Tags can be:

  1. Unordered
  2. Ordered

The code for the ordered list above looks like this:

<ol>
<li>Unordered</li>
<li>Ordered</li>
</ol>

A Tag <a>.

The <a> tag is a very useful tag because it is used to set up a ‘hyperlink’, most often used to direct the visitor to another website page when ‘clicked on’.

Notice that the word ‘hyperlink’ looks different to the rest of the text. When you place your mouse cursor over it, you will see the text displayed: hyperlink is a link from one web page to another. Also notice what happens when you click on hyperlink; you will be directed to another page (where you will see a definition of the word hyperlink amongst other website terms).

The code for this looks like:

<a href="http://www.thinkingit.com.au/glossary-of-website-terminology" title="hyperlink is a link from one web page to another" target="_blank">hyperlink</a>

Let’s have a look at what this all means, broken down.

The href attribute defines the <a> tag as a hyperlink. Inside the " " you place the url of the website page that you would like the visitor to be directed to when the hyperlink is clicked on (I have used what is called an absolute path url here which includes all the http//www…).
After that you will notice the title attribute; again inside a pair of " " (shift + the comma key, which is normally next to the enter key on your keyboard). This title is displayed when the visitor places their mouse cursor over the hyperlink and gives some indication of what they can expect to find when going to the other page.

Lastly there is a target attribute, which specifies where to open the document. I have used "_blank" attribute value. The _blank means open the linked web page in a new window or tab.

Note: the word hyperlink is followed by </a> which is the end or closed ‘a tag’.
Note too: that the word hyperlink in our example above is underlined and blue when not moused over and is underlined and orange in colour when moused over (called the hover effect). This is controlled or dictated by the websites css file; hyperlinks are often underlined with a different colour to let people know there is a link to another page with some more relevant information.

If you are a client of ‘Thinking IT’ and would like to know more about writing articles for your website in code yourself or would like some help, simply:

Contact Thinking IT

We will be more than happy to show you how this is done, taking advantage of the style.css file your website has, or editing the file to display a different look.

I will add more tags to this page as they are asked for in the comment discussion below, so feel free to tick the ‘Notify me of follow-up comments by email’ at the bottom of this page.

In the mean time you may wish to get a better understanding of the terminology used to build websites:

Glossary of Terms

VN:F [1.9.22_1171]
How do you rate this information?
Rating: 5.0/5 (26 votes cast)
Article written by: Nigel Brookson

Website Designer, SEO Expert, Philanthropist, Entrepreneur. Follow me on Twitter, plus me on Google+, like me on Facebook and visit my personal website.

What Readers Have Said:

  1. John Michael Sheehan says:

    Wow, marvelous blog layout! You make running a blog look easy. The whole look of your website is great and this tutorial on how to write html code is most useful – Thanks.

  2. I have had many comments about the new glossary of website terms page and how useful it has become to aspiring code writers.

Comment Policy: Your comments are valuable to us but will only be posted if you use your real name.
Comments you make should be relevant to the article. Any comment that is written soley for back linking purposes will not be published!

Your Opinion Matters. Have ‘Your Say’ about this article here:

*