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

Showing posts with label learn html. Show all posts

27 Dec 2013

Html Chapter -7

Meta Tag: The <meta /> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Metadata is information about data.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The <meta> tag always goes inside the head element. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

<legend > My Heading</legend>

<h1> This is heading 1 </h1>

</fieldset>

We can apply style attribute to set width and height of border.
Ex:

<legend style="color:red"> Input From</legend>

<form>

Name: <input type="text" name="name" /> <br />

Password: <input type="password" name="pwd" /> <br />

</form>

</fieldset>

</body></html>

Previous Chapter

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 -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 html file 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

27 Dec 2013

Html Chapter -7

Html Chapter -5

Html Chapter -4

Html Chapter -1

Tag Attributes