Scribd
Upload
11 views47 pages

HTML Only

The document is a comprehensive tutorial on HTML, covering its basic and advanced concepts, including HTML tags, syntax, formatting, and examples. It explains the history of HTML, its features, and provides detailed descriptions of various HTML elements such as headings, paragraphs, links, images, and tables. The tutorial is designed for both beginners and professionals, offering practical examples and an online HTML editor for hands-on learning.

Uploaded by

radhikayadav5383
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views47 pages

HTML Only

The document is a comprehensive tutorial on HTML, covering its basic and advanced concepts, including HTML tags, syntax, formatting, and examples. It explains the history of HTML, its features, and provides detailed descriptions of various HTML elements such as headings, paragraphs, links, images, and tables. The tutorial is designed for both beginners and professionals, offering practical examples and an online HTML editor for hands-on learning.

Uploaded by

radhikayadav5383
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

ACMS

1
ACMS

HTML
HTML or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is developed for
beginners and professionals. The major points of HTML are given below:

HTML stands for Hyper Text Markup Language.

HTML is used to create web pages.

HTML is widely used language on the web.

We can create static website by HTML only.

HTML Example with HTML Editor


In this tutorial, you will get a lot of examples, in fact one example for every chapter. you can also edit and run these
examples, with our online HTML editor.

1. <!DOCTYPE>
2. <html>
3. <body>
4. <h1>Write Your First Heading</h1>
5. <p>Write Your First Paragraph.</p>
6. </body>
7. </html>

HTML 5 Tags
In this tutorial, we will learn HTML 5 tags such as audio tag, video tag, canvas tag, HTML svg, HTML geolocation,
HTML drag and drop etc.

All HTML Tags


At last, we will learn all HTML tags one by one for example, marquee tag, textarea tag, br tag, hr tag, pre tag, h tag,
code tag, input tag, title tag, meta tag, script tag, style tag etc.

What is HTML
2
ACMS

HTML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and what is
Markup Language?

Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time
when you click on a word which brings you to a new webpage, you have clicked on a hypertext.

Markup language: A markup language is a programming language that is used make text more interactive and
dynamic. It can turn a text into images, tables, links etc.

An HTML document is made of many HTML tags and each HTML tag contains different content.

Let's see a simple example of HTML.

1. <!DOCTYPE>
2. <html>
3. <body>
4. <h1>Write Your First Heading</h1>
5. <p>Write Your First Paragraph.</p>
6. </body>
7. </html>

Description of HTML example


DOCTYPE: It defines the document type.

html : Text between html tag describes the web document.

body : Text between body tag describes the body content of the page that is visible to the end user.

h1 : Text between h1 tag describes the heading of the webpage.

p : Text between p tag describes the paragraph of the webpage.

Brief History of HTML


In the late 1980's , A physicist, Tim Berners-Lee who was a contractor at CERN, proposed a system for CERN
researchers. In 1989, he wrote a memo proposing an internet based hypertext system.

3
ACMS

Tim Berners-Lee is known as father of HTML. The first available description of HTML was a document called
"HTML Tags" proposed by Tim in late 1991.

Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make effective presentation with HTML because it has a lot of formatting tags.

3) It is a markup language so it provides a flexible way to design web pages along with the text.

4) It facilitates programmers to add link on the web pages (by html anchor tag) , so it enhances the interest of
browsing of the user.

5) It is platform-independent because it can be displayed on any platform like Windows, Linux and Macintosh etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more
attractive and interactive.

HTML Tags
HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags
are used to create HTML documents and render their properties. Each HTML tags have different properties.

Syntax
<tag> content </tag>

HTML Tag Examples


Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given below:

<p> Paragraph Tag </p>

4
ACMS

<h2> Heading Tag </h2>


<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>

Unclosed HTML Tags


Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

HTML Meta Tags


DOCTYPE, title, link, meta and style

HTML Text Tags


<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>,
<blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

HTML Link Tags


<a> and <base>

HTML Image and Object Tags


<img>, <area>, <map>, <param> and <object>
5
ACMS

HTML List Tags


<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags


table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags


form, input, textarea, select, option, optgroup, button, label, fieldset and legend

HTML Scripting Tags


script and noscript

HTML Formatting

HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. There are many formatting tags in
HTML. These tags are used to make text bold, italicized, or underlined. There are almost 12 options available that
how text appears in HTML and XHTML.

Here, we are going to learn 12 HTML formatting tags.

1) Bold Text
If you write anything within <b>............</b> element, is shown in bold letters.

6
ACMS

See this example:

1. <p> <b>Write Your First Paragraph in bold text.</b></p>

Output:

Write Your First Paragraph in bold text.

2) Italic Text
If you write anything within <i>............</i> element, is shown in italic letters.

See this example:

1. <p> <i>Write Your First Paragraph in italic text.</i></p>

Output:

Write Your First Paragraph in italic text.

3) HTML Marked formatting


If you want to mark or highlight a text, you should write the content within <mark>.........</mark>.

See this example:

1. <h2> I want to put a <mark> Mark</mark> on your face</h2>

Output:

I want to put a Mark on your face

4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.

See this example:

7
ACMS

1. <p> <u>Write Your First Paragraph in underlined text.</u></p>

Output:

Write Your First Paragraph in underlined text.

5) Strike Text
Anything written within <strike>.......................</strike> element is displayed with strikethrough. It is a thin line
which cross the statement.

See this example:

1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Output:

Write Your First Paragraph with strikethrough.

6) Monospaced Font
If you want that each letter has the same width then you should write the content within <tt>.............</tt> element.

Note: We know that most of the fonts are known as variable-width fonts because different letters have different
width. (for example: 'w' is wider than 'i'). Monospaced Font provides similar space among every letter.

See this example:

1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Output:

Hello Write Your First Paragraph in monospaced font.

7) Superscript Text

8
ACMS

If you put the content within <sup>..............</sup> element, is shown in superscript ; means it is displayed half a
character's height above the other characters.

See this example:

1. <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>

Output:

Hello Write Your First Paragraph in superscript.

8) Subscript Text
If you put the content within <sub>..............</sub> element, is shown in subscript ; means it is displayed half a
character's height below the other characters.

See this example:

1. <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>

Output:

Hello Write Your First Paragraph in subscript.

9) Deleted Text
Anything that puts within <del>..........</del> is displayed as deleted text.

See this example:

1. <p>Hello <del>Delete your first paragraph.</del></p>

Output:

Hello Delete your first paragraph.

10) Inserted Text


9
ACMS

Anything that puts within <ins>..........</ins> is displayed as inserted text.

See this example:

1. <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>

Output:

Delete your first paragraph.Write another paragraph.

11) Larger Text


If you want to put your font size larger than the rest of the text then put the content within <big>.........</big>. It
increase one font size larger than the previous one.

See this example:

1. <p>Hello <big>Write the paragraph in larger font.</big></p>

Output:

Hello Write the paragraph in larger font.

12) Smaller Text


If you want to put your font size smaller than the rest of the text then put the content within
<small>.........</small>tag. It reduces one font size than the previous one.

See this example:

1. <p>Hello <small>Write the paragraph in smaller font.</small></p>

Output:

Hello Write the paragraph in smaller font.

HTML Heading

10
ACMS

HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage.
When you place the text within the heading tags <h1>.........</h1>, it is displayed on the browser in the bold format
and size of the text depends on the number of heading.

There are six different HTML headings which are defined with the <h1> to <h6> tags.

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for
least important.

See this example:

1. <h1>Heading no. 1</h1>


2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3>
4. <h4>Heading no. 4</h4>
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6>

Output:

Heading no. 1
Heading no. 2
Heading no. 3

Heading no. 4

Heading no. 5

Heading no. 6

Heading elements (h1....h6) should be used for headings only. They should not be used just to make text
bold or big.

HTML Paragraph
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see
how it work. It is a notable point that a browser itself add an empty line before and after a paragraph.

11
ACMS

See this example:

1. <p>This is first paragraph.</p>


2. <p>This is second paragraph.</p>
3. <p>This is third paragraph.</p>

Output:

This is first paragraph.

This is second paragraph.

This is third paragraph.

Space inside HTML Paragraph


If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the
page. The browser counts number of spaces and lines as a single one.

1. <p>
2. I am
3. going to provide
4. you a tutorial on HTML
5. and hope that it will
6. be very beneficial for you.
7. </p>
8. <p>
9. Look, I put here a lot
10. of spaces but I know, Browser will ignore it.
11. </p>
12. <p>
13. You cannot determine the display of HTML</p>
14. <p>because resized windows may create different result.
15. </p>

