Scribd
Upload
70 views

Lectures Hands-On HTML

This document provides an evaluation sheet and lecture content for HTML Programming (ACT 2). The evaluation sheet lists 38 activities related to HTML tags and formatting and provides a rating and remarks section. The lecture content covers topics such as the definition of HTML, a simple HTML example, HTML tags and their syntax, unclosed tags, meta tags, text tags, links, images, lists, tables, forms, and scripting. It also provides the history of HTML and features of HTML.

Uploaded by

Afar Salvadora
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
70 views

Lectures Hands-On HTML

This document provides an evaluation sheet and lecture content for HTML Programming (ACT 2). The evaluation sheet lists 38 activities related to HTML tags and formatting and provides a rating and remarks section. The lecture content covers topics such as the definition of HTML, a simple HTML example, HTML tags and their syntax, unclosed tags, meta tags, text tags, links, images, lists, tables, forms, and scripting. It also provides the history of HTML and features of HTML.

Uploaded by

Afar Salvadora
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 66

Lecture and Comprehensive Exercise

in

Web Design and Development

HTML Programming
(ACT 2)

Name:
Crs-Yr.:

Time: ___________________
Term &Year: ___________________
Department: ________________________________
Instructor: ______________________
ACT 2 – HTML Programming Web Design and Development rrv2017

Evaluation Sheet
{HTML Programming)

Name: ______________________ Crs& Yr. ______________ Term: ________


No. Activities Lectur Update Laborator Rating Remarks
e y
1 Simple Example
2 HTML Tags
3 Unclosed HTML Tags
4 HTML Meta Tags
5 HTML Text Tags
6 HTML Link Tags
Interactive #1
7 HTML Image Object Tags
8 HTML List Tags
9 HTML Table Tags
10 HTML Form Tags
11 HTML Scripting Tags
12 HTML Formatting
Interactive #2
13 HTML Marked Formatting
14 HTML Heading
15 HTML Paragraph
16 HTML Anchor
17 HTML Image 2
18 HTML Table
Interactive #3
19 HTML Table Tags
20 HTML Table Example
21 HTML Table with Border
22 HTML Border Attribute
23 HTML Table with cell padding
24 HTML Table with colspan
Interactive #4
25 HTML Table with rowspan
26 HTML Table with caption
27 HTML Lists
28 HTML Ordered Lists and
Numbered Lists
29 HTML Unordered List or
Bulleted List
30 HTML Description List or
Definition List
Interactive #5
Partial Rating ->

2
ACT 2 – HTML Programming Web Design and Development rrv2017

Continuation…

Evaluation Sheet
{HTML Programming)
No. Activities Lectur Update Laboratory Rating Remarks
e
31 HTML Form
32 HTML Text Form Control
33 HTML Password Field Control
34 HTML Form Example
35 Marquee HTML
36 HTML Textarea
Interactive #6
37 HTML Textarea Form Attribute
38 HTML Quotes
39 HTML Blackquote tag
40 HTML Style
41 HTML Title
42 Doctype HTML
Interactive #7
43 HTML Div Tag
44 HTML Pre Tag
45 HTML Code Tag
46 HTML Label Tag
47 HTML Input Tag
48 HTML Button Tag
Interactive #8
Final Rating 

Conforme
_________________________

3
ACT 2 – HTML Programming Web Design and Development rrv2017

What is HTML
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>  
Test it Now

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.

4
ACT 2 – HTML Programming Web Design and Development rrv2017

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.

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.

5
ACT 2 – HTML Programming Web Design and Development rrv2017

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>

<h2> Heading Tag </h2>


<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>

Test it Now

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

6
ACT 2 – HTML Programming Web Design and Development rrv2017

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>

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

7
ACT 2 – HTML Programming Web Design and Development rrv2017

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.

See this example:

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

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>   
Test it Now

Output:

Write Your First Paragraph in italic text.

8
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

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:

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

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>   
Test it Now

9
ACT 2 – HTML Programming Web Design and Development rrv2017

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>   
Test it Now

Output:

Hello Write Your First Paragraph in monospaced font.

7) Superscript Text
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>    
Test it Now

Output:

Hello Write Your First Paragraph in superscript.

10
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

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>   
Test it Now

Output:

Hello Delete your first paragraph.

10) Inserted Text


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.</in
s></p>   
Test it Now

Output:

11
ACT 2 – HTML Programming Web Design and Development rrv2017

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>   
Test it Now

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>   
Test it Now

Output:

Hello Write the paragraph in smaller font.

HTML Heading

