Sunteți pe pagina 1din 52

LESSON-1 HyperText Markup Language or HTML is the basis of the whole World Wide Web or WWW.

Almost every page on the www contains some of the HTML instructions. Broadly speaking, HTML is a markup language used to create web pages for the display over the internet. It contains markup instructions in the forms of tags enclosed in angle brackets <>, which an internet browser uses to render or display information. The information can be in the form of text, images, animations etc. A simple HTML web page: <html> <head> <title>PageTitle</title> </head><body>BodyElementsGohere</body> </html> Please do not worry about the different elements that constitute the above code. I just wanted you to have a look at a simple HTML web page. The complete explanation of the above code will come under discussoin in the later pages / lessons. Here I want you to notice that each HTML instruction is enclosed in <>, combined they are called tags. Each tag in the above code has a start and an end tag. The end tag contains a / before the HTML instruction and after the < sign. Note that not every HTML tag is paired, some of them are also stand alone, discussed later. The whole HTML tags are enclosed by <html> and </html> tags. Software Requirements to learn HTML: You only need a web browser like Internet Explores or FireFox and Notepad, which comes with every Microsoft Windows installation. Mac users may use TextEdit. After typing the HTML code in the text editor of your choice, save the file with an .htm or .html extension. To see the output, just double click the file, the file will be opened in the web browser. After you have learned the material of this tutorial you will be able to use advanced HTML editors like FrontPage or DreamWeaver.

LESSON-2

The <head> Tag: The contents in a normal HTML web page are enclosed in <html> and </html> tags. The first tag after the <html> tag in a normal HTML page is the <head> tag. The <head> tag contains other tags containing metainformation of the page. One such tag is <title> tag, that is discussed in the following text. Other tags containing meta information will be discussed later. The <title> Tag: When we start writing our HTML, the first thing we encounter is the title of our page. Title appears at the caption bar of the browser window. So every good HTML page needs a title. Here is what you need to add a title to your web page: <title>This is my web page's title</title> You can wirte the text of your own choice. Be sure to write a meaningful title for your web page. The title should reflect the contents of the web page. It is like a topic sentence. A good title text contains up to 20 words. The <title> and </title> sould be surrounded by the <head> and </head> tags. If it is placed anywhere outside, it will not work.

LESSON-3 In this lesson we will learn about the text formatting capabilities of HTML. Before we proceed, recall from lesson one that every html web page is enclosed between <html> and </html> tags. Everything between<body> and </body> tags is displayed in a web browser window. To experiment with the coming tags, you need to write them within <body> and </body> tags. Making Text appear BOLD: To make the text appear as bold just place your text between <b> and </b> tags. <b>This text is bold</b> Output: This text is bold The same effect can also be obtained by using <strong> and </strong> tags. Making Text appear in ITALICS:

To make your text appear in Italics just place it between <i> and </i> tags. <i>This text is ITALIC</i> The same effect can also be obtained by using <em> and </em> tags. Output: This text is ITALIC Underlining Text: The text has to be surrounded by <u> and </u> tags to get it underlined. <u>This Text is underlined</u> Output: This Text is underlined

Strike Through: To make the text appear strike through, we need to enclose it within <strike> and </strike> tags. <strike>Strike Through Text</strike> Output: Strike Through Text Writing in Type Writer Style: To make your text appear in type writer style, also called in HTML as fixed width font, add <tt> to the beginning of the text and </tt> to the end. <tt>This is fixed width font</tt> Output: This is fixed width font Preformatted Text: Have you ever noticed space characters and necessary to add extra <pre> tag. Everything preformatted. that the browsers ignore extra blank space / white line spacing. However, sometimes it becomes spacing between text and lines. The solution is the enclosed within <pre> and </pre> tags appear as

<pre>This text is pre formated</pre> Output: This text is pre formated

LESSON-4 In this lesson we will continue exploring the text formatting capabilities of HTML. Making text appear BIGGER: To make your text slightly BIGGER, enclose your text with <big> and </big> tags. <big>This text is BIG</big> Output: This text is BIG Making text appear smaller: To make your text appear smaller, enclose your text with <small> and </small> tags. <small>This text is small</small> Output: This text is small Super Script: In mathematical equations we often need super script text. To add super script <sup> and </sup> tags are used. This text is <sup>super script</sup> Output: This text is
super script

Sub Script: In mathematical equations, like super script text, we also need sub script text. To add sub script <sub> and </sub> tags are used. This text is <sub>sub script</sub>

Output: This text is


sub script

Centering The Text: If you need to center the text, simply put your text within <center> and </center> tags. <center>This Text is Centered</center> Output: This Text is Centered Apart from just text, you can make anything (images, tables etc.) appear in the center of your web page by surrounding it with the <center> and </center> tags.