Output:

I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you.

Look, I put here a lot of spaces but I know, Browser will ignore it.

You cannot determine the display of HTML

because resized windows may create different result.

12
ACMS

As you can see, all the extra lines and unnecessary spaces are removed by the browser.

HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page. The "href" attribute is the most
important attribute of the HTML a tag.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other words, it points out the destination
page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

Let's see an example of HTML anchor tag.

1. <a href="second.html">Click for Second Page</a>

Appearance of HTML anchor tag


An unvisited link is displayed underlined and blue.

A visited link displayed underlined and purple.

An active link is underlined and red.

HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes
only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

1. <h2>HTML Image Example</h2>


2. <img src="good_morning.jpg" alt="Good Morning Friends"/>

Output:

13
ACMS

Attributes of HTML img tag


The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below.

1) src

It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the
image on the server.

The location of image may be on the same directory or another server.

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe
the image in words. The alt attribute is considered good for SEO prospective.

3) width

It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You
should apply CSS in place of width attribute.

4) height

It specifies the height of the image. The HTML height attribute also supports iframe, image and object elements. It
is not recommended now. You should apply CSS in place of height attribute.

HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.

HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer
section etc. But it is recommended to use div tag over table to manage the layout of the page .

14
ACMS

HTML Table Tags


Tag Description
<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

HTML Table Example


Let's see the example of HTML table tag. It output is shown above.

1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>

Output:

First_Name Last_Name Marks


Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72
15
ACMS

In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.

HTML Table with Border


There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML


2. By border property in CSS

1) HTML Border attribute

You can use border attribute of table tag in HTML to specify border. But it is not recommended now.

1. <table border="1">
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>

Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

2) CSS Border property

It is now recommended to use border property of CSS to specify border in table.

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. }
5. </style>

16
ACMS

You can collapse all the borders in one border by border-collapse property.

1. <style>
2. table, th, td {
3. border: 2px solid black;
4. border-collapse: collapse;
5. }
6. </style>

Output:

Name Last Name Marks


Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

HTML Table with cell padding


You can specify padding for table header and table data by two ways:

1. By cellpadding attribute of table in HTML


2. By padding property in CSS

The cellpadding attribute of HTML table tag is obselete now. It is recommended to use CSS. So let's see the code of
CSS.

1. <style>
2. table, th, td {
3. border: 1px solid pink;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>

Output:

Name Last Name Marks

Sonoo Jaiswal 60

17
ACMS

James William 80

Swati Sironi 82

Chetna Singh 72

HTML Table with colspan


If you want to make a cell span more than one column, you can use the colspan attribute.

Let's see the example that span two columns.

CSS code:

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 5px;
8. }
9. </style>

HTML code:

1. <table style="width:100%">
2. <tr>
3. <th>Name</th>
4. <th colspan="2">Mobile No.</th>
5. </tr>
6. <tr>
7. <td>Ajeet Maurya</td>
8. <td>7503520801</td>
9. <td>9555879135</td>
10. </tr>
11. </table>

Output:

Name Mobile No.

Ajeet Maurya 7503520801 9555879135

18
ACMS

HTML Table with rowspan


If you want to make a cell span more than one row, you can use the rowspan attribute.

Let's see the example that span two rows.

CSS code:

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>

HTML code:

1. <table>
2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>
3. <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
4. <tr><td>9555879135</td></tr>
5. </table>

Output:

Name Ajeet Maurya

7503520801
Mobile No.
9555879135

HTML table with caption


HTML caption is diplayed above the table. It must be used after table tag only.

1. <table>
2. <caption>Student Records</caption>
3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>
6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>
7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
8. </table>
19
ACMS

Styling HTML table even and odd cells


CSS code:

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. table#alter tr:nth-child(even) {
10. background-color: #eee;
11. }
12. table#alter tr:nth-child(odd) {
13. background-color: #fff;
14. }
15. table#alter th {
16. color: white;
17. background-color: gray;
18. }
19. </style>

Output:

HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three
different types of HTML lists:

1. Ordered List or Numbered List (ol)


2. Unordered List or Bulleted List (ul)

20
ACMS

3. Description List or Definition List (dl)

