Linking to a mail System in HTML

 A mail System allows us to send and receive any number of e-mails. You can use the href  attribute pf the elementto set the Email address of a recipient, such as
Let’s create a web page named “mail.html” HTML file to understand this:

In this code we have created a hyperlink, by clicking on which we can go to the reference of local mail system using mailto keyword:

When we click on Email me hyperlink, we will directed to the reference mail message window:

This mail message window shown above allows us to send a mail to named recipient that we have mentioned in the code.

Note:  Here if we want to add CC , BCC , Subject and Body  of the email the Let’s try this Code :

Here we have specified the values of

Subject-C# Corner Event
Body –
Hi,
C# Corner Delhi Chapter Meet was on 20 July 2013.
Thanks and Regards

  Now when we click on ‘Mail me’ hyperlink oh mail2.html then Output will be:

Creating Keyboard Shortcut in HTML Document

     For Displaying the Keyboard text, we can also create the keyboard shortcut to perform various operations, such as clicking a link or button. We can use the accesskey  attribute when defining the element  to provide the keyboard shortcut to that element or control. Let’s create a Web Page, named “accesskey.html” and understand ‘How to create a keyboard shortcut.
First We will Write a Code for ‘accesskey.html :
<!DOCTYPE HTML>
<HTML>
  <HEAD>
            <TITLE>Key Board Shortcut</TITLE>
  </HEAD>
  <BODY>
            <H1>Use the Shortcut keys to access the Content </H1>
            <P>Press the <KBD>Alt + W</KBD> keys to navigate the following link : </P>
            <A href=”XYZ.html” accesskey=w target=>Open XYZ.html file. </A>
            <P> Press the <KBD> ALT + Z </KBD> keys to focus on the following text field </P>
            Enter Your Name : <Input type=”text” name=”name” accesskey=z>
            <P> Press the <KBD> ALT+S</KBD> keys to click the button to submit the form:</P>
            <INPUT type=”submit” accesskey=s onclick=”alert(‘Form submitted successfully.’)”>
  </BODY>
</HTML>
Here we have used a hyperlink, a text field and a button on the web page and assigned a keyboard shortcut using the accesskey  attribute. The output of the above code is given below :
Now When we press  ALT + * Key :
  • ·         ALT + W : The focus goes on the hyperlink, and we get redirected to the page specified by the hyperlink (XYZ.html)
  • ·         ALT+Z : When we press ALT+Z key then get a focus on the Enter your Name text field.
  • ·         ALT+S: This focuses  on Submit button and give an alert box  :




SCRIPT and NOSCRIPT Element in HTML

The SRIPT element is used in the HTML file for using the JavaScript in the code. JavaScriptallows us to enhance the functionality of the HTML file. The NOSCRIPT element is used to display the alternate text on the browser that does not support scripts.
An HTML file named: “SCRIPT_NOSCRIPT.html” , Let’s understand the use of SCRIPT and NOSCRIPT  elements in HTML file.
Write the Code :

<!DOCTYPEHTML>
<HTML>
  <HEAD>
            <SCRIPT TYPE=”text/javascript”>
                        document.write(“Welcome in HTML World”)
            </SCRIPT>
  </HEAD>
  <BODY>
            <NOSCRIPT>
                        JavaScript is disabled or not to your
Browser.
            </NOSCRIPT>
  </BODY>
</HTML>
Here Scripted text is “Welcome in HTML world”, If our Web browser supports JavaScript the it will show Welcome in HTML World otherwise it will display NOSCRIPT  Content.

Output When Browser JavaScript Supporting:
Now Disable the Java Script from your Browser(Google Chrome):
Steps for Disabling JavaScript from your Browser:
      1.      Click on Customize and control Google Chrome button at the top corner and select the “Setting” option       from the context menu.

After Clicking on setting option:

         After Clicking on setting option:

       2.      Select the Show advance Setting then Click on Privacy >> Content Setting :

1.      3.Select the Do Not allow any Site to Run JavaScript radio button in the JavaScript section to disable the JavaScript. 

1.                  

 4.      Close the Setting page and Open the SCRIPT_NOSCRIPT.HTML file, Now it will show the content written in NOSCRIPT Element. “JavaScript is disabled or not to your  Browser.”

Working with Root and Metadata Elements