LESSON-5 The <font> tag in HTML is used to control the font face, color and size of text. Its end tag is </font>. Changing the size: The size of text can be controlled with the size attribute of the font tag. It takes the value from 1 to 7. 1 being the smallest size and 7 being the largest. <font size="1">Font Size <font size="7">Font Size 7</font> Font Size 1 Font Size 7 Changing the color: The color attribute can be used to change the color of the text. It can take the color name in RGB Hexa or it can take one of the color names available here. <font This </font> <font This </font> This is pink text. This is Red text. Changing the font face: <font face="Arial">This text is in Arial Font</font> <font face="Courier">This text is in Courier Font</font> This text is in Arial Font This text is in Courier Font <br> is is pink Red color="pink"> text. color="#FF0000"> text. 1</font> <br>

LESSON-6 Recall from the previous lesson where we learned that the <font> tag is used to control the font face, size and color of the text written between <font> and </font> tags. But, what if you need to control the font properties of the whole html web page. If you are thinking that you would open the <font> tag just after the <body> tag and close the font tag i.e. </font> just before </body> tag, you get full marks. But what if you need to use arial as your html web page's default font, and courier font at selected places. You may still use <font> tag to achieve this, but don't you think that your web page's code would become a bit messier. So, what is the solution? <basefont> tag solves our above problem. The <basefont> tag can be used to control the font face, color and size of a web page's text. When you use <basefont> tag to set the default text properties, you can always use <font> tag to switch to another font and when you close the </font> tag, the properties you set with the <basefont> are applied again, automatically. <basefont> tag has no closing tag. In current day's browsers this tag works fine, no matter whereever you use it. However, it is recommended that you use this tag anywhere before <body> tag. Example: <basefont mono"> color="pink" size="5" face="Courier New, Courier,

The above code sets the default text color to pink, its size to 5 and the font face is set to Courier New, Courier, mono. You can play with <basefont> tag's color, face and size attributes.

LESSON-7 The <body> and </body> tags of an HTML web page contain all the stuff that is displayed in a browser. We can control the appearance of a web page by using different attributes of the <body> tag. Setting Background Color: The default background color of a web page is white. We can change the default background color by using the bgcolor attribute of the <body> tag. <body bgcolor="gray"> The above HTML code will set the background color to gray. You can either specify the color name or RGB hexa value of the color. A list of common colors is available here. Setting Background image: You can set the background image of a web page as under: <body background="logo.jpg"> The background attribute of the <body> tag specifies the location of the image file to be displayed in the background of the web page. It takes an absolute or a relative path of the image file. A discussion of absolute and relative paths will come in a later lesson.

COLOURS
We can add colors to many HTML tags like <font>, <body>, <hr> and so on. Colors add some life to our web pages. In HTML we can specify colors in two ways: 1. By using a hexadecimal notation for the combination of Red, Green and Blue values (RGB) 2. By using color names In the case of a color name, you can simply mention the color name like Red.

<hr color="red">
In the case of using a hexadecimal (RGB) value, you can specify it as under:

<hr color="#FF0000">

The value RGB value FF0000 is for the color Red. Note that we have to prefix the RGB hexa value with the # sign. Following is a list of HTML colors supported by most of the modern browsers: Color Name RGB Hexa Color AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGrey DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkSlateGrey DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969

DimGrey DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Grey Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGray LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue

#696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD

MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray SlateGrey Snow SpringGreen

#BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #708090 #FFFAFA #00FF7F

SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen

#4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32

LESSON-8
You must already be familiar with the Headings. A heading is a title at the head of a page or section of a book etc. There are six levels of headings in HTML. H1 is the highest level of headings followed by H2, H3, H4, H5 and H6. H1 is considered the most significant or important. The importance decreases as the heading number increases. Heading should be used judiciously. Normally heading level 1 is used for for top level or main headings and heading level 2 and 3 for sub-headings. Adding a heading in an HTML page is fairly straight forward, just place your heading text between the <h1> and </h1> tags. In the following text all levels of headings are shown.

<h1>Level <h2>Level <h3>Level <h4>Level <h5>Level <h6>Level 6 Heading</h6>


The Result is as under:

1 2 3 4 5

Heading</h1> Heading</h2> Heading</h3> Heading</h4> Heading</h5>

Level 1 Heading
Level 2 Heading
Level 3 Heading
Level 4 Heading
Level 5 Heading
Level 6 Heading

Heading alignment: Heading alignment can be controlled by using the align attribute. The align attribute takes the values; left, right, center or justify.

<h2 align="left">Level 2 Heading Left aligned</h2>

Level 2 Heading Left aligned


<h2 align="center">Level 2 Heading Centered</h2>

Level 2 Heading Centered

<h2 align="right">Level 2 Heading Right aligned</h2>

Level 2 Heading Right aligned


<h2 align="justify">Level 2 Heading Justified.....Note that the heading will only justfy itself if it is more than a single line...</h2>

Level 2 Heading Justified.....Note that the heading will only justfy itself if it is more than a single line...

LESSON-9
Usually in our writings, we seperate the blocks of text called paragraphs by adding extra blank lines in between. HTML treats all text as one single paragraph unless we add paragraph markers around each paragraph of text. These paragraph markers produce one blank line in between blocks of text. The paragraph tag:

Start End Tag: </p> <p>This is <p>This is second paragraph</p>


The result is: This is first paragraph This is second paragraph

Tag:

<p>

first

paragraph</p>

Note that the browser automatically inserts a blank line between paragraphs. Paragraph Alignement: Paragraph alignment can be controlled by using the align attribute. The align attribute takes the values; left, right, center or justify.

<p align="left">Paragraph Left aligned</p>


Paragraph Left aligned

<p align="center">Paragraph Centered</p>


Paragraph Centered

<p align="right">Paragraph Right aligned</h2>


Paragraph Right aligned

<p align="justify">Paragraph Justified.....Note that the paragraph will only justfy itself if it is more than a single line...</h2>
Paragraph Justified.....Note that the paragraph will only justfy itself if it is more than a single line... Some times we need to have a line break instead of having a paragraph break. In thoses cases we can use <br>. It is a stand alone tag and does not have a matching end tag.

This is line One. <br> This is Line Two.


The Result is: This is line One. This is Line Two.

LESSON-10
We can add colors to many HTML tags like <font>, <body>, <hr> and so on. Colors add some life to our web pages. In HTML we can specify colors in two ways: 1. By using a hexadecimal notation for the combination of Red, Green and Blue values (RGB) 2. By using color names In the case of a color name, you can simply mention the color name like Red.

<hr color="red">
In the case of using a hexadecimal (RGB) value, you can specify it as under:

<hr color="#FF0000">
The value RGB value FF0000 is for the color Red. Note that we have to prefix the RGB hexa value with the # sign. Following is a list of HTML colors supported by most of the modern browsers: Color Name RGB Hexa Color AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGrey DarkGreen DarkKhaki #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #A9A9A9 #006400 #BDB76B

DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkSlateGrey DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DimGrey DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Grey Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGray LightGrey LightGreen

#8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #D3D3D3 #90EE90

LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red

#FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000

RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray SlateGrey Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen

#BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32

LESSON-11
HTML supports three types of lists. Let's try to understand them one by one. 1. Unordered List An unordered list has the following format:

First Item Second Item Third Item

HTML code for the above unordered list is very simple. The whole list is enclosed between <ul> and </ul> tags. Each list item is described using <li> and </li> tags.

<ul> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ul>


2. Ordered List The second kind of html list is an Ordered List, also called a numbered list. A simple Ordered List is as under: 1. First Item 2. Second Item 3. Third Item HTML code for the above ordered list is very simple. The whole list is enclosed between <ol> and </ol> tags. Each list item is described using <li> and </li> tags.

<ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol>


3. Definition List The last kind of list that HTML supports is called a definition list. It is so called because it is in the format of a TERM followed by its DEFINITION. A simple definition list is as under: First Item Text describing the First Item Second Item Text describing the Second Item Third Item Text describing the Third Item HTML code for the above definition list is very simple. The whole list is enclosed between <dl> and </dl> tags. Each term is described using <dt> and </dt> and the definition using <dd> and </dd>.

<dl>

<dt>First Item </dt> <dd>Text describing the First Item</dd> <dt>Second Item</dt> <dd>Text describing the Second Item</dd> <dt>Third Item </dt> <dd>Text describing the Third Item</dd> </dl>

LESSON-12
Sometimes it become necessary to nest lists. One particular example is the index of a book. HTML allows nesting of lists. Following is an example of the nesting of lists for upto 3 levels.

<ol> <li>Level 1 Item 1</li> <li>Level 1 Item 2</li> <ul> <li>Level 2 Item 1</li> <ul> <li>Level 3 Item 1</li> <li>Level 3 Item 2</li> </ul> <li>Level 2 Item 2</li> </ul> <li>Level 1 Item 3</li> </ol>
The Output is: 1. Level 1 Item 1 2. Level 1 Item 2 o Level 2 Item 1 Level 3 Item 1 Level 3 Item 2 o Level 2 Item 2 3. Level 1 Item 3 You can nest your lists upto as many levels you like, but remember this nesting should not harm the readibility of your content.

LESSON-13
HR is short for Horizontal Rule. The use of HR tag is very common for dividing the content in sections. It places a horizontal line on a web page. The <hr> tag is a stand alone tag, it does not have any closing tag. By simply writing <hr> places a horizontal line like one below:

But what if you need to control the color and size of this line? Don't worry the HR tag also comes with a variety of different attributes that give you control over this tag. width="" Use this attribute to change the width of the horizontal rule. It can be assigned a value in pixels or a percentage of the page width. The default is 100% of the page width.

<hr width="50%">

<hr width="150">
align="" By using this attribute the horizontal rule can be aligned to the left or right of the page. It can take the value of center, left or right. The default alignment is center. The alignment effect can only be noticed if the width of the HR is less than the page width.

<hr width="150" align="left">

<hr width="150" align="center"> <hr width="150" align="right">


size="" By using this attribut the vertical size of the HR can be controlled. It can take a whole number as its value. The default size is 2.

<hr width="150" align="right" size="10">

color="" You have complete control over the color of the HR. By using the color attribute of the HR tag, you can make the HR appear in any supporting color. A complete list of html colors can be found here. <hr

color="pink">
noshade If you don't like the default shaded appearance of the HR, the noshade attribute, without any value, can be used. This will make the HR appear as a solid color.

<hr size="15" noshade>

LESSON-14
Comments are very important in keeping track of the coding. Comments are not displayed by the web browser, so they remain invisible to anyone who visits your web page. The only way you can have a look at them is to view the source of your html page in any of the text editors. As the comments are not displayed by the browser, you can leave yourself notes so that you don't forget something when you come back later to redesign the page. The method of inserting comments in an html page is very simple. Just start your comments with <!-and start writing your comments and after you are finished with your comments just place --> at the end. <!-- This text is treated as a comment--> Your comments can span multiple lines, as long as you start your comments with <!-- and end with -> <!-This spans than -->

on one

comment more line

Caution: Never write anything confidential in html comments. Comments are not displayed by the web browser, but remember anyone can view them by viewing the source of the web page.

LESSON-15

Sometimes we need to add some special characters like a copyright sympbol or signs like <, $, & and so on. These special characters are called HTML entities. In this Lesson we will show you how you can add these HTML entities to your web pages. An HTML entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). For example if we need to display a less than (<) sign in our web page, we will write: &lt; or &#60; A question arises: What is the difference between the entity name and the entity number? The answer is very simple; Traditionaly HTML used to support entity numbers and later the capability of entity names was also added. Most web designers feel comfortable with the entity names as they are easier to remember.

Some commonly used HTML Entities


Entity < > & " Description non-breaking space less than greater than ampersand quotation mark cent pound yen euro section copyright registered trademark multiplication division Name &nbsp; &lt; &gt; &amp; &quot; &cent; &pound; &yen; &euro; &sect; &copy; &reg; &times; &divide; Number &#160; &#60; &#62; &#38; &#34; &#162; &#163; &#165; &#8364; &#167; &#169; &#174; &#215; &#247;

Lesson-16
You probably know already what a table is. To just remind you; a table is an arrangement of vertical columns and horizontal rows. The intersection of a row with a column is called a cell. We can add just about anything inside the cells like links, images, headings, paragraphs and lists etc. The creation of a table in HTML is very simple and easy. A table in HTML begins with <table> and ends with </table>. Between these tags <tr> and </tr> is used to specify rows. <td> and </td> is used to specify a cell.

<table border="1"> <tr> <td>Name</td> <td>Age</td> </tr> <tr> <td>Mr. A</td> <td>10 Years</td> </tr> <tr> <td>Mr. B</td> <td>20 Years</td> </tr> <tr> <td>Mr. Z</td> <td>60 Years</td> </tr> </table>
This HTML will be displayed as: Name Age Mr. A 10 Years Mr. B 20 Years Mr. Z 60 Years Note that the border attribute above specifies the thickness of the horizontal and verticles lines across the above table. We can specify that the first row of the table is headings by using <th> and </th> tags.

<table border="1"> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Mr. A</td> <td>10 Years</td> </tr> <tr> <td>Mr. B</td> <td>20 Years</td> </tr>

<tr> <td>Mr. Z</td> <td>60 Years</td> </tr> </table>


This HTML will be displayed as: Name Mr. A Mr. B Mr. Z Age 10 Years 20 Years 60 Years

Lesson-17
We can control the behavior of tables with the help of its attributes. In this lesson you will learn to use the attributes of the <table> tag. The attributes of <table> tag: We can change the appearance of a table by using its attributes. cellspacing=" This attribute is used to add space around each cell. It takes a whole number as its value. cellpadding=" This attribute adds space inside each cell. It takes a whole number as its value. border=" This attribute specifies the size of the border line of a table. It takes a whole number as its vlaue. "

"

"

width="" By using the width attribute we can control the width of a table. It takes a value in pixels or the percentage of the total page width.

