HTML5 address tag

This is one of the new HTML5 elements that are actually almost as straight forward as it seems. The two most important things to have in mind are that the address element relates to the element in which it is nested and that it has to be directly related to this section. Oh and you cannot take the word address literally – it should be considered as the intellectual origin of the document. And what is the ‘intellectual origin of the document’? That is the author or the organization publishing the document.

Here is clear example of how the <address> element could be used:

Try this example

<article>

<header>

        <hgroup>

        <h1>All About Flour<h1>

        <h2>Wheat flour is the backbone of the baked goods we love.</h2>

        </hgroup>

        <address>by Jane Doe</address> 

</header>

The <address> element can also be used to indicate authors of sections of your document – here is a great example where the <address> element is used to mark up the author of a blockquote:

Try this example

<article>

<header>

        <h1>All About Flour<h1>

        <p class=”byline”>by Jane Doe</p> 

</header>

<section>

        <h2>The Two Types of Wheat</h2>

        <p>There … to rise.</p>

        <p>Where … with less protein.</p>

</section>

<blockquote>

        Wholemeal flour, the whole grain milled as finely as possible with all of the outer bran and inner germ intact, is one of the best white flour improvers I know of. <br />

        <address>Dan Lepard, www.danlepard.com</address>

</blockquote>

</article>

And just to make sure – below is an example of how it should not be used - to mark up postal addresses (and here is an exception - unless of cause the postal address is in fact the relevant contact information of the specific document or part of the document)

Try this example

<address>

James Hansson <br />

27 Bricklane <br />

Georgetown <br />

</address> 

Read More

HTML5 aside tag

The aside element is new to HTML5 and it can be used in two different contexts. Basically, the context of the <aside> element is based on whether or not it inside or outside the article element.

In magazines you often see info-boxes pulled away from the actual content of the article, highlighting something with relevance to the article such as pull-quotes and when this is the scope of your aside element then it has to be placed inside the article element, because it has a relationship to the content of the article.

CONTENT RELATED TO THE CURRENT ARTICLE, BLOGPOST, ETC.

Here is an example of the <aside> element being used inside the <article> element.

Try this example

<article>

        <header>

                <h1>All About Flour<h1>

                <p class="byline">by Jane Doe</p> 

        </header>

        <section>

                <h2>The Two Types of Wheat</h2>

                <p>There … to rise.</p>

                <p>Where … with less protein.</p>

        </section>

        <aside>

                If you use organic flour you very often get better bread

        </aside>

</article>

CONTENT RELATED TO YOUR PAGE AS A WHOLE

The aside element can also be used to mark up content which is relevant to your page as a whole – containing blogrolls, additional navigation, even adds – and when this is the scope of your <aside> element it has to be placed outside of the article section. Here is an example:

Try this example

<aside>

        <h3>Foodblogs I like</h3>

        <a href="http://www.bakerella.com">Bakerella</a>

        <a href="http://sourdough.com/"> Sourdough.com</a>

        <a href="http://www.bakingobsession.com">BakingObsession</a>

</aside>

<article>

        <header>

                <h1>All About Flour<h1>

                <p class="byline">by Jane Doe</p> 

        </header>

        <section>

                <h2>The Two Types of Wheat</h2>

                <p>There … to rise.</p>

                <p>Where … with less protein.</p>

        </section>

</article>

Whether you use the aside element for the former or the latter use, you need to remember that the aside element is for secondary content regardless of the visual design of this content. This also implies that the aside element should be used for e.g. pullquotes as they are a part of your content - you should not use the blockquote element.

Read More

HTML section tag

The section element is one of the new elements that it is the hardest to learn to use correctly. It is more general than the <article> element, but you still have to have an actual section in your document when you use the <section> element.

This means, that you should always consider whether or not it might be more appropriate to use the <nav>, the <aside>, the <header>, the <footer>, or the <article> element before actually using the <section> element. (Some of these elements might be new to you, there is chapters discussing all of them).

Let’s take a look at how you could use the <section> element, to divide the different parts of the flour article into sections:

Try this example

</header>

<section>

        <h2>The Two Types of Wheat</h2>

        <p>There are two …</p>

</section>

<section>

        <h2>All-Purpose Flour</h2>

        <p>All-purpose … </p>

</section>

...

<footer>...</footer>

</article>

As you can see, this adds several lines of markup to your document and some prefer as little markup as possible. Luckily for them, you do not need to use the section element inside the article, but it often creates a more correct document outline. 

