1. What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
2. A Simple HTML Document
Source code:-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <!DOCTYPE html> declaration defines that this document is an HTML5
document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
OutPut:
3. HTML Headings (H1-H6)
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Source code:-
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
OutPut:
4. HTML Image and Anchor Tag.
Source code:-
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials
Point</a>
</body>
</html>
OutPut:
5. HTML table
Source code:-
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<h2>A basic HTML table</h2>
<table border=4px>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<p>To undestand the example better, we have added borders to the table.</p>
</body>
</html>
OutPut:
6. HTML Ordered and Unordered List
Source code:-
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
OutPut:
7. HTML Frameset
Source code:-
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "top_frame.htm" />
<frame name = "main" src = "main_frame.htm" />
<frame name = "bottom" src = "bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
8. Create a Registration form using html .
Source code:-
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
<h2>Registration Form</h2>
User ID : <input type = "text" name = "user_id" />
<br><br/>
Password: <input type = "password" name = "password" />
<br/><br/>
<input type = "radio" name = "gender" value = "male"> Male
<input type = "radio" name = "gender" value = "female"> Female
<br/> <br/>
<p>Upload Your Photo
<input type = "file" name = "fileupload" accept = "image/*" /></p>
Select your country
<select id="country" name="country">
<option value="India">India</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Pakistan">Pakistan</option>
<option value="Sri Lanka">Sri Lanka</option>
</select>
<br/> <br/>
<input type = "checkbox" name = "terms_conditions" value="on"> I
Accept the terms & conditions.
<br/> <br/>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
OutPut:-