<table cellspacing="2" cellpadding="3" border="5" width="100%"> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Mr. A</td> <td>10 Years</td> </tr> <tr> <td>Mr. B</td> <td>20 Years</td> </tr> <tr> <td>Mr. Z</td> <td>60 Years</td> </tr> </table>
This HTML will be displayed as: Name Mr. A Mr. B Mr. Z 10 Years 20 Years 60 Years Age

Lesson-18
Controlling Cell contents: Next we are going to discuss how HTML controls the contents of cells. First of all we will see how we can align the content of our cells. align="" This attribute aligns the content of the cell. It can take the values; left, right or center. bgcolor="" This attribute sets the background color of a single cell if used with <td> and it sets the background color of the whole row if it is used with <tr>. It can take the color value as Hex or one of the color names available here.

<table cellspacing="2" cellpadding="3" border="5" width="100%"> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td align="left">Mr. A--Left aligned</td> <td align="right">10 Years--Right aligned</td> </tr> <tr> <td align="center">Mr. B--Centered</td> <td bgcolor="pink">20 Years</td> </tr> <tr bgcolor="#FF0000"> <td>Mr. Z</td> <td>60 Years</td> </tr> </table>
This HTML will be displayed as: Name Mr. A--Left aligned Mr. B--Centered Mr. Z Table Nesting: Tables can also be nested by adding <table> and </table> tags within <td> and </td> tags of the enclosing <table>. 20 Years 60 Years Age 10 Years--Right aligned

<table> <tr> <td> <table> <tr><td>first nested table</td></tr></table> </td> <td> <table><tr><td>second nested table</td></tr></table>

</td> </tr> <table>


You can make your tables as complicated as you want. But remember to make them as complex as you can easily handle.

Lesson-19
When adding links and images to our web pages, we can specify their location or path in one of the two ways namely; absolute path and relative path. Absolute Paths: Absolute path refers to the locatoin of the file with reference to the root directory, in the case of a file system, or full web address in the case of a domain name. For example:

C:\myWeb\images\logo.jpg http://www.domainname.com/images/logo.jpg
The first one is the example of an absolute path of the image file in the local file system and the second one is the example of an absolute path of an image file on a web server. Relative Paths: Relative path refers to the location of the file with reference to the current directory. For example if you are currently working in a directory named myWeb and want to refer to the image file named logo.jpg located in a directory named images stored inside myWeb directory, you can point to it using its relative path as under:

images\logo.jpg
In this case you need not to specify full file system path. In the case of a web server if your html file is on the root and your image file logo.jpg is strored in the images folder, you can point to it using its relative path as under:

images/logo.jpg
Please note the difference between referencing a file on a file system and on a web server. On a file system \ is used and on a web server / is used. While writing HTML you will most often encounter web server / type paths. Please don't mix them as the file system example has been given just as a reference.

Lesson-20
It is a famous saying that "A picture is worth a thousand words". Web pages containing only text look lifeless. Images not only add beauty to a web page they also bring life to web pages. Almost every web page has some kind of images on it. In this lesson we will be showing you how you can add images to your web pages. HTML supports many image formats. The most commonly used formats are GIF and JPEG. JPEG is used for photographic quality images and GIF is used for other types of images. Before going any further you should have an understanding of relative path and absolute path and the difference between the two. We use <img src="path"> tag, where path is the absolute or relative path of the image file. <img> tag has no ending tag. It is one of the stand alone tags of HTML.

<h2>Web page <img src="logo.jpg">

with

an

Image</h2>

The above HTML will result in the following output:

Web page with an Image

Here the src attribute takes the relative path of the image file. It could also take the full absolute path of the image file. The resultant code with the same output would have been:

<h2>Web page with an <img logo.jpg">src="http://pickatutorial.com/resources/

Image</h2>

By default the image appears aligned to the left. If we want to see it in the center, we could place <center> tag around the <img> tag, as under:

<h2>Web <center> <img </center>

page

with

an

Image</h2> src="logo.jpg">

Web page with an Image

Lesson-21
You already know how to add an image to your web page. Here we will show you some advanced image handling with HTML. Changing the size of an Image: If you are not satisfied with the size of the image you can change its appearance size with the help of width and height attributes of the <img> tag.

<h2>Normal Size of <img <h2>Smaller Size of <img src="logo.jpg" width="100" <h2>Bigger Size of <img src="logo.jpg" width="300" height="250">
The output will be:

Image</h2> src="logo.jpg"> Image</h2> height="50"> Image</h2>

Normal Size of Image

Smaller Size of Image

Bigger Size of Image

The alt attribute is used to define an "alternate text" for an image. In case the browser can't load the image, it displays the alternate text in the box reserved for the image. The alt attribute can take a string of text as its value:

<img src="logo.jpg" alt="Logo Image">


Converting Images to Links: We can very easily convert images to links by surrounding the <img> tag with the <a href> tag:

<a href="http://pickatutorial.com"><img src="logo.jpg" alt="Logo Image"></a>

The anchor tag <a></a> is explained in the next lesson.

Lesson-22
On the internet you must have already encountered with the clickable text or images called links. When you click on these links they take you somewhere else. In HTML we have two types of links; internal and external. In this lesson we discuss external links and the discussion of internal links is left for the following pages. Adding External Links: The external links are defined with the <a> called anchor tag. The target page is defined by assigning the relative or absolute path to the anchor tag's href attribute. Lets see how can we link to the google search engine's home page:

<a href="http://www.google.com">This is google home page.</a>


This result will be: This is google home page. The text between the <a> and the </a> is used as the caption or description for the link. The browser normally displays the link text in blue underlined text. The above is the example of a link to a different website. If you need to add a link to your own domain, you can specify its relative or absolute path to the anchor tag's href attribute.

<a href="http://pickatutorial.com/tutorial/html/thehrtag.htm"> </a> <a href="thehrtag.htm">Text Marquee</a>


The result will be: The HR Tag The HR Tag

The

HR

Tag

Note that both of the links point to one, single web page. The only differnce is that the href attribute of the first link takes an absolute path and the other takes a relative path.

Lesson-23
Internal links are also called bookmarks. We can use internal links to go on a specific point on a long web page. To use internal links first we need to name different parts of our page. These names are then used to jump to the different sections of a web page. We can specify a name in the following way:

<a name="header">Header Part</a>


The result will be: Header Part The above HTML specifies a name header with the caption Header Part. Note that you can use any string as the value of the name attribute. In short the text "Header Part" has been named as header, which we can reference anywhere in our HTML.

<a href="#header">To Header</a>


The result will be: To Header Internal links are specified by using # prefix, the # sign tells the browser that the destination of the links is within the same page. When the above link is clicked you are taken to the internal link name header, which we created earlier.

Lesson-24
Opening links in a new browser window: When we click on a text or an image link, the default behavior of the browser is to open it in the present window. We can control this behavior and force the browser to open our link in a new window by using anchor <a> tag's target attribute, as under:

<a href="http://www.pickatutorial.com" target="_blank" >Computer Programming Tutorials</a>


Computer Programming Tutorials If you click on the above link, the browser will open it in a new window. The value _blank that is assigned to the target attribute asks the browser that the link should be opened in a new blank window. Image Links: We can also use images as links. We just need to enclose the <img> tag within the <a> and </a> tags.

<a <img src="../resources/logo.jpg"></a>


The result will be:

href="http://pickatutorial.com">

Lesson-25
By now you have already learned how to add simple text and image links to your html web pages. In this lesson we will learn how to add email links to our html web pages. Email links are not different from the normal hyper links. We use the same anchor <a> tag for the email links too. The only difference is the value of the href attribute. Instead of assigning it a web address, we assign it with an email address by prefixing mailto:. As is given below:

<a href="mailto:farooq_fl@yahoo.com">Email Me!!!</a>


The result will be: Email Me!!! When you click on the above link, your default email program will open for you to send ma an email, with my email address already filled in the to field. We can specify the subject of the message inside the anchor tag, as under:

<a href="mailto:farooq_fl@yahoo.com?subject=subject Email Me!!!</a>


We can also add cc recipients and / or bcc recipients' email addresses.

line">

<a Email Me!!!</a>

href="mailto:farooq_fl@yahoo.com?cc=myfriend@domainname.com">

<a href="mailto:farooq_fl@yahoo.com?bcc=myfriend@domainname.com"> Email Me!!!</a>


We can combine the subject, cc and bcc options together by using an & sign at the end of each option, except for the last option.

<a href="mailto:farooq_fl@yahoo.com? subject=subject line&bcc=myfriend@domainname.com&cc =myotherfriend@domainname.com">Email Me!!!</a>

Lesson-26
<marquee> Some....Scrolling.....Text </marquee>
The above markup results in the following output:

Scrolling text in both directions (alternatively):

<marquee

behavior="alternate">Some..Scrolling..Text</marquee>

The above markup results in the following output:

The value of behavior attribute i.e. alternate causes the text to scroll in both directions, alternatively. Changing the background color the Scrolling text:

<marquee

bgcolor="pink">Some..Scrolling..Text</marquee>

The above markup results in the following output:

The value of the bgcolor attribute determines the background color the scrolling text. A complete color list can be found here.

Lesson-27
By using different attributes of the marquee tag, we can use this tag in a number of different ways. LOOP=" " The value of this attribute can be any whole number. For example if you want your text to scroll twice then you must use '2' as its value. This will tell the browser to scroll the text 2 times. LOOP="1" will scroll the text only once.

<marquee I </marquee>
The result is:

will

loop="2" loop

only

