HTML Interview Questions

HTML Tutorial for Beginners –Learn HTML Online

/0 Comments/in /by

HTML Tutorial provides the basic and advanced concepts of HTML and this Tutorial is designed for beginners and professionals to learn HTML Tutorial Online.  This post leads you through the basics of Hyper Text Markup Language (HTML). HTML is the building block for web pages. You will learn to use HTML to author an HTML page to display in a web browser.

HTML Tutorial for Beginners

What is HTML?

HTML is HyperText Markup Language. Hypertext because it is more than text, and markup language because it is a language for marking pieces of text. HTML is the language of web browsers. Using HTML, you describe how your document is structured so that web browsers can display it appropriately. Unlike normal desktop publishing, with HTML you only work in generalities, if you know what you’re doing. Rather than specifying exactly what your document looks like, you specify which parts of the document are important, and in what way they’re important.

When writing HTML, you surround various parts of the text with descriptions of what added meaning you want the text to convey. For example, if you want a word to be emphasized, you surround that word with the ‘emphasis’ HTML code. Almost all HTML ‘markup’ is done by surrounding the words with the code that affects it. The beginning tag is always a word, such as “em”, surrounded by the greater than and less than symbol: <em>. The ending tag is the same thing but with a slash added: </em> There are two forms of HTML: HTML and XHTML. I’ll be using XHTML here, but will try to point out the differences with HTML, and why you would use one or the other.

What is an html File?

HTML is a format that tells a computer how to display a web page. The documents themselves are plain text files with special “tags” or codes that a web browser uses to interpret and display information on your computer screen.

  • HTML stands for Hyper Text Markup Language
  • An HTML file is a text file containing small markup tags
  • The markup tags tell the Web browser how to display the page
  • An HTML file must have an htm or html file extension

Almost everything in HTML is a tag describing the meaning of text. Even the web page itself needs to be surrounded with a tag saying that this is a web page. That tag is the HTML tag. At the very top of the document, type “<html>”. At the very bottom of the document, type “</html>”.

Try Example

Open your text editor and type the following text:

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

Save the file as mypage.html. Start your Internet browser. Select Open (or Open Page) in the File menu of your browser. A dialog box will appear. Select Browse (or Choose File) and locate the html file you just created – mypage.html – select it and click Open. Now you should see an address in the dialog box, for example C:\MyDocuments\mypage.html. Click OK, and the browser will display the page. To view how the page should look,

What you just made is a skeleton html document. This is the minimum required information for a web document and all web documents should contain these basic components. The first tag in your html document is <html>. This tag tells your browser that this is the start of an html document. The last tag in your document is </html>. This tag tells your browser that this is the end of the html document.

The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.


The text between the <title> tags is the title of your document. The <title> tag is used to uniquely identify each document and is also displayed in the title bar of the browser window.

The text between the <body> tags is the text that will be displayed in your browser.

The text between the <b> and </b> tags will be displayed in a bold font.

How to View HTML Source

A good way to learn HTML is to look at how other people have coded their html pages. To find out, simply click on the View option in your browsers toolbar and select Source or Page Source. This will open a window that shows you the actual HTML of the page. Go ahead and view the source html for this page.

HTML Tags

  • HTML tags are used to mark-up HTML elements
  • HTML tags are surrounded by the two characters < and >
  • The surrounding characters are called angle brackets
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The text between the start and end tags is the element content
  • HTML tags are not case sensitive, <b> means the same as <B>

HTML Tutorial Basis

HTML and Body

This is what HTML tags look like: a tag name between angle brackets surrounding some text, and then the same tag name with a slash in front of it to end the text. Use all lower case for your HTML tags. HTML recommends it, and XHTML requires it.

The main part of your web page—the part that people actually see when they’re visiting at your web page—is the body of the document. Surround all of the text—inside the HTML tags—with “<body>” and “</body>”. The body is where the meat of the document goes. All of the information that you’re giving to the reader goes in the body.

HTML Head

Your web document has a <head> just as it has a <body>. The <head> is where you store information for computers, so that they can categorize your document and summarize it.

HTML Title

For example, try bookmarking your web page. Most likely, the bookmark will be nothing more than the file name. That’s because you haven’t told computers what title they should use for your page.

At the top of your document, between the “<html>” and the “<body>”, add:

<head>
<title>TechnoSAP</title>
</head>

Save the document, and then try bookmarking it. You’ll see that the title of your bookmark—most likely—is now “Technosap”.You should keep your title short and descriptive. It will be used by visual browsers to title bookmarks and tabs, and by search engines to title search results. Many browsers will also show the title at the top of the browser window.

HTML Description

You can also add a description to your web page. The description provides a summary of your page for search engines and other software to use. The description is contained in a meta tag. Meta tags come in two parts: the name and the content. They always go in the <head> of the document.

Add this meta tag to the <head> area, below the title:

<meta name="description" content=" Online Tutorial Site for Beginners." />

In HTML, the meta tag doesn’t use “/>” to end, nor does it use “</meta>”. It just ends at the “>”. The meta tag also illustrates another feature of HTML tags: they can contain attributes. Attributes are in the form “name=value”. Here, description and name are both attributes of this meta tag.

HTML Tutorial for Beginners

Why Use Lowercase Tags?

You may notice we’ve used lowercase tags even though I said that HTML tags are not case sensitive. <B> means the same as <b>. The World Wide Web Consortium (W3C), the group responsible for developing web standards, recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) requires lowercase tags.

HTML Tag Attributes

Tags can have attributes. Attributes can provide additional information about the HTML elements on your page. The <tag> tells the browser to do something, while the attribute tells the browser how to do it. For instance, if we add the bgcolor attribute, we can tell the browser that the background color of your page should be blue, like this: <body bgcolor=”blue”>.

HTML Keywords

It is also useful to add keywords to your web page. Keywords help software categorize your web page. Some search engines will use your keywords, although because they can be easily spammed most search engines will not provide high ranking to them. (Google, for example, claims not to use them at all.) They’re still useful for internal search engines, for other software that accesses web pages, and to help you categorize your page content.

<meta name="keywords" content="tutorial, software" />

Keywords are listed separated by commas.

HTML Style sheet

Often, you’ll have a company-wide or site-wide style sheet that you’ll want applied to all web pages. In HTML, this is “CSS” or “Cascading Style Sheets”. CSS is another entire tutorial, but I do have a style sheet ready for use with this review. Add this tag to the head of the document:

<link rel="StyleSheet" type="text/css" media="all" href="review.css" />

Like the meta tag, the link tag does not surround text, so it uses the abbreviated ending form in XHTML and has no ending in HTML. It also contains the attributes rel, type, media, and href. The first attribute, rel, is the relation between this link and the page that contains the link tag. It’s a style sheet for this page.

It’s type is that it’s a text file that contains CSS. It is meant for all media (print and screen being two common media), and it links to the href, or hypertext reference, “review.css”.

HTML Tutorial for beginners explain what is HTML, and it gives a brief understanding of messaging and important HTML language concepts are explained above post. I will be adding more posts in XTML tutorial, so please bookmark the post for future reference too.