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

JavaScript Syntax

Just like all programming language,in JavaScript also, the Syntax defines how to construct the language. It is the principle by which the language is constructed. The sentences of a programming language is called statements.

JavaScript Character Set

JavaScript uses Unicode character set. Unicode cover almost all characters, punctuations, and symbols in the world. Unicode enables processing, storage, and transport of text, independent of platform and language. Unicode can be implemented by different character set. The most commonly used encoding are UTF-8 and UTF-16. A character set contains the following:

1. Letters: The English alphabets (A to Z and a to z)
2. Digits: The Numerals (0 to 9)
3. Special Characters: + - * / \ ! @ # $ % ^ & * ( ) _ - = [ ] { } | ; : " ' , . ? etc
4. White spaces: Blank Space (Space bar), Tab, Return etc
5. Other characters: Non-Graphic Symbols.

JavaScript Functions

A function is a block of code designed to perform a particular task. JavaScript statements written inside a JavaScript function, can be invoked many times as the user desires. To invoke a function means to call upon the function or asking up the code in the function which is being called to be executed.

For example:

function myFunction (a, b) {
 return a + b;
}

JavaScript Data Type

JavaScript data types are the data's provided to an variable. It can be anything like number, characters, text string, arrays, objects, and much more. A programming language like JavaScript has to deal with all kinds of data. Data types are defined to differentiate the nature and size of incoming data. JavaScript is flexible enough to allow user to define data types therefore increasing its demand in the programming world.

For example:

var number = 10;
var name = "Edwin";
var language = ["HTML","CSS","JavaScript","jQuery"]

JavaScript Keywords

A JavaScript statement always starts with a keyword. The words that convey a specific meaning to the language compilers are called keywords. These are also known as reserved words as they are reserved by the language for special purpose and cannot be redefined for any other purpose.

abstract	else	instanceof	super
boolean	enum	int	switch
break	export	interface	synchronized
byte	extends	let	this
case	false	long	throw
catch	final	native	throws
char	finally	new	transient
class	float	null	true
const	for	package	try
continue	function	private	typeof
debugger	goto	protected	var
default	if	public	void
delete	implements	return	volatile
do	import	short	while
double	in	static	with

For example:

var x = 5 + 6;
var y = a * b;

JavaScript Identifiers

All programming languages must identify variables, functions, and objects with unique name. These unique names are called identifiers. Identifiers are the user defines words that are used to name different program elements such as memory locations, functions, statements, objects, classes etc. These are the fundamental building blocks of the program. The identifiers of memory locations are called variables; of functions are called function names; of statements are called labels and so on.

JavaScript Literals

Literals are tokens that represent data items that never change their value during the program run. They are often referred to as constants. In programming language, literals are constants. Number literals can be written with or without decimal points, and wit or without scientific notations. String literals can be written with double or single quotes.

For example:

3.14
1001
123e5
"Edwin Ronald Lambert"
'Edwin Ronald Lambert'

JavaScript Operators

Data processing is a sequence of operations. Operators are predefined symbols that can carry out operations. Operators are the token that triggers some kind of operations on the data. The data on which the operations are carried out are called operands. The operands may be either a constant or a variable. Generally operators perform the operations and return some results.

For example:

x = 5;
y = 6;
z = x + y;

JavaScript Statements

JavaScript statements are commands to the browser. It tells the browser what function it has to do. JavaScript ignores spaces, tabs and newlines that appears in a JavaScript program. Because of that, it allows you to format and indent the program in a neat and consistent way that make the code easy to read and understand. Semicolon separates the JavaScript statements. Therefore we add semicolon at the end of each executable statements.

For example:

x = 5 + 6;
y = x * 10;

JavaScript Variables

In JavaScript, variables are the named memory locations capable of storing constants or data. in fact, variables are containers for storing informations or data. A variable can be defined in any data type. The size and nature of data stored in a variable depends on the data type , it is declared. The equal sign assigns a value to a named variable.

