HTML HEADINGS & html coding examples

Table of Contents

HTML HEADINGS

Headings are important in HTML documents. HTML has six levels or section headings numbered 1 through 6, with 1 being the most prominent section. Text with headings tags is displayed in larger and/or bolder fonts than the normal body text by a Web Browser. The first heading in each document should be tagged as <h1>.

HTML Headings & html coding examples

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<h1> This is a heading</h1><h2> This is a heading</h2>

<h3> This is a heading</h3>

Note : Browsers automatically add an empty line before and after headings.

Why Headings are important:

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 less important H3 headings, and so on.

HTML RULES (LINES):

The <hr/> tag is used to create an horizontal rule (line).

<p> This is a paragraph </p>
<hr/>
<p>> This is a paragraph </p>
<hr/>
<p> This is a paragraph </p>

HTML Comments:

Comments can be inserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this:

<!– This is a comment >

Note : There is an exclamation point after the opening bracket, but not before the closing bracket.

HTML Tag Reference:

TagDescription
<html>Defines an HTML document.
<body>Defines the document’s body.
<h1> to <h6>Defines header 1 to header 6.
<hr/>Defines a horizontal rule.
<!–>Defines a comment.
HTML HEADINGS & html coding examples

HTML PARAGRAPHS:

HTML documents are divided into paragraphs.

HTML Paragraphs:

Paragraphs are defined with the <p> tag.

<p> This is a paragraphs </p>

<p> This is another paragraph </p>

Note : Browsers automatically add an empty line before and after paragraphs.

HTML LINE BREAKS:

Use the <br/> tag if you want a line break (a new line) without starting a new paragraph:

<p> This is <br/> a para<br/>graph with line breaks</p>

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

In XHMTL, XML, and future versions of HTML, HTML elements with no end tag (closing tag) are not allowed. Even if <br> works in all browsers, writing <br/> instead is more future proof.

HTML TEXT FORMATTING:

This text is bold

This text is big

This text is italic

This is computer output

This is subscript and superscript

HTML Formatting Tags:

HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags.

Text Formatting Tags:

TagDescription
<b> Defines bold text.
<big>Defines big text.
<em>Defines emphasized text.
<i>Defines italic text.
<small>Defines small text.
<strong>Defines strong text.
<sub>Defines subscripted text.
<sup>Defines superscript text.
<ins>Defines inserted text.
<del>Defines deleted text.
<s>Deprecated. Use <del> instead.
<strike>Deprecated. Use <del> instead.
<u>Deprecated. Use styles instead.
HTML HEADINGS & html coding examples

“Computer Output” Tags

TagDescription
<code>Defines computer code text.
<kbd>Defines keyboard text.
<samp>Defines sample computer code.
<tt>Defines teletype text.
<var>Defines a variable.
<pre>Defines preformatted text.
<listing>Deprecated. Use <pre> instead.
<plaintext>Deprecated. Use <pre> instead.
<xmp>Deprecated. Use <pre> instead.
HTML HEADINGS & html coding examples

Citation, Quotations, and Definition Tags:

TagDescription
<abbr>Defines an abbreviation.
<acronym>Defines an acronym.
<address>Defines an address element.
<bdo>Defines the text direction.
<blockquote>Defines a long quotation.
<q>Defines a short quotation.
<cite>Defines a citation.
<dfn>Defines a definition term.
HTML HEADINGS & html coding examples

HTML STYLES:

The style attribute is a new HTML attribute. It introduces CSS to HTML.

Look! Styles and colors

This text is in Verdana and red

This text is in Times and blue

This text is 30 pixels high

The HTML Style Attribute:

The purpose of the style attribute is : To provide a common way to style all HTML elements.

A style was introduced with HTML 4, as the new and preferred way to style HTML elements. With HTML styles, styles can be added to HTML elements directly by using the style attribute, or indirectly in separate style sheets (CSS files).

HTML Style Examples:

style = “background-color:yellow”

Style= “font-size:10px”

style= “font-family:Times”

style= “text-align:center”

Deprecated Tags and Attributes: In HTML 4, some tags and attributes are defined as deprecated. Deprecated means that they will not be supported in future versions of HTML and XHTML. The message is clear: Avoid the use of deprecated tags and attributes.

These tags and attributes should be avoided:

TagDescription
<center>Defines centered content.
<font> and <basefont>Defines HTML fonts.
<s> and <strike>Defines strikeout text.
<u>Defines underlined text.
AttributesDescription
alignDefines the alignment of text.
bgcolorDefines the background color.
colorDefines the text color.
HTML HEADINGS & html coding examples

For all the above : Use styles instead.

Style Examples :

Background Color

<body style= “background-color:yellow”>

The style attribute defines a style for the <body> element.

Font Family, Color and Size:

<p style= “font-family:coutier new; color:red; font-size:20px”>

The style attribute defines a style for the <p> element.

Text Alignment :

<h1 style= “text-align:center”>

The style attribute defines a style for the <h1> element.

HTML LINKS :

A link is the “address” to a document (or a resource) on the web.

Hyperlinks, Anchors, and Links: In web terms, a hyperlink is a reference (an address) to a resource on the web. Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc. An anchor is a term used to define a hyperlink destination inside a document.

The HTML anchor element <a>, is used to define both hyperlinks and anchors.

We will use the term HTML link when the <a> element points to a resource, and the term HTML anchor when the <a> elements defines an address inside a document.

An HTML Link: Link syntax: <a href= “url”>Link text </a>

The start tag contains attributes about the link. The element content (Link text) defines the part to be displayed.

Note: The element content doesn’t have to be text. You can link from an image or any other HTML element.

The href Attribute: The href attribute defines the link “address”. This <a> element defines a link to google: 

<a> href= “http://www.google.com/”> Visit Google!</a>

The target Attribute: The target attribute defines where the linked document will be opened. The code below will open the document in a new browser window: <a href= “http://www.google.com//” target= “_blank> Visit Google!</a>

The name Attribute: When the name attribute is used, the <a> element defines a named anchor inside a HTML document. Named anchors are not displayed in any special way. They are invisible to the reader.

Named anchor syntax: <a name= “label”>Any content</a> The link syntax to a named anchor: <a href= “#label”> Any content</a> The # in the href attribute defines a link to a named anchor.

Example: A named anchor inside an HTML document: <a name= “tips”> Useful Tips Section </a> A link to the Useful Tips Section from the same document: <a href= “#tips”> jump to the Useful Tips Section</a>

A link to the Useful Tips Section from another document :