HTML Ordered List or Numbered List


In the ordered HTML lists, all the list items are marked with numbers. It is known as numbered list also. The
ordered list starts with <ol> tag and the list items start with <li> tag.

1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>

Output:

1. Aries
2. Bingo
3. Leo
4. Oracle

Click here for full details of HTML ordered list. HTML Ordered List

HTML Unordered List or Bulleted List


In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The
Unordered list starts with <ul> tag and list items start with the <li> tag.

1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>

Output:

 Aries
 Bingo
 Leo
 Oracle

21
ACMS

Click here for full details of HTML unordered list. HTML Unordered List

HTML Description List or Definition List


HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition
list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.


2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10. </dl>

Output:

Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.

HTML Ordered List | HTML Numbered List


HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for
ordered list. There can be different types of numbered list:

22
ACMS

 Numeric Number (1, 2, 3)


 Capital Roman Number (I II III)
 Small Romal Number (i ii iii)
 Capital Alphabet (A B C)
 Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description
Type "1" This is the default type. In this type, the list items are numbered with numbers.

Type "I" In this type, the list items are numbered with upper case roman numbers.

Type "i" In this type, the list items are numbered with lower case roman numbers.

Type "A" In this type, the list items are numbered with upper case letters.

Type "a" In this type, the list items are numbered with lower case letters.

HTML Ordered List Example


Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here we are not defining
type="1" because it is the default type.

1. <ol>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

1. HTML
2. Java
3. JavaScript
4. SQL

ol type="I"
Let's see the example to display list in roman number uppercase.

1. <ol type="I">
23
ACMS

2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

I. HTML
II. Java
III. JavaScript
IV. SQL

ol type="i"
Let's see the example to display list in roman number lowercase.

1. <ol type="i">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

i. HTML
ii. Java
iii. JavaScript
iv. SQL

ol type="A"
Let's see the example to display list in alphabet uppercase.

1. <ol type="A">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

A. HTML
24
ACMS

B. Java
C. JavaScript
D. SQL

ol type="a"
Let's see the example to display list in alphabet lowercase.

1. <ol type="a">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

a. HTML
b. Java
c. JavaScript
d. SQL

start attribute
The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

1. <ol type="i" start="5">


2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

25
ACMS

Output:

v. HTML
vi. Java
vii. JavaScript
viii. SQL

HTML Unordered List | HTML Bulleted List


HTML Unordered List or Bulleted List displays elements in bulleted format. The HTML ul tag is used for the
unordered list. There can be 4 types of bulleted list:

 disc
 circle
 square
 none

To represent different ordered lists, there are 4 types of attributes in <ul> tag.

Type Description

Type "disc" This is the default style. In this style, the list items are marked with bullets.

Type "circle" In this style, the list items are marked with circles.

Type "square" In this style, the list items are marked with squares.

Type "none" In this style, the list items are not marked .

HTML Unordered List Example


1. <ul>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

Output:

 HTML
 Java
 JavaScript
 SQL

26
ACMS

ul type="circle"
1. <ul type="circle">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

Output:

o HTML
o Java
o JavaScript
o SQL

ul type="square"
1. <ul type="square">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

Output:

 HTML
 Java
 JavaScript
 SQL

ul type="none"
1. <ul type="none">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

Output:

27
ACMS

 HTML
 Java
 JavaScript
 SQL

HTML Description List | HTML Definition List


HTML Description List or Definition List displays elements in definition form like in dictionary. The <dl>, <dt>
and <dd> tags are used to define description list.

The 3 HTML description list tags are given below:

1. <dl> tag defines the description list.


2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).

1. <dl>
2. <dt>HTML</dt>
3. <dd>is a markup language</dd>
4. <dt>Java</dt>
5. <dd>is a programming language and platform</dd>
6. <dt>JavaScript</dt>
7. <dd>is a scripting language</dd>
8. <dt>SQL</dt>
9. <dd>is a query language</dd>
10. </dl>

Output:

HTML
is a markup language
Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language

HTML Form
An HTML form is a section of a document which contains controls such as text fields, password fields,
checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing.
28
ACMS

Why use HTML Form


HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address
and credit/debit card details so that item can be sent to the given address.

HTML Form Syntax


1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>

HTML Form Tags


Let's see the list of HTML 5 form tags.

