HTML Tutorials

HTML Tutorials & codes

How to change editor full screen in NetBeans IDE?

Objectives :

  • How to change editor full screen in NetBeans IDE?

NetBeans IDE is having a new and great feature where we can full screen the code editor window.

This small video tutorial shows how to change editor full screen in NetBeans IDE?

[youtube=”https://www.youtube.com/watch?v=w49znamwczw&feature=youtu.be”]

Being a trainer, I need to share screen with code and sometime only code nothing else. This is one of the most useful feature for me while teaching Java technologies and UI technologies such as HTML5, CSS, JS, etc. This is why I love NetBeans IDE a lot.

Hope this tutorial is helpful for you as well.

HTML5 Step By Step Guide : Episode 01

Objectives:

  • What is HTML5?
  • Why HTML5?
  • What is new in HTML5?
  • Journey of HTML5?
  • Timeline of HTML5?

This tutorial is part of HTML5 Step by Step Guide. This is series of HTML5 Video Tutorials and there will be lot of tutorials after this.

This is HTML5 Step by Step Guide Episode 01, describes basics about HTML5 like how HTML5 came in picture, journey of HTML5, What is exactly HTML5 is?

[youtube=https://www.youtube.com/watch?v=QUAZgNqGCPA]

Let me know if you have any doubts or queries related to HTML5. Please feel free to contact me or comment below.

HTML5 VS. HTML4

Objectives :

  • What are the differences between HTML4 & HTML5?
  • What is new in HTML5?
  • What is deprecated from HTML5?

Here are the key differences between HTML4 & HTML5:

HTML4

HTML5

DOCTYPE is much longer as HTML4 is based on SGML-based.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

DOCTYPE is required to enable standards mode for HTML documents.<!DOCTYPE html>

Audio and Video are not part of HTML4 specification.

Audio and Videos are integral part of HTML5 specifications e.g. <audio> and<video> tags.

Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc.

Vector graphics is integral part of HTML5 e.g. SVG and canvas.

It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices.

JS GeoLocation API in HTML5 helps identify location of user browsing any website (provided user allows it)

Browser cache can be used as temporary storage.

Application Cache, Web SQL database and Web storage is available as client side storage. Accessible using JavaScript interface in HTML5 compliant browsers.

Web Sockets are not available. Generally used mechanisms are long polling and streaming.

Full duplex communication channels can be established with Server using Web Sockets. Accessible using JavaScript interface in HTML5 compliant browsers.

Does not allow JavaScript to run in browser. JS runs in same thread as browser interface.

Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5.

Works with all old browsers

Most of modern browser have started supporting HTML5 specification e.g. Firefox, Mozilla, Opera, Chrome, Safari etc.

Enjoy coding now.

HTML5 Infographic

Objectives :

  • What is HTML5?
  • What is new in HTML5?
  • What is not in HTML5?
  • What is removed in HTML5?
  • Which tags are included in HTML5?
  • Which tags are obsolete in HTML5?
  • Why HTML5?
HTML5 Features : Infographic

HTML5 Features : Infographic

  • There are many new features in HTML5 which are incorporated in HTML5 in the form of new tags such as <canvas>, <header>, <footer>, <section>, <article>, <menu>, <figure>, <audio> and <video> by WHATWG.
  • While there are many new features and tags are added to HTML5 but some old tags are removed too like <b>, <font>, <frame>, <center> and <big>.
  • New features and syntax are much simplified than HTML4 such as doctype declaration is one of them and now you can simply write <!doctype html>
  • HTML5 syntax are compatible with HTML4 and XHTML but not with SGML.
  • Apart from all of these new feature HTML5, it is still under in progress and you should keep track of latest happenings in HTML5.

 

Hello World in different languages

Free Source Code

Free Source Code

Objectives :
* How to write Hello World in Java?
* How to write Hello World in C?
* How to write Hello World in PHP?
* How to write Hello World in C++?
* How to write Hello World in JavaScript?
* How to write Hello World in HTML?
* How to write Hello World in CSS?
* How to write Hello World in COBOL?

Java

[sourcecode language=”java”]
class HelloWorld
{
public static void main(String args[])
{
System.out.println(“Hello World!”);
}
}
[/sourcecode]

C

[sourcecode language=”c”]
#include
#include
void main()
{
clrscr();
printf(“Hello World!”);
getch();
}
[/sourcecode]

C++

[sourcecode language=”cpp”]
#include
#include
void main()
{
clrscr();
cout<getch();
}
[/sourcecode]

CSS

[sourcecode language=”css”]
body:before
{
content: “Hello World”;
}
[/sourcecode]

COBOL

[sourcecode language=”text”]
****************************
IDENTIFICATION DIVISION.
PROGRAM-ID. HELLO ENVIRONMENT DIVISION.
DATA DIVISION.
PROCEDURE DIVISION.
MAIN SECTION.
DISPLAY “Hello World!”
STOP RUN
****************************
[/sourcecode]

HTML

[sourcecode language=”html”]
<html>
<head>
<title>Hello World Example</title>
</head>
<body>
Hello World!
</body>
</html>
[/sourcecode]

JavaScript

[sourcecode language=”javascript”]
document.write("Hello World");
[/sourcecode]

PHP

[sourcecode language=”php”]
<!–?php echo ‘Hello World!’ ?–>
[/sourcecode]

Linux Shell Script

[sourcecode language=”text”]
echo "Hello World !"
[/sourcecode]

Enjoy coding!

Posted from WordPress for Android

Execute multiple functions on single HTML event

Objectives :-

* How to execute multiple functions on single HTML event?
* How to call multiple funtions on single HTML event?

Many time you may have faced this issue, you may need to call / execute multiple functions on single HTML event & you may have stucked there, stop working, changed the functionality, etc.

But now don’t worry about it anymore. Here is the Code to execute multiple functions on a single HTML event :-

[sourcecode language=”html”]
<html>
<head>
<script type="text/javascript">
function Message1 ()
{
alert ("Message1");
}
function Message2 ()
{
alert ("Message2");
}
</script>
</head>
<body>
<form name="NameTheForm">
<input type="Button" name="buttonName" onclick="Message1(); Message2()">
</form>
</body>
</html>
[/sourcecode]

The above code will execute / call two functions on single HTML event. Here for example I have written two functions but you can write multiple functions & can call them to onclick event separated by semicolon (;) as shown above.

Posted from WordPress for Android