<a href= “http://www.google.com/html_tutorial.htm#tips”>

Jump to the Useful Tips Section</a>

Link Tags:

TagDescription
<a>Defines an anchor

HTML IMAGES:

Example: Norwegian Mountain Trip

The Image Tag and the Src Attribute:

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only and it has no closing tag.

To display an image on a page, you need to use the src stands for “source”. The value of the src attribute is the URL of the image you want to display on your page.

The syntax of defining an image: <img src= “url”/>

The URL points to the location where the image is stored. An image named “boat.gif” located in the directory “image” on “www.w3schools.com” has the URL: https ://www.w3schools.com/image/boat.gif

The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

The Alt Attribute:

The alt attribute is used to define an “alternate text” for an image. The value of the alt attribute is an author-defined text: <img src= “boat.gif” alt= “Big Boat”/>

The “alt” attribute tells the reader what he or she is missing on a page if the browser can’t load images. The browser will then display the alternate text instead of the image. It is a good practice to include the “alt” attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.

Image Tags:

TagDescription
<img>Defines an image.
<map>Defines an image map.
<area>Defines a clickable area inside an image map.
HTML HEADINGS & html coding examples

HTML TABLES

HTML Tables:

Apples            44%

Bananas         23%

Oranges         13%

Others            10%

Tables :

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for “table data,” which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

<table border= “1”>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

How it looks in a browser:

row 1, cell 1                       row 1, cell 2

row 2, cell 1                       row 2, cell 2

Tables and the Border Attribute :

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

<table border= “1”>

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

Headings in a Table:

Headings in a table are defined with the <th> tag.

<table border= “1”>

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

How it looks in a browser:

HeadingAnother Heading
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2

Empty Cells in a Table:

Table cells with no content are not displayed very well in most browsers.

<table border= “1”>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td></td>

</tr>

</table>

How it looks in a browser:

row 1, cell 1                       row 1, cell 2

row 2, cell 1

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:

<table border= “1”>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>&nbsp;</td>

</tr>

</table>

How it looks in a browser:

row 1, cell 1                       row 1, cell 2

row 2, cell 1

Table Tags:

TagDescription
<table>Defines a table.
<th>Defines a table header.
<tr>Defines a table row.
<td>Defines a table cell.
<caption>Defines a table caption.
<colgroup>Defines group of table columns.
<col>Defines the attribute values for one or more columns in a table.
<thead>Defines a table head.
<tbody>Defines a table body.
<tfoot>Defines a table footer.
HTML HEADINGS & html coding examples

HTML LISTS:

Using HTML, you can arrange items in lists in several ways. The two most commonly used methods are:

  1. Bulleted
  2. Numbered

HTML supports ordered, unordered and definition lists.

HTML Lists:

  • This is the first
  • This is the second
  • This is the third
  1. Unordered Lists:
  • An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
  • An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

Here is how it looks in a browser:

  • Coffee
  • Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

  1. Ordered  Lists:
  • An ordered list is also a list of items. The list items are marked with numbers.
  • An ordered list starts with the <o1> tag. Each list item starts with the <li> tag.

<o1>

<li>Coffee</li>

<li>Milk</li>

</o1>

Here is how it t looks in a browser:

  1. Coffee
  2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

  1. Definition Lists:
  • A definition list is not a list of single items. It is a list of items (terms), with a description of each item (term).
  • A definition list starts with a <d1> tag (definition term).
  • Each description starts with a <dd> tag (definition description).

<d1>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</d1>

Here is how it looks in a browser:

Coffee

Black hot drink

Milk

White cold drink

Inside the <dd> tag you can put paragraphs, line breaks, images, links, other lists, etc.

List Tags:

TagDescription
<ol>Defines an ordered list.
<ul>Delines an unordered list.
<li>Defines a list item.
<dl>Defines a definition list.
<dt>Defines a term (an item) in a definition list.
<dd>Defines a description of a term in a definition list.
<dir>Deprecated. Use <ul> instead.
<menu>Deprecated. Use <ul> instead.
HTML HEADINGS & html coding examples

HTML FORMS AND INPUT :

Forms are such HTML tools which allow readers to communicate with one another via the web. It is a collection of markup tags that work with Web servers to produce a means of obtaining whatever information we need from visitors of our web sites. Form includes elements that have special control such as buttons, text fields, check boxes, submit buttons and menus.

HTML Forms are used to select different kinds of user input. It is used to activate responses from users through a graphical user interface consisting of the following:

  1. Fill-in blanks
  2. Buttons
  3. Check boxes, etc.

After the user fills in form values, the entries can be used for processing by a script or executable program. This gateway program then can access databases, other software, or any other program or data that the implemented designates. Based on the results, an HTML document can be displayed in the User’s browser showing the results of the gateway program execution. A form consists of HTML elements.

Forms:

  • A form is an area that can contain form elements.
  • Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
  • A form is defined with the <form> tag.

<form>

.

Input elements

.

</form>

Input:

The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.

Text  Fields:

The fields are used when you want the user to type letters, numbers, etc. in a form.

<form>

First name:

<input type= “text” name= “firstname”/>

<br/>

Last name:

<input type= “text” name= “lastname”/>

</form>

Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.

Radio Buttons:

Radio Buttons are used when you want the user to select 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>

Checkboxes:

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form>

I have a bike:

<input type= “checkbox” name= “vehicle”= “Bike”/>

<br/>

I have a car:

<input type= “checkbox” name= “vehicle” value= “Car”/>

<br/>

I have an airplane:

<input type= “checkbox” name= “vehicle” value= “Airplane”/>

</form>

The Form’s Action Attribute and the Submit Button:

When the user clicks on the “Submit” button, the content of the form is sent to the server. The form’s action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

<form name= “input” action= “html_form_submit.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_form_submit.asp”. The page will show you the received input.

Form Tags:

TagDescription
<form>Defines a form for user input.
<input>Defines an input field.
<textarea>Defines a text-area (a multi-line text input control).
<label>Defines a label to a control.
<fieldset>Defines a fieldset.
<legend>Defines a caption for a fieldset.
<select>Defines a selectable list (a drop-down box).
<optgroup>Defines an option group.
<option>Defines an option in the drop-down box.
<button>Defines a push button.
<isindex>Deprecated. Use <input> insead.
HTML HEADINGS & html coding examples

HTML COLORS:

Colors are displayed combining RED, GREEN, and BLUE light.

Color Values:

  • HTML colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RCB).
  • The lowest value that can be given to one of the light sources is 0 (her 00). The highest value is 255 (her FF).