Tag Description
<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML 5 Form Tags


29
ACMS

Let's see the list of HTML 5 form tags.

Tag Description
<datalist> It specifies a list of pre-defined options for input control.

<keygen> It defines a key-pair generator field for forms.

<output> It defines the result of a calculation.

HTML TextField Control


The type="text" attribute of input tag creates textfield control also known as single line textfield control. The name
attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.

1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>

Label Tag in Form


It is considered better to have label in form. As it makes the code parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in label tag that
must be same as id attribute of input tag.

1. <form>
2. <label for="firstname">First Name: </label>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>

HTML Password Field Control


The password is not visible to the user in password field control.

1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>
4. </form>

30
ACMS

HTML 5 Email Field Control


The email field in new in HTML 5. It validates the text for correct email address. You must use @ and . in this field.

1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>

Radio Button Control


The radio button is used to select one from multiple options. It is used in gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a time.

1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
5. </form>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
4. <label for="cricket">Cricket</label>
5. <input type="checkbox" id="football" name="football" value="football"/>
6. <label for="football">Football</label>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>

HTML Form Example


Let's see a simple example of creating HTML form.

1. <form action="#">
2. <table>

31
ACMS

3. <tr>
4. <td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>
5. <td><input type="text" name="name" value= id="register_name" style="width:160px"/></td>
6. </tr>
7. <tr>
8. <td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td>
9. <td><input type="password" name="password" id="register_password" style="width:160px"/></td>
10. </tr>
11. <tr>
12. <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>
13. <td
14. ><input type="email" name="email" value= id="register_email" style="width:160px"/></td>
15. </tr>
16. <tr>
17. <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>
18. <td>
19. <input type="radio" name="gender" id="register_gendermale" value="male"/>
20. <label for="register_gendermale">male</label>
21. <input type="radio" name="gender" id="register_genderfemale" value="female"/>
22. <label for="register_genderfemale">female</label>
23. </td>
24. </tr>
25. <tr>
26. <td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>
27. <td><select name="country" id="register_country" style="width:160px">
28. <option value="india">india</option>
29. <option value="pakistan">pakistan</option>
30. <option value="africa">africa</option>
31. <option value="china">china</option>
32. <option value="other">other</option>
33. </select>
34. </td>
35. </tr>
36. <tr>
37. <td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/>
38. </div></td>
39. </tr>
40. </table>
41. </form>

HTML Textarea
The HTML <textarea> tag is used to define a multi-line text input control.

It can hold unlimited number of characters and the texts are displayed in a fixed-width font (usually courier).

The size of the HTML textarea is defined by <cols> and <rows> attribute, or it can also be defined through CSS
height and width properties.

32
ACMS

HTML Textarea Example


1. <textarea rows="9" cols="70">
2. Atharva textarea tag example with rows and columns.
3. </textarea>

Output:

New HTML 5 Textarea Attributes


Attribute Description
autofocus It specifies that a text area should be automatically get focused when the page is loaded.

form It specifies one or more forms the textarea belongs to.

maxlength It specifies the maximum number of characters allowed in the text area.

placeholder It specifies a short hint that describes the expected value of a textarea.

required It specifies that textarea must be filled out.

wrap It specifies that how the texts in the textarea are wrapped at the time of the submission of the
form.

HTML Textarea form attribute


The form attribute specifies one or more forms the text area belongs to.

1. <form action="updates.jsp" id="usrform">


2. Name: <input type="text" name="usrname">
3. <input type="submit">
4. </form>
5. <br>
6. <textarea rows="9" cols="70" name="comment" form="usrform">

33
ACMS

7. Enter text here...</textarea>


8. <p>The text area above is outside the form element, but should still be a part of the form.</p>
9. <p><b>Note:</b> The form attribute is not supported in Internet Explorer.</p>

Output:

Submit
Name:

The textarea element above is outside the form , but it is still the part of the form.

Note: The form attribute is not supported in Internet Explorer.

HTML Title
HTML title tag is used to provide a title name for your webpage. It is necessary for Search Engine Optimization
(SEO).

The HTML title tag must be used inside the <head> tag.

The title of the page is displayed on the title bar of the browser.

Let's see the example of HTML title tag.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>First web page.</title>
5. </head>
6. <body>
7. <p>Welcome to my first web page.</p>
8. </body>
9. </html>

