NETWORKING & WEB DESIGNING (DAY-05)
HTML FULL NOTES
HTML was written by Tim Berners-Lee.
HTML(Hyper Text Markup Language) is a markup language.
HTML is not a case sensitive. (Eg:-<p> and <P> is same.)
For HTML- Sublime Text & VS Code(Live Server & Beautify CSS).
Versions of HTML:-
1. 1991-HTML-1
2. 1993-HTML-2
3. 1995-HTML-3
4. 1997-HTML-4
5. End of 1997-HTML-5 we use <!DOCTYPE>
6. HTML-5.2(Latest Version).
Things need to learn HTML:-
Text Editor(Note pad), (Sublime Text).
Compiler(VS Code).
For Run code(Chrome, Firefox, Edge, Opera).
Basic Code:-
<tag>-Open Tag
</tag>-Close Tag
<!DOCTYPE html>
<html>-Basic tag
<head>-Basic tag
<title>title of webpage</title>
</head>
<body>
Everything written within the body tag
</body>
</html>
Lang Attribute:-
The language which we have going to use our HTML page.
<html lang=”en-US”>
en-English(Language)
US-United States(Country).
Title Tag:-
<title>Page Title</title>
Title denotes web page name.
Heading Tag:-
<h1> to <h6>
Heading tag is heading of the web page.
We have 6 heading tags they are : h1,h2,h3,h4,h5,h6.
<h1>- Heading
<h2>-Heading
<h3>-Heading
<h4>-Heading
<h5>-Heading
<h6>-Heading
Comment Tag:-
HTML comments are not displayed in the browser, they are just for user references.
<!--This is my comment line-- >
Paragraph Tag:-
<p> --- </p>
Paragraph Tag is used to print some paragraph in the web page.
Formatting Elements:-
<b> - Bold text - This text is bold.
<strong> - Important text - This text is important!
<i> - Italic text - This text is italic.
<em> - Emphasized text - This text is emphasized.
<mark> - Marked text - milk
<small> - Smaller text - This is some smaller text.
<del> - Deleted text - My favorite color is blue red.
<ins> - Inserted text - My favorite color is red.
<sub> - Subscript text - This is subscripted text.
<sup> - Superscript text - This is superscripted text.
<u>- Underline text - league in 2007.
<cite> - Italic text – Geethanjali Institute of Science & Technology.
Break Tag:-
The <br> tag inserts a single line break & has no ending tag.
The <br> tag is useful for writing addresses or poems.
Horizontal Tag:-
<hr> is used to draw a horizontal line.
Preformatted Tag:-
<pre></pre>
It prints the statement as it is given inside the pre tag.
Anchor Tag:-
<a href=”www.google.com”>
<a> - tag defines a hyperlink, which is used to link from one page to another.
Image Tag:-
The HTML <img> tag is used to embed an image in a web page.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
Attributes of <img> tag :
src - Specifies the path to the image
alt - Specifies an alternate text for the image.
Width – Specifies width of the image
Height – Specifies height of the image.
Syntax:-
Image & Alt Tag
<img src="url" alt="alternatetext">
Image, Alt Tag & Style
<img src="url" alt="some text" style="width:500px;height:600px;">
Image tag as Link:-
<a href=”img.jpg” target=”_blank”>
<img src=”img.jpg” alt=”This is my pic” width=”104” height”104”></a>
Style Attribute:-
Color
Background-color
Font-size
Text-align
Font-family
HTML Quotation Element:-
Short Quotation:-
<p>My name is: <q>Maheshvaran</q></p>
O/P :- My name is: “Maheshvaran”
AbbrivationTag:-
<p>The <abbr title=”Campus Recruitment Training”>CRT</abbr>is going</p>
O/P:- The CRT(Campus Recruitment Training) is going.
Bi-Directional Override Tag:-
We having 2 types of Bi-Directional they are:
rtl – Right to left tag & ltr – Left to right.
<bdodir=”rtl”>Geethanjali Institute of Science & Technology</bdo>
O/P :- ygolonhceT & ecneicS fo etutitsnI ilajnahteeG
<bdodir=”ltr”>Geethanjali Institute of Science & Technology</bdo>
O/P :- Geethanjali Institute of Science & Technology
Link as Email & Ph.no :-
<p><a href=”mailto:kesavamoorthi.consensus@gmail.com”>Send mail</a></p>
<p><a href=”tel : 9361470996”>Contact me</a></p>
HTML Bookmark(#):-
If we give # with anchor tag, we can call it on that page itself by using id.
<!DOCTYPE html>
<html>
<body>
<p><a href="#Home">Home</a></p>
<p><a href="#Bio">Bio</a></p>
<h2 id=”Home”>Home</h2>
<p>This is my home page</p>
<h2 id="Bio">BIO</h2>
<p>This is my bio</p>
</body>
</html>
Types of List:-
Two types of List :
Ordered List
Unordered List
Description List.
Unordered List:-
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Syntax:-
<ul> <li>Coffee</li>
<li>Tea</li>
<li>Milk</li> </ul>
O/P:-
Coffee
Tea
Milk
Ordered List:-
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Syntax:-
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
O/P:-
1. Coffee
2. Tea
3. Milk
Syntax:-
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
O/P:-
i. Coffee
ii. Tea
iii. Milk
Description List:-
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
Example:-
<html>
<head>
<title>D List </title>
<body>
<dl>
<dt>CSE</dt>
<dd>- We Like Computers</dd>
<dt>ECE</dt>
<dd>- We Like Arduino</dd>
</dl>
</body>
</head>
</html>
O/P:-
CSE
- We Like Computers
ECE
- We Like Arduino
Table:-
HTML tables allow web developers to arrange data into rows and columns.
Table Header:-
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the
<td> tag:
th stands for table header.
By default, the text in <th> elements are bold and centered, but you can change that with CSS.
Table Row:-
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Table Cells:-
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Syntax:-
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Dept</th>
</tr>
<tr>
<td>1</td>
<td>Mahesh</td>
<td>BME</td>
</tr>
<tr>
<td>2</td>
<td>Kesav</td>
<td>ECE</td>
</tr>
</table>
</body>
</html>
O/P:-
S.No Name Dept
1 Mahesh BME
2 Kesav ECE
Table Border Style:-
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
Syntax for Border Style:-
th,td{
border-style :dotted;
Colspan&Rowspan:-
Colspan:-
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
</style>
</head>
<body>
<table style="width:100%">
<tr>
<thcolspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Mahesh</td>
<td>varan</td>
<td>24</td>
</tr>
<tr>
<td>Kesav</td>
<td>Moorthi</td>
<td>24</td>
</tr>
</table>
</body>
</html>
Rowspan:-
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<td>Mahesh</td>
</tr>
<tr>
<throwspan="2">Phone</th>
<td>12345</td>
</tr>
<tr>
<td>678910</td>
</tr>
</table>
</body>
</html>
HTML Table Colgroup:-
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
</style>
</head>
<body>
<table style="width: 100%;">
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</body>
</html>
Div Tag & Span Tag:-
<div> - Block Level Element
<span> - Inline Element.
DivExample:-
<!DOCTYPE html>
<html>
<body>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>The P and the DIV elements are both block elements, and they will always start on a new line and take
up the full width available (stretches out to the left and right as far as it can).</p>
</body>
</html>
Span Example:-
<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a
paragraph.</p>
<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width
as necessary.</p>
</body>
</html>
PROJECT-5 :- (IMAGE MAP PROJECT)
RCB.html:-
<html>
<head>
<title>ImageMap</title>
<link rel="stylesheet" href="Map.css">
<body>
<h1>WE LOVE RCB</h1>
<img src="RCB.jpeg" usemap="#RCB TEAM" height="400px" width="640px">
<map name="RCB TEAM" >
<area shape="circle" coords="99,89,66" target="_blank"
href="https://en.wikipedia.org/wiki/Glenn_Maxwell">
<area shape="circle" coords="230,93,66" target="_blank"
href="https://en.wikipedia.org/wiki/Virat_Kohli">
<area shape="circle" coords="396,93,66" target="_blank"
href="https://en.wikipedia.org/wiki/Faf_du_Plessis">
<area shape="circle" coords="533,96,66" target="_blank"
href="https://en.wikipedia.org/wiki/Dinesh_Karthik">
</map>
<div id="logo">
<img src="LOGO.png" usemap="#RCB logo" height="120" width="213">
<map name="RCB logo">
<area shape="rect" coords="62,4,153,118" target="_blank"
href="https://www.royalchallengers.com/">
</map>
</div>
<div id="cup">
<img src="OIP.jpg">
</div>
</body>
</head>
</html>
Map.css :-
body{
text-align: center;
margin-top: 100px;
background-color: rgb(86, 3, 3);
height: 2px;
h1{
color: aliceblue;
margin-bottom: 60px;
}
#logo{
padding: 30px;
#cup{
padding-top: 20px;
RCB.jpeg :-
LOGO.png :-
OIP.jpg :-
O/P GitHub Link :-
https://kesavamoorthiconsensus.github.io/Imagemap/Imagemap.html