As the section element divides your content into sections, it is important to remember that all section elements must be followed by a heading tag - if this doesn't make sense semantically, then you should not be using the section element (consider using the one of the other new semantic HTML5 elements or perhaps no element at all?).

Some might give in to the temptation of using the section tag as a styling hook for e.g. pullquotes, but resist it. There are more appropriate elements to use for this purpose instead of the section element, e.g. the aside element.

Read More

HTML navigation tag

Another one of the new semantic elements of HTML is the <nav> element. The <nav> element represents the navigation for a document. The navigation can be within the document or to other documents, but it is important to notice, that not all links in a document should be marked up with the <nav> element.

The <nav> element should only be used for the primary navigation structure.

So how do I use the <nav> tag? In "the old days" you would probably have used a div to do your mark up:

<div id="menu">

        <ul>

                <li><a href="home.html">Home</a></li>

                ...

        </ul>

</div>

Or maybe something like this:

<div id="navigation">

        <ul>

                <li><a href="home.html">Home</a></li>

                ...

        </ul>

</div>

And markup wise, the difference is quite small – you just have to replace the old <div> with the new more semantically correct <nav> element, like this:

Try this example

<nav>

        <ul>

                <li><a href="home.html">Home</a></li>

                ...

        </ul>

</nav>

So, this means that it is easy to use the new <nav> element, right? Unfortunately: no. There is little consensus of when to use the <nav> element. Can it be used on breadcrumbs? Related posts? Pagination? Some people would say "Definately" while others would say "No way!"

Should this stop you from using the <nav> element? No. You could use the <nav> element for all of the above mentioned examples and it is up to you to decide if and where you want to use it. A rule of thumb might be to use it whenever you would have used the <div id="menu"> or <div id="navigation">, and this entails that both of the before mentioned examples can be marked up with the <nav> element.

Read More

HTML5 footer tag

You are probably used to seeing footers on websites all the time – they usually contain copyright-stuff, a few selected navigational links, and maybe contact information. Just like the <header> element, the <footer> element does not introduce a new section in your document, but is the last part of that specific section – whether it be an <article>, <section> or some other section.

This means, that you can have multiple footers on the same page – if you have several blog entries in one page, every blog entry can have its own footer and the page itself can have its own footer too.

Using the flour-article as an example, you could use the <footer> element like this:

Try this example

</header>

<div id="content">

        <h2>The Two Types of Wheat</h2>

        …

</div>

<footer>

        <p class="disclaimer">This article is copyright of AllRecipes.com</p>

        <p><a href="http://allrecipes.com/howto/all-about-flour/">See the original article here</a></p>

        <p>Part of <a href="http://www.html5-tutorials.org">HTML5-tutorials.org</a></p>

</footer>

</article>

If you footer contains nothing but links, the <footer> tag should be used this way:

<footer>

        <ul>

                <li>About us</li>

                <li>Contact</li>

                …

        </ul>

</footer>

And what should the footer contain? Content that is related to the section’s content but not part of the actual content.

Regarding blog entries, the <footer> might be where you have your related entries, comments, facebook like-buttons and publication date (if you do not have this in the <header> section).

Read More

HTML5 hgroup tag

The <hgroup> is a second-level element, used to wrap one or more heading elements (<h1> to <h6> ), such as the title and sub-heading. As the <hgroup> is only allowed to contain heading elements, some examples might be the easiest way to show when and where the <hgroup> should be used.

An article with title
When there is just one title, there is no need for the <hgroup> element:

Try this example
<article>
        <header>
                <h1>All about flour</h1>
        </header>
</article>
An article with title and metadata
Still, there is just one title, so even though there is some metadata about the article, the <hgroup> element is not relevant:

Try this example
<article>
        <header>
                <h1>All about flour</h1>
                <p>Published on January 12th</p>
        </header>
</article>
An article with title and subtitle
Now we have to titles, so we can use the <hgroup> element:

Try this example
<article>
        <header>
                <hgroup>
                        <h1>All about flour</h1>
                        <h2> Wheat flour is the backbone of the baked goods we love</h2>
                </hgroup>
        </header>
</article>
An article with title, subtitle and metadata
When we have several title and metadata, the <hgroup> element only contains the actual titles (which should be marked up with the <h1> trough <h6> elements):

Try this example
<article>
        <header>
                <hgroup>
                        <h1>All about flour</h1>
                        <h2> Wheat flour is the backbone of the baked goods we love</h2>
                </hgroup>
                <p>Published on January 12th</p>
        </header>
</article>

Read More

HTML5 header tag

The <header> element is a bit cryptic as it can be acclimated in altered kinds of ways. Firstly you charge to apperceive 

that the <header> element do not acquaint a new area – it is the arch of an absolute section. Secondly you have to not abash it with the aspect – it is two altered elements!

Here is what it looks like:

<header>...</header>

So can you have two <header> elements on the same page? Sure you can! Imagine you have three blog entries on a single page; well they can all have a <header> section. Multiple articles on one page? They all have their own <header> element.

Using the flour-article, this means that the <div> element we previously used to divide the headline and author from the rest of the content can now be replaced by the <header> element.

Try this example

<article>

        <header>

                <h1>All About Flour</h1>

                <p class="teaser">Wheat flour is the backbone of the baked goods we love.</p>

                <p class="byline">by Jane Doe</p> 

        </header>

        <div id="content">

                <h2>The Two Types of Wheat</h2>

…

When using the <header> element you should always have one heading tag (<h1> - <h6>), but you can have multiple. You can also use the <hgroup> element, which I will explain later on. Lastly, you can also have other "header" relevant content such as the byline, publication date, table of contents etc.

Read More

How to Enable/Disable the password using JavaScript and CSS?

As we apperceive that for the aegis purpose, we accept apparent password consistently password approach agency in ammo form, but abounding times we wish to appearance password on bang on a control. So this cipher will be allowance you and its attending as well good.

Source Code:-

<%@ Page Language="C#" AutoEventWireup="true"CodeFile="hideandshowpassword.aspx.cs"

    Inherits="hideandshowpassword" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>Show Hide Password</title>

    <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript">

        function ShowHidePassword(ID) {

            if (document.getElementById($("#" + ID).prev().attr('id')).type == "password") {

                $("#" + ID).attr("data-hint", "Hide");

                $("#" + ID).find("i").removeClass("icon-eye").addClass("icon-eye-slash");

                document.getElementById($("#" + ID).prev().attr('id')).type = "text";

            }

            else {

                $("#" + ID).attr("data-hint", "Show");

                $("#" + ID).find("i").removeClass("icon-eye-slash").addClass("icon-eye");

                document.getElementById($("#" + ID).prev().attr('id')).type = "password";

            }

        }

    </script>

    <style type="text/css">

        body {

            width: 500px;

            margin: 20px;

            font-family: "Titillium", Arial, sans-serif;

        }

        .textAreaBoxInputs {

            min-width: 260px;

            width: auto;

            height: 30px;

            font-size: 15px;

            padding: 7px 10px;

            border: 1px solid #00ff21;

            outline: medium none;

            border-radius: 2px;

            line-height: 30px;

            float: left;

        }

        .dvShowHidePassword {

            font-size: 15px;

            font-weight: bold;

            margin-left: -38px;

            border-left: 1px solid #00ff21;

            padding: 7px 10px;

            cursor: pointer;

            line-height: 50px;

            ser-select: none;

            -webkit-user-select: none; /* webkit (safari, chrome) */

            -moz-user-select: none; /* mozilla */

            -khtml-user-select: none; /* webkit (konqueror) */

            -ms-user-select: none; /* IE10+ */

        }

                @font-face {

            font-family: 'FontAwesome';

            src: url('fonts/fontawesome-webfont.eot?v=4.1.0');

            src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.1.0')format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');

            font-weight: normal;

            font-style: normal;

        }

        .icon {

            display: inline-block;

            font-family: FontAwesome;

            font-style: normal;

            font-weight: normal;

            line-height: 1;

            -webkit-font-smoothing: antialiased;

            -moz-osx-font-smoothing: grayscale;

        }

        /* makes the font 33% larger relative to the icon container */

        .icon-lg {

            font-size: 1.33333333em;

            line-height: 0.75em;

            vertical-align: -15%;

        }

          .icon-eye:before {

            content: "\f06e";

        }

        .icon-eye-slash:before {

            content: "\f070";

        }

    </style>

</head>

<body>

    <h2>Welcome to Code Solutions</h2>

    <div style="margin-bottom: 10px;">

        Enter your password in below textbox

    </div>

    <input id="txt_Password" class="textAreaBoxInputs"type="password">

    <span id="ShowHidePassword" class="dvShowHidePassword hint--top hint--bounce hint--rounded"

        data-hint="Show" onclick="ShowHidePassword(this.id);"><iclass="icon icon-eye"></i>

    </span>

   

    <p>Please click to see the password</p>

</body>

</html>

Read More