HTML CSS & JQuerry Basics: 2015

JQuery

What is JQuerry ?

jQuery is A JavaScript library. jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is free, open-source software licensed under the MIT License.

jQuery was introduced in January 2006 by John Resig at BarCamp NYC.

jQuery also offers functionality that allows developers to build plug-ins, in addition to the JavaScript library. This allows for the development of abstractions for animation and low-level interaction, sophisticated effects and themeable, high-level widgets. The modular mechanism of the jQuery library facilitates the development of highly effective, potent Web applications and Web pages.

The jQuery library provides several user friendly strategies and functions for rich application development. Because the functions of jQuery are simple, it is very popular among developers. jQuery may be used in all Web based applications, in spite of the technology. It may be used with ASP, PHP, JSP, CGI, Servlets and most Web programming languages.

How to add JQuery ?

Adding Remotely

You can add JQuery remotely by using following syntax

Syntax:

</script>

Adding from your local folder

Download the above library from official website http://jquery.com. place your file in to your local folder and add using following Syntax

Syntax:

</script>

e.g.

</script>

Note: Js is the local folder where i have placed my JQuery file name jquery.min.js.

You need Document Ready ().

The first thing you need to be up and running with jQuery is what’s called the “document ready” handler.

Here is what it looks like:

$(document).ready(function() {

// all jQuery code goes here

});

$function(){

// all jQuery code goes here

}

Selecting Elements in jQuery

The jQuery library allows you to select elements in your XHTML by wrapping them in $("") (you could also use single

quotes), which is the jQuery wrapper. Here are some examples of “wrapped sets” in jQuery:

$("div"); // selects all HTML div elements

$("#myElement"); // selects one HTML element with ID "myElement"

$(".myClass"); // selects HTML elements with class "myClass"

$("p#myElement"); // selects HTML paragraph element with ID "myElement"

$("ul li a.navigation");

// selects anchors with class "navigation" that are nested in list items

jQuery supports the use of all CSS selectors, even those in CSS3. Here are some examples of alternate selectors:

$("p > a"); // selects anchors that are direct children of paragraphs

$("input[type=text]"); // selects inputs that have specified type

$("a:first"); // selects the first anchor on the page

$("p:odd"); // selects all odd numbered paragraphs

$("li:first-child"); // selects each list item that's the first child in its list

jQuery also allows the use of its own custom selectors. Here are some examples:

$(":animated"); // selects elements currently being animated

$(":button"); // selects any button elements (inputs or buttons)

$(":radio"); // selects radio buttons

$(":checkbox"); // selects checkboxes

$(":checked"); // selects checkboxes or radio buttons that are selected

$(":header"); // selects header elements (h1, h2, h3, etc.)

HTML5

What is HTML5 ?

HTML5 is a updated Version of HTML.

There are no more difference in between html and html5, In HTML5 we can find some new tag and some old tags are removed.

HTML5 syntax is compatible with both HTML4 and XHTML1

HTML5 doctype is much simpler:

New way:

<!doctype html>

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

or

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

Meta charset tag is much simpler:

New way:

<meta charset="UTF-8">

Old way:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

In HTML5 we preferred to use DIV instead of Tables, Because its easy to find and format each pixel of a page using DIV.

Main Structural Elements You'll Use Most Often in HTML5

1- <header> Enter your Header part here </header>

Note: represents a group of introductory or navigational aids. (Things you'd usually wrap in a H1, H2, Hx, etc)

E.g. :

<header>

<h1><a href="#">Enter your Title here</a></h1>

<h2>A tag line might go here</h2>

</header>

2- <nav> </nav>

NOTE : represents a section of the document intended for navigation. (Like a menu)

e.g. :

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</nav>

3. <article> </article>

Note: independent piece of content of a document, such as a blog entry or newspaper article. (Independent is the key word here. If the piece of content could make sense plucked out of this document and placed somewhere else, it's probably an article)

e.g.

<article>

<h3><a href="#">First Article Title</a></h3>

<img src="images/flower.jpg" alt="flower">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p>

</article>

4. <section> </section>

Note: represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure. (Just a logical grouping such as a content section)

e.g. :

<section>

<article>

<h3><a href="#">First Article Title</a></h3>

<img src="images/flower.jpg" alt="flower">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p>

</article>

<article>

<h3><a href="#">Second Article Title</a></h3>

<img src="images/tree.jpg" alt="tree">

<p>Praesent libero. Sed cursus ante dapibus diam.</p>

</article>

</section>

5. <aside> </aside>

Note: represents a piece of content that is only slightly related to the rest of the page. (Usually a sidebar, but could be another type of content that isn't directly related to the main content)

E.g. :

  <aside>

<h4>Connect With Us</h4>

<ul>

<li><a href="#">Twitter</a></li>

<li><a href="#">Facebook</a></li>

</ul>

</aside>

6. <footer> </footer>

Note:  represents a footer for a section and can contain information about the author, copyright information, et cetera. (You know, like... a footer).

E.g. ;

  <footer>

<p>All rights reserved.</p>

</footer>

CSS3

CSS

We use css to format our HTML page.

Cascading style sheet is full form of CSS.

we can insert css in 3 way to our HTML file

<style>

Add your css content here

</style>

HTML CSS & JQuerry Basics

About Me

Sunday, 11 January 2015

JQuery

How to add JQuery ?

Adding Remotely

HTML5

CSS3

VISIT FOR ASSISTANCE