34
ACMS

Here you see that we are using two elements, the head tag and the title tag. The whole title element is within the
head tag.

The head element which appears before body element just contains the information about the page but it doesn't
display on the browser window. So, to display a title name on the web page, title element is used.

If you look at the above example, you will see that "First web page" will be displayed on the tab/ title bar of the
browser. Content(text) between <title>.............</title> is shown on the title bar.

HTML Div Tag


The HTML <div> tag is used to group the large section of HTML elements together.

We know that every tag has a specific purpose e.g. p tag is used to specify paragraph, <h1> to <h6> tag are used to
specify headings but the <div> tag is just like a container unit which is used to encapsulate other page elements and
divides the HTML documents into sections.

The div tag is generally used by web developers to group HTML elements together and apply CSS styles to many
elements at once. For example: If you wrap a set of paragraph elements into a div element so you can take the
advantage of CSS styles and apply font style to all paragraphs at once instead of coding the same style for each
paragraph element.

1. <div style="border:1px solid pink;padding:20px;font-size:20px">


2. <p>Welcome to Atharva.com, Here you get tutorials on latest technologies.</p>
3. <p>This is second paragraph</p>
4. </div>

Output:

Welcome to Atharva.com, Here you get tutorials on latest technologies.

This is second paragraph.

Difference between HTML div tag and span tag


div tag span tag

35
ACMS

HTML div is a block element. HTML span is an inline element

HTML div element is used to wrap large sections HTML span element is used to wrap
of elements. small portion of texts, image etc.

HTML div example: Login Form


In this example, we are creating box using div tag. There is a login form inside the box. Let's see the CSS and
HTML code.

CSS Code:

1. .loginform{
2. padding:10px;
3. border:1px solid pink;
4. border-radius:10px;
5. float:right;
6. margin-top:10px;
7. }
8. .formheading{
9. background-color:red;
10. color:white;
11. padding:4px;
12. text-align:center;
13. }
14. .sub{
15. background-color:blue;
16. padding: 7px 40px 7px 40px;
17. color:white;
18. font-weight:bold;
19. margin-left:70px;
20. border-radius:5px;
21. }

HTML Code:

1. <div class="loginform">
2. <h3 class="formheading">Please Login</h3>
3. <form action="LoginServlet" method="post">
4. <table>
5. <tr><td>Email:</td><td><input type="email" name="email"/></td></tr>
6. <tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
7. <tr><td colspan="2" style="text-align:center"><input class="sub" type="submit" value="login"/></td></tr>
8. </table>
9. </form>
10. </div>

36
ACMS

Output:

Please Login
Email:

Password:

login

HTML pre tag


The HTML <pre> tag is used to specify pre formatted texts. Texts within <pre>.......</pre> tag is displayed in a
fixed-width font. Usually it is displayed in Courier font. It maintains both space and line break.

It is widely used to display language examples e.g. Java, C#, C, C++ etc because it displays the code as it is typed.

HTML pre tag example


1. <pre>
2. This is a formatted text
3. by using the HTML pre tag. It maintains
4. both space and line break.
5. </pre>

Output:

This is a formatted text


by using the HTML pre tag. It maintains
both space and line break.

HTML pre tag example: Java code within pre


1. <pre>
2. package com.atharva;
3. public class FirstJava{
4. public static void main(String args[]){
5. System.out.println("hello java");
6. }
7. }
8. </pre>

37
ACMS

Output:

package com.atharva;
public class FirstJava{
public static void main(String args[]){
System.out.println("hello java");
}
}

If you remove pre tag from the above example, all the text will be displayed in a single line.

Output without pre:

package com.atharva; public class FirstJava{ public static void main(String args[]){ System.out.println("hello
java"); } }

width attribute
The HTML <pre> tag also supports the width attribute. The width attribute specifies the desired width of the pre-
formatted text. But, it is not supported in HTML 5.

HTML code tag


HTML <code> tag is used to represent computer code. It is a phrase tag which defines a piece of computer code.
By default, it is displayed in the browser's default monospace font (also known as fixed-width font).

List of HTML phrase tags


Tag Description
<em> displays emphasized text

<strong> displays important text

<dfn> defines a definition term

<code> defines a piece of computer code

<samp> specifies a sample output from a computer program

<kbd> defines keyboard input


38
ACMS

<var> defines a variable

HTML phrase tags example including code tag


1. <em>It is inside em tag.</em><br>
2. <strong>It is inside strong tag.</strong><br>
3. <dfn>It is inside dfn tag.</dfn><br>
4. <code>It is inside code tag.</code><br>
5. <samp>It is inside samp tag.</samp><br>
6. <kbd>It is inside kbd tag.</kbd><br>
7. <var>It is inside var tag.</var>

Output:

It is inside em tag.
It is inside strong tag.
It is inside dfn tag.
It is inside code tag.
It is inside samp tag.
It is inside kbd tag.
It is inside var tag.

HTML Label Tag


The <label> tag is used to specify a label for an <input> element. It adds a label to a form control such as text,
email, password, textarea etc.

HTML Label Tag Example


Let's see the example of HTML label tag.

1. <label for="email">EMAIL-ID:<br /> <input type="email" value= name="emailid" size="30"


2. placeholder="Enter a valid email address"><br /><br />
3. <label for="phone">PHONE NO:<br /> <input type="text" value= name="phno" size="30"
4. maxlength="10" placeholder="Enter a valid phone number" pattern="[0-9]{10}"><br /><br />

Output:

EMAIL-ID:

39
ACMS

PHONE NO:

HTML Input Tag


The HTML <input> tag is used to represent a form input control in HTML document. This form input control
facilitate user to input data and communicate with a website or application. Let's take an example of an HTML form
with three input fields, two text fields and one button for submission.

HTML Input Tag Example


Let's see the example of HTML input tag.

1. <form action="#">
2. First name: <input type="text" name="FirstName" placeholder="enter firstname..."><br>
3. Last name: <input type="text" name="LastName" placeholder="enter lastname..."><br>
4. <input type="submit" value="Submit">
5. </form>

Output:

First name:

Last name:
Submit

Click the "Submit" button for sending the form-data to a page on the server.

Points to remember
1) Use the input element within the form element to declare input control that allow user to enter data.

2) The input element is empty. It contains attributes only. There is no need of an end tag in HTML.

3) If you want to define labels for input element, use the label element with each input tag.

40
ACMS

Difference between HTML4.01 and HTML5


HTML5 does not support "align" attribute. There are several new attributes for <input> tag in HTML5, and the type
attribute has several new values.

Difference between HTML and XHTML


In HTML, <input> tag is used without an end tag. In XHTML, the <input> tag must be properly closed.

HTML hr tag
HTML <hr> tag is used to specify a paragraph-level thematic break in HTML document. It is used when you
abruptly change your topic in your HTML document. It draw a horizontal line between them. It is also called a
Horizontal Rule in HTML.

HTML hr tag
1. <h2>HTML</h2>
2. <p>HTML is a language for describing web pages.</p>
3. <hr/>
4. <h2>HR Tag </h2>
5. <p> HR tag is used to draw a horizontal line within the texts to sepate content.<p>

Output:

HTML
HTML is a language for describing web pages.

HR Tag
HR tag is used to draw a horizontal line within the texts to separate content.

41
ACMS

HR tag in HTML 4.01 and HTML5?


In HTML 4.01, the <hr> tag represents a horizontal rule while in HTML 5, it defines a thematic break. CSS is used
in HTML5 instead of layout attributes.

HR tag in HTML and XHTML


In HTML <hr> tag need not to be closed whereas <hr> tag must be properly closed in XHTML.

HTML br tag
HTML <br> tag or element is used to break line in a paragraph.

It is generally used in poem or address where the division of line is necessary.

It is an empty tag, means it does not need a company of end tag.

Don't use br tag for margin between two paragraphs, use CSS margin property instead.

Difference between HTML <br> and <br/>


You can use HTML br tag two ways: <br> or <br/>. It is recommended to use closed br tag <br/> because it is
supported in HTML and XHTML both.

HTML br tag example


1. <p>If you want to break line<br>in a paragraph,<br>use the br element.</p>

Output:

Ifyou want to break line


in a paragraph,
use the br element.
42
ACMS

BR tag in HTML and XHTML


In HTML br tag need not to be closed e.g. <br> whereas br tag must be properly closed in XHTML e.g. <br/>.

