Header Ads Widget

Basic Of HTML


👉HTML(Hypertext Markup Language)

HTML Stands for Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.
It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

  <title>The Title</title>

History of HTML

First developed by Tim Berners-Lee in 1990, HTML is short for Hypertext Markup Language. HTML is used to create electronic documents (called pages) that are displayed on the World Wide Web. Each page contains a series of connections to other pages called hyperlinks. Every web page you see on the Internet is written using one version of HTML code or another.


the HTML tags are list as follows

<!--...-->Describe a comment text in the source code 
<!doctype>Defines a document type 
<a>Specific a anchor (Hyperlink)
Use for link in internal/external web documents.
<abbr>Describes an abbreviation (acronyms) 
<acronym>Describes an acronyms
<address>Describes an address information 
<applet>Embedding an applet in HTML document
<area>Defines an area in an image map 
<article>Defines an article
<aside>Describes contain set(or write) on aside place in page contain
<audio>Specific audio content
<b>Specific text weight bold 
<base>Define a base URL for all the links with in a web page 
<basefont>Describes a default font color, size, face in a document
<bb>Define browser command, that command invoke as per client action 
<bdo>Specific direction of text display 
<big>Defines a big text
<blockquote>Specifies a long quotation 
<body>Defines a main section(body) part in HTML document 
<br />Specific a single line break 
<button>Specifies a press/push button 
<canvas>Specifies the display graphics on HTML web documment
<caption>Define a table caption 
<center>Specifies a text is display in center align
<cite>Specifies a text citation 
<code>Specifies computer code text 
<col>Specifies a each column within a <colgroup> element in table 
<colgroup>Defines a group of one or more columns inside table 
<command>Define a command button, invoke as per user action
<datagrid>Define a represent data in datagrid either list wise or tree wise
<datalist>Define a list of pre-defined options surrounding <input> tag
<dd>Defines a definition description in a definition list 
<del>Specific text deleted in web document 
<details>Define a additional details hide or show as per user action
<dfn>Define a definition team 
<dialog>Define a chat conversation between one or more person
<dir>Define a directory list
<div>Define a division part 
<dl>Define a definition list 
<dt>Define a definition team 
<em>Define a text is emphasize format 
<embed>Define a embedding external application using a relative plug-in
<eventsource>Defines a source of event generates to remote server 
<fieldset>Defines a grouping of related form elements 
<figcaption>Represents a caption text corresponding with a figure element
<figure>Represents self-contained content corresponding with a <figcaption> element
<font>Defines a font size, font face and font color for its text
<footer>Defines a footer section containing details about the author, copyright, contact us, sitemap, or links to related documents.
<form>Defines a form section that having interactive input controls to submit form information to a server. 
<frame>Defines frame window.
<frameset>Used to holds one or more <frame> elements.
<h1> to <h6>Defines a Headings level from 1 to 6 different sizes. 
<head>Defines header section of HTML document. 
<header>Defines as a container that hold introductory content or navigation links.
<hgroup>Defines the heading of a section that hold the h1 to h6 tags.
<hr />Represent a thematic break between paragraph-level tags. It is typically draw horizontal line. 
<html>Define a document is a HTML markup language 
<i>Defines a italic format text 
<iframe>Defines a inline frame that embedded external content into current web document. 
<img>Used to insert image into a web document. 
<input>Define a get information in selected input 
<ins>Used to indicate text that is inserted into a page and indicates changes to a document. 
<isindex>Used to create a single line search prompt for querying the contents of the document.
<kbd>Used to identify text that are represents keyboard input. 
<keygen>Used to generate signed certificate, which is used to authenticate to services.
<label>Used to caption a text label with a form <input> element. 
<legend>Used to add a caption (title) to a group of related form elements that are grouped together into the <fieldset> tag. 
<li>Define a list item either ordered list or unordered list. 
<link>Used to load an external stylesheets into HTML document. 
<map>Defines an clickable image map. 
<mark>Used to highlighted (marked) specific text.
<menu>Used to display a unordered list of items/menu of commands. 
<meta>Used to provide structured metadata about a web page. 
<meter>Used to measure data within a given range.
<nav>Used to defines group of navigation links.
<noframes>Used to provide a fallback content to the browser that does not support the <frame> element.
<noscript>Used to provide an fall-back content to the browser that does not support the JavaScript. 
<object>Used to embedded objects such as images, audio, videos, Java applets, and Flash animations. 
<ol>Defines an ordered list of items. 
<optgroup>Used to create a grouping of options, the related options are grouped under specific headings. 
<option>Represents option items within a <select><optgroup> or <datalist> element. 
<output>Used for representing the result of a calculation.
<p>Used to represents a paragraph text. 
<param>Provides parameters for embedded object element. 
<pre>Used to represents preformatted text. 
<progress>Represents the progress of a task.
<q>Represents the short quotation. 
<rp>Used to provide parentheses around fall-back content to the browser that does not support the ruby annotations.
<rt>Specifies the ruby text of ruby annotation.
<ruby>Used to represents a ruby annotation.
<s>Text display in strike through style. 
<samp>Represents text that should be interpreted as sample output from a computer program. 
<script>Defines client-side JavaScript. 
<section>Used to divide a document into number of different generic section.
<select>Used to create a drop-down list. 
<small>Used to makes the text one size smaller. 
<source>Used to specifies multiple media resources.
<span>Used to grouping and applying styles to inline elements. 
<strike>Represents strikethrough text.
<strong>Represents strong emphasis greater important text. 
<style>Used to add CSS style to an HTML document. 
<sub>Represents inline subscript text. 
<sup>Represents inline superscript text. 
<table>Used to defines a table in an HTML document. 
<tbody>Used for grouping table rows. 
<td>Used for creates standard data cell in HTML table. 
<textarea>Create multi-line text input. 
<tfoot>Used to adding a footer to a table that containing summary of the table data. 
<th>Used for creates header of a group of cell in HTML table. 
<thead>Used to adding a header to a table that containing header information of the table. 
<time>Represents the date and/or time in an HTML document.
<title>Represents title to an HTML document. 
<tr>Defines a row of cells in a table. 
<track>Represents text tracks for both the <audio> and <video> tags.
<tt>Represents teletype text.
<u>Represents underlined text. 
<ul>Defines an unordered list of items. 
<var>Represents a variable in a computer program or mathematical equation. 
<video>Used to embed video content.
<wbr>Defines a word break opportunity in a long string of text.

