HTML Forms

HTML Forms are used to create different kinds of user inputs.

HTML <form> Tag

HTML <form> tag is used create an HTML form to pass user inputs and data to the server. AN HTML form can contain input elements like text fields, checkbox, radio-buttons, submit-buttons, and more. A form can also contain select lists, textarea, fieldset, and label elements.

The <form> elemts can contain one or more of the following elements.

• <input>
• <textarea>
• <button>
• <select>
• <option>
• <optgroup>
• <fieldset>
• <label>

For example:

<form action="form.asp" method="get">
First name: <input type="text" name="fname">
Last Name: <input type="text" name="lname">
<input type="submit" value="Submit">
</form>

HTML <input> Tag

The most important form element is the input element. The <input> element is used to select user information. It specifies an input field where the user can enter data. The input element can vary in different ways, depending on the type attribute. It can be of text types, checkbox, password, radio button, submit button and more.

Text Fields
The text fields are used to create a one-line input field to enter text into.

For example:

<form>
First name: <input type="text" name="fname">
Last Name: <input type="text" name="lname">
</form>

Password Field
The password field are used to create a one-line input field to enter the password. The characters inside the password field are masked that is, it will be shown as asterisks or circles.

For example:

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

Radio Button
The radio buttons are used to create a radio button which allows the user to select only one of a limited number of choices.

For example:

<form>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
</form>

Checkboxes
The checkbox are used to create checkboxes that allows the user to select multiple number of options of a limited number of choices.

For example:

<form>
<input type="checkbox" name="web" value="HTML">Hyper Text Markup Language
<input type="checkbox" name="web" value="CSS">Cascading Style Sheets
</form>

Submit Button
A submit button is used to send form data into the server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute does some action the data it receives.

For example:

<form>
First name: <input type="text" name="fname">
Last Name: <input type="text" name="lname">
<input type="submit" value="Submit">
</form>

HTML <textarea> Tag

The <textarea> tag is used to define a multi-line text input control. A text area can hold an unlimited number of characters, and the text is rendered in a fixed-width font. The size of the textarea can be specified by the cols and rows attributes, or using CSS height and width properties.

For example:

<textarea rows="4" cols="20">
The <textarea> tag is used  to define a multi-line text input control.
 The size of the textarea can be specified by the cols and rows attributes 
 or using CSS height and width properties.
<textarea>

HTML <label> Tag

The <label> tag defines a label for an <input> element. The <label> tag does not render as anything special for the user. However, it provide a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.

For example:

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female">
</form>

HTML <fieldset> Tag

The <fieldset> tag is used to group related elements in a form. It draws a box around the related elements.

For example:

<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30">
Email: <input type="text" size="30">
</fieldset>
</form>

HTML <legend> Tag

The <legend> tag is used to specify a caption for the fieldset element.

For example:

<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30">
Email: <input type="text" size="30">
</fieldset>
</form>

HTML <select> Tag

The <select> tag is used to create a drop-down list.

For example:

<select>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="jQuery">jQuery</option>
</select>

HTML <optgroup> Tag

The <optgroup> tag is used to group related options in a drop-down list. It is used when you have a long list of options, and it helps to group realted options, ehich is easier to handle for a user.

For example:

<select>
<optgroup label="Designing">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
</optgroup>
<optgroup label="Scripting">
<option value="JavaScript">JavaScript</option>
<option value="jQuery">jQuery</option>
</optgroup>
</select>

HTML <option> Tag

The <option> tag is used to define a option in a drop-down list.

For example:

<select>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="jQuery">jQuery</option>
</select>

HTML <button> Tag

The <button> tag is used to create a clickable button. Inside the button element, we can put contents like text or images.

For example:

<button type="button">Click Me!</button>

HTML5 <datalist> Tag

The <datalist> tag is used to specify a list of pre-defined options for an input element. The datalist element is used to provide an autocomplete feature on input element. Users can see a drop-down list of pre-defined options as they input data.

For example:

<input list="browsers">
<datalist id="browsers">
<option value="Google Chrome">
<option value="Mozilla Firefox">
<option value="Safari">
</datalist>

HTML5 <keygen> tag

The <keygen> tag specifies a key-pair genator field used for forms. When the form is submitted, the private key is stored locally, and the public key is sent to the server.

For example:

<form action="form.asp" method="get">
Username: <input type="text" name="username">
Encryption: <keygen name="security">
<input type="submit" value="Submit">
</form>

HTML5 <output> tag

The <output> tag represents the result of a calculation.

For example:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

Read More

HTML Tables

Tables are used to create tabular data that is, data represented in rows and columns. HTML tables are created using the <table> tag in conjunction with the <tr> and <td> tags. Some also use table to represent web layouts.

