Introduction


HTML hasn't been around for many years. The first web pages began in November 1990, and back then, there were little to no HTML standards to follow. As a result, a group called the World Wide Web Consortium formed to set standards for coding HTML.

Every resource available on the Web -- HTML document, image, video clip, program, etc. -- has an address that may be encoded by a Universal Resource Identifier, or "URI".

URIs typically consist of three pieces:

The naming scheme of the mechanism used to access the resource..

The name of the machine hosting the resource.

The name of the resource itself, given as a path.

Since HTML documents are just text files they can be written in even the simplest text editor..

When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages.

What is HTML?

HTML is a markup language for describing web documents.

HTML stands for Hyper Text Markup Language.

A markup language is a set of markup tags.

HTML documents are described by HTML tags.

Each HTML tag describes different document content.

Opening and Closing tags


HTML code is most commonly referred to as tags. The majority of tags have both an opening tag and a corresponding closing tag. Every HTML file begins with this opening tag:

<html> Every HTML file ends with the corresponding closing tag: </html>

Head tags

Notice the / in the closing tag? All closing tags must have this slash. You know why? Because it's a closing tag, that's why. Below the opening html tag come the opening and closing head tags:

<head> </head>

Title tags

The head tag doesn't have any affect on what appears on the web page, it's job is to hold certain other types of tags, one being the title tag:

<title>My first title</title>

Look at that, there's some text between the opening and closing title tags, this is where the title of a web page is entered, it will appear in the browser's title bar:

the closing head tag. Remember, a closing tag has a slash ( this thing / ). So this is what the code should look like so far:

<html> <head> <title>My First Webpage</title> </head> </html>

Body tags

Now let's get to putting something on the webpage. Everything that is seen on web pages is found between the opening and closing body tags:

<body> </body>

Example:

<html> <head> <title>My First Webpage</title> </head> <body> Hello, this is my first webpage </body> </html>

Save the code with .Html extension and run in your browser this is the first web program you have done

Heading tags

Lets add the web page a little more eye catching by adding a large, bold heading using the heading tags:

<html> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </html> <p>The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading.<p>

Another block tag is the paragraph tag:

<p></p>

Any text put between the opening and closing p tags makes one paragraph.

Break tag

Hitting the “Enter” key has no effect on web pages, to start a new line within a paragraph the br tag is needed:

</br>

The br tag is one of the few HTML tags which does not have a corresponding closing tag. These kind of tags are called “single” tags. Here is an example of how the br tag can be used in a paragraph

the closing head tag. Remember, a closing tag has a slash ( this thing / ). So this is what the code should look like so far:

<html> <head> <title>My First Webpage</title> </head> <p>this is first,<br>a webpage!</p> </html>
                 The result would look like this:
                 this is first,
                 a webpage!
                 

Formatting Text

Words within a sentence or paragraph can be made bold with the strong tag like so:

<p> One word in this sentence will be bold <strong> guess</strong> which one? </p>

Italicized words are made by enclosing them in em tags:

<em>im here to teach you html </em>

The strong and em tags belong to a group of tags known as “inline” tags, these kind of tags don’t force text to start on a separate line the way block tags do. They can be used together to make text both bold and italicized:

<strong> <em>im here to teach you html</em></strong>

It doesn’t matter which tag is used first but it is important to note that when using combination of tags their corresponding closing tag should be listed in the correct order, if the order starts with the opening em tag, it should end with the closing em tag, for example

This is correct - <em><strong>text here</strong></em> This is not correct - <em><strong>text here</em></strong>

Another inline tag is the span tag:

<span>this is span tag</span>

The span tag alone doesn’t do anything but when combined with CSS it can change the appearance of text within a sentence

Attributes


We can change the way tags display things on web pages by putting what’s called an "attribute" into an opening tag. Many of the things that were done with attibutes are now done with CSS, so this lesson will show you how to put CSS code into tags by the use of the style attribute:

<h1 style="text-align:left;">this is my first demo</h1>

The style attribute’s job is to hold CSS code, that’s the stuff in the quotation marks. In the above example it's telling the h1 tag to center the text on the web page. Notice that there is a colon between text-align and left and at the end of left there is a semi colon. This is how CSS commands are structured.