HTML basics Tags with example

 1. Paragraph Tag

HTML paragraph define using <p> tag.

  <p> This is first Paragraphs </p>
  <p> This is Second Paragraphs </p>

2. Comment Tag

Defines the Comments <!-- Your Comment --> tag.

    <img src="../../images/w2t.png" width="380" height="70" />  <!--Image file-->

3. Comment Tag

To display images into web document. HTML Images are define inside the <img /> tag.

    <img src="../../images/w2t.png" width="380" height="70" />

4. Comment Tag

Defines the Link in internal or External document. HTML Link are defined inside the <a> tag.

    <a href="http://asmtech">Web Development Tutorial</a>

5. Heading Tag

Defines the Heading <h1> to <h6> tags.

    <h1>Heading h1</h1>--------heading
    <h2>Heading h2</h2>
    <h3>Heading h3</h3>
    <h4>Heading h4</h4>
    <h5>Heading h5</h5>
    <h6>Heading h6</h6>--------Minor heading

👉HTML Frame 


  • HTML Frame used to split the browser window in several individual frames that can contain a separate HTML web document.

  • Frame is use to improve appearance and usability of a site.

  • HTML document within frame include a other web pages link can be opened in the desired frame.

Advantages of Frames

  • Frame Provides technical sophisticated appearance to the web site.

  • It facility to reduce downloading time and improves the usability of the website.

  • Frames generally include navigation link, header or footers, which help user to find and navigate to required information.

  • It separates content of website from navigation elements, which is useful for website maintenance and content modification.


<!DOCTYPE html> 
<title>Example of HTML Frames using row attribute</title> 
<frameset rows = "20%, 60%, 20%"> 
<frame name = "top" src = 
"C:/Users/dharam/Desktop/attr1.png" /> 
<frame name = "main" src = 
"C:/Users/dharam/Desktop/gradient3.png" /> 
<frame name = "bottom" src = 
"C:/Users/dharam/Desktop/col_last.png" /> 
<body>The browser you are working does not support frames.</body> 

👉HTML Body Section


HTML body section is a main contain section of web page all contain that will be seen when the user loads the web page.

HTML body section supported all the contains such as text, hyper-links, images, Special Character, lists, tables, frames, forms etc.

It's most powerful section and important section to display web page.


  <link rel="stylesheet" type="text/css" href="styles.css"> 
  <title>Example for Body section elements</title> 
  <!-- Body Part -->
  <p> This is Body Section </p>
  <a href="../html_tutorial.php"> goto HTML Index Page </a> 

Basic tags of body section

<a>Defines the internal link, external link and Subdirectory link.
<br />Defines the single line break.
<code>Defines the computer code on text base.
<div>Defines the division section in a document.
<form>Defines the HTML form for use in input documents
<frame>Defines the many individual part
<hr />Defines the horizontal line.
<p>Defines the paragraph in web documents.
<pre>Defines the preformatted text.
<span>Defines a section in a web document.
<table>Defines the table.
<textarea>Defines the multiline text.

Post a Comment