HTML Tutorial

HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language.
 html is not a programming language, it is a markup language. A markup language is a set of markup tags.
 html uses markup tags to describe web pages HTML markup tags are usually called HTML tags
 html tags are keywords surrounded by angle brackets like <html>. 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
 Start and end tags are also called opening tags and closing tags
 html documents describe web pages
 html documents contain HTML tags and plain text
 html documents are also called web pages





The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages.
The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
html>
body>

<h1>My FirstHeading</h1>

<p>My firstparagraph</p>

</body>
</html>



HTML headings
are  with the <h1> to <h6> tags.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>


The <p> element defines a paragraph in the HTML document.
The element has a start tag <p> and 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> and an end tag </body>.
The element content is another HTML element (a p element).

The <html> element:
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>


The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
some HTML elements might display correctly even if you forget the end tag:
<p>This is a paragraph
<p>This is a paragraph

HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag .

Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.

Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Search engines use your headings to index the structure and content of your web pages.

Since users may skim your pages by its headings, it is important to use headings to show the document structure.

H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.
HTML Lines

The <hr /> tag creates a horizontal line in an HTML page.



The hr element used to seperate  element
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>


The <br /> element is an empty HTML element. It has no end tag.
<br> or <br />

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

The browser will remove extra spaces and extra lines when the page is displayed.
 Any number of lines count as one line, and any number of spaces count as one space.



HTML Forms HTML forms are used to pass data to a server.

A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.
 A form can also contain select lists, textarea, fieldset, legend, and label elements.

The <form> tag is used to create an HTML form
<form>
.
input elements
.
</form>

HTML Forms - The Input Element

The most important form element is the input element.

The input element is used to select user information.

An input element can vary in many ways, depending on the type attribute.
 An input element can be of type text field, checkbox, password, radio button, submit button.



Text Fields

<input type="text" /> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

Also note that the default width of a text field is 20 characters.

<input type="password" /> defines a password field:
<form>
Password: <input type="password" name="pwd" />
</form>


The characters in a password field are masked (shown as asterisks or circles).




Radio Button:

<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices:
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>



------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------


Check Boxes :

<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>

<input type="submit" /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute.
The file defined in the action attribute usually does something with the received input

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

If you type some characters in the text field above, and click the "Submit" button,
 the browser will send your input to a page called "html.php".
The page will show you the received input.

Send e-mail from a form
How to send e-mail from a form.


<form>          Defines an HTML form for user input
  <input />     Defines an input control

        <textarea>     Defines a multi-line text input control
       <label>                Defines a label for an input element
<fieldset>     Defines a border around elements in a form
 

    <legend>     Defines a caption for a fieldset element
          <select>     Defines a select list (drop-down list)
     
       <optgroup>     Defines a group of related options in a select list
  <option>     Defines an option in a select list

  <button>     Defines a push button



The HTML frame Element

The <frame> tag defines one particular window (frame) within a frameset.

In the example below we have a frameset with two columns.

The first column is set to 20% of the width of the browser window.
The second column is set to 80% of the width of the browser window.
 The document "fram1.html" is put into the first column,
 and the document "frame2.html" is put into the second column:----


<frameset cols="20%,80%">
   <frame src="frame1.htm" />
   <frame src="frame2.htm" />
</frameset>

The frameset column size can also be set in pixels (cols="200,500"),  





<html>
<head>
<title>Title
of document </title>
</head>
<body>
Visible text goes here...
</body>

</html>
Heading Elements

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

<h6>Smallest Heading</h6>
Text Elements
<p>This is a paragraph</p>
<br />
<hr /> horizontal rule
<pre>
This text is
 preformatted</pre>


<strong>This text is strong</strong>

<code>This is some computer code</code>

<b>This text
 is bold</b>

<i>This text
 is italic</i>

 hyperlinks <a href="http://www.vikasbruce.blogspot.com/">Link-text goes here</a>

Imagelink: <a href="http://www.VikasGautam1.com/"><img src="URL" alt="Alternate Text" /></a>

Mailto link: <a href="mailto:gogia_145@yahoo.com">Send e-mail</a>

<ul>
  <li>Item</li>
  <li>Item</li>
</ul>


Ordered list
<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

definition list
<dl>
  <dt>ret1</dt>
    <dd>cat2</dd>
  <dt>rat2</dt>
    <dd>2</dd>
</dl>


Tables

<table border="1">
  <tr>
    <th>Tableheader</th>
    <th>Tableheader</th>
  </tr>
  <tr>
    <td>sometext</td>
    <td>sometext</td>
  </tr>
</table>
Frames


<frameset cols="20%,80%">
  <frame src="vikas1.htm" />
  <frame src="vikas2.htm" />
</frameset>
Forms
<form action="http://www.vikasbruce.blogspot.com/test.php" method="post/get">

<input type="text" name="email" size="40" maxlength="50" />
<input type="password" />

<input type="checkbox" checked="checked" />

<input type="radio" checked="checked" />

<input type="submit" value="Send" />

<input type="reset" />

<input type="hidden" />

<select>
<option>Apples</option>

<option selected="selected">Bananas</option>

<option>Cherries</option>

</select>

<textarea name="comment" rows="60" cols="20"></textarea>

</form>

<!-- comment -->

<blockquote>

Text quoted  source.

</blockquote>

<address>

<br />

<a href="mailto:gogia_145@yahoo.com">Email us</a><br />

Address: Hno  564, Delhi<br />
Phone: +78787987
</address>