HTML Basics

In this lesson we will discuss some basic tags of html standard web programming language. We will see how html link tags, paragraphs tags and image work. We will see some examples of each of these tags. Don't worry if you find these basic tags difficult to understand, we will discuss each of this tags in detail in the next upcoming lessons. Stay focused and you will definitely find our teaching methods interesting.

HTML Headings

Heading in common words are known as titles on a paragraph or some piece of text. These are used to make some text more visible and get attention from the reader. Similarly in html, heading tags are defined as titles of some piece of text or anything.

In html to make a heading we us <h1> tags. There are total six types of headings we can use in our html works. They start from <h1> and end at <h6>. The <h1> heading is the largest heading and <h6> is the smallest one. These tags also require closing tags. The closing tags are defined as </h1>, </h2>, ... ... , </h6>. Here is an example of these tags. It shows proper method to use these tags.

Example:-

<h1> This Is The H1 Type Heading </h1>

<h2> This Is The H2 Type Heading </h2>

<h6> This Is The H3 Type Heading </h3>

<h4> This Is The H4 Type Heading </h4>

<h5> This Is The H5 Type Heading </h5>

<h6> This Is The H6 Type Heading </h6>

Anything which comes between opening and closing tags of HTML headings will be rendered as headings by Internet browsers. We have not showed you the browser rendered results of this example because these results vary from browser to browser and also depend on type of browser used and settings of browser too. The best way is that you make yourself an HTML file of this example and see the result yourself. Find out more about making an HTML file.

HTML Paragraph

In the last section of HTML headings we showed that you can apply headings to a certain piece of text in an HTML document. Usually this text in an HTML document is showed using a paragraph tag. Paragraph tag starts from <p> and ends at </p>. It is absolutely necessary to close the paragraph tag. There are some HTML tags which do not require closing tags and we will talk about this in upcoming lessons. Here is an example of HTML paragraph tag.

Example:-

<p> this is a paragraph. It can include text, images and other multimedia and interactive content. </p>

Go try it in an HTML file.

HTML Links

HTML links are defined using <a> tag and it has a closing tag of </a>. There are many attributes associated with the link tag and we will discuss all of them in a separate lesson. Here comes an example of HTML link tag.

Example:-

<a href="http://allwebprograming.blogspot.com/">This Is A Link To A Web Address</a>

Link styles also vary from browser to browser therefore you will have to try it yourself in order to see the best result. A single html tag can have multiple attributes. What are attributes? Why they are so important? These questions we will answer in later lessons.

HTML Images

Images and other multimedia can be added into Webpage using HTML code. We use <img> tag to add images in an HTML document. Like HTML link tag, HTML image tag <img> can have one or more attributes. Don’t worry with the world attributes. There is a whole lesson dedicated for HTML attributes only. An example of HTML link tag is given below.

Example:-

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

The src attribute can have different values depending on the location of your image file. we will discuss that later in a lesson.

This was just an introductory lesson for beginning real HTML learning. In fact you need to master all or at least some more commonly used HTML tags in order to master HTML programming language. This was somehow a boring lesson but be patient, you will get every single detail on every single HTML tag in our next lessons.

HTML Elements

The whole HTML programming language is defined using HTML Elements. It is the main building part of HTML document. An HTML document is everything from start tag to the end tag. You will better understand this by seeing an example of this.

Example :-

Start Tags*	The HTML Document	End Tag*
<p>	This is a paragraph	</p>
<a href="homepage.html"	This Is a Link	</a>
<br>

* The start tag is often called opening tag and end tag is often called closing tag by webmasters. It’s nothing serious although, you can call your tags whatever name you like easily. But professionally speaking we suggest you to use documented terms.

General HTML Syntax :-

We have taught you the general HTML syntax in the last example in very detail. But here is a quick check list of important points to remember and keep in mind.
1. An HTML element starts will always start with start tag/opening tag.
2. An HTML element will always start with end tag/closing tag.
3. The element content is everything between the start and the end tag.
4. There are some HTML Elements which are absolutely empty, meaning that they have empty content.
5. Empty Elements are closed in the start tag.
6. Almost every HTML element has some attributes.
Note : we will discuss HTML attributes with more detail in the next chapter.