WEB STANDARD COLOR NAMES:

The World Wide Web Consortium (W3C) has listed 16 valid color names for HTML and CSS:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want to use other colors, you should specify their HEX value.

HTML QUICK LIST:

Here are the lists of HTML tags, elements which you can use in your web Pages.

  1. HTML Basic Document:

<html>

<head>
<title> Document name goes here</title>
</head>
<body>
Visible text goes here…
</body>
</html>

  1. Heading Elements:

<h1>Largest Heading</h1>

<h2> .    .     .  </h2>

<h3> .    .     .  </h3>

<h4> .    .     .  </h4>

<h5> .    .     .  </h5>

<h6>Smallest Heading</h6>

  1. Text Elements:

<p>This is a paragraph</p>          
<br/>( line break)
<hr/>(horizontal rule)
<pre>This text is preformatted</pre>

  1. Logical Styles:

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

  1. Physical Style:

<b>This text is bold</b
<i>This text is italic</i>

  1. Links, Anchors, and Image Elements:

<a href= “http://www.example.com/”>This is a Link</a>

<a href= “http://www.example.com/”><img src=“URL” alt= “AlternateText”></a>

<a href= “mailto:webmaster@example.com”>Send e-mail</a>

  1. A named anchor:

<a name= “tips”>Useful Tips Section</a>

<a href= “#tips”>Jump to the Useful Tips Section</a>

  1. Unordered list:

<ul>

<li>First item</li>

<li>Next item</li>

</ul>

  1. Ordered list:

<ol>

<li>First item</li>

<li>Next item</li>

</ol>

  1. Definition list:

<dl>

<dt> First term</dt>

<dd>Definition</dd>

<dt>Next term</dt>

<dd>Definition</dd>

</dl>

  1. Tables:

<table border= “1”>

<tr>

<th>Tableheader</th>

<th>Tableheader</th>

</tr>

<tr>

<td>sometext</td>

<td>sometext</td>

</tr>

</table>

  1. Frames:

<frameset cols= “25%,75%”>

<frame src= “page1.htm”/>

<frame src= “page2.htm”/>

</frameset>

  1. Forms:

<form action= “http://www.example.com/test.asp” method= “post/get”>

<input type= “text” name= “email” value= “someone@example.com” size= “40” maxlength= “50”/>

<input type= “password”/>

<input type= “checkbox” checked= “checked”/>

<input type= “submit”/>

<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= “</form>”

  1. Entities:

&It; is the same as<

&gt; is the same as<

&#169; is the same as

  1. Other Elements:

<!-This is a comment->

<blockquote>

Text quoted from a source.

</blockquote>

<address>

Written by gadgetgeeky.com<br/>

<a href= “mailto:us@example.org”>Email us</a><br/>

Address:

House:

Phone:

</address>

HTML LAYOUT:

Everywhere on the Web you will find pages that are formatted like newspaper pages using HTML columns.

HTML Layout-Using Tables:

One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.

A part of this page is formatted with two columns, like a newspaper page.

As you can see on this page, there is a left column and a right column. This text is  displayed in the left column.

Same Layout-Color Added:

One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.

As you can see at this page, there is a left column and a right column.

HTML FRAMES:

One of the most significant developments that Netscape and MS Internet Explorer have contributed is the introduction of frams. In olden days, we could see only one page at a time. Frames overcome this limitation. With the help of frames we can divide the reader’s browser window into multiple panes of information that can be viewed and changed independently. We can also display different HTML documents in each of the window. We can also control the display of one frame from another.

The main advantage of using frames becomes apparent when a user clicks on one of the links of any frames, the other frames on the same Web page will not change at all, but a new page will be loaded and displayed in the same frame.

With frames, you can display more than one Web page in the same browser window. With frames, you can display more than one HTML document in the same browser window. Each HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

The disadvantages of Using frames are:

  • The web devloper must keep trank of more HTML documents.
  • It is difficult to print the entire page.

The Frame Tag:

  • The <frame> tag defines what HTML document to put into each frame.

In the example below, we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document “frame_a.htm” is put into the first column, and the HTML document “frame_b.htm” is put into the second column:

<frame cols= “25%, 75%”>

<frame src= “frame_a.htm”>

<frame src= “frame_b.htm”>

</frameset>

Note: The frameset column size value an also be set in pixels (cols= “200,500”), and one the columns can be set to use the remaining space (cols= “25%,*”).

Frame Tags:

TagDescription
<frameset>Defines a set of frames.
<frame>Defines a sub window (a frame).
<noframes>Defines a noframe section for browsers that do not handle frames.
<iframe>Defines an inline sub window (frame).
HTML HEADINGS & html coding examples

HTML FONTS:

The <font> tag in HTML is deprecated. It is supposed to be removed in a future version of HTML. Even if a lot of people are using it, you should try to avoid it, and use styles instead. 

The HTML <font> Tag:

With HTML code like this, you can specify both the size and the type of the type of the browser output.

Example:

<p>

<font size= “2” face= “verdana”>

This is a paragraph.

</font>

</p>

<p>

<font size= “3” face= “Times”>

This is another paragraph.

</font>

</p>

Font Attributes:-

AttributeExamplePurpose
size= “number”size= “2”Defines the font size.
size= “+number”size= “+1”Defines the font size.
size= “-number”size= “-1”Defines the font size.
face= “face-name”face= “Times”Defines the font-name.
color= “color-value”color= “#eeff00”Defines the font color.
color= “color-name”color= “red”Defines the font color.

The <font> Tag Should NOT be Used : The <font> tag is deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations. In future versions of HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements.

HTML STYLES:-

The basic idea of a style sheet in HTML is that users can separate appearance considerations from the semantic structuring of a document. Using a style sheet, you should be able to set all the text H3 headings to a certain color, such as pink. You will do this by using a named collection of representation information called a style sheet.

How to use HTML Styles?

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet.

  1. External Style Sheet :- An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Website by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.

<head>

<link rel= “stylesheet” type= “text/css” href= “mystyle.css”>

</head>

  1. Internal Style Sheet :- An internal style sheet should be used when a single document has a unique style. You define internal style in the head section with the <style> tag.

<head>

<style type= “text/css”>

Body  {background-color: red}

p {margin-left: 20px}

</style>

</head>

  1. Inline Styles :- An inline style should be used when a unique style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style  attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style=”color: red; margin-left: 20px”>

This is a paragraph. “All is Well”

</p>

Style Tags :-

