Learn HTML CSS Online

Lists in HTML

2022-06-19T05:18:00.001-07:00

List

Today we are going to talk about the List. Question arises what is List ? A list is a collection of items. There are five types of list in HTML They are defined below

Ordered List

If you want to display items in a numbered list like 1,2,3,... or A,B,C... or i,ii,iii.... or I,II,III... or a,b,c....... Ordered List starts with the <ol> tag and ends with the </ol> tag. Each item starts with the <LI> tag. It is also called the Numbered List.

Tags of Ordered List

<ol></ol>
<li></li>

Attributes of Ordered List

Attributes	Value	Description
Type	“1” or “I” or “I” or “a” or ”A”	It specifies type of numbering's. By default the numbering
Start	Value	To specify the starting point of the numbering.

Example

<html>
<head>
<title>
ordered list
</title>
</head>
<body>
<ol>
<li>pen</li>
<li>pencil</li>
<li>book</li>
</ol>
</body>
</html>

Ordered List with Type attribute

Example

<html>
<head>
<title>
ordered list
</title>
</head>
<body>
<ol type="a">
<li>pen</li>
<li>pencil</li>
<li>book</li.>
</ol>
</body>
</html>

Ordered List with Type and Start attribute

Example

<html>
<head>
<title>
ordered list
</title>
</head>
<body>
<ol type="a" start="4">
<li>pen</li>
<li>pencil</li>
<li>book</li.>
</ol>
</body>
</html>

How to create HTML Forms - II

2022-06-19T03:51:00.004-07:00

How to create HTML Form - II

In this tutorial, we will learn about How to create HTML Form. So far we have discussed how to create a frame, tables, List, insert Images, Linking in HTML etc. HTML Form is one of the most important part of the websites Every website has Contact forms or feedback forms.. Filling the Digital forms saves time, cost of printing, and paperwork.

Submit Button

Submit button It is used for submitting the form data to the server page.

Example:

How to create form - Submit button

Output is:

How to create form- Sumit Button

<Select></Select>

<select></select> It is used to create Popup menu and a List.<option></option> is used to define the option in the drop-down menu or the list.

Attributes of <select></select>

Name = name - Name of the drop down menu or list
Size= value - To specify the number of visible values.
Selected - To define Pre-selected item.
Multiple - Allows to select more than one item

A. To create drop down list

Example:

How to create form-Popup menu

Output is:

How to create a form - Popup menu

B. To create the list.

Example:

How to create a form - List

Ouput is:

How to create form - List

BACK

HOME

How to create HTML Form - I

2018-05-04T04:16:00.002-07:00

How to create HTML Form

What is a form?

Dictionary meaning of the form is a blank document or template to be filled in by the user, in the same way as HTML Forms. HTML Forms are used to gather/collect information about an user or customer, such as his or her e-mail address, name, address, phone, date of birth and, educational qualification etc.

<form></form> tag is used to create the HTML Form as given below.

<form action="abc.php" method="">

----------

---------

</form>

Attributes of <form> tag
1. Action = "abc.php" - The action to be performed when the form is submitted.
2. Method="Post" or "Get" - By default, the method is Get. It is used to display the submitted form data in the address bar of the browser. If the user changes the method to post then the submitted form data will not appear in the address bar of the browser. It is used to send a large amount of data in one go.

Form Controls

<Input> :

<input> tag is used to create interactive controls using type attributes.

1. <input type="Text"> Text is used to enter single line data. i.e. not more the 255.
2. <input type="radio"> Radio is used to create radio button. It is used to select only one
option from multiple options.
3. <input type="submit"> Submit button is used to submit the form.
4. <input type ="checkbox"> Checkbox is used to create Checkbox. It is used to select multiple.

Atributes of <input> tag

Type="radio" / "text"/"checkbox"/"submit"
Name="name of the element"
Value= "text" - specifies the default value.
Maxlength=value - Specifies the maximum number of characters in the text box.
Size=value - Specifies the width of the text box.

Text in the Form

Text is used to enter single line data i.e. not more than 255 characters.

Example:

How to create form- Text

The output is :

How to create form - text

Radio Button in the Form

Radio button is used to select only one option out of many option.

Example:

Output is

How to create form - radio button

Output is :

How to create form - Radio button

Text Area in the Form

Textarea it is used to enter the multi-line text.
Atributes of Textarea:

name="name of the textarea"
rows=value - Numbers of rows.
cols=value - Numbers of column.

Example:

To create form using Textarea

Output is

How to create form using Textarea

HTML WEB PAGE DESIGN - How to Create simple HTML web page

2018-02-18T04:56:00.003-08:00

How to Design Simple HTML Web page

In this article, we are going to learn how to design HTML web page. This article is used to let you know, how to create a simple web page using HTML. With this article you will come to know how to create the simple web page from scratch. To create the web page one should use the editors like notepad or Dreamweaver or Notepad++ etc. Here we are using Notepad ,in this connection steps are initiated to be as following

HTML Web Page Design

A web page is a part of a website, containing information about a particular topic. You can create a custom web page using HTML. You can put anything you want on your web page like images, tables, hyperlinks, etc.

Open Notepad:

To open the Notepad one has to go to Start -> All Programs -> Accessories ->Notepad.

Notepad

Once Notepad is open write the coding their as given below

1.<HTML> is the first tag of the web page and you have to write it at the top of the notepad.

Create simple HTML web page

2. Next tag is <head> tag. The <head> tag is a container for all the head elements can include a title of the web page, script tag, style tag, meta data.

design simple Html web page

3.After writing the <head> tag next tag is <title> tag which is used for writing title of the my web page. Write any text between <title> and </title> tags, then close the head tag.

how to design simple web page

4. After closing the head tag the start the <body> tag in which one can write any text, display images, draw tables. make lists etc.

how to create simple web page

5. After writing the text close the </body> tag and then close the </html> tag. Now basic structure of the HTML is ready, lets apply formatting to the web page. If you want to change the background color of the web page then you have to apply an attribute of the body tag i.e. bgcolor

how to create a simple web page

the above code will change the background color of the web page to the red color.now I want to change the color of the text from black to any other color then text attribute is used. It is the attribute of the body tag.

how to create simple web page

the above code will change both the background color and the color of the text.

6. If you want to apply background image then we have to use background attribute of the body tag.

how to create simple web page

so the full program is

how to create simple web page

To save the file File->Save as-> Enter file name with the extension i.e. .html or .htm and then open the Internet explorer or any other browser. File ->open -> Browse-> select file name-> click on the open button

HTML WEB PAGE DESIGN - OUTPUT

In this article, you have learned how to create or design web page using text editors

HTML FRAMES - HTML Frames Example with Output

2016-12-02T00:23:00.002-08:00

Post Updated :16-02-2018
HTML Frames is used to display more than one file. It is used to divides the browser window into different parts or sections i.e. row-wise or column-wise or row and column-wise . Each section can display HTML files.To create a frame two tags are used they are <frameset> and <frame> tag.

Attributes of <frameset> tag

1. Cols=value is % or pixels
2. Rows= values in % or pixels

Attributes of <frame> tag

1. Src= "path"
2. Name="name of the frame"
3. Border= value in pixels
4. Noresize
5. Scrolling="true" or "false"
6. Marginwidth=value in % or pixels
7. Marginheight=value in % or pixels

If I want to divide the browser into two columns. The following example will be used to divide the window into 2 section. In the example given below we are using to divide the browser into equal sections i.e. 50% each.

HTML Frames Example with Output

Simple example of two- framed page

<html>
<head>
<title> frames</title>
</head>
<frameset cols="50%,50%">
<frame src="a.html">
<frame src="b.html">
</frameset>>
</body>
</html>

Output is

HTML Frames Example with Output

If you want to divide the browser into two rows than we have to use rows attribute instead of the column attribute.The following example is used to divide the browser into two equal sections i.e. 50% each.

Simple example of two-framed page

<html>
<head>
<title> frames</title>
</head>
<frameset rows="50%,50%">
<frame src="a.html">
<frame src="b.html">
</frameset>>
</body>
</html>

Output is

HTML Frame with Output

If you want to display more than two like four, five six, etc HTML files. The following example will display four html files . The coding is as given below

Simple example of four-framed pages