bgcolor="pink"> twice.

WIDTH=" " This gives you control on the width of the marquee. The number of pixels, or a percentage of the screen can be used as its value.

<marquee This </marquee>


The result is:

marquee

width="250" is

250

pixels

bgcolor="pink"> wide.

DIRECTION=" " This attribute defines the direction of the marquee. It can take the values LEFT, RIGHT, UP or DOWN.

<marquee I </MARQUEE>
The result is:

bgcolor="pink" am going

direction="up"> upwards.

Lesson-28
Image marquee works in the same way as the text marquee does. The same marquee tag is used to scroll the image. However we replace the text with the 'img' tag. Let's see how it works:

Start End Tag: </marquee>


Simple Image scrolling:

Tag:

<marquee>

<marquee><img
The above markup results in the following output:

src="logo.jpg"></marquee>

Scrolling Image in both directions (alternatively):

<marquee

behavior="alternate"><img

src="logo.jpg"></marquee>

The above markup results in the following output:

The value of behavior attribute i.e. alternate causes the image to scroll in both directions, alternatively. Changing the background color of the MARQUEE:

<marquee

bgcolor="pink"><img

src="logo.jpg"></marquee>

The above markup results in the following output:

The value of the bgcolor attribute determines the background color of the MARQUEE. A complete color list can be found here.

Lesson-29
must use '2' as its value. This will tell the browser to scroll the image 2 times. LOOP="1" will scroll it only once.

<marquee <img

loop="2"

bgcolor="pink"> src="logo.jpg"></marquee>

The above image will loop only twice. WIDTH=" " This gives you control on the width of the marquee. The number of pixels, or a percentage of the screen can be used as its value.

<marquee <img

width="250"

bgcolor="pink"> src="logo.jpg"></marquee>

The above DIRECTION=" "

marquee

is

250

pixels

wide.

This attribute defines the direction of the marquee. It can take the values LEFT, RIGHT, UP or DOWN.

<marquee bgcolor="pink" </marquee>

direction="up"

width="250"><img

src="logo.jpg">

The image is scrolling upwards..

Lesson-30
When we convert simple HTML pages into interactive applications, we need to get user input to be processed at the server side. A particular example is gmail, where user inputs its ID and password to access the gmail mail system. Forms: The data to a server-side program from a web page is supplied using an HTML form. The idea behind an HTML form is the same as that of a normal paper form. User is presented with a number of fields to input data. A form contains many different types of input elements that allow the user to enter information. These input elements contain text fields, text area, drop-downs, radio buttons and check boxes etc. They are combined together inside <form> and </form> tags. The values of all the input elements are submitted to the server-side program whose URL is given in the action attribute of the <form> tag.. <form action="ServerSideProgram">Form elements go here </form> When submitted, the browser will direct the user data to ServerSideProgram. A single web page can have any number of forms on it. In the coming lessons you will learn about differnt form elements

Lesson-31
HTML Form Elements: Text Field: Text field or text box is used to enter text data. A text field is added to a web page as under:

This is a text field <input type="text" name="text">


The output will be:

This is a text field

Most of the form elements are added using the <input> tag. The value of the type attribute specifies the kind of the element. The name attribute is used at the server-side to access the user entered data. Password Field: The password field can be added as under:

This is a password field <input type="password" name="pw">


The output will be:

This is a password field

The password field is the same as the text field with only one difference. When entering data in a password field, the user cannot see it. The data appears as all asterisks (*). Textarea Field: The text field is a single line input field. If we want a multiline text input field we use a textarea field. The required code to add a textarea field is as under:

This is a textarea cols="35"></textarea>


The output will be:

field

<textarea

name="textarea"

rows="10"

This is a textarea field

The height and width of a textarea field can be controlled using the cols and rows attributes of the <textarea> tag. You can increase or decrease them in order to get a bigger or a smaller textarea field.

Lesson-32
Radio Option: The radio option is used when we need to offer the user one of the given options. The code required to add radio option to an HTML form is as under: This is a radio option<input type="radio"

name="rd">
The output will be:

This is a radio option

Select Field: The select field is like a drop-down menu. It can be added to a web page as under:

This <select <option>Item <option>Item <option>Item </select>


The output will be:

is

select

field name="test"> 1</option> 2</option> 3</option>

This is a select field

Item 1

<select> tag is used to define a select field. <option> tags enclosed within <select> and </select> tags specify different options that will be available to the user. You can add as many <option> tags as you need. Check Box: A check box can be added to a web page as under:

This is a checkbox<input type="checkbox" name="chb">


The output will be:

This is a checkbox

We use checkboxes when we require the user to choose any number of items from the given list of items.

Lesson-33
HTML Buttons: There are three types of buttons in HTML, i.e., simple buttons, reset buttons and submit buttons. Simple Buttons can be added as under:

This is a button<input type="button" value="Test Button" name="btn">


The output will be: This is a button Buttons are used to intiate an action, when a user clicks on them. The value of the value attribute appears on the button face. Reset Buttons: Reset buttons can be added as under:

This is a reset button<input type="reset">


The output will be:
Reset

This is a reset button

Reset buttons in a form are used to clear the contents of the form. When the user clicks on a reset button the contents of every form element is reset. In the case of a reset button we do not need to use the value and name attributes, but we can if we want to. Submit Button: Every form usually has a submit button. When the user clicks on a submit button it submits the data to the sever. A submit button can be added as under:

This is a submit button<input type="submit"> </form>


The output will be:
Submit

This is a submit button

Like a reset button, we need not to specify the value and the name attributes, but we can if we want to.

Lesson-34
The <head> and </head> tags surround other tags that define the meta-information about the current page. This information includes page title (already explained in a previous lesson), a description of the page, important keywords and so on. In this lesson we will discuss how we can help search engines catagorize our web pages, by adding some meta information about them in their HTML code. Describing the Content of a web page: When we search something on a search engine, the results we get contain a link to the web page along with a short description of the page. We can provide the description of our web page as under:

<meta name="description" here.">

content="The

description

of

your

web

page

goes

You can add the description text as long as you want. A good description is about 60 to 80 words long. Declaring the Keywords of a web page: Search engines catagorise web pages using the keywords that are provides in the meta information of a web page. You can declare the keywords of your web pages as under:

<meta name="keywords" content="keyword 1, keyword 2, keyword 3">


You can add as many keywords you want. Be sure you add only the relevant keywords. 20 to 30 keywords are enough.

Lesson-35
Sometimes there is a need to refresh a web page after a certain amount of time. A perfect example might be a news website or a sports, particularly cricket, website. If you want ot refresh your web page automatically after a certain time, you can take advantage of the refresh attribute of the <meta> tag. Note that the refresh meta tag must come before the <title> tag, else it will not work. You can add the following code to refresh your web page after 2 seconds:

<meta http-equiv="refresh" content="5">


This page will automatically refresh in 5 seconds. You can increase / decrease the time before refresh by using the content attribute of the above meta tag. Suppose you have moved you web page, for some reason, and you want to automatically redirect your visitors to the new address, you could achieve your purpose by adding the followin code to your web page:

<meta http-equiv="refresh" ;URL=http://www.domainname.com/new.htm">

content="2

The page will automatically redirect in 2 seconds. The content attribute tells the browser to go to the specified URL in 2 seconds. For a redirect 2 seconds are enough, but for a refresh you might need to increase the number of seconds before the page refreshes. The number of seconds and the URL are seperated by the use of a semicolor (;). Note that URL is not a seperate attribute of the above meta tag.

Lesson-36
If you have come to this lesson after reading all the previous lessons, you can safely claim that you know the basics of HTML and can design a cool web page. In this lesson we are going to discuss some of the less known HTML tags. <button> Till now you used the following code to add a button to your html web form:

This is a button<input type="button" value="Test Button" name="btn">


The above code could also be written by utilizing the <button> tag. Example:

This is a button<button type="button" name="btn">Test Button</button>


Output: Test Button The type attribute of the <button> tag specifies the type of the button, which could be button, reset or submit. <ins> <ins> tag underlines the text appearing between <ins> and </ins>, as if it was inserted between the original text. Example:

In this sentence <ins>this text is inserted</ins>, while this one is not.


Output: In this sentence this text is inserted, while this one is not. <del> <del> tag strikes through the text appearing between <del> and </del>, as if it was deleted from the original text. Example:

From this sentence <del>this text is deleted</del>, while this one is not.
Output: From this sentence this text is deleted, while this one is not. <address>

<address> tag can be used to add an address to a web page. It does nothing but to make the text appear between <address> and </address> in italics. Example:

<address> Here </address>


Output:

<address>

tag

is

used.

Here address tag is used. <blink> The text written between <blink> and </blink> will continuously blink. Example:

<blink>This text is blinking. </blink>


Output: This text is blinking. <blockquote> Whenever you need to put a block of quoted text you can utilize <blockquote> tag. The text written between <blockquote> and </blockquote> appears slightly indented on the web page. Example:

<blockquote>This one is an example of blockqute tag. Make sure that the quoted block of text is more than a single line to see how blockquote tag works.</blockquote>
Output: This one is an example of blockqute tag. Make sure that the quoted block of text is more than a single line to see how blockquote tag works. Our Beginners' HTML Tutorial ends here. How did you find it? Please let us know at pickatutorial@yahoo.com | Tutorial author: farooq_fl@yahoo.com From the same author: XHTML Tutorial More HTML Tutorials>

S-ar putea să vă placă și