HTML Heading

12
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

Output:

Heading no. 1
Heading no. 2
Heading no. 3
Heading no. 4
Heading no. 5

Heading no. 6

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.

See this example:

13
ACT 2 – HTML Programming Web Design and Development rrv2017

1. <p>This is first paragraph.</p>  
2. <p>This is second paragraph.</p>  
3. <p>This is third paragraph.</p>  
Test it Now

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>  
Test it Now

Output:

14
ACT 2 – HTML Programming Web Design and Development rrv2017

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.

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>  
Test it Now

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.

15
ACT 2 – HTML Programming Web Design and Development rrv2017

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"/>  
Test it Now

Output:

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.

16
ACT 2 – HTML Programming Web Design and Development rrv2017

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 .

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.

17
ACT 2 – HTML Programming Web Design and Development rrv2017

<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>  
Test it Now

Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

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

18
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

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>  

19
ACT 2 – HTML Programming Web Design and Development rrv2017

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

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>  
Test it Now

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 {  

20
ACT 2 – HTML Programming Web Design and Development rrv2017

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

Output:

Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetn
Singh 72
a

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 {  

21
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

Output:

Name Mobile No.

AjeetMaurya 7503520801 9555879135

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. }  

22
ACT 2 – HTML Programming Web Design and Development rrv2017

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>   
Test it Now

Output:

Name AjeetMaurya

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>  
Test it Now

23
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

Output:

24
ACT 2 – HTML Programming Web Design and Development rrv2017

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)

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>  
Test it Now

Output:

1. Aries

2. Bingo

3. Leo

4. Oracle

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

25
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

Output:

o Aries

o Bingo

o Leo

o Oracle

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).

26
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

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:

o Numeric Number (1, 2, 3)

o Capital Roman Number (I II III)

o Small Romal Number (i ii iii)

o Capital Alphabet (A B C)

o Small Alphabet (a b c)

27
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

Output:

1. HTML

2. Java

3. JavaScript

4. SQL

28
ACT 2 – HTML Programming Web Design and Development rrv2017

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

1. <ol type="I">  
2.  <li>HTML</li>  
3.  <li>Java</li>  
4.  <li>JavaScript</li>  
5.  <li>SQL</li>  
6. </ol>  
Test it Now

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>  
Test it Now

Output:

i. HTML

ii. Java

iii. JavaScript

iv. SQL

29
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

Output:

A. HTML

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>  
Test it Now

Output:

a. HTML

b. Java

c. JavaScript

30
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

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:

o disc

31
ACT 2 – HTML Programming Web Design and Development rrv2017

o circle

o square

o 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>  
Test it Now

Output:

o HTML

o Java

o JavaScript

o SQL

32
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

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>  
Test it Now

Output:

o HTML

o Java

o JavaScript

o SQL

ul type="none"

33
ACT 2 – HTML Programming Web Design and Development rrv2017

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

Output:

o HTML

o Java

o JavaScript

o 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>  
Test it Now

34
ACT 2 – HTML Programming Web Design and Development rrv2017

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.

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">  

35
ACT 2 – HTML Programming Web Design and Development rrv2017

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


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

36
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  

37
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  

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"/>Femal
e <br/>  
5. </form>  

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

38
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
3. <tr>  
4.     <td class="tdLabel"><label for="register_name" class="label">Enter name:</l
abel></td>  
5.     <td><input type="text" name="name" value="" id="register_name" style="wid
th:160px"/></td>  
6. </tr>  
7. <tr>  
8.     <td class="tdLabel"><label for="register_password" class="label">Enter passw
ord:</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:</l
abel></td>  
13.     <td  
14. ><input type="email" name="email" value="" id="register_email" style="width:16
0px"/></td>  
15. </tr>  
16. <tr>  

39
ACT 2 – HTML Programming Web Design and Development rrv2017

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" valu
e="register"/>  
38. </div></td>  
39. </tr>  
40. </table>  
41. </form>  
Test it Now

Marquee HTML
The Marquee HTML tag is a non-standard HTML element which is used to scroll a image or
text horizontally or vertically.

40
ACT 2 – HTML Programming Web Design and Development rrv2017

In simple words, you can say that it scrolls the image or text up, down, left or right
automatically.

Marquee tag was first introduced in early versions of Microsoft's Internet Explorer. It is
compared with Netscape's blink element.

Marquee HTML Example


1. <marquee>This is an example of html marquee </marquee>  
Test it Now

Output:

This is an example of html marquee 

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.

HTML Textarea Example


