Scribd
Upload
55 views17 pages

HTML Full Notes

HTML FULL NOTES

Uploaded by

gujjalapudisaiteja
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
55 views17 pages

HTML Full Notes

HTML FULL NOTES

Uploaded by

gujjalapudisaiteja
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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:[email protected]”>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

You might also like