<html>
<head>
<title>
frames
</title>
</head>
<frameset rows="50% , 50%">
<frameset cols="50%,50%">
<frame src="a.html">
<frame src="b.html">
</frameset>
<frameset cols = "50%,50%">
<frame src="c.html">
<frame src="d.html">
</frameset>
</frameset>
</html>

Output is

HTML Frames

Linking in html

2015-04-11T02:34:00.005-07:00

Linking is used for linking the web page with the another web page. One can create linking with <a> </a> tag. It is also called anchor tag. One can create linking with the text, linking with the image.

The attribute of <a></a>

href="path"
target="frame name" or _top or _blank or _self or _parent

Linking with the Text

One can create linking with the text. Example of it is given below

Example

<html>
<head>
<title>
linking with text
</title>
</head>
<body>
<a href="file:///C:/Program%20Files/Java/jre1.8.0_31/Welcome.html">click here</a>
</body>
</html>

The output of the above code is

Linking with Image

Now, one can also create linking with the image.

Example

<html>
<head>
<title>
linking with image
</title>
</head>
<body>
<a href="file:///C:/Program%20Files/Java/jre1.8.0_31/Welcome.html">
<img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" width=200 height=200 alt="hello" align="left">
</a>
</body>
</html>

The output of the above code is

Linking in Same Page

Now, question arises how to create the linking in same page.

Example

<HTML>

<head>
<title>
he</title>
</head>
<body>
<a href="#a">bottom</a>
<a name="b"></a>
<img src="C:\Downloads\imagesman.jpeg">

<a href="#b">top</a>
<a name="a"></a>
</body>
</html>

The output of the above example is

Lists in HTML - Definition List

2015-02-05T08:36:00.001-08:00

Definition lists is used to define the term and with its description. It starts with the <DL> and endswith the </DL> tag The data term is defined inside the <DT> and </DT> tag. The data description is defined inside the tag <DD>and </DD>. It has no attributes.

Tags of Definition List

<DL></DL>
<DT></DT>
<DD></DD>

Example

<html>

<head>

<title>

definition list

</title>

</head>

<body>

<dl>

<dd> word is a word processor</dd>

<dt>excel</dt>

<dd> Excel is a spread sheet</dd>

</dl>

</body>

</html>

This will produce the following output

Menu List

It is used for creating menu list. It is created with the help of <menu></menu> and <li></li>.

Example

<html>
<head>
<title>
menu list
</title>
</head>
<body>
<menu>
<li>ordered list</li>
<li>unordered list</li>
</menu>
</body>
</html>

The output of the above code is

Directory List

The <dir> tag is used to list directory list. Directory List is created with the help of the <DIR></DIR> tag. Items appears with the help of the <li></li>.

Example

<html>

<head>

<title>

directory list

</title>

</head>

<body>

<dir>

</dir>

</body>

</html>

The output of the above

How to Add Image in HTML Website

2015-02-05T07:50:00.002-08:00

In this tutorial, we are going to show you how to add an image in HTML website.

<img> tag is used to display image in the document. It has no ending tag. It is an empty tag.The attribute of <img> tag is as follows.

Attributes of <img> tag

Attributes	Value	Description
Src	Path.	The path of the image.
Width	Value in pixels or %.	Sets the width of the image.
Height	Value in pixels or %.	Sets the height of the image.
Alt	Text.	To display the alternate text.
Hspace	Value in pixels.	To set the horizontal spacing in pixels or percentage.
Vspace	Value in pixels.	To set the vertical spacing in pixels or percentage.
Align	Left Right Top Middle Bottom Absbottom (absolute bottom).	To set the alignment of the image.
Border	Value in pixels or percentage.	Specifies the width of the images border.

Now. lets insert image in the html document.

Add Image In HTML Web Page

<html>
<head>
<title>
image tag
</title>
</head>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\Lighthouse.jpg" width=200 height=200>
</body>
</html>

Output is

In the above example you have seen image with attribute width and height.

Learn : How to add html frames

Table in HTML

2014-09-23T23:03:00.003-07:00

Table is used to store data in the form of rows and columns.<Table> </Table > tag is used for creating the table. Tags used for creating the table is as follows