Nested HTML Elements :

HTML documents consist of nested HTML tags. It means that on HTML tag can contain other HTML tags. For more explanation, see the example below.

HTML Document Example :

<!Doctype html>
<html>
<body>
<p> This Is My First Paragraph. </p>
</body>
</html>

The HTML document example above has 3 HTML tags nested inside each other. See the explanation below for more understanding.

HTML Example Explained :

The <p> Element :
<p> This Is My First Paragraph. </p>
• The <p> element defines a paragraph element in an HTML document.
• The <p> element has a starter tag <p>.
• The <p> element has an end tag </p>.
• The element content is : This Is My First Paragraph.

The <body> Element :
<body>
<p> This Is My First Paragraph. </p>
</body>
• The <body> element defines the body of the HTML document.
• The element has a start tag <body>.
• The element has an end tag </body>.
• The element content is another HTML element a <p> element or you can say a paragraph element.

The <HTML> Element :
<html>
<body>
<p> This Is My First Paragraph. </p>
</body>
</html>

The <html> element defines the whole HTML document as described in this lesson : HTML Document Type Declaration.
• The element has a start tag <html>.
• The element has an end tag </html>.
• The element content is another HTML element (the body element) which contains entire HTML page code.

Don't Forget The End Tag :

Some HTML Elements might display correctly even if you forget the end tag. See example below.
<p>This Is A Paragraph.
<p>This Is A Paragraph.

The example above works in most browsers, because the closing tag is considered optional. But it is highly recommended that you always use both closing and opening tags. HTML language changes its specifications and this change can cause problems if you use previous tags of older versions of HTML. Never rely on this. Many HTML Elements will produce unexpected results and/or errors if you forget the end tag.

Empty HTML Elements :

HTML Elements with no content are called empty Elements. Some of these tags are used for defining style information like break line tags.  <br> is an empty element without a closing tag.

(The <br> tag defines a line break).

Tip : in XHTML, all Elements must be closed. Adding a slash inside the start tag, like <br/>, is the proper way of closing empty Elements in XHTML (and xml).

HTML Tip : Use Lowercase Tags :

HTML tags are not case sensitive at all. You can use both uppercase and lowercase letters in writing HTML tags but it is highly recommended that you use only lowercase letters in writing HTML code because some of the browsers might not render HTML with uppercase letters correctly. <p> means the same as <p>. Many web sites use uppercase HTML tags. But we discourage this practice for your own safety and flexibility.

It is also recommended by w3c organization that all web developers must use lowercase letters while writing HTML Web Pages.

HTML Editors

What Is A Word Processor?

A word processor is program which is used to write simple text and format it using different styles of decoration and font size color or font etc. Therefore it is called a word processor because it handles text with formatting and saves files with formatting. Microsoft office is a good example of a word processor. You can design your cv's, product brochures, presentations and other office related reading material in Microsoft word. This will therefore be called a word processor.

What Is Text Editor ?

A text editor is program which deals with only simple text and nothing more. It has nothing to do with any type of style information and formatting. It does not save any font size, font color information. A classic example of a text editor is windows notepad. You can notice easily that it does not save style information and only allows us to type clear text with no extra formatting.

Similar programs are used to write codes of programming languages. We will show you how you can use a simple text editor like Microsoft notepad to edit and save your html files and render them in a browser.

Note : Html can be learned by using a professional html editor like :

1. Adobe Dreamweaver
2. Microsoft expressions web
3. Notepad ++

But senior webmasters recommend that using a simple text editor is the best way to learn html. Therefore we will be using Microsoft notepad. So let’s get started.

Step 1. Opening Notepad On Windows Operating System.
Go To Start > All Programs > Accessories > Notepad
This will launch windows notepad main window and a blank file will be opened automatically for you to put some text in it.
Step 2. Typing Html Code.
Type the following code in the main program window of notepad.