1. <textarea rows="9" cols="70">  
2. JavaTpoint textarea tag example with rows and columns.  
3. </textarea>  
Test it Now

Output:

41
ACT 2 – HTML Programming Web Design and Development rrv2017

New HTML 5 Textarea Attributes

Attribute Description

autofocus It specifies that a text area should be automatically get focused when the page is load

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 submiss

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">  

42
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

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.

next →← prev

HTML Quotes
HTML quotes are used to put a short quotation on your website. To do so, you need to
use HTML q tag and HTML blockquote tag.

HTML q tag
HTML q tag is used to put small quotation. To do so, write your text within
<q>.............</q> tag.

1. <p> Great quote on love and life.</p>  
2. <p> Dr. Seuss once said : <q>Reality is finally better than your dreams.</q></p
>  

43
ACT 2 – HTML Programming Web Design and Development rrv2017

Test it Now

Output:

Great quote on love and life.

Dr. Seuss once said : Reality is finally better than your dreams.

HTML blockquote tag


HTML blockquote tag is used to define a large quoted section. If you have a large
quotation then put the entire text within <blockquote>.............</blockquote> tag.

1. <p> Read this inspirational story.</p>  
2. <blockquote> According to scientists, the bumblebee's body is too heavy and its wi
ng span too   
3. small. Aerodynamically, the bumblebee cannot fly. But the bumblebee doesn't know t
hat and it   
4. keeps flying. When you don't know your limitations, you go out and surprise yourself. 
In hindsight, you   
5. wonder if you had any limitations. The only limitations a person has are those that ar
e self-  
6. imposed. Don't let education put limitations on you.</blockquote>  
Test it Now

Output:

Read this inspirational story.

According to scientists, the bumblebee's body is too heavy and its wing span too small.
Aerodynamically, the bumblebee cannot fly. But the bumblebee doesn't know that and it
keeps flying. When you don't know your limitations, you go out and surprise yourself. In
hindsight, you wonder if you had any limitations. The only limitations a person has are
those that are self- imposed. Don't let education put limitations on you.

HTML Tags which are used in Quotations and

44
ACT 2 – HTML Programming Web Design and Development rrv2017

Citation

Tag Description

<abbr> It defines the abbreviation or an acronym.

<address> It is used to define the contact information of the document writer.

<bdo> It defines the direction of the text.

<blockquote> It is used to define a section that is quoted from another source.

<q> It is used to put the small quotations.

<cite> It defines the title of source from where quotation or work is taken.

<define> It is used to define a definition term.

HTML Style
HTML Style is used to change or add the style on existing HTML elements. There is a
default style for every HTML element e.g. background color is white, text color is black etc.

The style attribute can by used with any HTML tag. To apply style on HTML tag, you should
have the basic knowledge of css properties e.g. color, background-color, text-align, font-
family, font-size etc.

The syntax of style attribute is given below:

1. style= "property:value"  

HTML Style color


The color property is used to define the text color.

45
ACT 2 – HTML Programming Web Design and Development rrv2017

Let's see a simple example of styling html tags by color property of css.

1. <h3 style="color:green">This is Green Color</h3>  
2. <h3 style="color:red">This is Red Color</h3>  
Test it Now

Output:

This is Green Color


This is Red Color

HTML Style background-color


The background-color property is used to define background color for the HTML tag.

Let's see an example of styling html tag by of css background-color property

1. <h3 style="background-color:yellow;">This is yellow background</h3>  
2. <h3 style="background-color:red;color:white">This is red background</h3>  
Test it Now

Output:

This is yellow background


This is red background

HTML Style font-family


The font-family property specifies the font family of the HTML tag.

Let's see an example of styling html tag by css font-family property

1. <h3 style="font-family:times new roman">This is times new roman font famil
y</h3>  
2. <p style="font-family:arial">This is arial font family</p>  
Test it Now

Output:

46
ACT 2 – HTML Programming Web Design and Development rrv2017

This is times new roman font family

This is arial font family

HTML Style font-size


The font-size property is used to define the text size of the HTML tag.

Let's see an example of font-size property

1. <h3 style="font-size:200%">This is 200% h3 tag</h3>  
2. <p style="font-size:200%">This is 200% p tag</p>  
Test it Now

Output:

This is 200% h3 tag


This is 200% p tag

HTML Style text-align


The text-align property is used to define the horizontal text alignment for the HTML
element.

Let's see an example of styling html tag by css text-align property

1. <h3 style="text-align:right;background-color:pink;">This text is located at right sid
e</h3>  
2. <p style="text-align:center;background-color:pink;">This text is located at center si
de</p>  
Test it Now