TagDescription
<style>Defines a style definition.
<link>Defines a resource reference.
<div>Defines a section in a document.
<span>Defines a section in a document.
<font>Deprecate. Use style instead.
<basefont>Deprecate. Use style instead.
<center>Deprecate. Use style instead.
HTML HEADINGS & html coding examples

HTML CHARACTER ENTITIES :-

Reserved characters in HTML must be replaced with character entities.

  1. Character Entities :- Some characters are reserved in HTML. For example, you cannot use the greater than or less than signs within your text because the browser could mistake them for markup. If we want the browser to actually display these characters we must insert character entities in the HTML source. A character entity looks like this: &entity_name; OR  &#entity_number; to display a less than sign we must write: &lt; or &#60; the advantage of using an entity name instead of a number is that the name often is easier to remember. However, the disadvantage is that browsers may not support all entity names (while the support for entity numbers is very good).
  2. Non-breaking Space :- The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add lots of spaces to your text, use the &nbsp; character entity.

Commonly Used Character Entities :-

ResultDescriptionEntity NameEntity Number
non-breaking space&nbsp;&#160;
<less than&It;&#60;
>greater than&gt;&#62;
&ampersand&amp;&#38;
¢cent&cent;&#162;
£pound&pound;&#163;
¥yen&yen;&#165;
euro&euro;&#8364;
§section&sect;&#167;
©copyright&copy;&#169;
®Registered trademark&reg;&#174;
HTML HEADINGS & html coding examples

HTML HEAD :- 

The Head Element :- The head element contains general information, also called Meta-information, about a document. Meta means: “information about”. You can say that Meta-data means information about data, or Meta-information means information about information.

Information Inside the Head Element :- The elements inside the head element should not be displayed by a browser. According to the HTML standard, only a few tags are legal inside the head section. These are: <base>, <link>, <Meta>, <title>, <style> and <script>.

Look at the following illegal construct:

<head>

<p>This is some text</p>

</head>

In this case the browser has two options:

  1. Display the text because it is inside a paragraph element.
  2. Hide the text because it is inside a head element.

If you put an HTML element like <h1> or <p> inside a head element like this, most browsers will display it, even if it is illegal.

Head Tags :-

TagDescription
<head>Defines information about the document.
<title>Defines the document title.
<base>Defines a base URL for all the links on a page.
<link>Defines a resource reference.
<Meta>Defines Meta information.
<!DOCTYPE>Defines the document type. This tag goes before the <html> start tag.
HTML HEADINGS & html coding examples

HTML META :-

The Meta Element :- HTML also includes a Meta element that goes inside the head element. The purpose of the Meta element is to provide Meta-information about the document.

Most often the Meta element is used to provide information that is relevant to browsers or search engines like describing the content of your document.

Keywords for Search Engines: Some search engines on the WWW will use the name and content attributes of the Meta tag to index your pages. This Meta element defines a description of your page :

<Meta name= “description” content= “Free Web tutorials on HTML, CSS, XML, and XHTML”/>

This Meta element defines keywords for your page:

<Meta name= “keywords” content= “HTML, DHTML, CSS, XML, XHTML, Javascript”/>

The intention of the name and content attributes is to describe the content of a page.

However, since too many webmasters have used Meta tags for spamming, like repeating keywords to give pages a higher ranking, some search engines have stopped using them entirely.

Unknown Meta Attributes : Sometimes you will see Meta attributes that are unknown to you like this:

<Meta name= “security” content= “low”/>

HTML UNIFORM RESOURCE LOCATORS :-

HTML Links:- 

When you click on a link in an HTML document like this: Last Page, an underlying <a> tag points to a place (an address) on the Web with an href attribute value like this : <a href= “lastpage.htm”>Last Page</a>.

URL-Uniform Resource Locator :-

Something called a Uniform Resource Locator (URL) is used to address a document (or other data) on the World Wide Web. A full Web address like this : http://www.w3schools.com/html/lastpage.htmfollows these syntax rules:

scheme://host.domain:port/path/filename

  • The scheme is defining the type of Internet service. The most common type is http.
  • The domain is defining the Internet domain name like w3schools.com.
  • The host is defining the domain host. If omitted, the default host for http is www.
  • The :port is defining the port number at the host. The port number is normally omitted. The default port number for http is 80.
  • The path is defining a path (a subdirectory) at the server. If the path is omitted, the resource (the document) must be located at the root directory of the Web site.
  • The filename is defining the name of a document. The default filename might be default.asp, or index.html or something else depending on the settings of the Web server.

URL Schemes :- Some examples of the most common schemes can be found below :

SchemesAccess
filea file on your local PC.
ftpa file on an FTP server.
httpa file on a World Wide Web Server.
gophera file on a Gopher server.
newsa Usenet newsgroup
telneta Telnet connection
WAISa file on a WAIS server
HTML HEADINGS & html coding examples

Accessing a Newsgroup:

The following HTML code:

<a href= “news:alt.html”> HTML Newsgroup</a>

creates a link to a newsgroup like this HTML Newsgroup.

Downloading with FTP:

The following HTML code:

<a href= “ftp;//www.google .com/ftp/winzip.exe”>Download Winzip</a>

creates a link to download a file like this: Download WinZip.

Link to your Mail system:

The following HTML code:

<a href= “mailto:someone@gmail.com </a>

creates a link to your own mail system like this:

someone@gmail.com.

HTML SCRIPTS :-

Add scripts to HTML pages to make them more dynamic and interactive.

Insert a Script into HTML Page:-

A script in HTML is defined with the <script> tag. Note that you will have to use the type attribute to specify the scripting language.

<html>

<body>

<script type= “text/javascript”>

document .write(“Hello World”)

</script>

</body>

</html>

The script above will produce this output:

Hello World!

How to Handle Older Browsers:-

A browser that does not recognize the <script> tag at all, will display the <script> tag’s content as text on the page. To prevent the browser from doing this, you should hide the script in comment tags. An old browser (that does not recognize the <script> tag) will ignore the comment and it will not write the tag’s content on the page, while a new browser will understand that the script should be executed, even if it is surrounded by comment tags.

Example : JavaScript:

<script type= “text/javascript”>

<!–

document.write(“Hello World”)

//–>

</script>

VBScript:

<script type= “text/vbscript”>

<!–

document.write(“Hello World!”)

‘__>

</script>

The <noscript> Tag: In addition to hiding the script inside a comment, you can also add a <noscript> tag.

The <noscript> tag is used to define an alternate text if a script is NOT executed. This tag is used for browsers that recognize the <script> tag, but do not support the script inside, so these browsers will display the text inside the <noscript> tag instead. However, if a browser supports the script inside the <script> tag it will ignore the <noscript>tag.

