HTML: Stands for Hyper text markup language
Markup: Means Set of Tags
Tag: The content which is placed b/w "<" & ">" is called Tag.
eg: <p>, <body>, <html>
Main Purpose of HTML: To design WebPages
HTML Features
1. HTML is Pre defined Language
Designed by W3C Foundation (world wide web consortium)
2. HTML is error free language
3. HTML tags are not case sensitive
4. Save: filename.html
5. HTML output is viwed in Browser
<p>-----------</p>
<b>---------</b>
HTML Tags are two types
1. Paired Tags/Container Tags: The tags which having opening as well as closing tags are called Paired Tags
eg: <p>______________</p>
<html>-----------------</html>
<body>-------------</body>
98% html tags are Paired Tags
2. NonPaired Tags/Empty Tags: The tags which having only opening tag, no closing tag is called NonPaired Tags
eg: <br>, <hr>, <img>
HTML file syntax
<html>
<head>
<title>_______________</title>
</head>
<body>
_________________
__________________
____________
</body>
</html>
Basic Tags in HTML
1. Paragraph: <p>----------------</p>
2. Bold: <b>-----------</b>
3. Italic: <i>----------</i>
4. Underline: <u>-----------</u>
5. Strike: <s>------------</s>
6. Superscript: <sup>----</sup>
eg: a<sup>2</sup>
7. Subscripts: <sub>------</sub>
eg: H<sub>2</sub>O
8. Break: <br>
9. Horizontal line: <hr>
10. Headerlines: <h1>-------------</h1>
<h2>------------</h2>
<h3>------------</h3>
<h4>------------</h4>
<h5>------------</h5>
<h6>------------</h6>
Tags follows LIFO rule (Last in First Out)
<p><i>Welcome to Hyderabad</p></i> [wrong]
<p><i>Welcome to Hyderabad</i></p> [correct]
Tables:Combination of rows and columns
Table Syntax:
<table>
<tr>
<td>-----------</td>
<td>--------</td>
_________
</tr>
<tr>
<td>----------</td>
-------------
</tr>
</table>
<tr>: Table Row
<td>: Table Data
<th> : table head
Attributes: are used to give extra strength to the HTML Tag. Attributes can assign in opening tag only.
syntax: <htmltag property="value">
eg: <table border="1">
Properties in table tag:
1. border: is used to give border to the table
eg: <table border="1">
2. rules="rows": is used to give only rows
eg: <table rules="rows">
3. rules="cols": is used to get columns only
eg: <table rules="cols">
4. rules="all" : is used to get both rows and cols
eg: <table rules="all">
5. cellspac10:32 AM 06/02/2017ing: is used to get space b/w cells
eg: <table cellspacing="5">
6. cellpadding: is used to get space b/w cell data to the inner edge of the cell
eg: <table cellpadding="5">
Supported Attributes in td tag:
1. align: is used to get horigontal alignment
eg: <td align="left">
<td align="center">
<td align="right">
2. Valign: is used to get vertical alignment
eg: <td valign="top">
<td valign="middle">
<td valign="bottom">
3. rowspan: is used to merge the neighbour rows and form as single cell
eg: <td rowspan="2">
4. colspan: is used to merge the neighbour columns and form as single cell
eg: <td colspan="2">
<col width>: This Property is used to customize (i.e., increase/decrease) the cell size. It can be use after <table> tag
eg:
<table>
<col width="50%">
<col width="50%">
<tr>
<td>-------</td>
<td>-------</td>
</tr>
_________
</table>
image:
<img src="imagepathimagename.extension" alt="image"/>
eg: <img src="flower.jp" alt="image"/>
Links:
1. Internal links: Called function, Calling function both present in same document
syntax:
Called function: <a id="idname"/>
eg: <a id="hyd"/>
Calling function: <a href="#idname">Text</a>
eg: <a href="#hyd">Hyderabad</a>
2. External links: Called function, calling function will present in different files
syntax:
Called function: <a id="idname"/>
eg: <a id="hyd"/>
Calling function: <a href="chaptername#idname">Text</a>
eg: <a href="1.html#hyd">Hyderabad</a>
Two-Way Links:
1. Internal links:
syntax: <a id="idname" href="#ridname">Text</a>
<a id="ridname" href="#idname">Text</a>
eg: <a id="hyd" href="#rhyd">Hyderabad</a>
<a id="rhyd" href="#hyd">Hyderabad</a>
2. External Links
syntax: <a id="idname" href="chaptername#ridname">Text</a>
<a id="ridname" href="chaptername2#idname">Text</a>
eg: <a id="hyd" href="1.html#rhyd">Hyderabad</a>
<a id="rhyd" href="2.html#hyd">Hyderabad</a>
Chapter calling:
syntax: <a href="chaptername">Chapter</a>
eg: <a href="chapter1.xhtml">Chapter1</a>
Mail link:
abc@gmail.com
eg: <a href="mailto:abc@gmail.com">abc@gmail.com</a>
Websites:
www.google.com
eg: <a href="http://www.google.com">www.google.com</a>
Lists:
1. Orderlist
2. Unorderlist
Orderlist:
1. CSE
2. ECE
3. EEE
4. IT
Syntax:
<ol>
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>IT</li>
</ol>
Supported attributes in ol:
eg: type="a", "A". "i", "I"
eg: <ol type="a">
Default list is number list
Unorderlist:
<ul>
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>IT</li>
</ul>
Supported attributes in ul
eg: type="bullet", "circle". "square"
eg: <ol type="circle">
Defalut list is bullet list
Entites: are used to display non-keyboard characters in a browser
1. Space:  
2. Copyright: ©
3. N-dash: –
4. M-Dash: —
5. Minus: −
6. Opening Single Quote: ‘
7. Closing Single Quote: ’
8. Opening double quotes: “
9. Closing double quotes: ”
10. &: &
Markup: Means Set of Tags
Tag: The content which is placed b/w "<" & ">" is called Tag.
eg: <p>, <body>, <html>
Main Purpose of HTML: To design WebPages
HTML Features
1. HTML is Pre defined Language
Designed by W3C Foundation (world wide web consortium)
2. HTML is error free language
3. HTML tags are not case sensitive
4. Save: filename.html
5. HTML output is viwed in Browser
<p>-----------</p>
<b>---------</b>
HTML Tags are two types
1. Paired Tags/Container Tags: The tags which having opening as well as closing tags are called Paired Tags
eg: <p>______________</p>
<html>-----------------</html>
<body>-------------</body>
98% html tags are Paired Tags
2. NonPaired Tags/Empty Tags: The tags which having only opening tag, no closing tag is called NonPaired Tags
eg: <br>, <hr>, <img>
HTML file syntax
<html>
<head>
<title>_______________</title>
</head>
<body>
_________________
__________________
____________
</body>
</html>
Basic Tags in HTML
1. Paragraph: <p>----------------</p>
2. Bold: <b>-----------</b>
3. Italic: <i>----------</i>
4. Underline: <u>-----------</u>
5. Strike: <s>------------</s>
6. Superscript: <sup>----</sup>
eg: a<sup>2</sup>
7. Subscripts: <sub>------</sub>
eg: H<sub>2</sub>O
8. Break: <br>
9. Horizontal line: <hr>
10. Headerlines: <h1>-------------</h1>
<h2>------------</h2>
<h3>------------</h3>
<h4>------------</h4>
<h5>------------</h5>
<h6>------------</h6>
Tags follows LIFO rule (Last in First Out)
<p><i>Welcome to Hyderabad</p></i> [wrong]
<p><i>Welcome to Hyderabad</i></p> [correct]
Tables:Combination of rows and columns
Table Syntax:
<table>
<tr>
<td>-----------</td>
<td>--------</td>
_________
</tr>
<tr>
<td>----------</td>
-------------
</tr>
</table>
<tr>: Table Row
<td>: Table Data
<th> : table head
Attributes: are used to give extra strength to the HTML Tag. Attributes can assign in opening tag only.
syntax: <htmltag property="value">
eg: <table border="1">
Properties in table tag:
1. border: is used to give border to the table
eg: <table border="1">
2. rules="rows": is used to give only rows
eg: <table rules="rows">
3. rules="cols": is used to get columns only
eg: <table rules="cols">
4. rules="all" : is used to get both rows and cols
eg: <table rules="all">
5. cellspac10:32 AM 06/02/2017ing: is used to get space b/w cells
eg: <table cellspacing="5">
6. cellpadding: is used to get space b/w cell data to the inner edge of the cell
eg: <table cellpadding="5">
Supported Attributes in td tag:
1. align: is used to get horigontal alignment
eg: <td align="left">
<td align="center">
<td align="right">
2. Valign: is used to get vertical alignment
eg: <td valign="top">
<td valign="middle">
<td valign="bottom">
3. rowspan: is used to merge the neighbour rows and form as single cell
eg: <td rowspan="2">
4. colspan: is used to merge the neighbour columns and form as single cell
eg: <td colspan="2">
<col width>: This Property is used to customize (i.e., increase/decrease) the cell size. It can be use after <table> tag
eg:
<table>
<col width="50%">
<col width="50%">
<tr>
<td>-------</td>
<td>-------</td>
</tr>
_________
</table>
image:
<img src="imagepathimagename.extension" alt="image"/>
eg: <img src="flower.jp" alt="image"/>
Links:
1. Internal links: Called function, Calling function both present in same document
syntax:
Called function: <a id="idname"/>
eg: <a id="hyd"/>
Calling function: <a href="#idname">Text</a>
eg: <a href="#hyd">Hyderabad</a>
2. External links: Called function, calling function will present in different files
syntax:
Called function: <a id="idname"/>
eg: <a id="hyd"/>
Calling function: <a href="chaptername#idname">Text</a>
eg: <a href="1.html#hyd">Hyderabad</a>
Two-Way Links:
1. Internal links:
syntax: <a id="idname" href="#ridname">Text</a>
<a id="ridname" href="#idname">Text</a>
eg: <a id="hyd" href="#rhyd">Hyderabad</a>
<a id="rhyd" href="#hyd">Hyderabad</a>
2. External Links
syntax: <a id="idname" href="chaptername#ridname">Text</a>
<a id="ridname" href="chaptername2#idname">Text</a>
eg: <a id="hyd" href="1.html#rhyd">Hyderabad</a>
<a id="rhyd" href="2.html#hyd">Hyderabad</a>
Chapter calling:
syntax: <a href="chaptername">Chapter</a>
eg: <a href="chapter1.xhtml">Chapter1</a>
Mail link:
abc@gmail.com
eg: <a href="mailto:abc@gmail.com">abc@gmail.com</a>
Websites:
www.google.com
eg: <a href="http://www.google.com">www.google.com</a>
Lists:
1. Orderlist
2. Unorderlist
Orderlist:
1. CSE
2. ECE
3. EEE
4. IT
Syntax:
<ol>
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>IT</li>
</ol>
Supported attributes in ol:
eg: type="a", "A". "i", "I"
eg: <ol type="a">
Default list is number list
Unorderlist:
<ul>
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>IT</li>
</ul>
Supported attributes in ul
eg: type="bullet", "circle". "square"
eg: <ol type="circle">
Defalut list is bullet list
Entites: are used to display non-keyboard characters in a browser
1. Space:  
2. Copyright: ©
3. N-dash: –
4. M-Dash: —
5. Minus: −
6. Opening Single Quote: ‘
7. Closing Single Quote: ’
8. Opening double quotes: “
9. Closing double quotes: ”
10. &: &
No comments:
Post a Comment