Ticker

Header Ads Widget

Basic Of HTML

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

Example-
<head>
  <title>The Title</title>
</head>

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.

👉HTML TAGS

the HTML tags are list as follows

TAGSDescription
<!--...-->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.

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

2. Comment Tag

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

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

3. Comment Tag

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

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

4. Comment Tag

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

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

5. Heading Tag

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

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


👉HTML Frame 

Overview

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

Example-

<!DOCTYPE html> 
<html> 
<head> 
<title>Example of HTML Frames using row attribute</title> 
</head> 
<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" /> 
<noframes> 
<body>The browser you are working does not support frames.</body> 
</noframes> 
</frameset> 
</html>  

👉HTML Body Section

Definition

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.

Example

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

Basic tags of body section

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

1 Comments