For example:

x = 5;
y = 6;
z = x + y;

JavaScript Comments

JavaScript comments are used to explain the code and make the code more readable. It can also be used to prevent execution during testing alternative codes.

For example:

//This is a single line comment. I will not be executed.

/*
This is a double line comment.
I will not be executed.
*/

Read More

What is Blogging?

A blog is discussion site where one writes about an event, topic or even his daily life to the public published by the World Wide Web. The process of creating and writing in a blog is called blogging. It is an informative and fun thing to do. Anybody who has the knowledge to write, even from small children can write a blog. It is a free, inexpensive to enhance your reach to the public.

Websites have their time. It has cool designs and is still the main part of the web. But blogging is not website. It is completely different and also on the other hand similar to the web. You don't have to learn all computer languages for blogging. Just plain English (or any other language) and if you want you can also know the basic HTML, CSS code also. That may sometimes help you in the arrangement also.

There are many important things in blogging such as:

• Boost Search Engine Optimization: The web is looking for new and fresh contents. Nobody wants to see the viewed things again and again. They want new details, information, fun and the best way to provide these to them is by blogging. It is free of cost. So we can write our heart content in our own language. You can write the content in your own words. Make it fun and more people will read it. People are looking for new things, so it's our job to give it to them.

• Establish your Business: If you are trying to get your product to the world, then blogging is a path way for that. By blogging, you can define your products so that more people would see. That is why, most websites have Blog page in their menu bar. So even if your business is small, you can reach more people by giving more enhance and informative detail about your product and services which may convince the people to try out these services. At first, this may a bit slow, but if you put in your blood and sweat for this, you may ultimately find a better customer rate for your product.

• Develop Relation with Customers: By blogging, it allows you to connect with more people especially your site visitors. Most people don't want to see all those cool pictures of products or the website design. They wanted to know about the product, not only see it. They have so many questions to which we have to give the answers. So blogging is a way to give them what they want. By blogging, it helps you to promote your product and also establish a healthy relation with the customer who may sometimes share it to their friends.

• Connect People to your Product: Blogging allows people to see your personal side apart from all the marketing techniques. This allows people to connect and see the standards, vision and personality of your business.

• Get Shared: Connecting with more people may help your business because if the people see that your product is of importance, they may share this to the friends, family and more likely to the public. This brings in new visitors and then again new visitors. When the share this to social media sites, this allows more people to know about our site.

• Drive Traffic to Website: If more people view your blog, then they are surely likely to visit your site as well. Some of them may stay and may get interested in your products. So blogging is one way to get more people to join the community and help you rise in business.

So as you have guessed, blogging is good. It is really good for you if you have a small site or business. But remember, people don't come to your blog if you are giving the same old subjects that everyone else provides. You have to be creative. New ideas and new innovations are what people are looking for. This may help you to raise your business, get creative and know better writing also. Write your contents in your language. Yeah, you can search the web if you have doubts, but don't write like them. Be Creative!

There are many platforms through which you can let the world know. It is up to you to select which one to choose. Every platform has their own features. So don't worry, if one is good than the other and other is good then this one. Even if you choose any platform, it is you who does the work. So don't worry of choosing your platform. Get the one with which you are comfortable.

Read More

JavaScript Statements

A JavaScript consist of statements that are placed inside the <script> and </script> HTML tags. The <script> tag tells the browser that everything inside the tag is a script. In HTML, JavaScript is a sequence of statements that can be executed by a web browser.

JavaScript Statements

JavaScript statements are commands to the browser. It tells the browser what function it has to do. JavaScript ignores spaces, tabs and newlines that appears in a JavaScript program. Because of that, it allows you to format and indent the program in a neat and consistent way that make the code easy to read and understand. Semicolon separates the JavaScript statements. Therefore we add semicolon at the end of each executable statements.

JavaScript Code