HTML <table> Tag

The <table> tag is used to create a HTML table. The <table> tag is used in conjunction with the <tr>, <th> and <td> tag to create a table.

For example:

<table>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tbody>
</table>

HTML <tr> Tag

The <tr> tag is used to define a table row in an HTML table. The <tr> tag contains more than one <th> and <td> tags.

For example:

<table>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tbody>
</table>

HTML <th> Tag

The <th> tag is used to create a header cell in HTML tables. The header cell will be bold and centered and also left-aligned by default.

For example:

<table>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tbody>
</table>

HTML <td> Tag

The <td> tag is used to create standard cells in HTML tables. This cell usually contains the data in the table.

For example:

<table>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tbody>
</table>

HTML <caption> Tag

The <caption> tag is used to define a table caption. The <caption> tag is inserted just after the <table> tag. By default, the caption may be center aligned.

For example:

<table>
<caption>WEB DESIGNING</caption>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tbody>
</table>

HTML <thead> Tag

The <thead> tag is used to group the header contents in an HTML table. The <thead> tag is used in conjuction with the <tbody> and <tfoot> to specify each part of the table.

For example:

<table>
<thead>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tfoot>
</table>

HTML <tbody> Tag

The <tbody> tag is used to group the body contents in an HTML table. The <tbody> tag is used in conjuction with the <thead> and <tfoot> to specify each part of the table.

For example:

<table>
<thead>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tfoot>
</table>

HTML <tfoot> Tag

The <tfoot> tag is used to group the footer contents in an HTML table. The tag is used in conjuction with the <thead> and <tbody> to specify each part of the table.

For example:

<table>
<thead>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hyper Text Markup Language</td>
<td>Cascading Style Sheets</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>.html</td>
<td>.css</td>
</tr>
</tfoot>
</table>

HTML <colgroup> Tag

The <colgroup> tag is used to specify a group of one or more columns in a table for formatting. The <colgroup> tag is useful to specify styles for an entire column rather than repeating styles for each cell, for each row.

For example:

<table>
<colgroup>
<col span="2" style="background-color: yellow;"></col
<col style="background-color: red;"></col>
</colgroup>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>JavaScript</th>
</tr>
<tr>
<td>Markup Language</td>
<td>Style Sheet Language</td>
<td>Scripting Language</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
<td>.js</td>
</tr>
</tbody>
</table>

HTML <col> Tag

The <col> tag is used to specify column properties for each column within a element. The <col> tag is useful to specify styles for an entire column rather than repeating styles for each cell, for each row.

For example:

<table>
<colgroup>
<col span="2" style="background-color: yellow;"></col
<col style="background-color: red;"></col>
</colgroup>
<tbody>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>JavaScript</th>
</tr>
<tr>
<td>Markup Language</td>
<td>Style Sheet Language</td>
<td>Scripting Language</td>
</tr>
<tr>
<td>.html</td>
<td>.css</td>
<td>.js</td>
</tr>
</tbody>
</table>

Read More

HTML Sections

HTML elements can be grouped together for various content. Some of the common used tags are <div> and <span>. We can use <div> to display the header section or footer section. But, in HTML5, new tags such as <nav>, <header>, <footer> reduce the tag consumption used in <div> element.

HTML <div> Tag

The <div> tag is used as a block level element that can be used as a container for grouping other HTML elements. The <div> tag has no special meaning, except that it displays a line break before and after the tag. When used with CSS, it can be styled to our desire. It is also used to describe web page layouts.

For example:

<div>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</div>

HTML <span> Tag

The <span> tag is an inline element that can be used as a container for text. When used with CSS, it can be used to style the text.

For example:

My friend has <span style="color: brown">brown</span&gt: eyes.

HTML5 <header> Tag

The <header> tag is used to specify the header of the document or section. It should be used as the container for introductory contents.

For example:

<header>
<h1>HTML</h1>
<p>HTML means Hyper Text Markup Language</p>
</header>

HTML5 <section> Tag

The <section> tag id used to define a section in a document. A section is a used for grouping of content, typically with a heading.

For example:

<section>
<h1>HTML</h1>
<p>HTML means Hyper Text Markup Language</p>
</section>

HTML5 <article> Tag

The <article> tag is used to specify independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently.

For example:

<article>
<h1>HTML</h1>
<p>HTML means Hyper Text Markup Language</p>
</article>

HTML5 <aside> Tag

The <aside> tag is used to specify some content aside from the content it is placed in.

For example:

<aside>
<h1>HTML</h1>
<p>HTML means Hyper Text Markup Language</p>
</aside>

HTML5 <footer> Tag

The <footer> tag specifies the footer of the document or section. A footer usually contains the name of author, copyright information, links to term of use, contact information etc.