Example : JavaScript :

<script type= “text/javascript”>

<!–

document.write(“Hello World!”)

//!–>

</script>

<noscript> Your browser does not support JavaScript!</noscript>

VBScript:

<script type= “text/vbscript”>

<!–

document.write(“Hello World!”)

‘–>

</script>

<noscript> Your browser does not support VBScript!</noscript>

Script Tags:

TagDescription
<script>Defines a script.
<noscript>Defines an alternate text if the script is not executed.
<object>Defines an embedded object.
<param>Defines run-time settings (parameters) for an object.
<applet>Deprecated. Use <object> instead.
HTML HEADINGS & html coding examples

HTML 4.0 STANDARD ATTRIBUTES :-

HTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions) :

Core Attributes : Not valid in base, head, html, Meta, param, script, style, and title elements.

AttributeValueDescription
Classclass_rule or style_ruleThe class of the element.
Idid_nameA unique id for the element.
Stylestyle_definitionAn inline style definition.
Titletooltip_textA text to display in a tooltip.
HTML HEADINGS & html coding examples

Language Attributes :- Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.

AttributeValueDescription
dirltr / rtlSets the next direction.
langlanguage_codeSets the language code.

Keyboard Attributes :-

AttributeValueDescription
accesskeycharacterSets a keyboard shortcut to access an element.
tabindexnumberSets the tab order of an element.

HTML 4.0 EVENT ATTRIBUTES :-

New to HTML 4.0 is the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions.

Window Events :- Only valid in body and frameset elements.

AttributeValueDescription
onloadscriptScript to be run when a document loads.
onunloadscriptScript to be run when a document unloads.

Form Element Events :- Only valid in form elements.

AttributeValueDescription
onchangescriptScript to be run when the element changes.
onsubmitscriptScript to be run when the form is submitted.
onresetscriptScript to be run when the form is reset.
onselectscriptScript to be run when the element is selected.
onblurscriptScript to be run when the element loses focus.
onfocusscriptScript to be run when the element gets focus.
HTML HEADINGS & html coding examples

Keyboard Event :- Not valid in base, bdo, br, frame, frameset, head, html, iframe, Meta, param, script, style, and title elements.

AttributeValueDescription
onkeydownscriptWhat to do when key is pressed.
onkeypressscriptWhat to do when key is pressed and released.
onkeyupscriptWhat to do when key is released.

Mouse Events :- Not valid in base, bdo, br, frame, frameset, head, html, iframe, Meta, param, script, style, and title elements.

AttributeValueDescription
onelickscriptWhat to do on a mouse click.
ondblclickscriptWhat to do on a mouse double-click.
onmousedownscriptWhat to do when mouse button is pressed.
onmousemovescriptWhat to do when mouse pointer moves.
onmouseoutscriptWhat to do when mouse pointer moves out of an element.
onmouseoverscriptWhat to do when mouse pointer moves over an element.
onmouseupscriptWhat to do when mouse button is released.
html coding examples

HTML URL ENCODING :-

URL encoding converts characters into a format that can be safely transmitted over the Internet.

URL-Uniform Resource Locator:- Web browsers request pages from web servers by using a URL. The URL is the address of a web page like: http://www.tounchnewheights.com

URL Encoding: URLs can only be sent over the Internet using the ASCII character-set. Since URLs often contain characters outside the ASCII set, the URL has to be converted. URL encoding converts the URL into a valid ASCII format. URL encoding replaces unsafe ASCII characters with “%” followed by two hexadecimal digits corresponding to the character values in the ISO-8859-1 character-set. URLs cannot contain spaces. URL encoding normally replaces a space with a + sign.If you click the “submit” button below, the browser will URL encode the input before it is sent to the server. A page at the server will display the received input.

URL Encoding Examples :-

CharacterURL-encoding
%80
%A3
©️%A9
®️%AE
À%C0
Á%C1
Â%C2
Ã%C3
Ä%C4
Å%C5
html coding examples

HERE, YOU CAN SEE THE HTML EXAMPLES WHICH WILL INCREASE YOUR WORKING EFFICIENCY AND KNOWLEDGE FOR DOING WORK IN HTML.

*Simple HTML document:

<html>

<body>

The contents which you will write inside the body element are displayed in your browser.

</body>

</html>

*How is the text inside the paragraph displayed?

<html>

<body>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

</body>

</html>

*More paragraphs:

<html>

<body>

<p>

This paragraph contains a lot of lines in the source code, but the browser ignores it. 

</p>

<p>

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

</p>

<p>

This number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in the paragraph will change.

</p>

</body>

</html>

*Use Of Line breaks:

<html>

<body>

<p>This is <br/> a para<br/>graph with line breaks</p>

</body>

</html>

*Browser ignores your layout!

<html>

<body>

<p>

Jinnu lies over the ocean.

Jinnu lies over the sea.

Jinnu lies over the ocean.

Oh, bring back Jinnu to me.

</p>

<p>Note that your browser ignores your layout!

</p>

</body>

</html>

*Heading tags:

<html>

<body>

<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>

</body>

</html>

*Centre Aligned heading:

<html>

<body>

<h1 style= “text-align:centre”>This is heading 1</h1>

<p>The heading above is aligned to the centre of this page.The heading above is aligned to the centre of this page. The heading above is aligned to the centre of this page.</p>

</body>

</html>

*Insert a Horizontal line:

<html>

<body>

<p>The hr tag defines a horizontal rule:</p>

<hr/>

<p>This is a paragraph</p>

<hr/>

<p>This is a paragraph</p>

<hr/>

</body>

</html>

*Comment on HTML Source:

<html>

<body>

<!–This comment will not be displayed>

<p>This is a regular paragraph</p>

</body>

</html>

*Add a background Color:

<html>

<body style= “background-color:pink”>

<h2>Look: Colored Background!</h2>

</body>

</html>

*Text Formatting:

<html>

<body>

<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>

<p><big>This text is big</big></p>

<p><em>This text is emphasized</em></p>

<p><i>This text is italic</i></p>

<p><small>This text is small</small></p>

<p>This is<sub> subscript</sub>

and<sup>superscript</sup></p>

</body>

</html>

*Different Computer Output Tags:

<html>

<body>

<code>Computer code</code>

<br/>

<kbd>Keyboard input</kbd>

<br/>

<tt> Teletype text</tt>

<br/>

<samp>Sample text</samp>

<br/>

<var>Computer variable</var>

<br/>