If you want to put heading at center or left, use "text-align:center" or "text-align:left"


respectively.

Output:

47
ACT 2 – HTML Programming Web Design and Development rrv2017

This text is located at right side

This text is located at center side

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>  
Test it Now 

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.

48
ACT 2 – HTML Programming Web Design and Development rrv2017

Doctype HTML
On the HTML document you have often seen that there is a <!DOCTYPE html> declaration
before the <html> tag. This <!DOCTYPE html> declaration is not an HTML tag. It is used to
instruct the web browser about the HTML page.

Actually, there are many type of HTML e.g. HTML 4.01 Strict, HTML 4.01 Transitional, HTML
4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1
etc.

The <!DOCTYPE> declaration refers Document Type Declaration (DTD) in HTML 4.01;
because HTML 4.01 was based on SGML. But HTML 5 is not SGML based language.

DTD defines the rules for the markup languages so that the browsers recognize the content
correctly.

The doctype declaration differs between HTML versions. The HTML 5 doctype declaration is
given below.

<!DOCTYPE html>

Let's see an example of HTML document with doctype declaration.

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <title>This is the title</title>  
5. </head>  
6. <body>  
7. This is the content of the document.  
8. </body>  
9. </html>  

Test it Now

HTML Div Tag


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

49
ACT 2 – HTML Programming Web Design and Development rrv2017

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 Javatpoint.com, Here you get tutorials on latest technologies.</p> 
 
3. <p>This is second paragraph</p>  
4. </div>  
Test it Now

Output:

Welcome to Javatpoint.com, Here you get tutorials on latest


technologies.

This is second paragraph.

Difference between HTML div tag and span tag

div tag span tag

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

HTML div element is used to wrap large HTML span element is used to wrap small
sections of elements. 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.

50
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

51
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

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.javatpoint;  
3. public class FirstJava{  

52
ACT 2 – HTML Programming Web Design and Development rrv2017

4. public static void main(String args[]){  
5. System.out.println("hello java");  
6. }  
7. }  
8. </pre>  
Test it Now

Output:

packagecom.javatpoint;
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.javatpoint; 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.

next →← prev

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).

53
ACT 2 – HTML Programming Web Design and Development rrv2017

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

<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>  
Test it Now

Output:

It is inside em tag.
It is inside strong tag.
It is inside dfn tag.
It is inside code tag.

54
ACT 2 – HTML Programming Web Design and Development rrv2017

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="" nam
e="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 />  
Test it Now

Output:

EMAIL-ID:

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.

55
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

Output:

First name: 

Last name: 
Submit

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

56
ACT 2 – HTML Programming Web Design and Development rrv2017

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.

HTML Button Tag


The <button> tag is used to create a clickable button within HTML form on your webpage.
You can put content like text or image within the <button>........</button> tag.

You should always specify the type attribute for a <button> tag. Different browsers use
different default type for the button element.

HTML Button tag can be used inside and outside the form.

If you use it inside the form, it works as the submit button. You can also use it as reset
button.

If you use it outside the form, you can call JavaScript function on it.

HTML Button Tag Example


Let's see the code to display the button.

1. <button name="button" type="button">Click Here</button>  
Test it Now

Output:

Click Here

HTML Button Example: Calling JavaScript Function

57
ACT 2 – HTML Programming Web Design and Development rrv2017

Let's see the code to call JavaScript function on button click.

1. <button name="button" value="OK" type="button" onclick="hello()">Click Here</
button>  
2. <script>  
3. function hello(){  
4. alert("hello javatpoint user");  
5. }  
6. </script>  
Test it Now

Output:

Click Here

HTML Button Example: Submit Form


Let's see the code to submit form on button click.

1. <form>  
2. Enter Name:<input type="text" name="name"/><br/>  
3. <button>Submit</button>  
4. </form>  
Test it Now

Output:

Enter Name:
Submit

HTML Button Example: Reset Form


Let's see the code to submit form on button click.

1. <form>  
2. Enter Name:<input type="text" name="name"/><br/>  
3. <button type="reset">reset</button>  
4. </form>  

58
ACT 2 – HTML Programming Web Design and Development rrv2017

Test it Now

Output:

Enter Name:
Reset

Attributes of HTML Button Tag


<button> tag supports all global attributes and some specific additional attributes.

There is given a list of HTML button tag attributes.

Attribute Description

autofocus It specifies that a button should automatically get focus while the loading of
the page.