For example:

<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

HTML5 <details> tag

The <details> tag specifies additional details that the user can view or hide on demand. It can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag.

For example:

<details>
<summary>Copyright.</summary>
<p>by Edwin Ronald Lambert.</p>
<p>HTML is fun.</p>
</details>

HTML5 <dialog> Tag

The <dialog> tag is used to define dialog box or a window. The <dialog> element makes it easy to create popup dialog and modal in a web page.

For example:

<dialog open>This is a dialog!</dialog>

HTML5 <summary> Tag

The <summary> tag is used to define a visible heading for the <details> element. The heading can be clicked to view/hide the details.

For example:

<details>
<summary>Copyright 2014 </summary>
<p>Posted by: Edwin Ronald Lambert</p>
<p>All Rights Reserved</p>
<details>

HTML <iframe> Tag

The <iframe> tag is used to display an inline frame. That is to display a web page within a web page. It is used to embed another document inside the current document.

For example:

<iframe src="http://weblearntech.blogspot.in/"></iframe>

Read More

HTML Multimedia

Multimedia comes in different format. It can be pictures, audio, video, animation and much more. Modern web pages often have embedded multimedia elements and supports various multimedia format.

Multimedia Formats

Multimedia elements like audio and video are stored in media files. The most common way to look up a media file is to look its extension.

HTML5 <audio> Tag

Before HTML5, audio was played with a plug-in. HTML5

<audio controls>
<source src="song.ogg" type="audio/ogg"></source>
<source src="song.mp3" type="audio/mpeg"></source>
<source src="song.wav" type="audio/wav"></source>
</audio>

Audio Formats

MIDI	.mid .midi	MIDI (Musical Instrument Digital Interface) is a format for electronic music devices.
RealAudio	.rm .ram	RealAudio was developed to allow streaming of audio with low bandwidth.
WMA	.wma	WMA files can be delivered as a continuous flow of data, which make it practical for use in Internet Radio.
AAC	.aac	AAC was developed by Apple as the default format for iTunes.
WAC	.wav	WAV is compatible with Windows, Macintosh and Linux.
Ogg	.ogg	Ogg was developed by Xiph.Org Foundation.
MP3	.mp3	MP3 is the most popular sound format. It is supported in all major browsers.

HTML5 <video> Tag

Before HTML5, video was played with a plug-in. HTML5 <video> element is used with which one can embed video files on a web page. HTML5 on supports MP4, WebM and Ogg video file.

For example:

<video height="240" width="320" controls>
<source src="movie.ogg" type="video/ogg"></source>
<source src="movie.mp4" type="video/mp4"></source>
<source src="movie.webm" type="video/webm"></source>
</video>

Video Format

AVI	.avi	AVI was developed by Microsoft, therefore can be played in Windows Computer.
WMV	.wmv	WMV was developed by Microsoft, therefore can be played in Windows Computer.
Quicktime	.mov	Quicktime was developed by Apple, therefore can be played in Apple Computer.
RealVideo	.rm .ram	RealVideo was developed to allow streaming of audio with low bandwidth.
Flash	.swf .flv	Flash was developed by macromedia.
Ogg	.ogg	Ogg was developed by Xiph.Org Foundation.
WebM	.webm	WebM is a project by the web giants Mozilla, Opera, Adobe and Google.
MPEG	.mpg .mpeg	MPEG is the most popular video format in the internet.
MPEG-4 or MP4	.mp4	MP4 is the upcoming video format of the internet.

HTML5 <source> Tag

The <source> tag is used to specify multiple media resources for media elements such as <audio> and <video>. The <source> tag allows you to specify alternate video or audio files which the browser may choose from, based on its media types and codec support.

For example:

<audio controls>
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
<source src="song.wav" type="audio/wav">
</audio>

HTML5 <track> Tag

The <track> tag is used to specify text tracks for media elements. This element is used to specify subtitles, caption files or other files containing text, that should be visible while the media is playing.

For example:

<video width="320" height="240" controls>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="subtitles_en.vtt" kind="subtitle" srclang="en" label="English">
</video>

HTML Plug-ins

Plug-ins are used to extend the functionality of the HTML browser. A plug-in is a small computer program that can be used for many purpose: to display maps, scan for viruses and much more. Some of the well-known plug-ins are java applets and Adobe flash player. Plug-ins are added using the <object> tag and <embed> tag.

HTML <object> Tag
The <object> tag is used to define an embedded object within an HTML document. It is supported by all major browsers. It is used to embed plug-ins in Web pages.

For example:
Audio:

<object height="50" width="100" data="song.mp3"></object>

Video:

<object data="movie.mp4" height="200" width="200"></object>