<p><b>Note:</b>These Tags are often used to display computer/programming code.</p>

</body>

</html>

*Insert an Address:

<html>

<body>

<address>

Naveenita Suray<br/>

H/No. 85<br/>

Sector 15 A<br/>

Chandigarh.

</address>

</body>

</html>

*Use of Abbreviation and acronym:

<html>

<body>

<abbr title= “Hyper Text Markup Language”>HTML</abbr>

<br/>

<acronym title= “World Wide Web”>WWW</acronym>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>

</body>

</html>

*Text Directions:

<html>

<body>

<p>

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

</p>

<bdo dir= “rtl”>

Here is some Hebrew text

</bdo>

</body>

</html>

*Long and Short Quotations:

<html>

<body>

A blockquote quotation:

<blockquote>

This is a long quotation. This is a long quotation. This is a long Quotation. This is a long quotation. This is a long quotation.

</blockquote>

<p><b>The browser inserts line breaks and margins for a blockquote element.

</b></p>

A short quotation:

<q>This is a short quotation</q>

<p><b>The q element does not render as anything special.</b></p>

</body>

</html>

*How to mark deleted Text:

<html>

<body>

<p>

A dozen is 

<del>twenty</del>

<ins>twelve</ins>

pieces

</p>

<p>

Most browsers will overtrike deleted text and undertake inserted text. 

</p>

<p>

Some older browsers will display deleted or inserted text as plain text.

</p>

</body>

</html>

*How to create hyperlinks:

<html>

<body>

<p>

<a href= “lastpage.html”>

This text</a>is a link to a page on this Web site.

</p>

<p>

<a href= “http://www.google.com/”>

This text</a>is a link to a page on the World Wide Web.

</p>

</body>

</html>

*Set an Image as an link:

<html>

<body>

<p>Create a link of an image:

<a href= “default.html”>

<img src= “barbie.jps”alt= “my work” width= “40” height= “40”/>

</a></p>

<p>No border around the image, but still a link:

<a href= “default.htm”>

<img border= “0” src= “barbie.jps” alt= “my work” width= “40” height= “40”/>

</a></p>

</body>

</html>

*Open a link into new browser window:

<html>

<body>

<a href= “lastpage.htm” target= “_blank”>

Last Page</a>

<p>

If you set the target attribute of a link to “_blank”, the link will open in a new window.

</p>

</body>

</html>

*Jump to another part of the document:

<html>

<body>

<p>

<a href= “#C4”> See also Chapter 4.</a>

</p>

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla

</p>

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla

</p>

<h2><a name= “C4”>Chapter 4

</a></h2>

<p>This chapter explains ba bla bla

</p>

<h2>Chapter 5</h2>

<p>This chapter explains ba bla bla

</p>

</body>

>

</html>

*Break out of a frame:

<html>

<body>

<p>Locked in a frame?</p>

<a href= “http://www.google.com/

target= “_top”>Click here!</a>

</body>

</html>

*How to link to a mail message:

<html>

<body>

<p>

This is another mail to link:

<a>

href=”mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!”>Send mail!</a>

</p>

<p>

<b>Note:</b>Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.

</p>

</body>

</html>

*Create a table:

<html>

<body>

<p>

Each table starts with a table tag.

Each table row starts with a tr tag.

Each table data starts with a td tag.

</p>

<h4>One column:</h4>

<table border= “1”>

<tr>

<td>100</td>

</tr>

</table>

<h4>One row and three columns:</h4>

<table border= ‘1_+’>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

</table>

<h4>Two rows and three columns:</h4>

<table border= “1”>

<tr>

<td>100</td>

<td>200</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

*Different table border:

<html>

<body>

<h4>With a normal border: </h4>

<table border= “1”>

<tr>

<td> First</td>

<td> Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With a thick border:</h4>

<table border= “8”>

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With a very thick border:</h4>

<table border= “15”>

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

*Table with no border:

<html>

<body>

<h4>This table has no borders:</h4>

<table>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

*Headings in a Table:

<html>

<body>

<h4>Table headers:</h4>

<table border= “1”>

<tr>

<th>Name</th>

<th>Job Title</th>

<th>Telephone</th>

</tr>

<tr>

<td>Name</td>

<td>Professor</td>

<td>Number</td>

</tr>

</table>

<h4>Vertical headers;</h4>

<table border= “1”>

<tr>

<th>First Name:</th>

<td>Name</td>

</tr>

<tr>

<th>Job Title:</th>

<th>Professor</tf>

</tr>

<tr>

<th>Telephone:</th>

<td>Number</td>

</tr>

</table>

</body>

</html>

*Empty Cell:

<html>

<body>

<table border= “1”>

<tr>

<td>Some text</td>

<td>Some text</td>

</tr>

<tr>

<td></td>

<td>Some text</td>

</tr>

</table>

<p>

As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.

</p>

<p>

The trick is to insert a no-breaking space in the cell.

</p>

<p> No-breaking space is a character entity.

</p>

<p>

</p>The no-breaking space entity starts with an amoersand(“&”)

then the letters “nbsp”, and ends with a semicolon(“;”)

</p>

<p>

</p>

</body>

</html>

*Table with a Caption:

<html>

<body>

<h4>

This table has a caption, and a thick border:

</h4>

<table border= “4”>

<caption>My Caption</caption>

<tr>

<td>111</td>

<td>222</td>

<td>333</td>

</tr>

<td>U___</td>

<td>U___</td>

<td>U___</td>

</tr>

</table>

</body>

</html>

*Table cell which space more that one row/column:

<html>

<body>

<h4>Cell that spans two columns:</h4>

<table border=”1”>

<tr>

<th>Name</th>

<th colspan=”2”>Telephone</th>

</tr>

<tr>

<td>Name</td>

<td>555 77 854</td>

<td>555 77 854</td>

</tr>

</table>

<h4>Cell that spans two rows:</h4>

<table border=”1”>

<tr>

<th>First Name:</th>

<td>Name</td>

</tr>

<tr>

<th rowspan=”2”>Telephone:

</th>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77 855</td>

</tr>

</table>

</body>

</html>

*Tags inside a Table:

<html>

<body>

<table border>=”1”>

<tr>

<td>

<p>This is a paragraph</p>

<p>This is a another paragraph</p>

</td>

<td>This cell contains a table:

<table border=”1”>

<tr>

<td>All</td>

<td>is</td>

</tr>

<tr>

<td>well</td>

<td>Dear</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>This cell contains a list 

<ul>

<li>CSE<li>

<li>IT</li>

<li>ECE</li>