Tags	Description
<table></table>
<tr></tr>	It defines the table row.
<th></th>	It defines the table heading.
<td></td>	It defines the table data.
<caption></caption>	It defines the caption of the table.

Attributes of the <table></table> tag.

Attributes	Value	Description
Bgcolor	Color name	Changes the background color of the table.
Background	Path of the image	Applies the image as the background.
Border	Value (eg. 1,2,10)	It is used to apply the border thickness of the table.
BorderColor	Color name	It changes the color of the table border.
Width	Value in percentage or pixels	It is used to change the width of the table according to the value specified.
Height	Value in percentage or in pixels.	It is used to change the height of the table according to the value specified.
Align	Left or right or center	It applies the alignment on the table. By default the alignment of the table is left.
CellSpacing	Value in pixels	It is used for applying the space between the cells
Cellpadding	Value in pixels	It is used for applying the spacing between the cell Text and the cell border.

<tr></tr> tag is used to define the table row. the attributes of the table tag is as follows

Attributes of the <tr></tr> tag.

Attributes	Value	Description
Bgcolor	Color name	To change the color of the row.

Attributes of the <th></th> tag.

Attributes	Value	Description
Bgcolor	Color name	To change the color of the row.
Background	Path	To display the picture on the background.
Rowspan	Value	To apply row spanning.
Colspan	Value	To apply column spanning.

Attributes of the <td> </td> tag.

Attributes	Value	Description
Bgcolor	Color name	To change the color of the row.
Background	Path	To display the picture on the background.
Rowspan	Value	To apply row spanning.
Colspan	Value	To apply column spanning.

Now, let us create a table without the border tag as given below.

<html>

<head>

<title>

table without borders

</title>

<body>

<table>

<tr>

<th>Marks</th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Output of the above example is given below

In the above example we have seen the table without borders. Now I want to create the table with the border, then the question arises how to create it? the answer to the question is, it can be created with the border attribute of the table tag. The following example will show as how to use the same.

<html>

<head>

<title>

table without borders

</title>

<body>

<tr>

<th>Marks</th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Output of the above example is

If we want to increase the thickness of the border. The following example will show you how to increase the thickness of the table border.

<html>

<head>

<title>

table with boder thickness

</title>

<body>

<tr>

<th> Marks</th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Output of the above example is

Now, if we want to apply border color and the alignment of the table then the border color and the alignment attributes is used.

<html>
<head>
<title>
table with tags
</title>
</head>
<body>
<table border=10 bordercolor="red" align="center">
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone No.</th>
</tr>
<tr>
<td>Anu </td>
<td>sector-14</td>
<td>234567</td>
</tr>
</table>
</body>
</html>

Output of the above example is

Table Tag with the Rowspan and Colspan

Rowspan and Colspan attribute of the <table> tag, is used for spanning the row and the column across the table.

<html>
<head>
<title>
table tag
</title>
</head>
<body>
<table border>
<tr>
<th rowspan=2>Name</th>
<th colspan=2>Timings</th>
<th rowspan=2>Sign</th>
</tr>
<tr>
<th>To</th>
<th>From</th>
</tr>
<tr>
<td>Neeru</td>
<td>3/4/2014</td>
<td>4/5/2014</td>
<td>nr</td>
</tr>
<tr>
<td>Neetu</td>
<td>3/4/2014</td>
<td>4/5/2014</td>
<td>nt</td>
</tr>

</table>

</body>
</html>

Output is

Table with CellPadding

The CellPadding attribute of the table tag, is used to apply spacing between the content of the cell and the cell borders in pixels.

Example of the table tag with the cellpadding attribute is given below