HTML <embed> Tag
The <embed> tag is used to define a container for an external application or interactive content. It is supporteddi in all major browsers

For example:
Audio:

<embed height="50" width="100" data="song.mp3">

Video:

<embed src="movie.mp4" height="200" width="200">

HTML <param> Tag
The <param> tag is used to define parameters for plug-ins embedded with <object> tag.

For example:

<object data="song.mp3">
<param name="autoplay" value="true">
</object>

Read More

HTML Images

HTML has the function to add images also. Adding images, increases the design and creativity of the page. Today, almost all web pages have images.

HTML <img> Tag

In HTML, images are added using the <img> tag. It is an empty tag, so there is no need of closing it. To display the images, you will have to use the "src" attribute to find the destination source of the image.

For example:

<img src="web.jpg">

We use the "alt" attribute to specify an alternate text, when the image is not displayed or the source of the image is broken. We can give any text to the alt attribute value, because they are author-defined text.

For example:

<img alt="Web" src="web.jpg">

The "height" and "width" attribute are used to specify the height and width of the image. It is specified in pixels.
For example:

<img alt="Web" height="100px" src="web.jpg" width="100px">

HTML <map> Tag

The <map> tag is used to define a client-side image map. An image map is a image which have clickable areas. The "name" attribute of the image map is associated with the images usemap attribute to create a relation between them. The <map> tag contains area element, that defines clickable areas.

For example:

<img alt="Web" br="" height="100px" src="web.jpg" width="100px" usemap=#web>
<map name="#web">
<area alt="HTML" coords="80, 92, 95" href="html.html" shape="poly"></area>
<area alt="CSS" coords="180, 92, 105" href="css.html" shape="circle"></area>
<area alt="Bootstrap" coords="180, 120, 95" href="bootstrap.html" shape="poly"></area>
</map>

HTML <area> Tag

The <area> tag is used to define a clickable area inside a image map. It is always nested inside the map element.

For example:

<img alt="Web" br="" height="100px" src="web.jpg" width="100px" usemap=#web>
<map name="#web">
<area alt="HTML" coords="80, 92, 95" href="html.html" shape="poly"></area>
<area alt="CSS" coords="180, 92, 105" href="css.html" shape="circle"></area>
<area alt="Bootstrap" coords="180, 120, 95" href="bootstrap.html" shape="poly"></area>
</map>

HTML <canvas> Tag

The <canvas> tag is used to draw graphics using scripts mainly JavaScript. The <canvas> tag is just a container for the graphics, we have to use javaScript to draw the graphics.

For example:

<canvas id="myCanvas"></canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FFFF00';
ctx.fillRect(0,0,100,100);
</script>

HTML <figure> Tag

the <figure> tag is used to specify a self-contained content like illustration, diagrams, photos, code listing etc.

For example:

<figure>
<img alt="Web" height="100px" src="web.jpg" width="100px">
</figure>

HTML <figcaption> Tag

The <figcaption> tag used to define a caption to the figure. The <figcaption> element can be placed as the first or last child of the <figure> element.

For example:

<figure>
<img alt="Web" height="100px" src="web.jpg" width="100px">
<figcaption>Fig1 : The picture of web languages</figcaption>
</figure>

Read More

HTML Links

A link is group of words or images used to jump from one page to another. They are the most fundamental tag in the HTML page. So they are found mainly in all websites.

HTML <a> Tag

A <a> tag is used to jump from one page to another. It is used to display hyperlinks. When you rollover the cursor above the link, it turn into a little hand. The "href" attribute is used to denote the source of the link. It denotes the destination of the link.

For example:

<a href="https://www.blogger.com/index.html">HOME</a>

The target attribute is used to specify where to open the document. The target attribute can be given the following values:

• _blank
• _parent
• _self
• _top

For example:

<a href="https://www.blogger.com/index.html" target="_blank">HOME</a>

The id attribute is used to create bookmark inside the document itself.
<a href="#html5">See HTML5 Section</a>
<a id="html5">Introduction to HTML5</a>

For example:

<a href="#C10">See Chapter 10</a>
<h1>Chapter 1</h1>
<h1>Chapter 2</h1>
<h1>Chapter 3</h1>
<h1>Chapter 4</h1>
<h1>Chapter 5</h1>
<h1>Chapter 6</h1>
<h1>Chapter 7</h1>
<h1>Chapter 8</h1>
<h1>Chapter 9</h1>
<h1><a id="C10">Chapter 10</a></h1>
<h1>Chapter 11</h1>
<h1>Chapter 12</h1>
<h1>Chapter 13</h1>
<h1>Chapter 14</h1>
<h1>Chapter 15</h1>
<h1>Chapter 16</h1>
<h1>Chapter 17</h1>
<h1>Chapter 18</h1>
<h1>Chapter 19</h1>
<h1>Chapter 20</h1>