</ul>

</td>

<td>Good Morning India</td>

</tr>

</table>

</body>

</html>

*Table with/without cellpadding:

<html>

<body>

<h4>Without cellpadding:</h4>

<table border=”1”>

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With cellpadding:</h4>

<table border=”1”

cellpadding=”10”>

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

*Insert a Background color/image to table:

<html>

<body>

<h4>A background color:</h4>

<table border=”1”

bgcolor=”red”>

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>A background image:</h4>

<table border=”1”

background=”barbie.jpg”>

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

*Insert a background color/image to a table cell:

<html>

<body>

<h4>Cell backgrounds:</h4>

<table border=”1”>

<tr>

<td bgcolor=”green”>First

</td>

<td>Row</td>

</tr>

<tr>

<td

background=”barbie.jpg”>

Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

*Align contents in a table:

<html>

<body>

<table width=”400” border=”1”>

<tr>

<th align=”left”>Money spent on….</th>

<th align=”right”>January</th>

<th align=”right”>Februry</th>

</tr>

<tr>

<td align=”left”>Clothes</td>

<td align=”right”>1000</td>

<td align=”right”>1500</td>

</tr>

<tr>

<td align=”left”>Medicines</td>

<td align=”right”>500</td>

<td align=”right”>700</td>

</tr>

<tr>

<td align=”left”>Study</td>

<td align=”right”>5000</td>

<td align=”right”10000</td>

</tr>

<tr>

<th align=”left”>Sum</th>

<th align=”right”>6500</th>

<th align=”right”>11200</th>

</tr>

</table>

</body>

</html>

*Frame and border attribute:

<html>

<body>

<p>

If you look at the frames around the tables in these examples, your browser does not support the frame attribute.

</p>

<table frame=“hsides” border=”3”>

<tr>

<td>First row</td>

</tr>

</table>

<br/>

<table frame= “vsides” border= “3”>

<tr>

<td>First row</td>

</tr>

</table>

</body>

</html>

*How to create input fields:

<html>

<body>

<form action= “”>

First name: <input type=“text” name=“firstname”/><br/>

Last name: <input type=“text” name=“lastname”/>

</form>

</body>

</html>

*Password fields:

<html>

<body>

<form action=“”>

Username:<input type=“text” name=“user”/><br/>

Password:<input type=“password”name=“password”/>

</form>

<p><b>Note:</b> In password fields, the browser displays asterisks or bullets instead of characters.</p>

</body>

</html>

*Use of cheakboxes:

<html>

<body>

<form action= “”>

I have a bike:

<input type=“checkbox”name=“vehicle” value=“Bike”>

<br/>

I have a car:

<input type=“checkbox”name=“vehicle”value=“Car”>

<br/>

I have an airplan:

<input type=“Checkbox”name=“vehicle”value=“Airplane”>

</form>

</body>

</html>

*Use of radio buttons:

<html>

<body>

<form action= “”>

Male:<input type=“radio”

checked= “checked”name= “Sex”

value= “male”/><br>

Female:<input type= “radio” name= “Sex” value= “female”/>

</form>

<p>When a user clicks on a radio-button, it becomes checked, and all other buttons with equal name become unchecked.</p>

</body>

</html>

*How to create simple drop-down box:

<html>

<body>

<form action= “”>

<select name= “God”>

<option value= “Shiv”>Shiv</option>

<option value= “Vishnu”>Vishnu 

</option>

<option value= “Brahma”>Brahma

</option>

<option value= “Ram”>Ram</option>

</select>

</form>
</body></html>

*Text Area:

<html>
<body>
<p>This example cannot be edited because our editor uses a text area for input, and your browser does not allow a text area inside a text area.</p>
<textarea rows= “5” cols= “40”>Friends are God’s greatest blessings. I am happy to get such a nice friend like you.
</textarea>
</body>
</html>

 *Create a Button:

<html>
<body>
<form action= “”>
<input type= “button” value=”Hello world!”>
</form>
</body>
</html>

*Draw a border with a caption around a data:

<html>
<body>
<fieldset>
<legend>
Student information:
</legend>

<form action= “”>
Name <input type= “text”
size= “3”
Class<input type= “text”
size= “3”>
</form>
</filedset>
<p>
If there is no border around the input form, your browser is too old.
</p>
</body>
</html>

*Form with input field and submit button:

<html>
<body>
<form name= “input” action= “html_form_action.asp”method= “get”>
First name: <input type= “text” name=
“Firstname”value= “Mani”/><br/>
Last name: <input type= “text”name=
“Lastname”value= “Bnl”/><br/>
<input type= “submit”value= “Submit”/>
</form>
<p>If you click the “Submit” button,you will send your input to a new page called html_form_action.asp.</p>
</body>
</html>

*Form with checkboxes and submit button:

<html>
<body>
<form name= “input” action= “html_form_action.asp”method= “get”
I have a bike:
<input type= “checkbox”
name= “vehicle”
value= “Bike”
checked= “checked”/>
<br/>
I have a car:
<input type= “checkbox”
name= “vehicle” value= “Car”/>
<br/>
I have an airplane:
<input type= “checkbox”
name= “vehicle”
value= “Airplane”/>
<br/><br/>
<input type= “submit”value= “Submit”/>
</form>

<p>
If you click the “Submit” button, you send your input to a new page called html_form_action.asp.
</p>
</body>
</html>

*Form with radio buttons and submit button:

<html>
<body>
<form name= “input”
action= “html_form_action.asp”
method= “get”>
Male: <input type= “radio”
name= “Sex” value= “Male”
checked= “checked”/><br/>
Female: <input type= “radio”
name= “Sex” value= “Female”/>
<br/>
<input type= “submit”value= “Submit”/>
</form>
<p>If you click the “Submit” button, you wil send your input to a new page called html_form_action.asp.</p>
</body>
</html>

*Send e-mail from a form:

<html>
<body>
<form action= “MAILTO:manibnl@gmail.com” method= “post” enctype= “text/plain”>

<h3>This form sends an e-mail to manibnl.</h3>

Name:<br/>
<input type= “text” name= “name” value= “yourname”/>
<br/>

Mail:<br/>
<input type= “text” name= “mail” value= “yourmail”/>
<br/>

Comment: <br/>
<input type= “text” 
name= “comment”
value= “yourcomment” size= “40”/>

<br/><br/>
<input type= “submit”
value= “Send”>
<input type= “reset”
value= “Reset”>
</form>
</body>
</html>

*Insert Image:

<html>
<body>
<p>
An image:
<img src= “test.jpg” width= “60” height= “50”/>
</p>