JavaScript code is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they are written. JavaScript code can be grouped together in blocks. A block starts with the left curly bracket and ends with the right curly bracket. The purpose of the block is to make the sequence of the statement execute together. You can break up the code using a backslash within the text string.

For example:

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>
<p id="myPar">This is a paragraph</p>
<div id="myDiv">This is a Div</div>
<p><button type="button" onclick="myFunction()">Try it</button></p>

<script>
function myFunction()
{
document.getElementById("myPar").innerHTML="Hello World!";
document.getElementById("myDiv").innerHTML="How are you?";
}
</script>

</body>
</html>

JavaScript Identifiers

All programming languages must identify keyords, variables, methods, properties and labels with unique names. In JavaSript, these unique names are called identifiers. In JavaScript, these identifiers should begin with a letter, or an underscore (_) or a dollar sign ($). The other characters can be letters, digits, underscore or dollar sign. Some JavaScript identifiers are reserved as keywords and cannot be used as identifiers in a script.

JavaScript is case Sensitive

JavaScript is Case Sensitive. All identifiers, keywords, variables, methods, properties, and functions are case sensitive. A variable named myVariable is different from MyVariable, also the function getElementById is different from getElementbyID.

Read More

Resolve Windows Automatic Rebooting

Sometimes after a system failure or a system crash you may find that the windows OS keeps rebooting on and on. The system may open only up to the windows loading and then reboots. Yes, it is a problem happened to most PC in the world. You may sometimes worry about this or may get irritated. You may also try out all that you can to bring this back to normal. Sometimes you can or on the other hand, sometimes you cannot.

Some of the things that lead to this problem are:

• May be you clicked on the power switch to shut down fast. This saves time, but destroys the life of your computer. Because, one, by doing this you may corrupt the hard disk. The Hard disk as all of you is a magnetic device, so it needs time to save all the files correctly. That is why, it takes time to shut down when you click the Turn off button because the computer is saving the files and correcting all the work it had done. So if we shut down by clicking the power switch, we may risk losing the hard disk because the hard disk suddenly stops while working which may lead to system failure. So don't ever switch off like that. And all of you should use UPS also, because sudden power cuts can sometimes lead to hard disk damage. 

• Check your power supply. This problem may also arise due to dying power supply. Try checking your power supply whether it is in good condition and it still doesn't tell you; check the system with a spare one.

• It may be also due to the computer temperature. Always have in mind to have fans, heat sink or air compressor in your CPU cabinet. Make sure that these components work perfectly. Increase in work load means increase in production of heat, which may damage your processor. Keep your processor safe. Without your CPU, your computer is just like running dead. You need a processor for the smooth working of your PC. So keep in mind to keep safe of your CPU.

• Protect your cabinet from dust. Sometimes dust can also lead to damage in motherboard components. So it is better to clean your cabinet once in a while. Keep in mind to switch off your PC completely while cleaning. We do not want any damage to ourselves also. Right! 

Don't worry if your computer keeps on rebooting. You have many options to try out. First check all the system components. 

Method 1:

If you are using Windows 7 keep in mind that the problem is set by default to automatically restart the operating system after a system failure.

To avoid system reboot in the future, you have to cancel automatic reboot. Click Start - Computer - right click on Properties and click on Advanced System Settings.
 
In the advanced option, click Settings on Startup and Recovery.


In the startup and recovery settings, uncheck the Automatically restart for system failure and click Ok.


Method 2:

Here are some of the things to check while system rebooting.

• Check all your components are correct. No lose wire or something like that.

• Check you're HDD, RAM, power supply and other drives. Also your fans and heat sink.

• Remove the HDD and try to boot it from a bootable DVD.

• If you have a graphics card, remove it and try to connect the monitor to the onboard video chipset.

• Check the CPU temperature in BIOS.

• Check whether your CPU voltage is high enough to power up the system.

• It may be due to a system virus, try to get rid of it.