<!Doctype html>
<html>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph.</p>
</body>
</html>

Step 3. Saving Your Document.

Select (save as...) in notepad file menu and type the file name in the name box. When you want to save a file in html format, you can use both (.htm) or (.html) extensions for your file type. There is no difference in both of these file types. Browsers will render both files in the same way. So you should not be confused about that. It’s entirely up to you that which file extension you want to use in your file.

HTML Editors

The HTML Document Type Declaration

There are many different versions of HTML over internet. Use of other web programming languages like JavaScript, JQuery, CSS and XML is very common on a lot of websites. Therefore to tell web browsers which version of HTML we have used in current document we use HTML Document type declaration or HTML version type declaration.

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

The very first line of example above displays a demonstration of how HTML DOCTYPE Declarations are used. We will explain it to you in detail now. The DOCTYPE declaration helps browsers understand which type of HTML that specific webpage is based upon. There are many documents available online over internet. A browser can only render a webpage correctly only if knows which type of HTML that webpage is using.

Below are some examples of DOCTYPE Declaration tags (What are HTML Tags?) According to HTML versions.

HTML 5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Note :

The DOCTYPE tag must be placed at very beginning on the webpage. Before <html> tag. This DOCTYPE declaration tag has no ending tag. It is an instruction to the browser about the HTML version type we are using in our webpage.

Difference between HTML 4.01 and HTML 5 DOCTYPE declarations:

In HTML 4.01 there are three methods to define a DOCTYPE tag. But HTML 5 has only one method to define DOCTYPE tag in a webpage. It is one of the many great improvements The HTML has made. Now the web developers and code writers have only one method to remember and use every time they develop Webpages

The HTML Document Type Declaration

. That particular method is given below again for your knowledge.

<!DOCTYPE html>

This single line of code is enough to tell all browsers in world to consider that the webpage they are rendering is developed in HTML 5.

Useful Tips : _

• Always include complete DOCTYPE tag in all your web pages of website.
• You should note that DOCTYPE declaration tag has no ending tag. See our paper on (introduction of HTML Tag).
• There are many free HTML type validators online which will check that you have used correct type of HTML declaration. Just search them on Google and use it to check your document type.

What Is HTML (Hyper Text Markup Language)

HTML or Hyper Text Markup Language is the largest and most commonly used and well documented programming and developing language right now at this time. Almost every person who is somehow related to information technology industry is aware of this language.

HTML is the basic language which is used to design websites online. It is the heart of every single page over internet and. Without HTML no one will be able to visit any kind of web pages online without HTML. It’s a miracle of HTML that we see and use websites online daily. Whenever, you will go to an institution for web designing course, you will notice that they have put HTML language on top of their web designing course outline. This is enough to clarify the fact that every single item you see on internet is just because of HTML.

The first person giving the idea of HTML was physicist Tim Berners-Lee. Since 1980 many versions of HTML have been released. The yearly development of HTML is shown in table below.

What Is HTML (Hyper Text Markup Language)

The latest version of HTML is HTML 5. This is very different with respect to the previous versions of HTML 5. Many modifications have been made and many things have been changed.

HTML or Hyper Text Markup Language is a set of markup tags. These markups tags define the content of any web document online. Stay with me to learn HTML step by step in a very easy method. I can assure you that after learning HTML from this blog. You will be able to design beautiful websites without any trouble in writing code. So stay with me and share for others too.

Assalam.o.Alaikum

This Blog Is Dedicated Specifically For Learning All Web Programming Languages. You Will Get Lectures On HTML, CSS, Javascript, JQuery, Python And Other Similar Languages Which Are Used Specifically For Web Designing And Programming. So Join Us. I Can Assure You That You Will Not Find These Lectures Anywhere Else Over The Internet. All Courses Are Very Explained And Illustrative. Examples And Explanations Are Also Given. Also You Will Get Comprehensive Free PDF eBooks Specifically Written For Web Programming. So Don't Forget To Join Us And Share This Useful Knowledge Too.