<p>
A moving image:
<img src= “test1.gif”
width= “70” height= “80”/>
</p>


<p>
Note that the syntax of inserting a moving image is no different from that of a non-moving image.
</p>
</body>
</html>

*Background Image:

<html>
<body background= “background.jpg”>
<font color= white>
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p></font>
</body>
</html>

*Align an image with a text:

<html>
<body>
<p>An image
<img src= “background.jpg” align= “bottom” width= “48” height= “48”/>
in the text.</p>
<p>An image
<img src= “background.jpg” align= “middle” width= “48” height= “48”/>in the text.</p>
<p>An image
<img src= “background.jpg “align= “top” width=”48” height= “48”/>in the text.</p>
<p><b>Note:</b> The bottom alignment is the default!</p>
<p>An
<img src= “background.jpg” width= “48” height= “48”/>
An image before the text.</p>
<p>An image after the text.
<img src= “background.jpg” width= “48” height= “48”/></p>
</body>
</html>

*Let the image float from left/right from the text:

<html>1
hgff f d01<body>
<p>
<img src= “test.jpg” align= “left” width= “48” height= “48”/>
A paragraph with an image. The align attribute of the image is set to “left”. The image will float to the left of this text.</p>
<p>
<img src= “text.jpg” align= “right” width= “48” height= “48”/>
A paragraph with an image. The align attribute of the image is set to “right”. The image will float to the right of this text.
</p>
</body>
</html>

*Adjust images to dufferent size:

<html>
<body>
<p>
<img src= “test.jpg” width= “20” height= “20”/></p>
<p>
<img src= “test.jpg” width= “45” height= “45”/>
</p>
<p>
<img src= “text.jpg” width= “70” height= “70”/>
</p>
<p> You can make an image smaller or larger by changing the values of the “height” and “width” attributes. </p>
</body>
</html>

*Display an alternate text for the image:

<html>
<body>
<img src= “haridwar.jpg” alt= “Haridwar “My favourite Place” “width=”550” height= “300”/>
<p>The alt attribute is meant to be used as an alternative text if the image is not available. Text-only browsers cannot display images and will only display the text specified in the alt attribute. Here, the alt text is “Haridwar” My favourite Place “” </p>
</body>
</html>

*Make a hyperlink of an image:

<html>
<body>
<p>Create a link of an image:
<a href= “touchnewheights.html”>
<img src= “test.jpg” alt= “My site work1”
width= “80” height= “80”/>
</a></p>
<p>No border around the image, but still a link:
<a href= “touchnewheights.html”>
<img border= “0” src= “test.jpg”
alt= “My site work” width= “80” height= “80”/>
</a></p>
</body>
</html>

*Good background and text color:

<html>
<body bgcolor= “#d0dod0”>
<p>
This is a paragraph.
“All is well……………just have faith on the God and his blessings, everything will be alright.”
</p>
<p>
This is another paragraph.
“Friendship is like playing on see-saw not only because its fun with you but also because would not mind going down to see you rising.”</p>
</body>
</html>

*Bad background and text color:

<html>
<body bgcolor= “#fffff” text= “yellow”>
<p>
This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.
This is a paragraph.
</p>
<p>
This is another paragraph. This is another paragraph.
This is another paragraph, This is another paragraph.
</p>
</body>
</html>

*Styles in the head section of the HTML document:

<html>
<head>
<style type= “text/css”>
h1{color: red}
h3{color: blue}
</style>
</head>
<body>
<h1>This is header1</h1>
<h3>This is header3</h3>
</body>
</html>

*Link that is not underlined:

<html>
<body>
<a href= “tounchnewheights.htm”style= “text-decoration:none”>
THIS IS A LINK!
</a>
</body>
</html>

*Link to an external style sheet:

<html>
<head>
<link rel= “stylesheet” type= “text/css” href= “styles.css”>
</head>
<body>
<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p>
</body>
</html>

*Set a title of a document:

<html>

<head>

<title>The title is not displayed 

</title>

</head>

<body>

<p>This text is displayd</p>

</body>

</html>

*Document Description:

<html>
<head>
<Meta name= “Author”
content= “Manish”>
<Meta name= “Revised”
contect= “Manish, 05/11/2020”>
<Meta name= “Book Name”
content= “book name”>
</head>
<body>
<p>
The Meta attributes of this document identify the author and the editor of the book.
</p>
</body>
</html>

*Document Keywords:

<html>
<head>
<Meta name= “description” content= “HTML examples”>
<Meta name= “keywords” content= “HTML, JavaScript”>
</head>
<body>
<p>
The Meta attributes of this document describe the document and its keywords.
</p>
</body>
</html>

*Redirect a user to another link:

<html>
<head>
<Meta http-equiv= “Manish”
content= “5;url=http://www.google.com”>
</head>
<body>
<p>Sorry! We have moved! The new URL is: <a href= “http://www.google.com”> http://www.google.com</a></p>
<p>You will bw redirected to the new address in five seconds.</p>
<p>If you see this message for more than 5 seconds, please click on the link above!</p>
</body>
</html>

*Insert a script:

<html>
<body>
<script type= “text/javascript”>
document.write(“<h1> Hello World!</h1>”)
</script>
</body>
</html>

*Handle browser that do not support script:

<html>

<body>
<script type= “text/javascript”>

<!–
document.write(“If this is displayed, your browser supports scripting!”)
//–>

</script>
<noscript>No JavaScript support!</noscript>
<p>A browser that does not support JavaScript

Will show the text in the noscript element.

</p>
</body>
</html>

Our Suggested Article’s
ADVANTAGES AND DISADVANTAGES OF GADGETS IN OUR LIFE
What To Do If Mobile Is Stolen??
How To Choose Best Mobile Camera
How To Choose Best Processor For Mobile??
Best Top Ten Printers For Home & Office Use In 2020
How To Send Stickers In WhatsApp??
What Is Domain Name Servers?What Is Ip Address?? And Ip Address ClassesWhat Is A Modem? & Types Of ModemBest Wireless Earphones Under Rs 2000 -Tested & ReviewedConnecting To The Internet In Windows PcWhat Is Internet Definition And Evolution Of The Internet
Ten Best Bluetooth Earphones Under 1000 Rupees -Tested & ReviewedTen Best Wireless Mouse Under 1000 Rupees – Tested & ReviewedThe Best Mouse Under 500 Rupees – Tested And ReviewedBest Wireless Mouse Under 500 Rupees – Tested And Reviewed

Leave a Comment