• Do a system repair by clicking the F8 button on restart. On the Advanced Boot Options screen, use the arrow keys to highlight Repair your computer, and then press Enter. Select a keyboard layout, and then click Next. On the System Recovery Options menu, click a tool to open it.

• Insert the Windows installation disc or a system repair disc and try to repair it.

• Troubleshoot your computer in safe mode. 

• If your problem doesn't end, try formatting and reinstalling the windows OS once more.

Hope you liked this post. If you have more ideas, feel free to comment them and let the people who are in trouble know the solutions.

Read More

Keyboard Shortcuts All Should Know In Windows

Keyboard is an essential part of our life. Not only for computer professionals, but also to small kids onwards, we need keyboards to type in the data to the computer. In fact, keyboard is one of those devices which have reduced time management. So keyboards are a friend to anybody who uses computer, which may be everyone in today's world.

Using keyboard we can many things such as type in text, play video games, etc. As all of you know, keyboards are the evolved form of typewriters which were used to write documents in olden times. Well, keyboard is also used in writing, but has many functionality.

So you all use keyboards, so it important to know some of the shortcuts of your computer. I am using a Windows PC, so I am posting only Windows shortcuts. Sorry! Mac users, no hard feelings. It's just that I have come in contact with Windows more. Using shortcuts is really helpful in certain times. Instead of using the mouse dragging the text over and over again. It is best to use keyboard shortcuts sometimes.

Here is a list of some of the important keyboard shortcuts that all of you should memorize.

Ctrl + X or Shift + Delete
Press the control key and X or shift key and delete key on the keyboard to cut the selected text or selected item.

Ctrl + C or Ctrl + Insert
Press the control key and X or control key and Insert key to copy the selected text or selected item.

Ctrl + V or Shift + Insert
Press the control key and V or shift key and Insert key to paste the selected text or selected item that we had cut or copied.

Ctrl + A
Press the control key and A to select all text or items present in the program or device.

Ctrl + Z
Press the control key and Z to undo any change that we had just implemented.

Ctrl + Y
Press the control key and Y to redo the change that we had just undo-ed.

Ctrl + S
Press the control key and S to save the document or other file in any program. This can be used anytime when you are doing something important.

Ctrl + N
Press the control key and N to open a new bank document in the current program.

Ctrl + O
Press the control key and O to open a file within the current program.

Ctrl + P
Press the control key and P to print the document which is opened right now.

Ctrl + F
Press the control key and F to open the find option in any program.

Alt + Tab
Press the alt key and tab key to switch between open programs moving forward. Press Shift key along with these two to move backwards.

If you are Windows Vista or & or higher, you can use the Windows key and tab key to switch your programs in full screenshot mode.

Ctrl + Tab
Press the control key and tab key to switch between the tabs of a programs moving forward. Press Shift key along with these two to move backwards.

Windows Key + D
Press the windows key and D to minimize all open programs and show the desktop.

Windows Key + Down Arrow & Windows Key + Up Arrow
Press the windows key and down arrow to minimize the program. First it comes to its "normal state"; then press the down arrow again to minimize it completely.

Press the windows key and up arrow to maximize the program from its normal state.

Windows Key + Left Key or Right Key
Press the windows key and left or right key to slide your program to the left side or the right side of your window.

Ctrl + Shift + Escape or Ctrl + Alt + Delete
Press the control key along with shift key and escape to bring the task manager up front with any intermediate step.

Press the control key along with alt key and delete key to bring the task manager in Windows XP, whereas we have to choose the task manager in Windows Vista, 7 and higher versions.

Ctrl + Escape
Press the control key and escape key to open the start menu. It is an alternate way of using the windows key.

Windows Key + L
Press the windows key and L to lock your PC and it immediately displays the login screen.

Windows Key + P
Press the windows key and P to switch setting if you are giving a presentation or using multiple monitors.

Windows Key + Plus sign or Minus sign
Press the windows key and plus sign or minus sign to zoom in or zoom out.

