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

Thursday, 26 December 2013

Html Chapter -4

Table:To represent data in tabular format we use <table> </table> tag. To make a table we basically use four tags.
(a)<table></table>:This tag is used to tell the browser “this is a table” along with some attributes like size, border, width and few other things.
(b)<tr></tr>: The table row ( <tr> </tr> ) tag define the row of a table.
(c)<th></th>:This tag specifies heading for the table.
(d)<td></td>:This tag specifies individual block or cell in a table.

Example:
<table>

</table>

Attributes of table tag:
(a) align: This attribute specifies alignment for the table. Values for this attribute center, right, left.
ex:          <table align=”right”> </table>

(b) background: This attribute specifies background image for the table.
ex:         <table background=”logo.gif”> </table>

(c) bgcolor: This attribute specifies background color for the table.
ex:         <table bgcolor=”pink”> </table>

(d) border: This attribute is used to change the color of the border.

(e) bordercolor: This attribute is used to change the color of the border.
ex:        <table border=”5” bordercolor=”pink”> </table>

(f) cellpadding: This attribute specifies distance between cell border and content (data) of the cell. Its default value is 0(zero).

(g) cellspacing: This attribute specifies distance between the cells. Its default value is 0.
ex:       <table cellpadding=”5” cellspacing=”5”>

(h) height/width:- These attributes specify height and width of table.
ex: <table height=”600” width=”600”> </table>

(i)rules:- This attribute specifies border patterns for the table.

Values	Effect
Cols
rows
none
all

Ex: <table border=”5” rule=”rows”>

Attributes of <tr> </tr> tag:
(a) align:- This attribute specifies alignment for the contents of row.(center, left, right)

(b) bgcolor:- this attribute specifies background color for table row.

(c) bordercolor: This attribute defines the color for the cell border for that row.

(d) height: This attribute specifies height for that row.
Example:
<table border="5" bordercolor="#CCFFCC" cellspacing="10" width="400">

</table>

Attributes of <th></th> and <td> </td>:
(a). align: This attribute specify alignment for cell data.

(b) background: This attribute specifies background image for that cell.

(c) bgcolor: This attribute specifies background color for that cell.

(d) bordercolor: This attribute specifies color of border for that cell.

(e) colspan: This attribute specifies number of columns current cell will occupy.

(f) rowspan: This attribute specifies number of rows current cell will occupy.

(g) width/height: These attributes specify height and width of cell.

(h) valign: This attribute specifies vertical alignment for cell data. Possible values for this attribute are bottom, middle, top.
Example:
<table border="1" width="600" rules="cols">

<th>First Name</th>

<th>Father Name</th>

<tr>

</tr>

<td>Lance</td>

<td>Anderson</td>

<td>James Anderson</td>

</tr>

</table>

Example:

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Nested Tables:Table within a table is called nested table. Nested tables can be created by nesting of <table></table> tags.

<tr>

</table>

</td>

</tr>

</table>

Previous Chapter Next Chapter

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

Html Chapter -1

HTML stands for Hyper Text Markup Language. HTML file is a text file containing small markup tags(<>).The markup tags tell the Web browser how to display the page. An HTML file must have an htm or htmlfile extension .An HTML file can be created using a simple text editor.

HTML Tags:- HTML tags are used to mark-up HTML elements .HTML tags are surrounded by angular brackets.

There are two types of html tags:

1. Container Tags:- These tags come in pairs like <html> and </html>. The first tag in a pair is the start tag,the second tag is the end tag. The text between the start and end tags is the element content.

2. Empty Tags:- These tags come alone like <br />.These tags do not have end tag. We must add ending character (/) at the end of empty tags(not compulsory).

Html Tags are case insensitive, <HTML> means same as <html>.

Note:-By convention we use tags in lowercase.

Tag Attributes

Tags can have attributes. Attributes can provide additional information about the HTML elements on your page.

Attributes always come in name-value pairs like : name="value".

Attributes are always added to the start tag of an HTML element.

Ex: <tag attribute_name=”value”> element content </tag>

Basic HTML Tags:-

(1). <html></html>:- This tag specifies start (<html>) and end (</html>) of our html document. All tags or element contents come between these tags.

(2). <head></head>:- This tag specifies the head of our html page. Head tag is loaded before the page is displayed. JavaScript functions and Style Sheets comes under this tag.

(3). <body></body>:- This tag specifies body of a html page. All stuff of a web page comes under this tag.

(4). <title></title>:- This tag specifies title of a web page. Title displays on the title bar of our web page. This tag normally comes under head tag.

First Html Document:

<html>

<head>

</head>

<body>

Hello World! This is my first HTML Page.

</body>

</html>

Attributes of Body Tag:-

bgcolor :- This attribute is used to change background color of a web page.
                  Ex - <body bgcolor=”red”> </body>            or             <body bgcolor=”#ff0000”> </body>

background :- This attribute is used to set background image for an web page.
                  Ex - <body background=”c:\sea.jpg”> </body>

bgproperties :- This attribute is used to specify the properties of background image such as scroll(default) and fixed.
                  Ex - <body background=”c:\sea.jpg” bgproperties=”fixed”> </body>

text : This attribute is used to specify the color of the text for our web page.

link, alink, vlink :- These attributes are used to specify colors for links (link) , active links (alink), visited links (vlink).
                  ex - <body text=”blue” alink=”red” vlink=”yellow” link=”pink” >   </body>

Bold Text:-<b> </b> and <strong></strong> tags are used to make the text bold.
                  ex-           <body> we can make things <b> bold </b>   </body>
                  or             <body> we can make things <strong> bold </strong>   </body>

Italic Text:- <em></em> and <i> </i> tags are used to make the text in italic format.
                  ex -          something really <i> cool </i>.
                  or             something really <em> cool </em>.

Underline Text:- <u> </u> tag is used to underline any text.
ex- <u> This is important </u>.

Subscript, Superscript and StrikeThrough:- <sub> </sub>, <sup> </sup> and <strike> </strike>tags are used to make text as subscript, superscript and strikethrough respectively.

Example: H<sub>2</sub>O                       H₂O
                     X<sup>2</sup>                           X²
                     <strike> Hello </strike>                ~~Hello~~

Nesting of html tags: We should nest html tags in last in first out (LIFO) format.
ex – This is <b> <i> Bold and Italic </b> </i>.

<this> <that> </this> </that> (bad)
<this><that> </that> </this> (good).

Font : We can change the font using <font></font> tag.
attributes:
(a). size :- This attribute specifies size of our font. In HTML 7 font sizes are available (1-7). Default font size is 3.
(b). face :- This attribute specifies name of the font. Some common fonts are Arial, Arial Black, Courier new, Times New Roman, Verdana.
Ex: <font face=”Arial” size=”5”> My Font </font>
(c). color :- This attribute is used to specify the color of font.
Ex: <font color=”blue” size=”5”> My Font </font>

Next Chapter

Pages

Thursday, 26 December 2013

Html Chapter -4

Html Chapter -3

Html Chapter - 2

Html Chapter - 2

Html Chapter -1

Tag Attributes