HTML5
HTML5 provides details of all 40+ HTML tags including audio, video, header, footer, data, datalist, article etc. This
HTML tutorial is designed for beginners and professionals.

HTML5 is a next version of HTML. Here, you will get some brand new features which will make HTML much easier.
These new introducing features make your website layout clearer to both website designers and users. There are some
elements like <header>, <footer>, <nav> and <article> that define the layout of a website.

Why use HTML5


It is enriched with advance features which makes it easy and interactive for designer/developer and users.

It allows you to play a video and audio file.

It allows you to draw on a canvas.

It facilitate you to design better forms and build web applications that work offline.

It provides you advance features for that you would normally have to write JavaScript to do.

The most important reason to use HTML 5 is, we believe it is not going anywhere. It will be here to serve for a long
time according to W3C recommendation.

HTML 5 Example
Let's see a simple example of HTML5.

1. <!DOCTYPE>
2. <html>
3. <body>
4. <h1>Write Your First Heading</h1>
5. <p>Write Your First Paragraph.</p>
6. </body>
7. </html>
43
ACMS

HTML 5 Tags
There is a list of newly included tags in HTML 5. These HTML 5 tags (elements) provide a better document structure.
This list shows all HTML 5 tags in alphabetical order with description.

HTML Audio Tag


HTML audio tag is used to define sounds such as music and other audio clips. Currently there are three supported
file format for HTML 5 audio tag.

1. mp3
2. wav
3. ogg

HTML5 supports <video> and <audio> controls. The Flash, Silverlight and similar technologies are used to play the
multimedia items.

This table defines that which web browser supports which audio file format.

Browser mp3 wav ogg


Internet Explorer yes no no

Google Chrome yes yes yes

Mozilla Firefox yes* yes yes

Opera no yes yes

Apple Safari yes yes no

HTML Audio Tag Example


Let's see the code to play mp3 file using HTML audio tag.

1. <audio controls>
2. <source src="koyal.mp3" type="audio/mpeg">
3. Your browser does not support the html audio tag.
4. </audio>

44
ACMS

Output:

Let's see the example to play ogg file using HTML audio tag.

1. <audio controls>
2. <source src="koyal.ogg" type="audio/ogg">
3. Your browser does not support the html audio tag.
4. </audio>

Attributes of HTML Audio Tag


There is given a list of HTML audio tag.

Attribute Description
controls It defines the audio controls which is displayed with play/pause buttons.

autoplay It specifies that the audio will start playing as soon as it is ready.

loop It specifies that the audio file will start over again, every time when it is completed.

muted It is used to mute the audio output.

preload It specifies the author view to upload audio file when the page loads.

src It specifies the source URL of the audio file.

HTML Audio Tag Attribute Example


Here we are going to use controls, autoplay, loop and src attributes of HTML audio tag.

1. <audio controls autoplay loop>


2. <source src="koyal.mp3" type="audio/mpeg"></audio>

MIME Types for HTML Audio format


The available MIME type HTML audio tag is given below.

Audio Format MIME Type

mp3 audio/mpeg

45
ACMS

ogg audio/ogg

wav audio/wav

HTML Datalist Tag


The HTML <datalist> tag is is used to provide an auto complete feature on form element. It
provides a list of predefined options to the users to select data.

The datalist tag is introduced in HTML5.

The <datalist> tag should be used with an <input> element that contains a "list" attribute. The
value of "list" attribute is linked with the datalist id.

The HTML datalist tag supports global and event attributes also.

HTML datalist tag example


Let's see the simple example of HTML5 datalist tag. If you press A, it will show a list of
cricketers starting with A letter.

1. <label>
2. Enter your favorite cricket player: Press any character<br />
3. <input type="text" id="favCktPlayer" list="CktPlayers">
4. <datalist id="CktPlayers">
5. <option value="Sachin Tendulkar">
6. <option value="Brian Lara">
7. <option value="Jacques Kallis">
8. <option value="Ricky Ponting">
9. <option value="Rahul Dravid">
10. <option value="Shane Warne">
11. <option value="Rohit Sharma">
12. <option value="Donald Bradman">
13. <option value="Saurav Ganguly ">
14. <option value="AB diVilliers">
15. <option value="Mahendra Singh Dhoni">
16. <option value="Adam Gilchrist">
17. </datalist>
18. </label>

Output:

46
ACMS

47

You might also like