This document provides an overview of HTML by defining what HTML is, describing common HTML elements like headings, paragraphs, links and images, and explaining how to add styling, formatting, tables, lists, forms and frames to HTML pages. It defines HTML as a markup language used to describe web documents and provides sample code to illustrate key HTML tags and concepts.
2. Contents…
• Introduction.
• Representation of HTML.
• HTML elements.
• HTML attributes.
• HTML style.
• HTML formatting.
• HTML links.
• HTML images.
• HTML lists.
• HTML forms and frames.
3. Introduction
HTML stands for HYPER TEXT MARKUP
LANGUAGE.
HTML is a markup language for describing web
documents (web pages).
Markup language is a set of markup tags.
It have we use all predefined tags.
HTML is generally uses for the creation of static web
page.
4. HYPERTEXT MARKUP LANGUAGE (HTML)
Example HTML code:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1> This is heading </h1>
<p> This is paragraph </p>
</body>
</html>
5. HTML Element
Nested HTML element
HTML elements can be nested (element can contain element).
<html>
<body>
<h1>this is head</h1>
<p>this is paragraph</p>
</body>
</html>
Empty HTML element
<br> is an empty element without closing tag
6. HTML Attributes
Attributes provide additional information about the
element
Attributes come in name/value pairs like: name="value".
1. Lang attribute
<html lang=“en-US”>
2. Title attribute
<p title=“about title”>
3. Size attribute
width=“ ”, Height=“ ”, alt=“ ”.
7. HTML Styles
• Every html has default style
(bgcolor is white and text is black)
• Rules:- style=“property:value”.
1. HTML text color
<h1 style=“color:blue”>------</h1>
2. HTML text size
<h1 style=“font-size:300%”>------</h1>
3.HTML text alignment
<p style=“text-align:center”>-----</p>
8. HTML Formattings
1. Bold and Strong formatting
<p><b>this text is bold</b></p>
<p><strong>this text is strong</strong></p>
2. Subscript and Superscript formatting
<sub>------</sub>
<sup>------</sup>
3. Marked formatting
<h1>HTML<mark>marked</mark></h1>
9. HTML Links
Link syntax:
<a href="url">Link text</a>
Open link in new tab
<a href=“url”target=“_blank”>-----</a>
Image as link
<a href=“default.asp”>
<img src=“img.jpg” alt=“----”>
</a>
10. HTML Images
In HTML, images are defined with the <img> tag.
To display an image on a page, you need to use the src
attribute. Src stands for "source". The value of the src attribute
is the URL of the image
The syntax of defining an image:
<img src="url“/>
Image Floating
<p>
<img src=“url” alt=“----” style=“float:right” width:40px;
height:40px;”>
</p>
11. HTML Tables
Tables are defined with the <table> tag. A table is
divided into rows (with <tr> tag), and each row is
divided into data cells (with <td> tag) where td stands
for "table data," which is the content of a data.
Syntax of table
<table border=“1” style=“width:100%”>
<tr>
<td>-----</td>
</tr>
</table>
12. HTML table
• Table with colspan
• Table with rowspan
• Syntax:
<table style=“width:100%”>
<tr>
<th>NAME</th>
<th colspan=“2”>address</th>
</tr>
• Table with caption
<caption>ABC</caption>
13. HTML Lists
Unorderd list
-An unordered list is a list of items marked with bullets,
disc, circle and Square
-An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.
-Syntax:
<ul style=“list-style-type:disc”>
<li>Coffee</li>
</ul>
• Coffee.
14. Ordered Lists:
An ordered list is also a list of items marked with
numbers.
An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
Syntax:
<ol>
<li>Coffee</li>
</ol>
1.Coffee
15. Discription List
A definition list is not a list of single items. It is a list of items
with a description of each item.
A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description).
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
</dl>
Coffee
Black hot drink
16. HTML Forms
A form is an area that can contain form elements that
allow the user to enter information (like text fields,
textarea fields,radio buttons, checkboxes) in a form.
A form is defined with the <form> tag.
The most used form tag is the <input> tag.
When the user clicks on the "Submit" button, the
content of the form is sent to the server.
17. HTML Forms
Form Syntax:
<form>
Your name:
<input type=“text” name=“name”><br>
Your email:
<input type=“email" name= “email”><br>
<input type=“radio” name=“male”>
<input type=“radio” name=“female”>
</form>
18. HTML Frames
Each HTML document is called a frame, and each frame is
independent of the other. we can display more than one HTML
document in the same browser.
An iframe is used to display a web page within a web page.
Syntax:
<iframe src="URL"></iframe>