Drupal ,PHP, MySql,Javascript , Jquery ,HTML,CSS,Android, iPhone

Showing posts with label About. Show all posts

27 Dec 2013

Html Chapter -3

Lists: We can represent information in list format. There are three type of lists.

(1) Ordered list (2) Unordered List (3) Definition list

(1) Ordered list: In this list items are represented in a particular order like (a,b,c… or i, ii, iii, ….). To create a ordered list we use <ol></ol> tag and list items are represented by <li> </li> tag.

Attributes of <ol> tag:
(1.1) type:- This attribute specifies pattern for ordering list items and values for this attribute are : a, A, 1, i, I
(1.2) start:- With this attribute we can specify starting point for ordering.

Example1:
<html><body>

<h1> Here is the ordered list.</h1>

</ol>

</body></html>
Example2:
<ol type="1" start="10">

</ol>

Attributes of <li> tag:
(1.1) value: This attribute specify new pattern value for this list item. Further list items are ordered according to this value.
(1.2 type: This attribute is used to change the ordering type for current list item. Other list items will not be affected.
Example:
<ol type="1">

<li> list Item1 </li>

<li> list Item2 </li>

<li type="a"> list Item3 </li>

<li> list Item4 </li>

<li> list Item5 </li>

<li value="21"> list Item6 </li>

<li> list Item7 </li>

<li> list Item8 </li>

</ol>

(2) Unordered Lists:- In this list information is specified in bulleted format. To create an unordered list we use <ul> </ul> tag and list items are represented by <li> </li> tag.

Attributes of <ul> </ul> tag:
(2.1) type: This attribute specifies bulleting style. Type values for this attribute are circle, disc, square.
Example:
<html> <body>

<h1> Here is the un-ordered list.</h1>

</ul> </body> </html>

(3) Definition Lists: These list is used to provide description about something. To create an definition list we use <dl> </dl> tag. Definition title is specified by <dt> </dt> tag and description about the title is specified by <dd> </dd> tag.
Example:
<html> <body> <h1> Here is the Definition list.</h1>

<dl>

<dd>

Html stands for Hyper Text Markup Language <br />

It is very useful in web dovelopment.

</dd>

</dl>

</body> </html>

Horizontal Rule <hr />: Using <hr /> tag we can specify a horizontal rule.

Ex- <html> <body> <hr /> </body> </html>
Attributes:
(a) width:- This attribute specify width of the line. Its default value is 100%.

Example:
<body>

</body>
(b) align:- This attribute specifies alignment of the line. Values for this attribute are center, left, right.
Example:
<body>

</body>
(c) size:- With this attribute we can specify size (thickness) of line.
Example:
<body>

</body>
(d) color :- with this property we can specify color of the line.
Example:
<body>

</body>

Previous Chapter Next Chapter

Html Chapter - 2

<br /> tag (Break Row):-
<body> Hey !,
                  What’s
                  going
                  on
                  here?     </body>
The browser doesn’t recognize formatting, unless we tell it. Otherwise it displays the characters in a steady stream. If we want to start a new line we have to use a line break.
<body> Hey!, <br /> What’s <br /> going <br /> on here? </body>

<br /> basically tells the web browser to start a new line.

Preformatted text: Browser doesn’t understand formatting, but if we want to display text as we type it we use <pre> </pre> tag.
Example:

<html>

<body>

<pre>

121

12321

1234321

</pre>

</body>

</html>

Headings :- HTML provides us six level of headings. We use heading tags (<h1> to <h6>) to make a heading.
EX:-
<h1> This is a heading </h1>

<h2> This is another heading </h2>

<h3> This is one more heading </h3>

Attributes:
(a) align:- This attribute is used to set alignment of a heading.
<h1 align=”center” > Center Aligned </h1>
Possible values for align attribute are center, left, right.

Paragraphs:- Paragraph is a block of text. We can create paragraph with <p></p> tag.
<body> <p> This is a paragraph </p> </body>

attributes:-
(a). align:- This attribute is used to set alignment of our web page.
<p align=”right”> ……………………</p>
Possible values for align attribute are center, justify, left, right.

Center Tag:- We can center aligned our text with <center> </center> tag.
<center> This is centered </center>

Inserting spaces and symbols:- Browser don’t recognize more than one space. To insert more than one space we have to insert   (non breaking space) into html code in place of spaces. Similarly to insert other symbols we use other codes.
symbols and their codes-:

Code	Description
	Non-breaking space
<	Less than symbol (<)
>	Greater than symbol (>)
&	Ampersand (&)
"	Quotation mark ( “ )
¢	Cent sign ( ₵ )
£	Pound sign ( £ )
¤	General currency sign ( ¤ )
¥	Yen sign ( ¥ )
©	Copy right sign ( © )
®	Registered sign ( ® )
°	Degree sign ( ° )
±	Plus minus sign (±)
¶	Paragraph sing (¶)
µ	Micro sign (µ)
¼	One-quarter ( ¼ )
½	One-half (½ )
¾	Three-quarters(¾)

Style Attribute: Most of html tags support style attribute. Style attribute specifies formatting style for that tag. We can change background-color, background-image, border, color, font etc. of a tag with style attribute.
Example:
(1). <html><body style="background-color:yellow ; color:red">

This is my custom page.

</body></html>

(2). <body style="font:'Times New Roman' ; font-size:250px">

This is my custom page. </body>

(3). <h2 style="background-color:yellow ; border:dashed ; font-size:2cm"> My Heading </h2>

(4). <p style="background-image:url(images/flower.jpg)">

This is a paragraph <br />

It has a background <br />

Isn't is interesting.

</p>

Properties of style attribute:

Property name	Description
background-color	To change background color of the tag. Ex- background-color:red
background-image	To change background image of the tag. Ex- background-image : url(path)
border	To change/set the border. Possible values- dashed, dotted, double, inset, outset, ridge, solid etc. Ex- border : dashed.
border-color	To change the color of border.
color	To set the color of text.
font	To set the font of text.
font-size	To change the font size. We use px(pixel), cm, in(inch) with numeric values as suffix to set the size. Ex- font-size:1in Font-size:100px
background-repeat	It is used to set that background should be repeat or not. Possible values are no-repeat, repeat, repeat-x, repeat-y

============================**************================================

Hyperlinking:- We can link one html page to another through anchor (<a> </a> ) tag.
ex: <a href=”path\a.html”> go to a.html </a>
<a href=”http://www.yahoo.com”> yahoo </a>
Attributes:
(1) href:- this attribute specifies page-url (hyper-reference) to be linked.
(2) name:- This attribute specifies name of anchor. It is useful to self referring pages.
Ex: - <html><body>

</body></html>

Images :- We can add images in a web page with <img /> tag.
Ex - <img src=”images\flower.jpg” height=”200” width=”200” />

Attributes:-
(a) src :- This attribute specifies path of the image file to be displayed.
(b) height:- Specify height of the image.
(c) width :- specify width of the image.
(d) alt :- Specifies a text, which will be displayed when user point the image with mouse as a tool tip and if image cannot be displayed this text will displayed in place of image.

(e) border: specifies border width of the image.
EX: <img src="images/flower.jpg" height="300" width="300" border="2" alt="flower" />
(f)dynsrc :- Specify the path of video file that will run when the page is displayed.
EX: <img dynsrc="images/bailey.mpg" height="300" width="300" border="2" alt="movie" />
(g) usemap:- this attribute is used to specify map for image.
<img src=”path” width=”100” height=”100” usemap=”#mapname” />

Image Maps: Image map is an active region on an image that is linked to other files or locations. <map> </map> and <area /> tags are used to create image maps.

<map></map> tag:- <map> </map> tag is used to specify hyperlink regions for an image. With this tag we can link an image to different locations.
Attributes:
name: This attribute specifies name for the map.

<area /> tag: <area /> tag is used to specify linked areas on an image.
Attributes of <area /> tag:
(a) shape:- This attribute specifies shape of linked region. Possible values for this attribute is rect, circle, poly.
(b) cords:- This attribute specifies coordinates for linked region.

Shape	Cords
rect	x1,y1,x2,y2 { (x1,y1) upper left corner, (x2,y2) lower right corner}
circle	x,y, radius
poly	x1,y1,x2,y2,x3,y3,x4,y4,………

(d) href:- Hyper-reference to the linked file.
(e)alt:- Specifies a text, which will be displayed when user point the linked region with mouse as a tool tip.
Example:
<html><body>

</map>

</body></html>

Previous Chapter

Next Chapter

22 Jun 2013

About Jquery

jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.

jQuery Core

What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript

jQuery Core

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jquery.com

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
jqueryui.com

jQuery Mobile

A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

jquerymobile.com

QUnit
QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!
qunitjs.com

Sizzle
A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.
sizzlejs.com

About jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
There's a lot of work that goes into making jQuery UI the most successful UI library for the Web. Between API design, visual design, implementation, ticket triage, bug fixing, developer relations, infrastructure, and everything else, most of the work is done by volunteers. We'd like to recognize the most prominent contributors below, for a full list of all contributors, see the authors list.

Pages

27 Dec 2013

Html Chapter -3

Html Chapter - 2

Html Chapter - 2

22 Jun 2013

About Jquery

jQuery is a JavaScript Library.

jQuery greatly simplifies JavaScript programming.

jQuery is easy to learn.

jQuery Core

What is jQuery?

jQuery Core

jQuery UI

jQuery Mobile

QUnit

Sizzle

About jQuery UI