Hyperlinks can also be used to link email address. For that, we use the mailto:email_address in the href attribute.

For example:

<a href="mailto:edwinronaldlambert30@gmail.com">Send Mail</a>

HTML <nav> Tag

The <nav> tag is used to denote a set of navigation links. All the links inside the nav element will be regarded as a navigation link.

For example:

<nav>
<a href="https://www.blogger.com/html">HTML</a> |
<a href="https://www.blogger.com/css">CSS</a> |
<a href="https://www.blogger.com/javascript">JavaScript</a> |
<a href="https://www.blogger.com/jquery">jQuery</a>
</nav>

Read More

HTML Lists

Lists are used to order things or objects of the same category. They are used to number these objects according to a number. The most common types of lists are ordered list and unordered list.

Ordered List

The <ol> tag is used to denote an ordered lists. The ordered lists can be numerical or alphabetical in order.

Ordered lists can be denoted in the following types:

• 1 - Represented in numerical order
• A - Represented in uppercase alphabetical order
• a - Represented in lowercase alphabetical order
• I - Represented in uppercase roman numerals
• i - Represented in lowercase roman numerals

For example:

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

Unordered List

The <ul> tag is used to denote an unordered lists. The unordered lists are bulleted in order.

Unordered lists can be denoted in the following types:

• disc - Represented in disc shape
• square - Represented in square shape
• circle - Represented in circle shape

For example:

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

List Item

The <li> tag is used to denote a list item. List items are used in ordered list, unordered list and menu list.

For example:

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Definition List

A definition list is a list of terms with a description of each term. The <dl> tag is used to denote a definition list. The <dl> tag is used in conjunction with the <dt> tag (Definition Term) and the <dd> tag (Definition Data). The <dt> tag is used to define a term name in the definition list and the <dd> tag is used to describe the term name in the definition list.

For example:

<dl>
<dt>HTML</dt>
<dd>Used to describe web pages.</dd>
<dt>CSS</dt>
<dd>Used to style web pages.</dd>
</dl>

Menu List

The <menu> tag denotes a menu list. The menu list is used to define a list of commands. It is also used for context menus, toolbar and for listing forming controls and commands. In fact, menu element is not supported in any browser at the present.

For example:

<menu type="web">
<li>
<button type="button" onclick="file_new()">New</button>
<button type="button" onclick="file_open()">Open</button>
<button type="button" onclick="file_save()">Save</button>
</li>
</menu>

The <menuitem> Tag

The <menuitem> tag defines a menu that the user can invoke from a pop-up menu. Currently, this function is supported in Firefox only.

For example:

<menu type="context" id="mymenu">
<menuitem label="Refresh" onclick="windows.location.reload()" 
 icon="ico_reload.png">
</menuitem>
</menu>

Read More

HTML Text Formatting

HTML has different tags for different purpose. One such purpose is formatting text. In HTML, we can give headings, give styles to text and so on. It is thee function ehich make HTML easy to handle.

HTML Headings

Headings are important in HTML. Heading are given to mark the beginning or to know what the content is about.

Headings are defined using <h1> to <h6> tags. <h1> tag describe the most important heading and is the biggest heading of all. <h6> tag describes the least important heading and is the smallest of all.

Attributes

align

left center right justify

Specifies the alignment of a heading

For example:

<h1>This is a heading.</h1>
<h2>This is a heading.</h2>
<h3>This is a heading.</h3>
<h4>This is a heading.</h4>
<h5>This is a heading.</h5>
<h6>This is a heading.</h6>

HTML Paragraphs

Paragraphs are used to separate the content to separate sections. The paragraphs are defined using <p> tag.

Attributes

align

left center right justify

Specifies the alignment of the text within a paragraph

For example:
<p>This is a paragraph</p>

<p>This is another paragraph</p>

HTML Line Breaks

Line Break is the same function as Enter key in Microsoft Word. It is used to break the line and to start the continuous sentence in the next line. The line break is defined using the <br> tag. Note that <br> is an empty tag, so it does not contain a closing tag.

For example:

This is a sentence <br> with line breaks.

HTML Formatting Tags

HTML language uses text formatting tags to style HTML contents. These tags are used to edit the pages of the HTML document.

Text Formatting Tags
Text formatting tags are commonly used for editing text. The text formatting tags are:

Bold	(<b> and </b>)	Defines bold text
Emphasized	(<em> and </em>)	Defines emphasized text
Italics	(<i> and </i>)	Defines italics text
Small	(<small> and </small>)	Defines small text
Strong	(<strong> and </strong>)	Defines strong text
Subscript	(<sub> and </sub>)	Defines subscripted text
Superscript	(<sup> and </sup>)	Defines superscripted text
Underline	(<u> and </u>)	Defines underlined text
Strike-Through	(<s> and </s>)	Defines striked text
Insert	(<ins> and </ins>)	Defines inserted text
Delete	(<del> and </del>)	Defines deleted text
Word Break Opportunity	(<wbr>)	Defines where it is ok to add a line break in the text
Marked	(<mark> and </mark>)	Defines marked/highlighted text

For example:

<b>This text is bold.</b>
<em>This text is emphasized.</em>
<i>This text is italics.</i>
<small>This text is small.</small>
<strong>This text is strong.</strong>
This text is <sub>subscript</sub> and this text is <sup>superscript.</sup>
This text is <u>underlined.</u>
This text is <s>striked</s>
This text is <ins>inserted</ins> and this text is <del>deleted.</del>
This text has <wbr>line break<wbr> here.
This text is <mark>marked.</mark>

Computer Output Tags
Computer output tags are used to write data in a computer coded manner. It is useful in writing codes and programs. The computer output tags are:

Computer Code	(<code> and </code>)	Defines computer code text
Keyboard Input	(<kbd> and </kbd>)	Defines keyboard text
Sample Computer Code	(<samp> and </samp>)	Defines sample computer code
Variable	(<var> and </var>)	Defines a variable
Preformatted Text	(<pre> and </pre>)	Defines preformatted text

For example:

<code>This is a computer coded text.</code>
<kbd>This is keyboard text.</kbd>
<samp>This is a sample computer coded text.</samp>
<var>This is a variable.</var>
<pre>This is a
preformatted   text</pre>

HTML Citations, Quotation and Definition Tags

These tags are used to give information regarding the page and also giving an inline quotation and so on.

Abbreviation	(<abbr> and </abbr>)	Defines a abbreviation or acronym.
Address	(<address> and </address>)	Defines contact information for the owner/author of the document.
Bi-Directional Override	(<bdo> and </bdo>)	Defines the direction of the text.
Blockquote	(<blockquote> and </blockquote>)	Defines a section that is quoted from other source.
Quotation	(<q> and </q>)	Defines a short inline quotation.
Citation	(<cite> and </cite>)	Defines the title of the work.
Definition	(<dfn> and </dfn>)	Defines a definition term.

For example:

I want it <abbr title="As Soon As Possible">ASAP.</abbr>
<address>
Written by WebLearn Tech
Address: Asokapuram, Aluva
Phone: +91 9746187942
</address>
<bdo dir="rtl">
This sentence is written from right to left.
</bdo>
<blockquote cite="http://en.wikipedia.org/wiki/HTML">HTML or Hyper Text 
 Markup language is the standard markup language used to create webpages.
 </blockquote>
<q>Every moment in our life is precious for us all.</q>
<cite>WWW</cite> was invented by Tim Berners Lee.
<dfn>Definition term</dfn>

HTML Lines

HTML lines are created to separate each content with a line. The <hr> tag is used for this purpose.

Attributes

align	left center right	Specifies the alignment of a <hr> element
noshade	noshade	Specifies that a <hr> element should render in one solid color (noshaded), instead of a shaded color
size	pixels	Specifies the height of a <hr> element
width	pixels %	Specifies the width of a <hr> element

For example:
<p>This is a paragraph</p>

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

Read More

HTML Head and Body

The <head> tag and the <body> tag arethe two important tags used in HTML document. Both of them are essential in creating an HTML document.

HTML <head> Tag

The head element is a container for all head contents. Elements inside the <head> can include scripts, styles, title of the document, metadata, and more.
The following elements can go inside the head section :

• <title>
• <style>
• <base>
<link>
• <meta>
<script>
• <noscript>

HTML <title> Tag
The HTML <title> tag defines the title of the webpage. The title element is essential in an HTML document.

For example:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document..</title>
</li>
</ul>
<body>
Body of the document...
</body>
</html>

HTML <style> Tag
The HTML <style> tag is used to include styles for an HTML document.

Attributes

media	media_query	Specifies what media/device the media resource is optimized for
scoped	scoped	Specifies that the styles only apply to this element's parent element and that element's child elements
type	text/css	Specifies the MIME type of the style sheet

For example:

<head>
<style type="text/css">
body { background-color:red }
p { color:yellow}
</style>
</head>

HTML <base> Tag
The <base> tag specifies a default address or a default target for all the links in the page.

Attributes

href	URL	Specifies the base URL for all relative URLs in the page
target	_blank _parent _self _top framename	Specifies the default target for all hyperlinks and forms in the page

For example:

<head>
<base href="http://www.facebook.com/images"></base>
<base target="_blank"></base>
</head>

