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

Showing posts with label all html tags. Show all posts

27 Dec 2013

Html Chapter -5

Frames: We can divide a web page into frames and each frame can display other web pages.
There are only two main frame tags.
(1) <frameset></frameset> (2) <frame />

Example:
<html>

<head>

</frameset>

</head>

</html>

Example:
<html>

<head>

</frameset>

</head>

</html>

Example:
<html>

<head>

</frameset>

</head>

</html>

Note : We cannot add body on a framed page.

We can also define frames under a frame.
Example:
<html>

<head>

</frameset>

</head>

</html>

Example:
<html>

<head>

</frameset>

</head>

</html>

Other attributes of <frameset > </ frameset > tag:

Border: Specifies width of frame border.
bordercolor: specifies color for the border of frame.

Other attributes of <frame /> tag:

Scrolling: specifies scrollbars will be provided by browser or not. Possible values for this attribute are yes, no, auto.
noresize: This is a property and specifies that frame cannot be resized.
name: this attribute specifies name of the frame.
Example:
<html>

<head>

</frameset>

</head>

</html>

Linking between frames:- We can link pages between frames i.e. when we click on a hyperlink the linked page is opened in another frame.
We have to specify name property in the frame tag to do this and then specify this name in target attribute of hyperlink.
Example::
Left.html :-
<html>

</body>

</html>

Right.html :-
<html>

<h1> This is Right Page.</h1>

</body>

</html>

Link.html :-
<html>

</body>

</html>

Frame.html :
<html>

<head>

</frameset>

</head>

</html>

There are four target values in an <a> </a> tag:
_top: Opens a link in the full browser window.
_blank: Opens a link in a new browser window.
_self: Opens a link in same browser window or frame (same as doing nothing).
_parent: Opens a link in the immediate frameset parent.

Previous Chapter Next Chapter

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

Pages

27 Dec 2013

Html Chapter -5

Html Chapter -4

Html Chapter -3

Html Chapter - 2

Html Chapter - 2