In HTML, <HTML> is root element and <HEAD>, <TITLE>, <BASE> ,<SCRIPT>,<STYLE >.. etc are metadata elements. Let’s create an HTML file to understand the root and metadata elements.
File Name: “metadata.html”
<!DOCTYPE HTML>
<HTML>
   <HEAD>
         <STYLE type=”text/css”>
              body {color: red}
             </style>
             <meta name=”car” contents=”some of the cars are red.”>
         <title>
                        Red Cars.
            </title>
            <base href=”http://www.w3.org/TR/HTML5/semantics.html#semantics” target=”parent”/>
  </HEAD>
  <body>
            <H1> Red Cars</H>
            <P> This contents is related to Red cars of in the world.</P>
            <A href=””semantics.html#the-base-element”>Base Element</A> –
            <A href=”semantics.html#semantics”>The Root Element</A>
  </BODY>
</HTML>
Description :
In above HTML, we have used HEAD, STYLE,META, TITLE, BASE, and BODY elements. In the HEAD element, we have used STYLE element to define the style sheet properties for the document. In the META element, we have specified the description of the document and in the TITLE element, we have specified the title of the document. The BODY element is used to define the body of the document, which contains the H1 element to display the heading, the P element to display the paragraph and the A element to display the links on the document.
OUTPUT :

Validating an HTML/HTML5 Document.

Validating of HTML document means checking or verify its code according to standards of HTML5 specifications. For validating an HTML5 document we can use HTML validator. These are programs that check HTML documents according to the standard defined in them. Some common online HTML validator programs-