Ctrl + Backspace
Press the control key and backspace key to delete a full word instead of a single letter.

Ctrl + Left Key or Right Key
Press the control key and left or right key to move the cursor one word at a time instead of one character.

Ctrl + Shift + Left key or Right key
Press the control key and shift key along with left or right key to highlight one word at a time. Press the shift key and down to select one line instead of one word.

Shift + Home key or End key
Press the shift key and home or end key to highlight the line in which the cursor is instead or selecting one word or a character at a time.

Ctrl + Home key or End key

Press the control key and home or end key to bring the cursor to beginning or to the end of the document.

Page Up, Page Down

Press the page up key to move up one page at a time. Press the page down key to move down one page a time.

Press the space key also to move down one page at a time.

Alt + Enter

Press the alt key and enter key to open the properties of selected item.

Alt + F4

Press the alt key and F4 to close the current program.

F1 to F12 (Function Keys)
F1: Used as help key for Windows and also for most programs.
F2: Used to rename files and folders
F3: Opens the search feature for Windows and most programs.
F4: Opens find window in Windows 95 to XP, Opens address bar in windows.
F5: Refresh or reload Windows or the current document.
F6: Moves the cursor to the address bar of most programs.
F7: Commonly used to spell check or grammar check.
F8: Used to enter Windows startup menu, commonly to enter Windows safe mode.
F9: Refresh document in MS Word and send and receive mail in MS Outlook.
F10: Activates the menu bar of Windows.
F11: Enter and exit full screen mode in most browsers.
F12: Open the save as window in MS Word.

Read More

CSS List

The CSS List property allows you to set different list item markers for ordered and unordered list. In HTML, there are two kinds of list, unordered list and ordered list. With CSS, it can be styled further and images can be used as lists.

List Style

The list-style property is used to set all list styles in one declaration. The properties are in the order: list-style-type, list-style-position, list-style-image.

For example:

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style:square url('square.gif');
}
</style>
</head>

<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</body>
</html>

List Style Image

The list-style-image property replaces the list-item marker with an image.

For example:

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-image:url('square.gif');
}
</style>
</head>

<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</body>
</html>

List Style Position

The list-style-position property is used to specify if the list item markers should appear inside or outside of the content flow.

For example:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-position:inside; }
ul.b {list-style-position:outside; }
</style>
</head>

<body>
<p>The following list has the list-style-position inside:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>

<p>The following list has the list-style-position outside:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</body>
</html>

List Style Type

The list-style-type property is used to specify the type of list-item in a list.

For example:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type:circle; }
ul.b {list-style-type:square; }
ol.c {list-style-type:upper-roman; }
ol.d {list-style-type:lower-alpha; }
</style>
</head>

<body>
<p>Example of unordered lists:</p>

<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>

<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>

<p>Example of ordered lists:</p>

<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>

<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>

</body>
</html>

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

What is Bootstrap?

Bootstrap is a powerful free front-end framework for faster and better web development. Bootstrap includes HTML and also CSS based designs for typography, layout, forms, buttons, images etc. It also contains many JavaScript plugins. Bootstrap also has the ability to create responsive websites. Responsive websites are those websites that automatically adjust their design so as to work perfectly in all devices ranging from smart phones to desktop PC.

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.

Advantages of Bootstrap

• It is easy to use: Anybody who knows basic knowledge in HTML and CSS can design using Bootstrap.
• Responsive: Used to create responsive pages which adjust automatically as the device needs.
• Mobile-first framework: Mobile-first are also a part of the core framework.
• Browser compatible: Bootstrap is compatible with all browsers now a days.

Get Bootstrap

There are two ways by which you can access Bootstrap.

• Download Bootstrap from getbootstrap.com
• Include Bootstrap from a CDN

Bootstrap CDN

You can also host Boostrap yourself, you can just include it from a CDN (Content Delivery Network). MaxCDN provides the CDN support fot Boostrap.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

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