Html training slide

Easy to
Learn HTML
Presented By…
villupuram.co.in

Introduction to
HTML
HTML is a structured language and
simple language.
With HTML you can create your own
Web site.
The HTML Elements are called
Tag(<>).
1.1 Introduction Of HTML
Ex:-
<html>
<head>
<title>My Job</title>
</head>
<body>
<p>Hi all</p>
</body>
</html>

Ex:-
<img
src=”image/villupuram.jpg”
width=”120px”
height=”60px” ></img>
1.2 HTML Attributes
Attributes provide additional
information about HTML elements.
Attributes are always specified in the
start tag

Ex:-

1.3 HTML Comments
Comment tags are used to
insert comments in the HTML
source code.

2. Formatting of text
with HTML

2.1 Paragraph Formatting with HTML
Ex:-
<p>The ins element represent
inserted (added) text.</p>
<p>My favorite <ins>color</ins> is
red.</p>
Output:-
The ins element represent
inserted (added) text.
My favorite color is red.

Ex:-
<p>10<sup>2</sup> - super
subscripted.</p>
<p>10<sub>2</sub> -
subscripted.</p>
Output:-
102 - super subscripted.
102 - subscripted.
2.1 Paragraph Formatting with HTML

3. Adding local and
remote links

Explanation:-
• An anchor link is a link on a page that brings
you to a specific place on that page
• The anchor link will use this format <a>
Example:-
<a href = “home.html”>home</a>
<a
href=www.myproject.com/home.html><
home</a>
3.1 Adding Local and Remote Links

Explanation:-
• The internal links are given at same page link,
• That has helps to anchor tag <a>.
Example:-
<a href = “#header”>Header</a>
<a href=“#features”>Features</a>
3.2 Adding Internal Links with the
Named Anchor Tag

4.1 Creating Lists
List is to arrange the data with
sequence
It differentiate two type
1. Ordered list
2. Unordered list
Ex:-
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Output:-
● Coffee
● Tea
● Milk

4.2 Nested Lists
Nested List is to arrange the data
with Hierarchy style
Ex:-
<ul>
<li>Web App</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</ul>
Output:-
● Web App
○ HTML
○ CSS
○ JS

4.3 Ordered List
Ex:-
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
Output:-
1. HTML
2. CSS
3. JS
An ordered list can be numerical
or alphabetical.
Define the tag <ol>

4.3 Unordered List
An unordered list can be bullet.
Define the tag <ul>
Ex:-
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
Output:-
● HTML
● CSS
● JS

5.1 Introduction of Table Element
An HTML table consists of the <table> element and one or
more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element
defines a table header, and the <td> element defines a table
cell.

5.2 Creating Table
Example code:-
<table>
<tr>
<th>Month</th><th>Savings</th>
</tr>
<tr>
<td>January</td><td>RS.100</td>
</tr>
<tr>
<td>February</td><td>RS.200</td>
</tr>
</table>
Output:-

5.2 Advance Table
Example code:-
<table width="200" align="right" border="1">
<tr>
<td colspan="2">Did I lose weight?</td>
<td>Hmm</td>
</tr>
<tr>
<td>We're</td>
<td>still</td>
<td>here</td>
</tr>
</table>
Output:-

6.1 Browse the Images
Example code:-
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain
View">
</body>
</html>
Output:-

6.2 Images Attributes
Example code:-
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain
View" width="304px“ height="228px;">
</body>
</html>
Output:-

7. Form HTML Element
7.11 Input -> date
7.12 Input -> datetime-local
7.13 Input -> week
7.14 Input -> month
7.15 Input -> email
7.16 Input -> range
7.17 button
●7.1 Label
●7.2 Input ->text
●7.3 Input ->password
●7.4 Input ->number
●7.5 Input ->radio
●7.6 Input ->checkbox
●7.7 Input ->button
●7.8 Input ->submit
●7.9 Input -> reset
●7.10 Input -> color

Html training slide

More Related Content

What's hot

Similar to Html training slide

Recently uploaded

In this document

Html training slide