Starting HTML -HTML Tutorial for Beginners

HTML ( HyperText Markup Language), is a mark-up languages used to encode Web pages. It provides the information to the web browser for laying out and presenting web pages.

HTML is also invisible to viewers of the web page as it is only meant to be used by the web browsers

Learning HTML isn’t strictly necessary in order to use WordPress as WordPress comes with a WYSIWYG web page editor.

However having a basic knowledge of HTML and how it is structured will come in useful from time to time.

Learning HTML

There are many books available on HTML and I would recommend you get one for reference.

However I find most books try to cover too much and don’t concentrate enough on the basics so that a beginner can build a solid foundation.

My aim here is to cover the basics of HTML so that you can start using it and feel comfortable with it.

HTML Tags

HTML consists of a series of tags which are enclosed in Triangular brackets (< >).

 HTML tags are in pairs and are case-insensitive; that is, it doesn’t matter whether you type them in upper or lower case.

Using upper case makes the tags easier to pick out in a document, but you can do whatever you like.

HTML tags are used by the browser for formatting the page but they are not displayed. Tags typically occur in ‘begin-end’ pairs.

These pairs are in the form

<tag> …. .. </tag>

Where the <tag> indicates the beginning of a tag-pair, and the </tag> indicates the end. (The dots indicate an arbitrary amount of content between the tags.

Exercise 1.

Which of the following three lines of HTML is correct and what is wrong with the other 2?

  1. This is a web page</b>.
  2. This is a web <b>page</b>.
  3. This is a web <b page</b>

Valid Web Pages

To be valid (standards compliant) each web page must contain certain elements. However as you have already seen non compliant HTML is still displayed correctly by the browser.

The first and last tags in a document should always be the HTML tags. These are the tags that tell a Web browser where the HTML in your document begins and ends.

Answer to exercise 1: 2 is correct, 1 is missing an opening tag, and 3 is missing a > on the opening tag.

The absolute most basic of all possible Web documents is:

<HTML></HTML>

That’s it. If you were to load such a page into a Web browser, it wouldn’t do anything except give you a blank screen, but it is a valid Web page.

Apart from a few exceptions HTML is case insensitive and so <HTML> is the same as <html>.

Next come the header tags <HEAD> and </HEAD>.

The header tags contain all of the document’s header information like the document title and so on.

They are not displayed by the browser.

Between the title tags <TITLE> and </TITLE> you should have the title of your document in this case —My First Web Page—.

This will appear at the top of the browser’s title bar, and also appears in the history list of the browser and any bookmarks.

If you don’t type anything between the title tags or don’t include the title tags at all then the browser will typically use the actual file name for the title which can be confusing.

Finally the body tags <BODY> and </BODY>, between which you find everything that gets displayed in the browser window.

A basic HTML page that includes all the required tags is shown below:

<HTML>

<HEAD>

<TITLE>My First Web Page</TITLE>

</HEAD>

<BODY>
Main page content goes here

</BODY>

</HTML>

 

Quiz

Here is a sample of html code that is incorrect. There are two errors can you spot a correct the mistakes.

Question 1

<HTML><HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
<h1>Welcome to the Test Website<h1>
<p>This is short opening paragraph followed by a bullet list.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</BODY>

 

Answer to Exercise 2

Closing html and closing h1 tags are missing

Lists

If you have a number of items to place in a list then you can use either plain, numbered, or bullet lists as well as lists of definitions.

The lists are formed by a tag to specify the list type -ordered or unordered, and a secondary tag to specify the lists items.

Primary code tags are:

  • <OL></OL>– ordered list
  • <UL></UL>–unordered list i.e. bulleted

Secondary Tags

  • <LI></LI>

Unordered list Example:

  • This is an unordered list-item 1
  • This is an unordered list-item 2
  • This is an unordered list-item 3

This is the HTML to produce the list above. My notes are in red

html lists

Images

Links and Linking

Links allow the reader to jump from one section of a document to another section of the document or to a new document altogether. This is shown below:

linking
In order to link you require two things:

  • The start of the link.
  • The destination of the link.

The start of the link is called the hotspot, and it shows up in the browser as underlined, and normally in blue until it has been clicked.

Link Destinations

The destination of the link can be either:

  • Another web page
  • A particular location in an another web page (named anchor or bookmark).
  • A location within the same page -The ability to link to a specific location within a web page is particularly useful when dealing with large web pages.

When the destination is another web page then the destination is the URL of the web page.

The URL can be either a relative URL (if it is on the same website) or an absolute URL (if it is on another website).

We are only going to cover the most common (99% of links), which is linking to another page.

To designate the link we surround the text, or an image with the anchor tag <A></A>.

Here is the HTML for a link to page1.html.

link-code

Tag Attributes

Notice the text highlighted in yellow is the anchor text and should appear as blue underlined text indicating a link.

The opening A tag has an attribute ( href) which is the url of the page that the link points to.

Test Your Current Knowledge

Here is a very basic HTML quiz.

Note: answers are below

Question 1: What HTML tag will you see at the very top of a web
page?

  1. body tag
  2. Head tag
  3. Title Tag
  4. HTML tag

Question 2: What is the HTML tag <b> for:

  1. To Insert a line break.
  2. Make the text bold.
  3. Used to begin a new line.

Question 3: What is the HTML tag to insert a line break:

  1. <br>
  2. <break>
  3. <b>
  4. </br>

Question 4: What HTML tag isn’t used with lists:

  1. <ol>
  2. <li>
  3. <ul>
  4. <list>

Question 5: What do you think the HTML tag <img> is used
for:

  1. To make text italic
  2. Insert an Image
  3. Insert a video
  4. To create a border

Answers

  1. D the HTML tag <HTML>
  2. B -Make the text bold
  3. A -The <br> tag
  4. D -the <list> tag
  5. B – To Insert an Image

HTML Video

This is an old video that I made for complete beginners

HTML Books

I tend to use books as a quick reference, when I need to do something. You will find a huge selection of HTML related books at Amazon:

Related Articles and Resources:

Save