HTML <link> Tag
The <link> tag defines the relationship between a HTML document and an external source. It is commonly used to link style sheets.

Attributes

charset	char_encoding	Specifies the character encoding of the linked document
href	URL	Specifies the location of the linked document
hreflang	language_code	Specifies the language of the text in the linked document
media	media_query	Specifies on what device the linked document will be displayed
rel	alternate archives author bookmark external first help icon last license next nofollow noreferrer pingback prefetch prev search sidebar stylesheet tag up	Required. Specifies the relationship between the current document and the linked document
rev	reversed relationship	Specifies the relationship between the linked document and the current document
sizes	HeightxWidth any	Specifies the size of the linked resource. Only for rel="icon"
target	_blank _self _top _parent frame_name	Specifies where the linked document is to be loaded
type	MIME_type	Specifies the MIME type of the linked document

For example:

<head>
<link href="styles.css" rel="stylesheet" type="text/css"></link>
</head>

HTML <meta> Tag
The <meta> tag provide the metadata about the HTML document. It will be displayed on the page, but will be machine readable. Meta elements are usually used to specify the description, keywords, author of the document etc.

Attributes

charset	character_set	Specifies the character encoding for the HTML document
content	content	Gives the value associated with the http-equiv or name attribute
http-equiv	content-type default-style refresh	Provides an HTTP header for the information/value of the content attribute
name	application-name author description generator keywords	Specifies a name for the metadata
scheme	format/URI	Specifies a scheme to be used to interpret the value of the content attribute

For example:

<head>
<meta charset="UTF-8">
<meta name="description" content="HTML tutorials">
<meta name="keywords" content="HTML, CSS, Bootstrap">
<meta name="author" content="Edwin Ronald Lambert">
</head>

HTML <script>Tag
The <script> tag is used to define a client-side script, such as JavaScript. The script element usually contains scripting statements or an external file that contains the scripting statements.

Attributes

async	async	Specifies that the script is executed asynchronously (only for external scripts)
charset	charset	Specifies the character encoding used in an external script file
defer	defer	Specifies that the script is executed when the page has finished parsing (only for external scripts)
src	URL	Specifies the URL of an external script file
type	MIME-type	Specifies the MIME type of the script
xml:space	preserve	Specifies whether whitespace in code should be preserved

For example:

<head>
<script type="text/javascript">
document.write
("Hello World!")
</script>
</head>

HTML <noscript> Tag
The <noscript> tag is used to provide an alternate content for users who have disabled scripts in their browsers.

For example:

<head>
<script type="text/javascript">
document.write
("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript.<br /></noscript>

HTML <body> Tag

The <body> tag contains all the content visible in the HTML webpage. It can contain text, hyperlinks, pictures, tables, forms etc. In fact, all the page content is written inside the body element. That is why, the body element is one of the most important elements in HTML language.

Read More

HTML Know The Basics

HTML language have a pattern in which the content is edited. Everyone who codes in HTML language should follow the same principle provided by the HTML standards. HTML language consists of different sections in which each section is coded.

Here is a sample code written in HTML

<html>

<head>
Head of the document...
</head>

<body>
Body of the document...
</body>

</html>

HTML Versions

Since the beginning of the web, there have been many versions of HTML, each one of them better than the previous with more functions and efficiency.

1. HTML - Released in 1991
2. HTML+ - Released in 1993
3. HTML 2.0 - Released in 1995
4. HTML 3.2 - Released in 1997
5. HTML 4.01 - Released in 1999
6. XHTML 1.0 - Released in 2000
7. HTML5 - Released in 2012

HTML Declaration

The Declaration is the first thing to be coded in your HTML page. It defined the document type of the HTML page that you are coding. It is also prompted to add the declaration to your HTML page, so that the browser can determine what type of document the webpage is.

The Declaration is not an HTML tag, it is just used to instruct the web browser about the version of HTML used to code the webpage.

in HTML 4.01, the declaration refers to DTD, because HTML 4.01 was based on SGML. The DTD is used to specify the rules for the markup language, so that the browser can render the contents correctly. In HTML5 it does not require a reference to a DTD because it is not based on SGML. Here are some of the common DOCTYPE Declaration of HTML

HTML5

<!DOCTYPE html>

HTML 4.01 Strict

"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML <html> Tag

The <html> tag is used to describe the webpage. It is used to tell the browser that this is an HTML document.

The <html> tag is the root of an HTML document and is also the container for all other HTML elements except the declaration.

HTML <head> Tag

The <head> element is used to include the header files of the webpage. It is a container for all head elements.

The following elements can go inside the head section :

• <title>
• <style>
• <base>
• <link>
• <meta>
• <script>
• <noscript>

HTML <body> tag

The <body> tag is used to define the document's body. It is used to describe the visible webpage contents coded using HTML language.

The <body> tag contains all the contents of an HTML document, such as text, hyperlinks, images, tables, forms etc.

HTML Comments

Comments are used to place details and information about HTML elements. comments are not displayed by the browser but is visible in the source code. Comments are used using the comment tag <!-- and -->. Note that an exclamation mark (!) is written in the starting but not in the ending.

For example:

<!--This is a comment-->

Read More

HTML5

HTML5 is the latest version of HTML language. HTML5 was created to replace HTML 4, XHTML, and the HTML DOM Level 2. It is the fifth standard of the HTML standard.

HTML5 is developed by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). Before creating HTML5, WHATWG was working with web forms and applications and on the other hand. W3C was developing the XHTML 2.0. After that in 2006, they decided to cooperate and develop a new version of HTML.