Perform the following steps to validate the HTML document, (FirstHTMLpage.html)
               1.      Open a browser and URL (http://validator.w3.org ).

          2.      Select the validate by Direct Input tab and add the HTML code  of the FirstHTMLpage.html file in the provided are.
( We can also upload the respective HTML file document directly or By URL).
          3.      Click the check button. If code encompass the HTML5 standards, the validator displays the result accordingly-


       4.      Click the Check button ant Note that if your document does not meet the standards  of HTML5, the errors occur, Like :- 




5.  You Can remove the all errors by using this platform.

About Validation  Wiki Says:
“The Markup Validation Service is a validator by the World Wide Web Consortium (W3C) that allows Internet users to check HTML and XHTML documents for well-formed markup. Markup validation is an important step towards ensuring the technical quality of web pages; however, is not a complete measure of web standards conformance. Though W3C validation is important for browser compatibility and site usability, it has not been confirmed what effect it has on search engine optimization.”
Why? You Should Validate:
Then w3c gives an Answer:-
Validation as a debugging tool
While contemporary Web browsers do an increasingly good job of parsing even the worst HTML “tag soup”, some errors are not always caught gracefully. Very often, different software on different platforms will not handle errors in a similar fashion, making it extremely difficult to apply style or layout consistently.
Using standard, interoperable markup and stylesheets, on the other hand, offers a much greater chance of having one’s page handled consistently across platforms and user-agents. Indeed, most developers creating rich Web applications know that reliable scripting needs the document to be parsed by User-Agents without any unexpected error, and will make sure that their markup and CSS is validated before creating a rich interactive layer.
When surveyed, a large majority of Web professionals will state that validation errors is the first thing they will check whenever they run into a Web styling or scripting bug.
Validation as a future-proof quality check
Checking that a page “displays fine” in several contemporary browsers may be a reasonable insurance that the page will “work” today, but it does not guarantee that it will work tomorrow.
In the past, many authors who relied on the quirks of Netscape 1.1 suddenly found their pages appeared totally blank in Netscape 2.0. Whilst Internet Explorer initially set out to be bug-compatible with Netscape, it too has moved towards standards compliance in later releases.
Validation is one of the simplest ways to check whether a page is built in accordance with Web standards, and provides one of the most reliable guarantee that future Web platforms will handle it as designed.
Validation eases maintenance
It is reasonable to consider that standards such as HTML and CSS are a form of “coding style” which is globally agreed upon. Creating Web pages or applications according to a widely accepted coding style makes them easier to maintain, even if the maintenance and evolution is performed by someone else.
Validation helps teach good practices
Many professionals have been authoring the Web with HTML and CSS for years and know these technologies by heart. Beginners and students, on the other hands, will find automated checking tools invaluable in spotting mistakes. Some teachers also stress that automated validation tests are a good introduction to broader, more complex quality concepts such as accessibility.
Validation is a sign of professionalism
As of today, there is little or no certification for Web professionals, and only few universities teach Web technologies, leaving most Web-smiths to learn by themselves, with varied success. Seasoned, able professionals will take pride in creating Web content using semantic and well-formed markup, separation of style and content, etc. Validation can then be used as a quick check to determine whether the code is the clean work of a seasoned HTML author, or quickly hacked-together tag soup.

Nokia Introduce Big, fast and affordable Lumia 625

Nokia has just announced the Lumia 625, a budget Windows Phone with the largest display.
Lumia 625 is a  4.7-inch WVGA (480 x 800) panel with 201 ppi, though, which makes it one of the least dense displays we’ve seen in recent memory — only Samsung’s Galaxy Mega 5.8 is worse. Lumia 625 also have “Super-Sensitive touch”.
Hardware Qualities :
It has 1.2GHz Snapdragon S4 processor, 512MB of RAM, 8GB internal storage, LTE connectivity, 5-megapixel main camera, VGA front-facing camera, Windows 8 with Amber Update.  LED flash is placed on the back.
The Real Camera is able to record HD Videos of 1080 resolution with a frame speed of 30fps. The Battery life will be improved, it got the huge battery of 2000mAh, can last 15.2 hrs on (3G).
Price will be higher than Lumia 520 and Lumia 620. The phone is launched in US at 289$ which is 17300 approximately in Indian Rupees. The device will available in different eye catchy colors like yellow, orange, green, and black also.



“With our largest smartphone screen to date, the Nokia Lumia 625 is a perfect example of how Nokia is delivering leading smartphone innovation and experiences at every price point,”                     Jo Harlow, executive vice president, Nokia Smart Devices.

CANVAS in HTML5 – Interactive Drawing Support

HTML5 has an Element named Canvas, it provides a Drawing Surface.  This element has two attributes to specify the Dimensions :
  •          Height
  •      Width

Syntex:
                        <canvas id=”myCanvas” width=”ABC” height=”XYZ”></canvas>

An Example is shown below:


<!DOCTYPE html>
<html>
   <body>
       <canvas id=”myCanvas” width=”300″ height=”200″ style=”border:1px solid  #000000″>
       Your browser does not support the HTML5 canvas element.
   </canvas>
   <script>
         var canvas=document.getElementById(“myCanvas”);
         var ctx=canvas.getContext(“2d”);
         ctx.fillStyle=”#FF00FF”;
         ctx.fillRect(0,0,250,100);
   </script>
</body>                                                    
</html>


Then Output Will be :
HTML5 also allows us to use CANVAS element with SVG to create 2D drawing. We can use CANVAS5 element with web-based Graphics Language(WebGL), which extends the capability of the JavaScript  Programming language and allows it to generate interactive 3D graphics in a web Browser. WebGL is managed by Consortium Khronos Group is based on OpenGL ED 2.0.

Web Forms in HTML 5

HTML 5 allows you to create forms using the FORM element. This FORM element can be take user inputs by using the input element. In HTML 4, you can create forms that take input data by using the type attribute of the INPUT element but in HTML 5 forms are Web forms are 2.0. In is nothing but only the extension of old form feature. It provides newly added values of type attribute and new attribute of the INPUT element.
Newly added attribute of the FORM element
HTML5 Introduces the following attributes for the form element:
1.      Autocomplete
2.      Novalidate
autocomplete : Specifies that a form’s text field can provide a list of options to automatically fill the field. This means when you start typing in an autocomplete field, the browser displays a list of options that can be filled in the field. You can select an option to automatically fill the content.
Syntax :
<form action=XYZ method=get autocomplete=on>
</form>
aovalidate :  Specifies that the form will not be validated when submitted. The following code snippet shows the use of the novalidate attributes.
<form action=ABC novalidate=novalidate>
</form>
** ABC and XYZ are the form’s address may be like myform.asp or demo_form.asp .
  

Link Relations in HTML 5

A link relation is relation between two files. HTML5 allows you to link your HTML file with another file. It provides two types of link relation,

  • Links with external resources
  • Links with different HTML documents. 

Links with External resources and are created by using the LINK element in HEAD element, while the links with different HTML documents, also known as hyperlinks, are created by using the ‘A’ element. The link relation are implemented by using the rel attribute with the LINK element. HTML5 document introduces some new values for this attribute such as
rel-help and rel-licence, which link your HTML Document with a help document and a document having copyright information, respectively.

New Interactive Attributes in HTML5

HTML5 also have some new attributes for making interactive design. These attributes enables us to edit the content of a web page. In this you can specify a keyboard shortcut for an element, a context menu or a particular style to represent the data of an element using new attributes:

  • accesskey : Represents a keyboard shortcut to access an element.
  • contenteditable : Specifies whether or not user allowed to edit the content.
  • contextmenu: Represent the context menu for an element.
  • data-yourvalue: Represents user defined attributes that must start with the data text.
  • draggable: Specifies whether or not a user is able to drag an element
  • dropzone : specifies the drop target for a dragged element.
  • hidden : Hide a non-relevant element.
  • spellcheck : specifies the Crammer and Spelling checking feature is enable or not.