<html>
<head>
<title>
table with cellpadding
</title>
</head>
<body>
<table border cellpadding=20>
<tr>
<th>Name</th>
<th>Address</th>`
<th>Phone No.</th>
</tr>
<tr>
<td>Deepak</td>
<td>Lane 2, Panipat</td>
<td>9897897342</td>
</tr>
</table>
</body>
</html>

Output of the above example is given below

Lists in HTML - Unordered List

2014-08-24T10:32:00.004-07:00

Unordered List

An Unordered List is a collection of item that is not in sequential order. It starts with the <ul> tag and ends with the </ul> tag. Each list item starts with the <li> tag. Each item is marked with the bullet i.e. with the disc or square or circle. By default the tag starts with the disc. It is also called Bulleted list.

Tags of Unordered List

<ul> </ul>
<li></li>

Example

Write a program to print the list given below

pen
pencil
book

<html>
<head>
<title>
unordered list
</title>
</head>
<body>
<ul>
<li>pen</li>
<li>pencil</li>
<li>book</li>
</ul>
</body>
</html>

Example of Attributes of <ul> tag with the Type attributes

Write a program to print the list given below

<html>
<head>
<title>
unordered list
</title>
</head>
<body>
<ul start="square">
<li>pen</li>
<li>pencil</li>
<li>book</li>
</ul>
</body>
</html>

Basic Formatting Tags of HTML - 4

2014-08-22T02:48:00.005-07:00

Heading Tags

It is used for applying headings of different sizes to the web page. Headings are defined with the <h1>,<h2>,<h3> , <h4>,<h5> , <h6>.

Example

<html>

<head>
<title>
headings tag</title>
</head>
<body>
<h1>education</h1>
<h2>education</h2>
<h3>education</h3>
<h4>education</h4>
<h5>education</h5>
<h6>education</h6>
</body>
</html>

Paragraph Formatting

<p></p> tag is used to define the block of the text as paragraph. It has only one attribute which is defined below

Attribute	Value	Description
align	Left or Right or Center or Justify	By default the alignment of the paragraph is LEFT.

Example

<html>
<head>
<title>
paragraph tag
</title>
</head>
<body>
<p>

Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.

</p>

</body>

</html>

Paragraph Tag with Alignment

Example

<html>
<head>
<title>
paragraph tag
</title>
</head>
<body>
<p align="center">

</p>

</body>

</html>

Comment Tag

<comment></comment> tag is used not to display the matter defined inside the tag. Types of comment tags

Tags

comment></comment>

Example

<html>

<head>
<title>comment tag</title>
</head>
<body>
<comment> Hello World</comment>
Education times

</body>
</html>

Line Break

<br> tag is used to break the line. In the web page where ever you apply the <br> tag from their on the matter will moves to the next line.

Example

<html>

<head>

<title>

line break

</title>

<body>

Hello Tina
<br>

How are you?

</body>

</html>

Horizontal Rule

<hr> tag represents a thematic change in the web page. This tag draws a horizontal line across the whole page. The attributes of the <hr> tag

Attribute	Value	Description
Align	Left or Right or Center	By default the alignment of the <hr> tag is center If the align=”left” then the horizontal line appears on left hand side If the align=”right” then the horizontal line appears on right hand side
Size	Value in pixel or %	Change the size of the <hr> tag
Color	Colorname	Apply the color on the <hr> tag
Width	Value in pixel or %	Sets the width of the rule.

Basic Formatting Tags in HTML - 3

2014-08-18T10:31:00.002-07:00

Strike Text

<s></s>tag is used to apply strike through on the text which is defined inside the tag.

Example:

<html>
<head>
<title>
strike through
</title>
</head>
<body>
HTML <s>developer</s>
</body>
</html>

Bold Text

<strong></strong> tag is used to apply bold on the text which is defined within the tag.

Example

<html>

<head>
<title>
bold text
</title>
</head>
<body>
Education <strong>point</strong>
</body>
</html>

Emphasize the Text

<em></em> tag is used to emphasis the text defined inside the tag.

Example

<html>
<head>
<title>
italic text
</title>
</head>
<body>
Education <em>point</em>
</body>
</html>

Basic Formatting Tags of HTML - 2

2014-08-18T09:05:00.002-07:00

Subscript the Text

<sub></sub> tag is used to display the text or figure or symbols below the baseline, slightly of small size then normal text. It is used to display mathematical formulas, footnote, end-notes.

Example

<html>

<head>
<title>
subscript the text
</title>
</head>
<body>
H<sub>2</sub>O
</html>

Larger Text

<big></big> tag is used to increase the size of the text by 1 point.

Example

<html>

<head>

<title>

to increase the size of the text 1 point
</title>
</head>
<body>
Education <big>point</big>
</body>
</html>

Smaller Text

<small></small> tag is used to decrease the size of the text by one point.

Example

<html>

<head>
<title>
to decrease the size
</title>
</head>
<body>
Education <small>time</small>
</body>
</html>

Strike Text

<strike></strike> is used to apply strike through on the text.

Example

<html>
<head>
<title>
to apply strike through
</title>
</head>
<body>
time is <strike>precious</strike>
</body>
</html>

Basic Formatting Tags of HTML - 1

2014-08-15T09:25:00.005-07:00

Bold Text

<b></b> tag is used to apply bold on the text appearing inside the tag.

Example

<html>

<head>

<title>

bold text

<body>

<b>Education is one of the precious thing of the world</b>

</body>

</html>

Italic Text

<i></i> tag is used to apply italic on the text appearing inside the tag.

Example

<html>

<head>

<title>

italic text

</title>

<body>

<i>Education is one of the precious thing of the world</i>

</body>

</html>

Underline the Text

<u></u> tag is used to apply to underline the text appearing inside the tag.

Example

<html>

<head>

<title>

underline the text

</title>

</head>

<body>

<underline>education</underline>

</body>

</html>

Superscript the Text

<sup></sup> tag is used to display the text or figure or symbols above the baseline, slightly of a small size than normal text. It is used to display mathematical formulas, footnotes, and end notes.

Example

<html>

<head>

<title>

superscript the text

</title>

</head>

<body>

45<sup>5</sup>

</body>

</html>

Introduction of HTML

2014-08-15T09:05:00.005-07:00

Learn HTML, it is a markup language which is used for creating Web Pages. HTML stands for Hyper Text Markup Language. It was developed by Tim Berners-Lee in 1991. It is the official language of World Wide Web for developing web pages. It is descendant of SGML i.e., standard generalized markup language. It is used to define the structure of the web page.

In HTML, one can create web pages using the collection of tags HTML tags are surrounded by angular bracket(< >). The extension of the HTML file is .htm or html.

Types of tags

1. Container tag

2. Empty tag

Container tag

It has both starting and ending tag

Example

<b></b>

Empty Tag

It has only starting tag.

Example

Basic Structure of HTML

<html>

<head>

<title>

My first page

</title>

</head>

<body>

Hello

</body>

</html>

Definition of Basic Structure Tags

<HTML></HTML>	<HTML> tells the browser, that from here html’s coding has started. It is a container tag. </html> tells the browser that html document has been finished.
<head></head>	It displays the header of the document.
<title></title>	It displays the title of the web page. It is used inside the <head> </head> tag.
<body></body>	It defines the document body. It displays text, images, tables, list, hyperlinks , forms etc. in it.

Software Requirement for Creating Web Pages

Notepad
Any browser like Mozilla Firefox, Internet Explorer, Google Chrome etc.

Learn HTML CSS Online

Lists in HTML

List

Ordered List

Attributes of Ordered List

Ordered List with Type and Start attribute

How to create HTML Forms - II

How to create HTML Form - II

How to create HTML Form - I

How to create HTML Form

Form Controls

HTML WEB PAGE DESIGN - How to Create simple HTML web page

How to Design Simple HTML Web page

HTML Web Page Design

HTML FRAMES - HTML Frames Example with Output

HTML Frames Example with Output

Linking in html

Lists in HTML - Definition List

Tags of Definition List

Menu List

Directory List

How to Add Image in HTML Website

Attributes of <img> tag

Add Image In HTML Web Page

Table in HTML

Attributes of the <table></table> tag.

Table Tag with the Rowspan and Colspan

Output is

Table tag with CellSpacing and CellPadding

Table with CellPadding

Lists in HTML - Unordered List

Unordered List

Basic Formatting Tags of HTML - 4

Heading Tags

Paragraph Formatting

Comment Tag

Line Break

Horizontal Rule

Basic Formatting Tags in HTML - 3

Strike Text

Bold Text

Emphasize the Text

Basic Formatting Tags of HTML - 2

Subscript the Text

Larger Text

Smaller Text

Strike Text

Basic Formatting Tags of HTML - 1

Bold Text

Italic Text

Underline the Text

Superscript the Text

Introduction of HTML