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>