disabled It specifies that a button shuld be disabled.

form It specifies one or more forms that the button belongs to.

formaction It is used for submit type. It specifies where to send the form data when
form is submitted.

formmethod It specifies how to send form-data.

formenctype It specifies how form-data should be encoded before sending it to server.

formnovalidat It specifies that the form data should not be validated on submission.
e

formtarget It specifies that where to display the response after submitting the form.

name It specifies the name of the button.

59
ACT 2 – HTML Programming Web Design and Development rrv2017

type It specifies the type of the button.

value It specifies the value of the button.

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>  
Test it Now

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.

HR tag in HTML 4.01 and HTML5?

60
ACT 2 – HTML Programming Web Design and Development rrv2017

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>  
Test it Now

Output:

If you want to break line


in a paragraph,
use the br element.

61
ACT 2 – HTML Programming Web Design and Development rrv2017

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/>.

HTML Script Tag


HTML script tag is used to specify client-side script such as JavaScript. It facilitate you to
place a script within your HTML document.

JavaScript is used for image manipulation, form validation, and dynamic content.

The syntax of script tag is given below:

1. <script>  
2.   //code to be executed  
3. </script>  

Attributes of HTML script tag

Attribute Description Compatibility

src It specifies the URL of an external script file. HTML 4.01,


HTML5

type It specifies the media type of the script. HTML 4.01

async It is a boolean value which specifies that the script is executed HTML5
asynchronously.

defer It is a boolean value which is used to indicate that script is HTML 4.01,
executed after document has been parsed. HTML5

62
ACT 2 – HTML Programming Web Design and Development rrv2017

Usage of script tag


There can be two usage of HTML script tag:

1. to embed script code

2. to link script file

Embed script code


The script tag can be used within <body> or <head> tag to embed the scripting code. Let's
see the example to have script tag within HTML body.

1. <script type="text/javascript">  
2. document.write("JavaScript is a simple language for javatpoint learners")  
3. </script>  
Test it Now

Output:

JavaScript is a simple language for javatpoint learners

Let's see the example to have script tag within HTML head tag.

1. <script type="text/javascript">    
2. function msg(){    
3.  alert("Hello Javatpoint");    
4. }    
5. </script>   
Test it Now

Link script file


The script tag can be used to link external script file by src attribute. It must be used within
the <head> tag only.

1. <script type="text/javascript" src="message.js" />  

63
ACT 2 – HTML Programming Web Design and Development rrv2017

Click me to see full example

HTML NoScript Tag


HTML <noscript> tag is used to define an alternate content for the users who have
disabled scripting from the browser and want to access the web page.

The <noscript> element can be used within <head> and <body> tags.

While using noscript tag inside <head> element, <noscript> must contain <link>, <style>,
and <meta> tags.

The text inside the <noscript> element will be displayed if the user's browser is not script
supporting.

The example of noscript tag is given below:

1. <script>  
2. document.write("Welcome to JavaTpoint")  
3. </script>  
4. <noscript>Sorry! Your browser does not support JavaScript.!</noscript>  
Test it Now

Output:

Welcome to JavaTpoint

Difference between HTML4 and HTML5

In HTML 4.01, <noscript> tag can be used inside the <body> tag only but in HTML5 it can
be used inside <head> and <body> tag.

Difference between HTML and XHTML

The noscript tag is not supported in XHTML.

64
ACT 2 – HTML Programming Web Design and Development rrv2017

The noscript tag supports global and event attributes in HTML.

HTML bold tag


HTML bold tag is represented by <b> tag.

HTML <b> tag is used to display the written text in bold format. It is strictly a
presentational element. If you want to show your text in bold letters and not have real
semantic meaning, then put it within <b>.......</b> tag.

Difference between HTML <b> and <strong> tag


The b tag is explicit whereas strong tag is semantic.The<strong> tag adds extra semantic
meaning to the HTML document.

It is recommended to use strong tag for bold format now.

HTML bold tag example


1. <p> Hello guys, <b>this is the method to write bold text.</b></p>  
Test it Now

Output:

Hello guys, this is the method to write bold text.

Note: According to HTML5 specification, b tag should be used only if no other tag is appropriate. For
example: If you want to write a heading, you must use the header tag <h1> to <h6>. Important
statement should be denoted within <strong>.....</strong> tag, and the text you want to mark or
highlight, must be put within <mark>...</mark> tag.

There is also a CSS 'font-weight' property to set bold text.

65
ACT 2 – HTML Programming Web Design and Development rrv2017

End here Congratulations…

66

You might also like