Today, several elements in HTML 4.01 are obsolete, they are never used. So, in HTML5, these elements are removed or are re-written for better functioning. It is specially designed to improve the language with support to multimedia and deliver rich contents without the use of additional plugins. It is easily understood by human beings as well as computers and other devices. The current version delivers everything such as animation, graphics, musics and movies and is also used to create complicated web applications.

For better handling of today's internet, HTML5 is also included with new elements for drawing 2D graphics, displaying media, creating a better page structure and better form, and several new APIs, such as drag and drop, get the geographical position of a auser, store local data and more.
HTML5 is a cross-platform. It is very useful and helps to work whether we are using PC, or a Tablet, or a Smartphone.

Some of the new interesting features of HTML5 are:

• The <canvas> tag is used to draw 2D drawing.
• The <audio> and <video> tags are used for adding media on the webpage without the use of any additional plugin.
• HTML5 has support for local storage.
• Introduction of new content-specific elements such as <article>, <header>, <footer>, <nav> etc.
• New form controls like calender, date, time, email, url, search.

Here is a simple HTML5 document.

<!DOCTYPE html>
<html>

<head>

<title>Title of the document...</title>
</head>

<body>
Body of the document...
</body>

</html>

Read More

What is HTML?

HTML is a most commonly used language for designing websites. Today HTML language is being taught at young age onwards. This language is user-friendly and efficient to use. It is very interesting and easy to learn.

HTML stands for Hyper Text Markup Language.

HTML language consist of a set of rules as to govern how the website looks. These set of rules is called as Tags. An HTML tag is used to format and describes the content of the document in HTML. HTML language is a collection of tags and contents.

HTML language is a subset of Standard Generalized Markup Language (SGML) and is maintained and specified by the World Wide Web Consortium (W3C).

HTML Tags

HTML tags are instructions that are embedded directly into the text of an HTML document. HTML tags are contained inside a pair of angle brackets. For example: <html>. HTML tags are keywords that point out a specific function to perform in HTML language. For example: html tag (<html>) specifies that the document we are writing is an HTML code. image tag (<img />) specifies the image location and hyprlink (<a href="https://www.blogger.com/null">) specifies the desired location in an HTML document.

There are two types of tags

1. Container Tags
2. Empty Tags

Container Tags
HTML container tags are specified in pairs, delimiting text that will have some type of formatting like and . The first tag is called the opening tag and the second tag is called the closing tag. The ending tag is written like the starting tag but contains a forward slash (/) before the tag name.

Empty Tags 
HTML empty tag is a single tag, representing some formatting command in HTML. For example: <br >

HTML Elements

HTML document are defined by HTML elements. HTML elements contains everything from the opening tag to the closing tag. It includes the tagname and also the content between them. Some of the HTML elements have empty contents and these elements are closed in the opening tag itself.

HTML Attributes

HTML attributes are used to provide additional information about HTML elements. They are very useful in coding a webpage.

Attributes are always specified in the opening tag. Attributes are defined to the tagname and come in name/value pairs like name="value". Attributes values should always be enclosed in double quotes.

Attribute names and attribute values are case-sensitive that is they can be coded in uppercase character or lowercase character. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in HTML.

Writing an HTML code

HTML code is easy to learn and fun to write. We don't have to buy software for writing an HTML code. Simple text editors like Notepad (PC) and TextEdit (Mac) can be used to write a HTML code.

1. To write a HTML code, first open Notepad,
   To open Notepad go to: Start - Programs - Accessories - Notepad.
2. Type a HTML code in Notepad.

   <html>
   <head>
   header files goes here....
   </head>
   <body>
   body files goes here....
   </body>
   </html>
   

3. Next save your HTML code as html file. For that, click File - Save as. When you save your document save it with .htm or .html extension.
4. After you save your HTML file, open it in any web browser available in your computer. The resulted design you see is the HTML code translated into web pages.

Read More