The text in our example can further be changed by adding another CSS command to the style attribute:

<h1 style="text-align:left; color:green;">this is second demo</h1>

The result would be green text left on the web page. An unlimited amount of CSS commands can be added to the style attribute as long as they are enclosed between the quotation marks and each command ends with a semi colon.

The style attribute can be put in any opening tag to change some aspect of the tag, for instance when used with the body tag, all the text on a web page can be displayed in a different font:

<body style="font-family:arial;">

The font-family command changes the text font, in this example it’s in Arial style.Adding a CSS background command in the body tag changes the page's background color:

<body style="background:red;">

That would give your web page a red background (you don’t really want a red web page do you?). Colors can be specified by either using the name of the color or its color code, for example #ff0000 is the color code for red:

<body style="background:#ff0000;">

The number sign, # must be included in front of the code when specifying colors by their color code

Graphics

Making a website is not complete without adding graphics to make it look nice and pretty. Placing a picture on a web page is done with the img tag. The img tag is a single tag so does not require a closing tag:

<img src="filename.jpg">

The img stands for "image", src is an attribute, it tells the browser where to find the picture. The stuff in the quotation marks is the file name of the graphic, replace filename.jpg with the file name of your picture and be sure it’s between the quotes.

To keep things simple, for now store your pictures in the same place as your web pages, for example if you keep your HTML files in a folder called "my pages", put your pictures there too.

Every picture on a web page has its very own img tag: <img src="button.gif"> <img src="button2.gif">

If an img tag is enclosed between the opening and closing p tags, the other image will start on a new line:

<p><img src="button.gif"></p> <img src="button2.gif">

Give your pictures a description by adding an alt attribute to the img tag like so:

<img src="button2.gif" alt="light blue button">

The alt attribute will make the description appear if a browser does not display images. In some browsers the description will also pop up when a mouse pointer is moved over the picture.

Links


Links, this is what the web is all about and it’s simple to do with anchor tags:

<a></a>

The anchor tag comes with the href attribute. It means “hpertext reference”. This attribute tells the browser where to find a link. A link to a web page within the same directory (folder) of the website would look like this:

<a href="filename.html">here goes text to be clicked</a>

The href attribute contains the file name of the destination web page. The file name is enclosed in quotation marks and it includes the html extension. The text between the opening and closing a tag is the link people will click. To keep things simple, for now place all your web pages in the same folder (directory).

Linking to another website is done by putting the entire website address (url) into the href attribute:

<a href="http://www.siteaddress.com">text to be clicked here</a>

Be sure that http:// is included in the website address. Turning an image into a link is done by surrounding the img tag with the opening and closing a tags:

<a href="filename.html"><img src="filename.jpg"></a>

Replace filename.html with the file name of the page or website address, and replace filename.jpg with the file name of your picture.

By default image links have a blue border around them, the border can be removed by adding the style attribute with a CSS border command:

<img src="filename.jpg" style="border:0;">

Lists

There may come a time when you would like to add a list to a web page, or maybe not, but just in case here is how to make a list. A list starts and ends with the "unordered" list tags:

<ul></ul>

The ul stands for “unordered list”, it will get you bulleted text, you know, a dot beside the text. The opening ul tag starts the list and the closing ul tag ends the list, in between goes the text surrounded by the opening and closing "list item" tag:

<li>this is list</li>

Example:

<ul> <li>horibble</li> <li>Terrier</li> <li>sony</li> </ul>

Tables

We’re talking here tables for holding data not the dinner table. Tables are useful in laying out the design of web pages so it’s well worth the time to learn how to make them. A table starts and ends with the table tag:

<table> this is the table tag</table>

Between the opening and closing table tags go a couple of other tags, the tr tag:

<<tr>this is table row</tr>

It stands for “table row” and will make up one row across the table. Between the tr tags are found the td tags:

<td> this is table data</td>

The td stands for “table data” it forms one box called a “cell” which contains content seen on the web page such as text or graphics. Here’s how the table code is put together:

Example:

<table border="1"> <tr> <td>hyderabad</td> </tr> <tr> <td>Nizamabad</td> <td>kadapa</td> </tr> </table>