HTML
HTML(Hypertext markup language) was discovered in 1993 by Tim Berners. In HTML many versions are used the most commonly used version is 4. Hypertext markup language has so many tags like elements, containers, etc.
It is not a programming language. HTML is used to create a webpage with the help of CSS(Cascading Style Sheet). CSS is used to decorate the web page. We also used JavaScript for the protection of the website.
versions of HTML:
1989 - Tim Berners-Lee invented www
1991 - Tim Berners-Lee invented HTML
1993 - Dave Raggett drafted HTML+
1995 - HTML work group defined HTML
1997 - W3C Recommendation: HTML 3.2
1999 - W3C Recommendation: HTML 4.01
2000 - W3C Recommendation: XHTML 1.0
2008 - WHATWG HTML5 First Public Draft
2012 - WHATWG HTML5 First Public Draft
2014 - W3C Recommendation:HTML5
2016 - W3C Candidate Recommendation: HTML 5.1
2017 - W3C Recommendation :HTML5.1
2nd Edition
2017 -W3C Recommendation:HTML5.2
HTML documents are available at www(World Wide Web).
HTML STARTS WITH:
<!DOCTYPE html>
<html>
< body>
HTML ENDS WITH:
</body>
</html>
HTML TAGS
TITLE TAG:
STARTING ENDING
<title> </title> = It is used for Windows web page titles.
Syntax:
<html>
<body>
<title>hello</title>
</body>
</html>
OUTPUT:
Paragraph tag:
STARTING ENDING
<p> </p> = It is a paragraph tag used to write a paragraph.
Syntax:
<html>
<body>
<p>we are friends</p>
</body>
</html>
OUTPUT:
Heading tag:
STARTING ENDING
<h1> </h1>
<h2> </h2>
<h3> </h3> = It is used for headings. <h1> tag is the biggest heading tag in all 6 tags.
<h4> </h4>
<h5> </h5>
<h6> </h6>
Syntax:
<html>
<body>
<h1>i am good boy</h1>
<h2>i am good boy</h2>
<h3>i am good boy</h3>
<h4>i am good boy</h4>
<h5>i am good boy</h5>
<h6>i am good boy</h6>
</body>
</html>
OUTPUT:
<br> = It is a break tag used to break a line.
Syntax:
<html>
<body>
<p>who are you<br>why you came</p>
</body>
</html>
OUTPUT:
Horizontal line tag:
STARTING ENDING
<hr> </hr> = When we used <hr> tag after completion of the line the horizontal line will be drawn.
Syntax:
<html>
<body>
<p>i am lion</p><p><hr>i am lion</p>
<body>
<html>
OUTPUT:
<b> </b> = It is a bold tag used for letters bold.
Syntax:
<html>
<body>
<p><b>we are back</b><p>
</body>
</html>
OUTPUT:
STARTING ENDING
<center> </center> = It is a center tag used for lines in the center.
Syntax:
<html>
<body>
<p><center>we are back</center></p>
</body>
</html>
OUTPUT:
STARTING ENDING
<strong> </strong> = It is used for letter thickness.
Syntax:
<html>
<body>
<p><center>i am lion</center></p>
</body>
<html>
OUTPUT:
STARTING ENDING
<i> </i> = It is used for letters in italic.
Syntax:
<html>
<body>
<p><i>this is my phone</i></p>
</body>
</html>
OUTPUT:
LINK TAG:
STARTING ENDING
<ahref> </a> = It is used to paste any link.
syntax:
<ahref> = "https:www.google.com">click here</a>
When we click here the link will open.
IMAGE TAG
<img src = "lion.jpg">
when we want the size in the image we use the width and height.
Syntax:<img src = "lion.jpg"
width = "500"
height = "600">
when we want a link for the image to see the image then we use "alt".
syntax:<img src = "lion.jpg"
width = "500"
height = "600"
alt = "lion photo">
LISTS
Lists are two types:
1. ordered list
2. unordered list
3. other list
ORDERED LIST:
STARTING ENDING
<ol> </ol> = It is an ordered list tag.
<li> </li> = It is a list tag.
Syntax:
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
OUTPUT:
. item1
. item2
. item3
UNORDERED LIST:
STARTING ENDING
<ul> </ul> = It is used for writing unordered tags.
<li> </li> = It is a list tag.
Syntax:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
OUTPUT:
1. item1
2. item2
3. item3
Other lists:
Syntax:
<html>
<body>
<d1>
<dt>lion</dt>
<dd>- it is carnivores</dd>
<dt>deer</dt>
<dd>- it is herbivores</dd>
</d1>
</body>
</html>
OUTPUT:
TABLES
STARTING ENDING
<table> </table> = It is used to make a table on the web page.
<th> </th> = It is used for table main headings.
<td> </td> = It is used for table perfect data
In this table both HTML and CSS are used.
Syntax:
<style>
table, th, td{
border: 1px solid black
border-collapse: collapse;
}
</style>
<table>
<tr>
<th>s.no</th>
<th>name</th>
<th>marks</th>
</tr>
<tr>
<td>1</td>
<td>ganesh</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>akshay</td>
<td>9</td>
</tr>
<tr>
<td>3</td>
<td>manju</td>
<td>8</td>
</tr>
</table>
OUTPUT:
padding for the table:
Padding means in the table the gaps are there, and the gaps are gone this is called padding.
Syntax:
<style>
table,th,td{
border : 1px solid black
border-collapse: collapse;
}
th,td{
padding:15px
}
</style>
<table>
<tr>
<th>s.no</th>
<th>name</th>
<th>marks</th>
</tr>
<tr>
<td>1</td>
<td>ganesh</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>akshay</td>
<td>9</td>
</tr>
<tr>
<td>3</td>
<td>manju</td>
<td>8</td>
</tr>
</table>
OUTPUT:
BACKGROUND COLOUR:
When we want the background color of the web page we want to use <style> tag.
Syntax:
<html>
<body style= "background-color: blue;">
<h1>i am back</h1>
<p>i am back</p>
</body>
</html>
OUTPUT:
Subscript and superscript
Subscript:
STARTING ENDING
<sub> </sub> = It is a subscript tag used to write the letters at down of the sentence.
Syntax:
<html>
<body>
<p>you are <sub>looking so </sub>beautiful</p>
</body>
</html>
OUTPUT:
STARTING ENDING
<sup> </sup> = It is a superscript used to write the letters at the up of the sentence.
Syntax:
<html>
<body>
<p>you are<sup>looking so</sup>beautiful</p>
</body>
</html>
OUTPUT:
SENTENCE BACKGROUND LETTER CHANGE:
SMALL TAG
It is used for letters small in size.
Syntax:
<html>
<body>
<p>this is mine</p>
<p><small>this is mine</small>
</body>
</html>
OUTPUT:
It is used to mark any word or sentence.
Syntax:
<html>
<body>
<p>here we <mark>are</mark>met</p>
</html>
</body>
OUTPUT:
